/* ============================================================
   LIMA COFFEE — Landing
   Paleta: preto profundo + dourados quentes
   ============================================================ */
:root{
  --bg:        #0a0806;
  --bg-2:      #120d09;
  --bg-3:      #1a1310;
  --ink:       #f4e4b8;
  --ink-2:     #e7d6a8;
  --ink-mute:  #9a8869;
  --gold:      #c9a961;
  --gold-hi:   #e8c878;
  --gold-lo:   #8b6a3a;
  --bronze:    #5c3a1e;
  --line:      rgba(201,169,97,.18);
  --line-2:    rgba(201,169,97,.10);

  --ff-display: 'Big Shoulders Display', 'Bebas Neue', 'Impact', sans-serif;
  --ff-accent:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-body:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 78px;
  --pad: clamp(20px, 4vw, 72px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); }
html{ scroll-behavior:auto; }
body{
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background: #050403;
}

/* Global animated beans background canvas */
.bg-beans{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection{ background: var(--gold); color: var(--bg); }

/* ------------ Typography primitives ------------ */
h1,h2,h3,h4{
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
h1,h2{ text-transform: uppercase; letter-spacing: 0; }
.italic, em{ font-family: var(--ff-accent); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mono{ font-family: var(--ff-mono); font-size: .78em; letter-spacing: .04em; }
.tag{
  display:inline-block;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .25em;
  color: var(--gold); padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.eyebrow{
  display:flex; align-items:center; gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.eyebrow__line{
  display:inline-block; width: 40px; height:1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

/* ------------ Buttons ------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn--lg{ padding: 18px 30px; font-size: 13px; }
.btn--gold{
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #1a0f04;
  box-shadow: 0 0 0 1px rgba(232,200,120,.2), 0 20px 40px -20px rgba(232,200,120,.35);
}
.btn--gold:hover{
  background: linear-gradient(180deg, #f0d288, var(--gold-hi));
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(232,200,120,.4), 0 30px 60px -20px rgba(232,200,120,.55);
}
.btn--ghost{
  color: var(--ink-2);
  border-color: var(--line);
}
.btn--ghost:hover{
  color: var(--gold-hi);
  border-color: var(--gold);
  background: rgba(201,169,97,.04);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s, backdrop-filter .3s, border-color .3s;
}
.nav.is-revealed{
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(10,8,6,.92), rgba(10,8,6,.55));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line-2);
}
.nav__inner{
  max-width: 1440px; margin: 0 auto; height: 100%;
  padding: 0 var(--pad);
  display:flex; align-items:center; gap: 32px;
}
.nav__brand{ display:flex; align-items:center; gap: 12px; }
.nav__brand img{
  width: 42px; height: 42px; object-fit:contain;
  filter: drop-shadow(0 2px 10px rgba(201,169,97,.3));
  /* Hidden initially; fades in as the hero logo arrives at this slot */
  opacity: 0;
  transition: opacity .4s ease;
}
.nav.is-handed-off .nav__brand img{ opacity: 1; }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-name{
  font-family: var(--ff-display); font-size: 18px;
  letter-spacing: .08em; color: var(--gold-hi);
}
.nav__brand-sub{
  font-family: var(--ff-mono); font-size: 8.5px;
  letter-spacing: .28em; color: var(--ink-mute);
  margin-top: 3px;
}
.nav__links{
  display:flex; gap: 28px; margin-left: auto;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.nav__links a{ position:relative; padding: 6px 0; transition: color .3s; }
.nav__links a:hover{ color: var(--gold-hi); }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width: 0; height:1px; background: var(--gold);
  transition: width .35s var(--ease);
}
.nav__links a:hover::after{ width: 100%; }

.nav__actions{ display:flex; align-items:center; gap: 14px; }
.lang{
  display:flex; align-items:center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--ink-mute);
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: all .3s;
}
.lang:hover{ color: var(--gold-hi); border-color: var(--line); }
.lang__dot{
  width: 6px; height:6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

@media (max-width: 900px){
  .nav__links{ display:none; }
}

/* ============================================================
   HERO — immersive full-bleed slideshow
   ============================================================ */
.hero{
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: #050403;
}

/* ----- Slideshow -------------------------------------------------- */
.hero-slides{
  position: absolute; inset: 0;
  z-index: 0;
  --hero-scroll: 0;
  /* Subtle background parallax — slides drift down as user scrolls */
  transform: translateY(calc(var(--hero-scroll) * 6vh));
}
.hero-slide{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.4,.0,.2,1);
  will-change: opacity, transform;
  transform: scale(1.06);
  animation: heroKenBurns 9s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero-slide.is-active{
  opacity: 1;
  animation-play-state: running;
}

@keyframes heroKenBurns{
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.18) translate(-1.5%, -1%); }
}

/* alternate ken-burns directions so each slide moves uniquely */
.hero-slide[data-slide="0"]{ animation-name: heroKB0; }
.hero-slide[data-slide="1"]{ animation-name: heroKB1; }
.hero-slide[data-slide="2"]{ animation-name: heroKB2; }
.hero-slide[data-slide="3"]{ animation-name: heroKB3; }
@keyframes heroKB0{ 0%{transform:scale(1.06) translate(0,0);} 100%{transform:scale(1.18) translate(-2%,-1%);} }
@keyframes heroKB1{ 0%{transform:scale(1.10) translate(0,0);} 100%{transform:scale(1.20) translate(2%,1%);} }
@keyframes heroKB2{ 0%{transform:scale(1.08) translate(0,0);} 100%{transform:scale(1.18) translate(-1%,2%);} }
@keyframes heroKB3{ 0%{transform:scale(1.10) translate(0,0);} 100%{transform:scale(1.22) translate(1.5%,-1.5%);} }

/* Premium vignette + dark center spot so the logo reads on any photo */
.hero-slides__vignette{
  position: absolute; inset: 0;
  pointer-events: none;
  --hero-scroll: 0;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,calc(.78 + var(--hero-scroll) * .12)) 0%,
      rgba(0,0,0,calc(.55 + var(--hero-scroll) * .20)) 18%,
      rgba(0,0,0,calc(.25 + var(--hero-scroll) * .30)) 38%,
      rgba(0,0,0,calc(.10 + var(--hero-scroll) * .35)) 55%,
      rgba(0,0,0,calc(.50 + var(--hero-scroll) * .35)) 100%),
    linear-gradient(180deg,
      rgba(10,8,6,.45) 0%,
      rgba(10,8,6,.10) 30%,
      rgba(10,8,6,.20) 70%,
      rgba(10,8,6,.85) 100%);
}

/* ----- Centered brand mark with cinematic backdrop ---------------- */
.hero-brand{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-brand__stage{
  position: relative;
  width: clamp(360px, 44vw, 620px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  /* Flies from hero centre to nav slot driven by JS-set vars */
  --hero-tx: 0px;
  --hero-ty: 0px;
  --hero-scale: 1;
  --hero-fade: 1;
  --hero-scroll: 0;
  transform-origin: 50% 50%;
  transform:
    translate(var(--hero-tx), var(--hero-ty))
    scale(var(--hero-scale));
  opacity: var(--hero-fade);
  will-change: transform, opacity;
}
/* Inner wrapper handles intro + float so the outer stage transform
   from scroll can compose with them cleanly. */
.hero-brand__inner{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  animation: brandIntro 2s cubic-bezier(.2,.7,.2,1) both,
             brandFloat 8s ease-in-out 2s infinite alternate;
}
/* On scroll, intensify the glow + slight blur on the stage's children */
.hero-brand__stage::before{
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,215,150,calc(.0 + var(--hero-scroll) * .55)) 0%,
    rgba(232,180,110,calc(.0 + var(--hero-scroll) * .35)) 25%,
    transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
@keyframes brandIntro{
  0%   { opacity: 0; transform: scale(.78); filter: blur(14px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1);  filter: blur(0); }
}
@keyframes brandFloat{
  from { transform: translateY(-6px); }
  to   { transform: translateY(6px); }
}

/* Pulsating golden halo behind the logo */
.hero-brand__halo{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,215,150,.45) 0%,
      rgba(232,180,110,.22) 22%,
      rgba(201,169,97,.10) 42%,
      transparent 65%);
  filter: blur(18px);
  opacity: 0.85;
  /* Animação removida — halo estático pra reduzir carga de GPU */
}

/* Rings e sparks DESATIVADOS (Minimal Cinemático) ---
   Mantemos o HTML mas escondemos via display:none. */
.hero-brand__ring,
.hero-brand__sparks{
  display: none !important;
}

/* The logo image — sombra única dourada sutil */
.hero-brand__mark{
  position: relative;
  width: clamp(280px, 32vw, 460px);
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.8));
  /* Sem animação infinita — visual estático mais leve */
}
/* (keyframes sparkOrbit / sparkPulse removidos — sparks desativados pra perf) */

