/* ==========================================================================
   Dra. Maria do Socorro Araújo Gouveia
   Paleta "Musgo & Latão"  ·  Fraunces + Inter Tight
   Atributo de UI: 37 anos de estrada. Peso, calor e tempo.
   Nada aqui tem pressa, porque a consulta dela também não tem.
   ========================================================================== */

/* ---------- 0. FONTES (self-host, subset latin, com métricas de fallback) --- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-sub.woff2') format('woff2');
  font-weight:300 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* medido no arquivo real (soma de avanços da headline, opsz 54 / wght 400)
   contra Georgia. Evita o salto do H1 na troca da fonte: CLS perto de zero. */
@font-face{
  font-family:'Fraunces-fb';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:100.70%;
  ascent-override:97.12%;
  descent-override:25.32%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/inter-tight-sub.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'InterTight-fb';
  src:local('Arial'),local('Helvetica');
  size-adjust:95.97%;
  ascent-override:100.95%;
  descent-override:25.13%;
  line-gap-override:0%;
}

/* ---------- 1. TOKENS ---------- */
:root{
  /* musgo · o verde dela é mais quente e mais terra que sálvia */
  --musgo-900:#1B2317;
  --musgo-800:#242E1D;
  --musgo-700:#33422A;
  --musgo-600:#45553A;
  --oliva-500:#63704F;
  --oliva-400:#8A9573;
  --oliva-300:#B2BB9E;
  --oliva-200:#D1D7C2;
  --oliva-100:#E5E9DC;

  /* latão · ouro envelhecido, não champanhe */
  --latao-800:#63481B;
  --latao-700:#775722;
  --latao-600:#8E6B2C;
  --latao-500:#AC8740;
  --latao-400:#C5A662;
  --latao-300:#DBC69A;
  --latao-100:#F0E5D0;

  /* neutros de linho */
  --linho:#F8F4EA;
  --linho-2:#F1EBDC;
  --line:#DFD8C6;
  --text:#293222;
  --muted:#525C47;

  --wrap:1180px;
  --wrap-estreito:800px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(76px,10vw,138px);
  --hdr-h:74px;

  --f-display:'Fraunces','Fraunces-fb',Georgia,'Times New Roman',serif;
  --f-body:'Inter Tight','InterTight-fb',Arial,Helvetica,sans-serif;

  --sh-1:0 1px 2px rgba(27,35,23,.04),0 8px 24px -14px rgba(27,35,23,.16);
  --sh-2:0 2px 8px rgba(27,35,23,.06),0 30px 56px -30px rgba(27,35,23,.28);

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

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--linho);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .16vw,1.06rem);
  line-height:1.72;
  font-weight:400;
  font-feature-settings:'liga' 1,'calt' 1,'kern' 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
img{height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit}
figure{margin:0}
button{font:inherit;color:inherit}

/* grão de papel · overlay fixo, alfa puro (sem blend), ruído preto.
   Ruído cinza sobre fundo claro CLAREIA o texto e derruba o contraste medido.
   A matriz SOMA os três canais: com .2 em cada, o alfa médio dá 0.3 e o grão
   escurecia a página inteira em 17%. Medido: .055 deixa a textura visível e
   o escurecimento médio abaixo de 4%. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 .055 .055 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. TIPOGRAFIA ---------- */
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:300;color:var(--musgo-900);font-kerning:normal}
/* teto de 3.7rem, não 4.05: com a headline maior a dobra empurrava o CTA
   do hero para 878px num viewport de 900. A mensagem continua grande e o
   botão volta para dentro da primeira tela. */
h1{
  font-size:clamp(2.3rem,1.36rem + 3.72vw,3.7rem);
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0 0 clamp(22px,2.7vw,31px);
}
/* A quebra natural caía em "E saiu deles sem / uma resposta.", partindo a
   frase no ponto mais fraco. Nenhuma largura de coluna resolve: "E saiu deles"
   (291px) cabe folgado e "sem uma resposta." (465px) é mais largo que a linha
   que o balanceador escolhia. Então o trecho é amarrado.
   Medido: a partir de 360px de viewport a linha amarrada (289px na fonte
   mínima) cabe na coluna. Abaixo disso ela volta a quebrar livre, para não
   estourar a largura. */
