/* ═══════════════════════════════════════════════════════════════
   Dr. Yhaggo Sawchuk — Cirurgião-Dentista
   Partido: escuro premium com duas pausas em papel.
   Tinta · branco quente · âmbar (no papel, o mesmo âmbar em bronze)

   FUNDOS CLAROS DO SISTEMA — .paper → #sobre e #etica.
   Elementos fixos passam por cima deles: a .nav fica sólida (fundo
   próprio) assim que a hero termina e a .mbar tem fundo próprio.
   Nenhum elemento fixo pode depender do fundo da seção.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fontes (auto-hospedadas, só latin) ───────────────────────── */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"),
      url(../assets/fonts/inter-latin-wght-normal.woff2) format("woff2")}

/* ── Tokens ───────────────────────────────────────────────────── */
:root{
  /* tinta */
  --ink:#08090a;
  --ink-2:#0e1012;
  --graphite:#17191c;
  --white:#f4efe7;
  --mute:#a39e96;          /* texto de apoio — sólido, nunca opacidade */
  --faint:#8b867e;         /* legendas pequenas */
  --line:rgba(244,239,231,.10);
  --line-2:rgba(244,239,231,.20);
  --amber:#d9a05b;
  --amber-hi:#f0bd7c;

  /* papel */
  --paper:#efe8dc;
  --paper-hi:#f7f3ec;
  --paper-ink:#17140f;
  --paper-mute:#5a5148;
  --bronze:#8a5a22;
  --paper-line:rgba(23,20,15,.13);
  --paper-line-2:rgba(23,20,15,.26);

  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(1.25rem,5vw,5.5rem);
  --maxw:90rem;
  /* borda do conteúdo, alinhada ao .wrap mesmo em elementos de largura total */
  --edge:max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad)));
  --sec:clamp(4.5rem,11vw,10rem);
  --nav-h:4.5rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);scroll-padding-top:calc(var(--nav-h) + 1rem)}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--sans);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
h1,h2,h3{margin:0;font-weight:400;line-height:1.05}
p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body.is-locked{overflow:hidden}

/* Grão sobre todo o site (no papel, vira textura de papel) */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.paper :focus-visible{outline-color:var(--bronze)}
[tabindex="-1"]:focus{outline:none}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:1rem;top:1rem;z-index:300;padding:.8rem 1.2rem;border-radius:999px;
  background:var(--amber);color:var(--ink);font-size:.8rem;font-weight:500;
  transform:translateY(-220%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none}