/* ----- Pager (slide dots) ---------------------------------------- */
.hero-pager{
  position: absolute;
  left: 50%;
  bottom: clamp(80px, 12vh, 120px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 14px;
}
.hero-pager__dot{
  position: relative;
  width: 44px; height: 2px;
  padding: 0;
  background: rgba(255,255,255,.18);
  border: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background .3s;
}
.hero-pager__dot:hover{ background: rgba(255,255,255,.32); }
.hero-pager__dot span{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  transform-origin: left center;
  transform: scaleX(0);
}
.hero-pager__dot.is-active span{
  animation: heroPagerFill 4s linear forwards;
}
@keyframes heroPagerFill{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ----- Scroll cue ------------------------------------------------- */
.hero-scroll{
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .4em;
  color: rgba(232,200,140,.75);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .3s;
}
.hero-scroll:hover{ color: var(--gold-hi); }
.hero-scroll__line{
  width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--gold-hi), transparent);
  transform-origin: top;
  animation: heroScrollLine 2.2s ease-in-out infinite;
}
@keyframes heroScrollLine{
  0%   { transform: scaleY(.2); opacity: .3; }
  50%  { transform: scaleY(1);  opacity: 1; }
  100% { transform: scaleY(.2); opacity: .3; transform-origin: bottom; }
}

/* Reduced motion */
body[data-motion="off"] .hero-slide,
body[data-motion="off"] .hero-brand__stage,
body[data-motion="off"] .hero-brand__halo,
body[data-motion="off"] .hero-brand__ring,
body[data-motion="off"] .hero-brand__mark,
body[data-motion="off"] .hero-brand__sparks span,
body[data-motion="off"] .hero-pager__dot.is-active span,
body[data-motion="off"] .hero-scroll__line{
  animation: none !important;
}

/* ============================================================
   MANIFESTO + MARQUEE
   ============================================================ */
.manifesto{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.marquee{
  overflow: hidden;
  border-bottom: 1px solid var(--line-2);
  padding: 22px 0;
  background: var(--bg-2);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee__track{
  display:flex; gap: 36px;
  font-family: var(--ff-mono);
  font-size: 13px; letter-spacing: .35em;
  color: var(--ink-mute); white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee__track .dot{ color: var(--gold); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.manifesto__body{
  max-width: 1440px; margin: 0 auto;
  padding: 120px var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.manifesto__text-col{ min-width: 0; }
.manifesto__kicker{
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 36px;
}
.manifesto__text{
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.01em;
  max-width: 1200px;
}
.manifesto__text .dim{ color: var(--ink-mute); }
.manifesto__text span{ display:block; }

/* ---- Manifesto dynamic coffee visual ---- */
.manifesto__visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  justify-self: end;
}
.mvis{
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Big warm golden glow (the light behind the bean) */
.mvis__glow{
  position:absolute;
  inset: -5%;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(255,210,140,.55) 0%,
      rgba(232,180,110,.35) 14%,
      rgba(201,169,97,.18) 32%,
      rgba(201,169,97,.05) 55%,
      transparent 75%);
  filter: blur(10px);
  border-radius: 50%;
  animation: mvisGlow 6s ease-in-out infinite alternate;
  z-index: 0;
}
.mvis__god{
  position:absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,220,160,.22) 0%, rgba(255,220,160,0) 55%);
  mix-blend-mode: screen;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
  animation: mvisGodPulse 7s ease-in-out infinite alternate;
}
@keyframes mvisGodPulse{ from{opacity:.7;} to{opacity:1;} }
@keyframes mvisGlow{
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.07); }
}

.mvis__ring{
  position:absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(232,200,140,.22);
  pointer-events: none;
  width: 68%; height: 68%;
  will-change: transform, opacity;
  z-index: 1;
}
.mvis__ring--1{ animation: mvisRing 5.5s ease-out infinite; }
.mvis__ring--2{ animation: mvisRing 5.5s ease-out infinite 1.8s; }
.mvis__ring--3{ animation: mvisRing 5.5s ease-out infinite 3.6s; }
@keyframes mvisRing{
  0%   { transform: translate(-50%,-50%) scale(.55); opacity: 0; }
  15%  { opacity: .85; }
  100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; }
}

.mvis__bean-hero{
  position: relative;
  display: block;
  width: auto;
  height: 88%;
  max-width: 82%;
  max-height: 88%;
  object-fit: contain;
  filter:
    drop-shadow(0 40px 50px rgba(0,0,0,.75))
    drop-shadow(0 0 40px rgba(232,180,110,.35));
  z-index: 2;
  animation: mvisBeanFloat 7s ease-in-out infinite alternate;
}
@keyframes mvisBeanFloat{
  from{ transform: translateY(-6px) rotate(-1.5deg); }
  to  { transform: translateY(6px)  rotate(1.5deg); }
}
/* (bean-tilt sway removed — was for SVG g element, no longer needed) */

.mvis__flare{
  position: absolute;
  top: 32%; left: 32%;
  width: 40%; height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,230,180,.75) 50%, transparent);
  filter: blur(3px);
  transform: rotate(-28deg);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  opacity: .85;
  animation: mvisFlare 5s ease-in-out infinite alternate;
}
@keyframes mvisFlare{
  from{ opacity: .55; transform: rotate(-28deg) scaleX(.9); }
  to  { opacity: .95; transform: rotate(-28deg) scaleX(1.1); }
}

