/* =========================================================
   INSTITUTO MILHOMEM — Transplante capilar de alto padrão
   Paleta: ônix · café · ouro clássico · marfim
   Tipos: Times New Roman (títulos) · Sora (texto)
   ========================================================= */

:root{
  --onix:#0a0806;
  --onix-2:#120d09;
  --cafe:#22170f;
  --cafe-2:#3a2819;
  --bronze:#b8997a;
  --ouro:#dcbe9f;
  --ouro-2:#e6cfb6;
  --ouro-claro:#f1e3d3;
  --marfim:#f3ebdd;
  --texto:#e9dfcf;
  --texto-2:#bcae98;
  --linha:rgba(220,190,159,.22);

  --grad-ouro:linear-gradient(100deg,#dcbe9f 0%,#e6d0b8 22%,#f3e7da 42%,#fbf6f0 50%,#ead8c4 62%,#dcbe9f 100%);
  --grad-ouro-v:linear-gradient(180deg,#fbf6f0 0%,#ead8c4 45%,#dcbe9f 100%);

  --serif:"Times New Roman",Times,"Liberation Serif","Nimbus Roman",serif;
  --sans:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  --r-lg:32px;
  --r-md:22px;
  --ease:cubic-bezier(.2,.7,.1,1);

  --fs-body:1.125rem;     /* 18px */
  --fs-small:1rem;        /* 16px */
  --fs-label:.9375rem;    /* 15px */
  --fs-h1:clamp(2.7rem,5.2vw,5.4rem);
  --fs-h2:clamp(2.5rem,5vw,5rem);
  --fs-h3:clamp(1.6rem,2.3vw,2.2rem);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--onix)}
body{
  margin:0;background:var(--onix);color:var(--texto);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.7;font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,canvas{display:block;max-width:100%}
/* As <img> trazem width/height no HTML para o navegador reservar o espaco e a pagina
   nao dar salto (CLS). Esses atributos entram como dica de apresentacao, e o CSS so
   sobrescreve a propriedade que ele declara — entao numa regra com `width:70px` e
   sem `height`, o height do atributo VENCE e a imagem estica. Este `height:auto`
   fecha o caso de uma vez: perde para qualquer altura declarada de verdade no CSS
   (que tem especificidade maior) e ganha da dica do atributo. A proporcao continua
   vindo dos atributos, entao o ganho de CLS se mantem. */
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--ouro);color:var(--onix)}
:focus-visible{outline:2px solid var(--ouro-2);outline-offset:4px;border-radius:8px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--marfim);margin:0;line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.15}
p{margin:0;text-wrap:pretty}
em,.it{font-style:italic}
.gold{background:var(--grad-ouro);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gold-anim{animation:shine 7s linear infinite}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:220% 50%}}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-2);
}
.eyebrow::before{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro))}
.lead{font-size:clamp(1.15rem,1.4vw,1.3rem);color:var(--texto);line-height:1.7;max-width:62ch}
.muted{color:var(--texto-2)}

.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* grain */
/* inset:-6% cobre o deslocamento de ±3% da animação. Antes era -50%, o que fazia uma
   camada de 4x a área da tela ser composta em cima da página inteira a cada quadro —
   no macOS passa liso, no Windows é justamente o que engasga. Aparência idêntica. */
.grain{position:fixed;inset:-6%;z-index:90;pointer-events:none;opacity:.07;contain:strict;will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ============ LIQUID GLASS ============ */
.glass{
  position:relative;isolation:isolate;
  background:linear-gradient(145deg,rgba(250,244,236,.11) 0%,rgba(250,244,236,.035) 40%,rgba(250,244,236,.06) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%);
  border:1px solid rgba(240,226,210,.16);
  border-radius:var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 40px rgba(235,215,195,.035),
    0 40px 80px -30px rgba(0,0,0,.75);
}
.glass::before{ /* reflexo especular que segue o mouse */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(240,226,210,.16),transparent 55%);
  transition:opacity .4s;
}
.glass::after{ /* borda com brilho dourado */
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(239,224,207,.55),rgba(239,224,207,0) 30%,rgba(239,224,207,0) 70%,rgba(220,190,159,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}

/* ============ BOTÕES ============ */
.btn{
  --h:60px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:var(--h);padding:0 28px;border-radius:999px;border:0;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  white-space:nowrap;
}
.btn-gold{color:#1b1108;background:var(--grad-ouro);background-size:200% 100%;background-position:30% 50%;
  box-shadow:0 18px 40px -14px rgba(220,190,159,.65),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(90,55,20,.35)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.65) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 24px 50px -14px rgba(220,190,159,.8),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-glass{color:var(--marfim);background:rgba(250,244,236,.07);border:1px solid rgba(240,226,210,.22);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn-glass:hover{background:rgba(250,244,236,.14);transform:translateY(-2px)}
.btn .arr{width:22px;height:22px;flex:none;transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ============ PRELOADER ============ */
.preloader{position:fixed;inset:0;z-index:200;background:var(--onix);display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s}
.preloader.done{opacity:0;visibility:hidden}
.preloader-in{display:grid;justify-items:center;gap:26px}
.preloader img{width:92px;height:auto;animation:breath 2.2s ease-in-out infinite}
.preloader .pl-line{width:180px;height:1px;background:rgba(220,190,159,.18);overflow:hidden;position:relative}
.preloader .pl-line i{position:absolute;inset:0;background:var(--grad-ouro);transform-origin:left;transform:scaleX(0);transition:transform .4s}
.preloader span{font-size:var(--fs-label);letter-spacing:.3em;text-transform:uppercase;color:var(--texto-2)}
@keyframes breath{50%{transform:scale(1.06);filter:drop-shadow(0 0 22px rgba(220,190,159,.45))}}

/* ============ HEADER ============ */
.header{position:fixed;top:14px;left:0;right:0;z-index:80;padding-inline:var(--gutter);pointer-events:none;transition:transform .6s var(--ease)}
.header.hide{transform:translateY(-260%)}
.header-in{pointer-events:auto;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px 10px 10px 26px;border-radius:999px}
.header .logo img{height:40px;width:auto}
.nav{display:flex;gap:30px}
.nav a{font-size:var(--fs-label);font-weight:400;letter-spacing:.04em;color:var(--texto);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-ouro);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header .btn{--h:50px;padding:0 24px;font-size:.9375rem}
.burger{display:none;width:50px;height:50px;border-radius:50%;border:1px solid rgba(240,226,210,.22);background:rgba(250,244,236,.06);place-items:center}
.burger span{display:block;width:20px;height:1.5px;background:var(--marfim);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--marfim);transition:transform .4s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:79;display:grid;align-content:center;gap:10px;padding:100px var(--gutter) 40px;
  background:rgba(10,8,6,.72);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.menu-open .mnav{opacity:1;visibility:visible}
.mnav a{font-family:var(--serif);font-size:2.4rem;color:var(--marfim);padding:6px 0;border-bottom:1px solid var(--linha)}
.mnav .btn{margin-top:24px;font-family:var(--sans)}

/* ============ HERO — PORTAL ============ */
/* overflow-anchor:none — o ajuste automático de rolagem do navegador brigava com as
   cenas de scroll quando a altura da página mudava (imagens lazy), e isso tremia. */
.hero-area,.tunnel,.plan,.hair3d,.results,.reveal-band,.journey,.balance,.donor,.final{overflow-anchor:none}
.hero-area{position:relative;height:330vh}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;overflow-anchor:none;--px:67%;--py:52%;--r:min(18vw,29vh)}
.hero-world{position:absolute;inset:0;z-index:0;overflow:hidden}
/* object-position mais baixo: mostra menos parede no topo e não corta o lettering da fachada */
.hero-world img{width:100%;height:100%;object-fit:cover;object-position:50% 86%;transform:scale(1.35);transform-origin:var(--px) var(--py);will-change:transform}
.hero-world::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at var(--px) var(--py),transparent 30%,rgba(10,8,6,.75) 100%),
  linear-gradient(180deg,rgba(10,8,6,.2),rgba(10,8,6,.1) 50%,rgba(10,8,6,.85))}
.world-copy{position:absolute;z-index:2;left:50%;bottom:5vh;translate:-50% 0;width:min(920px,calc(100% - 2*var(--gutter)));text-align:center;opacity:0;padding:34px clamp(22px,4vw,56px) 38px;display:grid;justify-items:center}
.world-copy p.big{font-family:var(--serif);font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1.08;color:var(--marfim);text-wrap:balance;text-shadow:0 10px 40px rgba(0,0,0,.6)}
.world-copy .eyebrow{margin-bottom:14px}

