/* ── MOBILE MENU & NAV HAMBURGER (Global Hide for PC) ────────── */
@media (min-width: 1025px) {
  #mobile-menu {
    display: none !important;
  }
}

.nav-hamburger {
  display: none !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--c-dark);
  transition: color 0.4s var(--expo);
}
.btn-primary { background-color: var(--c-primary); color: var(--c-bg); position: relative; overflow: hidden; transition: all 0.4s var(--expo); } .btn-primary::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, transparent 60%); opacity: 0; transform: scale(0.5); transition: all 0.5s ease; pointer-events: none; } .btn-primary:hover::after { opacity: 1; transform: scale(1); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(43, 74, 59, 0.45); } .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; } .word-inner { display: block; transform: translateY(110%); will-change: transform; } /* ══ NAVBAR ══════════════════════════════════════════════════════ */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 2.25rem 5rem; display: flex; justify-content: space-between; align-items: center; transition: padding 0.5s ease, background 0.5s ease; opacity: 0; } @media (max-width: 768px) { #navbar { padding: 1.5rem 2rem; } } #navbar.is-scrolled { background: rgba(253, 251, 247, 0.94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; } .nav-logo { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: var(--c-dark); text-decoration: none; } .nav-links { display: flex; gap: 2.5rem; } @media (max-width: 768px) { .nav-links { display: none; } } .nav-link { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(26, 26, 26, 0.6); text-decoration: none; transition: color 0.3s ease; } .nav-link:hover { color: var(--c-primary); } .nav-cta { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.4rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 9999px; text-decoration: none; border: 1.5px solid var(--c-primary); color: var(--c-primary); transition: all 0.35s var(--expo); } .nav-cta:hover { background: var(--c-primary); color: var(--c-bg); } /* ══ PREMIUM ANIMATION UTILITIES ═════════════════════════════════ */ /* Personalização básica do scrollbar para ser visível e premium */     .hero-grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, rgba(26, 26, 26, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 26, 26, 0.05) 1px, transparent 1px), linear-gradient(to right, rgba(26, 26, 26, 0.018) 1px, transparent 1px), linear-gradient(to bottom, rgba(26, 26, 26, 0.018) 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; /* Grid is stronger near text (left) and fades toward the image area (right), creating depth */ mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, transparent 72%); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, transparent 72%); } /* ── GRAIN NOISE TEXTURE ────────────────────────────────────────── */ #hero-grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.028; pointer-events: none; z-index: 9998; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* ── MOUSE SPOTLIGHT (enhanced warm) ─────────────────────────── */ #hero-spotlight { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(43, 74, 59, 0.055), transparent 60%); opacity: 0; transition: opacity 0.6s ease; } #hero-viewport:hover #hero-spotlight { opacity: 1; } /* ── SHIMMER BEAM BUTTON (conic-gradient advanced) ──────────────── */ .btn-beam-container { position: relative; display: inline-flex; } .beam-border { position: absolute; inset: -1.5px; border-radius: 9999px; pointer-events: none; z-index: 0; opacity: 0; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--c-accent) 45deg, var(--c-dark) 90deg, transparent 135deg, var(--c-accent) 225deg, transparent 360deg); animation: rotate-beam 4s linear infinite; transition: opacity 0.5s var(--expo); } .btn-beam-container:hover .beam-border { opacity: 1; } /* ── FLASHLIGHT CARD (Map Refined) ───────────────────────────── */ .flashlight-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.05), transparent 40%); opacity: 0; transition: opacity 0.6s; pointer-events: none; z-index: 5; } .flashlight-card:hover::before { opacity: 1; } .flashlight-border { position: absolute; inset: 0; border-radius: inherit; padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.6s; pointer-events: none; z-index: 6; } .flashlight-card:hover .flashlight-border { opacity: 1; }  /* ── BG COLUMN REVEAL ────────────────────────────────────────── */ #hero-bg-cols { position: absolute; inset: 0; display: flex; z-index: 0; pointer-events: none; } .hero-col { flex: 1; height: 100%; border-right: 1px solid rgba(26, 26, 26, 0.045); clip-path: inset(100% 0 0 0); transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1); } .hero-col.active { clip-path: inset(0 0 0 0); } .hero-col:last-child { border-right: none; } /* ── CUSTOM MINIMALIST SCROLL INDICATOR ────────────────────────── */ .scroll-indicator-wrap { position: fixed; right: 3rem; /* Slightly further in to avoid cluttering with standard scrollbar */ top: 50%; transform: translateY(-50%); z-index: 9999; pointer-events: none; } #scroll-progress-line { width: 2px; height: 100px; background: rgba(26, 26, 26, 0.15); position: relative; border-radius: 2px; overflow: hidden; } .live-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 26, 26, 0.4); pointer-events: none; } .live-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; animation: live-glow 2s ease-in-out infinite; }  /* Clock */ #hero-clock { position: absolute; bottom: 2rem; left: 5rem; font-size: 0.6rem; font-family: var(--f-mono); letter-spacing: 0.12em; color: rgba(26, 26, 26, 0.25); pointer-events: none; z-index: 20; } @media (max-width: 767px) { #hero-clock { display: none; } } /* ══ HERO LAYOUT ════════════════════════════════════════════════ */ #hero-pin-wrapper { position: relative; } #hero-viewport { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--c-bg); display: flex; flex-direction: row; } @media (max-width: 767px) { #hero-viewport { flex-direction: column; } } /* LEFT column */ #hero-left { position: relative; z-index: 20; display: flex; flex-direction: column; justify-content: center; width: 48%; padding: 0 4rem 0 5rem; flex-shrink: 0; pointer-events: none; } @media (max-width: 1280px) { #hero-left { padding: 0 2.5rem 0 3.5rem; } } @media (max-width: 767px) { #hero-left { width: 100%; padding: 5.5rem 2rem 2rem; height: 50%; } } #hero-left::after { content: ''; display: block; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(26, 26, 26, 0.07) 30%, rgba(26, 26, 26, 0.07) 70%, transparent); } @media (max-width: 767px) { #hero-left::after { display: none; } } .kicker { display: flex; align-items: center; gap: 0.75rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 2.5rem; } .kicker-line { width: 20px; height: 1px; background: var(--c-primary); flex-shrink: 0; } #hero-headline { font-family: 'Instrument Serif', serif; font-size: clamp(3rem, 6.5vw, 7.5rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--c-dark); margin-bottom: 0.75rem; margin-top: 0.75rem; } #hero-headline .line { display: block; overflow: hidden; } #hero-headline .line-inner { display: block; will-change: transform; } .hero-body { font-size: 1rem; font-weight: 300; line-height: 1.8; color: rgba(26, 26, 26, 0.68); max-width: 480px; margin-top: 1.75rem; margin-bottom: 2.75rem; } @media (min-width: 768px) { .hero-body { font-size: 1.0625rem; } } .hero-cta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .btn-order { display: inline-flex; align-items: center; gap: 0.625rem; padding: 1rem 2.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 9999px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; transform: scale(1); } .btn-order svg { width: 13px; height: 13px; transition: transform 0.35s var(--expo); } .btn-order:hover { transform: scale(1.03); } .btn-order:hover svg { transform: translateX(5px); } /* Secondary outlined CTA */ .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.95rem 1.8rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 9999px; text-decoration: none; cursor: pointer; border: 1.5px solid rgba(26, 26, 26, 0.18); color: rgba(26, 26, 26, 0.6); background: transparent; transition: all 0.3s ease; transform: scale(1); } .btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); transform: scale(1.03); } .link-ghost { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26, 26, 26, 0.36); text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.3s ease; } /* Animated underline — grows from left on hover */ .link-ghost::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--c-primary); transition: width 0.35s var(--expo); } .link-ghost:hover { color: var(--c-primary); } .link-ghost:hover::after { width: 100%; } .hero-meta { display: flex; align-items: center; gap: 0.875rem; margin-top: 2.5rem; } .meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(26, 26, 26, 0.25); } .meta-text { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26, 26, 26, 0.32); } /* RIGHT column */ #hero-right { position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; width: 52%; height: 100%; padding: 9rem 3.5rem 3.5rem 2rem; flex-shrink: 0; } @media (max-width: 1280px) { #hero-right { padding: 7rem 2.5rem 4rem 1rem; } } @media (max-width: 767px) { #hero-right { width: 100%; height: 50%; padding: 1rem 1.5rem 1.5rem; } } .video-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse at 55% 45%, rgba(43, 74, 59, 0.09) 0%, rgba(183, 147, 88, 0.04) 40%, transparent 70%); pointer-events: none; } /* Premium Cards for Section 2 */ .glass-card { background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(26, 26, 26, 0.04); transition: all 0.5s var(--expo); } .glass-card:hover { background: rgba(255, 255, 255, 0.7); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05); transform: translateY(-4px); border-color: rgba(26, 26, 26, 0.08); } .flashlight-effect { position: relative; overflow: hidden; } .flashlight-effect::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(350px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(43, 74, 59, 0.04), transparent 50%); opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 1; } .flashlight-effect:hover::before { opacity: 1; } /* Floating Animations */  .animate-float { animation: float 8s ease-in-out infinite; } /* ══ VIDEO FRAME (expande via GSAP) ═════════════════════════════ */ #video-frame { position: absolute; overflow: hidden; background: #0a0a0a; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.06); /* Soft, wide shadow — image breathes naturally in the space */ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.04); will-change: border-radius, box-shadow; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease; } #video-frame:hover { transform: scale(1.01); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1), 0 14px 40px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } #video-overlay { position: absolute; inset: 0; z-index: 5; background: linear-gradient(135deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45) 100%); opacity: 0; pointer-events: none; } .video-badge { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 15; display: flex; align-items: center; gap: 0.5rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 8px rgba(43, 74, 59, 0.9); animation: dotPulse 2.2s ease-in-out infinite; }  /* * ══ CANVAS — substitui o <video> ════════════════════════════════ * O canvas ocupa 100% do #video-frame e exibe os frames desenhados * via drawImage(). É instantâneo, sem lag de decodificação. */ #seq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* via CSS — o JS mantém proporção no drawImage */ display: block; /* blur */ image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; transform: translateZ(0); }
    /* Kicker standard style */
    .loc-kicker {
      display: flex; align-items: center; gap: 0.85rem; margin-bottom: 4rem;
      opacity: 0; transform: translateY(12px); transition: opacity 0.8s ease, transform 0.8s ease;
    }
    #location.loc-in-view .loc-kicker { opacity: 1; transform: translateY(0); } #seq-canvas.ready { filter: blur(0) brightness(1); }  /* ── GEMINI SHIMMER ──────────────────────────────── */  /* ── FLASHLIGHT / SPOTLIGHT EFFECT ──────────────────────────────── */ .flashlight-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.12), transparent 40%); opacity: 0; transition: opacity 0.5s; pointer-events: none; z-index: 15; } .flashlight-card:hover::before { opacity: 1; } /* ── CHAR REVEAL ────────────────────────────────────────────────── */ .split-parent { overflow: hidden; } .split-child { display: inline-block; will-change: transform; } /* ── GEMINI animationIn keyframe (used for section 3) ───────────── */  /* ── LINE-CLIP reveal (Gemini Typography slide) ─────────────────── */ .sect3-line-wrap { display: block; overflow: hidden; line-height: 1.05; } .sect3-line-inner { display: block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; } /* ══ SCROLL INDICATOR ════════════════════════════════════════════ */ .scroll-indicator { position: absolute; z-index: 30; bottom: 1.75rem; left: 5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } @media (max-width: 767px) { .scroll-indicator { left: 50%; transform: translateX(-50%); } } .scroll-indicator span { font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(26, 26, 26, 0.35); writing-mode: vertical-rl; } .scroll-line { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, rgba(26, 26, 26, 0.22), transparent); animation: linePulse 2.6s ease-in-out infinite; }  /* ══ PRELOADER ═══════════════════════════════════════════════════ */ #preloader { position: fixed; inset: 0; z-index: 10000; background: var(--c-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .preloader-brand { font-family: 'Instrument Serif', serif; font-size: 3rem; color: var(--c-primary); } .preloader-bar-track { width: 200px; height: 2px; background: rgba(43, 74, 59, 0.12); border-radius: 2px; overflow: hidden; } .preloader-bar { height: 100%; width: 0%; background: var(--c-primary); transition: width 0.1s linear; border-radius: 2px; } .preloader-label { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(26, 26, 26, 0.4); } /* ══ NEXT SECTION ════════════════════════════════════════════════ */ #next-section { position: relative; z-index: 20; background: var(--c-bg); min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 8rem 2rem; border-top: 1px solid rgba(0, 0, 0, 0.05); } .next-label { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(26, 26, 26, 0.28); font-weight: 500; } .next-title { font-family: 'Instrument Serif', serif; font-size: clamp(2rem, 4vw, 4rem); color: var(--c-dark); text-align: center; letter-spacing: -0.02em; opacity: 0.08; } /* Floating warm orbs — match Section 2's glow aesthetic */   .h-orb { position:absolute; border-radius:50%; pointer-events:none; will-change:transform; } .h-orb-1 { width:620px; height:620px; top:-18%; right:8%; z-index:2; background:radial-gradient(circle, rgba(183,147,88,.075) 0%, transparent 65%); animation:hOrb1 20s ease-in-out infinite; } .h-orb-2 { width:420px; height:420px; bottom:-22%; left:-5%; z-index:2; background:radial-gradient(circle, rgba(43,74,59,.09) 0%, transparent 65%); animation:hOrb2 26s ease-in-out infinite 3s; } /* Watermark word — like Section 2's 'TEMPO' parallax text */  #hero-wm { position:absolute; right:-2%; top:50%; transform:translateY(-55%); z-index:1; font-family:'Instrument Serif',serif; font-size:clamp(10rem,19vw,17rem); line-height:0.88; color:rgba(26,26,26,.03); letter-spacing:-.04em; pointer-events:none; user-select:none; white-space:nowrap; opacity:0; animation:hFadeIn 2.5s ease 1.8s forwards; } /* Warm ambient light — off-center left, simulates soft natural light pooling */ #hero-warm { position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 20% 30%, rgba(200,170,120,0.07) 0%, transparent 58%), radial-gradient(ellipse at 68% 38%, rgba(183,147,88,.04) 0%, rgba(43,74,59,.018) 42%, transparent 68%); pointer-events:none; z-index:1; } /* Soft warm glow behind the image frame */ #hero-image-glow { position:absolute; top:50%; right:4%; width:42vw; height:80%; transform:translateY(-50%); background:radial-gradient(ellipse at 50% 50%, rgba(200,170,120,0.055) 0%, transparent 65%); pointer-events:none; z-index:2; } /* Edge vignette (framing device) */ #hero-vig { position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(26,26,26,.07) 100%); } /* Shimmer separator line below h1 */   #hero-sep { position:relative; height:1px; overflow:hidden; margin:1.5rem 0 1.75rem; max-width:450px; } #hero-sep::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(43,74,59,.28) 15%, rgba(43,74,59,.55) 50%, rgba(43,74,59,.28) 85%, transparent 100%); animation:hLineGrow 1s cubic-bezier(.16,1,.3,1) 1.1s both; } #hero-sep::after { content:''; position:absolute; top:-1px; left:-65%; width:55%; height:3px; background:linear-gradient(90deg, transparent, rgba(43,74,59,.15) 25%, rgba(255,255,255,.75) 50%, rgba(43,74,59,.15) 75%, transparent); filter:blur(1px); animation:hBeam 2s cubic-bezier(.25,0,.1,1) 2.1s both; } /* textSlide: per-line clip reveal — structure only, GSAP handles the animation */ #hero-headline .line       { display:block; overflow:hidden; } #hero-headline .line-inner { display:block; will-change:transform,filter; } /* hero-sep and hero-wm start hidden — GSAP will reveal them */ #hero-sep { opacity:0; } #hero-wm  { opacity:0; } /* 1. Global Grain Texture — sutil textura de papel sobre tudo */ #global-grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9001; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* 2. Custom Cursor Hover Instead of full JS cursor, we use a simple CSS scale effect on links */ a, button { cursor: pointer; } /* 3. Navbar Links — Underline Sweep Animation */ .nav-link { position: relative; background: transparent; } .nav-link::before { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: rgba(43,74,59,0.7); transition: width 0.35s cubic-bezier(0.16,1,0.3,1); } .nav-link:hover::before { width: 100%; } /* 4. Navbar Logo Shimmer Removed */ .nav-logo { font-family: 'Instrument Serif', serif; font-size: 1.5rem; color: var(--c-dark); text-decoration: none; } /* 5. Button Hover Depths */ .btn-primary:hover { transform: translateY(-2px) scale(1.01) !important; box-shadow: 0 16px 36px -8px rgba(43, 74, 59, 0.45) !important; } .btn-primary:active { transform: translateY(1px) scale(0.98) !important; } /* 6. Ghost Link Hover Polish */ .link-ghost { position: relative; transition: color 0.3s ease, opacity 0.3s ease; } .link-ghost::before { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: var(--c-dark); transition: width 0.3s cubic-bezier(0.16,1,0.3,1); } .link-ghost:hover::before { width: 100%; } /* 7. Kicker Badge Glow */ .live-badge { border: none; background: transparent; transition: opacity 0.4s ease; } .live-badge:hover { opacity: 0.8; } /* 8. Menu / Section Cards Hover Tilt */ .feat-card { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.5s ease !important; } .feat-card:hover { transform: translateY(-8px) !important; border-color: rgba(43,74,59,0.15) !important; } .feat-card:hover img { transform: scale(1.08) !important; } /* 9. Hero Corner Frames */ .frame-corner { position: fixed; width: 40px; height: 40px; border: 1px solid rgba(26,26,26,0.15); pointer-events: none; z-index: 9999; opacity: 0; animation: fIn 1.5s ease 2s forwards; } .frame-tl { top: 2rem; left: 2rem; border-right: none; border-bottom: none; } .frame-br { bottom: 2rem; right: 2rem; border-left: none; border-top: none; display:none;} @media(min-width: 768px){ .frame-br { display:block; } }  .hero-wm-underline { position: relative; display: inline-block; } .hero-wm-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(26,26,26,0.35) 30%, rgba(26,26,26,0.55) 60%, transparent); animation: hBeam 3s cubic-bezier(0.25,0,0.1,1) 2.8s both; } /* Logo badge: subtle breathe only — no rotation */   .feat-card-inner:hover img.feat-img { transform: scale(1.4) !important; filter: saturate(0.92) brightness(1.05) !important; } .feat-card-inner:hover .feat-veil { opacity: 1 !important; } .feat-card-inner:hover .feat-panel { opacity: 1 !important; transform: translateY(0) !important; } .feat-card-inner:hover { box-shadow: 0 24px 64px rgba(26, 26, 26, 0.12), 0 6px 18px rgba(26, 26, 26, 0.07) !important; } .feat-card-inner:hover+.feat-label { opacity: 0; transform: translateY(-4px); } @media(max-width:768px) { #featured>div>div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .feat-card { margin-top: 0 !important; } } .clube-img-main:hover img, .clube-img-accent:hover img { transform: scale(1.08) !important; } .clube-img-main:hover, .clube-img-accent:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.06) !important; } .clube-img-main:hover .clube-img-shimmer, .clube-img-accent:hover .clube-img-shimmer { opacity: 1 !important; } .clube-img-main:hover .clube-img-caption, .clube-img-accent:hover .clube-img-caption { opacity: 1 !important; transform: translateY(0) !important; } /* ── Flashlight effect (from animations-gemini) ─────────── */ .s4-flashlight { position: relative; } .s4-flashlight::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(183,147,88,0.10), transparent 50% ); opacity: 0; transition: opacity 0.45s; pointer-events: none; z-index: 3; } .s4-flashlight:hover::before { opacity: 1; } /* ── Shimmer beam sweep ────────────────────────────────────── */  .s4-beam { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 55%, transparent 100%); transform: translateX(-110%) skewX(-18deg); pointer-events: none; z-index: 8; opacity: 0; transition: opacity 0.1s; } .clube-img-main:hover .s4-beam, .clube-img-accent:hover .s4-beam, .feat-card-inner:hover .s4-beam, .btn-primary:hover .s4-beam, .nav-cta:hover .s4-beam, .loc-btn-shimmer:hover .s4-beam { opacity: 1; animation: s4-shimmer 1.1s cubic-bezier(0.4,0,0.2,1) forwards; } /* ── Marquee strip ─────────────────────────────────────────── */  .s4-marquee-track { display: flex; white-space: nowrap; animation: s4-marquee 28s linear infinite; }  #s5-cta:hover .s5-arrow { transform: translateX(4px); } .s5-glow-light { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 500px circle at var(--gx, 50%) var(--gy, 50%), rgba(183, 130, 60, 0.13), transparent 55% ); opacity: 0; transition: opacity 0.45s; z-index: 1; } .s5-glow-card:hover .s5-glow-light { opacity: 1; } .s5-glow-card > *:not(.s5-glow-light) { position: relative; z-index: 2; } .s5-glow-card { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease; } .s5-glow-card:hover { transform: translateY(-6px); border-color: rgba(183,130,60,0.22) !important; box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(183,130,60,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; } @media (max-width: 900px) { #experience-video [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; } } /* cinematic s5-reveal effects */
.s5-reveal-up {
  opacity: 0;
  transform: translateY(35px);
  filter: blur(12px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}
.s5-reveal-down {
  opacity: 0;
  transform: translateY(-35px);
  filter: blur(12px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}
.s5-reveal-up.s5-visible, .s5-reveal-down.s5-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
} /* 3D Transform Utils */ .perspective-2000 { perspective: 2000px; } .transform-style-3d { transform-style: preserve-3d; } .translate-z-10 { transform: translateZ(10px); } /* Image rotate on hover (for 3D wrappers) */ .img-rotate-hover:hover { transform: rotateY(-5deg); } /* Title Clip Reveal */ .title-clip-reveal span span { display: inline-block; } .is-visible .title-clip-reveal span span { transform: translateY(0) !important; } /* Marquee Animation */  .marquee-content { animation: scroll-left 40s linear infinite; } .marquee-mask { mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); } /* Clube do Livro Entry Animations */ .blur-reveal { opacity: 0; transform: translateY(40px); filter: blur(15px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .blur-reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0px); } /* Flashlight Cards */ .flashlight-card .flashlight-border { position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(43, 74, 59, 0.15), transparent 60%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } .flashlight-card:hover .flashlight-border { opacity: 1; } /* Shimmer Beam Button (Gemini) */ @property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }  .btn-beam-container { position: relative; display: inline-flex; border-radius: 9999px; padding: 1px; overflow: hidden; background: rgba(0, 0, 0, 0.1); } .beam-border { position: absolute; inset: -150%; background: conic-gradient(from var(--beam-angle, 0deg) at 50% 50%, transparent 70%, var(--c-primary) 100%); animation: rotate-beam 12s linear infinite; z-index: 0; /* Fallback for browsers without @property support */ background: conic-gradient(from 0deg at 50% 50%, transparent 70%, var(--c-primary) 100%); } /* ── CLUBE DO LIVRO: dedicated CSS ──────────────────────────────── */ /* Marquee animation */  .clube-marquee-content { animation: clube-scroll-left 50s linear infinite; } .clube-marquee-mask { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } /* Floating orbs */   .clube-orb-1 { animation: clube-float-1 12s ease-in-out infinite; } .clube-orb-2 { animation: clube-float-2 15s ease-in-out infinite; } /* Pill hover accent */ .clube-pill:hover { background: rgba(253,251,247,0.08) !important; border-color: rgba(183,130,60,0.35) !important; } /* Title line slide */ .clube-line span { transition: transform 1.1s cubic-bezier(0.16,1,0.3,1); } .clube-line:nth-child(2) span { transition-delay: 0.12s; } /* Mobile responsive */ @media (max-width: 900px) { .clube-main-grid { grid-template-columns: 1fr !important; gap: 3rem !important; } .clube-reveal__images { height: 420px !important; } } /* ── LOC SPECIFIC STYLES (Light Theme) ──────────────── */ /* ── GEMINI ANIMATIONS ──────────────── */  .anim-fade-blur { opacity: 0; will-change: transform, opacity; } .anim-fade-blur.is-visible { animation: animationIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Elegant Button (Gemini 2 style) */ .btn-bordered-kinetic { border: 1px solid var(--c-dark); background: transparent; color: var(--c-dark); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: inline-flex; align-items: center; justify-content: center; } .btn-bordered-kinetic:hover { background: var(--c-dark); color: var(--c-bg); transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(26, 26, 26, 0.15); } /* Container do Mapa Light */ .map-light-container { background: var(--c-bg); border: 1px solid rgba(26, 26, 26, 0.08); box-shadow: 0 15px 35px -5px rgba(26, 26, 26, 0.05); transition: all 0.5s ease; } .map-light-container:hover { box-shadow: 0 25px 50px -12px rgba(26, 26, 26, 0.1); } @media (max-width: 768px) { .loc-grid { grid-template-columns: 1fr !important; } } 
/* ── CLUBE QUOTE: cursor piscante + shimmer sweep ─────────────── */


/* ── CLUBE STEP: hover bar transition already inline ─────────── */
/* ══ RESPONSIVE HERO FIXES (User Requested) ═════════════════════ */

/* ══ RESPONSIVE HERO FIXES (User Requested) ═════════════════════ */

/* ── 1) 1280px: Ajuste Fino ── */
@media (max-width: 1280px) and (min-width: 1025px) {
  /* 1) Kicker (Leitura & Café) */
  .kicker {
    margin-top: 2.5rem !important;
  }
  
  /* 2) Explore: Posicionado perfeitamente no "corredor" entre o fim do texto e o início da imagem */
  .hero-scroll-wrapper {
    left: 46% !important; 
    right: auto !important;
    bottom: -3vh !important; 
    transform: translateX(-50%) !important;
    margin-right: 0 !important;
    gap: 0.3rem !important; /* Reduz o gap p/ a linha encostar / ficar mais próxima do texto Explore */
  }
}

/* ── 2) 1024px: Reparo Principal (Sem quebrar desktop) ── */
@media (max-width: 1024px) and (min-width: 901px) {
  /* Hero components functionally overridden by the primary <=1024px stack below */

  /* Problema 4: Visite Nossa Casa cortado na Section Location */
  #location h2 {
    font-size: 5rem !important; /* Reduz escala de titulo pra n transbordar */
  }

  /* Problema Adicional: Sessão 2 (Experience) bugada em 1024px */
  #experience .lg\:grid-cols-12 {
    grid-template-columns: 1fr !important; /* Desempilha o layout */
    gap: 4.5rem !important;
  }
  #experience .exp-left {
    height: 60vh !important; /* Aumentado de 45vh p/ 60vh p/ evitar corte agressivo do piano */
    grid-column: span 12 / span 12 !important;
  }
  #experience .flex-col.justify-center {
    grid-column: span 12 / span 12 !important;
    align-items: flex-start !important; /* Retorna ao alinhamento à esquerda p/ os 3 pilares */
    text-align: left !important;
    padding: 0 2rem !important;
  }
  #experience p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Oculta o watermark "TEMPO" que polui o layout empilhado */
  #parallax-text {
    display: none !important;
  }
}