.mvis__embers{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
}
.mvis__embers span{
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd78a, rgba(201,169,97,0));
  box-shadow: 0 0 6px rgba(255,210,140,.8);
  opacity: 0;
}
.mvis__embers span:nth-child(1){ left: 20%; top: 70%; animation: mvisEmber 5s ease-in infinite 0s; }
.mvis__embers span:nth-child(2){ left: 75%; top: 65%; animation: mvisEmber 6s ease-in infinite .8s; }
.mvis__embers span:nth-child(3){ left: 35%; top: 80%; animation: mvisEmber 4.5s ease-in infinite 1.6s; }
.mvis__embers span:nth-child(4){ left: 60%; top: 75%; animation: mvisEmber 5.5s ease-in infinite 2.4s; }
.mvis__embers span:nth-child(5){ left: 50%; top: 85%; animation: mvisEmber 7s ease-in infinite 3.2s; }
.mvis__embers span:nth-child(6){ left: 30%; top: 55%; animation: mvisEmber 6s ease-in infinite 4s; }
@keyframes mvisEmber{
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-120px) translateX(8px) scale(.4); opacity: 0; }
}

.mvis__label{
  position: absolute;
  right: 4%;
  bottom: 6%;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .24em;
  color: var(--gold);
  padding: 10px 14px;
  border: 1px solid rgba(201,169,97,.3);
  background: rgba(10,8,6,.5);
  backdrop-filter: blur(6px);
}
.mvis__label-sub{
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: .18em;
}

@media (max-width: 900px){
  .manifesto__body{ grid-template-columns: 1fr; }
  .manifesto__visual{ max-width: 320px; justify-self: center; }
}

/* ============================================================
   ORIGEM
   ============================================================ */
.origem{
  padding: 140px var(--pad) 80px;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(10,8,6,.93) 0%, rgba(14,10,7,.88) 50%, rgba(10,8,6,.95) 100%),
    radial-gradient(ellipse 70% 50% at 88% 12%, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(ellipse 80% 60% at 8% 88%, rgba(92,58,30,.14), transparent 65%),
    url("assets/origem-bg.jpg") center/cover no-repeat,
    linear-gradient(180deg, var(--bg) 0%, #0e0a07 50%, var(--bg) 100%);
}
.origem__inner{
  max-width: 1440px;
  margin: 0 auto;
}
/* Paper-grain texture overlay — subtle but breaks the flatness */
.origem::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.79 0 0 0 0 0.66 0 0 0 0 0.38 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 360px 360px;
  opacity: .055;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}
/* Decorative topographic accent — faint contour lines on the side */
.origem::after{
  content: "";
  position: absolute;
  top: 80px;
  right: 0;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  background-image:
    radial-gradient(circle, transparent 38%, rgba(201,169,97,.10) 39%, transparent 41%),
    radial-gradient(circle, transparent 46%, rgba(201,169,97,.08) 47%, transparent 49%),
    radial-gradient(circle, transparent 54%, rgba(201,169,97,.06) 55%, transparent 57%),
    radial-gradient(circle, transparent 62%, rgba(201,169,97,.05) 63%, transparent 65%);
  pointer-events: none;
  opacity: .85;
  z-index: -1;
  filter: blur(.4px);
}
.origem__hdr{ margin-bottom: 80px; }
.origem__hdr h2{
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  margin-top: 24px;
  max-width: 1100px;
}
.origem__hdr h2 span{ display:block; }
.origem__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 500; }

.origem__grid{
  display: grid; grid-template-columns: 0.9fr 1fr;
  gap: 80px; align-items: start;
}
.origem__media{ position: sticky; top: calc(var(--nav-h) + 40px); }
.origem__photo{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.05);
  filter: saturate(.95) contrast(1.02);
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s;
}
.origem__photo::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 55%, rgba(10,8,7,.55) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(201,169,97,.08), transparent 55%);
  pointer-events: none;
}
.origem__media:hover .origem__photo{ transform: scale(1.015); filter: saturate(1) contrast(1.04); }
.origem__caption{
  margin-top: 16px;
  display:flex; gap: 14px; align-items:baseline;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .15em; color: var(--ink-mute);
}
.origem__caption .mono{ color: var(--gold); }

.origem__text .lead{
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 28px;
  font-weight: 400;
}
.origem__text p{
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 560px;
}
.origem__text b{ color: var(--gold-hi); font-weight: 500; }