h1 em .liga{white-space:normal}
@media (min-width:360px){h1 em .liga{white-space:nowrap}}
h1 em{
  display:block;
  font-style:italic;
  font-weight:300;
  color:var(--latao-700);
  margin-top:.14em;
}
h2{
  font-size:clamp(1.78rem,1.3rem + 2.05vw,2.7rem);
  line-height:1.14;
  letter-spacing:-.017em;
  text-wrap:balance;
}
h2 em{font-style:italic;color:var(--latao-700)}
h3{font-size:1.135rem;line-height:1.34;font-weight:400;letter-spacing:-.008em}

.lead{
  font-size:clamp(1.03rem,.99rem + .2vw,1.13rem);
  line-height:1.76;
  color:var(--muted);
  max-width:46ch;
  margin-bottom:.92em;
}
.lead--turn{color:var(--musgo-700);font-weight:500}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--estreito{max-width:var(--wrap-estreito)}
.sec{padding:var(--sec-y) 0;position:relative}
.sec--alt{background:var(--linho-2)}
.escuro{background:var(--musgo-900);color:var(--linho);padding:var(--sec-y) 0;position:relative;overflow:hidden}
.escuro h2,.escuro h3{color:var(--linho)}
.escuro h2 em{color:var(--latao-400)}
.escuro p{color:var(--oliva-300)}

/* ARMADILHA: `ch` resolve contra a fonte do PRÓPRIO elemento. Num container
   com a fonte de corpo, um max-width em ch aperta o h2 (que é display, muito
   maior) e quebra o título em linhas curtas demais. Título mede em `em`,
   texto corrido mede em `ch`. */
.sec__hd{max-width:min(100%,680px);margin-bottom:clamp(42px,5vw,68px)}
.sec__hd h2{max-width:13em}
.sec__hd--centro{margin-inline:auto;text-align:center}
.sec__hd--centro h2{margin-inline:auto}

.sec__lead{margin-top:20px;color:var(--muted);font-size:1.03rem;line-height:1.74;max-width:52ch}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--musgo-900);color:var(--linho);padding:14px 22px;border-radius:0 0 8px 0;
  font-size:.94rem;font-weight:500;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- 5. ELEMENTOS DE MARCA ---------- */
/* Sem filete a esquerda. Aquele tracinho antes do rotulo virou marca de
   pagina gerada por IA, entao saiu do padrao da casa: o rotulo se vira
   sozinho com caixa alta e tracking. */
.eyebrow{
  font-size:.755rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--latao-700);margin:0 0 22px;
}
.eyebrow--claro{color:var(--latao-400)}

.ic{width:1.15em;height:1.15em;flex:none;fill:currentColor}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 30px;border-radius:999px;
  border:1px solid transparent;
  background:var(--musgo-700);color:var(--linho);
  font-family:var(--f-body);font-size:.95rem;font-weight:600;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-1);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{background:var(--musgo-900);box-shadow:var(--sh-2)}
.btn--ghost{background:transparent;color:var(--musgo-700);border-color:var(--line);box-shadow:none}
.btn--ghost:hover{background:transparent;border-color:var(--latao-500);color:var(--musgo-900);box-shadow:none}
.btn--claro{background:var(--latao-400);color:var(--musgo-900)}
.btn--claro:hover{background:var(--latao-300);color:var(--musgo-900)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.875rem}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.cta-row--centro{justify-content:center;margin-top:34px}

:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--latao-600);outline-offset:4px;border-radius:4px;
}
.escuro :where(a,button,summary):focus-visible{outline-color:var(--latao-400)}

/* ---------- 6. HEADER ---------- */
.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(248,244,234,0);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-fixo{
  background:rgba(248,244,234,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom-color:var(--line);
}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:var(--hdr-h)}
.hdr__brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--musgo-900);margin-right:auto}
.hdr__marca{color:var(--latao-600);flex:none}
.hdr__name{font-family:var(--f-display);font-size:1.02rem;font-weight:400;letter-spacing:-.005em;line-height:1.2}
/* o sobrenome sai no mobile para a marca não virar duas linhas e dobrar a
   altura do header. O aria-label do link continua com o nome inteiro, então
   o nome acessível segue contendo o texto visível. */