/* ── Utilitários de tipografia ────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.kicker{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem;
  font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
}
.kicker::before{content:"";flex:none;width:2rem;height:1px;background:currentColor}
.paper .kicker{color:var(--bronze)}

.h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.5rem,5.2vw,4.75rem);line-height:1.02;letter-spacing:-.018em;
}
.h2 em{font-style:italic;color:var(--amber-hi)}
.paper .h2 em{color:var(--bronze)}

.lead{margin-top:1.5rem;max-width:44ch;color:var(--mute);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.7}
.paper .lead{color:var(--paper-mute)}

/* ── Botões ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  min-height:3.25rem;padding:.95rem 1.75rem;border-radius:999px;
  font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn svg{flex:none}
.btn--solid{background:var(--amber);color:var(--ink);box-shadow:0 18px 44px -20px rgba(217,160,91,.6)}
.btn--solid:hover{background:var(--amber-hi);transform:translateY(-2px);box-shadow:0 22px 50px -20px rgba(217,160,91,.75)}
.btn--lg{min-height:3.75rem;padding:1.1rem 2.2rem;font-size:.8rem}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:2rem;height:var(--nav-h);padding-inline:var(--edge);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav.is-solid{
  background:rgba(8,9,10,.92);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{display:flex;align-items:center;gap:.75rem;margin-right:auto;min-height:44px}
.nav__mark{
  position:relative;flex:none;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--amber);box-shadow:0 0 0 3px rgba(217,160,91,.12);
}
.nav__mark::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--amber)}
.nav__name{font-family:var(--serif);font-weight:500;font-size:1.15rem;letter-spacing:.01em;white-space:nowrap}
.nav__links{display:flex;gap:clamp(1.25rem,2.4vw,2.25rem)}
.nav__links a{
  position:relative;padding-block:.6rem;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.3rem;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--out);
}
.nav__links a:hover,.nav__links a[aria-current="true"]{color:var(--white)}
.nav__links a:hover::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1)}
.nav__cta{
  display:inline-flex;align-items:center;min-height:2.6rem;padding:0 1.25rem;
  border:1px solid var(--line-2);border-radius:999px;white-space:nowrap;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.nav__cta:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}

.nav__burger{
  display:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.nav__burger span{display:block;width:22px;height:1.5px;background:var(--white);transition:transform .4s var(--out)}
.nav__burger.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

@media (max-width:960px){
  :root{--nav-h:4rem}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
}

/* Menu mobile em tela cheia */
.mmenu{
  position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 1.5rem) var(--pad) max(2rem,env(safe-area-inset-bottom));
  background:rgba(8,9,10,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  opacity:0;transition:opacity .4s var(--ease);
}
.mmenu[hidden]{display:none}
.mmenu.is-open{opacity:1}
.mmenu__links{display:flex;flex-direction:column}
.mmenu__links a{
  display:flex;align-items:baseline;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-weight:300;font-size:clamp(2rem,8.5vw,3rem);line-height:1.2;
  opacity:0;transform:translateY(16px);
}
.mmenu.is-open .mmenu__links a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mmenu.is-open .mmenu__links a:nth-child(2){transition-delay:.05s}
.mmenu.is-open .mmenu__links a:nth-child(3){transition-delay:.1s}
.mmenu.is-open .mmenu__links a:nth-child(4){transition-delay:.15s}
.mmenu.is-open .mmenu__links a:nth-child(5){transition-delay:.2s}
.mmenu.is-open .mmenu__links a:nth-child(6){transition-delay:.25s}
.mmenu__links span{flex:none;font-family:var(--sans);font-size:.64rem;font-weight:500;letter-spacing:.2em;color:var(--amber)}
.mmenu__foot{display:flex;flex-direction:column;gap:.75rem;margin-top:2.5rem}
.mmenu__foot p{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);line-height:1.6}
.mmenu__wa{
  align-self:flex-start;padding-bottom:.2rem;border-bottom:1px solid var(--line-2);
  font-family:var(--serif);font-size:1.6rem;color:var(--amber);
}

/* ═══════════════════════════════════════════════════════════════
   1. HERO — a seção é o trilho; o palco fica grudado no topo.
   Camadas do palco: mostrador 0 · pôster 1 · canvas 2 · brilho e
   vinheta 3 · rótulos 4 · texto 5 · escurecimento final 8.
   ═══════════════════════════════════════════════════════════════ */
.hero{position:relative;background:var(--ink)}
.js .hero{height:640vh}

.hero__stage{
  position:relative;height:100vh;height:100svh;min-height:30rem;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 70% at 66% 48%,#15110d 0%,var(--ink) 72%);
}
.js .hero__stage{position:sticky;top:0}

#scene{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%}

.hero__dial{
  position:absolute;left:-500px;top:-500px;z-index:0;width:1000px;height:1000px;
  color:var(--amber);opacity:0;pointer-events:none;transform-origin:50% 50%;will-change:transform,opacity;
}

/* Pôster: o mesmo quadro inicial do 3D, para quem fica sem WebGL.
   Renderizado em quadrado com o dente no centro — a altura manda. */
.hero__poster{
  position:absolute;z-index:1;left:67%;top:50%;width:auto;height:100%;max-width:none;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;display:none;
}

.hero__glow{
  position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
  background:radial-gradient(75% 75% at 50% 50%,#ffc58a 0%,#ff8a3d 26%,#a3380c 58%,#2a0f05 86%,var(--ink) 100%);
}
.hero__vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(130% 95% at 62% 46%,transparent 52%,rgba(8,9,10,.85) 100%),
    linear-gradient(0deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,.45) 20%,transparent 38%),
    linear-gradient(180deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.5) 8%,transparent 20%);
}
.hero__fade{position:absolute;inset:0;z-index:8;background:var(--ink);opacity:0;pointer-events:none}