.terroir{
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.terroir > div{
  padding: 22px 24px;
  background: var(--bg);
  transition: background .3s;
}
.terroir > div:hover{ background: var(--bg-2); }
.terroir dt{
  font-family: var(--ff-mono);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.terroir dd{
  font-family: var(--ff-display);
  font-size: 20px;
  color: var(--gold-hi);
}

@media (max-width: 900px){
  .origem__grid{ grid-template-columns: 1fr; gap: 40px; }
  .origem__media{ position: relative; top: auto; }
}

/* ------ photo placeholder (striped, premium) ------ */
.photo{
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(201,169,97,.04) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.photo::before{
  content:''; position:absolute; inset: 14px;
  border: 1px solid var(--line-2);
}
.photo::after{
  content: attr(data-caption);
  position: absolute; bottom: 20px; left: 20px;
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .25em; color: var(--ink-mute);
}
.photo--tall{ aspect-ratio: 3 / 4; }

/* ============================================================
   REGIONS — horizontal scroll
   ============================================================ */
.regions{
  margin-top: 120px;
  padding: 60px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.regions__head{ margin-bottom: 40px; max-width: 720px; }
.regions__head h3{
  font-size: clamp(24px, 2.5vw, 36px);
  margin-top: 16px;
  color: var(--ink);
}
.regions__track{
  display:flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-lo) transparent;
}
.regions__track::-webkit-scrollbar{ height: 4px; }
.regions__track::-webkit-scrollbar-thumb{ background: var(--gold-lo); border-radius: 4px; }
.region{
  flex: 0 0 340px;
  min-height: 360px;
  padding: 36px 30px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border: 1px solid var(--line-2);
  display:flex; flex-direction: column;
  scroll-snap-align: start;
  transition: all .4s var(--ease);
  position: relative;
}
.region:hover{
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-color: var(--line);
  transform: translateY(-4px);
}
.region__idx{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .25em; color: var(--gold);
  margin-bottom: 40px;
}
.region h4{
  font-size: 32px;
  color: var(--gold-hi);
  margin-bottom: 14px;
}
.region p{
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
  flex: 1;
}
.region__alt{
  margin-top: 20px;
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .2em; color: var(--ink-mute);
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
}
.region--more{
  background: transparent;
  border: 1px dashed var(--line);
}
.region--more .region__idx{ color: var(--gold-hi); }

/* ============================================================
   GRAINS (Produtos)
   ============================================================ */
.grains{
  padding: 140px var(--pad);
  max-width: 1440px; margin: 0 auto;
  position: relative;
}
.grains__hdr{ margin-bottom: 80px; max-width: 1100px; }
.grains__hdr h2{
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.08;
  margin-top: 24px;
}
.grains__hdr h2 span{ display:block; }
.grains__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 500; }

/* ============================================================
   CATALOG — variety cards (5-up + 2 wide)
   ============================================================ */
.catalog{
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.catalog__row{
  position: relative;
}
.catalog__rowHdr{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-2);
  max-width: 760px;
}
.catalog__rowTag{
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  padding-top: 10px;
  border-top: 1px solid var(--gold);
  width: 36px;
  text-align: center;
}
.catalog__rowHdr h3{
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
}
.catalog__rowSub{
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 620px;
}
.catalog__grid{
  display: grid;
  gap: 20px;
}
.catalog__grid--5{
  grid-template-columns: repeat(5, 1fr);
}
.catalog__row--duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Variety card */
.variety{
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(18,13,9,.6);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
}
.variety:hover{
  transform: translateY(-4px);
  border-color: rgba(201,169,97,.35);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.06);
}
.variety__photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.variety__photo::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(18,13,9,.7));
}
.variety__body{
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.variety__kicker{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}
.variety__body h4{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.variety__body h3{
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.variety__body p{
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.variety__spec{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.variety__spec > div{
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 11px;
  border-bottom: 1px dashed var(--line-2);
}
.variety__spec > div:last-child{ border-bottom: 0; }
.variety__spec dt{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.variety__spec dd{
  color: var(--gold-hi);
  font-family: var(--ff-mono);
  font-size: 11px;
  text-align: right;
}

/* Wide variants for Conilon + Blend row */
.variety--wide{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.variety--wide .variety__photo{
  aspect-ratio: auto;
  height: 100%;
  min-height: 360px;
}
.variety--wide .variety__body{
  padding: 32px 32px 36px;
  gap: 14px;
}
.variety--wide .variety__body p{
  font-size: 14px;
  line-height: 1.7;
}
.variety__spec--wide{
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.variety--featured{
  background: linear-gradient(180deg, rgba(40,25,12,.6), rgba(18,13,9,.6));
  border-color: rgba(201,169,97,.25);
  position: relative;
}
.variety--featured::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.variety--featured .variety__body h3{
  color: var(--gold-hi);
}

.grains__note{
  margin-top: 60px;
  display:flex; gap: 16px; align-items: baseline;
  padding: 24px 28px;
  border: 1px dashed var(--line);
}
.grains__note .mono{ color: var(--gold); font-size: 18px; }
.grains__note p{
  color: var(--ink-2); font-size: 14px;
  max-width: 720px;
}

@media (max-width: 1100px){
  .catalog__grid--5{ grid-template-columns: repeat(3, 1fr); }
  .catalog__grid--5 .variety:nth-child(n+4){ grid-column: span 1; }
}
@media (max-width: 820px){
  .catalog__grid--5{ grid-template-columns: repeat(2, 1fr); }
  .catalog__row--duo{ grid-template-columns: 1fr; }
  .variety--wide{ grid-template-columns: 1fr; }
  .variety--wide .variety__photo{ min-height: 220px; aspect-ratio: 4/3; }
}
@media (max-width: 520px){
  .catalog__grid--5{ grid-template-columns: 1fr; }
}

/* ============================================================
   PROCESS — vertical centered timeline with cinematic bg
   ============================================================ */
.process{
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
  padding: 120px 0 140px;
}
.process__bg{
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
}
.process__bgImg{
  position: absolute; inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(.32) saturate(.9);
  transform: scale(1.05);
  will-change: transform;
}
.process__bgOverlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.6), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.7), transparent 60%),
    linear-gradient(180deg, rgba(20,12,6,.85), rgba(15,9,4,.92));
}
.process__inner{
  position: relative; z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.process__hdr{
  text-align: center;
  margin-bottom: 100px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.process__hdr .tag{
  display: inline-block;
  margin-bottom: 24px;
}
.process__hdr h2{
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
}
.process__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 500; }
.process__lede{
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 auto;
}

/* Vertical centered timeline */
.timeline{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* The central line */
.timeline::before{
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201,169,97,.35) 6%,
    rgba(201,169,97,.35) 94%,
    transparent 100%
  );
  transform: translateX(-50%);
}
/* Animated golden fill that grows on scroll */
.timeline::after{
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 1px;
  height: var(--timeline-progress, 0%);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 14px rgba(232,200,120,.6), 0 0 30px rgba(201,169,97,.3);
  transform: translateX(-50%);
  transition: height .15s linear;
}

.timeline__step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 100px;
}
.timeline__step:last-child{ margin-bottom: 0; }

/* Center node */
.timeline__node{
  grid-column: 2;
  width: 64px; height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 35% 30%, #2a1c0e, #110a04 70%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--gold);
  position: relative;
  z-index: 2;
  transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.timeline__node::before{
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(201,169,97,.2);
  opacity: 0;
  transition: opacity .5s, transform .5s;
}
.timeline__step.is-active .timeline__node{
  border-color: var(--gold);
  background: radial-gradient(circle at 35% 30%, #4a2f15, #1a0f04 70%);
  color: var(--gold-hi);
  box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(201,169,97,.35);
}
.timeline__step.is-active .timeline__node::before{
  opacity: 1;
  transform: rotate(60deg);
}
.timeline__node--final{
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--bronze) 70%);
  border-color: var(--gold-hi);
  color: #1a0f04;
  box-shadow: 0 0 30px rgba(232,200,120,.4);
}

/* Card — alternates left/right */
.timeline__card{
  border: 1px solid var(--line-2);
  background: rgba(18,13,9,.7);
  backdrop-filter: blur(12px);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), border-color .4s, opacity .6s;
}
.timeline__step:nth-child(odd) .timeline__card{
  grid-column: 1;
  margin-right: 20px;
  text-align: right;
}
.timeline__step:nth-child(even) .timeline__card{
  grid-column: 3;
  margin-left: 20px;
  text-align: left;
}
.timeline__step.is-active .timeline__card{
  border-color: rgba(201,169,97,.4);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,169,97,.1);
}

/* Connector line from card to node */
.timeline__card::before{
  content: '';
  position: absolute;
  top: 50%;
  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%);
  opacity: .4;
}
.timeline__step:nth-child(odd) .timeline__card{ position: relative; }
.timeline__step:nth-child(even) .timeline__card{ position: relative; }
.timeline__step:nth-child(odd) .timeline__card::before{ right: -20px; }
.timeline__step:nth-child(even) .timeline__card::before{ left: -20px; transform: scaleX(-1); }
.timeline__step.is-active .timeline__card::before{ opacity: 1; }

.timeline__photo{
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  position: relative;
}
.timeline__photo::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,13,9,.8));
}

