/* =========================================================
   CONECTANDO A SERRA — Serra Catarinense
   Design system + cenas ilustradas + animações
   ========================================================= */

:root{
  /* Paleta — amanhecer sobre montanhas frias (quente + frio) */
  --night:   #0e1613;
  --night-2: #131f19;
  --pine:    #182a20;
  --moss:    #274531;
  --sage:    #7c9a78;
  --mist:    #b3c5b6;
  --cream:   #f6eee1;
  --cream-d: #c8bda9;

  --gold:    #ecc079;   /* dourado champanhe */
  --amber:   #e79a52;   /* âmbar quente */
  --amber-2: #db6f3f;   /* brasa */
  --ember:   #db6f3f;
  --rose:    #e6a582;   /* rosa do alvorecer */
  --glacier: #9ab8c4;   /* acento frio (serra) */

  --sky-top: #16233a;
  --sky-mauve:#5b4a63;
  --sky-rose: #c97e5b;
  --sky-hi:  #f0b968;

  --ink: var(--cream);
  --bg:  var(--night);

  --maxw: 1240px;
  --gut:  clamp(20px, 5vw, 72px);
  --radius: 20px;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  overflow-x:hidden; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber); color:var(--night); }

/* ---------- Grão de filme ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Barra de progresso ---------- */
.scrollbar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9997; pointer-events:none; }
.scrollbar span{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--amber-2),var(--gold)); box-shadow:0 0 14px var(--amber); }

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--night);
  display:grid; place-items:center; overflow:hidden;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.preloader__scene{ position:absolute; inset:0; overflow:hidden; }
.preloader__sun{
  position:absolute; left:50%; bottom:34%; width:min(46vw,360px); aspect-ratio:1; transform:translate(-50%,50%);
  border-radius:50%;
  background:radial-gradient(circle, var(--gold), var(--amber) 42%, rgba(240,160,58,0) 68%);
  animation:preSun 2.2s var(--ease) forwards; filter:blur(2px);
}
@keyframes preSun{ from{ transform:translate(-50%,90%); opacity:.2 } to{ transform:translate(-50%,20%); opacity:1 } }
.preloader__ridge{
  position:absolute; left:0; right:0; bottom:30%; height:34%;
  background:linear-gradient(180deg,#0c1610,#070d09);
  clip-path:polygon(0 60%,12% 30%,24% 55%,38% 18%,52% 52%,66% 22%,80% 50%,92% 28%,100% 55%,100% 100%,0 100%);
}
.preloader__wordmark{
  position:relative; z-index:2; display:flex; gap:.02em;
  font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,6vw,3rem); letter-spacing:.18em;
  color:var(--cream);
}
.preloader__wordmark span{ opacity:0; transform:translateY(1.1em); animation:preLetter .7s var(--ease) forwards; }
.preloader__wordmark span:nth-child(1){animation-delay:.05s}
.preloader__wordmark span:nth-child(2){animation-delay:.1s}
.preloader__wordmark span:nth-child(3){animation-delay:.15s}
.preloader__wordmark span:nth-child(4){animation-delay:.2s}
.preloader__wordmark span:nth-child(5){animation-delay:.25s}
.preloader__wordmark span:nth-child(6){animation-delay:.3s}
.preloader__wordmark span:nth-child(7){animation-delay:.35s}
.preloader__wordmark span:nth-child(8){animation-delay:.4s}
.preloader__wordmark span:nth-child(9){animation-delay:.45s}
.preloader__wordmark span:nth-child(10){animation-delay:.5s}
@keyframes preLetter{ to{ opacity:1; transform:translateY(0) } }
.preloader__count{
  position:absolute; bottom:8%; right:var(--gut); z-index:2;
  font-family:var(--serif); font-size:clamp(2rem,9vw,4.5rem); color:var(--cream); line-height:1;
}
.preloader__count i{ font-size:.4em; font-style:normal; color:var(--amber); vertical-align:top; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut); transition:padding .4s var(--ease), background .4s, backdrop-filter .4s;
}
.nav.solid{
  padding:14px var(--gut);
  background:rgba(11,20,16,.72); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav__brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
.nav__mark{ color:var(--amber); display:grid; place-items:center; }
.nav__name{ font-family:var(--serif); font-weight:500; font-size:1.12rem; line-height:.98; letter-spacing:.01em; }
.nav__name em{ display:block; font-style:italic; font-weight:400; font-size:.72em; color:var(--sage); letter-spacing:.16em; text-transform:uppercase; }

.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav__links > a[data-nav]{ position:relative; font-size:.92rem; font-weight:500; color:var(--cream-d); padding:4px 0; }
.nav__links > a[data-nav]::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0; background:var(--amber); transition:width .4s var(--ease); }
.nav__links > a[data-nav]:hover{ color:var(--cream); }
.nav__links > a[data-nav]:hover::after{ width:100%; }