.hero-bg{position:absolute;inset:0;z-index:1;transform-origin:var(--px) var(--py);will-change:transform}
.hero-frame{position:absolute;inset:0;
  background:var(--onix);
  -webkit-mask:radial-gradient(circle at var(--px) var(--py),transparent var(--r),#000 calc(var(--r) + 1px));
          mask:radial-gradient(circle at var(--px) var(--py),transparent var(--r),#000 calc(var(--r) + 1px))}
.hero-frame .silk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:sepia(.35) saturate(1.2)}
.hero-frame canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--px) var(--py),transparent calc(var(--r)*1.05),rgba(10,8,6,.35) calc(var(--r)*1.6),rgba(10,8,6,.85) 100%)}
.portal-ring{position:absolute;left:var(--px);top:var(--py);width:calc(var(--r)*2 + 18px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none}
.portal-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;
  background:conic-gradient(from var(--a,0deg),#dcbe9f,#f3e7da,#dcbe9f,#fbf6f0,#e3c9ae,#f1e3d3,#dcbe9f);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 18px rgba(220,190,159,.5));animation:spin 14s linear infinite}
.portal-ring::after{content:"";position:absolute;inset:-26px;border-radius:50%;border:1px solid rgba(220,190,159,.25)}
.portal-ring svg{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);animation:spinr 60s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
@keyframes spinr{to{transform:rotate(-360deg)}}

/* ---- Prévia do portal: logo animada (celular e desktop) ---- */
.portal-logo{position:absolute;z-index:2;left:var(--px);top:var(--py);
  width:calc(var(--r)*2 + 2px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;
  will-change:opacity,transform;transform-origin:50% 50%}
.pl-veil{position:absolute;inset:-1px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#1d140d 0%,#120c08 55%,#070504 100%)}
.pl-veil::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,transparent 58%,rgba(220,190,159,.16) 100%)}
.pl-stack{position:relative;display:grid;justify-items:center;gap:calc(var(--r)*.115)}
.pl-mark,.pl-word{display:block;position:relative;overflow:hidden;background:var(--grad-ouro-v)}
.pl-mark{width:calc(var(--r)*.84);aspect-ratio:270/262;
  -webkit-mask:url(../assets/img/logo-mark.png) center/contain no-repeat;
          mask:url(../assets/img/logo-mark.png) center/contain no-repeat}
.pl-word{width:calc(var(--r)*1.34);aspect-ratio:764/156;
  -webkit-mask:url(../assets/img/logo-word.png) center/contain no-repeat;
          mask:url(../assets/img/logo-word.png) center/contain no-repeat}
/* brilho que atravessa o dourado */
.pl-mark::after,.pl-word::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:44%;
  background:linear-gradient(100deg,transparent,rgba(255,253,249,.95),transparent)}
@keyframes plMarkIn{from{opacity:0;transform:translateY(10%) scale(.84)}to{opacity:1;transform:none}}
@keyframes plWordIn{from{opacity:0;clip-path:inset(0 47% 0 47%)}to{opacity:1;clip-path:inset(0 -3% 0 -3%)}}
@keyframes plShine{0%{left:-70%}45%{left:124%}100%{left:124%}}
@keyframes plBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

.hero-content{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-left{position:absolute;left:var(--gutter);top:54%;translate:0 -50%;width:min(42vw,640px);pointer-events:auto}
.hero-left h1{font-size:clamp(2.6rem,4.3vw,4.7rem);margin:20px 0 24px}
.hero-left .lead{margin-bottom:34px;max-width:52ch}
.hero-left .tag{display:none}
.hero-card{position:absolute;right:var(--gutter);bottom:7vh;display:flex;align-items:center;gap:16px;padding:14px 22px 14px 14px;border-radius:999px;pointer-events:auto}
.hero-card img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid rgba(220,190,159,.5)}
.hero-card b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--marfim);line-height:1.1}
.hero-card small{font-size:var(--fs-label);color:var(--texto-2)}
.scroll-hint{position:absolute;left:50%;bottom:4vh;translate:-50% 0;display:grid;justify-items:center;gap:10px;font-size:.9375rem;letter-spacing:.24em;text-transform:uppercase;color:var(--texto-2)}
.scroll-hint i{width:1px;height:54px;background:linear-gradient(var(--ouro),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ouro-claro);animation:drip 2s var(--ease) infinite}
@keyframes drip{to{top:110%}}

/* ============ SEÇÕES ============ */
.sec{position:relative;padding-block:clamp(90px,14vw,190px)}
.sec-head{display:grid;gap:24px;max-width:900px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* fio divisor */
.strand-divider{position:relative;height:160px;margin-block:-40px}
.strand-divider svg{width:100%;height:100%;overflow:visible}

/* ============ TÚNEL 3D ============ */
.tunnel{position:relative;height:300vh}
.tunnel-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1100px;perspective-origin:50% 50%;
  background:radial-gradient(90% 70% at 50% 50%,#1c130c 0%,var(--onix) 70%)}
.tunnel-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.tunnel-world{position:absolute;inset:0;transform-style:preserve-3d}
.t-item{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
.t-intro{width:min(1000px,88vw);text-align:center;display:grid;justify-items:center;gap:26px}
.t-intro h2{font-size:clamp(2.6rem,6vw,6rem)}
.t-intro .lead{max-width:56ch;margin-inline:auto}
.t-begins{text-align:center;display:grid;gap:10px;width:min(900px,90vw)}
.t-begins p{font-family:var(--serif);font-size:clamp(2.2rem,4.8vw,4.6rem);line-height:1.05;color:var(--marfim)}
.t-begins .small{font-family:var(--sans);font-size:1.35rem;color:var(--texto-2);margin-bottom:12px}
.t-card{width:min(440px,84vw);padding:34px 34px 36px;display:grid;gap:14px}
.t-card .k{display:flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-2)}
.t-card .k svg{width:34px;height:34px}
.t-card h3{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.t-card p{color:var(--texto-2);font-size:1.0625rem}
.t-final{width:min(980px,90vw);text-align:center;display:grid;justify-items:center;gap:26px}
.t-final p.big{font-family:var(--serif);font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1.1;color:var(--marfim)}
.t-final .lead{max-width:60ch}
.t-progress{position:absolute;left:var(--gutter);bottom:5vh;display:flex;align-items:center;gap:14px;font-size:var(--fs-label);color:var(--texto-2);letter-spacing:.14em;text-transform:uppercase;z-index:5}
.t-progress .bar{width:160px;height:1px;background:rgba(220,190,159,.2);position:relative}
.t-progress .bar i{position:absolute;inset:0;background:var(--grad-ouro);transform-origin:left;transform:scaleX(0)}

/* ============ NATURALIDADE — FIOS 3D ============ */
.hair3d{position:relative;height:420vh}
.hair3d-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(70% 80% at 70% 50%,#21160d 0%,var(--onix) 70%)}
#hairCanvas{position:absolute;inset:0;width:100%;height:100%}
.hair3d-copy{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;width:min(44vw,600px);z-index:2;display:grid;gap:26px}
.hair3d-copy h2{font-size:clamp(2.5rem,4.6vw,4.8rem)}
.hair-steps{position:relative;min-height:230px}
.hair-step{position:absolute;inset:0 0 auto 0;padding:28px 30px;display:grid;gap:10px;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hair-step.on{opacity:1;transform:none}
.hair-step .k{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-2)}
.hair-step p{font-size:1.15rem;color:var(--texto)}
.hair-dots{display:flex;gap:10px}
.hair-dots i{width:34px;height:3px;border-radius:3px;background:rgba(220,190,159,.2);transition:background .5s}
.hair-dots i.on{background:var(--ouro)}
.hair-legend{position:absolute;right:var(--gutter);bottom:6vh;z-index:2;display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;font-size:var(--fs-label);color:var(--texto-2)}
.hair-legend span{display:flex;align-items:center;gap:10px}
.hair-legend b{width:28px;height:2px;display:inline-block}

/* ============ ANTES E DEPOIS ============ */
/* Com um único caso, a cena não precisa dos 460vh que existiam para três. */
.results{position:relative;height:220vh}
.results-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;padding-block:clamp(90px,11vh,120px) 3vh;
  background:radial-gradient(60% 60% at 50% 60%,#22170f 0%,var(--onix) 75%)}
.results-head{text-align:center;display:grid;justify-items:center;gap:14px;padding-inline:var(--gutter)}
.results-head h2{font-size:clamp(2.2rem,4.2vw,4.2rem)}
.carousel{position:relative;perspective:1600px;transform-style:preserve-3d}
.case{position:absolute;left:50%;top:50%;width:min(37.5vh,82vw,480px);transform-style:preserve-3d;will-change:transform}
.case-frame{position:relative;border-radius:var(--r-lg);padding:10px;overflow:visible}
.compare{position:relative;aspect-ratio:3/4;width:100%;border-radius:24px;overflow:hidden;--pos:100%;cursor:ew-resize;touch-action:pan-y;user-select:none;background:#1a1410}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;translate:-1px 0;background:linear-gradient(transparent,var(--ouro-claro) 15%,var(--ouro) 85%,transparent);box-shadow:0 0 18px rgba(220,190,159,.8)}
.compare .knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(250,244,236,.12);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(240,226,210,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.4)}
.compare .knob svg{width:28px;height:28px}
.chip{position:absolute;top:18px;padding:8px 16px;border-radius:999px;font-size:.9375rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--marfim);
  background:rgba(10,8,6,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(240,226,210,.25);z-index:3}
.chip.l{left:18px}.chip.r{right:18px}
.case-cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 10px 6px}
.case-cap b{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--marfim)}
.case-cap span{font-size:var(--fs-label);color:var(--texto-2)}
.results-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);width:100%;margin-inline:auto}
.results-foot p{font-size:var(--fs-label);color:var(--texto-2)}
.case-nav{display:flex;gap:10px;align-items:center;font-size:var(--fs-label);color:var(--texto-2)}
.case-nav i{width:40px;height:2px;background:rgba(220,190,159,.22);border-radius:2px;transition:background .4s,width .4s}
.case-nav i.on{background:var(--ouro);width:64px}

@media (min-width:992px){
  .results-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);grid-template-rows:1fr auto;column-gap:40px;padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-block:100px 5vh}
  .results-head{grid-column:1;grid-row:1;text-align:left;justify-items:start;align-self:center;padding:0;gap:22px}
  .results-head h2{font-size:clamp(2.4rem,3.8vw,4rem)}
  .carousel{grid-column:2;grid-row:1 / span 2}
  .case{width:min(52vh,34vw,500px)}
  .results-foot{grid-column:1;grid-row:2;padding:0;flex-direction:column;align-items:flex-start;gap:14px}
}
/* ============ DR. PABLO ============ */
.reveal-band{position:relative;height:240vh}
.reveal-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.reveal-media{position:absolute;inset:0;clip-path:inset(22% 32% 22% 32% round 400px 400px 30px 30px);will-change:clip-path}
.reveal-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;transform:scale(1.45);will-change:transform}
.reveal-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.2),rgba(10,8,6,.1) 40%,rgba(10,8,6,.85))}
.reveal-quote{position:relative;z-index:2;max-width:1100px;padding-inline:var(--gutter);text-align:center;display:grid;gap:22px;justify-items:center;align-self:end;margin-bottom:10vh}
.reveal-quote p{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,3.5rem);line-height:1.14;color:var(--marfim);text-shadow:0 6px 30px rgba(0,0,0,.7)}
.reveal-quote p .w{opacity:.18;transition:opacity .3s}
.reveal-quote p .w.on{opacity:1}