.hdr__sur{display:none}
.hdr__nav{display:none;gap:28px}
.hdr__nav a{
  position:relative;text-decoration:none;font-size:.9rem;font-weight:500;color:var(--muted);
  padding:6px 0;transition:color .25s var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--latao-600);transition:width .3s var(--ease);
}
.hdr__nav a:hover{color:var(--musgo-900)}
.hdr__nav a:hover::after{width:100%}
.hdr__cta{display:none}

.burger{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  width:46px;height:46px;padding:0 11px;
  background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;
}
.burger span{display:block;height:1.5px;background:var(--musgo-800);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger span:last-child{width:70%;margin-left:auto}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{width:100%;transform:translateY(-3.75px) rotate(-45deg)}

.menu{position:fixed;inset:var(--hdr-h) 0 0;z-index:80;background:var(--linho);overflow-y:auto}
.menu__in{display:flex;flex-direction:column;gap:4px;padding:32px var(--pad) 48px}
.menu__in a{
  padding:16px 0;text-decoration:none;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:1.32rem;font-weight:300;color:var(--musgo-900);
}
.menu__cta{
  border-bottom:0;margin-top:26px;justify-content:center;
  font-family:var(--f-body);font-size:.95rem;font-weight:600;color:var(--linho);
}

/* ---------- 7. HERO ---------- */
/* o hero sobe POR BAIXO do header (que é transparente até rolar), senão
   a aurora começa na altura do header e deixa uma emenda de cor visível. */
.hero{
  position:relative;
  margin-top:calc(var(--hdr-h) * -1);
  padding:calc(var(--hdr-h) + clamp(34px,4.6vw,58px)) 0 clamp(60px,8vw,96px);
  background-image:radial-gradient(circle at 84% 8%,rgba(172,135,64,.10),rgba(138,149,115,.05) 36%,transparent 60%);
  background-repeat:no-repeat;
}
/* Altura FIXA: se dependesse do container, o swap da fonte moveria os blobs
   e isso vira layout shift medido.
   NADA de mask-image aqui. Máscara num container com filho animado tira a
   animação do compositor e obriga a repintar a camada a cada quadro: medido,
   custava 1,2s de Style & Layout e 7 pontos de performance. Em vez de
   mascarar, cada blob é posicionado e dimensionado para o próprio degradê
   já ter chegado a transparente antes da borda do container. */
.aurora{
  position:absolute;inset:0 0 auto 0;height:1120px;z-index:0;
  overflow:hidden;pointer-events:none;
  contain:layout paint size style;
}
.aurora__b{position:absolute;display:block;border-radius:50%;will-change:transform}
.aurora__b--1{
  width:86%;max-width:1000px;aspect-ratio:1;right:-12%;top:-300px;
  background:radial-gradient(circle at 50% 50%,rgba(197,166,98,.17),rgba(197,166,98,.05) 44%,transparent 70%);
}
.aurora__b--2{
  width:70%;max-width:820px;aspect-ratio:1;right:-4%;top:180px;
  background:radial-gradient(circle at 50% 50%,rgba(138,149,115,.13),rgba(138,149,115,.04) 46%,transparent 72%);
}
.aurora__b--3{
  width:50%;max-width:620px;aspect-ratio:1;left:-16%;top:380px;
  background:radial-gradient(circle at 50% 50%,rgba(219,198,154,.14),rgba(99,112,79,.04) 48%,transparent 74%);
}

/* Mobile: topo, foto e resto empilhados no fluxo normal. */
.hero__topo,.hero__resto{position:relative;z-index:2}
.hero__fig{position:relative;z-index:2;max-width:420px;margin:clamp(34px,4.5vw,52px) auto;width:100%;padding-inline:var(--pad)}

.retrato{
  position:relative;z-index:1;
  aspect-ratio:4/5;
  border-radius:22px;
  overflow:hidden;
  background:var(--linho-2);
  box-shadow:var(--sh-2);
  transform:translate3d(0,var(--py,0px),0);
}
/* seletor no ELEMENTO, não no container: imagem futura solta aqui dentro
   não herda proporção nem recorte por acidente. */
.retrato__foto{display:block;width:100%;height:100%;object-fit:cover}

.assinatura{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:46ch}
.assinatura__nome{
  display:block;font-family:var(--f-display);font-size:1.16rem;font-weight:400;
  color:var(--musgo-900);margin-bottom:5px;
}
.assinatura__meta{display:block;font-size:.845rem;color:var(--muted);letter-spacing:.012em;font-variant-numeric:tabular-nums}

/* ---------- 8. CREDENCIAIS · faixa que desliza ----------
   Uma camada so animando `transform` fica no compositor e custa quase nada.
   A pista tem DUAS copias da lista e anda exatamente -50%: quando termina,
   a segunda copia esta no lugar exato onde a primeira comecou, entao o loop
   nao tem emenda. Passar o mouse (ou dar foco em algo dentro) pausa. */
.creds{
  background:var(--linho-2);border-block:1px solid var(--line);
  overflow:hidden;padding:clamp(22px,2.4vw,30px) 0;
}
.creds__pista{display:flex;width:max-content;animation:creds-desliza 52s linear infinite}
.creds:hover .creds__pista,
.creds:focus-within .creds__pista{animation-play-state:paused}
@keyframes creds-desliza{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.creds__lista{display:flex;align-items:center}
.creds__lista li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;white-space:nowrap;
  padding:2px clamp(30px,4vw,64px);
  border-left:1px solid var(--line);
  font-size:.935rem;color:var(--musgo-800);line-height:1.5;
}
.creds__lista span{
  display:block;font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--latao-700);margin-bottom:7px;font-weight:600;
}