.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:100px; font-weight:600; font-size:.9rem; color:var(--night);
  background:linear-gradient(120deg,var(--gold),var(--amber));
  box-shadow:0 8px 26px -10px var(--amber); transition:transform .3s var(--ease), box-shadow .3s;
}
.nav__cta:hover{ box-shadow:0 14px 34px -10px var(--amber); }
.nav__cta svg path{ stroke:var(--night); }

.nav__burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; position:relative; }
.nav__burger span{ position:absolute; left:10px; right:10px; height:2px; background:var(--cream); border-radius:2px; transition:.35s var(--ease); }
.nav__burger span:nth-child(1){ top:17px; } .nav__burger span:nth-child(2){ bottom:17px; }
.nav__burger.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav__burger.open span:nth-child(2){ bottom:21px; transform:rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__scene{ position:absolute; inset:0; z-index:0; }
.sky{ position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 95%, rgba(240,175,95,.42), transparent 56%),
    radial-gradient(90% 60% at 78% 30%, rgba(154,184,196,.14), transparent 60%),
    linear-gradient(180deg, var(--sky-top) 0%, #223150 20%, #4b4560 42%, #8a5f5e 62%, var(--sky-rose) 80%, var(--sky-hi) 100%);
}
.sun{
  position:absolute; left:50%; bottom:16%; width:min(52vw,520px); aspect-ratio:1;
  transform:translate(-50%,50%); border-radius:50%;
  background:radial-gradient(circle, #fff6e2, var(--gold) 32%, var(--amber) 54%, rgba(231,154,82,0) 72%);
  filter:blur(1px); opacity:0; animation:heroSun 2.6s .3s var(--ease) forwards;
}
@keyframes heroSun{ from{ transform:translate(-50%,80%); opacity:0 } to{ transform:translate(-50%,32%); opacity:1 } }
.haze{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(11,20,16,.15) 62%, rgba(11,20,16,.86) 100%); }

.range{ position:absolute; left:-4%; right:-4%; bottom:0; width:108%; z-index:1; will-change:transform; }
.range svg{ width:100%; height:auto; display:block; }
.range--4{ bottom:20%; opacity:.55; } .range--4 svg path{ fill:#33546a; }
.range--3{ bottom:12%; opacity:.7; }  .range--3 svg path{ fill:#28414a; }
.range--2{ bottom:5%; }               .range--2 svg path{ fill:#152b26; }
.range--1{ bottom:0; }                .range--1 svg path{ fill:#0a1410; }

.fog{ position:absolute; left:-10%; right:-10%; height:26%; z-index:1; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(219,229,224,.5), transparent 70%);
  filter:blur(14px); }
.fog--far{ bottom:16%; opacity:.5; animation:drift 26s linear infinite; }
.fog--mid{ bottom:8%; opacity:.65; animation:drift 34s linear infinite reverse; }
@keyframes drift{ 0%{ transform:translateX(-6%) } 50%{ transform:translateX(6%) } 100%{ transform:translateX(-6%) } }

.birds{ position:absolute; top:24%; left:16%; z-index:2; color:rgba(20,30,26,.6); display:flex; gap:16px;
  animation:fly 22s linear infinite; }
.birds svg{ width:40px; animation:flap 1.6s ease-in-out infinite; }
.birds svg:nth-child(2){ transform:translateY(-10px) scale(.7); animation-delay:.2s }
.birds svg:nth-child(3){ transform:translateY(6px) scale(.85); animation-delay:.4s }
@keyframes fly{ from{ transform:translate(-10vw,0) } to{ transform:translate(80vw,-4vh) } }
@keyframes flap{ 50%{ transform:translateY(-3px) } }

.hero__content{ position:relative; z-index:5; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) clamp(90px,12vh,140px); }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:22px; }
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.4; transform:scale(.8) } }