/* ── 3) 900px: Refinamento e Kicker ── */
@media (max-width: 900px) and (min-width: 768px) {
  /* Hero components functionally overridden by the primary <=1024px stack below */

  /* Kicker (Leitura & Café) muito alto -> desce levemente aplicando margin-top */
  .kicker {
    margin-top: 1.5rem !important;
  }

  /* Ocultar apenas o relógio. */
  #hero-clock {
    display: none !important;
  }
  
  #location h2 {
    font-size: 4.5rem !important;
  }
}

/* 4. CLUBE DO LIVRO: Equilíbrio Visivo (aplicado de 1024 pra baixo para matar quebra crônica) */
@media (max-width: 1024px) {
  .clube-mosaic {
    grid-template-columns: 1fr !important;
    gap: 3.5rem !important;
  }
  .clube-reveal__right {
    width: 85% !important;
    max-width: 600px !important;
    margin: 0 auto !important; /* Resolve a assimetria visual colando no eixo */
  }
  .clube-img-main {
    aspect-ratio: 4/5 !important; /* Torna aspecto de portrait evitando espalhamento horizontal */
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE HERO — CLEAN PROFESSIONAL LAYOUT
   Breakpoint: ≤ 1024px (tablets + all mobile devices)
   Strategy: Remove ALL atmospheric effects (glows, orbs, vignettes,
   spotlights, depth overlays) and present a clean editorial hero.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav-cta { display: none !important; }

  /* ── HERO VIEWPORT: unified mobile layout ──────────────────────── */
  #hero-viewport {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden; 
    overflow-y: visible;
    justify-content: flex-start;
    /* Clean solid background — no gradients, no warmth pools */
    background: #fdfbf7 !important;
  }

  /* ── SECTION 2 CORRECTION (Mobile/Tablet) ───────────────────────── */
  /* Remove section 2 top rounding so the dark hero video doesn't peek through */
  #experience {
    border-radius: 0 !important;
  }

  /* ── HERO LEFT: text column ─────────────────────────────────────── */
  #hero-left {
    order: 1;
    width: 100%;
    height: auto;
    padding: 7rem 1.5rem 1rem;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  /* ── HERO RIGHT: video container placeholder ────────────────────── */
  #hero-right {
    display: block;
    order: 2;
    width: 82%;
    max-width: 340px;
    aspect-ratio: 16 / 10;
    height: auto;
    padding: 0;
    margin: 2.5rem auto 2rem auto;
    position: relative;
    background: transparent !important;
    opacity: 0; /* Placeholder for GSAP targeting */
    pointer-events: none;
  }

  /* Suppress corner expand on touch hover — touch fires :hover on tap,
     causing a layout shift with no intentional interaction benefit. */
  #video-frame:hover .vf-corner-tl,
  #video-frame:hover .vf-corner-tr,
  #video-frame:hover .vf-corner-bl,
  #video-frame:hover .vf-corner-br {
    transform: scale(1) !important;
  }

  /* ── MOBILE MENU SYSTEM ────────────────────────────────────────── */

  #navbar.is-scrolled .nav-hamburger {
    color: var(--c-primary);
  }

  /* Breakpoint activation for home page navbar — Mobile only (<= 860px) */
  @media (max-width: 860px) {
    .nav-menu { display: none !important; }
    .nav-hamburger { display: flex !important; }
    .nav-actions { flex: 1; justify-content: flex-end; }
  }

  #mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--c-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  #mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-link {
    font-family: 'Instrument Serif', serif;
    font-size: 2.6rem;
    color: var(--c-dark);
    text-decoration: none;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.4s var(--expo), transform 0.5s var(--expo), color 0.3s ease;
  }
  
  #mobile-menu.open .mobile-link {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  /* Sequential stagger for menu links */
  #mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
  #mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.18s; }
  #mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.26s; }
  #mobile-menu.open .mobile-link:nth-child(5) { transition-delay: 0.34s; }
  #mobile-menu.open .mobile-link:nth-child(6) { transition-delay: 0.42s; }
  #mobile-menu.open .mobile-link:nth-child(7) { transition-delay: 0.50s; }

  .mobile-link:hover {
    color: var(--c-primary);
  }

  .mobile-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    color: var(--c-dark);
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  #mobile-menu.open .mobile-close {
    opacity: 1;
    transition-delay: 0.4s;
  }

  /* ── CENTERING: kicker, cta, meta ───────────────────────────────── */
  .kicker {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5rem !important;
    gap: 1rem !important;
  }

  .hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1.25rem;
    margin-top: 1rem;
  }

  #hero-headline {
    text-align: center;
    width: 100%;
    margin-bottom: 1.5rem;
    font-size: clamp(2.8rem, 10vw, 3.5rem);
    line-height: 1;
  }

  /* video-overlay: starts hidden (opacity:0 in base CSS), GSAP fades it in during scroll */
  #video-overlay {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* ── VIDEO FRAME: clean premium border, predictive layout ──────── */
  #video-frame {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10),
                0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(43,74,59,0.10) !important;
    border-radius: 16px !important;
    background: #0a0a0a !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: hidden !important;

    margin: 0;
    will-change: transform;
    
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82%;
    max-width: 340px;
    aspect-ratio: 16 / 10;
  }

  /* Suppress expensive mask-composite gradient border ring on mobile.
     The solid border: 1px solid above already provides the frame edge.
     The ::after pseudo-element uses mask-composite: exclude which triggers
     an additional compositing layer with no visual benefit under the solid border. */
  #video-frame::after {
    display: none;
  }

  /* Suppress corner expand on touch hover — touch fires :hover on tap,
     causing a layout shift with no intentional interaction benefit. */
  #video-frame:hover .vf-corner-tl,
  #video-frame:hover .vf-corner-br {
    width: 22px;
    height: 22px;
  }



  /* ── EXPLORE INDICATOR ────────────────────────────────────────── */
  .hero-scroll-wrapper {
    position: absolute !important;
    bottom: 2.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    order: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    pointer-events: none;
    z-index: 50 !important;
  }

  /* ── SECTION 2: fix compressed images ───────────────────────────── */
  .exp-left {
    transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
  }
  .exp-left-img {
    scale: 1 !important;
  }

  .feat-card, .clube-reveal__images {
    transform: none !important;
    scale: 1 !important;
  }

  /* ── SECTION 3: fix black border artifacts ──────────────────────── */
  #featured {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  #featured > div[style*="top:-50px"] {
    top: -40px !important;
  }

  /* ── KILL INLINE AMBIENT GLOW DIVS (Both Green and Warm) ──────── */
  div[style*="radial-gradient(circle,rgba(43,74,59"],
  div[style*="radial-gradient(circle, rgba(43,74,59"],
  div[style*="radial-gradient(ellipse,rgba(43,74,59"],
  div[style*="radial-gradient(ellipse at"],
  div[style*="radial-gradient(circle at 70%"],
  div[style*="rgba(200,170,120"],
  div[style*="rgba(218,198,158"],
  div[style*="rgba(183,147,88,0.0"] {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* ── LOCATION: mobile refinements ──────────────────────────────── */
  #location .gap-24 {
    gap: 3rem !important;
  }
  #location .lg\:col-span-7 {
    margin-top: 1rem !important;
  }

  /* ── CLUBE DO LIVRO: mobile refinements ────────────────────────── */
  .clube-reveal__title {
    margin-bottom: 4.5rem !important;
  }

  /* ── NAVBAR: ensure readability on mobile ──────────────────────── */
  #navbar {
    background: #fdfbf7 !important; /* solid instead of 0.96 to avoid expensive backdrop-filter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* cat-nav sticky: background handled by .cat-nav-inner pill in menu.css */

  /* ── HIDDEN ON MOBILE: Desktop decorations & heavy GPU effects ── */
  #hero-left::after,
  .hero-body, 
  #hero-sep, 
  .hero-meta,
  #hero-spotlight,
  #hero-warm,
  #hero-image-glow,
  .video-glow,
  .h-orb,
  .h-orb-1,
  .h-orb-2,
  #video-frame::after,
  #video-frame::before,
  .scroll-indicator-wrap,
  .frame-corner,
  .mobile-destaque-hide,
  #hero-vig,
  #hero-wm,
  #hero-bg-cols,
  .mobile-destaque-hide,
  .parallax-glow-1,
  .parallax-glow-2,
  .s5-glow-light,
  .clube-orb-1,
  .clube-orb-2,
  #loc-dk-wm,
  #clube-wm,
  #global-grain,
  .flashlight-card::before,
  .flashlight-border,
  .s4-flashlight::before,
  .btn-beam-container .beam-border {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
    filter: none !important;
  }

  #navbar .nav-logo {
    color: var(--c-dark) !important;
  }

  /* ── Ajuste da Grade para Mobile: fade de cima para baixo ── */
  .hero-grid-bg {
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, transparent 72%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 45%, transparent 72%) !important;
  }

  /* ── BREAKPOINT 430x932 (iPhone Pro Max / Plus) ── */
  @media (min-width: 428px) and (min-height: 900px) {
    #hero-left {
      padding-top: 8.5rem !important; /* Desce todo o conteúdo de texto e botões significativamente */
    }
    .hero-scroll-wrapper {
      bottom: -8rem !important; /* Desce o Explore de forma extrema para muito abaixo do vídeo */
    }
  }

  /* ── BREAKPOINT 900x700 (Desktop Layout Mirroring) ── */
  @media (max-width: 950px) and (min-width: 850px) and (max-height: 750px) {
    #hero-viewport {
      flex-direction: row !important;
      justify-content: flex-start !important;
      height: 100vh !important; /* Obrigatório para a coluna interna saber calcular sua altura (%) */
      min-height: 100vh !important;
    }
    #hero-left {
      width: 45% !important; /* Cede um pouco de espaço para a direita esticar */
      padding: 0 1rem 0 3.5rem !important;
      height: 100vh !important; /* Ocupa 100vh firme */
      justify-content: center !important;
      align-items: flex-start !important; /* Retorna o alinhamento desktop */
      text-align: left !important; /* Tira do centro (padrão mobile) */
    }
    #hero-headline, .hero-body {
      text-align: left !important; /* Override direto sobre as tags que o mobile centraliza isoladamente */
      width: 100% !important;
    }
    .kicker {
      justify-content: flex-start !important; /* Puxa para a esquerda */
    }
    .hero-cta {
      flex-direction: column !important; /* Mantém um abaixo do outro caso não caiba lado a lado com vídeo */
      align-items: flex-start !important; /* Escora perfeitamente no limite esquerdo */
      justify-content: flex-start !important;
      gap: 1.25rem !important;
    }
    .hero-cta-primary-wrap {
      margin: 0 !important; /* Remove qualquer 'auto' margin-left que centralize o botão acidentalmente */
      margin-left: -14px !important; /* Empurrão pesado (-14px) para alinhar visualmente as letras R e V */
    }
    #hero-right {
      position: relative !important;
      display: flex !important;
      width: 55% !important; /* Fica BEM largo agora */
      height: 100vh !important; /* Trava totalmente na base do monitor */
      margin: 0 !important; /* Sobrecrescreve o margin auto do mobile */
      max-width: none !important; /* Derruba os 340px nativos da regra tablet */
      aspect-ratio: auto !important; /* Libera pra ele preencher a coluna */
      padding: 10rem 2rem 4rem 1.5rem !important; /* Empurra pra baixo pesadamente (10rem) para nivelar com a leitura */
    }
    #navbar {
      padding: 1.5rem 1.5rem !important;
    }
    .nav-links {
      gap: 1.5rem !important; 
    }
    .nav-link {
      white-space: nowrap !important;
      font-size: 0.65rem !important;
    }
    .hero-btn-secondary {
      display: flex !important; /* Volta a exibir o botao Ver cardapio auxiliar ao lado do mestre */
    }
    .hero-scroll-wrapper {
      position: absolute !important; /* Quebra qualquer força da linha flexbox horizontal */
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      bottom: -1rem !important; /* Desce para as entranhas negativas abaixo da linha de corte */
      left: 38vw !important; /* Arrastado profundamente para o lado do texto (38%) */
      transform: translateX(-50%) !important; /* Acerta o eixo mecânico perfeitamente */
      z-index: 9999 !important;
      margin: 0 !important;
    }
    #video-frame {
      transform: none !important;
      max-width: none !important;
    }
  }

  /* ── BREAKPOINT 1024x768 (Desktop Layout Mirroring - iPad Landscape) ── */
  @media (max-width: 1024px) and (min-width: 951px) and (max-height: 800px) {
    #hero-viewport {
      flex-direction: row !important; /* TEXTO ESQUERDA IMAGE DIREITA */
      justify-content: flex-start !important;
      height: 100vh !important;
      min-height: 100vh !important;
    }
    #hero-left {
      width: 45% !important;
      padding: 0 1rem 0 3.5rem !important;
      height: 100vh !important;
      justify-content: center !important;
      align-items: flex-start !important; /* FORÇA BOTOES/LETRAS ESQUERDA */
      text-align: left !important;
    }
    #hero-headline, .hero-body {
      text-align: left !important;
      width: 100% !important;
    }
    .kicker {
      justify-content: flex-start !important;
    }
    .hero-cta {
      flex-direction: column !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      gap: 1.25rem !important;
    }
    .hero-cta-primary-wrap {
      margin: 0 !important;
      margin-left: -14px !important; /* Mantém alinhamento ótico do R no V */
    }
    #hero-right {
      position: relative !important;
      display: flex !important; /* IMAGEM DIREITA */
      width: 55% !important;
      height: 100vh !important;
      margin: 0 !important;
      max-width: none !important;
      aspect-ratio: auto !important;
      padding: 10rem 2rem 4rem 1.5rem !important;
    }
    #navbar {
      padding: 1.5rem 1.5rem !important;
    }
    .nav-links {
      gap: 1.5rem !important; 
    }
    .nav-link {
      white-space: nowrap !important;
      font-size: 0.65rem !important;
    }
    .hero-btn-secondary {
      display: flex !important;
    }
    #video-frame {
      transform: none !important;
      max-width: none !important;
    }
    .hero-scroll-wrapper {
      position: absolute !important;
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      bottom: -1rem !important;
      left: 38vw !important;
      transform: translateX(-50%) !important;
      z-index: 9999 !important;
      margin: 0 !important;
    }
  }
}
/* ── EXPLORE INDICATOR BNC ────────────────────────────────────────── */


.hero-scroll-wrapper {
  position: absolute;
  bottom: 2.5vh;
  left: 45%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  pointer-events: none;
}
/* Overridden inline via the primary desktop block and mobile root stack above */

/* ══════════════════════════════════════════════════════════════════
   GIARDINI HERO — BRAND ELEVATION v2
   Changes must be VISIBLE on first glance. No micro-tweaks.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. BACKGROUND: noticeable warmth + green under-glow ─────────
   Replace flat #FDFBF7 with a rich 4-layer atmosphere:
   - warm amber pool top-left (morning window light)
   - cream-to-stone diagonal sweep
   - faint green presence bottom-right (brand grounding)
   Result: clearly richer, clearly editorial, never noisy.          */