/* Rótulos anatômicos — posição e comprimento vêm do hero.js */
.hero__labels{position:absolute;inset:0;z-index:4;pointer-events:none}
.lbl{position:absolute;left:0;top:0;width:0;height:0;opacity:0;visibility:hidden;will-change:transform,opacity}
.lbl__line{
  position:absolute;left:0;top:-.5px;width:0;height:1px;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--amber),rgba(244,239,231,.55));
}
.lbl__dot{
  position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--amber-hi);
  box-shadow:0 0 0 4px rgba(217,160,91,.22),0 0 18px rgba(255,180,100,.55);
}
.lbl__txt{
  position:absolute;left:0;top:0;width:max-content;line-height:1.3;
  font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--white);
  text-shadow:0 1px 14px rgba(8,9,10,.95);
}

/* Abertura */
.hero__copy{position:absolute;z-index:5;left:var(--edge);bottom:clamp(6.5rem,15vh,10rem);width:min(50rem,52%)}
.hero__kicker{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.75rem;
  font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);
}
.hero__kicker::before{content:"";flex:none;width:2.25rem;height:1px;background:currentColor}
.hero__loc{margin-left:-.9rem}
.hero__loc::before{content:"\a0·\a0"}
.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,6.6vw,7rem);line-height:.94;letter-spacing:-.022em;
}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .ln>span{display:block}
.hero__title em{font-style:italic;color:var(--amber-hi)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;margin-top:2.5rem}
.hero__sub{display:flex;align-items:center;gap:.85rem;max-width:25ch;font-size:.82rem;line-height:1.5;color:var(--mute)}
.hero__sub i{
  flex:none;width:1px;height:2.4rem;background:linear-gradient(var(--amber),transparent);
  transform-origin:top;animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{0%{transform:scaleY(0);opacity:0}35%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* Entrada do título, linha a linha (main.js marca .is-ready) */
.js .hero__title .ln>span{transform:translate3d(0,108%,0)}
.js .hero__kicker,.js .hero__actions{opacity:0;transform:translate3d(0,14px,0)}
.hero.is-ready .hero__title .ln>span{transform:none;transition:transform .9s var(--out)}
.hero.is-ready .hero__title .ln:nth-child(2)>span{transition-delay:.08s}
.hero.is-ready .hero__title .ln:nth-child(3)>span{transition-delay:.16s}
.hero.is-ready .hero__kicker{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero.is-ready .hero__actions{opacity:1;transform:none;transition:opacity .6s var(--ease) .45s,transform .6s var(--ease) .45s}

/* Capítulos — opacidade e deslocamento vêm do hero.js */
.hero__ch,.hero__final{position:absolute;z-index:5;left:var(--edge);bottom:clamp(6.5rem,15vh,10rem);opacity:0;will-change:opacity,transform}
.hero__ch{width:min(27rem,34%)}
.hero__chn{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem;
  font-size:.7rem;font-weight:500;letter-spacing:.24em;color:var(--amber);font-variant-numeric:tabular-nums;
}
.hero__chn::after{content:"";flex:none;width:2.25rem;height:1px;background:currentColor}
.hero__ch h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.5rem,4.4vw,4.4rem);line-height:1;letter-spacing:-.015em}
.hero__ch p{margin-top:1.1rem;max-width:34ch;color:var(--mute);font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.7}
.hero__final{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(3rem,6.4vw,6.6rem);line-height:1;letter-spacing:-.02em}

/* Régua inferior: figura, capítulos e progresso */
.hero__bar{
  position:absolute;z-index:5;left:var(--edge);right:var(--edge);bottom:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding:1.1rem 0 max(1.4rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);
}
.hero__prog{
  position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--amber);
  transform-origin:0 50%;transform:scaleX(var(--p,0));
}
.hero__fig{display:flex;flex-direction:column;gap:.15rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.6}
.hero__fig span:first-child{color:var(--mute)}
.hero__chapters{display:flex;gap:clamp(1.25rem,3vw,2.75rem)}
.hero__chapters li{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  transition:color .4s var(--ease);
}
.hero__chapters b{font-weight:500;font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.hero__chapters li.is-on{color:var(--white)}
.hero__chapters li.is-on b{color:var(--amber)}

/* Sem trilho (sem JS, sem WebGL, movimento reduzido): a hero vira uma tela
   estática e o texto dos capítulos fica só para leitor de tela. */
html:not(.webgl) .hero__ch,html:not(.webgl) .hero__final{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html:not(.webgl) .hero__chapters,html:not(.webgl) .hero__prog{display:none}
html:not(.js) .hero,html.no-webgl .hero{height:auto}   /* html.: vence o 520vh do celular */
html:not(.js) .hero__poster,.no-webgl .hero__poster{display:block}
html:not(.js) .hero__sub,.no-webgl .hero__sub{display:none}   /* sem travessia, sem convite a rolar */
.no-webgl #scene,.no-webgl .hero__labels,.no-webgl .hero__glow,.no-webgl .hero__fade{display:none}
.no-webgl .hero__copy{opacity:1!important;transform:none!important;visibility:visible!important}
/* !important: se o contexto 3D cair no meio, o hero.js já deixou estilo inline */
html:not(.js) .hero__dial,.no-webgl .hero__dial{
  left:67%;top:50%;width:94svh;height:94svh;opacity:.45!important;transform:translate(-50%,-50%)!important;
}

@media (max-width:860px){
  .js .hero{height:520vh}
  .hero__stage{background:radial-gradient(90% 60% at 50% 33%,#15110d 0%,var(--ink) 72%)}
  .hero__poster{left:50%;top:33%;height:66.7%}
  html:not(.js) .hero__dial,.no-webgl .hero__dial{left:50%;top:33%;width:67svh;height:67svh}
  .hero__vignette{
    background:
      radial-gradient(120% 80% at 50% 36%,transparent 50%,rgba(8,9,10,.8) 100%),
      linear-gradient(0deg,rgba(8,9,10,.96) 0%,rgba(8,9,10,.78) 30%,transparent 52%),
      linear-gradient(180deg,rgba(8,9,10,.6) 0%,transparent 14%);
  }
  .hero__copy,.hero__ch,.hero__final{left:var(--pad);right:var(--pad);width:auto;bottom:calc(4.25rem + env(safe-area-inset-bottom))}
  .hero__kicker{
    display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.75rem;row-gap:.35rem;
    margin-bottom:1.1rem;font-size:.62rem;letter-spacing:.15em;
  }
  .hero__kicker::before{width:1.5rem}
  .hero__loc{grid-column:2;margin-left:0}
  .hero__loc::before{content:none}
  .hero__title{font-size:clamp(2.6rem,11.4vw,4.4rem)}
  .hero__actions{margin-top:1.6rem;gap:1rem 1.25rem}
  .hero__sub{font-size:.76rem}
  .hero__sub i{height:1.9rem}
  .hero__ch h2{font-size:clamp(2.2rem,9.4vw,3.2rem)}
  .hero__ch p{margin-top:.8rem;font-size:.92rem;line-height:1.6}
  .hero__final{font-size:clamp(2.6rem,11vw,4rem)}
  .hero__bar{left:var(--pad);right:var(--pad);padding:.85rem 0 max(1rem,env(safe-area-inset-bottom))}
  .hero__fig{display:none}
  .hero__chapters{width:100%;justify-content:space-between;gap:.75rem}
  .hero__chapters li span{display:none}
  .hero__chapters li.is-on span{display:inline}
  .lbl__txt{font-size:.6rem;letter-spacing:.14em}
}
/* Celular baixo (SE, 667px): o bloco de texto encolhe para o dente ter faixa */
@media (max-width:860px) and (max-height:700px){
  .hero__title{font-size:clamp(2.4rem,10.4vw,4rem)}
  .hero__actions{margin-top:1.25rem}
  .hero__sub{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   2. MANIFESTO
   ═══════════════════════════════════════════════════════════════ */
.manifesto{background:var(--ink);padding-block:clamp(6rem,15vw,13rem)}
.manifesto__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
.manifesto__line{
  grid-column:1/-1;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.9rem,8.4vw,8.6rem);line-height:.98;letter-spacing:-.025em;
}
.manifesto__line--em{grid-column:3/-1;font-style:italic;color:var(--amber-hi)}
.manifesto__body{
  grid-column:7/12;margin-top:clamp(3rem,6vw,5rem);max-width:44ch;
  color:var(--mute);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.75;
}
.manifesto__body::before{content:"";display:block;width:3rem;height:1px;margin-bottom:1.5rem;background:var(--amber)}
@media (max-width:860px){
  .manifesto__line--em{grid-column:1/-1;padding-left:12%}
  .manifesto__body{grid-column:1/-1}
}

/* ═══════════════════════════════════════════════════════════════
   3. ATENDIMENTO — índice editorial com placa fixa
   ═══════════════════════════════════════════════════════════════ */
.svc{background:var(--ink-2);padding-block:var(--sec);border-top:1px solid var(--line)}
.svc__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.svc__side{align-self:stretch}
.svc__sticky{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
.svc__plate{
  position:relative;width:min(100%,21rem,36vh);aspect-ratio:1;margin-top:clamp(2.5rem,5vh,4rem);
  color:var(--amber);
}
.svc__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 180s linear infinite}
.svc__glyphs{position:absolute;inset:26%}
.svc__glyphs svg{
  position:absolute;inset:0;width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.9) rotate(-8deg);
  transition:opacity .45s var(--ease),transform .6s var(--out);
  filter:drop-shadow(0 0 16px rgba(217,160,91,.35));
}
.svc__glyphs svg.is-on{opacity:1;transform:none}
.svc__count{
  position:absolute;right:-.25rem;bottom:-.25rem;display:flex;align-items:center;gap:.6rem;
  font-size:.7rem;font-weight:500;letter-spacing:.2em;color:var(--faint);font-variant-numeric:tabular-nums;
}
.svc__count span{font-family:var(--serif);font-weight:300;font-size:2.4rem;letter-spacing:0;line-height:1;color:var(--white)}
.svc__count i{width:1.75rem;height:1px;background:var(--line-2)}
@keyframes spin{to{rotate:360deg}}

.svc__list{border-top:1px solid var(--line)}
.proc{
  position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:clamp(1rem,2.5vw,2.5rem);
  padding-block:clamp(2rem,3.4vw,3rem);border-bottom:1px solid var(--line);
}
.proc::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--out);
}
.proc.is-active::before{transform:scaleX(1)}
.proc__n{padding-top:.75rem;font-size:.72rem;font-weight:500;letter-spacing:.2em;color:var(--faint);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.proc.is-active .proc__n{color:var(--amber)}
.proc__glyph{display:none;color:var(--amber)}
.proc__glyph svg{width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.proc__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,2.6vw,2.45rem);line-height:1.08;letter-spacing:-.01em}
.proc__body p{margin-top:.75rem;max-width:48ch;color:var(--mute);line-height:1.7}
.proc__link{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;margin-top:.9rem;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  transition:gap .2s var(--ease),color .2s var(--ease);
}
.proc__link:hover{gap:.85rem;color:var(--amber-hi)}

@media (max-width:960px){
  .svc__grid{grid-template-columns:1fr;gap:3rem}
  .svc__sticky{position:static}
  .svc__plate{display:none}
  .proc{grid-template-columns:3.25rem minmax(0,1fr);grid-template-areas:"g n" "g b";row-gap:.4rem;column-gap:1.25rem}
  .proc__n{grid-area:n;padding-top:0}
  .proc__glyph{display:block;grid-area:g;width:3.25rem;height:3.25rem;opacity:.6;transition:opacity .3s var(--ease)}
  .proc.is-active .proc__glyph{opacity:1}
  .proc__body{grid-area:b}
}

/* ═══════════════════════════════════════════════════════════════
   Papel (fundo claro) — #sobre e #etica
   ═══════════════════════════════════════════════════════════════ */
.paper{background:var(--paper);color:var(--paper-ink)}

/* 4. SOBRE */
.about{padding-block:var(--sec)}
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,7vw,8rem);align-items:center}
.about__frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:#d8cfbf}
.about__frame::after{content:"";position:absolute;inset:.9rem;border:1px solid rgba(247,243,236,.4);pointer-events:none}
.about__frame img{width:100%;height:112%;margin-top:-6%;object-fit:cover;filter:saturate(.85) contrast(1.03);will-change:transform}
.about__media figcaption{margin-top:1rem;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute)}
.about__p{margin-top:1.4rem;max-width:54ch;color:var(--paper-mute);line-height:1.75}
.about__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2.5rem,4vw,3.5rem);border-top:1px solid var(--paper-line-2);
}
.about__facts div{padding:1.1rem 1.25rem 0 0}
.about__facts div+div{padding-left:1.25rem;border-left:1px solid var(--paper-line)}
.about__facts dt{font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze)}
.about__facts dd{margin-top:.45rem;font-family:var(--serif);font-weight:500;font-size:1.22rem;line-height:1.3}
@media (max-width:860px){
  .about__grid{grid-template-columns:1fr}
  .about__media{max-width:26rem}
  .about__facts{grid-template-columns:1fr}
  .about__facts div,.about__facts div+div{padding:1rem 0;border-left:0;border-bottom:1px solid var(--paper-line)}
}