.hero__title{ font-family:var(--serif); font-weight:400; line-height:.94;
  font-size:clamp(3.2rem, 11vw, 8.6rem); letter-spacing:-.02em; margin-bottom:26px; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; transform:translateY(115%); }
.hero__title .line--serif{ color:var(--gold); }
.hero__title .line--serif i{ font-style:italic; color:var(--cream); }

.hero__lede{ max-width:56ch; font-size:clamp(1rem,1.5vw,1.18rem); color:var(--cream-d); opacity:0; transform:translateY(20px); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; opacity:0; transform:translateY(20px); }

.hero__scroll{ position:absolute; right:var(--gut); bottom:40px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-d); writing-mode:vertical-rl; }
.hero__scroll i{ width:1.5px; height:54px; background:linear-gradient(var(--amber),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--gold); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-100%) } 100%{ transform:translateY(260%) } }

/* animação hero via classe .ready */
.hero.ready .hero__title .line > span{ transform:translateY(0); transition:transform 1s var(--ease); }
.hero.ready .hero__title .line:nth-child(1) > span{ transition-delay:.15s }
.hero.ready .hero__title .line:nth-child(2) > span{ transition-delay:.28s }
.hero.ready .hero__title .line:nth-child(3) > span{ transition-delay:.41s }
.hero.ready .hero__lede,
.hero.ready .hero__actions{ opacity:1; transform:none; transition:opacity .9s .6s var(--ease), transform .9s .6s var(--ease); }
.hero.ready .hero__actions{ transition-delay:.72s; }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:100px; font-weight:600; font-size:.98rem; letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s; overflow:hidden; }
.btn span{ position:relative; z-index:2; }
.btn--lg{ padding:18px 40px; font-size:1.05rem; }
.btn--solid{ background:linear-gradient(120deg,var(--gold),var(--amber)); color:var(--night);
  box-shadow:0 12px 34px -12px var(--amber); }
.btn--solid::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,var(--amber-2),var(--gold)); opacity:0; transition:opacity .4s; z-index:1; }
.btn--solid:hover::before{ opacity:1; }
.btn--solid:hover{ box-shadow:0 20px 44px -14px var(--amber); }
.btn--ghost{ border:1.5px solid rgba(243,236,224,.28); color:var(--cream); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(255,255,255,.04); }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--night-2); padding:20px 0; }
.marquee__track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; animation:marq 34s linear infinite; }
.marquee__track span{ font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3vw,2.2rem); color:var(--cream); }
.marquee__track em{ color:var(--amber); font-size:.7em; font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* =========================================================
   SECTION HEADS + reveal
   ========================================================= */
section{ position:relative; }
.manifesto, .destinos, .exp, .stats, .galeria, .sobre, .cta{ padding:clamp(80px,12vh,160px) var(--gut); max-width:var(--maxw); margin:0 auto; }

.section-head{ max-width:760px; margin-bottom:clamp(40px,6vw,72px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head__idx{ display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--glacier); margin-bottom:18px; }
.section-head__title{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(2.2rem,6vw,4.4rem); }
.section-head__title em{ font-style:italic; color:var(--gold); }
.section-head__sub{ margin-top:20px; font-size:clamp(1rem,1.5vw,1.15rem); color:var(--cream-d); max-width:56ch; }
.section-head--center .section-head__sub{ margin-inline:auto; }

[data-reveal]{ opacity:0; transform:translateY(38px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }

/* =========================================================
   MANIFESTO
   ========================================================= */
.manifesto{ text-align:center; }
.manifesto__kicker{ font-size:.8rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--sage); margin-bottom:26px; }
.manifesto__text{ font-family:var(--serif); font-weight:300; line-height:1.24; letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.4vw,3.6rem); max-width:16ch; margin:0 auto; }
.manifesto__text [data-word]{ display:inline-block; opacity:.12; transition:opacity .5s var(--ease), color .5s; }
.manifesto__text [data-word].lit{ opacity:1; }
.manifesto__text .hl{ font-style:italic; }
.manifesto__text .hl.lit{ color:var(--gold); }

/* =========================================================
   CENAS ILUSTRADAS (cards de destino)
   Cada .dcard__scene é uma paisagem gerada só com CSS.
   ========================================================= */
.dgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(16px,2vw,26px); }
.dcard{ grid-column:span 3; position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end; isolation:isolate; border:1px solid rgba(255,255,255,.06);
  transform-style:preserve-3d; transition:box-shadow .5s var(--ease); }