#hero-viewport {
  background:
    radial-gradient(ellipse 70% 55% at 5% 0%,   rgba(218,198,158,0.18) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 90% 95%,  rgba(43,74,59,0.09)  0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 50%,  rgba(253,251,247,1)  0%, rgba(247,242,234,1) 100%),
    linear-gradient(160deg, #fefcf8 0%, #f7f2ea 100%);
}

/* Directional vignette — frames the hero like a photograph */
#hero-vig {
  background:
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 38%, rgba(15,12,8,0.09) 100%),
    linear-gradient(to right, rgba(15,12,8,0.055) 0%, transparent 10%, transparent 85%, rgba(15,12,8,0.04) 100%),
    linear-gradient(to bottom, rgba(15,12,8,0.02) 0%, transparent 15%, transparent 80%, rgba(15,12,8,0.035) 100%);
}

/* ── 2. KICKER: brand diamond + stronger presence ─────────────────
   The kicker now reads as intentionally designed, not default.      */
.kicker {
  font-size: 0.60rem;
  letter-spacing: 0.32em;
  color: var(--c-primary);
  margin-bottom: 2rem;
  gap: 0.875rem;
}
.kicker-line {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--c-primary) 0%, rgba(43,74,59,0.3) 100%);
}
/* Diamond accent between kicker-line and text — added via JS below */
.kicker-diamond {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--c-primary);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.65;
}

/* ── 3. HEADLINE: stronger italic accent color + warmth ───────────
   The word 'refúgio' should feel like it was hand-chosen.           */
#hero-headline em {
  color: var(--c-primary);
  font-style: italic;
  /* subtle warm glow behind the green letterforms — inspired by hot-press printing */
  text-shadow: 0 2px 24px rgba(43,74,59,0.13);
}

/* ── 4. SEPARATOR: clearly branded green line ─────────────────────
   The separator now reads as a Giardini brand signature —
   not just a generic horizontal rule.                               */
#hero-sep {
  max-width: 400px;
  margin: 1.25rem 0 1.75rem;
  height: 1px;
  opacity: 0;
}
#hero-sep::before {
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(43,74,59,0.15)  8%,
    rgba(43,74,59,0.50)  40%,
    rgba(43,74,59,0.68)  50%,
    rgba(43,74,59,0.50)  60%,
    rgba(43,74,59,0.15)  92%,
    transparent          100%
  );
}

/* ── 5. BODY COPY: editorial spacing ─────────────────────────────
   More intentional rhythm — literary, not corporate.               */
.hero-body {
  line-height: 1.70;
  color: rgba(26,26,26,0.58);
  font-size: 0.975rem;
  max-width: 440px;
  margin-top: 0;
  margin-bottom: 2.5rem;
  letter-spacing: 0.006em;
}

/* ── 6. CTA: complete redesign — brand green pill, premium surface */
/* Outer beam-border ring: green instead of near-black             */
.hero-cta-primary-wrap {
  background: linear-gradient(
    135deg,
    rgba(43,74,59,0.90) 0%,
    rgba(30,55,44,0.85) 100%
  ) !important;
  padding: 2px !important;
  border-radius: 9999px !important;
}

/* Inner green pill surface — premium tactile depth */
.btn-primary.btn-order {
  background: linear-gradient(
    170deg,
    #3a6150 0%,
    #2B4A3B 40%,
    #243f33 100%
  ) !important;
  box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.14),
    inset 0 -1px 0   rgba(0,0,0,0.14),
    inset 0  0   20px rgba(255,255,255,0.03),
    0 2px 6px rgba(43,74,59,0.25) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  padding: 1.05rem 2.25rem !important;
  color: rgba(253,251,247,0.95) !important;
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.btn-primary.btn-order:hover {
  background: linear-gradient(
    170deg,
    #426856 0%,
    #2f5340 40%,
    #243f33 100%
  ) !important;
  box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.18),
    inset 0 -1px 0   rgba(0,0,0,0.18),
    0 20px 48px -8px rgba(43,74,59,0.45),
    0  8px 20px -4px rgba(43,74,59,0.28) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Ghost CTA — more readable, more intentional */
.link-ghost {
  color: rgba(26,26,26,0.45) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
}
.link-ghost::after {
  background: linear-gradient(90deg, var(--c-primary) 0%, rgba(43,74,59,0.4) 100%) !important;
  height: 1px !important;
}
.link-ghost:hover { color: var(--c-primary) !important; }

/* ── 7. META ROW: brand-green first dot, stronger separators ──────*/
.hero-meta {
  margin-top: 2.25rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(43,74,59,0.10) !important;
  gap: 1rem !important;
}
.live-badge {
  font-size: 0.56rem !important;
  letter-spacing: 0.18em !important;
  color: rgba(26,26,26,0.50) !important;
}
.live-pulse {
  width: 5px !important;
  height: 5px !important;
}

/* ── 8. VERTICAL DIVIDER (hero-left / hero-right boundary) ────────
   More visible green signature line between the two columns.        */
#hero-left::after {
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(43,74,59,0.14) 25%,
    rgba(43,74,59,0.14) 75%,
    transparent
  );
}

/* ── 9. VIDEO FRAME: premium editorial frame refinement ───────────
   Refinements applied:
   a) Radius reduced 20px → 14px: more architectural, less generic.
   b) Border: single-color → gradient ring (green top/left, gold
      bottom/right) — reads as a designed object, not a div.
   c) Shadow: 5-layer system — dark base + green ambient +
      warm amber depth layer + bright specular catch + inset highlight.
   d) Inset top-edge highlight: simulates a physical light strike,
      reads as premium surface quality (think: matte metal finish).
   e) Outer halo wrapper: applied via #video-frame parent styling —
      the 1px air-gap ring that luxury products use.
   f) Corner marks: gold-tinted, slightly larger, more authority.     */

/* Outer halo ring — the luxury 'air gap' */
#video-frame {
  border-radius: 14px;

  /* Gradient border: green-dominant top-left, warm gold bottom-right */
  border: none;
  outline: none;

  /* 4-layer shadow system — merged halo rings (were two × 1px rings),
     green ambient, dark base, inset highlight.
     Reduced from 8 layers: amber mid-layer merged into green ambient;
     inner inset ring merged into outer inset. Visually equivalent. */
  box-shadow:
    0  0  0  1.5px rgba(43,74,59,0.16),
    0 36px 80px -10px rgba(0,0,0,0.15),
    0 14px 36px  -6px rgba(43,74,59,0.13),
    inset 0 1px 0 rgba(255,255,255,0.10);

  background: #0c0d0b;
  overflow: hidden;

  /* will-change locked to compositor-only properties */
  will-change: transform;

  /* Override base transition — remove box-shadow from animated properties.
     box-shadow animation triggers a full per-frame repaint (not GPU-composited).
     The transform scale on hover is compositor-only and provides the premium feel.
     The box-shadow swap becomes instant, which is imperceptible given the simultaneous scale. */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Gradient border ring — rendered via a pseudo-sibling technique:
   We apply a background gradient to the frame itself using
   an ::after overlay that acts as a pure border ring.             */
#video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 30;
  /* Green top-left → gold bottom-right gradient ring */
  background: linear-gradient(
    135deg,
    rgba(43,74,59,0.32)  0%,
    rgba(43,74,59,0.18) 35%,
    rgba(183,147,88,0.16) 65%,
    rgba(183,147,88,0.28) 100%
  );
  /* Mask to only show the border ring, not the fill */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
}

/* Top-edge inset light catch — simulates physical surface quality */
#video-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0.38) 50%,
    rgba(255,255,255,0.18) 80%,
    transparent 100%
  );
  z-index: 25;
  pointer-events: none;
  border-radius: inherit;
}

#video-frame:hover {
  /* 4-layer hover shadow — matches the base system approach.
     Elevated values vs. rest state; amber layer merged into green ambient.
     The scale() is GPU-composited via will-change: transform — no repaint cost. */
  box-shadow:
    0  0  0  1.5px rgba(43,74,59,0.24),
    0 46px 100px -12px rgba(0,0,0,0.18),
    0 20px 44px   -6px rgba(43,74,59,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14);
  transform: scale(1.008);
}


/* ── Corner marks — now rendered inside a wrapper div (see HTML):
   TL: green-tinted (brand anchor)
   BR: gold-tinted (warm finish)
   These are inside #video-frame so they clip correctly.           */
.vf-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 20;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.vf-corner-tl {
  top: 14px; left: 14px;
  border-top:  1.5px solid rgba(255,255,255,0.42);
  border-left: 1.5px solid rgba(255,255,255,0.42);
  border-radius: 4px 0 0 0;
}
.vf-corner-br {
  bottom: 14px; right: 14px;
  border-bottom: 1.5px solid rgba(183,147,88,0.45);
  border-right:  1.5px solid rgba(183,147,88,0.45);
  border-radius: 0 0 4px 0;
}
/* On frame hover — corners expand slightly for premium microinteraction */
#video-frame:hover .vf-corner-tl,
#video-frame:hover .vf-corner-br {
  width: 28px;
  height: 28px;
}

/* Glow behind the entire right column / media area */
.video-glow {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(43,74,59,0.14) 0%,
    rgba(183,147,88,0.07) 40%,
    transparent 70%
  );
  inset: -5%;
}

#hero-image-glow {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(43,74,59,0.10) 0%,
    rgba(218,198,158,0.06) 45%,
    transparent 70%
  );
  width: 50vw;
  height: 90%;
  right: 2%;
}

/* ── 10. AMBIENT WARM LIGHT: visibly richer ───────────────────── */
#hero-warm {
  background:
    radial-gradient(ellipse 60% 55% at 12% 18%, rgba(210,180,130,0.12) 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 78% 68%, rgba(43,74,59,0.07)   0%, transparent 58%);
}

/* ── 11. EXPLORE indicator: green confidence ──────────────────── */
#hero-explore-scroll > span:first-child {
  color: var(--c-primary) !important;
  opacity: 0.8;
}

/* ── 13. GRID LINES: green tint for brand coherence ──────────── */
.hero-grid-bg {
  background-image:
    linear-gradient(to right,  rgba(43,74,59,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43,74,59,0.05) 1px, transparent 1px),
    linear-gradient(to right,  rgba(43,74,59,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43,74,59,0.02) 1px, transparent 1px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   END GIARDINI HERO ELEVATION v2
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   GIARDINI — SECTION 2 "EXPERIÊNCIA" ELEVATION
   Goal: visible upgrade in hierarchy, premium pillars, image depth.
   Approach: CSS overrides only — HTML changes for inline elements.
   ══════════════════════════════════════════════════════════════════ */

/* ── S2-1. SECTION BACKGROUND: rich warm atmosphere ────────────────
   The flat var(--c-bg) becomes a layered warm gradient with a
   subtle amber pool from top-left and a faint green anchor
   bottom-right — creating visible directionality and depth.        */
#experience {
  background:
    radial-gradient(ellipse 65% 50% at 8% 5%,  rgba(215,195,158,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 92% 95%, rgba(43,74,59,0.07)   0%, transparent 55%),
    linear-gradient(162deg, #fefcf8 0%, #f8f3eb 55%, #f3ede3 100%) !important;
  border-radius: 40px 40px 0 0 !important;
  /* Stronger, more deliberate shadow — the section "lifts" from hero */
  box-shadow:
    0 -50px 100px rgba(240,234,222,0.9),
    0 -20px 50px  rgba(0,0,0,0.04) !important;
}

/* ── S2-2. SECTION LABEL ("01 / A Experiência") ────────────────────
   Style is applied via inline override further down.
   Here we set up the shared utility class.                         */
.s2-label-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--c-primary);
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── S2-3. IMAGE BLOCK ──────────────────────────────────────────────
   More deliberate shadow system. The image now anchors the section
   with real visual weight — not just a placeholder block.          */
.exp-left {
  border-radius: 28px !important;
  box-shadow:
    0 50px 100px -20px rgba(0,0,0,0.14),
    0 20px  48px -10px rgba(43,74,59,0.10),
    0  6px  16px -4px  rgba(0,0,0,0.07) !important;
  /* Removes the initial scale-down — now GSAP handles only opacity+y */
  overflow: hidden !important;
}
/* Subtle warm tonal overlay on the image — adds atmosphere */
.exp-left::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(to bottom, rgba(43,74,59,0.04) 0%, transparent 40%,
      rgba(20,15,10,0.12) 100%);
  pointer-events: none;
  z-index: 11;
}

/* ── S2-4. SECTION H2 ───────────────────────────────────────────────
   Stronger serif presence. The title should read as confident,
   not just large.                                                   */
#experience h2 {
  letter-spacing: -0.03em;
  color: var(--c-dark);
  line-height: 1.02 !important;
}

/* ── S2-5. SECTION BODY COPY ────────────────────────────────────────
   Current opacity:0.6 is too washed out for editorial hierarchy.
   We raise it to 0.70 — more readable, still light.               */
#experience > div > div > div.lg\:col-span-6:last-child > p {
  color: rgba(26,26,26,0.70) !important;
  line-height: 1.75 !important;
  font-size: 1.05rem !important;
}

/* ── S2-6. ANIMATED DIVIDER: stronger brand signature ──────────────
   The current divider is too pale. This version is visibly branded:
   peaks at 55% opacity in brand green, with a wider beam.          */
.s2-divider-track {
  height: 1px;
  position: relative;
  overflow: hidden;
  margin-bottom: 2.75rem;
  width: 100%;
}
.s2-divider-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(43,74,59,0.10) 10%,
    rgba(43,74,59,0.42) 45%,
    rgba(43,74,59,0.55) 50%,
    rgba(43,74,59,0.42) 55%,
    rgba(43,74,59,0.10) 90%,
    transparent
  );
}
.s2-divider-beam {
  position: absolute;
  top: 0;
  left: -100%;
  width: 45%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(43,74,59,0.4), rgba(255,255,255,0.8), rgba(43,74,59,0.4), transparent);
  animation: featDivider 3.2s ease-in-out infinite 0.8s;
}

/* ── S2-7. PILLARS: the core visible upgrade ────────────────────────
   Each pillar gains:
   • A permanent brand-green left border (always visible, not just hover)
   • A cleaner number treatment — green, smaller, more refined
   • The vertical line becomes green on hover
   • Background card subtly revealed via opacity: 0→1 — wider shadow
   • Description text raised from opacity:0.60 to 0.68               */
.exp-pillar {
  padding: 1.25rem 1.5rem 1.25rem 1.25rem !important;
  border-left: 2px solid rgba(43,74,59,0.12) !important;
  margin-left: 0 !important;
  transition:
    border-color 0.35s ease,
    background   0.4s  ease,
    box-shadow   0.35s ease !important;
  border-radius: 0 12px 12px 0 !important;
}
.exp-pillar:hover {
  border-left-color: rgba(43,74,59,0.55) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.05), 0 2px 8px rgba(43,74,59,0.06) !important;
}

/* Number label: green, refined, editorial */
.exp-pillar-num {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-primary) !important;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.exp-pillar:hover .exp-pillar-num { opacity: 1; }

/* Vertical line: green on hover */
.exp-pillar-vline {
  background: rgba(43,74,59,0.18) !important;
  transition: background 0.35s ease;
}
.exp-pillar:hover .exp-pillar-vline {
  background: rgba(43,74,59,0.55) !important;
}

/* Pillar title: stronger */
.exp-pillar h4 {
  font-size: 1.35rem !important;
  letter-spacing: -0.015em;
  color: var(--c-dark) !important;
  margin-bottom: 0.45rem !important;
  line-height: 1.15 !important;
}

/* Pillar description: less washed out */
.exp-pillar p {
  color: rgba(26,26,26,0.64) !important;
  line-height: 1.65 !important;
  font-size: 0.875rem !important;
}

/* Hover card behind pillar: more polished */
.exp-pillar-bg-card {
  border-radius: 0 12px 12px 0 !important;
  border: 1px solid rgba(43,74,59,0.08) !important;
  box-shadow: 0 10px 30px rgba(26,26,26,0.05) !important;
  background: rgba(254,252,248,0.95) !important;
}

/* ── S2-8. PILLARS CONTAINER: tighter, more structured gap ─────── */
.exp-pillars-wrap {
  gap: 0 !important;
  display: flex;
  flex-direction: column;
}
.exp-pillar + .exp-pillar {
  border-top: 1px solid rgba(43,74,59,0.06);
}

/* ── S2-9. PARALLAX WATERMARK: stronger presence ───────────────── */
#parallax-text {
  opacity: 0.04 !important;
  color: var(--c-dark);
}

/* ── S2-10. RIGHT COLUMN TOP SPACING ───────────────────────────── */
#experience .lg\:col-span-6:last-child {
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   END SECTION 2 ELEVATION
   ══════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════
   SECTION 3 — SABORES & OBRAS — Premium Editorial Refinement
   Goal: Transform from "beautiful gallery" to "deliberate menu preview"
   Approach: CSS overrides that work alongside existing animation system
   ══════════════════════════════════════════════════════════════════ */

/* ── S3-1. LOGO BADGE ENTRY: more premium, more intentional ──────
   Current badge is clean but passive. We give it more gravity:
   – stronger multi-layer shadow with green ambient halo
   – refined border with subtle inner glow
   – the breathing animation is kept (logoBadgeBreathe already good)  */
#s3-logo-badge {
  filter:
    drop-shadow(0 12px 28px rgba(43,74,59,0.20))
    drop-shadow(0  4px  8px rgba(43,74,59,0.10));
}
#s3-logo-badge-ring {
  border-color: rgba(253,251,247,1) !important;
  box-shadow:
    0 0  0   1px rgba(43,74,59,0.10),
    0 14px 40px rgba(43,74,59,0.18),
    0  4px 12px rgba(43,74,59,0.10),
    inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* ── S3-2. SECTION LABEL: stronger brand authority ────────────────*/
.s3-section-label {
  font-size: 0.58rem !important;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-primary) !important;
}
.s3-label-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
  animation: live-glow 2.8s ease-in-out infinite;
}
.s3-label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(43,74,59,0.22), transparent);
}

/* ── S3-3. MAIN TITLE BLOCK: more deliberate editorial balance ────
   Title now commands the left column with more intent.
   Right column becomes a proper editorial annotation, not filler.    */
#featured-title {
  letter-spacing: -0.028em !important;
  line-height: 1.0 !important;
}

/* Right annotation panel — stronger identity */
.s3-annotation {
  border-top: 1px solid rgba(43,74,59,0.12);
  padding-top: 1rem;
  max-width: 210px;
}
.s3-annotation-label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.65;
  display: block;
  margin-bottom: 0.5rem;
}
.s3-annotation-line {
  width: 20px; height: 1px;
  background: linear-gradient(to right, var(--c-primary), rgba(183,147,88,0.4));
  margin-bottom: 0.75rem;
  opacity: 0.7;
}
.s3-annotation-title {
  font-family: 'Instrument Serif', serif;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--c-dark);
  line-height: 1.2;
  margin-bottom: 0.65rem;
  display: block;
}
.s3-annotation-body {
  font-size: 0.70rem;
  font-weight: 400;
  color: rgba(26,26,26,0.52);
  line-height: 1.6;
  margin: 0;
}
.s3-annotation-count {
  display: flex; align-items: baseline; gap: 0.3rem;
  margin-top: 1rem;
}
.s3-annotation-count strong {
  font-family: 'Instrument Serif', serif;
  font-size: 1.45rem;
  color: var(--c-primary);
  letter-spacing: -0.03em;
  font-weight: 400;
}
.s3-annotation-count span {
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(26,26,26,0.45);
  font-weight: 500;
}

/* ── S3-4. MAIN DIVIDER: full brand signature line ───────────────*/
.s3-divider {
  margin-top: 1.75rem;
  position: relative;
  height: 1px;
  overflow: hidden;
  width: 100%;
}
.s3-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26,26,26,0.06),
    rgba(43,74,59,0.18) 20%,
    rgba(43,74,59,0.38) 50%,
    rgba(43,74,59,0.18) 80%,
    rgba(26,26,26,0.06)
  );
}
.s3-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9), rgba(43,74,59,0.55), transparent);
  animation: featDivider 4s ease-in-out infinite 2s;
}

/* ── S3-5. IMAGE CARDS: elevated frame treatment ─────────────────
   Cards keep their 3/4.2 portrait ratio and animation.
   We add editorial numbering above, and clean up the bottom labels. */
.feat-card-inner {
  /* Premium inner border glow on hover already handled inline;
     here we add a permanent very subtle inner ring */
  box-shadow:
    0 18px 52px rgba(26,26,26,0.10),
    0  4px 14px rgba(26,26,26,0.05),
    inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}
.feat-card-inner:hover {
  box-shadow:
    0 28px 72px rgba(26,26,26,0.14),
    0  6px 18px rgba(26,26,26,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
/* Card number indicator (added via HTML) */
.s3-card-index {
  font-family: 'Instrument Serif', serif;
  font-size: 2.2rem;
  line-height: 1;
  color: rgba(43,74,59,0.22);       /* ↑ from 0.09 — visible but still restrained */
  letter-spacing: -0.04em;
  margin-bottom: 0.65rem;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ── S3-6. CARD LABELS: refined, more premium ────────────────────
   Replace the simple kicker+line with a richer metadata row.        */
.s3-card-label {
  padding: 1rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.s3-card-label-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-primary);
  opacity: 0.70;
  white-space: nowrap;
  position: relative;
  padding-right: 0.875rem;
}
.s3-card-label-tag::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(43,74,59,0.25);
}
.s3-card-label-name {
  font-family: 'Instrument Serif', serif;
  font-size: 0.825rem;
  letter-spacing: -0.008em;
  color: rgba(26,26,26,0.65);
  font-style: italic;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s3-card-label-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(43,74,59,0.12), transparent);
  min-width: 20px;
  max-width: 48px;
}