/* ═══════════════════════════════════════════════════════════════
   5. MÉTODO — seis etapas num trilho contínuo
   ═══════════════════════════════════════════════════════════════ */
.method{background:var(--ink);padding-block:var(--sec)}
.method__head{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,6vw,6rem);align-items:end;
  margin-bottom:clamp(3.5rem,7vw,6rem);
}
.method__head .kicker{grid-column:1/-1}
.method__head .lead{margin-top:0}
.trk-list{max-width:64rem;margin-left:auto}
.trk{display:grid;grid-template-columns:2.25rem minmax(0,8.5rem) minmax(0,1fr);column-gap:clamp(1.25rem,3vw,3rem)}
.trk__num,.trk__body{padding-bottom:clamp(2.75rem,5vw,4.5rem)}
.trk__rail{position:relative;justify-self:center;align-self:stretch;width:1px;background:var(--line-2)}
.trk:first-child .trk__rail{background:linear-gradient(180deg,transparent,var(--line-2) 1rem)}
.trk:last-child .trk__rail{background:linear-gradient(180deg,var(--line-2) 40%,transparent)}
.trk__fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--amber-hi),var(--amber))}
.trk__dot{
  position:absolute;left:50%;top:.85rem;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line-2);
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.trk.is-live .trk__dot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(217,160,91,.16)}
.trk__num{
  font-family:var(--serif);font-weight:300;font-size:clamp(3.2rem,6vw,5.6rem);line-height:.85;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(244,239,231,.28);transition:-webkit-text-stroke-color .5s var(--ease);
}
.trk.is-live .trk__num{-webkit-text-stroke-color:var(--amber)}
.trk__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.1}
.trk__body p{margin-top:.8rem;max-width:52ch;color:var(--mute);line-height:1.75}
@media (max-width:860px){
  .method__head{grid-template-columns:1fr}
  .method__head .lead{margin-top:1.25rem}
  .trk{grid-template-columns:1.5rem minmax(0,1fr);column-gap:1.1rem}
  .trk__rail{grid-row:1/span 2}
  .trk__num{grid-column:2;padding-bottom:.6rem;font-size:2.8rem}
  .trk__body{grid-column:2}
  .trk__dot{top:1rem}
}