.dcard--tall{ grid-column:span 3; grid-row:span 2; min-height:500px; }
.dcard--wide{ grid-column:span 6; min-height:360px; }
.dcard:hover{ box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }

.dcard__scene{ position:absolute; inset:0; z-index:-1; overflow:hidden; transition:transform 1.1s var(--ease); }
.dcard:hover .dcard__scene{ transform:scale(1.06); }
.dcard__scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(8,14,10,.35) 55%,rgba(8,14,10,.94) 100%); z-index:5; }

.dcard__body{ position:relative; z-index:6; padding:clamp(22px,3vw,34px); }
.dcard__idx{ font-family:var(--serif); font-size:.9rem; color:var(--gold); letter-spacing:.1em; }
.dcard__body h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.04; margin:6px 0 10px; }
.dcard__body p{ color:var(--cream-d); font-size:.98rem; max-width:44ch; }
.dcard__tag{ display:inline-block; margin-top:16px; padding:7px 14px; border-radius:100px;
  font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(255,208,122,.32); background:rgba(255,208,122,.06); }

/* peças reutilizáveis de cena */
.s-sun{ position:absolute; left:66%; top:30%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,#fff2cf,var(--gold) 34%,var(--amber) 55%,transparent 72%); filter:blur(1px); }
.s-ridge{ position:absolute; left:-5%; right:-5%; bottom:0; height:60%; }
.s-ridge.b{ height:66%; background:#3a5568; clip-path:polygon(0 55%,18% 30%,34% 52%,50% 22%,68% 48%,84% 26%,100% 50%,100% 100%,0 100%); }
.s-ridge.m{ height:48%; background:#1f3a34; clip-path:polygon(0 60%,20% 38%,40% 60%,60% 32%,80% 58%,100% 40%,100% 100%,0 100%); }
.s-ridge.f{ height:32%; background:#0b1712; clip-path:polygon(0 70%,25% 46%,50% 72%,75% 44%,100% 68%,100% 100%,0 100%); }

/* São Joaquim — neve, tons frios */
.scene--joaquim{ background:linear-gradient(180deg,#20364a,#6b6a72 55%,#c98f57); }
.scene--joaquim .s-sun{ opacity:.85; }
.scene--joaquim .s-ridge.b{ background:#5d7286; } .scene--joaquim .s-ridge.m{ background:#33485a; }
.scene--joaquim .s-snow{ position:absolute; inset:0; background:
  radial-gradient(2px 2px at 20% 30%, #fff, transparent),
  radial-gradient(2px 2px at 70% 20%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 45% 40%, #fff, transparent),
  radial-gradient(2px 2px at 85% 50%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent);
  opacity:.8; animation:snow 6s linear infinite; }
@keyframes snow{ from{ background-position:0 0,0 0,0 0,0 0,0 0 } to{ background-position:0 60px,0 80px,0 50px,0 70px,0 90px } }

/* Rio do Rastro — estrada dourada */
.scene--rastro{ background:linear-gradient(180deg,#2a2036,#7a4a3a 55%,#f0a03a); }
.scene--rastro .s-road{ position:absolute; left:50%; bottom:0; width:70%; height:70%;
  background:linear-gradient(180deg,transparent, #d68a3e);
  clip-path:polygon(44% 0,56% 0,90% 100%,10% 100%); transform:translateX(-50%); opacity:.5;
  mask:repeating-linear-gradient(180deg,#000 0 18px, transparent 18px 30px); }

/* Urubici — verde + cascata */
.scene--urubici{ background:linear-gradient(180deg,#14314a,#2f6b4e 60%,#8ab469); }
.scene--urubici .s-ridge.b{ background:#2f6b4e; } .scene--urubici .s-ridge.m{ background:#1c4433; }
.scene--urubici .s-fall{ position:absolute; left:52%; top:34%; width:8px; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.1));
  filter:blur(1px); border-radius:6px; animation:fall 2s linear infinite; }
@keyframes fall{ 0%{ opacity:.5 } 50%{ opacity:1 } 100%{ opacity:.5 } }

/* Cânion — paredões */
.scene--canion{ background:linear-gradient(180deg,#20344a,#c98a4d); }
.scene--canion .s-canion{ position:absolute; bottom:0; width:56%; height:88%; background:linear-gradient(180deg,#3a6047,#0d1c14); }
.scene--canion .s-canion.l{ left:-6%; clip-path:polygon(0 30%,70% 42%,86% 66%,60% 100%,0 100%); }
.scene--canion .s-canion.r{ right:-6%; clip-path:polygon(30% 44%,100% 26%,100% 100%,40% 100%,14% 68%); }
.scene--canion .s-mist{ position:absolute; left:20%; right:20%; bottom:6%; height:24%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(220,230,225,.55),transparent 72%); filter:blur(10px);
  animation:drift 20s ease-in-out infinite; }

/* =========================================================
   EXPERIÊNCIAS (sticky)
   ========================================================= */
.exp{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,80px); align-items:start; }
.exp__sticky{ position:sticky; top:120px; }
.exp__title{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.02em; font-size:clamp(2.2rem,5vw,4rem); margin:14px 0 16px; }
.exp__title em{ font-style:italic; color:var(--gold); }
.exp__sub{ color:var(--cream-d); }
.exp__list{ display:flex; flex-direction:column; gap:14px; }
.exp__item{ display:grid; grid-template-columns:auto auto 1fr; gap:18px; align-items:start;
  padding:26px clamp(20px,2.6vw,32px); border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); transition:transform .5s var(--ease), border-color .5s, background .5s; }
.exp__item:hover{ transform:translateY(-4px); border-color:rgba(255,208,122,.35); background:linear-gradient(180deg,rgba(255,208,122,.07),rgba(255,255,255,.01)); }
.exp__num{ font-family:var(--serif); font-size:1rem; color:var(--sage); }
.exp__ico{ font-size:1.6rem; line-height:1; }
.exp__item h3{ font-family:var(--serif); font-weight:500; font-size:1.4rem; margin-bottom:6px; }
.exp__item p{ color:var(--cream-d); font-size:.97rem; }

/* =========================================================
   STATS
   ========================================================= */
.stats{ border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07); }
.stats__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,50px); text-align:center; }
.stat strong{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:1;
  background:linear-gradient(120deg,var(--gold),var(--amber-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; margin-top:12px; font-size:.9rem; letter-spacing:.05em; color:var(--cream-d); text-transform:uppercase; }

/* =========================================================
   GALERIA (masonry)
   ========================================================= */
.masonry{ columns:3; column-gap:clamp(14px,1.6vw,22px); }
.mtile{ break-inside:avoid; margin-bottom:clamp(14px,1.6vw,22px); position:relative; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06); }
.mtile figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px 18px;
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--cream);
  background:linear-gradient(transparent,rgba(8,14,10,.85)); opacity:0; transform:translateY(8px); transition:.5s var(--ease); }
.mtile:hover figcaption{ opacity:1; transform:none; }
.ph{ width:100%; transition:transform 1s var(--ease); }
.mtile:hover .ph{ transform:scale(1.07); }
/* placeholders art-directed (troque por <img>) */
.ph--a{ aspect-ratio:3/4; background:linear-gradient(160deg,#20344a,#c98a4d); }
.ph--b{ aspect-ratio:1/1;  background:linear-gradient(160deg,#2a2036,#f0a03a); }
.ph--c{ aspect-ratio:4/5; background:linear-gradient(160deg,#20364a,#c98f57); }
.ph--d{ aspect-ratio:3/4; background:linear-gradient(160deg,#14314a,#8ab469); }
.ph--e{ aspect-ratio:1/1;  background:linear-gradient(160deg,#3a2a1e,#e0954a); }
.ph--f{ aspect-ratio:4/5; background:linear-gradient(160deg,#16281c,#6d8f6a); }
.ph{ position:relative; }
.ph::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 60% at 60% 30%,rgba(255,220,150,.28),transparent 60%),
            radial-gradient(60% 40% at 30% 90%,rgba(0,0,0,.4),transparent 70%); }

/* =========================================================
   SOBRE
   ========================================================= */
.sobre{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,80px); align-items:center; }
.sobre__card{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9); }
.sobre__scene{ position:absolute; inset:0; background:linear-gradient(180deg,#16324a,#2f6b4e 58%,#e0954a); }
.sobre__scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(8,14,10,.5)); }
.sobre__badge{ position:absolute; left:22px; bottom:22px; z-index:3; display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-radius:16px; background:rgba(11,20,16,.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); }
.sobre__badge svg{ color:var(--amber); } .sobre__badge span{ font-family:var(--serif); font-size:1rem; line-height:1.1; }
.sobre__text h2{ font-family:var(--serif); font-weight:400; line-height:1.04; letter-spacing:-.02em; font-size:clamp(2rem,4.6vw,3.6rem); margin:14px 0 20px; }
.sobre__text h2 em{ font-style:italic; color:var(--gold); }
.sobre__text p{ color:var(--cream-d); margin-bottom:16px; max-width:52ch; }
.sobre__text b{ color:var(--cream); font-weight:600; }
.sobre__list{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.sobre__list li{ display:flex; align-items:center; gap:12px; font-size:1rem; color:var(--cream); }
.sobre__list li span{ color:var(--amber); }

/* =========================================================
   CTA
   ========================================================= */
.cta{ text-align:center; overflow:hidden; }
.cta__glow{ position:absolute; left:50%; top:20%; width:min(80vw,700px); aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(240,160,58,.28),transparent 60%); filter:blur(30px); z-index:-1; }
.cta__kicker{ font-size:.82rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin-bottom:22px; }
.cta__title{ font-family:var(--serif); font-weight:400; line-height:1.02; letter-spacing:-.02em; font-size:clamp(2.4rem,7vw,5.4rem); }
.cta__title em{ font-style:italic; color:var(--gold); }
.cta__sub{ margin:22px auto 0; max-width:52ch; color:var(--cream-d); font-size:1.1rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:38px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid rgba(255,255,255,.08); padding:clamp(50px,7vw,90px) var(--gut) 40px; background:var(--night-2); }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
.footer__brand .nav__mark{ color:var(--amber); }
.footer__brand h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:14px 0 8px; }
.footer__brand p{ color:var(--cream-d); max-width:40ch; }
.footer__nav{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer__nav a{ color:var(--cream-d); transition:color .3s, transform .3s; }
.footer__nav a:hover{ color:var(--gold); transform:translateX(4px); }
.footer__base{ max-width:var(--maxw); margin:50px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.85rem; color:var(--cream-d); }
.footer__base i{ color:var(--amber); font-style:normal; }
.footer__base a{ color:var(--gold); }

/* =========================================================
   MENU MOBILE (overlay)
   ========================================================= */
@media (max-width:900px){
  .nav__burger{ display:block; z-index:9100; }
  .nav__links{
    position:fixed; inset:0; z-index:9050; flex-direction:column; justify-content:center; gap:26px;
    background:rgba(9,16,12,.96); backdrop-filter:blur(16px);
    clip-path:circle(0% at calc(100% - 42px) 42px); transition:clip-path .6s var(--ease); }
  .nav__links.open{ clip-path:circle(150% at calc(100% - 42px) 42px); }
  .nav__links > a[data-nav]{ font-family:var(--serif); font-size:2rem; color:var(--cream); }
  .nav__cta{ margin-top:10px; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .exp{ grid-template-columns:1fr; } .exp__sticky{ position:static; }
  .sobre{ grid-template-columns:1fr; } .sobre__card{ max-width:440px; }
  .masonry{ columns:2; }
}
@media (max-width:760px){
  .dgrid{ grid-template-columns:1fr; }
  .dcard, .dcard--tall, .dcard--wide{ grid-column:span 1; grid-row:auto; min-height:360px; }
  .stats__row{ grid-template-columns:repeat(2,1fr); gap:36px 20px; }
  .hero__scroll{ display:none; }
  .footer__top{ grid-template-columns:1fr; }
  .masonry{ columns:1; }
  .hero__content{ padding-bottom:120px; }
}
@media (max-width:420px){
  .hero__title{ font-size:3rem; }
}

/* =========================================================
   ACESSIBILIDADE — reduzir movimento
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__title .line > span{ transform:none !important; }
  .hero__lede,.hero__actions{ opacity:1 !important; transform:none !important; }
  .manifesto__text [data-word]{ opacity:1 !important; }
}