/* ---------- 9. CARDS "PARA QUEM" ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card{
  position:relative;padding:clamp(26px,3vw,36px);background:var(--linho);
  transition:background .35s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(172,135,64,.10),transparent 62%);
  transition:opacity .35s var(--ease);
}
.card:hover::before{opacity:1}
.card__ic{width:26px;height:26px;fill:var(--latao-600);margin-bottom:20px;display:block}
.card h3{margin-bottom:11px}
.card p{color:var(--muted);font-size:.965rem;line-height:1.72}
.sec--alt .card{background:var(--linho-2)}

/* ---------- 10. FRENTES DE CUIDADO ---------- */
.frentes{display:grid;grid-template-columns:1fr;gap:18px}
.frente{
  position:relative;padding:clamp(28px,3.2vw,40px);
  background:var(--linho);border:1px solid var(--line);border-radius:14px;
}
.frente--principal{background:var(--musgo-900);border-color:var(--musgo-900);color:var(--linho)}
.frente--principal h3{color:var(--linho)}
.frente--principal p{color:var(--oliva-300)}
.frente__selo{
  font-size:.665rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--latao-700);margin-bottom:24px;
}
.frente--principal .frente__selo{color:var(--latao-400)}
.frente__ic{width:30px;height:30px;fill:var(--latao-600);margin-bottom:18px;display:block}
.frente--principal .frente__ic{fill:var(--latao-400)}
.frente h3{font-size:1.42rem;margin-bottom:13px}
/* A descrição tem classe PRÓPRIA em vez de ser pega por `.frente>p`.
   Aquele seletor também casava com o selo (que é um <p>) e roubava o
   dourado dele nos cards claros, além de brigar por especificidade com a
   cor do card escuro. Estilo no elemento, nunca no container. */
.frente__desc{color:var(--muted);font-size:.985rem;line-height:1.74}
.frente--principal .frente__desc{color:var(--oliva-300)}
.frente__lista{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:11px}
.frente--principal .frente__lista{border-top-color:rgba(219,198,154,.22)}
.frente__lista li{position:relative;padding-left:20px;font-size:.925rem;color:var(--muted);line-height:1.55}
.frente--principal .frente__lista li{color:var(--oliva-200)}
.frente__lista li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--latao-500);
}

.formacao{
  margin-top:clamp(28px,3.4vw,40px);
  padding:clamp(26px,3vw,36px);
  border:1px dashed var(--line);border-radius:14px;
  background:transparent;
}
.formacao__txt h3{font-size:1.06rem;font-family:var(--f-body);font-weight:600;letter-spacing:.005em;margin-bottom:8px}
.formacao__txt p{color:var(--muted);font-size:.9rem;line-height:1.68;max-width:62ch}
.formacao__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.formacao__chips li{
  padding:7px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:.83rem;color:var(--musgo-700);background:var(--linho);
}