.timeline__body{
  padding: 28px 30px 32px;
  position: relative;
  z-index: 1;
}
.timeline__when{
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.timeline__body h3{
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink);
}
.timeline__body p{
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Final step — full-width centered CTA */
.timeline__step--final{
  grid-template-columns: 1fr;
  margin-top: 40px;
  text-align: center;
}
.timeline__step--final .timeline__node{
  grid-column: 1;
  margin-bottom: 32px;
}
.timeline__card--cta{
  grid-column: 1 !important;
  margin: 0 auto !important;
  max-width: 620px;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(40,25,12,.85), rgba(18,13,9,.85));
  border-color: rgba(201,169,97,.3);
  padding: 8px 0;
}
.timeline__card--cta::before{ display: none; }
.timeline__card--cta .timeline__body{
  padding: 40px 32px 44px;
}
.timeline__card--cta h3{
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold-hi);
  font-style: italic;
  font-weight: 300;
  margin-bottom: 16px;
}
.timeline__card--cta p{
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Responsive — single column on small screens */
@media (max-width: 820px){
  .timeline::before, .timeline::after{ left: 32px; }
  .timeline__step{
    grid-template-columns: 64px 1fr;
    gap: 20px;
    margin-bottom: 60px;
  }
  .timeline__node{
    grid-column: 1;
    margin: 0;
  }
  .timeline__step:nth-child(odd) .timeline__card,
  .timeline__step:nth-child(even) .timeline__card{
    grid-column: 2;
    margin: 0;
    text-align: left;
  }
  .timeline__step:nth-child(odd) .timeline__card::before,
  .timeline__step:nth-child(even) .timeline__card::before{
    left: -20px; right: auto;
    transform: none;
  }
  .timeline__step--final{ grid-template-columns: 1fr; }
  .timeline__step--final .timeline__node{ margin: 0 auto 24px; }
}

body[data-motion="off"] .timeline__card{ transform: none !important; opacity: 1 !important; }

/* ============================================================
   EQUIPE
   ============================================================ */
.team{
  position: relative;
  padding: clamp(80px, 12vh, 140px) var(--pad);
  background:
    linear-gradient(180deg, rgba(10,8,6,1) 0%, rgba(18,12,8,1) 100%),
    var(--bg);
}
.team__inner{ max-width: 1320px; margin: 0 auto; }
.team__hdr{
  text-align: center;
  margin: 0 auto clamp(48px, 8vh, 80px);
  max-width: 760px;
}
.team__hdr .tag{ margin-bottom: 22px; display: inline-block; }
.team__hdr h2{
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 24px;
  color: var(--ink);
}
.team__hdr h2 span{ display: block; }
.team__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 500; }
.team__lede{
  color: var(--ink-2);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}
.team__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1024px){
  .team__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px){
  .team__grid{ grid-template-columns: 1fr; }
}
.member{
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(30,22,15,.6), rgba(18,12,8,.6));
  border: 1px solid rgba(201,169,97,.16);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1),
              border-color .4s, box-shadow .4s;
}
.member::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  opacity: 0;
  transition: opacity .4s;
}
.member:hover{
  transform: translateY(-6px);
  border-color: rgba(201,169,97,.4);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(201,169,97,.18);
}
.member:hover::before{ opacity: 1; }

.member__photo{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1d12 0%, #14100b 100%);
}
.member__photo-inner{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid; place-items: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.member__photo-inner::before{
  content: attr(data-placeholder);
  font-family: var(--ff-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: .08em;
  color: rgba(201,169,97,.25);
  pointer-events: none;
}
/* When a real photo is set via inline style, hide the initials */
.member__photo-inner[style*="background-image"]::before{ content: none; }
.member__photo::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,8,6,.85) 100%);
  pointer-events: none;
}
.member:hover .member__photo-inner{ transform: scale(1.05); filter: brightness(1.08); }