/* ═══════════════════════════════════════════════════════════════
   6. ÉTICA — em forma de documento
   ═══════════════════════════════════════════════════════════════ */
.ethics{padding-block:var(--sec)}
.ethics__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.ethics__head{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
.ethics .h2{font-size:clamp(2.5rem,4.6vw,4.25rem)}
.ethics__doc{
  position:relative;padding:clamp(2rem,4vw,3.5rem) clamp(1.35rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  background:var(--paper-hi);border:1px solid var(--paper-line);
}
.ethics__doc::before{
  content:"";position:absolute;left:clamp(1.35rem,4vw,3.5rem);right:clamp(1.35rem,4vw,3.5rem);top:1rem;height:4px;
  border-top:1px solid var(--paper-line-2);border-bottom:1px solid var(--paper-line-2);
}
.clause{display:grid;grid-template-columns:3.75rem minmax(0,1fr);gap:1.25rem;padding-block:1.75rem;border-top:1px solid var(--paper-line)}
.clause:first-child{border-top:0}
.clause__n{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.25;color:var(--bronze);white-space:nowrap}
.clause h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.45rem,2vw,1.8rem);line-height:1.15}
.clause p{margin-top:.6rem;max-width:56ch;color:var(--paper-mute);line-height:1.7}
.ethics__note{
  margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--paper-line-2);
  font-size:.78rem;line-height:1.6;color:var(--paper-mute);
}
@media (max-width:960px){
  .ethics__grid{grid-template-columns:1fr;gap:3rem}
  .ethics__head{position:static}
}
@media (max-width:520px){
  .clause{grid-template-columns:1fr;gap:.5rem}
}