/* ---------- 11. TRAJETORIA (escuro) ---------- */
.trajetoria::before{
  content:"";position:absolute;right:-8%;top:-90px;width:520px;height:520px;
  background:radial-gradient(circle at 50% 50%,rgba(172,135,64,.16),transparent 66%);
  pointer-events:none;
}
.trajetoria>.wrap{position:relative;z-index:1}
.ponte-grid{display:grid;gap:clamp(32px,4vw,56px);align-items:start}
.ponte__foto{min-width:0;max-width:460px;margin-inline:auto;width:100%}
.ponte__foto img{display:block;width:100%;height:auto;border-radius:16px}

.ponte{max-width:min(100%,660px);margin-bottom:clamp(40px,4.6vw,58px)}
.ponte__frase{font-size:clamp(2.1rem,1.4rem + 3vw,3.5rem);line-height:1.08;letter-spacing:-.02em;max-width:9.6em}
.ponte__frase em{font-style:italic}
.ponte__autor{
  margin-top:20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oliva-400)!important;
}
.trajetoria__corpo{max-width:62ch;display:grid;gap:1.15em;margin-top:clamp(26px,3vw,36px)}
.trajetoria__corpo p{font-size:1.03rem;line-height:1.82}

.linha{
  display:grid;grid-template-columns:1fr;gap:0;
  margin-top:clamp(48px,5.4vw,72px);
}
.linha__item{padding:26px 0;border-top:1px solid rgba(219,198,154,.2)}
.linha__item:first-child{border-top:0;padding-top:0}
.linha__n{
  display:block;font-family:var(--f-display);font-size:1.22rem;font-style:italic;
  color:var(--latao-400);margin-bottom:12px;letter-spacing:.04em;font-variant-numeric:lining-nums;
}
.linha__item h3{font-size:1.16rem;margin-bottom:8px}
.linha__item p{font-size:.93rem;line-height:1.66}

.tres{
  margin-top:clamp(56px,6.4vw,88px);padding-top:clamp(44px,5vw,64px);
  border-top:1px solid rgba(219,198,154,.2);text-align:center;
}
.tres__grid{margin:0;display:grid;gap:.42em;justify-items:center}
.tres__linha{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.4rem,.98rem + 1.75vw,2.28rem);
  line-height:1.28;color:var(--oliva-200)!important;
}
.tres__linha em{font-style:italic;color:var(--latao-300)}
.tres__fecho{
  margin-top:30px;font-size:.95rem;font-style:italic;color:var(--oliva-400);
  font-family:var(--f-display);
}

/* ---------- 12. PASSOS ---------- */
.passos{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.passo{padding:28px 0;border-bottom:1px solid var(--line)}
.passo__n{
  display:block;font-family:var(--f-display);font-size:1.18rem;font-style:italic;
  color:var(--latao-600);margin-bottom:12px;letter-spacing:.04em;font-variant-numeric:lining-nums;
}
.passo h3{margin-bottom:9px}
.passo p{color:var(--muted);font-size:.955rem;line-height:1.7}

/* Faixa centrada que fecha a dobra, nao caixinha encostada na esquerda. */
.nota{
  display:flex;align-items:center;justify-content:center;gap:13px;text-align:center;
  margin:clamp(40px,4.6vw,58px) auto 0;padding:22px 28px;
  background:var(--linho-2);border:1px solid var(--line);border-radius:12px;
  font-size:.94rem;line-height:1.68;color:var(--muted);max-width:70ch;
}
.nota__ic{width:19px;height:19px;fill:var(--latao-600);flex:none}

/* ---------- 13. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:18px;cursor:pointer;list-style:none;
  padding:24px 0;
  font-family:var(--f-display);font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem);
  font-weight:400;color:var(--musgo-800);line-height:1.32;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;margin-left:auto;margin-top:.44em;width:10px;height:10px;
  border-right:1.5px solid var(--latao-600);border-bottom:1.5px solid var(--latao-600);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover,.faq details[open] summary{color:var(--musgo-900)}
.faq details>div{padding:0 46px 26px 0}
.faq details p{color:var(--muted);font-size:.97rem;line-height:1.76;max-width:68ch}

/* ---------- 14. CTA FINAL ---------- */
.cta{padding:clamp(80px,9.5vw,132px) 0 clamp(64px,7vw,98px)}
.cta__in{text-align:center}
.cta__marca{color:var(--latao-500);margin:0 auto 30px;display:block}
.cta h2{margin-bottom:22px}
.cta__in>p{max-width:52ch;margin-inline:auto;font-size:1.04rem;line-height:1.76}
.cta__meta{
  margin-top:34px;font-size:.775rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oliva-400)!important;max-width:44ch;margin-inline:auto;
}