/* ── S3-7. CTA AREA: meaningful payoff ───────────────────────────
   The CTA block becomes a full editorial close for the section.
   Stronger eyebrow, intentional divider logic, premium button feel. */
.s3-cta-wrap {
  margin-top: 2rem;      /* Pulls block into the final rhythm of the section */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 10;
}
/* Eyebrow above CTA — section payoff line */
.s3-cta-eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;               /* ↑ from 0.85rem — more intentional breathing between the two lines */
  margin-bottom: 2.75rem;    /* ↑ from 2.25rem — closer connection to CTA button without crowding */
}
.s3-cta-eyebrow-label {
  font-size: 0.54rem;        /* ↑ slightly — more legible at this weight */
  font-weight: 500;          /* ↓ from 700 — let the divider label carry authority instead */
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.32); /* ↓ slightly — makes it feel like a quiet preamble, not a shout */
}
.s3-cta-divider-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;               /* ↑ from 1.25rem — more air between lines and label */
  width: 100%;
  max-width: 520px;          /* ↑ from 480px — slightly wider, feels less cramped */
}
.s3-cta-divider-line {
  flex: 1;
  height: 1px;
}
.s3-cta-divider-line-l {
  background: linear-gradient(to right, transparent, rgba(43,74,59,0.38));
}
.s3-cta-divider-line-r {
  background: linear-gradient(to left, transparent, rgba(43,74,59,0.38));
}
.s3-cta-divider-label {
  font-family: 'Instrument Serif', serif; /* serif for the key label — gives editorial weight */
  font-size: 0.95rem;        /* ↑ — this is the hierarchy anchor, it should read clearly */
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;      /* remove uppercase on the serif — keep it literary */
  color: rgba(26,26,26,0.62);
  white-space: nowrap;
}
/* Sub-caption below CTA */
.s3-cta-sub {
  margin-top: 2.25rem;       /* ↑ from 1.5rem — clearly separated from the button */
  padding-top: 1.5rem;       /* adds visual gap above the text from its baseline */
  border-top: 1px solid rgba(43,74,59,0.07); /* hairline above — anchors the text to the divider rhythm */
  width: 100%;
  max-width: 520px;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(26,26,26,0.30); /* ↑ slightly — readable but clearly tertiary */
  text-align: center;
}

/* ── S3-8. SECTION CLOSE + TRANSITION ────────────────────────────
   The section now ends with deliberate vertical breathing room
   and a richer transition element into Clube do Livro.              */
.s3-section-close {
  position: relative;
  height: 5rem;
  margin-top: 1.5rem;
  pointer-events: none;
}
.s3-section-close::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(237,229,216,0.45) 100%
  );
}

/* Transition bridge: richer, more designed */
.s3-transition-bridge {
  position: relative;
  z-index: 61;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(43,74,59,0.08) 15%,
    rgba(183,147,88,0.28) 40%,
    rgba(43,74,59,0.22) 50%,
    rgba(183,147,88,0.28) 60%,
    rgba(43,74,59,0.08) 85%,
    transparent 100%
  );
}
.s3-transition-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.6) 45%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0.6) 55%,
    transparent
  );
  animation: featDivider 4.5s ease-in-out infinite 1s;
}
/* Small diamond at the centre of the bridge */
.s3-bridge-diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px; height: 6px;
  background: rgba(183,147,88,0.55);
  box-shadow: 0 0 8px rgba(183,147,88,0.3);
}

/* Fade-to-next gradient (sits inside the section before the bridge) */
.s3-fade-out {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(241, 234, 222, 0.6) 60%,
    rgba(237, 229, 214, 0.9) 100%
  );
  z-index: 5;
}

/* ── S3-9. FEAT REVEAL ANIMATION (already used, just ensure it's here) */
.feat-reveal {
  transition:
    opacity  1.1s cubic-bezier(0.16,1,0.3,1),
    transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.feat-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ══════════════════════════════════════════════════════════════════
   END SECTION 3 ELEVATION v1
   ══════════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════════
   GIARDINI HOMEPAGE — BRAND HARMONIZATION PASS v3
   Goal : Absorb the menu page's premium identity vocabulary into the
          light editorial homepage — without darkening it.
   Method: Introduce gold token, unify section labels, warm dividers,
           improve CTAs, add brand marquee, improve section rhythm.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN: Gold enters the light system ──────────────────────
   The menu page uses --c-gold: #B79358 throughout — in kickers,
   prices, dividers, badges. Registering it here makes it a proper
   token accessible to all CSS in this file.                       */
:root {
  --c-gold:       #B79358;
  --c-gold-soft:  rgba(183,147,88,0.60);
  --c-gold-faint: rgba(183,147,88,0.10);
}

/* ── 2. NAVBAR: Contextual refinement ────────────────────────────
   Scrolled state gets a barely-there gold border — mirrors the
   menu page's is-scrolled treatment. Keeps page identity on scroll. */
#navbar.is-scrolled {
  border-bottom: 1px solid rgba(183,147,88,0.09) !important;
}
.nav-cta:hover {
  box-shadow: 0 8px 24px -4px rgba(43,74,59,0.32) !important;
}

/* ── 3. PRELOADER: Gold gradient on loading bar ──────────────────*/
.preloader-bar {
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-gold) 100%) !important;
}

/* ── 4. KICKER SYSTEM: Green-to-gold dual line + gold diamond ─────
   The kicker line now fades from brand green into warm gold.
   The diamond separator becomes gold — same accent logic the menu 
   uses for its gold kicker-lines.                                 */
.kicker-line {
  background: linear-gradient(90deg, var(--c-primary) 0%, rgba(183,147,88,0.70) 100%) !important;
  width: 26px !important;
}
.kicker-diamond {
  background: var(--c-gold) !important;
  opacity: 0.65 !important;
}

/* ── 5. HERO SEPARATOR BEAM: Green → warm gold shimmer ───────────
   The beam now reads as warm gold rather than cold white — more
   connected to the menu page's gold shimmer vocabulary.           */
#hero-sep::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183,147,88,0.18) 18%,
    rgba(255,255,255,0.80) 50%,
    rgba(183,147,88,0.18) 82%,
    transparent
  ) !important;
}

/* ── 6. HERO META ROW: Gold border accent ────────────────────────
   The top border of the meta row picks up gold warmth — same
   accent as the menu's section-header border treatment.           */
.hero-meta {
  border-top-color: rgba(183,147,88,0.12) !important;
}

/* ── 7. SECTION 2 — LABEL LINE: green → gold gradient ───────────*/
.s2-label-line {
  background: linear-gradient(90deg, var(--c-primary) 0%, rgba(183,147,88,0.65) 100%) !important;
  width: 20px !important;
  opacity: 0.70;
}

/* ── 8. SECTION 2 — DIVIDER: gold center beam ────────────────────
   The animated divider separating body copy from pillars now has
   a warm gold centre — more premium, more Giardini.               */
.s2-divider-track::before {
  background: linear-gradient(
    to right,
    transparent,
    rgba(43,74,59,0.07) 8%,
    rgba(43,74,59,0.35) 38%,
    rgba(183,147,88,0.42) 50%,
    rgba(43,74,59,0.35) 62%,
    rgba(43,74,59,0.07) 92%,
    transparent
  ) !important;
}
.s2-divider-beam {
  background: linear-gradient(
    to right,
    transparent,
    rgba(43,74,59,0.25),
    rgba(183,147,88,0.62),
    rgba(255,255,255,0.75),
    rgba(183,147,88,0.62),
    rgba(43,74,59,0.25),
    transparent
  ) !important;
}

/* ── 9. SECTION 2 — PILLARS: gold shimmer on hover ──────────────*/
.exp-pillar:hover {
  border-left-color: rgba(43,74,59,0.62) !important;
  background: rgba(255,255,255,0.80) !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.05),
    0 2px 8px rgba(43,74,59,0.07),
    0 0 0 1px rgba(183,147,88,0.04) !important;
}
.exp-pillar:hover .exp-pillar-vline {
  background: linear-gradient(to bottom, rgba(43,74,59,0.55), rgba(183,147,88,0.35)) !important;
}

/* ── 10. SECTION 3 — LABEL DOT: gold (matches menu's gold kickers) */
.s3-label-dot {
  background: var(--c-gold) !important;
  box-shadow: 0 0 8px rgba(183,147,88,0.40) !important;
  animation: none !important;
}

/* ── 11. SECTION 3 — EXTENDING LINE: green → gold soft ──────────*/
.s3-label-line {
  background: linear-gradient(
    to right,
    rgba(43,74,59,0.20),
    rgba(183,147,88,0.18),
    transparent
  ) !important;
}

/* ── 12. SECTION 3 — ANNOTATION: gold-warm system ───────────────
   The annotation panel border and label pick up warm gold —
   stronger editorial identity, like the menu's section-header.   */
.s3-annotation {
  border-top: 1px solid rgba(183,147,88,0.18) !important;
}
.s3-annotation-label {
  color: var(--c-gold) !important;
  opacity: 0.72 !important;
}
.s3-annotation-line {
  background: linear-gradient(to right, var(--c-gold), rgba(43,74,59,0.28)) !important;
  opacity: 0.62 !important;
}
.s3-annotation-count strong {
  color: var(--c-gold) !important;
}

/* ── 13. SECTION 3 — CARD LABELS: gold system ────────────────────
   Card label tags shift from faint green to warm gold —
   mirrors the menu page's .item-price gold treatment.             */
.s3-card-label-tag {
  color: var(--c-gold) !important;
  opacity: 0.78 !important;
}
.s3-card-label-tag::after {
  background: rgba(183,147,88,0.30) !important;
}
.s3-card-label-line {
  background: linear-gradient(to right, rgba(183,147,88,0.18), transparent) !important;
}

/* ── 14. SECTION 3 — MAIN DIVIDER: gold peak ────────────────────*/
.s3-divider::before {
  background: linear-gradient(
    to right,
    rgba(26,26,26,0.04),
    rgba(43,74,59,0.10) 16%,
    rgba(183,147,88,0.30) 44%,
    rgba(183,147,88,0.42) 50%,
    rgba(183,147,88,0.30) 56%,
    rgba(43,74,59,0.10) 84%,
    rgba(26,26,26,0.04)
  ) !important;
}

/* ── 15. SECTION 3 — CTA AREA: gold divider vocabulary ──────────
   The "Cardápio completo" divider lines mirror the menu's gold
   section-header shimmer line system.                             */
.s3-cta-divider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2.25rem;
}
.s3-cta-divider-line {
  flex: 1;
  height: 1px;
}
.s3-cta-divider-line-l {
  background: linear-gradient(to right, transparent, rgba(183,147,88,0.45)) !important;
}
.s3-cta-divider-line-r {
  background: linear-gradient(to left, transparent, rgba(183,147,88,0.45)) !important;
}
.s3-cta-divider-label {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(26,26,26,0.45) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
}
.s3-cta-sub {
  border-top-color: rgba(183,147,88,0.10) !important;
  letter-spacing: 0.30em !important;
}

/* ── 16. TRANSITION BRIDGE: stronger gold diamond + dual line ────
   Bridge between Section 3 and Clube do Livro. The diamond now
   reads as intentionally branded — same vocabulary as the menu's
   section-header gold shimmer.                                    */
.s3-transition-bridge {
  height: 2px !important;
  background: linear-gradient(
    to right,
    transparent  0%,
    rgba(43,74,59,0.07) 10%,
    rgba(183,147,88,0.30) 38%,
    rgba(43,74,59,0.26) 50%,
    rgba(183,147,88,0.30) 62%,
    rgba(43,74,59,0.07) 90%,
    transparent  100%
  ) !important;
}

/* ── 18. CLUBE DO LIVRO: gold reinforcement ──────────────────────
   The quote block and step bars pick up gold — consistent with
   the brand warmth established in the section 3 card system.     */
#clube-quote-block {
  border-top-color:    rgba(183,147,88,0.09) !important;
  border-bottom-color: rgba(183,147,88,0.09) !important;
}
.clube-step {
  border-top-color: rgba(183,147,88,0.11) !important;
}
.clube-step:last-of-type {
  border-bottom-color: rgba(183,147,88,0.11) !important;
}
.clube-step-bar {
  background: linear-gradient(
    to right,
    rgba(43,74,59,0.38),
    rgba(183,147,88,0.55)
  ) !important;
}

/* ── 19. SECTION 5 (DARK): Gold separator beam ───────────────────
   The s5-sep separator line picks up the gold vocabulary —
   connecting even the dark cinematic section to the brand system. */
.s5-sep::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(183,147,88,0.25) 22%,
    rgba(255,255,255,0.32) 50%,
    rgba(183,147,88,0.25) 78%,
    transparent
  ) !important;
  box-shadow: 0 0 18px rgba(183,147,88,0.18) !important;
}

/* ── 20. FOOTER: Top line uses gold-white-gold (already good) ────
   Reinforce the footer bar's gold accent for maximum coherence    */
.ft-top-line {
  background: linear-gradient(
    to right,
    transparent,
    rgba(183,147,88,0.45) 22%,
    rgba(255,255,255,0.14) 50%,
    rgba(183,147,88,0.45) 78%,
    transparent
  ) !important;
}