/* ═══════════════════════════════════════════════════════════════
   7. FORMAÇÃO
   ═══════════════════════════════════════════════════════════════ */
.edu{background:var(--ink-2);padding-block:var(--sec)}
.edu__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.edu__list{border-top:1px solid var(--line)}
.edu__list li{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr) minmax(0,.85fr);gap:1.5rem;align-items:baseline;
  padding-block:1.45rem;border-bottom:1px solid var(--line);
}
.edu__year{font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.edu__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.2}
.edu__org{font-size:.86rem;line-height:1.5;color:var(--mute)}
@media (max-width:960px){
  .edu__grid{grid-template-columns:1fr;gap:3rem}
}
@media (max-width:640px){
  .edu__list li{grid-template-columns:1fr;gap:.35rem}
}

/* ═══════════════════════════════════════════════════════════════
   8. CTA FINAL
   ═══════════════════════════════════════════════════════════════ */
.cta{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(7rem,16vw,13rem) var(--pad);
  background:radial-gradient(60% 70% at 50% 100%,rgba(217,160,91,.13),transparent 70%),var(--ink);
  border-top:1px solid var(--line);
}
.cta__dial{
  position:absolute;left:50%;top:50%;z-index:-1;width:min(62rem,160%);height:auto;aspect-ratio:1;
  translate:-50% -50%;color:var(--amber);opacity:.5;animation:spin 240s linear infinite;
  -webkit-mask:radial-gradient(closest-side,transparent 30%,#000 58%,transparent 100%);mask:radial-gradient(closest-side,transparent 30%,#000 58%,transparent 100%);
}
.cta__inner{position:relative;display:flex;flex-direction:column;align-items:center;max-width:48rem;margin-inline:auto}
.cta .kicker{justify-content:center}
.cta .kicker::after{content:"";flex:none;width:2rem;height:1px;background:currentColor}
.cta__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:.98;letter-spacing:-.022em}
.cta__title em{font-style:italic;color:var(--amber-hi)}
.cta__lead{margin-top:1.75rem;max-width:40ch;color:var(--mute);font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.7}
.cta .btn{margin-top:2.75rem}
.cta__fine{margin-top:1.5rem;font-size:.74rem;letter-spacing:.06em;color:var(--faint)}
@media (max-width:520px){
  .cta .btn{width:100%;padding-inline:1.2rem;white-space:normal}
}