/* ---------- 15. RODAPE ----------
   Filete no topo porque o CTA também é escuro: sem ele os dois blocos
   viram uma mancha só e o respiro entre eles parece erro de espaçamento. */
.rp{
  background:var(--musgo-900);color:var(--oliva-300);
  padding:clamp(48px,5.4vw,70px) 0 34px;
  border-top:1px solid rgba(219,198,154,.14);
}
.rp__topo{display:grid;grid-template-columns:1fr;gap:40px}
.rp__marca{color:var(--latao-500);margin-bottom:16px;display:block}
.rp__nome{font-family:var(--f-display);font-size:1.16rem;color:var(--linho);line-height:1.3;margin-bottom:10px}
.rp__reg{font-size:.845rem;line-height:1.62;color:var(--oliva-400);font-variant-numeric:tabular-nums}
/* h2 do rodapé precisa herdar a fonte de corpo, senão vira display e some
   na hierarquia visual. Nível mantido em h2 para não pular ordem. */
.rp__col h2{
  font-family:var(--f-body);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--latao-400);
  margin-bottom:18px;
}
.rp__lista{display:grid;gap:12px}
.rp__lista a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.925rem;text-decoration:none;color:var(--oliva-300);
  transition:color .25s var(--ease);
}
.rp__lista a:hover{color:var(--latao-300)}
.rp__lista--texto li{font-size:.925rem;line-height:1.5}
.rp__base{margin-top:clamp(44px,5vw,64px);padding-top:30px;border-top:1px solid rgba(219,198,154,.16)}
.rp__etica{font-size:.79rem;line-height:1.7;color:rgba(178,187,158,.72);max-width:92ch;margin-bottom:20px}
/* .62 de alfa dava 3.97:1 no axe. Cor sólida do token: 5.10:1. */
.rp__copy{font-size:.79rem;line-height:1.7;color:var(--oliva-400)}
.rp__copy a{color:rgba(219,198,154,.8);text-decoration:underline;text-underline-offset:3px}
.rp__copy a:hover{color:var(--latao-300)}

/* ---------- 16. FAB ---------- */
.fab{
  position:fixed;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);z-index:70;
  display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;
  background:var(--musgo-700);color:var(--linho);
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.fab .ic{width:25px;height:25px}
.fab.is-ligado{opacity:1;visibility:visible;transform:none}

/* ==========================================================================
   17. MOTION
   O hero anima por CSS puro: animation roda no parse e não espera JS.
   Reveal por opacity + translateY, nunca blur (blur em 40 elementos
   custa Style & Layout caro). Fade curto e movimento longo: fade longo
   cria janela de baixo contraste e a auditoria acusa, com razão.
   ========================================================================== */
/* O H1 e o PAINEL do retrato pintam na hora, sem animação nenhuma: são as
   duas maiores áreas da primeira tela, e enquanto elas estão entrando a
   página não fecha visualmente. O filmstrip do Lighthouse mostrava o painel
   ainda clareando em 3,0s, e o Speed Index parava em 4,2s por causa disso.
   Só o texto de apoio entra, e entra rápido: a mensagem vem antes do efeito. */
.hero-in{animation:hero-sobe .42s var(--ease-out) both}
.hero-in--1{animation-delay:.03s}
.hero-in--2{animation-delay:.08s}
.hero-in--3{animation-delay:.13s}
@keyframes hero-sobe{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

.reveal{opacity:1;transform:none}
.js .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .28s linear,transform .7s var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}

/* aurora só ganha vida DEPOIS do load: blur grande animando durante a
   medição nunca deixa a página estabilizar e destrói o Speed Index. */