.member__role-tag{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  background: rgba(10,8,6,.7);
  border: 1px solid rgba(201,169,97,.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px;
}

.member__body{
  padding: 22px 22px 26px;
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
}
.member__body h3{
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.member__role{
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--gold-hi);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.member__contact{
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(201,169,97,.12);
  display: grid;
  gap: 10px;
}
.member__contact > div{ display: flex; flex-direction: column; gap: 3px; }
.member__contact dt{
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.member__contact dd{
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  word-break: break-word;
}
.member__contact a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.member__contact a:hover{ color: var(--gold-hi); border-bottom-color: var(--gold); }

.team__address{
  margin-top: clamp(40px, 6vh, 60px);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px dashed rgba(201,169,97,.25);
  border-radius: 4px;
  background: rgba(18,12,8,.5);
}
.team__address-icon{
  font-size: 22px;
  color: var(--gold-hi);
  line-height: 1;
}
.team__address-label{
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .25em;
  margin-bottom: 4px;
}
.team__address-line{
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 560px){
  .team__address{ flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers{
  padding: 140px var(--pad);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.numbers__inner{
  max-width: 1440px;
  margin: 0 auto;
}
/* Subtle green-bean photo background — adds texture without competing */
.numbers::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: url('assets/numeros-graos.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .12;
  filter: saturate(.85) contrast(1.05);
  z-index: -2;
  pointer-events: none;
}
/* Dark gradient on top to keep numbers readable */
.numbers::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(5,4,3,.4) 50%, rgba(5,4,3,.78) 100%),
    linear-gradient(180deg, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
  z-index: -1;
  pointer-events: none;
}
.numbers__hdr{ margin-bottom: 80px; text-align: center; }
.numbers__hdr h2{
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1;
  margin-top: 24px;
}
.numbers__hdr h2 span{ display:block; }
.numbers__hdr h2 .italic em{ color: var(--gold-hi); font-weight: 500; }

.numbers__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 1280px;
  margin: 0 auto;
}
.stat{
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 3.5vw, 48px) clamp(24px, 2.5vw, 36px) clamp(28px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 36px);
  min-height: clamp(220px, 26vw, 300px);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(40,26,12,.72) 0%, rgba(18,12,8,.78) 50%, rgba(10,7,5,.85) 100%);
  border: 1px solid rgba(201,169,97,.18);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Glow dourado sutil no canto */
.stat::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(232,200,120,.35), rgba(201,169,97,.05) 40%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .9;
}
/* Glow radial no fundo */
.stat::after{
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  left: -40px; top: -60px;
  background: radial-gradient(circle, rgba(232,200,120,.18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
  transition: opacity .4s var(--ease);
  opacity: .5;
}
.stat:hover{
  transform: translateY(-4px);
  border-color: rgba(232,200,120,.45);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(232,200,120,.12);
}
.stat:hover::after{ opacity: 1; }

.stat__value{
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.stat__num{
  font-family: var(--ff-display);
  font-size: clamp(64px, 8.5vw, 116px);
  color: var(--gold-hi);
  line-height: .85;
  font-weight: 800;
  letter-spacing: -.02em;
}
.stat__plus{
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  color: var(--gold);
  line-height: .9;
}
.stat__lbl{
  font-family: var(--ff-body);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .015em;
  color: var(--ink-2);
  text-transform: none;
  line-height: 1.55;
  max-width: 28ch;
  font-weight: 500;
}

@media (max-width: 1024px){
  .numbers__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .numbers__grid{ grid-template-columns: 1fr; gap: 14px; }
  .stat{ min-height: 0; }
  .stat__num{ font-size: clamp(56px, 14vw, 72px); }
}

/* ============================================================
   CTA / Contact
   ============================================================ */
.cta{
  position: relative;
  padding: 160px var(--pad);
  overflow: hidden;
  border-top: 1px solid var(--line-2);
  background:
    radial-gradient(circle at 50% 50%, rgba(201,169,97,.08), transparent 60%),
    var(--bg);
}
.cta__bg{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.cta__ring{
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  border: 1px solid var(--line);
  border-radius: 50%;
  animation: spin 120s linear infinite;
}
.cta__ring::before, .cta__ring::after{
  content:''; position:absolute; inset: 0;
  border: 1px dashed var(--line-2);
  border-radius: 50%;
}
.cta__ring::before{ inset: 8%; }
.cta__ring::after{ inset: 18%; }

.cta__inner{
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto;
  text-align: center;
}
.cta__inner h2{
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.05;
  margin: 24px 0 28px;
}
.cta__inner h2 span{ display:block; }
.cta__inner h2 .italic em{ color: var(--gold-hi); font-weight: 500; }
.cta__lede{
  max-width: 620px; margin: 0 auto 64px;
  font-size: 16px; color: var(--ink-2); line-height: 1.75;
}
.cta__grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2);
  text-align: left;
}
.cta__card{
  background: var(--bg);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 10px;
  transition: background .3s;
  position: relative;
}
.cta__card:hover{ background: var(--bg-2); }
.cta__k{
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .25em; color: var(--gold);
}
.cta__v{
  font-family: var(--ff-display);
  font-size: 22px; color: var(--ink);
  font-weight: 400;
}
.cta__arrow{
  position: absolute; top: 32px; right: 28px;
  color: var(--gold-hi);
  transition: transform .3s;
}
.cta__card:hover .cta__arrow{ transform: translate(4px, -4px); }

@media (max-width: 800px){
  .cta__grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top: 1px solid var(--line-2);
  padding: 60px var(--pad) 40px;
  background: var(--bg);
}
.foot__inner{
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: start;
}
.foot__brand{ display:flex; gap: 14px; align-items: center; }
.foot__brand img{ width: 48px; height: 48px; object-fit: contain; }
.foot__name{
  font-family: var(--ff-display);
  font-size: 20px; color: var(--gold-hi);
  letter-spacing: .08em;
}
.foot__sub{
  font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .28em; color: var(--ink-mute);
  margin-top: 4px;
}
.foot__cols{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 760px){
  .foot__cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
.foot__cols > div{ display:flex; flex-direction:column; gap: 6px; }
.foot__k{
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--gold);
  text-transform: uppercase;
}
.foot__cols > div > span:last-child{
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.foot__cols a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.foot__cols a:hover{
  color: var(--gold-hi);
  border-bottom-color: var(--gold);
}
.foot__legal{
  grid-column: 1 / -1;
  padding-top: 32px;
  border-top: 1px solid var(--line-2);
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .15em; color: var(--ink-mute);
  text-transform: uppercase;
}
@media (max-width: 800px){
  .foot__inner, .foot__cols{ grid-template-columns: 1fr; }
}

/* ============================================================
   REVEAL (entry animations)
   — Elements start visible; JS adds .reveal--armed to hide,
   then .is-in to reveal. This way the page never looks broken
   if JS fails or is late loading.
   ============================================================ */
.reveal{
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.reveal.reveal--armed{
  opacity: 0;
  transform: translateY(28px);
}
.reveal.reveal--armed.is-in{ opacity: 1; transform: translateY(0); }

body[data-motion="off"] .reveal{ opacity:1; transform:none; transition: none; }
body[data-motion="off"] .globe__halo,
body[data-motion="off"] .globe__img,
body[data-motion="off"] .globe__orbit,
body[data-motion="off"] .marquee__track,
body[data-motion="off"] .cta__ring,
body[data-motion="off"] .hero__scroll-line,
body[data-motion="off"] .mvis__glow,
body[data-motion="off"] .mvis__god,
body[data-motion="off"] .mvis__ring,
body[data-motion="off"] .mvis__bean-hero,
body[data-motion="off"] .mvis__bean-tilt,
body[data-motion="off"] .mvis__flare,
body[data-motion="off"] .mvis__embers span{
  animation: none !important;
}

body[data-motion="subtle"] .globe__orbit{ animation-duration: 200s !important; }
body[data-motion="subtle"] .cta__ring{ animation-duration: 300s !important; }

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks{
  position: fixed; bottom: 24px; right: 24px;
  z-index: 100;
  width: 280px;
  background: rgba(18,13,9,.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  font-family: var(--ff-mono);
}
.tweaks__hdr{
  display:flex; justify-content: space-between; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 11px; letter-spacing: .25em;
  color: var(--gold);
  text-transform: uppercase;
}
.tweaks__x{ color: var(--ink-mute); font-size: 20px; padding: 0 4px; }
.tweaks__x:hover{ color: var(--gold-hi); }
.tweaks__body{ padding: 16px; }
.tweaks__lbl{
  display:block;
  font-size: 10px; letter-spacing: .2em;
  color: var(--ink-mute); text-transform: uppercase;
  margin-bottom: 12px;
}
.tweaks__seg{
  display:flex;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  overflow: hidden;
}
.tweaks__seg button{
  flex: 1;
  padding: 10px 8px;
  font-size: 10px; letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  border-right: 1px solid var(--line-2);
  transition: all .2s;
}
.tweaks__seg button:last-child{ border-right: 0; }
.tweaks__seg button.is-active{
  background: var(--gold);
  color: #1a0f04;
}
.tweaks__seg button:not(.is-active):hover{ color: var(--gold-hi); background: rgba(201,169,97,.06); }

/* ============================================================
   FLOATING BEANS — global ambient background
   ============================================================ */
.beans-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bean-float{
  position: absolute;
  bottom: -10vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(232,200,120,.6), rgba(122,80,40,.85) 55%, rgba(60,35,20,.95)),
    linear-gradient(180deg, rgba(201,169,97,.3), rgba(40,22,10,.6));
  box-shadow:
    inset -2px -3px 6px rgba(0,0,0,.5),
    inset 2px 2px 4px rgba(232,200,120,.15);
  animation-name: beanRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: blur(.4px);
  will-change: transform, opacity;
}
.bean-float::after{
  /* the central crease line on a coffee bean */
  content: '';
  position: absolute;
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(20,10,5,.7) 20%, rgba(20,10,5,.7) 80%, transparent);
  transform: translateX(-50%);
  border-radius: 50%;
}
@keyframes beanRise{
  0%   { transform: translateY(0) translateX(0) rotate(var(--rot, 0deg)) scale(1); }
  50%  { transform: translateY(-55vh) translateX(calc(var(--drift, 0px) * .5)) rotate(calc(var(--rot, 0deg) + 180deg)) scale(1.05); }
  100% { transform: translateY(-115vh) translateX(var(--drift, 0px)) rotate(calc(var(--rot, 0deg) + 360deg)) scale(.95); }
}

/* Make sure all main content sits ABOVE the global beans layer */
.hero, .manifesto, .origem, .grains, .process, .team, .structure, .numbers, .cta, .footer{
  position: relative;
  z-index: 1;
}

body[data-motion="off"] .bean-float{ animation: none !important; }

/* On mobile dial it back */
@media (max-width: 720px){
  .bean-float:nth-child(n+8){ display: none; }
}

/* ================================================================
   HERO — Institutional info strip (location + credentials)
   The centered Lima Coffee logo is the visual anchor; this strip sits
   subtly at the bottom to add context without competing.
   ================================================================ */

/* Lighten the slideshow vignette so photos read crisp behind the logo */
.hero-slides__vignette{
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(0,0,0,calc(.42 + var(--hero-scroll) * .12)) 0%,
      rgba(0,0,0,calc(.22 + var(--hero-scroll) * .18)) 25%,
      rgba(0,0,0,calc(.10 + var(--hero-scroll) * .20)) 50%,
      rgba(0,0,0,calc(.20 + var(--hero-scroll) * .25)) 80%,
      rgba(0,0,0,calc(.55 + var(--hero-scroll) * .30)) 100%),
    linear-gradient(180deg,
      rgba(10,8,6,.25) 0%,
      rgba(10,8,6,.05) 30%,
      rgba(10,8,6,.10) 70%,
      rgba(10,8,6,.78) 100%) !important;
}

.hero__strip{
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: clamp(40px, 7vh, 70px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(232, 200, 140, .82);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  opacity: 0;
  animation: heroStripIn 1.2s var(--ease-out) 1.4s forwards;
  pointer-events: none;
  text-align: center;
}
.hero__strip-loc{ color: var(--gold-hi); }
.hero__strip-cred{ color: var(--ink-mute); }
.hero__strip-sep{
  width: 1px;
  height: 12px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .6;
}
@keyframes heroStripIn{
  to { opacity: 1; }
}

@media (max-width: 720px){
  .hero__strip{
    flex-direction: column;
    gap: 10px;
    bottom: 90px;
    font-size: 9.5px;
    letter-spacing: .3em;
  }
  .hero__strip-sep{ display: none; }
}

/* ================================================================
   STRUCTURE / GALERIA — Editorial Mondrian grid (8 photos)
   ================================================================ */

.structure{
  padding: clamp(100px, 14vh, 160px) 0;
  position: relative;
  background: var(--bg);
}
/* Wrapper para conteúdo que precisa ficar centralizado dentro da seção full-bleed */
.structure__container{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

.structure__hdr{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 90px);
}
.structure__hdr-left{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.structure__hdr h2{
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 84px);
  line-height: .95;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
}
.structure__hdr h2 span{ display: block; }
.structure__hdr h2 .italic em{
  font-style: italic;
  font-weight: 400;
  color: var(--gold-hi);
}
.structure__lede{
  font-family: var(--ff-body);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-mute);
  max-width: 460px;
  margin: 0 0 6px 0;
  justify-self: end;
}

/* ----- Chips (category nav) — sticky, no mobile e desktop ------ */
/* Wrapper centralizado + segmented control com pill deslizante */
.structure__chips{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 6px;
  margin: 0 auto clamp(24px, 3vw, 40px);
  background:
    linear-gradient(180deg, rgba(30,22,15,.55), rgba(18,12,8,.55));
  border: 1px solid rgba(201,169,97,.18);
  border-radius: 999px;
  box-shadow: 0 14px 38px -22px rgba(0,0,0,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation: isolate;
  width: max-content;
}
/* Pill dourado que desliza entre os chips */
.structure__chips-pill{
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 0;            /* JS define width + transform */
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(232,200,120,.32), 0 0 0 1px rgba(232,200,120,.18) inset;
  transition: transform .55s cubic-bezier(.18,.8,.18,1), width .55s cubic-bezier(.18,.8,.18,1);
  z-index: 1;
  pointer-events: none;
  will-change: transform, width;
}

.structure__chip{
  position: relative;
  z-index: 2;
  background: transparent;
  border: 0;
  padding: 14px clamp(20px, 2.4vw, 34px);
  min-height: 44px;
  color: var(--ink-mute);
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -.002em;
  transition: color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.structure__chip:hover{ color: var(--ink); }
.structure__chip.is-active{
  color: var(--bg);
}
.structure__chip-label{
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1;
}

/* Wrapper externo para centralizar/scroll horizontal */
.structure__chips-wrap{
  display: flex;
  justify-content: center;
  position: sticky;
  top: calc(var(--nav-h) + 12px);
  z-index: 8;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  padding: 0 var(--pad);
}

/* ============================================================
   GALERIA — Hero + Thumbs + Lightbox
   ============================================================ */
.gallery__container{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ----- HERO (foto grande em destaque) -------------------------- */
.gallery__hero{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  cursor: zoom-in;
  margin: 0 0 clamp(16px, 2vw, 28px);
  padding: 0;
  display: block;
  isolation: isolate;
  transition: border-color .35s var(--ease);
}
.gallery__hero:hover{ border-color: var(--line); }
.gallery__hero-img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .4s var(--ease-out), transform 12s linear;
  transform: scale(1);
}
.gallery__hero:not(.is-fading) .gallery__hero-img{
  transform: scale(1.025); /* Ken-burns sutil ao longo de 12s */
}
.gallery__hero.is-fading .gallery__hero-img{ opacity: 0; transform: scale(1); transition: opacity .25s ease; }
.gallery__hero-overlay{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(22px, 3vw, 44px);
  background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  color: var(--ink);
  text-align: left;
  pointer-events: none;
  z-index: 2;
}
.gallery__hero-kicker{
  display: block;
  font-size: 11px; letter-spacing: .36em;
  color: var(--gold-hi);
  font-weight: 500;
  margin-bottom: 8px;
}
.gallery__hero-title{
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 38px);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.003em;
  margin: 0 0 8px;
  color: #fff;
}
.gallery__hero-desc{
  font-family: var(--ff-body);
  font-size: clamp(13px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 70ch;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- GRID DE THUMBS ------------------------------------------ */
.gallery__thumbs{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  transition: opacity .25s var(--ease);
}
.gallery__thumbs.is-fading{ opacity: 0; }

.gallery__thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--bg-2);
  cursor: pointer;
  padding: 0;
  outline: 0;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gallery__thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s var(--ease), filter .25s var(--ease);
  opacity: .82;
}
.gallery__thumb:hover img{ transform: scale(1.06); filter: brightness(1.12); opacity: 1; }
.gallery__thumb:focus-visible{
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 3px rgba(232,200,120,.35);
}
.gallery__thumb.is-active{
  border-color: var(--gold-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(232,200,120,.32);
}
.gallery__thumb.is-active img{ opacity: 1; }

/* Thumbs além de 6 ficam escondidos até clicar "Ver mais" */
.gallery__thumb.is-hidden{ display: none; }
.gallery__thumbs.is-expanded .gallery__thumb.is-hidden{
  display: block;
  animation: thumbFadeIn .4s var(--ease-out) both;
}
@keyframes thumbFadeIn{
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gallery__thumb::after{
  content: attr(data-kicker);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .22em;
  color: rgba(255,255,255,.95);
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  text-transform: uppercase;
}
.gallery__thumb:hover::after, .gallery__thumb:focus-visible::after{ opacity: 1; transform: translateY(0); }

/* ----- Botão "Ver mais" --------------------------------------- */
.gallery__actions{
  display: flex; justify-content: center;
  margin-top: clamp(20px, 2.5vw, 32px);
}
.gallery__viewall{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px; letter-spacing: .08em;
  color: var(--gold-hi);
  cursor: pointer;
  text-transform: uppercase;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.gallery__viewall:hover{
  background: var(--gold-hi);
  color: var(--bg);
  border-color: var(--gold-hi);
}
.gallery__viewall:active{ transform: scale(.97); }
.gallery__viewall svg{
  display: block;
  transition: transform .35s var(--ease);
}
/* Quando está expandido (modo "Ver menos"), gira a seta 180º */
.gallery__viewall.is-collapsed-state svg{
  transform: rotate(180deg);
}

/* ----- LIGHTBOX MODAL ----------------------------------------- */
.gallery__lightbox{
  position: fixed; inset: 0;
  background: rgba(5,4,3,.96);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(40px, 5vh, 60px) clamp(20px, 4vw, 60px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.gallery__lightbox.is-open{ display: flex; opacity: 1; }
.gallery__lb-img{
  max-width: 90vw;
  max-height: calc(88vh - 130px);
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  transition: opacity .2s var(--ease);
}
.gallery__lightbox.is-img-fading .gallery__lb-img{ opacity: 0; }

.gallery__lb-close, .gallery__lb-nav{
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gallery__lb-close:hover, .gallery__lb-nav:hover{
  background: var(--gold-hi);
  color: var(--bg);
  border-color: var(--gold-hi);
}
.gallery__lb-close:active, .gallery__lb-nav:active{ transform: scale(.94); }
.gallery__lb-close{ top: 22px; right: 22px; }
.gallery__lb-close:active{ transform: scale(.94); }
.gallery__lb-nav--prev{ left: clamp(14px, 2vw, 32px); top: 50%; transform: translateY(-50%); }
.gallery__lb-nav--next{ right: clamp(14px, 2vw, 32px); top: 50%; transform: translateY(-50%); }
.gallery__lb-nav:hover{ transform: translateY(-50%) scale(1); }
.gallery__lb-nav:active{ transform: translateY(-50%) scale(.94); }
.gallery__lb-close svg, .gallery__lb-nav svg{ display: block; }

.gallery__lb-counter{
  position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .3em;
  color: rgba(255,255,255,.7);
}
.gallery__lb-counter .lb-now{ color: var(--gold-hi); font-weight: 600; }

.gallery__lb-caption{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 30px;
  max-width: min(720px, 86vw);
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.gallery__lb-kicker{
  display: block;
  font-size: 11px; letter-spacing: .36em;
  color: var(--gold-hi);
  margin-bottom: 10px;
}
.gallery__lb-title{
  font-family: var(--ff-display);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.02; margin: 0 0 10px;
  letter-spacing: -.003em;
}
.gallery__lb-desc{
  font-family: var(--ff-body);
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,.85);
  margin: 0;
}

/* Data nodes — invisíveis sempre */
.gallery__data{ display: none !important; }

/* ----- Footnote ------------------------------------------------ */
.structure__footnote{
  display: flex;
  gap: 16px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 28px var(--pad) 0;
  border-top: 1px solid var(--line-2);
  max-width: 720px;
  box-sizing: content-box;
}
.structure__footnote .mono{
  color: var(--gold);
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1.4;
}
.structure__footnote p{
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-mute);
  margin: 0;
}

/* ----- Tablet -------------------------------------------------- */
@media (max-width: 960px){
  .gallery__thumbs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery__hero{ aspect-ratio: 4 / 3; max-height: 70vh; }
}

/* ----- Mobile -------------------------------------------------- */
@media (max-width: 720px){
  .structure__chips-wrap{
    top: calc(var(--nav-h) + 8px);
  }
  .structure__chips{
    padding: 5px;
    width: auto;
    max-width: calc(100vw - var(--pad) * 2);
  }
  .structure__chip{
    padding: 12px 14px;
  }
  .structure__chip-label{ font-size: 14px; }

  .gallery__container{ padding: 0; }
  .gallery__hero{
    aspect-ratio: 4 / 3;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .gallery__hero-overlay{ padding: 20px 18px 22px; }
  .gallery__hero-kicker{ font-size: 10px; letter-spacing: .3em; }
  .gallery__hero-title{ font-size: clamp(22px, 7vw, 30px); }
  .gallery__hero-desc{ font-size: 13px; -webkit-line-clamp: 3; }

  .gallery__thumbs{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 6px;
    padding: 0 var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery__thumbs::-webkit-scrollbar{ display: none; }
  .gallery__thumb{
    flex: 0 0 110px;
    scroll-snap-align: start;
  }
  .gallery__actions{ padding: 0 var(--pad); margin-top: 16px; }

  .gallery__lightbox{ padding: 60px 12px 90px; }
  .gallery__lb-close{ top: 14px; right: 14px; width: 44px; height: 44px; }
  .gallery__lb-counter{ top: 22px; font-size: 11px; }
  .gallery__lb-nav{ width: 44px; height: 44px; }
  .gallery__lb-nav--prev{ left: 10px; }
  .gallery__lb-nav--next{ right: 10px; }
  .gallery__lb-img{ max-height: calc(82vh - 130px); max-width: 96vw; }
  .gallery__lb-caption{ bottom: 16px; }
  .gallery__lb-title{ font-size: clamp(18px, 5vw, 24px); }
  .gallery__lb-desc{ font-size: 13px; line-height: 1.55; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gallery__hero-img,
  .gallery__hero:not(.is-fading) .gallery__hero-img{
    transition: opacity .2s linear;
    transform: none !important;
  }
  .gallery__thumb img{ transition: none; }
  .gallery__lightbox{ transition: none; }
  /* No reduce-motion: pausa hero ken-burns e quaisquer anims infinitas */
  .hero-slide,
  .hero-brand__halo{ animation: none !important; }
}

/* ============================================================
   PERFORMANCE — Mobile (≤720px)
   Reduz drasticamente a carga de GPU pra evitar crash em dispositivos modestos.
   ============================================================ */
@media (max-width: 720px){
  /* Canvas decorativo de grãos: pesado pra mobile, desativar */
  .bg-beans{ display: none !important; }

  /* Backdrop-filter blur é caríssimo no GPU mobile — remover dos elementos não-críticos */
  .structure__chips,
  .gallery__lightbox,
  .structure__nav,
  .lang,
  .gallery__lb-close,
  .gallery__lb-nav{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Logo hero mobile: sombra mais sutil ainda */
  .hero-brand__mark{
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.7));
  }

  /* Stat boxes (Por Dentro) — simplificar shadow */
  .stat:hover{ transform: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }

  /* will-change explicit pra elementos animados — força GPU layer só onde precisa */
  .hero-slide.is-active{ will-change: opacity; }
}

/* Mobile pequeno (≤480px): cortes ainda mais agressivos pra evitar crash */
@media (max-width: 480px){
  .hero-brand__halo{ display: none; }
  .stat::before{ display: none; }  /* gradient border decorativo */
}