.doctor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center}
.arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px 26px 26px;overflow:hidden;border:1px solid rgba(220,190,159,.45);box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
.arch img{width:100%;height:118%;object-fit:cover;object-position:50% 30%;will-change:transform}
.arch-wrap{position:relative;max-width:560px;width:100%}
.arch-wrap::before{content:"";position:absolute;inset:-18px;border-radius:999px 999px 36px 36px;border:1px solid rgba(220,190,159,.22)}
.arch-badge{position:absolute;right:-6%;bottom:9%;padding:20px 24px;display:grid;gap:4px;border-radius:24px;max-width:280px}
.arch-badge b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--marfim)}
.arch-badge span{font-size:var(--fs-label);color:var(--texto-2)}
.doctor-copy{display:grid;gap:26px}
.doctor-copy h2{font-size:clamp(2.3rem,4vw,4rem)}
.doctor-copy blockquote{margin:0;padding-left:26px;border-left:1px solid var(--ouro);font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--ouro-claro)}
.creds{display:grid;gap:12px;margin-top:6px}
.cred{display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:20px}
.cred svg{width:34px;height:34px;flex:none}
.cred b{display:block;font-weight:500;color:var(--marfim);font-size:1.0625rem}
.cred span{font-size:var(--fs-label);color:var(--texto-2)}

/* bastidores */
.backstage{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:18px;margin-top:clamp(70px,9vw,130px)}
.bs{position:relative;border-radius:var(--r-md);overflow:hidden;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.bs img,.bs video{width:100%;height:100%;object-fit:cover}
.bs figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 16px;border-radius:16px;font-size:var(--fs-label);color:var(--marfim)}
.bs-video{grid-row:span 2;aspect-ratio:9/16;border:1px solid rgba(220,190,159,.35)}
.bs-video .sound{position:absolute;top:16px;right:16px;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;font-size:.9375rem;border:1px solid rgba(240,226,210,.3);background:rgba(10,8,6,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.bs-video .sound svg{width:20px;height:20px}
.bs-a{aspect-ratio:4/3}
.bs-b{aspect-ratio:4/3}
.bs-quote{grid-column:span 2;padding:clamp(28px,4vw,48px);display:grid;align-content:center;gap:18px}
.bs-quote p{font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.6rem);line-height:1.15;color:var(--marfim)}

/* ============ JORNADA ============ */
.journey{position:relative;height:520vh}
.journey-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;perspective:1400px}
.journey-head{padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;width:100%;display:grid;gap:18px;margin-bottom:5vh}
.journey-head h2{font-size:clamp(2.2rem,4.2vw,4.4rem)}
.journey-track{position:relative;display:flex;gap:clamp(24px,3vw,44px);padding-inline:var(--gutter) 30vw;width:max-content;transform-style:preserve-3d;will-change:transform}
/* Mesmo tratamento de fios do planejamento, também atrás dos cards. */
.journey-line{position:absolute;left:0;top:-59px;height:260px;pointer-events:none;overflow:visible;transform:translateZ(-30px);z-index:0}
.step{position:relative;width:min(400px,78vw);min-height:360px;padding:36px 34px;display:flex;flex-direction:column;gap:16px;transform-style:preserve-3d;will-change:transform}
.step .num{font-family:var(--serif);font-size:5.5rem;line-height:.8;font-style:italic}
.step h3{font-size:1.9rem;letter-spacing:.02em}
.step p{color:var(--texto-2);font-size:1.0625rem}
.step .dot{position:absolute;right:30px;top:34px;width:14px;height:14px;border-radius:50%;background:var(--ouro);box-shadow:0 0 0 6px rgba(220,190,159,.18),0 0 24px rgba(220,190,159,.8)}
.step-end{justify-content:center;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.step-end::before,.step-end::after{display:none}
.step-end p{font-family:var(--serif);font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.15;color:var(--marfim)}

/* ============ EQUILÍBRIO — CILINDRO ============ */
.balance{position:relative;height:300vh}
.balance-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:40px;padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto}
.balance-copy{display:grid;gap:24px}
.balance-copy h2{font-size:clamp(2.2rem,3.8vw,3.8rem)}
.cyl-wrap{position:relative;height:70vh;perspective:1200px;display:grid;place-items:center;
  -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.cyl{position:relative;width:100%;height:120px;transform-style:preserve-3d;will-change:transform}
.cyl span{position:absolute;left:0;right:0;top:0;height:120px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;
  font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,5vw,5rem);white-space:nowrap}
.balance-ring{position:absolute;inset:auto 0;top:50%;height:120px;translate:0 -50%;border-block:1px solid rgba(220,190,159,.3);pointer-events:none}

/* ============ AVALIAÇÃO — PERGUNTAS ============ */
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:start}
.ask-media{position:sticky;top:110px}
.ask-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1080/1000;border:1px solid rgba(220,190,159,.3)}
.ask-photo img{width:100%;height:100%;object-fit:cover}
.ask-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,8,6,.85))}
.ask-photo .glass{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;padding:22px 24px;border-radius:22px}
.ask-photo .glass p{font-size:1.0625rem;color:var(--marfim)}
.qlist{list-style:none;margin:36px 0 40px;padding:0;display:grid}
.qlist li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--linha);
  font-family:var(--serif);font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.2;color:rgba(243,235,221,.38);transition:color .5s}