.hero.is-vivo .aurora__b--1{animation:auroraA 30s ease-in-out infinite}
.hero.is-vivo .aurora__b--2{animation:auroraB 36s ease-in-out infinite}
.hero.is-vivo .aurora__b--3{animation:auroraC 42s ease-in-out infinite}
.hero.is-parado .aurora__b{animation-play-state:paused}
/* SÓ translate. `scale` num transform animado obriga o Chrome a rasterizar
   de novo a cada passo de escala, e num blob de 1200px isso volta para a
   thread principal. Translate puro fica no compositor e custa zero. */
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4.5%,5%,0)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(5.5%,-4%,0)}}
@keyframes auroraC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(4%,4.5%,0)}}

.btn--ima{transform:translate3d(var(--bx,0),var(--by,0),0);transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .18s var(--ease-out)}
.btn--ima:hover{transform:translate3d(var(--bx,0),calc(var(--by,0px) - 2px),0)}

/* ==========================================================================
   18. RESPONSIVO (mobile first: daqui pra cima)
   ========================================================================== */
@media (min-width:600px){
  .cards{grid-template-columns:1fr 1fr}
  .passos{grid-template-columns:1fr 1fr;column-gap:44px}
  .passo:nth-child(2){border-top:0}
  .linha{grid-template-columns:1fr 1fr;column-gap:44px}
  .linha__item:nth-child(2){border-top:0;padding-top:0}
  .rp__topo{grid-template-columns:1fr 1fr}
}

@media (min-width:961px){
  .hdr__nav{display:flex}
  .hdr__cta{display:inline-flex}
  .hdr__sur{display:inline}
  .burger{display:none}
  .menu{display:none}

  .hero{padding-block:clamp(60px,6vw,92px) clamp(88px,10vw,140px)}
  /* A foto ocupa a dobra inteira a direita e sangra ate a borda da tela.
     O texto e segurado em pouco mais da metade, entao nunca corre por baixo
     dela: nao dependo de casar padding com a largura da imagem. */
  .hero__fig{
    position:absolute;right:0;top:0;bottom:0;
    width:min(42vw,620px);
    max-width:none;margin:0;padding:0;
  }
  .hero__topo>*,.hero__resto>*{max-width:min(53%,580px)}
  .hero__resto .lead{max-width:46ch}
  .hero__resto{margin-top:clamp(28px,3vw,40px)}
  .retrato{
    height:100%;aspect-ratio:auto;
    border-radius:0;box-shadow:none;background:transparent;overflow:visible;
  }
  .retrato__foto{object-position:50% 4%}


  .cards{grid-template-columns:repeat(3,1fr)}
  .frentes{grid-template-columns:repeat(3,1fr);gap:20px}
  .formacao{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px;align-items:start}
  .formacao__chips{margin-top:0}

  .ponte-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  .ponte__foto{max-width:none;margin-inline:0}
  .linha{grid-template-columns:repeat(4,1fr);column-gap:0}
  .linha__item{
    border-top:0;border-left:1px solid rgba(219,198,154,.2);
    padding:0 clamp(16px,2vw,28px);
  }
  .linha__item:first-child{border-left:0;padding-left:0}
  .linha__item:nth-child(2){padding-top:0}

  .passos{grid-template-columns:repeat(4,1fr);column-gap:0;border-top:0}
  .passo{
    border-bottom:0;border-left:1px solid var(--line);
    padding:0 clamp(16px,2vw,28px);
  }
  .passo:first-child{border-left:0;padding-left:0}

  .rp__topo{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
}


/* ==========================================================================
   19. MOVIMENTO REDUZIDO
   Desliga tudo. Nenhuma exceção "só esse aqui é sutil".
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-in{animation:none!important}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .aurora__b{animation:none!important}
  .creds__pista{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .creds__pista>[aria-hidden="true"]{display:none}
  .retrato{transform:none!important}
  .btn--ima{transform:none!important}
  .fab{transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- 20. IMPRESSAO ---------- */
@media print{
  .hdr,.menu,.fab,.aurora,body::after{display:none!important}
  body{background:#fff;color:#000}
  .escuro,.rp{background:#fff;color:#000}
  .escuro h2,.escuro h3,.escuro p,.rp p{color:#000!important}
}