/* ═══════════════════════════════════════════════════════════════
   Barra fixa de contato (mobile)
   ═══════════════════════════════════════════════════════════════ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:98;display:none;pointer-events:none;
  padding:.7rem var(--pad) max(.7rem,env(safe-area-inset-bottom));
  background:rgba(8,9,10,.94);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(130%);transition:transform .5s var(--out);
}
.mbar.is-visible{transform:none;pointer-events:auto}
.mbar__wa{
  display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;border-radius:999px;
  background:var(--amber);color:var(--ink);
  font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.9);
}
@media (max-width:860px){ .mbar{display:block} }

/* ═══════════════════════════════════════════════════════════════
   RODAPÉ
   ═══════════════════════════════════════════════════════════════ */
.foot{
  padding-bottom:2.5rem;border-top:1px solid var(--line);
  background:radial-gradient(120% 80% at 12% 0%,rgba(217,160,91,.05),transparent 60%),var(--ink-2);
}
.foot__label{margin-bottom:1rem;font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}

.foot__top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem clamp(2rem,5vw,4rem);
  padding-block:clamp(3rem,7vh,4.5rem);border-bottom:1px solid var(--line);
}
.foot__hailtitle{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.015em}
.foot__wa{
  display:inline-flex;align-items:center;gap:.95rem;flex-shrink:0;
  padding:.9rem 1.6rem .9rem 1rem;border:1px solid var(--line-2);border-radius:999px;background:rgba(244,239,231,.03);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.foot__wa:hover{border-color:var(--amber);background:rgba(217,160,91,.09);transform:translateY(-2px)}
.foot__wa-ico{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--ink)}
.foot__wa-txt{display:flex;flex-direction:column;font-size:1.05rem;line-height:1.25}
.foot__wa-txt small{margin-bottom:.2rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

.foot__grid{
  display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:clamp(2.2rem,4vw,3.5rem);
  padding-block:clamp(3rem,6vh,4rem);
}
.foot__mark{display:block;margin-bottom:1.4rem;color:var(--amber)}
.foot__brand{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15}
.foot__role{margin-top:.5rem;font-size:.86rem;color:var(--mute)}
.foot__cro{
  display:inline-block;margin-top:.9rem;padding:.3rem .7rem;border:1px solid var(--line-2);border-radius:2px;
  font-size:.7rem;letter-spacing:.14em;color:var(--amber);
}
.foot__list li{margin-bottom:.45rem;font-size:.88rem;color:var(--mute)}
.foot__list a{color:var(--white);transition:color .2s var(--ease)}
.foot__list a:hover{color:var(--amber)}
.foot__note{margin-top:1rem;font-size:.78rem;line-height:1.65;color:var(--faint)}
.foot__note--rule{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
.foot__more{
  display:inline-block;margin-top:1.1rem;padding-bottom:2px;border-bottom:1px solid rgba(217,160,91,.4);
  font-size:.78rem;color:var(--amber);transition:color .2s var(--ease),border-color .2s var(--ease);
}
.foot__more:hover{color:var(--amber-hi);border-color:var(--amber-hi)}
.foot__nav li{margin-bottom:.35rem}
.foot__nav a{display:inline-block;padding-block:.2rem;font-size:.88rem;color:var(--mute);transition:color .2s var(--ease)}
.foot__nav a:hover{color:var(--amber)}
.foot__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.foot__ig{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem 1.05rem;
  border:1px solid var(--line-2);border-radius:999px;font-size:.82rem;color:var(--mute);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.foot__ig svg{flex:none}
.foot__ig:hover{color:var(--amber);border-color:var(--amber);background:rgba(217,160,91,.08)}

.foot__legal{padding-top:2rem;border-top:1px solid var(--line)}
.foot__disclaimer{max-width:78ch;font-size:.74rem;line-height:1.75;color:var(--faint)}
.foot__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.foot__bar p{font-size:.72rem;color:var(--faint)}
.foot__privacy,.foot__by a{color:var(--mute);border-bottom:1px solid var(--line-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
.foot__privacy:hover,.foot__by a:hover{color:var(--amber);border-color:var(--amber)}

@media (max-width:1080px){ .foot__grid{grid-template-columns:1fr 1fr} }
@media (max-width:860px){
  .foot{padding-bottom:6.5rem}
  .foot__top{flex-direction:column;align-items:flex-start}
  .foot__wa{width:100%}
  .foot__grid{grid-template-columns:1fr;gap:2.4rem}
  .foot__col--brand{padding-bottom:2rem;border-bottom:1px solid var(--line)}
  .foot__bar{flex-direction:column;gap:.5rem}
}

/* ═══════════════════════════════════════════════════════════════
   Entradas por rolagem (main.js marca .is-in, uma vez)
   ═══════════════════════════════════════════════════════════════ */
.js .reveal{opacity:0;transform:translate3d(0,16px,0)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease) var(--d,0ms),transform .55s var(--ease) var(--d,0ms);
}

/* Toque: sem hover preso */
@media (hover:none){
  .btn--solid:hover,.foot__wa:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   Movimento reduzido — desliga tudo, inclusive o trilho da hero
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .hero{height:auto}
  .js .reveal,.js .hero__kicker,.js .hero__actions{opacity:1;transform:none}
  .js .hero__title .ln>span{transform:none}
  .hero__ch,.hero__final{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hero__chapters,.hero__prog,.hero__sub{display:none}
}