.qlist li::before{content:"";width:.86em;height:.86em;align-self:start;margin-top:.2em;
  background:var(--grad-ouro-v);opacity:.4;transition:opacity .5s;
  -webkit-mask:url(../assets/img/icon-gold.png) center/contain no-repeat;
          mask:url(../assets/img/icon-gold.png) center/contain no-repeat}
.qlist li.on{color:var(--marfim)}
.qlist li.on::before{opacity:1}

/* ============ QUANTO CUSTA ============ */
.price{text-align:left}
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start;margin-top:60px}
.price-q{font-size:clamp(2.6rem,6vw,6.4rem);line-height:1}
.price-q .qm{font-size:1.2em;line-height:0}
.price-text{display:grid;gap:20px}
.price-card{padding:clamp(28px,3.5vw,44px);display:grid;gap:18px}
.price-card h3{font-size:1.7rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;font-size:1.0625rem}
.ticks li svg{width:26px;height:26px;margin-top:2px}
.the-question{margin-top:clamp(90px,12vw,170px);text-align:center;display:grid;justify-items:center;gap:30px}
.the-question .pre{font-size:clamp(1.15rem,1.6vw,1.4rem);color:var(--texto-2);max-width:40ch}
.the-question h2{font-size:clamp(2.8rem,7vw,7.4rem);line-height:1}
.the-question h2 .w{display:inline-block;opacity:.12;transform:translateY(.15em);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.the-question h2 .w.on{opacity:1;transform:none}

/* ============ ÁREA DOADORA — CAMADAS 3D ============ */
.donor{position:relative;height:320vh}
.donor-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:30px;padding-inline:var(--gutter);max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto}
.donor-copy{display:grid;gap:24px}
.donor-copy h2{font-size:clamp(2.3rem,4.2vw,4.3rem)}
.layers-scene{position:relative;height:80vh;perspective:1800px;display:grid;place-items:center}
.layers{position:relative;width:min(34vw,420px);aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg);will-change:transform}
.layer{position:absolute;inset:0;transform-style:preserve-3d;border-radius:14px;will-change:transform}
.layer .face{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.layer .edge{position:absolute;left:0;right:0;bottom:0;height:26px;transform-origin:bottom;transform:rotateX(-90deg);border-radius:0 0 8px 8px}
.layer .edge-r{position:absolute;top:0;bottom:0;right:0;width:26px;transform-origin:right;transform:rotateY(90deg);border-radius:0 8px 8px 0}
.l1 .face{background:linear-gradient(135deg,#6b4a30,#3d2a1b);box-shadow:inset 0 0 0 1px rgba(239,224,207,.35)}
.l1 .face::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(35deg,rgba(240,226,210,.05) 0 2px,transparent 2px 9px)}
.l1 .edge,.l1 .edge-r{background:repeating-linear-gradient(180deg,#8a6040 0 3px,#5a3d27 3px 6px)}
.l2 .face{background:radial-gradient(circle at 30% 30%,#5a3b24,#2c1d12);box-shadow:inset 0 0 0 1px rgba(239,224,207,.28)}
.l2 .edge,.l2 .edge-r{background:linear-gradient(180deg,#6d4a2f,#3a2718)}
.l3 .face{background:radial-gradient(circle at 60% 40%,#3a2819,#1c130c);box-shadow:inset 0 0 0 1px rgba(239,224,207,.4)}
.l3 .edge,.l3 .edge-r{background:linear-gradient(180deg,#5b3f28,#2a1c12)}
.l4 .face{background:radial-gradient(circle at 50% 50%,#dcbe9f 0,#8a5a2b 60%,#4a3018 100%);opacity:.85}
.l4 .face::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(245,235,222,.35) 0 18%,transparent 19%) 0 0/48px 48px,radial-gradient(circle,rgba(245,235,222,.22) 0 16%,transparent 17%) 24px 24px/48px 48px}
.l4 .edge,.l4 .edge-r{background:linear-gradient(180deg,#cfae8b,#6a4420)}
.fu{position:absolute;width:22px;height:22px;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle at 35% 35%,#fbf6f0,#dcbe9f 60%,#c4a483);box-shadow:0 0 14px rgba(239,224,207,.7)}
.fu.s{width:12px;height:12px}
.hair-up{position:absolute;width:2px;height:150px;translate:-50% 0;transform-origin:50% 0;transform:rotateX(90deg) rotateY(var(--ry,0deg));
  background:linear-gradient(0deg,rgba(239,224,207,.0),#e6cfb6 20%,#3b2515 100%);border-radius:2px}
.layer-label{position:absolute;right:0;display:flex;align-items:center;gap:14px;font-size:var(--fs-label);color:var(--marfim);white-space:nowrap;opacity:0;will-change:transform,opacity}
.layer-label::before{content:"";width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro))}
.layer-label small{display:block;color:var(--texto-2);font-size:.9375rem}

/* ============ BARBA / SOBRANCELHA ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px}
.duo-card{position:relative;padding:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.duo-card canvas{width:100%;height:300px;display:block}
.duo-body{padding:10px clamp(26px,3vw,40px) clamp(30px,3vw,44px);display:grid;gap:16px;align-content:start}
.duo-body h3{font-size:clamp(1.9rem,2.8vw,2.6rem)}
.duo-body p{color:var(--texto-2);font-size:1.0625rem}
.duo-body .btn{justify-self:start;margin-top:10px}

/* ============ FAQ ============ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,100px);align-items:start}
.faq .sec-head{position:sticky;top:120px}
.faq-list{display:grid;gap:12px}
.faq-item{border-radius:22px;overflow:hidden}
.faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;padding:24px 26px;background:none;border:0;
  font-family:var(--serif);font-size:clamp(1.35rem,1.8vw,1.65rem);color:var(--marfim);line-height:1.25}
.faq-item .pm{position:relative;width:34px;height:34px;flex:none;border-radius:50%;border:1px solid rgba(220,190,159,.45)}
.faq-item .pm::before,.faq-item .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ouro-2);translate:-50% -50%;transition:transform .4s}
.faq-item .pm::after{transform:rotate(90deg)}
.faq-item.open .pm::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 26px 26px;color:var(--texto-2);font-size:1.0625rem;max-width:62ch}
.faq-a p + p{padding-top:0;margin-top:-12px}

/* pergunta em destaque — diferencial */
.faq-hi{border:1px solid rgba(220,190,159,.42);
  background:linear-gradient(158deg,rgba(220,190,159,.13),rgba(220,190,159,.04) 46%,rgba(10,8,6,.34));
  box-shadow:inset 3px 0 0 rgba(220,190,159,.8),inset 0 1px 0 rgba(255,255,255,.2),
    0 34px 74px -38px rgba(220,190,159,.5),0 40px 80px -30px rgba(0,0,0,.7)}
.faq-flag{display:inline-flex;align-items:center;gap:9px;margin:22px 26px 0;padding:7px 15px 7px 11px;border-radius:999px;
  border:1px solid rgba(220,190,159,.4);background:rgba(220,190,159,.09);
  font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ouro-2)}
.faq-flag svg{width:19px;height:19px;flex:none}
.faq-hi > button{padding-top:14px;font-size:clamp(1.5rem,2.1vw,1.95rem)}
.faq-a p.faq-hl{font-family:var(--serif);font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.3;color:var(--marfim);padding-bottom:16px;max-width:42ch;text-wrap:balance}
.faq-a p.faq-hl + p{margin-top:0}

/* ============ CTA FINAL + FORM ============ */
.final{position:relative;overflow:hidden;padding-block:clamp(110px,14vw,200px)}
.final-bg{position:absolute;inset:-10% 0;z-index:0}
.final-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;opacity:.5;will-change:transform}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.96) 0%,rgba(10,8,6,.75) 50%,rgba(10,8,6,.55)),linear-gradient(180deg,var(--onix),transparent 25%,transparent 75%,var(--onix))}
.final-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.final-copy{display:grid;gap:24px}
.final-copy h2{font-size:clamp(2.5rem,4.8vw,4.8rem)}
.final-lines{display:grid;gap:6px;margin:6px 0}
.final-lines p{font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.8rem);color:var(--texto);line-height:1.3}
.final-lines p::before{content:"— ";color:var(--ouro)}
/* ============ CARTAO DE WHATSAPP (no lugar do formulario) ============ */
.cta-wa{padding:clamp(30px,3.6vw,50px);display:grid;gap:20px;justify-items:start}
.cta-wa h3{font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1.15}
.cta-wa p{color:var(--texto-2);font-size:1.0625rem;line-height:1.6}
.cta-selo{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(220,190,159,.4);background:rgba(220,190,159,.09)}
.cta-selo svg{width:30px;height:30px;color:var(--ouro-claro)}
.cta-bt{width:100%;margin-top:4px}
.cta-nota{font-size:.9375rem;letter-spacing:.02em;color:var(--texto-2)}
/* glifo do WhatsApp dentro dos botoes */
.wa-i{width:19px;height:19px;flex:none;margin-right:-2px}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--linha);padding-block:70px 120px;position:relative}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.footer img.lv{width:220px;height:auto}
.footer h4{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-2);font-weight:500;margin-bottom:14px}
.footer p,.footer a{font-size:1.0625rem;color:var(--texto);line-height:1.8}
.footer a:hover{color:var(--ouro-claro)}
/* area de toque confortavel no celular sem mudar nada do visual */
.footer a{position:relative}
.footer a::after{content:"";position:absolute;inset:-13px -10px}
.footer-bottom{margin-top:50px;padding-top:26px;border-top:1px solid var(--linha);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9375rem;color:var(--texto-2)}

/* CTA fixo mobile */
.mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;align-items:center;gap:14px;padding:12px 12px 12px 20px;border-radius:24px;transform:translateY(140%);transition:transform .6s var(--ease)}
.mcta.show{transform:none}
.mcta p{font-size:.9375rem;line-height:1.35;color:var(--marfim);flex:1}
.mcta .btn{--h:50px;padding:0 18px;font-size:.875rem;letter-spacing:.04em}

/* entrada do hero */
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes ringIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.js .hero-left > *{animation:rise 1.3s var(--ease) both;animation-play-state:paused}
.js .hero-left > *:nth-child(2){animation-delay:.1s}.js .hero-left > *:nth-child(3){animation-delay:.2s}
.js .hero-left > *:nth-child(4){animation-delay:.3s}.js .hero-left > *:nth-child(5){animation-delay:.4s}
.js .portal-ring{animation:ringIn 1.8s var(--ease) both;animation-play-state:paused}
.js .pl-veil{animation:ringIn 1.6s var(--ease) both;animation-play-state:paused}
.js .pl-mark{animation:plMarkIn 1.4s var(--ease) .25s both;animation-play-state:paused}
.js .pl-word{animation:plWordIn 1.3s var(--ease) .6s both;animation-play-state:paused}
.js .pl-stack{animation:plBreathe 7s ease-in-out 2s infinite;animation-play-state:paused}
.js .pl-mark::after{animation:plShine 5.5s var(--ease) 1.7s infinite;animation-play-state:paused}
.js .pl-word::after{animation:plShine 5.5s var(--ease) 2s infinite;animation-play-state:paused}
.is-loaded .hero-left > *,.is-loaded .portal-ring,
.is-loaded .pl-veil,.is-loaded .pl-mark,.is-loaded .pl-word,
.is-loaded .pl-stack,.is-loaded .pl-mark::after,.is-loaded .pl-word::after{animation-play-state:running}

/* reveal genérico — sempre visível em repouso */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.pre{opacity:0;transform:translateY(40px)}

/* ============ RESPONSIVO ============ */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .header .btn{display:none}
}
@media (max-width:991px){
  :root{--fs-body:1.0625rem}
  .hero-sticky{--px:50%;--py:30%;--r:min(30vw,21vh)}
  .hero-left{left:var(--gutter);right:var(--gutter);top:auto;bottom:6vh;translate:none;width:auto}
  .hero-left h1{font-size:clamp(2.2rem,8.4vw,3.4rem);margin:14px 0 16px}
  .hero-left .lead{font-size:1.0625rem;margin-bottom:22px}
  .hero-left .tag{display:none}
  .hero-card,.scroll-hint{display:none}
  .hero-world img{object-position:50% 0%}
  .hero-left .btn-glass{display:none}

  .hair3d-copy{left:var(--gutter);right:var(--gutter);top:auto;bottom:4vh;translate:none;width:auto;gap:16px}
  .hair3d-copy h2{font-size:clamp(2rem,8vw,2.8rem)}
  .hair-steps{min-height:200px}
  .hair-step{padding:20px 22px}
  .hair-step p{font-size:1.0625rem}
  .hair-legend{display:none}
  .results-head .lead{display:none}

  .doctor{grid-template-columns:1fr}
  .arch-wrap{max-width:440px;margin-inline:auto}
  .arch-badge{right:0}
  .backstage{grid-template-columns:1fr 1fr}
  .bs-video{grid-column:span 2;grid-row:auto;aspect-ratio:9/13;max-height:80vh}
  .bs-quote{grid-column:span 2}

  .balance-stage{grid-template-columns:1fr;align-content:center;gap:10px}
  .cyl-wrap{height:44vh}

  .ask{grid-template-columns:1fr}
  .ask-media{position:relative;top:0}
  .price-grid{grid-template-columns:1fr}

  .donor-stage{grid-template-columns:1fr;align-content:center;gap:0}
  .donor-copy{gap:14px;padding-top:80px}
  .donor-copy .lead{font-size:1.0625rem}
  .layers-scene{height:48vh}
  .layers{width:min(58vw,300px)}
  .layer-label{font-size:.9375rem}
  .layer-label::before{width:30px}

  .duo{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .faq .sec-head{position:relative;top:0}
  .final-grid{grid-template-columns:1fr}
  .cta-wa{gap:16px}
  .cta-selo{width:54px;height:54px}
  .cta-selo svg{width:26px;height:26px}
  .footer-grid{grid-template-columns:1fr}
  .mcta{display:flex}
  .journey-stage{perspective:none}
}
@media (max-width:560px){
  .btn{--h:56px;padding:0 24px;font-size:.9375rem}
  .t-card{padding:26px}
  .case-cap b{font-size:1.35rem}
  .results-stage{padding-top:96px}
  .backstage{grid-template-columns:1fr}
  .bs-video,.bs-quote{grid-column:auto}
  .step{min-height:320px}
  .donor-copy .lead{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .grain{display:none}
  .pl-mark::after,.pl-word::after{display:none}
  .pl-word{clip-path:none}
}

/* =========================================================
   SEÇÕES CLARAS — Jornada e Resultados reais
   Fundo branco, texto preto/cinza, detalhes em #dcbe9f.
   Nos textos em destaque sobre branco o mesmo tom é aprofundado
   levemente para manter a leitura.
   ========================================================= */
.light{
  --marfim:#15110d;
  --texto:#3b342d;
  --texto-2:#6e655b;
  --linha:rgba(150,120,90,.22);
  --ouro-2:#a4835f;
  color:var(--texto);
}
.journey.light{background:#ffffff}
.results.light{background:#f8f5f0}
.light .results-stage{background:radial-gradient(60% 60% at 60% 55%,#fffdfa 0%,#f8f5f0 70%)}
.light .gold{background:linear-gradient(100deg,#b99672 0%,#c9a683 45%,#dcbe9f 100%);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;animation:none}
.light .eyebrow::before{background:linear-gradient(90deg,transparent,#dcbe9f)}
.light .glass{
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.75));
  border:1px solid rgba(220,190,159,.55);
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -32px rgba(90,65,40,.28),0 2px 8px rgba(90,65,40,.06);
}
.light .glass::before{background:radial-gradient(420px circle at var(--mx,30%) var(--my,0%),rgba(220,190,159,.18),transparent 55%)}
.light .glass::after{background:linear-gradient(135deg,rgba(220,190,159,.9),rgba(220,190,159,0) 35%,rgba(220,190,159,0) 65%,rgba(220,190,159,.7))}
.light .step .num{background:linear-gradient(180deg,#dcbe9f,#ead8c4);-webkit-background-clip:text;background-clip:text}
.light .step .dot{background:#dcbe9f;box-shadow:0 0 0 6px rgba(220,190,159,.22)}
.light .step-end,.light .step-end::before,.light .step-end::after{background:none;border:0;box-shadow:none}
.light .step-end p{color:#15110d}
.light .case-nav i{background:rgba(150,120,90,.2)}
.light .case-nav i.on{background:#dcbe9f}
.light .chip{color:#fff}
.light .compare{background:#ece6de}

/* =========================================================
   MOBILE — largura travada na tela e rolagem mais leve
   (nada aqui afeta telas acima de 991px)
   ========================================================= */
@media (max-width:991px){
  @supports (overflow:clip){ html{overflow-x:clip} }
  main > section,.footer{overflow-x:clip;max-width:100vw}
  /* colunas nunca maiores que a tela */
  .doctor,.ask,.price-grid,.faq,.final-grid,.footer-grid,.duo,.balance-stage,.donor-stage,.backstage{grid-template-columns:minmax(0,1fr)}
  .doctor > *,.ask > *,.final-grid > *,.faq > *,.price-grid > *{min-width:0}
  /* botões quebram linha em vez de empurrar a página */
  .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.3;padding-block:14px}
  .header .btn,.mcta .btn{white-space:nowrap}
  h1,h2,h3,p,li,blockquote{overflow-wrap:break-word}
  .arch-badge{right:8px}
  /* desempenho: menos efeitos pesados durante a rolagem */
  .grain{display:none}
  .glass{-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)}
  .t-card,.hair-step,.step,.case-frame,.cred,.faq-item{-webkit-backdrop-filter:none;backdrop-filter:none}
  .t-card,.hair-step{background:linear-gradient(145deg,rgba(40,29,20,.92),rgba(22,16,11,.9))}
  .portal-ring svg{animation:none}
}
@media (max-width:991px){
  .hero-sticky{--py:26%;--r:min(28vw,19vh)}
  .hero-left h1{font-size:clamp(2rem,7.6vw,3.4rem)}
  .hero-left .lead{font-size:1rem;line-height:1.55}
  .mcta{gap:12px;padding:10px 10px 10px 16px}
  .mcta p{font-size:.875rem;line-height:1.3;min-width:0}
  .mcta .btn{--h:48px;padding:0 16px;font-size:.78rem;letter-spacing:.02em;flex:none}
}
@media (max-width:991px) and (max-height:700px){
  .hero-sticky{--py:22%;--r:min(24vw,16vh)}
  .hero-left .lead{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:991px){
  .mcta{background:linear-gradient(145deg,rgba(30,22,15,.94),rgba(12,9,6,.94))}
  .mcta p{color:#f3ebdd}
}

/* ============ CADA PLANEJAMENTO CONSIDERA — trilho 3D com fios ============ */
.plan{position:relative;height:620vh;background:#ffffff}
.plan-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;perspective:1400px;
  background:radial-gradient(70% 60% at 70% 60%,#fbf7f2 0%,#ffffff 70%)}
.plan-silk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plan-stage .journey-head{position:relative;z-index:1}
.plan-track{position:relative;z-index:1;display:flex;gap:clamp(24px,3vw,44px);padding-inline:var(--gutter) 30vw;width:max-content;transform-style:preserve-3d;will-change:transform}
/* Os fios ficam ATRÁS dos cards: translateZ negativo (é o que decide a ordem em
   preserve-3d) para não passar por cima do texto e atrapalhar a leitura. */
.plan-lines{position:absolute;left:0;top:-40px;height:260px;pointer-events:none;overflow:visible;transform:translateZ(-30px);z-index:0}
.pcard{position:relative;width:min(380px,78vw);min-height:350px;padding:26px 30px 32px;display:flex;flex-direction:column;gap:14px;transform-style:preserve-3d;will-change:transform}
.pcard-art{width:100%;height:150px;display:block;border-radius:18px;background:linear-gradient(180deg,#fbf7f2,#f6efe6);box-shadow:inset 0 0 0 1px rgba(220,190,159,.35)}
.pcard h3{font-size:1.75rem;letter-spacing:.01em;margin-top:6px}
.pcard p{color:var(--texto-2);font-size:1.0625rem}
.pend{width:min(560px,84vw);justify-content:center;gap:20px}
.pend p.big{font-family:var(--serif);font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.12;color:var(--marfim)}
.pend .btn{align-self:flex-start}
@media (max-width:991px){
  .plan-stage{perspective:none}
  .pcard{min-height:0;padding:22px 22px 26px}
  .pcard-art{height:120px}
  .pcard h3{font-size:1.5rem}
  .pend .btn{align-self:stretch}
}

/* =========================================================
   MOBILE — fluidez (mesma estética, menos custo por quadro)
   ========================================================= */
@keyframes spinT{to{transform:rotate(360deg)}}
@media (max-width:991px){
  /* o anel gira pela GPU (transform) em vez de repintar o gradiente a cada quadro */
  .portal-ring::before{background:conic-gradient(from 0deg,#dcbe9f,#f3e7da,#dcbe9f,#fbf6f0,#e3c9ae,#f1e3d3,#dcbe9f);animation:spinT 14s linear infinite;will-change:transform}
  .mcta{-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero-bg,.hero-world img,.t-item,.case,.step,.pcard,.layers,.cyl,.journey-track,.plan-track,.reveal-media img,.arch img,.final-bg img{backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .hair-step{transition:opacity .5s ease,transform .5s ease}
}

/* =========================================================
   CELULAR (até 767px) — versão simplificada a partir de "O método"
   Desktop e tablet não são afetados.
   ========================================================= */
@media (max-width:767px){
  /* O método — sem 3D e sem fundo animado */
  .tunnel{height:auto}
  .tunnel-stage{position:relative;height:auto;overflow:visible;perspective:none;padding-block:100px 70px}
  .tunnel-stage canvas,.t-progress{display:none}
  .tunnel-world{position:relative;inset:auto;display:grid;gap:64px;padding-inline:var(--gutter);transform:none}
  .t-item{position:relative;left:auto;top:auto;width:100%;transform:none;opacity:1;visibility:visible;will-change:auto}
  .t-intro h2{font-size:clamp(2.2rem,9vw,3rem)}
  .t-begins p{font-size:clamp(1.9rem,8vw,2.6rem)}
  .t-begins .small{font-size:1.0625rem}

  /* carrosséis manuais (O planejamento e A jornada) */
  .plan,.journey{height:auto}
  .plan-stage,.journey-stage{position:relative;height:auto;overflow:visible;perspective:none;padding-block:90px 60px;display:block}
  .plan-silk,.plan-lines,.journey-line{display:none}
  .plan-track,.journey-track{width:auto;transform:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    padding:10px var(--gutter) 24px;gap:14px;scroll-padding-inline:var(--gutter);scrollbar-width:none;will-change:auto}
  .plan-track::-webkit-scrollbar,.journey-track::-webkit-scrollbar{display:none}
  .pcard,.step{flex:0 0 84%;width:auto;min-height:0;scroll-snap-align:center;transform:none;opacity:1;will-change:auto}
  .pend,.step-end{flex-basis:88%}
  .step{padding:28px 24px}
  .step .num{font-size:4.2rem}
  .pc-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding-inline:var(--gutter);margin-top:4px}
  .pc-dots{display:flex;gap:8px}
  .pc-dots button{width:22px;height:4px;padding:0;border:0;border-radius:4px;background:rgba(150,120,90,.25);transition:width .3s,background .3s}
  .pc-dots button.on{width:38px;background:#dcbe9f}
  .pc-arrow{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(220,190,159,.7);background:#fff;color:#8a6f55;box-shadow:0 8px 20px -10px rgba(90,65,40,.35)}
  .pc-arrow svg{width:20px;height:20px}
  .pc-arrow:disabled{opacity:.35}

  /* Naturalidade — mantém a cena, altura estável (sem pular com a barra do navegador) */
  .hair3d-stage{height:100vh;height:100lvh}

  /* Antes e depois — um caso abaixo do outro, barra manual */
  .results{height:auto}
  .results-stage{position:relative;height:auto;overflow:visible;display:block;padding-block:90px 60px}
  .carousel{perspective:none;display:grid;gap:30px;margin-top:34px;padding-inline:var(--gutter)}
  .case{position:relative;left:auto;top:auto;width:100%;transform:none;opacity:1;will-change:auto}
  .results-foot{margin-top:24px}
  .case-nav{display:none}

  /* Princípio do Dr. Pablo — tudo junto, só esmaecendo */
  .reveal-band{height:auto}
  .reveal-sticky{position:relative;height:auto;min-height:86svh;padding-block:40vh 56px}
  .reveal-media{clip-path:none;will-change:auto}
  .reveal-media img{transform:none;will-change:auto}
  .reveal-quote{margin-bottom:0}
  .reveal-quote p .w{opacity:1}

  /* Equilíbrio — lista simples */
  .balance{height:auto}
  .balance-stage{position:relative;height:auto;overflow:visible;padding-block:90px 70px;gap:28px}
  .cyl-wrap{height:auto;perspective:none;display:block;-webkit-mask:none;mask:none}
  .balance-ring{display:none}
  .cyl{height:auto;transform:none;display:grid;will-change:auto}
  .cyl span{position:static;height:auto;transform:none;justify-content:flex-start;backface-visibility:visible;font-size:2.3rem;padding:12px 0;border-bottom:1px solid var(--linha)}

  /* Área doadora — texto primeiro, camadas abaixo, sem fixar na tela */
  .donor{height:auto}
  .donor-stage{position:relative;height:auto;overflow:visible;padding-block:90px 60px;display:grid;gap:10px}
  .donor-copy{padding-top:0}
  .donor-copy .lead{display:block}
  .layers-scene{height:auto;display:flex;flex-direction:column;align-items:stretch;perspective:1200px;padding-top:30px}
  .layers{width:min(60vw,250px);margin:40px auto 70px}
  .layer-label{position:static;right:auto;top:auto!important;white-space:normal;padding:12px 0;border-top:1px solid var(--linha);font-size:1rem}
  .layer-label::before{width:24px}

  /* fundos parados */
  .final-bg img{transform:none;will-change:auto}
}
@media (max-width:767px){
  .layers{margin:190px auto 80px}
}
@media (max-width:767px){
  /* Naturalidade — animação automática, sem prender a rolagem */
  .hair3d{height:auto}
  .hair3d-stage{position:relative;height:100vh;height:100lvh;max-height:900px;min-height:640px}
  .hair-dots i{height:4px;cursor:pointer;position:relative}
  .hair-dots i::after{content:"";position:absolute;inset:-12px -2px}
}

/* =========================================================
   LOCALIZAÇÃO
   ========================================================= */
.local-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:center}
.local-copy .lead{margin:22px 0 0;max-width:52ch}
.local-list{list-style:none;margin:30px 0 34px;padding:0;display:grid;gap:18px}
.local-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.local-list svg{width:26px;height:26px;flex:none;margin-top:2px}
.local-list b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--marfim);line-height:1.2}
.local-list span{font-size:var(--fs-small);color:var(--texto-2)}
.local-map{position:relative;display:block;aspect-ratio:4/3.1;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.local-map:hover{transform:translateY(-6px)}
.local-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;
  transition:transform .8s var(--ease)}
.local-map:hover img{transform:scale(1.05)}
.local-map::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 70% at 50% 40%,rgba(10,8,6,.1) 30%,rgba(10,8,6,.6) 100%),
    linear-gradient(180deg,rgba(10,8,6,.25) 0%,transparent 30%,rgba(10,8,6,.55) 72%,rgba(10,8,6,.88) 100%)}
.local-pin{position:absolute;left:50%;top:38%;translate:-50% -100%;z-index:2;display:block;width:38px;
  filter:drop-shadow(0 4px 14px rgba(10,8,6,.9))}
.local-pin svg{display:block;width:100%;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.local-pin i{position:absolute;left:50%;bottom:-7px;translate:-50% 0;width:52px;height:14px;border-radius:50%;
  background:radial-gradient(50% 50%,rgba(220,190,159,.5),transparent 70%);animation:pinPulse 2.6s var(--ease) infinite}
@keyframes pinPulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.25);opacity:.95}}
.local-tag{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;padding:16px 20px;border-radius:20px;
  display:grid;gap:4px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--marfim);
  background:linear-gradient(145deg,rgba(18,13,9,.82),rgba(10,8,6,.72))}
.local-tag b{font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:.01em;text-transform:none;color:var(--ouro-2)}

/* =========================================================
   BOTÃO FIXO DE WHATSAPP
   ========================================================= */
.wa-fab{position:fixed;right:clamp(16px,2.2vw,30px);bottom:clamp(16px,2.2vw,30px);z-index:80;
  display:inline-flex;align-items:center;gap:0;overflow:hidden;
  width:60px;height:60px;padding:0;border-radius:999px;text-decoration:none;color:#0a0806;
  background:var(--grad-ouro);box-shadow:0 18px 40px -14px rgba(220,190,159,.65),0 0 0 1px rgba(255,255,255,.35) inset;
  transition:width .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease),bottom .6s var(--ease);
  opacity:0;transform:translateY(24px) scale(.9);pointer-events:none}
.wa-fab.on{opacity:1;transform:none;pointer-events:auto}
.wa-fab svg{width:30px;height:30px;flex:none;margin:0 15px}
.wa-fab span{white-space:nowrap;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transition:opacity .35s var(--ease);padding-right:22px}
.wa-fab:hover{width:196px;transform:translateY(-3px);box-shadow:0 22px 50px -12px rgba(220,190,159,.8)}
.wa-fab:hover span{opacity:1}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(220,190,159,.55);animation:waPulse 3s var(--ease) infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(220,190,159,.5)}70%{box-shadow:0 0 0 18px rgba(220,190,159,0)}100%{box-shadow:0 0 0 0 rgba(220,190,159,0)}}

/* =========================================================
   CURSOR PERSONALIZADO
   ========================================================= */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label,.has-cursor [data-compare],.has-cursor input,.has-cursor summary{cursor:none}
.cur{position:fixed;left:0;top:0;width:0;height:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.has-cursor .cur{opacity:1}
.cur-dot,.cur-ring{position:absolute;left:0;top:0;translate:-50% -50%;will-change:transform}
.cur-dot{width:7px;height:7px;border-radius:50%;background:var(--grad-ouro);
  box-shadow:0 0 12px rgba(220,190,159,.9)}
.cur-ring{width:38px;height:38px;border-radius:50%;border:1px solid rgba(220,190,159,.55);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
.cur-ring::after{content:attr(data-label);position:absolute;left:50%;top:calc(100% + 9px);translate:-50% 0;
  font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-2);white-space:nowrap;
  opacity:0;transition:opacity .3s var(--ease)}
.cur.is-link .cur-ring{width:62px;height:62px;border-color:rgba(220,190,159,.9);background:rgba(220,190,159,.1)}
.cur.is-drag .cur-ring{width:76px;height:76px;border-color:rgba(220,190,159,.95);background:rgba(220,190,159,.12)}
.cur.is-drag .cur-ring::after,.cur.is-link .cur-ring::after{opacity:1}
.cur.is-down .cur-ring{width:30px;height:30px}
.cur.light .cur-ring{border-color:rgba(150,110,70,.75);background:rgba(120,85,50,.06)}
.cur.light .cur-ring::after{color:#8a6a45}
.cur.light .cur-dot{box-shadow:0 0 10px rgba(150,110,70,.6)}
@media (hover:none),(pointer:coarse){.cur{display:none}.has-cursor,.has-cursor *{cursor:auto}}
@media (prefers-reduced-motion:reduce){.cur{display:none}.wa-fab::before{animation:none}.local-pin i{animation:none}}

@media (max-width:991px){
  .local-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .local-map{aspect-ratio:4/3.4}
}
/* Em ate 991px existe a barra fixa de contato (.mcta) no rodape. O botao redondo
   fica no canto de sempre e sobe so enquanto a barra esta na tela — antes ele
   encostava na barra no celular e, no tablet, caia em cima do botao dela. */
@media (max-width:991px){
  .wa-fab{right:14px;width:54px;height:54px}
  .wa-fab svg{width:27px;height:27px;margin:0 13.5px}
  .wa-fab:hover{width:54px}
  .wa-fab:hover span{opacity:0}
  body.mcta-on .wa-fab{bottom:124px}
}
@media (max-width:767px){
  .local-tag{left:12px;right:12px;bottom:12px;padding:14px 16px}
}

/* =========================================================
   DESEMPENHO — promoção de camada sob demanda
   Estes elementos existem em quantidade (8 cartões, 6 passos, 4 camadas...). Deixar
   will-change fixo neles mantinha ~30 camadas na GPU a vida toda da página. O Metal do
   macOS engole; o Direct3D do Windows, sobretudo em vídeo integrado, não. Agora só são
   promovidos enquanto a seção está por perto (data-near, posto pelo JS).
   ========================================================= */
.t-item,.case,.step,.pcard,.layer,.layer-label,.cyl,.layers,
.journey-track,.plan-track,.reveal-media,.reveal-media img,.arch img,.final-bg img{will-change:auto}
[data-near] .t-item,[data-near] .case,[data-near] .step,[data-near] .pcard,
[data-near] .layer,[data-near] .layer-label,[data-near] .cyl,[data-near] .layers,
[data-near] .journey-track,[data-near] .plan-track,
[data-near] .reveal-media img,[data-near] .arch img,[data-near] .final-bg img{will-change:transform}
[data-near] .reveal-media{will-change:clip-path}

/* =========================================================
   DESEMPENHO — níveis medidos em tempo real (data-perf no <html>)
   "media" e "baixa" só entram em máquina que já não está dando conta. Em quem roda
   liso nada muda.
   ========================================================= */
html[data-perf="media"] .glass{-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
html[data-perf="baixa"] .glass{-webkit-backdrop-filter:blur(8px) saturate(135%);backdrop-filter:blur(8px) saturate(135%)}
html[data-perf="baixa"] .pcard,html[data-perf="baixa"] .step,html[data-perf="baixa"] .case-frame,
html[data-perf="baixa"] .faq-item,html[data-perf="baixa"] .cred,html[data-perf="baixa"] .hair-step{
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-perf="baixa"] .grain{display:none}
html[data-perf="baixa"] .portal-ring::before{filter:none}
html[data-perf="baixa"] .portal-ring svg{animation:none}

/* =========================================================
   MAIS CASOS — três lado a lado, todos visíveis sem rolar
   Reaproveita .case-frame / .compare / .chip / .handle da seção de cima,
   por isso a barra de arrastar é exatamente a mesma.
   ========================================================= */
/* A classe .light só troca as cores do texto; o fundo claro tem de ser pintado aqui,
   continuando o tom em que a seção de cima termina (#f8f5f0). */
.cases3{padding-block:clamp(60px,6.5vw,96px);
  background:radial-gradient(75% 70% at 50% 38%,#fffdfa 0%,#f8f5f0 78%)}
.c3-head{text-align:center;justify-items:center;margin-bottom:clamp(24px,2.6vw,40px)}
.c3-head h2{font-size:clamp(2.1rem,3.6vw,3.6rem)}
.c3-head .muted{max-width:56ch}
/* A largura da coluna é derivada da ALTURA da janela: com proporção 3/4, limitar a
   coluna a 40,5vh garante que o cartão inteiro (foto + legenda) caiba na tela, que é
   o ponto de ter os três lado a lado. */
.c3-grid{--c3gap:clamp(14px,2vw,30px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--c3gap);align-items:start;
  max-width:min(100%, calc(40.5vh * 3 + var(--c3gap) * 2));margin-inline:auto}
.c3{min-width:0}
.c3 .case-frame{padding:8px}
.c3 .compare{--pos:100%;border-radius:20px}
.c3 .chip{top:12px;padding:6px 12px;font-size:.8125rem;letter-spacing:.1em}
.c3 .chip.l{left:12px}.c3 .chip.r{right:12px}
.c3 .knob{width:46px;height:46px}
.c3 .knob svg{width:22px;height:22px}
.c3 .case-cap{padding:14px 8px 4px;flex-direction:column;gap:2px}
.c3 .case-cap b{font-size:1.35rem}
.c3-note{margin-top:clamp(18px,2vw,28px);text-align:center;font-size:var(--fs-label);color:var(--texto-2)}

@media (max-width:991px){
  .c3 .knob{width:40px;height:40px}
  .c3 .knob svg{width:19px;height:19px}
  .c3 .chip{top:9px;padding:5px 10px;font-size:.75rem;letter-spacing:.06em}
  .c3 .chip.l{left:9px}.c3 .chip.r{right:9px}
  .c3 .case-cap b{font-size:1.15rem}
  .c3 .case-cap span{font-size:.875rem}
}
/* No celular os três continuam lado a lado, como pedido — só encolhem. */
@media (max-width:767px){
  .cases3{padding-block:70px 60px}
  .c3-grid{gap:8px}
  .c3 .case-frame{padding:4px;border-radius:16px}
  .c3 .compare{border-radius:12px}
  .c3 .knob{width:26px;height:26px}
  .c3 .knob svg{width:13px;height:13px}
  /* com ~120px de largura as etiquetas se sobrepõem e ficam ilegíveis:
     no celular o antes/depois é indicado na legenda do cartão */
  .c3 .chip{display:none}
  .c3 .case-cap::after{content:"antes → depois";display:block;margin-top:3px;white-space:nowrap;
    font-size:.625rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ouro-2)}
  .c3 .case-cap{padding:9px 3px 0}
  .c3 .case-cap b{font-size:.9375rem}
  .c3 .case-cap span{font-size:.75rem;line-height:1.3}
  .c3-note{margin-top:22px;font-size:.875rem}
}

/* =========================================================
   SELETOR DE IDIOMA — bandeiras no header e no menu do celular
   ========================================================= */
.lang{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  border:1px solid rgba(240,226,210,.16);background:rgba(250,244,236,.05)}
.lang-b{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;
  text-decoration:none;color:var(--texto-2);transition:background .35s var(--ease),color .35s var(--ease)}
.lang-b b{font-size:.8125rem;font-weight:600;letter-spacing:.09em}
.lang-b .flag{width:22px;height:22px;flex:none;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 0 0 1px rgba(240,226,210,.3),0 2px 6px rgba(0,0,0,.4);transition:box-shadow .35s var(--ease)}
.lang-b .flag svg{display:block;width:100%;height:100%}
.lang-b:hover{color:var(--marfim)}
.lang-b:hover .flag{box-shadow:0 0 0 1px rgba(220,190,159,.7),0 2px 8px rgba(0,0,0,.5)}
.lang-b.on{background:rgba(220,190,159,.14);color:var(--marfim)}
.lang-b.on .flag{box-shadow:0 0 0 2px var(--ouro),0 2px 10px rgba(220,190,159,.45)}
.lang-b:focus-visible{outline:2px solid var(--ouro-2);outline-offset:2px}
.light .lang{border-color:rgba(150,120,90,.22);background:rgba(120,85,50,.05)}

/* menu do celular: versão maior, alinhada aos itens do menu */
.lang-m{display:none;margin-top:22px;justify-content:center;align-self:center}
.lang-m .lang-b{padding:8px 16px 8px 9px}
.lang-m .lang-b b{font-size:1rem}
.lang-m .lang-b .flag{width:28px;height:28px}

/* espaço apertado: só as bandeiras no header */
@media (max-width:1180px){
  .header .lang .lang-b{padding:5px}
  .header .lang .lang-b b{display:none}
}

/* Celular e tablet: as bandeiras ficam no cabeçalho, ao lado da logo — é o acesso
   internacional, tem de estar visível sem abrir o menu. O `margin-right:auto` cola o
   grupo na logo e empurra o botão do menu para a ponta direita. A cópia que vive dentro
   do menu (.lang-m) fica de reserva para telas estreitas demais, mais abaixo. */
@media (max-width:991px){
  .header-in{gap:10px;padding:10px 10px 10px 18px}
  .header .lang{display:flex;margin-right:auto;gap:2px;padding:3px}
  .header .lang .lang-b{padding:3px}
  .header .lang .lang-b .flag{width:21px;height:21px}
  .lang-m{display:none}
  /* Bandeira pequena em tela de toque: esticar a área de toque na vertical, onde não
     existe vizinho para roubar o clique, leva cada uma a ~48px de altura sem mudar um
     pixel do visual. Na horizontal fica só o padding — alargar aqui faria uma bandeira
     invadir a área da outra. */
  .header .lang .lang-b{position:relative}
  .header .lang .lang-b::after{content:"";position:absolute;inset:-13px 0}
}
@media (max-width:767px){
  .header-in{gap:8px;padding:9px 9px 9px 16px}
  .header .logo img{height:36px}
  .burger{width:44px;height:44px}
  .header .lang{gap:2px;padding:2px}
  .header .lang .lang-b{padding:2px 4px}
  .header .lang .lang-b .flag{width:20px;height:20px}
}
/* Telas de 360-400px (a maioria dos Android e os iPhone mini/SE) ainda cabem, mas com
   folga pequena — um pouco menos em tudo garante que nada encoste. */
@media (max-width:400px){
  .header-in{gap:7px;padding:8px 8px 8px 14px}
  .header .logo img{height:34px}
  .header .lang{gap:1px;padding:2px}
  .header .lang .lang-b .flag{width:19px;height:19px}
}
/* Abaixo de 340px não cabe logo + três bandeiras + menu na mesma barra sem encolher a
   logo a ponto de prejudicar a marca. Nessas telas o seletor volta para dentro do menu. */
@media (max-width:339px){
  .header .lang{display:none}
  .lang-m{display:flex}
}