/* ══════════════════════════════════════════════════════════════════
   END HARMONIZATION PASS v3
   ══════════════════════════════════════════════════════════════════ */



    /* ── S5 PREMIUM EXTRAS ─────────────────────────────────────────── */
    
    
    
    
    
    

    
    
    
    
    /* Particles */
    .s5-particle {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: rgba(210, 195, 165, 0.45);
      pointer-events: none;
      animation: s5-particle 5s ease-in-out infinite;
    }
    /* Corner frame decorations */
    .s5-corner {
      position: absolute;
      width: 36px;
      height: 36px;
      pointer-events: none;
      z-index: 15;
      opacity: 0;
      transition: opacity 1s ease 2s;
    }
    .s5-corner.s5-visible { opacity: 1; }
    .s5-corner-tl { top: 2rem; left: 2rem; border-top: 1px solid rgba(255,255,255,0.14); border-left: 1px solid rgba(255,255,255,0.14); }
    .s5-corner-tr { top: 2rem; right: 2rem; border-top: 1px solid rgba(255,255,255,0.14); border-right: 1px solid rgba(255,255,255,0.14); }
    .s5-corner-bl { bottom: 5.5rem; left: 2rem; border-bottom: 1px solid rgba(255,255,255,0.07); border-left: 1px solid rgba(255,255,255,0.07); }
    .s5-corner-br { bottom: 5.5rem; right: 2rem; border-bottom: 1px solid rgba(255,255,255,0.07); border-right: 1px solid rgba(255,255,255,0.07); }
    /* Separator line between content and CTA */
    .s5-sep {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 1px;
      margin: 0 auto 3.5rem;
      overflow: visible;
      transform-origin: center;
      /* Mask to softly fade edges of the beam if it flies out */
      mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 85%, transparent);
    }
    .s5-sep::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(183,147,88,0.3) 25%, rgba(255,255,255,0.4) 50%, rgba(183,147,88,0.3) 75%, transparent);
      box-shadow: 0 0 12px rgba(183,147,88,0.15);
      transform: scaleX(0);
      transform-origin: center;
      opacity: 0;
      animation: s5-sep-pulse 4s ease-in-out infinite;
    }
    .s5-sep.s5-sep-visible::before {
      animation: s5-sep-line-grow 1s cubic-bezier(0.16,1,0.3,1) forwards, s5-sep-pulse 4s ease-in-out infinite;
    }
    .s5-sep::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -60%;
      width: 50%;
      height: 3px;
      background: linear-gradient(90deg, transparent, rgba(183,147,88,0.5) 40%, rgba(255,255,255,0.95) 50%, rgba(183,147,88,0.5) 60%, transparent);
      filter: blur(1.5px);
      box-shadow: 0 0 16px rgba(255,255,255,0.25), 0 0 10px rgba(183,147,88,0.5);
      opacity: 0;
      animation: s5-sep-idle-shimmer 3.5s linear infinite;
    }
    /* O feixe de luz intenso agora so inicia quando o botão CTA abaixo for hover */
    .s5-sep.s5-sep-active::after {
      opacity: 1;
      animation: s5-sep-beam 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    }
    /* Vertical guide lines (editorial) */
    .s5-guide-lines {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 6rem;
      pointer-events: none;
      z-index: 3;
    }
    .s5-guide-line {
      width: 1px;
      height: 100%;
      background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.025) 30%, rgba(255,255,255,0.025) 70%, transparent);
    }

    /* ── HEADLINE ITALIC: gradient dourado suave — um único punto de destaque ─ */
    .s5-gold-text {
      display: inline-block;
      font-style: italic;
      /* Gradiente suave: dourado desaturado, varia de areia quente a creme iluminado */
      background: linear-gradient(
        102deg,
        #b8976a 0%,
        #d4b882 28%,
        #ede0c0 52%,
        #c9a86a 78%,
        #b8976a 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      /* Leve sombra para profundidade contra o fundo escuro */
      filter: drop-shadow(0 2px 20px rgba(180,145,80,0.18)) drop-shadow(0 0 60px rgba(160,125,60,0.12));
    }

    /* ── TRANSIÇÃO SEÇÕES DE VÍDEO -> PRÓXIMAS SEÇÕES ────────────── */
    #hero-viewport::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 15vh;
      background: linear-gradient(to bottom, transparent 50%, var(--c-bg) 100%);
      pointer-events: none;
      z-index: 100;
    }
    #experience-video::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 18vh;
      background: linear-gradient(to bottom, transparent 0%, rgba(13, 22, 16, 0.45) 45%, rgba(13, 22, 16, 0.85) 80%, #0d1610 100%);
      pointer-events: none;
      z-index: 100;
    }
  


    /* ── SECTION 5 DARK ATMOSPHERIC BASE ────────────────────────────────── */
    #location { background: #0d1610; position: relative; overflow: hidden; }
    /* Grain */
    .loc-dk-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.036; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size: 180px 180px; }
    /* Top golden line */
    .loc-dk-topline { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 5; background: linear-gradient(to right, transparent, rgba(183,147,88,0.42) 25%, rgba(255,255,255,0.10) 50%, rgba(183,147,88,0.42) 75%, transparent); }
    /* Ambient orbs */
    .loc-dk-orb1 { position: absolute; top: -5%; right: -5%; width: 55vw; height: 55vw; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(43,74,59,0.22) 0%, transparent 60%); animation: loc-orb-1 24s ease-in-out infinite; }
    .loc-dk-orb2 { position: absolute; bottom: -10%; left: -5%; width: 45vw; height: 45vw; border-radius: 50%; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(183,147,88,0.14) 0%, transparent 60%); animation: loc-orb-2 30s ease-in-out infinite 4s; }
    /* Dot grid */
    .loc-dk-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.052; background-image: radial-gradient(circle, rgba(255,255,255,0.28) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.55) 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.55) 80%, transparent); }
    /* Horizontal rhythm lines */
    .loc-dk-hline { position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; }
    /* Section badge */
    .loc-dk-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0.95rem; border-radius: 9999px; border: 1px solid rgba(183,147,88,0.28); background: rgba(183,147,88,0.07); backdrop-filter: blur(10px); flex-shrink: 0; }
    /* Map bar */
    .loc-map-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 1.8rem 1.8rem 1.6rem; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 60%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; }
    /* Map corner brackets */
    .loc-corner { position: absolute; width: 20px; height: 20px; z-index: 25; pointer-events: none; transition: all 0.5s cubic-bezier(0.16,1,0.3,1); }
    .loc-corner-tl { top: 14px; left: 14px; border-top: 1.5px solid rgba(183,147,88,0.55); border-left: 1.5px solid rgba(183,147,88,0.55); }
    .loc-corner-tr { top: 14px; right: 14px; border-top: 1.5px solid rgba(183,147,88,0.55); border-right: 1.5px solid rgba(183,147,88,0.55); }
    .loc-corner-bl { bottom: 14px; left: 14px; border-bottom: 1.5px solid rgba(183,147,88,0.55); border-left: 1.5px solid rgba(183,147,88,0.55); }
    .loc-corner-br { bottom: 14px; right: 14px; border-bottom: 1.5px solid rgba(183,147,88,0.55); border-right: 1.5px solid rgba(183,147,88,0.55); }
    .ed-map-container:hover .loc-corner { width: 30px; height: 30px; border-color: rgba(183,147,88,0.9); }
    /* Map hover */
    .ed-map-container { transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), box-shadow 1.2s cubic-bezier(0.16,1,0.3,1); }
    .ed-map-container:hover { transform: scale(0.98) translateY(-5px); box-shadow: 0 48px 96px -24px rgba(0,0,0,0.70), 0 0 0 1px rgba(183,147,88,0.12) !important; }
    /* Fine-line row effect */
    .loc-dk-row { position: relative; padding-left: 2rem; }
    .loc-dk-fineline { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.08); overflow: hidden; }
    .loc-dk-fineline::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: rgba(183,147,88,0.65); transition: top 0.65s cubic-bezier(0.16,1,0.3,1); }
    .loc-dk-row:hover .loc-dk-fineline::after { top: 0; }
    /* Animated divider */
    .loc-dk-divider { position: relative; height: 1px; overflow: hidden; margin-bottom: 3rem; max-width: 380px; }
    .loc-dk-divider::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.06), rgba(183,147,88,0.2) 50%, transparent); }
    .loc-dk-divider::after { content: ''; position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient(to right, transparent, rgba(183,147,88,0.55), transparent); animation: featDivider 3.5s ease-in-out infinite 1s; }
    /* Dark watermark */
    #loc-dk-wm { opacity: 0; transition: opacity 2.2s ease 0.5s; }
    /* Scroll reveals */
    .loc-dr { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1), filter 1.1s cubic-bezier(0.16,1,0.3,1); }
    #location.loc-active .loc-dr { opacity: 1; transform: translateY(0); filter: blur(0); }
    #location.loc-active #loc-dk-wm { opacity: 1; }
    .d1{transition-delay:0.08s;} .d2{transition-delay:0.20s;} .d3{transition-delay:0.32s;}
    .d4{transition-delay:0.44s;} .d5{transition-delay:0.56s;} .d6{transition-delay:0.68s;} .d7{transition-delay:0.80s;}
    /* ── ANIMATIONS ─────────── */
    
    
    .ed-reveal {
      opacity: 0;
    }
    .ed-reveal.is-visible {
      animation: editorialReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .ed-watermark {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      position: absolute;
      right: 0%;
      top: 50%;
      transform: translateY(-50%) translateX(20%);
      font-size: clamp(10rem, 25vw, 30rem);
      line-height: 0.8;
      font-family: 'Instrument Serif', serif;
      color: rgba(26,26,26,0.04);
      filter: blur(8px);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }
    
    /* Premium Button (Retained) */
    .loc-beam-container {
      position: relative; display: inline-flex; border-radius: 9999px; padding: 1.5px; overflow: hidden; background: rgba(26, 26, 26, 0.1);
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translateZ(0); backface-visibility: hidden;
    }
    .loc-beam-container .loc-beam-border {
      position: absolute; inset: -400%; background: conic-gradient(from 0deg at 50% 50%, transparent 70%, var(--c-primary) 100%, transparent 100%);
      animation: rotate-beam 12s linear infinite; z-index: 0;
    }
    
    .ed-map-container {
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), box-shadow 1.2s cubic-bezier(0.16,1,0.3,1);
    }
    .ed-map-container:hover {
      transform: scale(0.98) translateY(-4px);
      box-shadow: 0 40px 80px -20px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(26,26,26,0.08);
    }
    
    .ed-data-row {
      position: relative;
    }
    
    /* Fine-line hover effects */
    .ed-fine-line {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(26,26,26,0.1);
      overflow: hidden;
    }
    .ed-fine-line::after {
      content: '';
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--c-primary);
      transition: top 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    .ed-data-row:hover .ed-fine-line::after {
      top: 0;
    }
  


    /* ── Footer base ───────────────────────────────────────────────── */
    #site-footer {
      position: relative;
      z-index: 50;
      background: var(--c-dark);
      overflow: hidden;
    }

    /* Grain over dark bg */
    .ft-grain {
      position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.045;
      background-image: url('data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.78\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\' opacity=\'1\'/%3E%3C/svg%3E');
      background-size: 180px 180px;
    }

    /* Atmospheric orbs (dark version) */
    .ft-orb-1 {
      position: absolute; top: -20%; right: -8%; width: 55vw; height: 55vw;
      border-radius: 50%; pointer-events: none; z-index: 1;
      background: radial-gradient(circle, rgba(43,74,59,0.18) 0%, transparent 65%);
      animation: loc-orb-1 28s ease-in-out infinite;
    }
    .ft-orb-2 {
      position: absolute; bottom: -25%; left: -6%; width: 40vw; height: 40vw;
      border-radius: 50%; pointer-events: none; z-index: 1;
      background: radial-gradient(circle, rgba(183,147,88,0.09) 0%, transparent 65%);
      animation: loc-orb-2 34s ease-in-out infinite 5s;
    }

    /* Top separator gradient line */
    .ft-top-line {
      position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(to right,
        transparent,
        rgba(183,147,88,0.4) 25%,
        rgba(255,255,255,0.12) 50%,
        rgba(183,147,88,0.4) 75%,
        transparent);
      z-index: 5;
    }

    /* Footer nav links */
    .ft-nav-link {
      font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em;
      text-transform: uppercase; text-decoration: none;
      color: rgba(255,255,255,0.38);
      position: relative; padding-bottom: 2px;
      transition: color 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .ft-nav-link::after {
      content: ''; position: absolute; bottom: 0; left: 0;
      width: 0; height: 1px;
      background: rgba(183,147,88,0.7);
      transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .ft-nav-link:hover { color: rgba(255,255,255,0.85); }
    .ft-nav-link:hover::after { width: 100%; }

    /* Footer social icon links */
    .ft-social {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.3);
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .ft-social:hover {
      border-color: rgba(183,147,88,0.45);
      color: rgba(183,147,88,0.9);
      background: rgba(183,147,88,0.06);
      transform: translateY(-2px);
    }

    /* Bottom bar divider */
    .ft-divider {
      height: 1px; width: 100%;
      background: linear-gradient(to right,
        transparent, rgba(255,255,255,0.06) 20%,
        rgba(255,255,255,0.06) 80%, transparent);
    }

    /* Scroll reveal */
    .ft-reveal {
      opacity: 0; transform: translateY(22px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    #site-footer.ft-in-view .ft-reveal { opacity: 1; transform: translateY(0); }

    .ft-reveal-d1 { transition-delay: 0.05s; }
    .ft-reveal-d2 { transition-delay: 0.15s; }
    .ft-reveal-d3 { transition-delay: 0.25s; }
    .ft-reveal-d4 { transition-delay: 0.35s; }
    .ft-reveal-d5 { transition-delay: 0.45s; }
  


    @media (max-width: 900px) {
      .ft-grid { grid-template-columns: 1fr 1fr !important; gap: 3rem 2rem !important; }
    }
    @media (max-width: 600px) {
      .ft-grid { grid-template-columns: 1fr !important; }
    }
  


/* ══ REMOVED HERO RESPONSIVE DUPLICATES (Unified Mobile Stack natively merged above) ══ */

@media (max-width: 767px) {
  /* 1. Ocultar o texto gigante "TEMPO" no fundo */
  #experience #parallax-text { display: none !important; }
  
  /* 2. Reduzir espaços vazios da seção como um todo e remover bordas arredondadas que evidenciam o fundo do vídeo no mobile */
  #experience {
    padding-top: 4.5rem !important;
    padding-bottom: 8.5rem !important; /* Aumentado para dar espaço ao logo da próxima seção no mobile */
    border-radius: 0 !important;
  }
  
  /* 3. Conectar a imagem ao conteúdo (altura menor e gap reduzido) */
  #experience .grid.gap-16 { gap: 2rem !important; }
  #experience .exp-left { height: 40vh !important; }
  
  /* 4. Aproximar o Título da Descrição e do Divisor Animado */
  #experience .word-wrap.mb-8 { margin-bottom: 0.75rem !important; }
  #experience p.mb-10 { margin-bottom: 1.5rem !important; }
  #experience div[style*="height:1px"].sec2-title { margin-bottom: 1.5rem !important; }
  
  /* 5. Compactar os itens da lista / pilares (01, 02, 03) */
  #experience .flex-col.gap-\[0\.4rem\] { gap: 0rem !important; }
  #experience .exp-pillar { padding: 1.2rem 0.5rem !important; }
  #experience .exp-pillar h4 { 
    margin-bottom: 0.15rem !important; 
    font-size: 1.25rem !important; 
  }
  #experience .exp-pillar p { 
    font-size: 0.9rem !important; 
    line-height: 1.45 !important; 
  }
  
  /* Garantir que a Sessão 3 não suba sobre o conteúdo da Sessão 2 no mobile */
  #featured {
    margin-top: 0 !important;
  }

.btn-primary:hover .s4-beam,
    .hero-btn-primary:hover .s4-beam,
    .loc-beam-container:hover .s4-beam {
      opacity: 1;
      animation: s4-shimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    

    .nav-btn:hover .s4-beam,
    .pdf-btn:hover .s4-beam {
      opacity: 1;
      animation: s4-shimmer 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }


    /* ── Hero ────────────────────────────────────────────────────────── */
    /* ── Hero ────────────────────────────────────────────────────────── */
    #hero-pin-wrapper {
      position: relative;
      width: 100%;
    }

    #hero-viewport {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      /* GPU layer promotion — prevents flickering during GSAP pin/unpin */
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    .hero-content {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 2rem;
      pointer-events: none;
    }

    .hero-content > * {
      pointer-events: auto;
    }

    /* ── BASE HERO STRUCTURE ── */
    /* Hero Scroll Indicator */
    .hero-scroll {
      position: absolute;
      bottom: 3rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      color: rgba(255, 255, 255, 0.8);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      pointer-events: none;
      opacity: 0;
    }

    .hero-scroll-line {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
      position: relative;
    }

    #hero-pin-wrapper {
      position: relative;
      width: 100%;
    }

    /* Gradient fade from hero bottom into the dark menu body moved to menu.css or inline where needed */

    /* Bridge element — appears as text exits, bridges hero to cat-nav */
    #hero-bridge {
      position: absolute;
      bottom: 14%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 15;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.85rem;
      opacity: 0;
      pointer-events: none;
    }
    .hero-bridge-label {
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.6);
    }
    .hero-bridge-line {
      width: 1px;
      height: 56px;
      background: linear-gradient(to bottom, rgba(183, 147, 88, 0.55), transparent);
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      /* Deep green to near-black gradient, smooth blend, no washed-out look */
      background: radial-gradient(ellipse at 50% 55%, #08110a 0%, #030504 60%, #010201 100%);
    }

    /* ── CINEMATIC PRODUCT INTEGRATION ── */
    .product-glow {
      position: absolute;
      top: 55%; /* Keep aligned with product center */
      left: 50%; /* Re-centered */
      transform: translate(-50%, -50%);
      width: 45vw;
      height: 45vw;
      max-width: 600px;
      max-height: 600px;
      /* Soft, diffused, low intensity radial glow */
      background: radial-gradient(circle at center, rgba(38, 66, 52, 0.08) 0%, transparent 65%);
      filter: blur(80px);
      pointer-events: none;
      z-index: -1;
    }

    /* Subtle shadow at the base of the product for grounding */
    .product-shadow {
      position: absolute;
      bottom: 20%;
      left: 50%; /* Re-centered */
      transform: translateX(-50%);
      width: 14vw;
      height: 2.5vw;
      max-width: 220px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, transparent 70%);
      filter: blur(10px);
      z-index: 0;
      pointer-events: none;
    }

    #video-frame {
      position: absolute;
      top: 55%; /* Moved SLIGHTLY DOWN for text readability above */
      left: 50%; /* Kept centered horizontally */
      transform: translate(-50%, -50%);
      width: 25vw; /* Perfectly balanced width, not over-enlarged */
      max-width: 400px;
      aspect-ratio: 9/16;
      z-index: 1;
      overflow: hidden;
      /* Extremely soft feathering, zero visible edges */
      mask-image: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 0.85) 45%, 
        rgba(0, 0, 0, 0.05) 75%, 
        rgba(0, 0, 0, 0) 85%
      );
      -webkit-mask-image: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 1) 0%, 
        rgba(0, 0, 0, 0.85) 45%, 
        rgba(0, 0, 0, 0.05) 75%, 
        rgba(0, 0, 0, 0) 85%
      );
      opacity: 0.95;
    }

    #seq-canvas {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: blur(10px);
      opacity: 0;
      transform: scale(1.05); /* Slight zoom for entrance */
    }

    #seq-canvas.ready {
      filter: blur(0) contrast(1.1) brightness(1.05); /* Highlight & reflection enhancement */
      opacity: 1;
      transform: scale(1);
      transition: filter 2.5s cubic-bezier(0.16, 1, 0.3, 1), 
                  opacity 2s ease,
                  transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      /*
        The overlay serves two purposes:
        1. Vignette the cup edges (radial, keeps the cup vivid at center)
        2. Darken the upper zone where the text lives (linear, top-to-mid)
        The two gradients stack multiplicatively — each reinforcing the
        area where it needs to act without fighting the other zone.
      */
      background:
        /* Upper text zone: progressive dark curtain from top */
        linear-gradient(
          to bottom,
          rgba(4, 7, 4, 0.72) 0%,
          rgba(4, 7, 4, 0.55) 18%,
          rgba(4, 7, 4, 0.30) 36%,
          rgba(4, 7, 4, 0.05) 52%,
          transparent 64%
        ),
        /* Radial edge vignette — frames the cup, keeps it cinematic */
        radial-gradient(ellipse at 50% 62%,
          transparent 28%,
          rgba(1, 2, 1, 0.35) 60%,
          rgba(1, 2, 1, 0.90) 100%
        );
    }

    .hero-grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 180px 180px;
    }

    .hero-title-sep { display: none; }
    
    .line {
      display: block;
      overflow: visible;
      padding-bottom: 4px;
    }

    .line-inner {
      display: block;
      transform: translateY(115%);
      will-change: transform;
      opacity: 0;
    }

    /* ── HERO KICKER: editorial label with flanking lines ─────────────
       The classic hospitality label: no bullet, just measured lines
       flanking the brand descriptor. Gold — restrained at 0.72 alpha.
    ─────────────────────────────────────────────────────────────────── */
    .hero-kicker {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      font-size: 0.58rem;
      font-weight: 600;
      letter-spacing: 0.52em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.80);
      margin-bottom: 3rem;
      opacity: 0;
      transform: translateY(10px);
    }

    /* Flanking lines instead of a bullet */
    .kicker-line {
      width: 28px;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(183, 147, 88, 0.55));
      flex-shrink: 0;
    }

    .kicker-line:last-of-type,
    .kicker-line + .kicker-line {
      background: linear-gradient(to left, transparent, rgba(183, 147, 88, 0.55));
    }

    /* ── SHIMMER BEAM BUTTON (conic-gradient advanced) ──────────────── */
    .loc-beam-container {
      position: relative;
      display: inline-flex;
      border-radius: 9999px;
      overflow: hidden;
      transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 10;
    }

    .loc-beam-container:hover {
      transform: scale(1.03) translateY(-2px);
    }

    .loc-beam-border {
      position: absolute;
      width: 400%;
      height: 400%;
      top: -150%;
      left: -150%;
      background: conic-gradient(from 0deg at 50% 50%, transparent 20%, rgba(183,147,88,0.3) 45%, rgba(255,255,255,0.85) 60%, rgba(183,147,88,0.3) 75%, transparent 100%);
      filter: blur(1.5px);
      opacity: 1;
      animation: rotate-beam 4s linear infinite;
      z-index: 0;
      pointer-events: none;
    }

    

    /* ── HERO TITLE ────────────────────────────────────────────────────
       Scale: controlled editorial range. Not max at 8.5rem — that reads
       as oversized at mid-viewport. 7rem cap gives the composition more
       air and authority.
       Line-height: 0.96 instead of 0.95 — opens the counter shapes.
    ─────────────────────────────────────────────────────────────────── */
    .hero-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(3.8rem, 9.5vw, 8.2rem);
      line-height: 0.96;
      letter-spacing: -0.025em;
      color: rgba(244, 242, 237, 0.97);
      margin-bottom: 0;
    }

    .hero-title .line-inner {
      display: inline-block;
      opacity: 0;
      transform: translateY(10px);
      will-change: transform, opacity;
    }

    /* em: warm amber-gold lifted to high-value cream-gold so it reads
       above the warm image tones. Golden but bright — not orange-brown. */
    .hero-title em {
      font-style: italic;
      color: rgba(230, 210, 160, 0.96);
      font-weight: 400;
      -webkit-text-fill-color: rgba(230, 210, 160, 0.96);
    }

    /* ── HERO SUBTITLE ─────────────────────────────────────────────────
       Raised from 0.52 → 0.72 opacity: still clearly subordinate to
       the headline but no longer invisible.
       Letter-spacing slightly increased: thinner weight reads better
       with more air between letters.
    ─────────────────────────────────────────────────────────────────── */
    .hero-sub {
      font-size: 1.05rem;
      font-weight: 300;
      color: rgba(210, 202, 185, 0.80);
      letter-spacing: 0.025em;
      max-width: 460px;
      line-height: 1.75;
      margin: 2.25rem auto 3.5rem;
      opacity: 0;
      transform: translateY(10px);
    }

    /* ── CTA WRAP ───────────────────────────────────────────────────────
       Row layout. Generous gap. Aligned center under the text block.
    ─────────────────────────────────────────────────────────────────── */
    .hero-cta-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2rem;
      opacity: 0;
      transform: translateY(10px);
    }

    /* ── PRIMARY CTA ────────────────────────────────────────────────────
       Dark charcoal surface + gold border.
       This reads as an object of quality: solid, dark, warm-edged.
       Not the aggressive green — that color is for brand, not buttons.
       The border is a refined gold line — brand DNA without being loud.
       Inset top highlight: simulates a physical premium surface catch.
    ─────────────────────────────────────────────────────────────────── */
    .hero-btn-primary {
      background: rgba(18, 22, 18, 0.95);
      color: rgba(228, 221, 208, 0.98);
      padding: 1.15rem 2.9rem;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;
      border-radius: 99px;
      transition: all 0.42s var(--expo);
      position: relative;
      overflow: hidden;
      /* Inset shadow for tactile depth */
      box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
      width: 100%;
      height: 100%;
    }

    .hero-btn-primary:active {
      transform: scale(0.98);
    }

    /* ── SECONDARY CTA ──────────────────────────────────────────────────
       Pure ghost: no border, no fill. Just type + underline.
       In luxury hospitality hierarchy, the secondary choice should be
       understated — it earns attention through restraint.
       An animated center-grow underline signals interactivity tastefully.
    ─────────────────────────────────────────────────────────────────── */
    .hero-btn-secondary {
      background: transparent;
      color: rgba(210, 202, 185, 0.50);
      padding: 1.05rem 0.25rem;
      font-size: 0.60rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      border-radius: 0;
      position: relative;
      transition: color 0.38s var(--expo);
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }

    /* Center-growing underline — the tactile signal */
    .hero-btn-secondary::after {
      content: '';
      position: absolute;
      bottom: 0.65rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 1px;
      background: rgba(183, 147, 88, 0.55);
      transition: width 0.45s var(--expo);
    }

    .hero-btn-secondary:hover {
      color: rgba(228, 221, 208, 0.85);
    }

    .hero-btn-secondary:hover::after {
      width: 100%;
    }
    /* ── BASE HERO STRUCTURE ── */

    /* ── Editorial Menu Layout ───────────────────── */
    .menu-main-wrapper {
      max-width: 1200px;
      margin: -6vh auto 0;
      display: block;
      padding: 0 32px;
      position: relative;
      z-index: 20;
    }

    /* ── Horizontal Category Nav — Premium Editorial Rail ───────────── */
    #cat-nav {
      width: 100%;
      /* Initial state: sits flush below hero — dark, atmospheric */
      background: rgba(6, 12, 8, 0.0);
      padding: 0;
      margin-bottom: 4.5rem;
      position: sticky;
      top: 76px;
      z-index: 400;
      /* No backdrop-filter in initial state — added when sticky */
      transition:
        background 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* is-pinned background: handled by .cat-nav-inner pill in menu.css */

    /* Inner track — contains buttons and the gold separator line */
    .cat-nav-inner {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
      padding: 1.1rem 2rem;
      margin: 0;
      position: relative;
      /* Subtle centerline separator below labels */
    }

    /* Gold axis line below the entire nav removed as requested */
    .cat-nav-inner::after {
      display: none;
    }

    .cat-btn {
      background: transparent;
      border: none;
      color: rgba(232, 224, 208, 0.35);
      font-family: 'Inter', sans-serif;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      text-align: center;
      /* Breathing padding — generous horizontal, measured vertical */
      padding: 0.55rem 1.75rem;
      cursor: pointer;
      position: relative;
      overflow: visible;
      transition:
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Hover state: label brightens, tracking opens slightly */
    .cat-btn:hover {
      color: rgba(232, 224, 208, 0.70);
      letter-spacing: 0.30em;
    }

    /* Active state treatment:
       1. Full gold color — clear hierarchy
       2. Slightly wider tracking — editorial weight
       3. Gold underline — grows from center (premium) */
    .cat-btn.active {
      color: rgba(183, 147, 88, 0.95);
      letter-spacing: 0.30em;
    }

    /* Underline: grows from center toward edges (more editorial than left-to-right) */
    .cat-btn::before {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(183, 147, 88, 0.9) 20%,
        rgba(183, 147, 88, 1.0) 50%,
        rgba(183, 147, 88, 0.9) 80%,
        transparent
      );
      transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cat-btn.active::before {
      width: calc(100% - 3.5rem); /* matches the horizontal padding */
    }

    .cat-btn:hover::before {
      width: calc(60% - 1.75rem);
    }

    /* Active indicator dot above label — gold pip for premium clarity */
    .cat-btn::after {
      content: '';
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(183, 147, 88, 0.85);
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cat-btn.active::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }



    /* ── HERO TEXT SCRIM ────────────────────────────────────────────────
       A dedicated backing layer sits directly behind the hero content
       block. It provides the dark substrate that the text strictly needs
       without touching the cup below.
       Technique: feathered vertical gradient, centered upper-half only.
       z-index 9 (below text at z 10, above cup at z 1).
    ─────────────────────────────────────────────────────────────────── */
    .hero-text-scrim {
      position: absolute;
      inset: 0;
      z-index: 9;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse 80% 65% at 50% 38%,
          rgba(4, 8, 5, 0.48) 0%,
          rgba(4, 8, 5, 0.22) 48%,
          transparent 72%
        );
    }

    /* ─────────────────────────────────────────────────────────────────
       The kicker-line inside the hero uses the cardápio dark bg token,
       not the homepage light token — gradient goes dark side first.
    ───────────────────────────────────────────────────────────────── */
    /* Tablet 1024px rules consolidated into the block below */

    /* ── Menu Sections ───────────────────────────────────────────────── */
    #menu-body {
      position: relative;
      flex-grow: 1;
      padding-top: 0;
      padding-bottom: 2rem;
      min-width: 0; /* Prevents flexbox overflow */
    }

    /* Subtle noise texture over the whole menu body */
    #menu-body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    }

    .menu-section {
      padding: 0 0 2rem 0;
      border-bottom: none;
      display: none;
      opacity: 0;
      transition: opacity 0.35s ease;
      position: relative;
      z-index: 1;
    }

    .menu-section.is-active {
      display: block;
      opacity: 1;
    }

    .menu-section:last-of-type {
      border-bottom: none;
    }

    .menu-container {
      max-width: none;
      margin: 0;
      padding: 0;
    }

    .section-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 2rem;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid rgba(183, 147, 88, 0.15);
    }

    .section-kicker {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.65);
      margin-bottom: 0.5rem;
    }

    .section-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      letter-spacing: -0.02em;
      line-height: 1;
      color: #e8e0d0;
    }

    .section-title em {
      font-style: italic;
      color: rgba(183, 147, 88, 0.85);
    }

    .section-count {
      font-size: 0.48rem;
      font-weight: 600;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(232, 224, 208, 0.2);
      white-space: nowrap;
    }

    /* Menu item grid — 2 columns on desktop */
    .menu-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 5rem;
      row-gap: 2rem;
    }

    .menu-item {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 0.25rem 1rem;
      padding: 0 0 1.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid rgba(183, 147, 88, 0.05);
      cursor: default;
    }

    .menu-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    /* Desktop (2 columns): If the second-to-last item is on the left (odd), it forms the last row alongside the last item, so remove its border too. */
    @media (min-width: 1025px) {
      .menu-grid .menu-item:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
    }

    /* Dotted fill line gracefully removed */
    .menu-item .item-dots {
      display: none;
    }

    .menu-item:hover .item-name {
      color: rgba(183, 147, 88, 1);
    }

    .menu-item:hover .item-desc {
      color: rgba(232, 224, 208, 0.85);
    }

    .item-body {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: 0;
    }

    .item-name {
      font-family: 'Instrument Serif', serif;
      font-size: 1.25rem;
      letter-spacing: 0em;
      color: #e8e0d0;
      margin: 0;
      line-height: 1.2;
      /* Perfectly synced premium transition */
      transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      white-space: normal;
    }

    .item-desc {
      font-size: 0.8rem;
      font-weight: 300;
      color: rgba(232, 224, 208, 0.5);
      line-height: 1.4;
      white-space: normal;
      transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .item-badges {
      display: flex;
      gap: 0.3rem;
      flex-wrap: wrap;
      margin-top: 0.3rem;
    }

    .badge {
      font-size: 0.42rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      padding: 0.15rem 0.5rem;
      border-radius: 9999px;
    }

    .badge-new {
      background: rgba(183, 147, 88, 0.12);
      color: rgba(183, 147, 88, 0.8);
    }

    .badge-veg {
      background: rgba(80, 160, 100, 0.12);
      color: rgba(100, 200, 120, 0.75);
    }

    .badge-hot {
      background: rgba(200, 80, 40, 0.12);
      color: rgba(220, 110, 70, 0.8);
    }

    .item-price {
      font-family: 'Instrument Serif', serif;
      font-size: 1.2rem;
      font-style: italic;
      letter-spacing: 0em;
      color: rgba(183, 147, 88, 0.95);
      white-space: nowrap;
      text-align: right;
      padding-right: 0.35rem; /* Prevent italic font bounding box cutoff */
      line-height: 1.1;
    }

    .item-price-sub {
      font-family: 'Inter', sans-serif;
      font-size: 0.48rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: rgba(232, 224, 208, 0.25);
      text-transform: uppercase;
      text-align: right;
      margin-top: 0.05rem;
    }

    /* Dividers */
    .cat-divider {
      height: 1px;
      margin: 0;
      background: linear-gradient(to right, transparent, rgba(183, 147, 88, 0.1) 30%, rgba(183, 147, 88, 0.1) 70%, transparent);
    }

    @media (max-width: 860px) {
      .menu-grid {
        grid-template-columns: 1fr;
      }
      .menu-item:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid rgba(183, 147, 88, 0.07);
      }
      .menu-item:last-child {
        border-bottom: none;
      }
    }

    /* ── PDF Section ─────────────────────────────────────────────────── */
    #pdf-section {
      padding: 4rem 2rem;
      text-align: center;
      background: linear-gradient(160deg, #0c1710 0%, #080f0a 100%);
      border-top: none; /* Removed blank line/border */
      position: relative;
      overflow: hidden;
    }

    #pdf-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(183, 147, 88, 0.04) 1px, transparent 1px);
      background-size: 36px 36px;
      pointer-events: none;
      opacity: 1;
    }

    .pdf-label {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.5);
      margin-bottom: 1.25rem;
    }

    .pdf-heading {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2rem, 4.5vw, 3.5rem);
      letter-spacing: -0.03em;
      line-height: 1;
      color: #e8e0d0;
      margin-bottom: 0.75rem;
    }

    .pdf-heading em {
      font-style: italic;
      color: rgba(183, 147, 88, 0.8);
    }

    .pdf-sub {
      font-size: 0.85rem;
      font-weight: 300;
      color: rgba(232, 224, 208, 0.35);
      margin-bottom: 2.5rem;
    }

    .pdf-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 2.5rem;
      background: transparent;
      border: 1px solid rgba(183, 147, 88, 0.4);
      color: rgba(183, 147, 88, 0.9);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 9999px;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .pdf-btn:hover {
      background: rgba(183, 147, 88, 0.1);
      border-color: rgba(183, 147, 88, 0.7);
      transform: translateY(-2px);
    }

    .pdf-btn svg {
      flex-shrink: 0;
    }

    /* ── Footer ──────────────────────────────────────────────────────── */
    footer {
      padding: 3.5rem 4rem 3rem;
      border-top: 1px solid rgba(183, 147, 88, 0.1);
      background: #080f0a;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .footer-logo {
      font-family: 'Instrument Serif', serif;
      font-size: 1.6rem;
      letter-spacing: -0.01em;
      color: rgba(232, 224, 208, 0.8);
      text-decoration: none;
    }

    .footer-links {
      display: flex;
      gap: 1.5rem;
      align-items: center;
    }

    .footer-link {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: rgba(183, 147, 88, 0.08);
      border: 1px solid rgba(183, 147, 88, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(183, 147, 88, 0.6);
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .footer-link:hover {
      background: rgba(183, 147, 88, 0.15);
      color: rgba(183, 147, 88, 0.9);
      transform: translateY(-2px);
    }

    .footer-copy {
      font-size: 0.55rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(232, 224, 208, 0.2);
    }

    /* ── Reveal animations ───────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .reveal-delay-1 {
      transition-delay: 0.1s;
    }

    .reveal-delay-2 {
      transition-delay: 0.2s;
    }


    /* ════════════════════════════════════════════════════════════════════════
       MOBILE REDESIGN — Giardini Cardápio
       Philosophy: "Luxury in your hand" — every element composed for the thumb.
       Three clear breakpoints:
         > 1024px  — desktop (untouched)
           1024px  — tablet/small laptop adjustments
            767px  — smartphone (primary mobile redesign)
            430px  — compact phone fine-tuning
    ════════════════════════════════════════════════════════════════════════ */

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       TABLET (max-width: 1024px) — Consolidated
       Merges: hero tablet overrides + cat-nav + menu-grid
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 1024px) {
      /* Hero */
      .hero-content {
        padding-bottom: 5rem;
        gap: 1.75rem;
      }
      .hero-right { display: none; }

      /* Menu wrapper */
      .menu-main-wrapper {
        margin-top: 0;
        padding: 0 24px;
      }

      /* Cat Nav */
      #cat-nav {
        position: sticky;
        top: 68px;
        margin-bottom: 3rem;
      }
      /* is-pinned background: handled by .cat-nav-inner pill in menu.css */
      .cat-nav-inner {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
        padding: 0.8rem 24px;
        margin: 0;
      }
      .cat-nav-inner::after {
        display: none;
      }
      .cat-btn {
        white-space: nowrap;
        font-size: 0.62rem;
        padding: 0.45rem 1.2rem;
      }

      /* Menu grid: single column on tablet */
      .menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SMARTPHONE (max-width: 767px)
       The primary mobile experience.
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 767px) {

      /* ── M1. NAVBAR ────────────────────────────────────────────
         Clean three-zone bar: logo left, CTA pill right,
         hamburger further right. No cramped text links.
         Height locked at 60px via padding.
      ────────────────────────────────────────────────────────── */
      #navbar {
        padding: 1rem 1.25rem;
        /* Always slightly frosted on mobile — user can't afford to lose context */
        background-color: rgba(5, 9, 6, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(183, 147, 88, 0.08);
      }

      /* Remove desktop padding transitions — not needed on mobile */
      /* Navbar visibility adjustments are now handled globally in the 860px mobile block at the top */

      /* ── M2. MOBILE MENU (fullscreen overlay) ──────────────────
         Full screen takeover with larger serif links
      ────────────────────────────────────────────────────────── */


      /* ════════════════════════════════════════════════════════
         M3 — HERO MOBILE: «Cartaz Central Premium»
         ────────────────────────────────────────────────────────
         Conceito: COMPOSIÇÃO ÚNICA CENTRALIZADA

         → Tudo alinhado ao centro (kicker, título, subtítulo, CTA)
         → O copo atua como o coração da composição (maior, mais alto)
         → Espaçamentos justos, sem áreas mortas
         → "Descubra" fecha a seção com elegância no rodapé.
         ════════════════════════════════════════════════════════ */

      /* ── Viewport: altura total da tela, min-height polido ── */
      #hero-viewport {
        height: 100svh;
        min-height: 640px;
        max-height: 940px;
      }

      /* ── ZONA DE CONTEÚDO: totalmente centralizada ── */
      .hero-content {
        justify-content: flex-start;  /* Prende no topo, mas empurra para baixo */
        align-items: center;          /* CENTRALIZA O EIXO X */
        text-align: center;
        padding-top: 7rem;            /* Espaço seguro e elegante abaixo da navbar */
        padding-bottom: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        gap: 0;
      }

      /* ── Kicker: simétrico, centralizado ── */
      .hero-kicker {
        font-size: 0.44rem;
        letter-spacing: 0.45em;
        gap: 0.8rem;
        margin-bottom: 1.25rem;
        justify-content: center;      /* Kicker no centro */
        color: rgba(183, 147, 88, 0.70);
        opacity: 1;
      }
      /* Restaura a simetria (as duas linhas aparecem) */
      .kicker-line:last-of-type { display: block; }

      /* ── Headline: dramático, apertado, centralizado ── */
      .hero-title {
        font-size: clamp(3.4rem, 13vw, 5rem);
        line-height: 0.94;
        letter-spacing: -0.03em;
        text-align: center;
        margin-bottom: 0;
      }

      /* Divisória central: separada em elemento real para animação GSAP */
      .hero-title-sep {
        display: block !important;
        width: 32px;
        height: 1px;
        background: rgba(183, 147, 88, 0.45);
        margin: 1.4rem auto;
      }

      /* ── Subtítulo: mais presente, centrado, limitando viúvas ── */
      .hero-sub {
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 1.65;
        max-width: 260px;
        text-align: center;
        margin: 0 auto 2.4rem auto;   /* margin auto para bloco centrado */
        color: rgba(210, 202, 185, 0.75);
        letter-spacing: 0.015em;
      }

      /* ── CTA: único, premium, centralizado ── */
      .hero-cta-wrap {
        flex-direction: row;
        align-items: center;
        justify-content: center;      /* Botão perfeitamente centralizado */
        gap: 0;
        width: 100%;
      }

      .loc-beam-container {
        width: auto;
        max-width: none;
        flex-shrink: 0;
      }

      .hero-btn-primary {
        padding: 1rem 2.8rem;
        font-size: 0.58rem;
        letter-spacing: 0.25em;
        justify-content: center;
        white-space: nowrap;
      }

      /* Repetimos: CTA secundário removido no mobile = mais limpo */
      .hero-btn-secondary { display: none; }

      /* ── IMAGEM: O coração da hero. Maior, mais conectada ── */
      #video-frame {
        width: 82vw;             /* Mais imponente */
        max-width: 340px;
        top: 52%;                /* Levemente mais alto, abraçando o título/CTA */
        left: 50%;
        opacity: 0.65;           /* Um pouco mais fantasma para não brigar com o CTA centrado */
        will-change: auto;
        /* Mask refinada para dissolver perfeitamente no fundo escuro */
        mask-image: radial-gradient(ellipse 75% 85% at center,
          rgba(0,0,0,0.95) 0%,
          rgba(0,0,0,0.85) 30%,
          rgba(0,0,0,0.40) 55%,
          rgba(0,0,0,0.05) 80%,
          rgba(0,0,0,0)    95%
        );
        -webkit-mask-image: radial-gradient(ellipse 75% 85% at center,
          rgba(0,0,0,0.95) 0%,
          rgba(0,0,0,0.85) 30%,
          rgba(0,0,0,0.40) 55%,
          rgba(0,0,0,0.05) 80%,
          rgba(0,0,0,0)    95%
        );
      }

      /* Glow imersivo, acompanha a imagem */
      .product-glow {
        top: 52%;
        left: 50%;
        width: 110vw;
        max-width: 460px;
        height: 110vw;
        max-height: 460px;
        background: radial-gradient(circle at center,
          rgba(38, 66, 52, 0.12) 0%,
          rgba(183, 147, 88, 0.03) 45%,
          transparent 70%
        );
        filter: blur(55px);
      }

      /* ── SCRIM INFERIOR: ponte tonal até a próxima seção (removido p/ evitar sombra no mobile) ── */

      /* ── SCRIM SUPERIOR: proteção de contraste p/ a navbar (removido a pedido p/ limpar topo) ── */
      #hero-viewport::before {
        display: none !important;
      }

      /* ── "DESCUBRA": Fechamento seguro ── */
      .hero-scroll {
        display: flex;
        position: absolute;
        bottom: 2.2rem;               /* Levanta um pouco mais, foge da zona morta */
        left: 50%;
        right: auto;
        opacity: 1 !important;        /* Força a visibilidade inicial */
        color: rgba(255, 255, 255, 0.32);
        font-size: 0.38rem;
        letter-spacing: 0.42em;
        gap: 0.4rem;
        transform: translateX(-50%);
        animation: none;              /* Sem sobressaltos, design sólido */
      }

      /* Linha ainda mais delicada */
      .hero-scroll-line {
        height: 20px;
        background: linear-gradient(
          to bottom,
          rgba(183, 147, 88, 0.40),
          transparent
        );
      }

      /* ── Ocultos no mobile ── */
      #hero-bridge { display: none; }
      #lateral-vignette { display: none; }
      #custom-cursor, #custom-cursor-ring { display: none; }







      /* ── M4. MENU WRAPPER & BODY ────────────────────────────────
         Clean horizontal margins, no overlap.
      ────────────────────────────────────────────────────────── */
      .menu-main-wrapper {
        margin-top: 0;
        padding: 0 20px;
      }

      #menu-body {
        padding-bottom: 4rem;
      }

      /* Decorative vertical margin line — remove on mobile */
      #menu-body::after { display: none; }

      /* ── M5. CATEGORY NAV ───────────────────────────────────────
         Horizontal scroll rail. Fine bottom border. No box.
         Sticky under navbar with 60px offset.
         Larger tap targets (min 44px height per rail).
      ────────────────────────────────────────────────────────── */
      #cat-nav {
        top: 58px; /* Match the mobile navbar height */
        margin-bottom: 2rem;
        background: transparent;
      }

      #cat-nav.is-pinned {
        background: rgba(6, 10, 7, 0.95);
        border-bottom: 1px solid rgba(183, 147, 88, 0.10);
        box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
        padding: 0;
      }

      .cat-nav-inner {
        padding: 0.8rem 20px;
        margin: 0 -20px;
        gap: 0.25rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        /* Fade out edges for premium scroll hint */
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 6%,
          black 94%,
          transparent 100%
        );
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 6%,
          black 94%,
          transparent 100%
        );
      }
      .cat-nav-inner

      .cat-btn {
        padding: 0.75rem 1.4rem;
        font-size: 0.65rem;
        letter-spacing: 0.25em;
        white-space: nowrap;
        min-height: 46px;   /* Finger-friendly tap target */
        display: inline-flex;
        align-items: center;
      }

      /* Active underline shorter on mobile */
      .cat-btn.active::before {
        width: calc(100% - 2.8rem);
      }

      /* ── M6. MENU SECTIONS ──────────────────────────────────────
         Single column. Generous but controlled vertical space.
      ────────────────────────────────────────────────────────── */
      .menu-section {
        padding: 0 0 1.5rem 0;
      }

      .menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
        row-gap: 0;
      }

      /* ── M7. SECTION HEADER ─────────────────────────────────────
         Simpler on mobile: kicker + title in a row, no inline count.
         Ghost watermark hidden — too heavy on mobile.
      ────────────────────────────────────────────────────────── */
      .section-header {
        flex-direction: row;    /* Keep kicker and title same row */
        align-items: flex-end;
        justify-content: flex-start;
        gap: 0;
        flex-wrap: wrap;
        margin-bottom: 2rem;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid rgba(183, 147, 88, 0.12); /* Clean subtle border */
      }

      .section-header > div { flex: 1; }

      /* Ghost watermark: hidden on mobile — visual noise */
      .section-watermark { display: none; }

      /* Count: hidden on mobile */
      .section-count { display: none; }

      .section-kicker {
        font-size: 0.48rem;
        letter-spacing: 0.38em;
        margin-bottom: 0.4rem;
        /* Disable kicker expand animation — starts with opacity 0 and
           the animation is nice desktop only; on mobile just show it */
        animation: kickerExpand 0.7s var(--expo) 0.1s both;
      }
      .section-header:not(.is-visible) .section-kicker {
        animation: none;
        opacity: 1; /* Always visible on mobile, no delay */
      }
      .section-header.is-visible .section-kicker {
        animation: kickerExpand 0.7s var(--expo) 0.1s both;
      }

      .section-title {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem);
        line-height: 1.05;
        letter-spacing: -0.025em;
      }

      /* ── M8. MENU ITEMS ─────────────────────────────────────────
         Clean two-column grid: name+desc left, price right.
         Better vertical rhythm with consistent bottom border.
         Protected right edge so italic prices don't clip.
      ────────────────────────────────────────────────────────── */
      .menu-item {
        /* Redefine grid specifically for mobile to balance left/right strongly */
        grid-template-columns: 1fr auto;
        gap: 0.5rem 1.5rem; /* Wider horizontal gap pushes price safely */
        padding: 1.5rem 0.25rem 1.5rem 0; /* Right padding protects the edge */
        margin-bottom: 0;
        border-bottom: 1px solid rgba(183, 147, 88, 0.08);
        border-radius: 0;
        align-items: flex-start;
      }

      /* Remove last-child border — cleaner end of section */
      .menu-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      /* On touch: no hover decorations — clean tap */
      .menu-item:hover .item-name {
        transform: none;
      }

      /* Item name: comfortable reading size */
      .item-name {
        font-size: 1.15rem;
        line-height: 1.25;
        letter-spacing: -0.015em;
      }
      /* Item description: tighter */
      .item-desc {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-top: 0.25rem;
        color: rgba(210, 202, 185, 0.65);
      }

      /* Price: clear, readable, clip-safe */
      .item-price {
        font-size: 1.15rem;
        padding-top: 0; /* Perfect alignment with title baseline */
        padding-right: 0.15rem; /* Buffer to prevent right-leaning italics from trimming */
      }

      /* Badge: visible and compact */
      .item-badges {
        margin-top: 0.35rem;
        gap: 0.25rem;
      }
      .badge {
        font-size: 0.38rem;
        padding: 0.1rem 0.45rem;
      }

      /* ── M9. PDF SECTION ────────────────────────────────────────
         Full-width centered block.
         Comfortable padding, perfectly scaled for mobile readability.
      ────────────────────────────────────────────────────────── */
      #pdf-section {
        padding: 5rem 1.5rem 6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .pdf-label {
        font-size: 0.48rem;
        letter-spacing: 0.40em;
        margin-bottom: 1.5rem;
        gap: 0.8rem;
      }
      .pdf-label::before,
      .pdf-label::after {
        width: 20px;
      }

      .pdf-heading {
        font-size: clamp(1.65rem, 7.5vw, 2.2rem);
        line-height: 1.05;
        letter-spacing: -0.035em;
        margin-bottom: 1.25rem;
      }

      .pdf-sub {
        font-size: 0.82rem;
        line-height: 1.6;
        margin-bottom: 2.75rem;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        color: rgba(210, 202, 185, 0.75);
      }

      /* PDF button: elegant pill shape, not stretched 100% horizontally */
      .pdf-btn {
        width: auto;
        display: inline-flex;
        justify-content: center;
        padding: 1rem 3rem;
        font-size: 0.6rem;
        letter-spacing: 0.25em;
      }

      /* ── M10. FOOTER ────────────────────────────────────────────
         Stacked: logo → social icons → copyright.
         Centered alignment. Generous padding to close page softly.
      ────────────────────────────────────────────────────────── */
      footer {
        padding: 3.5rem 1.5rem 3.5rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.75rem;
        border-top: 1px solid rgba(183, 147, 88, 0.08); /* Finer border */
      }

      .footer-logo {
        font-size: 1.6rem;
        margin-bottom: 0.5rem; /* Breaks rhythm nicely before icons */
      }

      .footer-links {
        gap: 1.25rem;
      }

      .footer-link {
        width: 3rem;  /* Larger tap target */
        height: 3rem;
      }

      .footer-copy {
        font-size: 0.52rem;
        letter-spacing: 0.15em;
        color: rgba(228, 221, 208, 0.25);
        margin-top: 0.5rem;
      }

      /* ── M11. BODY TEXTURE & GLOW OVERRIDES ─────────────────────
         Reduce grain & atmospheric glows on mobile to prioritize
         text clarity and absolute contrast.
      ────────────────────────────────────────────────────────── */
      body::before {
        opacity: 0.35; /* Reduce dot-grid density on mobile significantly */
        animation: none; /* Disable moving texture — saves battery */
      }
      
      .ambient-glow {
        opacity: 0.3; /* Ensure gradients don't dilute the dark background locally */
      }

      /* ── M12. REVEAL ANIMATIONS — faster on mobile ──────────────
         Mobile users scroll faster; shorter delay feels snappier.
      ────────────────────────────────────────────────────────── */
      .reveal {
        transform: translateY(12px);
        transition:
          opacity 0.45s var(--expo),
          transform 0.45s var(--expo),
          clip-path 0.48s var(--expo);
      }
      /* Disable stagger delays on mobile — all items appear together */
      .menu-grid .reveal:nth-child(n) { transition-delay: 0s; }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       COMPACT PHONE (max-width: 430px)
       Fine-tuning for small screens (SE, 12 Mini, etc.)
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    @media (max-width: 430px) {

      /* Título: impactante mesmo no SE */
      .hero-title {
        font-size: clamp(3.2rem, 14vw, 4.2rem);
        line-height: 0.91;
        letter-spacing: -0.03em;
      }

      /* Divisória pós-headline: mesma aparência, margem menor */
      .hero-title::after {
        margin: 1.2rem auto;
        width: 28px;
      }

      /* Subtítulo: mais espaço respirável para separar do CTA */
      .hero-sub {
        font-size: 0.78rem;
        max-width: 280px;
        margin: 0 auto 3.2rem auto;
        line-height: 1.6;
      }

      /* Hero content: rebaixado para centralizar no viewport de 932px */
      .hero-content {
        padding-top: 13.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }

      /* CTA: mais compacto no SE */
      .hero-btn-primary {
        padding: 1.05rem 2.6rem;
        font-size: 0.62rem;
        letter-spacing: 0.24em;
      }

      /* Imagem e Glow: rebaixados pacificamente, sem colidir com o botão */
      #video-frame {
        width: 76vw;
        max-width: 280px;
        top: 61.5%;
      }

      .product-glow {
        top: 65.5%;
      }

      /* Indicador Descubra: elevado para preencher a base conectando a cena */
      .hero-scroll {
        bottom: 5.5rem;
      }




      /* Navbar logo even smaller */
      .nav-logo { font-size: 1.2rem; }

      /* Menu wrapper: tighter horizontal margins */
      .menu-main-wrapper {
        padding: 0 16px;
      }

      /* ── CATEGORY NAV: Premium Horizontal Rail ── */
      #cat-nav {
        top: 58px; /* Safely nested under sticky navbar */
        margin-bottom: 2.5rem;
      }
      
      /* is-pinned background: handled by .cat-nav-inner pill in menu.css */

      .cat-nav-inner {
        padding: 0.8rem 24px;   /* Extra touch padding */
        margin: 0 -16px;        /* Bleeds slightly to edges */
        justify-content: flex-start !important; /* Overrides accidental wrapping */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem;
        /* Cinematic left/right edge fade mask for scrolling hint */
        mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
      }
      
      .cat-nav-inner
      
      .cat-btn {
        flex-shrink: 0;         /* Prevent text squishing */
        white-space: nowrap;    /* Keep label on one elegant line */
        font-size: 0.65rem;
        padding: 0.6rem 1.4rem;
        color: rgba(228, 221, 208, 0.35); /* Tonal inactive state */
      }
      
      .cat-btn.active {
        color: rgba(183, 147, 88, 1);    /* Dominant contrast */
        letter-spacing: 0.28em;
      }

      /* Item sizes: comfortable minimum */
      .item-name  { font-size: 1.05rem; }
      .item-price { font-size: 1.05rem; }
      .item-desc  { font-size: 0.78rem; }

      /* Section title: tightly clipped */
      .section-title {
        font-size: clamp(1.3rem, 5.5vw, 1.6rem);
      }

      /* Footer: tighter */
      footer {
        padding: 2.5rem 1.25rem 2.5rem;
        gap: 1.25rem;
      }

      /* Mobile menu links: smaller on compact */
      .mobile-link {
        font-size: 2.2rem;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════
       FINAL CREATIVE POLISH
    ═════════════════════════════════════════════════════════════════════ */

    /* ── 1. Dot-grid texture over entire menu body ─── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(183, 147, 88, 0.06) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.6;
    }

    /* ── 2. Soft ambient floating orb (animated) removed to prevent light artifact ─── */
    body::after {
      display: none;
    }

    

    /* ── 3. Section header gold shimmer line ─── */
    .section-header::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      position: absolute;
      bottom: -1px;
      left: 0;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(183, 147, 88, 0.4) 30%,
        rgba(183, 147, 88, 0.7) 50%,
        rgba(183, 147, 88, 0.4) 70%,
        transparent 100%);
      background-size: 200% 100%;
      animation: shimmerLine 4s ease-in-out infinite;
    }

    .section-header {
      position: relative;
    }

    

    /* ── 4. Item hover: aesthetic clean look ─── */
    .menu-item {
      position: relative;
    }

    /* Transitions for menu items handled in .item-name and .item-desc */

    /* ── 5. Enhanced reveal animation with stagger ─── */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Auto-stagger for items inside a visible grid */
    .menu-grid .reveal:nth-child(1)  { transition-delay: 0.0s; }
    .menu-grid .reveal:nth-child(2)  { transition-delay: 0.04s; }
    .menu-grid .reveal:nth-child(3)  { transition-delay: 0.08s; }
    .menu-grid .reveal:nth-child(4)  { transition-delay: 0.12s; }
    .menu-grid .reveal:nth-child(5)  { transition-delay: 0.16s; }
    .menu-grid .reveal:nth-child(6)  { transition-delay: 0.20s; }
    .menu-grid .reveal:nth-child(7)  { transition-delay: 0.06s; }
    .menu-grid .reveal:nth-child(8)  { transition-delay: 0.10s; }

    /* ── 6. Cat-nav simple highlight ─── */
    .cat-btn {
      position: relative;
    }

    .cat-btn.active {
      color: #e8e0d0;
    }
    
    .cat-btn:hover {
      color: #fff;
    }

    /* ── 7. Section bottom ambient warm glow removed for a cleaner editorial look ─── */
    .menu-section::after {
      display: none;
    }

    /* Remove the global section divider for the last section to ensure a clean ending */
    .menu-section:last-of-type,
    .menu-section:last-of-type::after {
      border-bottom: none !important;
      background: none !important;
    }

    /* ── 8. Loader dark theme fix ─── */
    .loader {
      background: #080f0a !important;
    }

    .loader-text {
      color: rgba(183, 147, 88, 0.9) !important;
    }

    .loader-bar {
      background: rgba(183, 147, 88, 0.7) !important;
    }

    /* ── 9. PDF section extra atmospheric detail ─── */
    #pdf-section .pdf-heading {
      position: relative;
    }

    #pdf-section .pdf-heading::before {
      content: '—';
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 0.6rem;
      letter-spacing: 0.4em;
      color: rgba(183, 147, 88, 0.4);
      margin-bottom: 1.2rem;
      font-weight: 300;
    }

    /* ── 10. Category title entrance line sweep ─── */
    .section-title {
      background: linear-gradient(90deg, #e8e0d0 0%, rgba(183,147,88,0.85) 50%, #e8e0d0 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: titleSweep 6s ease-in-out infinite alternate;
    }

    .section-title em {
      -webkit-text-fill-color: transparent;
    }

    

    /* ── 11. Nav links dark scroll state ─── */
    .is-scrolled .nav-link {
      color: rgba(232, 224, 208, 0.5);
    }
    .is-scrolled .nav-link:hover {
      color: rgba(183, 147, 88, 0.9);
    }
    .is-scrolled .nav-cta {
      border-color: rgba(183, 147, 88, 0.4);
      color: rgba(183, 147, 88, 0.9);
    }
    .is-scrolled .nav-cta:hover {
      background: rgba(183, 147, 88, 0.1);
      color: rgba(183, 147, 88, 1);
    }

    /* ── 12. Menu section fade-in when tab switches ─── */
    

    .menu-section.is-active {
      animation: sectionFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ══════════════════════════════════════════════════════════════════
       FINAL CREATIVE POLISH — Giardini Menu v4
       Textura, movimento, microinterações, atmosfera.
    ══════════════════════════════════════════════════════════════════ */

    /* ── A. Textura linho/papel no menu body ─────────────────────────
       A two-layer grain that simulates a fine printed menu paper.
       Layer 1: macro grain (large cells, very faint)
       Layer 2: micro grain (tight, standard noise)
    ─────────────────────────────────────────────────────────────────── */
    .menu-main-wrapper::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      background-size: 512px 512px, 180px 180px;
      mix-blend-mode: overlay;
      opacity: 0.7;
    }

    /* ── B. Orbes de luz âmbar flutuantes ────────────────────────────
       Two slow-drifting radial glow orbs. They move independently
       creating a sense of breathing life in the dark space.
    ─────────────────────────────────────────────────────────────────── */
    .menu-main-wrapper {
      position: relative;
      isolation: isolate;
    }

    /* is-pinned background: handled by .cat-nav-inner pill in menu.css */

    #menu-orb-1, #menu-orb-2 {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      filter: blur(90px);
    }
    #menu-orb-1 {
      width: 55vw;
      height: 55vw;
      max-width: 700px;
      max-height: 700px;
      /* Warm amber — top-left:
         gives the sense of indirect warm lighting */
      background: radial-gradient(circle, rgba(183, 147, 88, 0.055) 0%, transparent 70%);
      top: 8%;
      left: -12%;
      animation: orbDrift1 22s ease-in-out infinite;
    }
    #menu-orb-2 {
      width: 50vw;
      height: 50vw;
      max-width: 620px;
      max-height: 620px;
      /* Cool green-dark — bottom-right:
         subtle counterpoint to the amber */
      background: radial-gradient(circle, rgba(43, 74, 59, 0.07) 0%, transparent 70%);
      bottom: 15%;
      right: -8%;
      animation: orbDrift2 28s ease-in-out infinite;
    }

    /* ── C. Hover: indicador de seleção esquerdo ─────────────────────
       A thin gold vertical bar grows from 0 to full height
       on the left edge of each menu-item on hover.
       Reads as a cursor/selection indicator.
    ─────────────────────────────────────────────────────────────────── */
    .menu-item {
      padding-left: 14px;
    }

    .menu-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 4px;
      width: 1.5px;
      height: 0;
      background: linear-gradient(
        to bottom,
        rgba(183, 147, 88, 0.9),
        rgba(183, 147, 88, 0.3)
      );
      border-radius: 1px;
      transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .menu-item:hover::before {
      /* Height matches the approx padding-bottom of the item */
      height: calc(100% - 8px);
    }

    /* On hover, price also gets a very thin gold glow */
    .menu-item:hover .item-price {
      text-shadow: 0 0 18px rgba(183, 147, 88, 0.35);
      color: rgba(183, 147, 88, 1);
      transition: color 0.35s ease, text-shadow 0.35s ease;
    }

    /* Item name gets a very slight lift on hover */
    .menu-item:hover .item-name {
      transform: translateX(2px);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .item-name {
      transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── D. Section ghost number ──────────────────────────────────────
       The section count ("06 itens") is already in the header.
       We add a large ghost counter behind the header.
       It fades in with the section, very faintly.
    ─────────────────────────────────────────────────────────────────── */
    .section-count {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(3.5rem, 8vw, 7rem);
      font-weight: 400;
      font-style: italic;
      letter-spacing: -0.03em;
      color: rgba(183, 147, 88, 0.048);
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
      line-height: 1;
      white-space: nowrap;
    }

    /* ── E. Loader: shimmer sweep na barra de progresso ──────────────
       The progress bar has a light beam sweeping across it.
    ─────────────────────────────────────────────────────────────────── */
    .loader-bar {
      position: relative;
      overflow: hidden;
    }

    .loader-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
      );
      animation: loaderShimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    

    /* Loader tagline */
    .loader-tagline {
      font-size: 0.52rem;
      font-weight: 500;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.35);
      margin-top: 1.8rem;
      animation: loaderTaglinePulse 2.5s ease-in-out infinite;
    }

    

    /* ── F. Tab switch: transição com scale leve ─────────────────────
       When a menu section becomes active, it scales from 0.985
       to 1.0 during the fade-in — gives a sense of depth/emergence.
    ─────────────────────────────────────────────────────────────────── */
    

    /* ── G. Footer ambient vinheta superior ─────────────────────────
       A subtle warm fade at the very top of the footer,
       so it emerges gently from the PDF section.
    ─────────────────────────────────────────────────────────────────── */
    footer {
      position: relative;
    }
    footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(183, 147, 88, 0.14) 30%,
        rgba(183, 147, 88, 0.22) 50%,
        rgba(183, 147, 88, 0.14) 70%,
        transparent
      );
    }

    /* The footer logo has a very slow warm shimmer */
    .footer-logo {
      background: linear-gradient(
        90deg,
        rgba(232, 224, 208, 0.80) 0%,
        rgba(183, 147, 88, 0.72) 50%,
        rgba(232, 224, 208, 0.80) 100%
      );
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: footerLogoSweep 8s ease-in-out infinite alternate;
    }
    

    /* ── H. Cat-nav: pulse sutil no active dot ───────────────────────
       The ::after dot on active cat-btn gets a slow pulse ring.
    ─────────────────────────────────────────────────────────────────── */
    

    .cat-btn.active::after {
      animation: dotPulse 2.2s ease-out infinite;
    }

    /* ── I. Section-header: line expande ao revelar ──────────────────
       The bottom gold line of the section-header expands from
       center outward when the section becomes visible.
    ─────────────────────────────────────────────────────────────────── */
    .section-header::after {
      transition: opacity 0.8s ease;
    }
    .section-header:not(.is-visible)::after {
      opacity: 0;
    }
    .section-header.is-visible::after {
      opacity: 1;
    }

    /* ── J. Scrollbar styling ────────────────────────────────────────
       Dark, refined scrollbar for the whole page.
    ─────────────────────────────────────────────────────────────────── */
    
    
    
    

    /* ══════════════════════════════════════════════════════════════════
       GIARDINI MENU — BRAND HARMONIZATION v6
       Reference: hero_premium.html editorial clarity + restraint
       Goal: darker Giardini face — controlled, premium, immersive
    ══════════════════════════════════════════════════════════════════ */

    /* ── 1. BODY FOUNDATION ────────────────────────────────────────────
       Remove the green-dominant base. Use a warmer, more neutral dark
       that reads as "warm charcoal" not "green cave".
       Green is reserved for accent moments only.
    ─────────────────────────────────────────────────────────────────── */
    :root {
      --menu-bg:    #090b09;      /* near-black, barely warm */
      --menu-ink:   #e4ddd0;      /* warm parchment — primary text */
      --menu-dim:   rgba(228, 221, 208, 0.42);  /* secondary text */
      --menu-ghost: rgba(228, 221, 208, 0.18);  /* placeholder / dividers */
      --menu-gold:  #b79358;      /* gold accent — price + active */
      --menu-green: #2B4A3B;      /* brand green — used sparingly */
      --expo: cubic-bezier(0.16, 1, 0.3, 1);
    }

    body {
      background: var(--menu-bg);
      color: var(--menu-ink);
    }

    /* ── 2. BACKGROUND TEXTURE ─────────────────────────────────────────
       Fine linen-paper pattern: dot-grid only (no noisy crosshatch).
       Subtle enough to give depth without visual noise.
       The body-after block adds a centered warm amber pool — like
       a soft table lamp illuminating the menu from above.
    ─────────────────────────────────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(183, 147, 88, 0.042) 1px, transparent 1px);
      background-size: 32px 32px;
      opacity: 0.65;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      /* Centered amber pool — simulates warm editorial lighting */
      background:
        radial-gradient(ellipse 70% 55% at 50% 18%,
          rgba(183, 147, 88, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 15% 75%,
          rgba(43, 74, 59, 0.04) 0%, transparent 60%);
    }

    /* ── 3. ITEM NAME HIERARCHY FIX ────────────────────────────────────
       Names should be the primary read. Elevate to near-white.
       Descriptions stay dim — clear reading hierarchy.
    ─────────────────────────────────────────────────────────────────── */
    .item-name {
      color: rgba(236, 230, 218, 0.95);
      font-size: 1.15rem;
      letter-spacing: -0.005em;
      line-height: 1.25;
      transition: color 0.4s var(--expo), transform 0.35s var(--expo);
    }

    .item-desc {
      color: rgba(228, 221, 208, 0.40);
      font-size: 0.78rem;
      line-height: 1.45;
      transition: color 0.4s var(--expo);
    }

    .item-price {
      color: rgba(183, 147, 88, 0.88);
      font-size: 1.15rem;
      transition: color 0.3s ease, transform 0.35s var(--expo);
    }

    /* Hover: pure typographic refinement, no blocks or backgrounds */
    .menu-item:hover .item-name {
      color: rgba(183, 147, 88, 0.95); /* turns premium gold */
    }
    .menu-item:hover .item-desc {
      color: rgba(228, 221, 208, 0.60);
    }
    .menu-item:hover .item-price {
      color: rgba(183, 147, 88, 1);
    }

    /* ── 4. MENU ITEM — Minimalist Typography ────────────────────
       Removed the boxy background/border. Hover is purely on the text.
    ─────────────────────────────────────────────────────────────────── */
    .menu-item {
      border-radius: 3px;
    }

    .menu-item::before { display: none; } /* remove old pseudo left-bar */

    /* ── 5. SECTION HEADER — more editorial, homepage-aligned ──────────
       Kicker: smaller, gold, disciplined tracking.
       Title: warmer near-white, clean.
       Divider: sharper gold line with a clean shimmer loop.
    ─────────────────────────────────────────────────────────────────── */
    .section-kicker {
      font-size: 0.55rem;
      font-weight: 700;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.55);
      margin-bottom: 0.4rem;
    }

    .section-title {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.65rem, 2.8vw, 2.4rem);
      letter-spacing: -0.025em;
      line-height: 1;
      color: rgba(236, 230, 218, 0.95);
      /* Remove the sweeping gradient animation — too much motion in body */
      background: none;
      -webkit-text-fill-color: initial;
      animation: none;
    }

    .section-title em {
      font-style: italic;
      color: rgba(183, 147, 88, 0.78);
      -webkit-text-fill-color: initial;
    }

    .section-header {
      position: relative;
      padding-bottom: 1.25rem;
      margin-bottom: 2rem;
      border-bottom: 1px solid rgba(183, 147, 88, 0.10);
    }

    /* Refined shimmer on the divider — slower, more editorial */
    

    .section-header::after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      position: absolute;
      bottom: -1px;
      left: 0;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(183, 147, 88, 0.28) 25%,
        rgba(183, 147, 88, 0.55) 50%,
        rgba(183, 147, 88, 0.28) 75%,
        transparent 100%);
      background-size: 200% 100%;
      animation: shimmerLine 6s ease-in-out infinite;
      transition: opacity 0.8s ease;
    }

    .section-header:not(.is-visible)::after { opacity: 0; }
    .section-header.is-visible::after       { opacity: 1; }

    /* Ghost count: editorial watermark, perfectly layered */
    .section-count {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 400;
      font-style: italic;
      letter-spacing: -0.03em;
      color: rgba(183, 147, 88, 0.038);
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      user-select: none;
      line-height: 1;
      white-space: nowrap;
      mix-blend-mode: screen;
    }

    /* ── 6. CAT-NAV — premium editorial rail ───────────────────────────
       Cleaner, more integrated. The rail sits above the content with
       transparent atmosphere. Pinned state uses blur + very dark surface.
       Active state: gold color + underline only — no pill, no rectangle.
    ─────────────────────────────────────────────────────────────────── */
    #cat-nav {
      background: transparent;
      padding: 0;
      margin-bottom: 4rem;
      position: sticky;
      top: 76px;
      z-index: 400;
      transition:
        background 0.55s var(--expo),
        box-shadow 0.55s var(--expo);
    }

    /* is-pinned background: handled by .cat-nav-inner pill in menu.css */

    .cat-nav-inner {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
      padding: 1rem 2rem;
      position: relative;
    }

    /* Bottom axis line removed as requested */
    .cat-nav-inner::after {
      display: none;
    }

    .cat-btn {
      background: transparent;
      border: none;
      color: rgba(228, 221, 208, 0.30);
      font-family: 'Inter', sans-serif;
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      padding: 0.6rem 1.6rem;
      cursor: pointer;
      position: relative;
      overflow: visible;
      border-radius: 0;
      transition:
        color 0.38s var(--expo),
        letter-spacing 0.38s var(--expo);
    }

    .cat-btn:hover {
      color: rgba(228, 221, 208, 0.72);
      letter-spacing: 0.28em;
    }

    .cat-btn.active {
      color: rgba(183, 147, 88, 0.95);
      letter-spacing: 0.28em;
    }

    /* Centered-grow underline for active */
    .cat-btn::before {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 1px;
      background: linear-gradient(90deg,
        transparent,
        rgba(183, 147, 88, 0.9) 25%,
        rgba(183, 147, 88, 1) 50%,
        rgba(183, 147, 88, 0.9) 75%,
        transparent
      );
      transition: width 0.42s var(--expo);
    }

    .cat-btn.active::before {
      width: calc(100% - 3.2rem);
    }

    .cat-btn:hover::before {
      width: calc(55% - 1.6rem);
    }

    /* Active pip — pulsing dot above label */
    .cat-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(183, 147, 88, 0.85);
      opacity: 0;
      transition: opacity 0.38s ease;
    }

    .cat-btn.active::after {
      opacity: 1;
      animation: dotPulse 2.4s ease-out infinite;
    }

    /* ── 7. SECTION TRANSITION — refined clip-path reveal ──────────────
    ─────────────────────────────────────────────────────────────────── */
    

    .menu-section.is-active {
      animation: sectionReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ── 8. REVEAL STAGGER — homepage-aligned rhythm ───────────────────
    ─────────────────────────────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 0.6s var(--expo),
        transform 0.6s var(--expo);
      will-change: opacity, transform;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .menu-grid .reveal:nth-child(1) { transition-delay: 0.00s; }
    .menu-grid .reveal:nth-child(2) { transition-delay: 0.04s; }
    .menu-grid .reveal:nth-child(3) { transition-delay: 0.08s; }
    .menu-grid .reveal:nth-child(4) { transition-delay: 0.12s; }
    .menu-grid .reveal:nth-child(5) { transition-delay: 0.16s; }
    .menu-grid .reveal:nth-child(6) { transition-delay: 0.20s; }
    .menu-grid .reveal:nth-child(7) { transition-delay: 0.07s; }
    .menu-grid .reveal:nth-child(8) { transition-delay: 0.11s; }

    /* ── 9. PDF SECTION — structured service block ─────────────────────
       Redesigned as a composed premium tier:
       - Tight centering with max-width frame
       - Left-aligned editorial pair (label + heading)
       - CTA row at bottom with clear hierarchy
       - No more floating void atmosphere
    ─────────────────────────────────────────────────────────────────── */
    #pdf-section {
      padding: 5rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(8, 15, 10, 0) 0%, rgba(6, 10, 7, 0.85) 30%, rgba(4, 8, 5, 0.95) 100%),
        #080f0a;
      border-top: 1px solid rgba(183, 147, 88, 0.10);
    }

    /* Refined dot-grid — finer, more restrained */
    #pdf-section::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(183, 147, 88, 0.045) 1px, transparent 1px);
      background-size: 40px 40px;

    }

    /* Centered editorial frame */
    #pdf-section > * {
      position: relative;
      z-index: 1;
    }

    .pdf-label {
      font-size: 0.60rem;
      font-weight: 700;
      letter-spacing: 0.48em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.65);
      margin-bottom: 1.85rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.85rem;
    }

    /* Editorial rule flanking the label — like homepage kicker-line */
    .pdf-label::before,
    .pdf-label::after {
      content: '';
      height: 1px;
      width: 36px;
      background: rgba(183, 147, 88, 0.45);
      flex-shrink: 0;
    }

    .pdf-heading {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(2.4rem, 5.5vw, 4.2rem);
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: rgba(236, 230, 218, 0.95);
      margin-bottom: 1.25rem;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }

    .pdf-heading em {
      font-style: italic;
      color: rgba(183, 147, 88, 0.78);
    }

    .pdf-sub {
      font-size: 0.98rem;
      font-weight: 300;
      color: rgba(228, 221, 208, 0.55);
      margin-bottom: 3.5rem;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.65;
    }

    .pdf-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.9rem;
      padding: 1.25rem 3.2rem;
      background: transparent;
      border: 1px solid rgba(183, 147, 88, 0.50);
      color: rgba(183, 147, 88, 0.95);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 9999px;
      transition: all 0.38s var(--expo);
      position: relative;
      overflow: hidden;
    }

    .pdf-btn svg {
      width: 16px !important;
      height: 16px !important;
    }

    .pdf-btn:hover {
      background: rgba(183, 147, 88, 0.08);
      border-color: rgba(183, 147, 88, 0.75);
      color: rgba(183, 147, 88, 1);
      transform: translateY(-2px);
      box-shadow: 0 12px 32px -6px rgba(183, 147, 88, 0.12);
    }

    /* ── 10. FOOTER — structured closure ───────────────────────────────
       More deliberate ending. Three-zone layout with clear structure.
       Less atmospheric fog, more architectural finality.
    ─────────────────────────────────────────────────────────────────── */
    footer {
      padding: 2.75rem 4rem;
      background: #040804;
      border-top: 1px solid rgba(183, 147, 88, 0.10);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.5rem;
      position: relative;
    }

    /* Thin gold top-edge rule — clean editorial closure */
    footer::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(183, 147, 88, 0.18) 25%,
        rgba(183, 147, 88, 0.30) 50%,
        rgba(183, 147, 88, 0.18) 75%,
        transparent
      );
    }

    /* Footer logo: steady warm tone — no animation */
    .footer-logo {
      font-family: 'Instrument Serif', serif;
      font-size: 1.5rem;
      letter-spacing: -0.01em;
      color: rgba(228, 221, 208, 0.72);
      text-decoration: none;
      background: none;
      -webkit-background-clip: initial;
      background-clip: initial;
      -webkit-text-fill-color: initial;
      animation: none;
      transition: color 0.3s ease;
    }

    .footer-logo:hover {
      color: rgba(228, 221, 208, 0.92);
    }

    .footer-copy {
      font-size: 0.52rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(228, 221, 208, 0.18);
    }

    .footer-links {
      display: flex;
      gap: 1rem;
      align-items: center;
    }

    .footer-link {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      background: rgba(183, 147, 88, 0.06);
      border: 1px solid rgba(183, 147, 88, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(183, 147, 88, 0.52);
      text-decoration: none;
      transition: all 0.32s var(--expo);
      animation: none; /* remove orbit glow animation */
    }

    .footer-link:hover {
      background: rgba(183, 147, 88, 0.12);
      border-color: rgba(183, 147, 88, 0.28);
      color: rgba(183, 147, 88, 0.88);
      transform: translateY(-2px);
    }

    /* ── 11. SCROLLBAR — homepage style (more refined) ─────────────────
    ─────────────────────────────────────────────────────────────────── */
    
    
    
    

    /* ── 12. LOADER — warm dark theme ──────────────────────────────────
    ─────────────────────────────────────────────────────────────────── */
    .loader {
      background: #060a06 !important;
    }

    .loader-text {
      color: rgba(183, 147, 88, 0.88) !important;
    }

    .loader-bar {
      background: rgba(183, 147, 88, 0.65) !important;
      position: relative;
      overflow: hidden;
    }

    .loader-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: loaderShimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    

    .loader-tagline {
      font-size: 0.50rem;
      font-weight: 500;
      letter-spacing: 0.40em;
      text-transform: uppercase;
      color: rgba(183, 147, 88, 0.30);
      margin-top: 1.5rem;
    }

    /* ── 13. AMBIENT ORBS — more restrained, less green saturated ──────
    ─────────────────────────────────────────────────────────────────── */
    #menu-orb-1 {
      background: radial-gradient(circle, rgba(183, 147, 88, 0.042) 0%, transparent 70%);
    }
    #menu-orb-2 {
      background: radial-gradient(circle, rgba(43, 74, 59, 0.048) 0%, transparent 70%);
    }

    /* ── 14. PARTICLE CANVAS — refined subtle motes ────────────────────
    ─────────────────────────────────────────────────────────────────── */
    #particle-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.45;
    }

    /* ── 15. BADGE REFINEMENT ──────────────────────────────────────────
    ─────────────────────────────────────────────────────────────────── */
    .badge {
      font-size: 0.40rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 0.12rem 0.5rem;
      border-radius: 9999px;
    }

    .badge-new {
      background: rgba(183, 147, 88, 0.10);
      color: rgba(183, 147, 88, 0.75);
    }

    .badge-veg {
      background: rgba(80, 155, 100, 0.10);
      color: rgba(100, 190, 115, 0.70);
    }

    .badge-hot {
      background: rgba(200, 80, 40, 0.10);
      color: rgba(220, 115, 80, 0.75);
    }

    /* ── 16. MOBILE NAV — dark-themed scrollbar ────────────────────────
    ─────────────────────────────────────────────────────────────────── */
    /* @media (max-width: 1024px) cat-nav rules merged into tablet block above */

    @media (max-width: 767px) {
      footer {
        padding: 2.5rem 1.5rem 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
      }
      #pdf-section {
        padding: 4.5rem 1.5rem;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       REFINAMENTO FINAL — v7 "Textura, Profundidade & Vida"
       Adicionado em: 2026-03
    ══════════════════════════════════════════════════════════════ */

    /* ── 1. TEXTURA DE FUNDO: Linho Premium ──────────────────────
       Três camadas sobrepostas:
       A) Microruído fractal (simula fibra de linho/papel premium)
       B) Grade de pontos dourados em diagonal (R$ 45° offset)
       C) Vinhetas laterais em gradiente radial para dar
          "moldura" editorial ao conteúdo central.
    ──────────────────────────────────────────────────────────── */
    body::before {
      /* Layer A: linho fractal + dots dourados sobrepostos */
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='linho'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62 0.68' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23linho)'/%3E%3C/svg%3E"),
        radial-gradient(circle, rgba(183,147,88,0.038) 1px, transparent 1px);
      background-size: 600px 600px, 32px 32px;
      opacity: 0.9;
      animation: textureShift 80s linear infinite;
    }
    

    /* ── 2. VINHETAS LATERAIS ANIMADAS ───────────────────────────
       Duas faixas verticais nas laterais que respiram suavemente,
       reforçando o enquadramento editorial da coluna de conteúdo.
    ──────────────────────────────────────────────────────────── */
    #lateral-vignette {
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(to right,
          rgba(4, 7, 4, 0.55) 0%,
          rgba(4, 7, 4, 0.18) 8%,
          transparent 22%,
          transparent 78%,
          rgba(4, 7, 4, 0.18) 92%,
          rgba(4, 7, 4, 0.55) 100%
        );
      animation: vignetteBreath 12s ease-in-out infinite alternate;
    }
    

    /* ── 3. CUSTOM CURSOR ──────────────────────────────────────── */
    html { cursor: none; }
    @media (pointer: coarse) { html { cursor: auto; } }

    #custom-cursor {
      position: fixed;
      top: 0; left: 0;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: rgba(183, 147, 88, 0.85);
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%);
      transition: transform 0.08s ease, width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.25s ease;
      mix-blend-mode: screen;
    }
    #custom-cursor-ring {
      position: fixed;
      top: 0; left: 0;
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(183, 147, 88, 0.28);
      pointer-events: none;
      z-index: 99998;
      transform: translate(-50%, -50%);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                  width 0.3s ease, height 0.3s ease,
                  border-color 0.3s ease, opacity 0.3s ease;
    }
    body:has(a:hover) #custom-cursor,
    body:has(button:hover) #custom-cursor {
      width: 16px; height: 16px;
      background: rgba(183, 147, 88, 1);
    }
    body:has(a:hover) #custom-cursor-ring,
    body:has(button:hover) #custom-cursor-ring {
      width: 52px; height: 52px;
      border-color: rgba(183, 147, 88, 0.55);
    }
    @media (pointer: coarse) {
      #custom-cursor, #custom-cursor-ring { display: none; }
    }

    /* ── 4. MENU ITEM: CLIP-PATH REVEAL ─────────────────────────
       Items surgem com clip-path de baixo para cima ao revelar,
       criando uma sensação de conteúdo "emergindo" da page.
    ──────────────────────────────────────────────────────────── */
    .menu-item.reveal {
      clip-path: inset(0 0 100% 0);
      transition:
        opacity 0.55s var(--expo),
        transform 0.55s var(--expo),
        clip-path 0.6s var(--expo);
    }
    .menu-item.reveal.is-visible {
      clip-path: inset(0 0 0% 0);
    }

    /* ── 5. ITEM HOVER: GLOW HALO NO PREÇO ────────────────────── */
    .item-price {
      position: relative;
    }
    .item-price::after {
      content: '';
      position: absolute;
      inset: -4px -8px;
      border-radius: 4px;
      background: radial-gradient(ellipse at center, rgba(183,147,88,0.10) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .menu-item:hover .item-price::after {
      opacity: 1;
    }

    /* ── 6. MENU ITEM: LINHA DE SEPARAÇÃO ANIMADA ───────────────
       O border-bottom do item se ilumina ao hover.
    ──────────────────────────────────────────────────────────── */
    .menu-item {
      transition:
        border-color 0.4s ease,
        background 0.4s ease;
    }
    .menu-item:hover {
      border-bottom-color: rgba(183, 147, 88, 0.18) !important;
    }

    /* ── 7. SECTION HEADER: WATERMARK LETRA GIGANTE ─────────────
       Cada seção tem uma letra inicial gigante, fantasma,
       que se revela atrás do título como marca d'água editorial.
    ──────────────────────────────────────────────────────────── */
    .section-header .section-watermark {
      position: absolute;
      left: -0.05em;
      top: 50%;
      transform: translateY(-55%);
      font-family: 'Instrument Serif', serif;
      font-size: clamp(6rem, 16vw, 14rem);
      font-style: italic;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(183, 147, 88, 0.04);
      pointer-events: none;
      user-select: none;
      letter-spacing: -0.04em;
      white-space: nowrap;
      overflow: hidden;
      animation: watermarkPulse 8s ease-in-out infinite alternate;
    }
    

    /* ── 8. CAT-NAV: SHIMMER ATIVO ANIMADO ─────────────────────
       A linha inferior do cat-btn ativo tem um brilho deslizante.
    ──────────────────────────────────────────────────────────── */
    .cat-btn.active::before {
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(183,147,88,0.5) 20%,
        rgba(255, 230, 150, 1) 50%,
        rgba(183,147,88,0.5) 80%,
        transparent 100%);
      background-size: 200% 100%;
      animation: catActiveShimmer 2.8s ease-in-out infinite;
    }
    

    /* ── 9. SCROLL INDICATOR: FLOAT ANIMATION ───────────────────
       O "Descubra" do hero flutua suavemente para baixo e para cima.
    ──────────────────────────────────────────────────────────── */
    .hero-scroll {
      animation: heroScrollFloat 3.5s ease-in-out infinite;
    }
    

    /* ── 10. HERO-SCROLL-LINE: RUNNING DOT ──────────────────────
       Uma bolinha desce pela linha do scroll indicator.
    ──────────────────────────────────────────────────────────── */
    .hero-scroll-line {
      position: relative;
    }
    .hero-scroll-line::after {
      content: '';
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 3px;
      height: 3px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      animation: dotSlide 2.2s ease-in-out infinite;
    }
    

    /* ── 11. NOISE OVERLAY: SLOW DRIFT ──────────────────────────
       O ruído se desloca lentamente para dar a sensação de
       textura viva, como fibras de papel em movimento.
    ──────────────────────────────────────────────────────────── */
    .noise-overlay {
      animation: noiseDrift 12s steps(2) infinite;
    }
    

    /* ── 12. FOOTER SOCIAL ICONS: GLOW HOVER ────────────────────
       Cada ícone do footer emite um halo dourado ao hover.
    ──────────────────────────────────────────────────────────── */
    .footer-link:hover {
      box-shadow:
        0 0 14px rgba(183, 147, 88, 0.22),
        0 0  6px rgba(183, 147, 88, 0.30);
    }

    /* ── 13. PDF BUTTON: GLOW PULSE ON HOVER ────────────────────
       O botão de download tem uma aura pulsante ao hover.
    ──────────────────────────────────────────────────────────── */
    .pdf-btn:hover {
      box-shadow:
        0 0 32px rgba(183, 147, 88, 0.18),
        0 0  8px rgba(183, 147, 88, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }

    /* ── 14. SEÇÃO: FADE IN COM BLUR ──────────────────────────── */
    
    .menu-section.is-active {
      animation: sectionRevealBlur 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ── 15. NAV LOGO: BREATHING GLOW ───────────────────────────
       O logo da nav tem um brilho suave pulsante, como
       uma vela iluminando o nome do estabelecimento.
    ──────────────────────────────────────────────────────────── */
    .nav-logo {
      text-shadow:
        0 0 24px rgba(183, 147, 88, 0),
        0 0  0px rgba(183, 147, 88, 0);
      animation: logoGlow 6s ease-in-out infinite alternate;
    }
    

    /* ── 16. KICKER LABEL: LETTER TRACKING ANIMATION ─────────── */
    .section-kicker {
      animation: kickerExpand 0.8s var(--expo) both;
    }
    
    /* Só ativa quando o header está visível */
    .section-header:not(.is-visible) .section-kicker {
      animation: none;
      opacity: 0;
    }
    .section-header.is-visible .section-kicker {
      animation: kickerExpand 0.8s var(--expo) 0.15s both;
    }

    /* ── 17. ORB: INTENSIDADE DINÂMICA COM SCROLL ───────────────
       Os orbs ficam levemente mais visíveis quando o usuário
       rola a página (controlado via CSS class no body, adicionado em JS).
    ──────────────────────────────────────────────────────────── */
    body.is-scrolled-deep #menu-orb-1 {
      opacity: 1.3;
      filter: blur(80px);
    }
    body.is-scrolled-deep #menu-orb-2 {
      opacity: 1.3;
    }

    /* ── 18. MENU BODY: LINHA DECORATIVA VERTICAL ESQUERDA ──────
       Uma linha áurea à esquerda do menu body — como a margem
       de um diário premium ou de um menu impresso encadernado.
    ──────────────────────────────────────────────────────────── */
    #menu-body::after {
      content: '';
      position: absolute;
      top: 0;
      left: -20px;
      width: 1px;
      height: 100%;
      background: linear-gradient(to bottom,
        transparent 0%,
        rgba(183,147,88,0.10) 15%,
        rgba(183,147,88,0.18) 50%,
        rgba(183,147,88,0.10) 85%,
        transparent 100%
      );
      pointer-events: none;
    }

    /* ── 19. ITEM BODY: SLIGHT TRANSLATE ON REVEAL ───────────── */
    .menu-item.reveal.is-visible .item-body {
      animation: itemBodySlide 0.5s var(--expo) both;
    }
    

    /* ── 20. HERO KICKER: FLANKING LINES GROW ANIMATION ─────── */
    .kicker-line {
      animation: kickerLineGrow 1.2s var(--expo) 0.8s both;
    }
    .kicker-line:last-of-type {
      animation: kickerLineGrow 1.2s var(--expo) 1.0s both;
    }
    

    /* ── A11Y: Reduz animações para quem prefere ─────────────── */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      #lateral-vignette { animation: none; opacity: 0.85; }
    }

   /* Consolidated 1024px mobile layout now handles all small viewports. */
    }