/* @fontes-inicio */
/* Fontes hospedadas no próprio domínio (subset latin do Google Fonts).
   Bodoni Moda e Instrument Sans são variáveis: os 3 pesos apontam para o mesmo arquivo. */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/bodoni-moda-400.woff2') format('woff2');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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/instrument-sans-var.woff2') format('woff2');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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Parisienne';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/parisienne-400.woff2') format('woff2');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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* @fontes-fim */
:root{
  --navy-900:#16202E;
  --navy:#2A3F5F;
  --navy-600:#3A5375;
  --navy-400:#5A6E8C;
  --gold:#CF9658;
  --gold-light:#E0B77E;
  --bronze-ink:#7A5A33;
  --paper:#EFF1F4;
  --paper-2:#E4E8ED;
  --white:#FFFFFF;

  --ink:var(--navy-900);
  --ink-soft:#28374B;

  /* Uma sans carrega titulo, texto e interface (decisao de 09/09: aproximar do
     abladvogados.com, que e todo sem serifa). A Bodoni sobrou no "FP" do logo,
     que e desenho de marca, nao tipografia de leitura. */
  --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:var(--body);
  --leitura:var(--body);
  --marca:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --script:"Parisienne","Brush Script MT",cursive;

  --wrap:1180px;
  --gut:clamp(20px,5vw,56px);

  /* Escala tipografica. O leitor tipico deste site tem 60 anos ou mais:
     nenhum texto de leitura desce de 16px e os rotulos em mono maiusculo,
     que antes iam a 11px, param em 15px com menos entreletra. */
  /* Em rem, nao em px: e o que faz o site obedecer ao "tamanho da fonte" que
     a pessoa ja escolheu no celular. 1rem = 16px no aparelho padrao. */
  --t-rotulo:1rem;       /* 16px  mono: eyebrow, data, selo, UF, etapa */
  --t-apoio:1.0625rem;   /* 17px  dica, nota, legenda, mensagem de erro */
  --t-menor:1.125rem;    /* 18px  texto secundario em card ou item */
  --t-corpo:1.3125rem;   /* 21px  leitura -- sans tem altura-de-x maior que */
  --t-lead:1.4375rem;    /* 23px  serifa: 21 aqui le como os 22 de antes */

  color-scheme:only light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--leitura);
  font-weight:500;   /* sem as serifas para segurar a linha, o corpo sobe de peso */
  font-size:var(--t-corpo);
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
/* height:auto e o que impede a foto de esticar: com width:100% e sem ele, a
   altura fica presa no atributo height do HTML. Em /dr-diego a foto saia
   381x1201 sendo 576x864 -- 52% de deformacao. Quem precisa de altura fixa
   (.hero-photo) ou de proporcao propria (.galeria) declara e vence por
   especificidade. */
img{max-width:100%;height:auto;display:block}
/* Linha curta no celular (24-31 caracteres) + palavra de 16 letras
   ("previdenciarista") = mancha esburacada. O html ja declara pt-BR;
   Chrome Android e Safari iOS hifenizam. Titulo nao hifeniza: fica feio. */
p,li,dd,address,.resp,.resumo,.intro{
  -webkit-hyphens:auto;hyphens:auto;
  hyphenate-limit-chars:8 4 4;
}
h1,h2,h3,b,strong,a,.btn,.eyebrow,.tag,.selo{-webkit-hyphens:manual;hyphens:manual}
/* valvula para "letra enorme" (rem base 24px): so age quando a palavra nao
   cabe na linha -- "aposentadoria," em Bodoni 54px passa dos 343px do celular */
h1,h2,.eyebrow,.lead,.capa p{overflow-wrap:anywhere}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-rotulo);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bronze-ink);
  margin:0 0 18px;
  text-wrap:balance;
}
.on-navy .eyebrow{color:var(--gold-light)}

/* Titulo em sans pesada com tracking negativo: e o que da bloco compacto sem
   depender de serifa. -0.02em e o limite antes de as letras se tocarem. */
h1,h2,h3{
  font-family:var(--display);font-weight:700;font-variation-settings:normal;
  letter-spacing:-.02em;margin:0;text-wrap:balance;
}
h2{font-size:clamp(1.75rem,3.4vw,2.625rem);line-height:1.14}
h3{font-size:1.5rem;line-height:1.3}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-size:1.1875rem;font-weight:600;
  padding:16px 28px;border:1.5px solid transparent;border-radius:2px;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,color .18s ease;
}
.btn-primary{background:var(--gold);color:var(--navy-900)}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-ghost{border-color:var(--navy-600);color:var(--white)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-light)}
.btn-dark{background:var(--navy);color:var(--white)}
.btn-dark:hover{background:var(--navy-900);transform:translateY(-2px)}

/* ---------- marca ---------- */
.mark{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--gold)}
.mark-glyph{
  position:relative;width:44px;height:44px;flex:none;
  border:1px solid var(--gold);
  display:grid;place-items:center;
}
.mark-glyph::before{
  content:"FP";
  font-family:var(--marca);font-size:22px;font-weight:500;
  color:var(--gold);letter-spacing:.03em;line-height:1;
  transform:translateY(-3px);
}
.mark-glyph::after{
  content:"";position:absolute;left:-5px;right:-5px;bottom:11px;height:1px;
  background:var(--navy);
}
footer .mark-glyph::after{background:var(--navy)}
.mark-word{line-height:1}
.mark-word b{
  display:block;font-family:var(--script);font-weight:400;
  font-size:28px;color:var(--gold-light);letter-spacing:.01em;
}
.mark-word span{
  display:block;font-family:var(--mono);font-size:12px;
  letter-spacing:.16em;color:var(--bronze-ink);text-transform:uppercase;
  margin-top:3px;
}
.on-navy .mark-word span{color:var(--gold-light);opacity:.85}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:var(--navy);
  border-bottom:1px solid rgba(207,150,88,.28);
}
.nav{display:flex;align-items:center;gap:28px;height:82px}
.nav nav{margin-left:auto;display:flex;gap:26px}
.nav nav a{
  font-size:1.0625rem;font-weight:600;text-decoration:none;color:#DFE5EC;
  padding:12px 0;border-bottom:1.5px solid transparent;
}
.nav nav a:hover{color:var(--gold-light);border-color:var(--gold)}
.nav .tel{
  font-family:var(--mono);font-size:1.0625rem;color:var(--gold-light);
  text-decoration:none;white-space:nowrap;padding:12px 0;
}
.nav .btn{padding:13px 22px;font-size:1.0625rem}
@media(max-width:980px){.nav nav,.nav .tel{display:none}.nav{height:70px}}
@media(max-width:560px){
  .nav{gap:12px;height:64px}
  .mark{gap:10px}
  .mark-glyph{width:36px;height:36px}
  .mark-glyph::before{font-size:18px}
  .mark-glyph::after{bottom:9px}
  /* a marca fica em px de proposito: e lettering, nao leitura. Em rem ela
     crescia com a preferencia do sistema e estourava o cabecalho de 375px. */
  .mark-word b{font-size:20px;white-space:nowrap}
  .mark-word span{font-size:10.5px;letter-spacing:.12em;white-space:nowrap}
  .nav .btn{padding:10px 15px;font-size:0.9375rem;white-space:nowrap;margin-left:auto}
}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;overflow:hidden}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:end;padding-top:clamp(40px,5vw,60px);
}
.hero h1{
  font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1.08;color:#fff;
  margin-bottom:18px;max-width:16ch;
}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero p.lead{
  font-size:clamp(1.25rem,1.6vw,1.5rem);color:#D3DBE5;max-width:44ch;margin:0 0 26px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;padding-bottom:clamp(32px,4.4vw,56px)}
.hero-photo{position:relative;align-self:end;margin-bottom:-1px}
.hero-photo img{
  width:100%;max-width:500px;margin-left:auto;
  height:clamp(420px,46vw,600px);object-fit:cover;object-position:50% 14%;
  filter:saturate(.82) contrast(1.04);
  mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(42,63,95,0) 45%,rgba(42,63,95,.75) 100%);
  pointer-events:none;
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;align-items:start;gap:0}
  .hero-cta{padding-bottom:34px}
  .hero-photo{margin:0 calc(var(--gut) * -1) -1px}
  .hero-photo img{
    max-width:none;width:100%;margin-left:0;
    height:clamp(250px,56vw,340px);object-position:50% 16%;
    mask-image:none;
  }
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(42,63,95,.85) 0%,rgba(42,63,95,.15) 38%,rgba(22,32,46,.35) 100%);
  }
}

/* ---------- régua de anos (assinatura) ---------- */
.regua{background:var(--navy-900);border-top:1px solid rgba(207,150,88,.3)}
.regua-in{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:34px 32px;
}
.marca-ano{
  position:relative;padding:20px 24px 0 0;
  border-top:1px solid rgba(207,150,88,.42);
}
.marca-ano::before{
  content:"";position:absolute;top:-1px;left:0;width:1px;height:13px;background:var(--gold);
}
.marca-ano:last-child{border-top-color:rgba(207,150,88,.18)}
.marca-ano b{
  display:block;font-family:var(--mono);font-size:clamp(1.125rem,1.8vw,1.375rem);
  font-weight:500;color:var(--gold-light);letter-spacing:.04em;
}
.marca-ano span{
  display:block;font-size:var(--t-apoio);color:#A7B4C6;margin-top:6px;line-height:1.5;
}
.marca-ano:last-child b{color:#fff}
@media(max-width:700px){
  .regua-in{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .regua-in::before{display:none}
}

/* ---------- credenciais ---------- */
.credenciais{background:var(--white);border-bottom:1px solid var(--paper-2)}
.credenciais ul{
  list-style:none;margin:0;padding:24px 0;display:flex;flex-wrap:wrap;
  gap:14px 40px;align-items:center;
}
.credenciais li{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.04em;
  color:var(--ink-soft);display:flex;align-items:center;gap:10px;
}
.credenciais li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none}

/* ---------- seções ---------- */
section{padding:clamp(56px,8vw,110px) 0}
.sec-head{max-width:44ch;margin-bottom:clamp(36px,5vw,56px)}
/* :not(.eyebrow) -- sem isso a regra vencia .eyebrow por especificidade e o
   rotulo saia em 24px, colado no titulo e cinza nas secoes navy */
.sec-head p:not(.eyebrow){color:var(--ink-soft);margin:16px 0 0;font-size:var(--t-lead);line-height:1.6}

/* perguntas */
.perguntas{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--paper-2)}
.pergunta{background:var(--paper);padding:clamp(26px,3.4vw,40px)}
.pergunta .q{
  font-family:var(--display);font-size:clamp(1.4375rem,2.2vw,1.75rem);line-height:1.22;
  margin:0 0 14px;
}
.pergunta .q::before{content:"“";color:var(--gold);margin-right:2px}
.pergunta .q::after{content:"”";color:var(--gold)}
.pergunta p{margin:0 0 1.1em;color:var(--ink-soft);font-size:1.25rem}
.pergunta .tag{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;
  color:var(--bronze-ink);
}
@media(max-width:760px){.perguntas{grid-template-columns:1fr}}

/* portas de entrada
   Nove destinos nomeados pelo problema de quem chega; o nome juridico fica
   embaixo, em rotulo. Quem nao sabe o nome da regra acha o proprio caso na
   primeira linha; quem procurou o termo no buscador acha na segunda. */
.portas-head{margin:clamp(40px,5vw,60px) 0 22px;max-width:52ch}
.portas-head h3{font-size:clamp(1.5rem,2.3vw,1.8125rem);line-height:1.22}
.portas-head p{margin:10px 0 0;color:var(--ink-soft);font-size:var(--t-menor)}
.portas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--paper-2);border:1px solid var(--paper-2);
}
.porta{
  background:var(--white);padding:26px 26px 22px;text-decoration:none;
  display:flex;flex-direction:column;gap:14px;
  transition:background-color .2s ease;
}
.porta:hover{background:var(--paper)}
.porta b{
  font-family:var(--display);font-weight:400;font-size:1.4375rem;line-height:1.26;
  color:var(--ink);letter-spacing:-.01em;text-wrap:balance;
}
.porta span{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.06em;
  text-transform:uppercase;color:var(--bronze-ink);line-height:1.45;
  margin-top:auto;
}
/* a seta cola na última palavra pelo nbsp. Tem de ser inline: como
   inline-block ela é uma caixa atômica, o nbsp não liga nada e ela descia
   sozinha para a linha de baixo no celular. Inline não aceita translate —
   daí o deslize no hover vir de margin-left. */
.porta span::after{
  content:"\00a0\2192";color:var(--gold);
  transition:margin-left .25s ease;
}
.porta:hover span::after{margin-left:5px}
@media(max-width:940px){.portas{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.portas{grid-template-columns:1fr}}

/* passos */
.passos-sec{background:var(--navy);color:#fff}
.passos-sec h2{color:#fff}
.passos-sec .sec-head p:not(.eyebrow){color:#D3DBE5}
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:8px}
.passos::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:rgba(207,150,88,.35);
}
.passo{padding:0 22px 0 0;position:relative}
.passo::before{
  content:"";position:absolute;top:6px;left:0;width:11px;height:11px;
  background:var(--gold);border-radius:50%;
}
.passo b{
  display:block;font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.12em;
  color:var(--gold-light);margin:30px 0 8px;
}
.passo h3{color:#fff;font-size:1.375rem;margin-bottom:8px}
.passo p{margin:0;font-size:var(--t-menor);color:#C2CCDA;line-height:1.65}
.marca-ano span{color:#A7B4C6}
@media(max-width:820px){
  .passos{grid-template-columns:1fr;gap:26px}
  .passos::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}
  .passo{padding:0 0 0 32px}
  .passo::before{top:5px}
  .passo b{margin-top:0}
}

/* sobre */
.sobre{background:var(--white)}
.sobre-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,72px);align-items:center}
.sobre-foto{position:relative;padding:0 18px 18px 0}
.sobre-foto img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 12%;
  filter:grayscale(.15) contrast(1.03);position:relative;z-index:1}
.sobre-foto::before{
  content:"";position:absolute;right:0;bottom:0;width:66%;height:62%;
  border:1px solid var(--gold);
}
.sobre p{color:var(--ink-soft)}
.sobre .destaque{
  font-family:var(--display);font-size:clamp(1.375rem,2.1vw,1.6875rem);line-height:1.42;
  color:var(--ink);border-left:2px solid var(--gold);padding-left:22px;margin:26px 0;
}
.formacao{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:9px}
.formacao li{font-size:var(--t-menor);color:var(--ink-soft);display:flex;gap:12px}
.formacao li span{
  font-family:var(--mono);font-size:var(--t-rotulo);color:var(--bronze-ink);
  flex:none;width:88px;padding-top:3px;letter-spacing:.02em;
}
@media(max-width:820px){.sobre-grid{grid-template-columns:1fr}}

/* depoimentos */
.entregas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.entrega{
  background:var(--white);padding:32px;border-top:2px solid var(--gold);
  display:flex;flex-direction:column;
}
.entrega p{margin:0 0 24px;font-size:1.25rem;line-height:1.65}
.entrega cite{margin-top:auto}
.entrega cite{
  font-style:normal;font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bronze-ink);
}
@media(max-width:860px){.entregas{grid-template-columns:1fr}}

/* unidades */
.unidades-sec{background:var(--white)}
.unidades{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--paper-2);border:1px solid var(--paper-2)}
.unidade{background:var(--white);padding:clamp(26px,3.2vw,38px)}
.unidade h3{margin-bottom:6px}
.unidade .uf{font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.12em;color:var(--bronze-ink);text-transform:uppercase}
.unidade address{font-style:normal;color:var(--ink-soft);font-size:1.25rem;margin:14px 0 20px;line-height:1.65}
.unidade a{
  display:inline-block;font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--gold);padding:10px 0;
}
@media(max-width:760px){.unidades{grid-template-columns:1fr}}

/* cta final */
.cta-final{background:var(--navy-900);color:#fff;text-align:center}
.cta-final h2{color:#fff;max-width:20ch;margin-inline:auto}
.cta-final p{color:#D3DBE5;max-width:50ch;margin:18px auto 34px}
.cta-final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* rodapé */
footer{background:var(--navy);color:#C2CCDA;padding:56px 0 34px;font-size:1.125rem}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;align-items:start}
footer h4{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 14px;font-weight:500;
}
footer a{color:#DFE5EC;text-decoration:none}
footer a:hover{color:var(--gold-light)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer ul a{display:inline-block;padding:11px 0}
.legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:10px 26px;font-size:var(--t-rotulo);color:#BAC5D3;
}
.aviso{
  font-size:var(--t-apoio);color:#BAC5D3;line-height:1.7;margin:18px 0 0;max-width:62ch;
}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* zé-ninguém a confirmar */
.tbd{
  font-family:var(--mono);font-size:.92em;color:#4E3818;
  background:rgba(122,90,51,.2);padding:3px 8px;border-radius:2px;white-space:nowrap;
}
/* quatro dos cinco marcadores vivem sobre papel (áreas, consentimento, os dois
   endereços); só o do rodapé cai no navy. O padrão é o escuro. */
.on-navy .tbd{color:#F2DCBE;background:rgba(207,150,88,.3)}

/* menos movimento: cada animação autônoma tem o próprio gate (motion.css, scroll.css).
   Aqui só o que é global de verdade. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* =====================================================================
   PÁGINAS INTERNAS
   ===================================================================== */

/* ---------- faixa de topo das internas ---------- */
.capa{background:var(--navy);color:#fff;padding:clamp(46px,6vw,74px) 0 clamp(40px,5vw,60px)}
.capa .trilha{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.capa .trilha a{text-decoration:none;opacity:.92;display:inline-block;padding:10px 0}
.capa .trilha a:hover{opacity:1;text-decoration:underline}
.capa .trilha i{font-style:normal;color:var(--gold);opacity:.65}
.capa.capa-artigo h1{max-width:26ch}
.capa h1{
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(2rem,3.9vw,3.125rem);line-height:1.1;margin:0;max-width:18ch;text-wrap:balance;
}
.capa p{font-size:clamp(1.25rem,1.6vw,1.5rem);color:#D3DBE5;max-width:52ch;margin:20px 0 0;line-height:1.6}

/* ---------- prosa ---------- */
.prosa{max-width:58ch}
.prosa h2{font-size:clamp(1.625rem,2.8vw,2.125rem);margin:clamp(38px,4vw,52px) 0 16px}
.prosa h3{font-size:1.5625rem;margin:32px 0 12px}
.prosa p{margin:0 0 1.15em;color:var(--ink-soft)}
.prosa strong{color:var(--ink);font-weight:600}
.prosa ul,.prosa ol{margin:0 0 22px;padding-left:22px;color:var(--ink-soft)}
.prosa li{margin-bottom:9px}
.prosa li::marker{color:var(--gold)}
.prosa a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

.nota{
  border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:30px 0;
  font-family:var(--display);font-size:clamp(1.3125rem,1.9vw,1.5625rem);line-height:1.45;color:var(--ink);
}
.aviso-caixa{
  background:var(--white);border:1px solid var(--paper-2);border-top:2px solid var(--gold);
  padding:26px 28px;margin:30px 0;
}
.aviso-caixa p:last-child{margin-bottom:0}
.aviso-caixa .rot{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bronze-ink);margin:0 0 10px;
}

/* ---------- áreas ---------- */
.area{border-top:1px solid var(--paper-2);padding:clamp(34px,4vw,50px) 0}
.area:first-of-type{border-top:0;padding-top:0}
.area-topo{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;margin-bottom:20px}
.area-num{font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.1em;color:var(--bronze-ink);padding-top:10px}
.area h2{font-size:clamp(1.6875rem,2.9vw,2.25rem)}
.area .intro{max-width:62ch;color:var(--ink-soft);margin:0 0 28px}
.itens{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:1px;background:var(--paper-2)}
.item{background:var(--paper);padding:24px 26px}
.item h3{font-size:1.375rem;font-family:var(--body);font-weight:600;margin:0 0 8px;letter-spacing:0}
.item p{margin:0;font-size:var(--t-menor);color:var(--ink-soft);line-height:1.65}

/* ---------- publicações ---------- */
.artigos{display:grid;gap:1px;background:var(--paper-2);border-block:1px solid var(--paper-2)}
.artigo-linha{
  background:var(--paper);display:grid;grid-template-columns:152px 1fr 28px;
  gap:clamp(18px,3vw,38px);align-items:baseline;padding:28px 22px 28px 0;
  text-decoration:none;transition:background-color .16s ease;
}
.artigo-linha:hover{background:var(--white)}
.artigo-linha .data{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.06em;color:var(--bronze-ink);
  text-transform:uppercase;padding-top:6px;
}
.artigo-linha h3{font-size:clamp(1.3125rem,2vw,1.625rem);margin:0 0 8px;text-wrap:balance}
.artigo-linha .resumo{margin:0;color:var(--ink-soft);font-size:1.25rem;max-width:60ch}
.artigo-linha .seta{font-family:var(--mono);color:var(--gold);font-size:1.5rem;align-self:center}
.selo{
  display:inline-block;font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.1em;
  text-transform:uppercase;color:#4E3818;background:#EFDDC3;
  padding:4px 10px;margin-bottom:10px;
}
@media(max-width:760px){
  .artigo-linha{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .artigo-linha .seta{display:none}
  .artigo-linha .data{padding-top:0}
}

/* ---------- formulário ---------- */
.form-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,68px);align-items:start}
form.contato{display:grid;gap:18px}
.campo{display:grid;gap:7px}
.campo label{font-size:1.125rem;font-weight:600;color:var(--ink)}
.campo .dica{font-size:var(--t-apoio);color:var(--ink-soft);font-weight:400;display:block;line-height:1.5}
.campo input,.campo textarea,.campo select{
  font-family:var(--body);font-size:1.25rem;color:var(--ink);
  background:var(--white);border:1px solid #8E9AAA;border-radius:2px;
  padding:15px 16px;width:100%;
}
.campo textarea{min-height:150px;resize:vertical;line-height:1.6}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy);
}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:1.125rem;color:var(--ink-soft);line-height:1.55}
.consent input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--navy)}
form.contato button{width:fit-content;border:0;font-family:var(--body)}
.form-nota{font-size:var(--t-apoio);color:var(--ink-soft);margin:0;line-height:1.55}
@media(max-width:820px){.form-grid{grid-template-columns:1fr}.dupla{grid-template-columns:1fr}}

/* ---------- lateral ---------- */
.lado{display:grid;gap:1px;background:var(--paper-2);border:1px solid var(--paper-2)}
.lado-bloco{background:var(--white);padding:26px 28px}
.lado-bloco h3{font-size:1.375rem;margin:0 0 10px}
.lado-bloco .rot{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bronze-ink);margin:0 0 12px;
}
.lado-bloco p,.lado-bloco address{margin:0 0 8px;font-style:normal;font-size:1.25rem;color:var(--ink-soft);line-height:1.65}
.lado-bloco a{display:inline-block;font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding:10px 0}
.horarios{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.horarios li{display:flex;justify-content:space-between;gap:16px;font-size:var(--t-menor);color:var(--ink-soft)}
.horarios li b{font-family:var(--mono);font-size:var(--t-apoio);font-weight:500;color:var(--ink);white-space:nowrap}

/* ---------- perfil ---------- */
.perfil{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,70px);align-items:start}
.perfil-foto{position:sticky;top:110px;padding:0 18px 18px 0;margin:0}
.perfil-foto .moldura{position:relative}
.perfil-foto img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 12%;
  position:relative;z-index:1;filter:grayscale(.12) contrast(1.03)}
.perfil-foto .moldura::before{
  content:"";position:absolute;right:-18px;bottom:-18px;width:66%;height:60%;border:1px solid var(--gold);
}
.perfil-foto figcaption{
  font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.04em;color:var(--bronze-ink);
  margin-top:22px;position:relative;z-index:1;line-height:1.55;
}
@media(max-width:860px){.perfil{grid-template-columns:1fr}.perfil-foto{position:static}}

.trajetoria{list-style:none;margin:0;padding:0;display:grid}
.trajetoria li{
  display:grid;grid-template-columns:124px 1fr;gap:20px;
  padding:16px 0;border-top:1px solid var(--paper-2);
}
.trajetoria li:first-child{border-top:0;padding-top:0}
.trajetoria .quando{font-family:var(--mono);font-size:var(--t-rotulo);color:var(--bronze-ink);letter-spacing:.03em;padding-top:4px}
.trajetoria .oque b{display:block;font-weight:600;color:var(--ink);font-size:1.25rem}
.trajetoria .oque span{font-size:var(--t-menor);color:var(--ink-soft)}
@media(max-width:560px){.trajetoria li{grid-template-columns:1fr;gap:4px}}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.galeria img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%}
@media(max-width:660px){.galeria{grid-template-columns:repeat(2,1fr)}}

/* ---------- faixa de chamada ---------- */
.faixa-cta{background:var(--navy);color:#fff;padding:clamp(48px,6vw,76px) 0}
.faixa-cta .in{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.faixa-cta h2{color:#fff;font-size:clamp(1.5625rem,2.7vw,2.125rem);max-width:22ch}
.faixa-cta p{color:#D3DBE5;margin:14px 0 0;max-width:50ch}
.faixa-cta .acoes{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:820px){.faixa-cta .in{grid-template-columns:1fr}}

/* ---------- mapa provisório ---------- */
.mapa{
  background:
    repeating-linear-gradient(90deg,rgba(42,63,95,.08) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(42,63,95,.08) 0 1px,transparent 1px 46px),
    var(--paper);
  border:1px solid var(--paper-2);
  aspect-ratio:16/6;display:grid;place-items:center;text-align:center;padding:20px;margin-top:26px;
}
.mapa span{font-family:var(--mono);font-size:var(--t-rotulo);letter-spacing:.06em;color:var(--bronze-ink)}

.fundo-branco{background:var(--white)}
.fundo-branco .item{background:var(--white)}
.fundo-branco .itens{background:var(--paper-2)}
.fundo-branco .artigo-linha{background:var(--white)}
.fundo-branco .artigo-linha:hover{background:var(--paper)}

/* ---------- navegação ativa ---------- */
.nav nav a[aria-current="page"]{color:var(--gold-light);border-color:var(--gold)}


/* ---------- ajustes de ligação entre páginas ---------- */
.pergunta .tag a{
  text-decoration:none;color:var(--bronze-ink);
  border-bottom:1px solid rgba(122,90,51,.35);
  display:inline-block;padding:10px 0;
}
.pergunta .tag a:hover{color:var(--navy);border-color:var(--gold)}

.capa + section{padding-top:clamp(48px,6vw,80px)}
.rota[hidden]{display:none}
.unidade .mapa{margin-top:22px}
.sec-head + .artigos{margin-top:4px}

.consent a{display:inline-block;padding:8px 0}
.consent input{width:26px;height:26px;margin-top:1px}

/* .prosa p ganharia da .selo por especificidade — cor reafirmada aqui */
.prosa .selo{color:#5E441F;margin-bottom:14px}

/* a seta é decorativa, mas fica legível mesmo assim */
.artigo-linha .seta{color:var(--bronze-ink)}
.artigo-linha:hover .seta{color:var(--navy)}

@media(max-width:760px){
  .tbd{white-space:normal}
}

@media(max-width:620px){
  .area-topo{grid-template-columns:1fr;gap:4px}
  .area-num{padding-top:0}
}

/* foco programático no painel de confirmação: útil ao leitor de tela, sem anel visual */
.form-ok h3:focus{outline:0}

/* ---------- cards "o que sai da análise" ---------- */
.entrega h3{font-family:var(--display);font-weight:400;font-size:clamp(1.375rem,2vw,1.625rem);line-height:1.22;margin:0 0 12px}
.entrega p{margin:0}

/* ---------- responsivo: achados da auditoria em 320–1024 px ---------- */
.lado-bloco a,footer a{overflow-wrap:anywhere}
.faq .resp a{display:inline-block;padding:6px 0}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- cidade do escritório = link para o perfil do Google da unidade (08/10/2026) ---------- */
a.gmn{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1px;text-underline-offset:.18em}
a.gmn:hover{text-decoration-thickness:2px}
/* dentro do cartão da unidade e do bloco lateral do contato, "a" vira botão sublinhado — aqui não */
.unidade a.gmn,.lado-bloco a.gmn{display:inline;padding:0;border-bottom:0;font-weight:inherit}
.unidade address a.fone{display:inline;padding:0;border-bottom:1px solid var(--gold);font-weight:600;white-space:nowrap}
.nobr{white-space:nowrap}
/* bio da home: "2019–2021" cabe numa linha só */
.formacao li span{width:6.6em;white-space:nowrap}

/* ---------- prévia da unidade (hover na cidade) ---------- */
.previa{
  position:fixed;z-index:95;width:320px;max-width:calc(100vw - 24px);
  display:block;background:var(--white);color:var(--ink);text-decoration:none;
  border:1px solid var(--paper-2);border-top:3px solid var(--gold);border-radius:4px;
  box-shadow:0 18px 40px -18px rgba(22,32,46,.55),0 2px 8px rgba(22,32,46,.12);
  font-family:var(--body);text-align:left;opacity:0;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;
}
.previa.acima{transform:translateY(-6px)}
.previa.on{opacity:1;transform:none}
.previa[hidden]{display:none}
.previa::before{
  content:"";position:absolute;left:var(--seta,50%);top:-9px;width:12px;height:12px;
  background:var(--gold);transform:translateX(-50%) rotate(45deg);z-index:-1;
}
.previa.acima::before{top:auto;bottom:-7px;background:var(--white);
  border-right:1px solid var(--paper-2);border-bottom:1px solid var(--paper-2)}
.previa-mapa{display:block;position:relative;line-height:0;background:var(--paper)}
.previa-mapa img{display:block;width:100%;height:auto;aspect-ratio:320/140}
.previa-osm{position:absolute;right:0;bottom:0;line-height:1.2;font-size:11px;
  padding:2px 6px;background:rgba(255,255,255,.85);color:var(--ink-soft)}
.previa-corpo{display:block;padding:14px 18px 16px}
.previa-corpo > span{display:block}
.previa-rot{font-size:13px;color:var(--bronze-ink);font-weight:500;margin-bottom:4px}
.previa-nome{font-weight:700;font-size:1.0625rem;line-height:1.3;margin-bottom:6px}
.previa-end{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.previa-fone{font-family:var(--mono);font-size:15px;margin-top:6px;color:var(--ink)}
.previa-cta{margin-top:12px;font-weight:600;font-size:15px;color:var(--navy);
  border-bottom:2px solid var(--gold);display:inline-block !important;padding-bottom:2px}
.previa:hover .previa-cta{border-color:var(--navy)}
@media(prefers-reduced-motion:reduce){.previa,.previa.acima{transform:none;transition:opacity .12s linear}}

.lado-bloco .unid-fone{margin:14px 0 0}
.lado-bloco .unid-fone a.gmn{display:block;font-size:1.0625rem;color:var(--ink-soft)}
.lado-bloco .unid-fone a:not(.gmn){padding:6px 0}
footer .unid-fone a.gmn{display:block;padding:8px 0 0;font-size:var(--t-apoio);color:#BAC5D3}
footer .unid-fone a:not(.gmn){padding:4px 0 8px}

/* cabeçalho entre 981 e 1120 px: some o telefone (o botão já leva ao WhatsApp); nada quebra linha */
.mark-word b,.mark-word span,.nav nav a,.nav .btn{white-space:nowrap}
@media(max-width:1120px){.nav .tel{display:none}.nav{gap:20px}.nav nav{gap:18px}}

/* Piso de legibilidade para o publico 60+ (revisao de 04/09/2026).
   A escala mora em --t-rotulo/--t-apoio/--t-menor/--t-corpo/--t-lead (base.css);
   aqui ficam so os dois rotulos presos DENTRO de grafico, onde o espaco e fisico:
   o ano da regua do simulador e a etiqueta do pino. Ambos repetem, em texto,
   o que a lista .sim-lista logo abaixo diz em tamanho de leitura. */
.regua-out .ano{font-size:0.9375rem}
.pino b{font-size:0.875rem}


/* =====================================================================
   MOVIMENTO E INTERAÇÃO
   Tudo que anima vive dentro de (prefers-reduced-motion: no-preference).
   Quem pede menos movimento recebe a página inteira, parada, sem esperar.
   A lista de alvos da revelação por rolagem está espelhada em site.js (REVELAR).
   ===================================================================== */
html{scroll-padding-top:96px}

/* ---------- link de pular ---------- */
.pular{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--gold);color:var(--navy-900);font-weight:600;font-size:1.125rem;
  padding:13px 18px;border-radius:2px;text-decoration:none;transition:top .2s;
}
.pular:focus{top:12px}

/* ---------- cabeçalho ---------- */
header{transition:box-shadow .3s ease}
header.rolou{box-shadow:0 10px 30px -14px rgba(0,0,0,.55)}
.nav{transition:height .3s ease}
header.rolou .nav{height:66px}
@media(max-width:980px){header.rolou .nav{height:62px}}

.menu-btn{
  display:none;align-items:center;gap:8px;
  background:transparent;color:#fff;border:1px solid var(--navy-400);border-radius:2px;
  font:600 1.0625rem var(--body);padding:12px 16px;cursor:pointer;margin-left:auto;
}
.menu-btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-light)}
@media(max-width:980px){
  .menu-btn{display:inline-flex}
  .nav .cta-topo{margin-left:0}
}
@media(max-width:560px){
  .nav .cta-topo{display:none}
}
.menu-mobile{background:var(--navy-900);border-top:1px solid rgba(207,150,88,.28)}
.menu-mobile a{
  display:block;padding:18px var(--gut);font-size:1.375rem;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.menu-mobile a:hover{color:var(--gold-light)}
.menu-mobile a.destaque{background:var(--gold);color:var(--navy-900);font-weight:600}
.menu-mobile a.fone{font-family:var(--mono);font-size:var(--t-menor);color:var(--gold-light)}
@media(min-width:981px){.menu-mobile{display:none!important}}

/* ---------- barra fixa no celular ---------- */
.barra-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;grid-template-columns:1fr 1fr;gap:1px;background:rgba(207,150,88,.4);
  transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.barra-mobile.visivel{transform:none}
.barra-mobile a{
  display:flex;justify-content:center;align-items:center;gap:8px;
  padding:17px 10px;font-weight:600;font-size:var(--t-menor);text-decoration:none;
}
.barra-mobile .wa{background:var(--gold);color:var(--navy-900)}
.barra-mobile .lig{background:var(--navy);color:#fff}
@media(max-width:980px){
  .barra-mobile{display:grid}
  body{padding-bottom:4.6rem} /* em rem: a barra fixa cresce com a fonte */
}

/* ---------- botão flutuante do WhatsApp (desktop) ----------
   No celular quem faz esse papel é a barra fixa acima; os dois juntos
   empilhariam dois CTAs de WhatsApp na mesma dobra. */
.zap-flutuante{
  position:fixed;right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);z-index:70;
  display:inline-flex;align-items:center;height:56px;padding:0 16px;
  border-radius:999px;background:var(--gold);color:var(--navy-900);
  text-decoration:none;box-shadow:0 10px 28px rgba(22,32,46,.26);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.6,.2,1),
             visibility .3s,box-shadow .25s ease,background-color .25s ease;
}
.zap-flutuante.visivel{opacity:1;visibility:visible;transform:none}
.zap-flutuante svg{width:24px;height:24px;flex:none;fill:currentColor}
.zap-flutuante .rotulo{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-weight:600;font-size:1.125rem;letter-spacing:.01em;
  transition:max-width .35s cubic-bezier(.2,.6,.2,1),margin-left .35s cubic-bezier(.2,.6,.2,1);
}
.zap-flutuante:hover,.zap-flutuante:focus-visible{
  background:var(--gold-light);box-shadow:0 14px 34px rgba(22,32,46,.32);
}
.zap-flutuante:hover .rotulo,.zap-flutuante:focus-visible .rotulo{max-width:200px;margin-left:10px}
.zap-flutuante.escondida{opacity:0;visibility:hidden;transform:translateY(14px) scale(.94)}
html:not(.js) .zap-flutuante{opacity:1;visibility:visible;transform:none}
@media(max-width:980px){.zap-flutuante{display:none}}

/* ---------- micro-interações ---------- */
.pergunta{transition:transform .25s ease,background-color .25s ease}
.pergunta:hover{background:var(--white);transform:translateY(-3px)}
.artigo-linha .seta{transition:transform .25s ease,color .25s ease}
.artigo-linha:hover .seta{transform:translateX(5px)}
.item{transition:background-color .2s ease}
.item:hover{background:var(--white)}
.unidade a,.lado-bloco a{transition:border-color .2s ease,color .2s ease}
.unidade a:hover,.lado-bloco a:hover{color:var(--navy);border-color:var(--navy)}

/* ---------- formulário: estados ---------- */
.campo .msg{display:none;font-size:1.125rem;color:#8F1D17;font-weight:600;line-height:1.45}
.campo.erro .msg{display:block}
.campo.erro input,.campo.erro textarea,.campo.erro select{border-color:#B3261E;border-width:2px}
.consent.erro{color:#8F1D17}
.consent.erro input{outline:2px solid #B3261E;outline-offset:2px}
.form-ok{
  background:var(--white);border:1px solid var(--paper-2);border-top:2px solid var(--gold);
  padding:32px;display:grid;gap:14px;
}
.form-ok h3{font-size:1.6875rem}
.form-ok p{margin:0;color:var(--ink-soft)}
.form-ok .btn{width:fit-content}

/* ---------- simulador ---------- */
.sim-sec{background:var(--navy-900);color:#fff}
.sim-sec h2{color:#fff}
.sim-sec .sec-head p:not(.eyebrow){color:#D3DBE5}
.sim{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:1px;
  background:rgba(207,150,88,.28);border:1px solid rgba(207,150,88,.28);
}
.sim-form{background:var(--navy);padding:clamp(24px,3vw,40px);display:grid;gap:22px;align-content:start}
.sim-out{background:var(--navy-900);padding:clamp(24px,3vw,40px);min-height:420px}
.sim-form fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.sim-form legend,.sim-campo label{font-size:1.125rem;font-weight:600;color:#fff;padding:0;margin:0 0 4px}
.sim-campo{display:grid;gap:8px}
/* "Se nao souber ao certo, use o que lembra" e a frase que destrava quem
   nao sabe o tempo de contribuicao -- era a menor e mais apagada do bloco */
.sim-form .dica{font-size:var(--t-menor);color:#E3E8EF;line-height:1.55}
.sim-form .msg{display:none;font-size:1.125rem;color:var(--gold-light);font-weight:600}
.sim-campo.erro .msg{display:block}
.sim-campo.erro input{border-color:var(--gold)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{position:relative}
.pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pill span{
  display:block;padding:14px 24px;border:1px solid var(--navy-400);border-radius:2px;
  color:#E3E8EF;font-weight:600;font-size:var(--t-menor);transition:background-color .2s,color .2s,border-color .2s;
}
.pill input:checked+span{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.pill input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.sim-form input[type=number]{
  font:inherit;font-size:1.375rem;color:#fff;background:var(--navy-900);
  border:1px solid var(--navy-400);border-radius:2px;padding:14px 16px;width:100%;
  font-variant-numeric:tabular-nums;
}
.sim-form input[type=number]:focus{outline:3px solid var(--gold);outline-offset:1px}
.sim-form input::placeholder{color:#6F8098}
.sim-dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:420px){.sim-dupla{grid-template-columns:1fr}} /* fonte grande: anos e meses empilham */
.sim-dupla>span{display:flex;align-items:center;gap:10px}
/* sem isto o input vira uma caixa de 30 px dentro do flex: alvo impossivel
   para quem tem a mao tremida ou usa o dedo */
.sim-dupla>span input{flex:1 1 auto;width:auto;min-width:92px}
.sim-dupla small{font-family:var(--mono);font-size:var(--t-apoio);color:#C2CCDA;white-space:nowrap}
.sim-form .btn{margin-top:6px;justify-self:start}
.sim-vazio p{color:#C2CCDA;font-size:1.25rem;max-width:40ch;margin:0}
.sim-vazio .eyebrow{margin-bottom:14px}
.sim-titulo{
  font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.3vw,1.875rem);line-height:1.22;
  margin:0 0 14px;color:#fff;letter-spacing:-.01em;
}
.sim-titulo em{color:var(--gold-light);font-style:italic}
.sim-sub{color:#D3DBE5;font-size:1.25rem;margin:0 0 8px;max-width:50ch}
.sim-sub strong{color:#fff}

.regua-out{position:relative;margin:26px 0 18px;padding-bottom:30px}
.regua-out .pinos{position:relative;height:var(--alt-pinos,76px)}
.regua-out .linha{height:1px;background:linear-gradient(90deg,var(--gold),rgba(207,150,88,.3))}
.regua-out .anos{position:relative;height:26px}
.regua-out .ano{
  position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:0.9375rem;color:#AFBCCC;padding-top:9px;white-space:nowrap;
}
.regua-out .ano::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:rgba(207,150,88,.55)}
.regua-out .ano:first-child{transform:none}
.regua-out .ano:first-child::before{left:0}
.pino{
  position:absolute;bottom:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0;
}
.pino b{
  font-family:var(--mono);font-weight:500;font-size:0.875rem;letter-spacing:.03em;
  color:var(--gold-light);white-space:nowrap;background:var(--navy-900);
  padding:4px 8px;border:1px solid rgba(207,150,88,.4);margin-bottom:3px;
}
.pino i{width:1px;height:16px;background:var(--gold);display:block}
.pino:nth-child(even) i{height:38px}
.pino::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);margin-bottom:-4px}
.pino:first-child{transform:none;align-items:flex-start}
.pino:first-child::after{margin-left:-4px}
.regua-vert{display:none;list-style:none;padding:0;margin:22px 0 10px;border-left:1px solid rgba(207,150,88,.45)}
.regua-vert li{padding:8px 0 8px 18px;position:relative}
.regua-vert li::before{content:"";position:absolute;left:-5px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.regua-vert b{display:block;font-family:var(--mono);font-weight:500;font-size:var(--t-rotulo);color:var(--gold-light)}
.regua-vert span{font-size:var(--t-menor);color:#D3DBE5}
@media(max-width:600px){.regua-out{display:none}.regua-vert{display:block}}

.sim-lista{list-style:none;padding:0;margin:18px 0 0;display:grid}
.sim-lista li{
  display:grid;grid-template-columns:132px 1fr;gap:16px;
  padding:14px 0;border-top:1px solid rgba(255,255,255,.09);
}
.sim-lista .quando{font-family:var(--mono);font-size:var(--t-rotulo);color:var(--gold-light);padding-top:4px;line-height:1.45}
.sim-lista .quando.ja{color:#fff}
.sim-lista .quando.nao{color:#AFBCCC}
.sim-lista b{display:block;font-weight:600;color:#fff;font-size:var(--t-menor)}
.sim-lista span span{display:block;font-size:1.125rem;color:#C2CCDA;line-height:1.55}
.sim-lista .ref{font-family:var(--mono);font-size:0.9375rem;color:#AFBCCC;margin-top:5px;letter-spacing:.03em}
@media(max-width:480px){.sim-lista li{grid-template-columns:1fr;gap:4px}}
.sim-acao{margin-top:26px;display:grid;gap:14px}
.sim-acao .btn{justify-self:start}
.sim-nota{font-size:var(--t-apoio);color:#AFBCCC;line-height:1.6;margin:0;max-width:56ch}
@media(max-width:900px){.sim{grid-template-columns:1fr}.sim-out{min-height:0}}

/* ---------- perguntas frequentes ---------- */
.faq{max-width:78ch}
.faq details{border-top:1px solid var(--paper-2)}
.faq details:last-child{border-bottom:1px solid var(--paper-2)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 30px;gap:16px;align-items:center;
  padding:22px 0;font-family:var(--display);font-size:clamp(1.3125rem,1.95vw,1.625rem);line-height:1.34;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--mono);color:var(--gold);font-size:1.75rem;line-height:1;
  text-align:center;transition:transform .3s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.faq .resp{padding:0 46px 24px 0;color:var(--ink-soft);font-size:1.25rem;line-height:1.7}
.faq .resp p{margin:0 0 1em}
.faq .resp p:last-child{margin-bottom:0}
.faq .resp a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}

/* ---------- transição de rota (só no bundle) ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes rotaIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .rota.rota-in{animation:rotaIn .35s ease both}
}

/* =====================================================================
   Animação de entrada — só com JS ligado e sem pedido de menos movimento
   ===================================================================== */
@media(prefers-reduced-motion:no-preference){
  @keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes surgir{from{opacity:0}to{opacity:1}}
  @keyframes pop{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%) scale(1)}}
  @keyframes popPrimeiro{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
  @keyframes desenhar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* revelação por rolagem — :where() zera a especificidade para .on vencer sempre */
  .js :where(.sec-head p,.pergunta,.porta,.passo,.entrega,.unidade,.item,.artigo-linha,.lado-bloco,
             .trajetoria li,.galeria img,.area-topo,.area .intro,.credenciais li,.marca-ano,
             .faq details,.sim-form,.sim-out,.prosa>*,.perfil-foto,.cta-final .wrap>*,.faixa-cta .in>*){
    opacity:0;transform:translateY(16px);
    transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1),background-color .25s ease;
    transition-delay:calc(var(--i,0)*70ms);
  }
  .js .on{opacity:1;transform:none}
  .js .on.pergunta:hover{transform:translateY(-3px);transition-delay:0s}

  /* abertura da home */
  .js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero .hero-cta{
    opacity:0;animation:subir .8s cubic-bezier(.2,.6,.2,1) both;
  }
  .js .hero .eyebrow{animation-delay:.1s}
  .js .hero h1{animation-delay:.25s}
  .js .hero .lead{animation-delay:.45s}
  .js .hero .hero-cta{animation-delay:.6s}
  .js .hero-photo{opacity:0;animation:surgir 1.3s ease .35s both}

  /* régua de anos: a linha se desenha da esquerda, marca por marca */
  .js .marca-ano{border-top-color:transparent}
  .js .marca-ano::after{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:rgba(207,150,88,.42);transform:scaleX(0);transform-origin:left;
    transition:transform .9s cubic-bezier(.2,.6,.2,1) calc(var(--i,0)*180ms + .1s);
  }
  .js .marca-ano:last-child::after{background:rgba(207,150,88,.18)}
  .js .marca-ano.on::after{transform:scaleX(1)}

  /* como funciona: trilho e pontos */
  .js .passos::before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.6,.2,1) .15s}
  .js .passos.on::before{transform:scaleX(1)}
  .js .passo::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.4,1) calc(.25s + var(--i,0)*.22s)}
  .js .passo.on::before{transform:scale(1)}
  @media(max-width:820px){
    .js .passos::before{transform:scaleY(0);transform-origin:top}
    .js .passos.on::before{transform:scaleY(1)}
  }

  /* resultado do simulador */
  .js .sim-out.tem-resultado>*{animation:subir .6s cubic-bezier(.2,.6,.2,1) both;animation-delay:calc(var(--i,0)*90ms)}
  .js .regua-out .linha{transform-origin:left;animation:desenhar 1s cubic-bezier(.2,.6,.2,1) .3s both}
  .js .pino{animation:pop .5s cubic-bezier(.3,1.4,.4,1) both;animation-delay:calc(.6s + var(--i,0)*.14s)}
  .js .pino:first-child{animation-name:popPrimeiro}
  .js .sim-lista li{animation:subir .5s ease both;animation-delay:calc(.5s + var(--i,0)*.07s)}
  .js .menu-mobile:not([hidden]){animation:subir .25s ease both}
}

.barra-mobile.visivel.escondida{transform:translateY(100%)}

@media(prefers-reduced-motion:reduce){
  /* sem deslocamento: o botão só aparece e some */
  .zap-flutuante,.zap-flutuante.escondida{transform:none}
  .zap-flutuante .rotulo{transition:none}
}

/* =====================================================================
   Menos movimento: o site não fica parado — fica sem DESLOCAMENTO.
   Fades continuam (revelação, abertura do hero, resultado do simulador);
   o que some é translate/parallax/escala. Mesma política do site-campanha.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  @keyframes surgirSuave{from{opacity:0}to{opacity:1}}
  .js :where(.sec-head p,.pergunta,.porta,.passo,.entrega,.unidade,.item,.artigo-linha,.lado-bloco,
             .trajetoria li,.galeria img,.area-topo,.area .intro,.credenciais li,.marca-ano,
             .faq details,.sim-form,.sim-out,.prosa>*,.perfil-foto,.cta-final .wrap>*,.faixa-cta .in>*){
    opacity:0;transition:opacity .55s ease;transition-delay:calc(var(--i,0)*50ms);
  }
  .js .on{opacity:1}
  .js .hero .eyebrow,.js .hero h1,.js .hero .lead,.js .hero .hero-cta,.js .hero-photo{
    opacity:0;animation:surgirSuave .8s ease both;
  }
  .js .hero .eyebrow{animation-delay:.1s}
  .js .hero h1{animation-delay:.25s}
  .js .hero .lead{animation-delay:.45s}
  .js .hero .hero-cta{animation-delay:.6s}
  .js .hero-photo{animation-delay:.3s}
  .js .sim-out.tem-resultado>*{animation:surgirSuave .5s ease both;animation-delay:calc(var(--i,0)*70ms)}
  .js .sim-lista li{animation:surgirSuave .4s ease both;animation-delay:calc(.3s + var(--i,0)*.05s)}
  .js .pino{animation:surgirSuave .4s ease both;animation-delay:calc(.4s + var(--i,0)*.1s)}
}


/* =====================================================================
   ROLAGEM COMO MOTOR
   Porte do vocabulário de movimento do site-campanha (deputadoeltonia-stack),
   adaptado à marca: o que lá é lima/ouro aqui é o dourado do logo, e o que lá
   é o "4412" aqui é o ano — o assunto deste site é tempo.

   Regra herdada de lá, mantida à risca:
   · efeito 1:1 com a mão (véu, régua de leitura, ignição) NÃO tem gate de
     reduced-motion — é pintura que segue o gesto, reversível;
   · movimento autônomo (parallax, respiração, letra que sobe, anel de luz)
     fica sob (prefers-reduced-motion: no-preference);
   · sem animation-timeline (Firefox), o estado-base é o ACESO/visível.
   ===================================================================== */
:root{
  --ease:cubic-bezier(.16,1,.3,1);   /* ease-out-quint: o "moderno" do vocabulário de lá */
  --top-capa:66px;                   /* altura do cabeçalho encolhido (sticky) */
  --top-capa-aberto:82px;            /* altura do cabeçalho ANTES de rolar */
}

/* ---------- CAPA + FOLHA ----------
   A capa (hero, ou a faixa navy das internas) gruda no topo; o resto do site é
   uma folha opaca que sobe por cima. O trilho vazio dá ao container do sticky
   altura além da própria capa — sem ele o sticky duraria o <main> inteiro. A
   margem negativa da folha CANCELA o trilho: a cobertura começa exatamente no
   fim da capa, o trilho só decide por quanto tempo ela fica presa por baixo. */
.capa-wrap{position:relative}
.capa-trilho{height:110vh;height:110svh}
.folha{
  position:relative;z-index:1;
  margin-top:-110vh;margin-top:-110svh;
  background:var(--paper);
  border-radius:26px 26px 0 0;
  box-shadow:0 -24px 60px rgba(22,32,46,.45);
}
.folha>:first-child{border-radius:26px 26px 0 0}
.capa-sticky{position:sticky;top:var(--top-capa);z-index:0;isolation:isolate}

/* home: hero + régua de anos ocupam a tela na abertura, conteúdo no rodapé */
/* desconta o cabeçalho ABERTO (82px), não o encolhido: com 66px o hero passava
   16px da primeira dobra e o segundo botão nascia cortado. */
.capa-home{display:flex;flex-direction:column;min-height:min(calc(100svh - var(--top-capa-aberto)),920px)}
.capa-home .hero{flex:1;display:flex;flex-direction:column;overflow:clip;position:relative} /* clip, não hidden: hidden viraria scroll container e sequestraria scroll()/sticky */
.capa-home .hero .hero-grid{margin-top:auto;position:relative;z-index:1}

/* internas: a faixa navy ganha altura de capa e o texto assenta no rodapé dela */
.capa.capa-sticky{min-height:min(46svh,440px);display:flex;flex-direction:column;justify-content:flex-end}

/* ano-fantasma no hero: textura de marca e camada de parallax; só decoração */
.hero-ano{
  position:absolute;right:-1%;bottom:-8%;z-index:0;
  font-family:var(--display);font-weight:400;font-size:clamp(9rem,30vw,22rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(207,150,88,.13);
  letter-spacing:-.04em;pointer-events:none;user-select:none;
}

/* no celular o hero empilhado passa da altura da tela; preso, cortaria a foto
   PRA SEMPRE (física de sticky, não de timing). Vira seção comum. As internas
   têm capa curta e continuam cobrindo normalmente. */
@media(max-width:860px){
  .capa-wrap.home .capa-sticky{position:relative;min-height:0;display:block}
  .capa-wrap.home .capa-trilho{height:0}
  .capa-wrap.home+.folha{margin-top:0;border-radius:0;box-shadow:none}
  .capa-wrap.home+.folha>:first-child{border-radius:0}
  .hero-ano{display:none}
  .capa-wrap.home .hero-photo img{animation:none} /* hero não é sticky aqui: parallax só deformaria a foto */
}

/* véu: a capa recua (escurece) conforme a folha a cobre. 1:1 com a rolagem —
   sem gate de reduced-motion. */
@supports (animation-timeline: scroll()){
  .capa-sticky::before{
    content:"";position:absolute;inset:0;z-index:5;
    background:var(--navy-900);opacity:0;pointer-events:none;
    animation:capaRecua linear both;
    animation-timeline:scroll(root);
    animation-range:0 82vh;
  }
  @keyframes capaRecua{to{opacity:.62}}
}

/* parallax de abertura: a foto dá um passo à frente, o ano-fantasma se atrasa.
   Movimento autônomo → gate. Anima a <img>, não .hero-photo (que já tem a
   animação de entrada): duas animações na mesma propriedade do MESMO elemento
   brigam. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero-photo img{
      animation:heroFotoParallax linear both;
      animation-timeline:scroll(root);
      animation-range:0 70vh;
    }
    @keyframes heroFotoParallax{to{transform:scale(1.045) translateY(-1.2%)}}
    .hero-ano{
      animation:heroAnoParallax linear both;
      animation-timeline:scroll(root);
      animation-range:0 70vh;
    }
    @keyframes heroAnoParallax{to{transform:translateY(6%);opacity:.6}}
  }
}

/* ---------- RÉGUA DE LEITURA no cabeçalho ----------
   Progresso 1:1 com o scroll; é a camada que prova vida mesmo em reduce. */
@supports (animation-timeline: scroll()){
  header::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,#A8825A,var(--gold),var(--gold-light));
    transform-origin:0 50%;
    scale:0 1;
    animation:reguaLeitura linear;
    animation-timeline:scroll(root);
    pointer-events:none;z-index:1;
  }
  @keyframes reguaLeitura{from{scale:0 1}to{scale:1 1}}
}

/* ---------- RÉGUA DE ANOS: ignição por scroll ----------
   As quatro marcas dividem uma linha; a linha se desenha da esquerda e cada
   marca acende na sua fatia conforme a régua sobe pela tela. Subiu o scroll,
   apaga de volta — o estado É a posição. Substitui a revelação única de
   motion.css quando o navegador sabe view(). */
.regua-in{view-timeline-name:--regua;view-timeline-axis:block}
@supports (animation-timeline: view()){
  .js .marca-ano{opacity:1;transform:none;transition:none;border-top-color:transparent}
  .js .marca-ano::after{
    content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:rgba(207,150,88,.42);transform-origin:left;
    transition:none;transform:scaleX(0);
    animation:reguaFill linear both;
    animation-timeline:--regua;
  }
  .js .marca-ano:nth-child(1)::after{animation-range:entry 30% cover 14%}
  .js .marca-ano:nth-child(2)::after{animation-range:cover 10% cover 22%}
  .js .marca-ano:nth-child(3)::after{animation-range:cover 18% cover 30%}
  .js .marca-ano:nth-child(4)::after{animation-range:cover 26% cover 38%}
  .js .marca-ano:last-child::after{background:rgba(207,150,88,.18)}
  @keyframes reguaFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .marca-ano::before{opacity:.25;animation:reguaTick linear both;animation-timeline:--regua}
  /* a cor apagada mora na BASE (como na versao de 27/08), nao so no `from`: assim
     o ano ja nasce cinza mesmo antes de a timeline da secao ficar ativa. Fora do
     @supports (Firefox) a base continua acesa -- fallback sem movimento. */
  .marca-ano b{color:#A7B4C6;animation:reguaAno linear both;animation-timeline:--regua}
  .marca-ano:last-child b{color:#A7B4C6} /* vence o #fff do base.css: "hoje" tambem nasce apagado e acende para branco */
  .marca-ano:nth-child(1)::before,.marca-ano:nth-child(1) b{animation-range:cover 8% cover 16%}
  .marca-ano:nth-child(2)::before,.marca-ano:nth-child(2) b{animation-range:cover 16% cover 24%}
  .marca-ano:nth-child(3)::before,.marca-ano:nth-child(3) b{animation-range:cover 24% cover 32%}
  .marca-ano:nth-child(4)::before,.marca-ano:nth-child(4) b{animation-range:cover 32% cover 40%}
  @keyframes reguaTick{from{opacity:.25;box-shadow:0 0 0 0 rgba(207,150,88,0)}70%{opacity:1;box-shadow:0 0 12px 3px rgba(207,150,88,.7)}to{opacity:1;box-shadow:0 0 6px 1px rgba(207,150,88,.35)}}
  /* O ano ACENDE: sai de um cinza-azulado e vira dourado (ou branco, no "hoje").
     O ponto de partida e #A7B4C6, que sobre o navy-900 da 7,8:1 -- a versao
     anterior partia de branco a 35% (3,19:1) e deixava o rotulo abaixo de AA
     para quem parava a rolagem no meio. A cor muda, o brilho acompanha. */
  @keyframes reguaAno{
    from{color:#A7B4C6;text-shadow:none}
    70%{color:#FFF6E4;text-shadow:0 0 14px rgba(207,150,88,.8)}
    to{color:var(--gold-light);text-shadow:0 0 6px rgba(207,150,88,.3)}
  }
  .marca-ano:last-child b{animation-name:reguaAnoHoje}
  @keyframes reguaAnoHoje{
    from{color:#A7B4C6;text-shadow:none}
    70%{color:#FFF6E4;text-shadow:0 0 14px rgba(207,150,88,.8)}
    to{color:#fff;text-shadow:0 0 6px rgba(207,150,88,.3)}
  }
  @media(max-width:700px){
    /* duas colunas: as marcas entram em pares, a fatia de cada uma é a mesma da linha */
    .js .marca-ano:nth-child(3)::after{animation-range:cover 22% cover 34%}
    .js .marca-ano:nth-child(4)::after{animation-range:cover 30% cover 42%}
  }
}

/* ---------- COMO FUNCIONA: trilho que se estende, pontos que acendem ---------- */
.passos{view-timeline-name:--passos;view-timeline-axis:block}
@supports (animation-timeline: view()){
  .js .passos::before{transition:none;transform:scaleX(0);animation:passosFill linear both;animation-timeline:--passos;animation-range:entry 30% cover 42%}
  @keyframes passosFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .js .passo::before{transition:none;transform:scale(0);animation:passoIgnite linear both;animation-timeline:--passos}
  .js .passo:nth-child(1)::before{animation-range:entry 40% cover 12%}
  .js .passo:nth-child(2)::before{animation-range:cover 10% cover 20%}
  .js .passo:nth-child(3)::before{animation-range:cover 18% cover 28%}
  .js .passo:nth-child(4)::before{animation-range:cover 26% cover 36%}
  @keyframes passoIgnite{
    from{transform:scale(0);box-shadow:0 0 0 0 rgba(207,150,88,0)}
    70%{transform:scale(1.35);box-shadow:0 0 14px 4px rgba(207,150,88,.7)}
    to{transform:scale(1);box-shadow:0 0 6px 1px rgba(207,150,88,.35)}
  }
  .passo b{color:#A7B4C6;animation:passoRotulo linear both;animation-timeline:--passos}
  .passo:nth-child(1) b{animation-range:entry 40% cover 12%}
  .passo:nth-child(2) b{animation-range:cover 10% cover 20%}
  .passo:nth-child(3) b{animation-range:cover 18% cover 28%}
  .passo:nth-child(4) b{animation-range:cover 26% cover 36%}
  /* "Etapa N" acende do mesmo cinza-azulado (#A7B4C6 sobre navy = 5,1:1) para o
     dourado. Antes partia de dourado a 45% (2,34:1). */
  @keyframes passoRotulo{
    from{color:#A7B4C6;text-shadow:none}
    70%{color:#FFF6E4;text-shadow:0 0 12px rgba(207,150,88,.75)}
    to{color:var(--gold-light);text-shadow:0 0 5px rgba(207,150,88,.28)}
  }
  @media(max-width:820px){
    /* empilhado: o trilho é vertical e cada passo tem o próprio relógio */
    .js .passos::before{animation-range:entry 30% cover 60%}
    .passo{view-timeline-name:--passo;view-timeline-axis:block}
    .js .passo::before,.passo b{animation-timeline:--passo!important;animation-range:entry 50% entry 100%!important}
  }
}

/* ---------- TRAJETÓRIA (Dr. Diego): nó ignita, segmento preenche ----------
   Porte direto da timeline de lá: cada <li> tem sua view-timeline; nó = anel
   + núcleo + brilho num pseudo só; segmento = trilho fantasma + preenchimento
   dourado até o próximo nó. Base = aceso (fallback estático). */
.trajetoria{
  --no:14px;--no-top:8px;--col:2.4rem;--traj-gap:22px;
  gap:var(--traj-gap);
}
.trajetoria li{
  position:relative;padding:0 0 0 var(--col);border-top:0;
  view-timeline-name:--traj;view-timeline-axis:block;
}
.trajetoria li:first-child{padding-top:0}
.trajetoria li::after{
  content:"";position:absolute;left:0;top:var(--no-top);
  width:var(--no);height:var(--no);border-radius:50%;
  border:1.5px solid var(--gold);
  background:radial-gradient(circle,var(--gold) 0 2.5px,rgba(207,150,88,.35) 3px,transparent 3.5px) center/100% 100% no-repeat;
  box-shadow:0 0 8px 1px rgba(207,150,88,.35);
  pointer-events:none;
}
.trajetoria li::before{
  content:"";position:absolute;left:calc(var(--no)/2 - 1px);
  top:calc(var(--no-top) + var(--no) + 3px);width:2px;
  height:calc(100% + var(--traj-gap) - var(--no) - 6px);
  background:
    linear-gradient(var(--paper-2),var(--paper-2)),
    linear-gradient(to bottom,var(--bronze-ink) 0%,var(--gold) calc(100% - 14px),var(--gold-light) 100%);
  background-repeat:no-repeat;background-size:100% 100%,100% 100%;
  pointer-events:none;
}
.trajetoria li:last-child::before{content:none}
@supports (animation-timeline: view()){
  .trajetoria li::after{
    border-color:rgba(67,86,110,.25);background-size:0% 0%;box-shadow:0 0 0 0 rgba(207,150,88,0);
    animation:trajIgnite linear both;animation-timeline:--traj;animation-range:entry 55% entry 100%;
  }
  @keyframes trajIgnite{
    0%{border-color:rgba(67,86,110,.25);background-size:0% 0%;box-shadow:0 0 0 0 rgba(207,150,88,0)}
    55%{border-color:var(--gold);background-size:40% 40%;box-shadow:0 0 5px 0 rgba(207,150,88,.25)}
    78%{border-color:#FFF6E4;background-size:100% 100%;box-shadow:0 0 14px 4px rgba(207,150,88,.7),inset 0 0 5px rgba(207,150,88,.5)}
    100%{border-color:var(--gold);background-size:100% 100%;box-shadow:0 0 8px 1px rgba(207,150,88,.35)}
  }
  .trajetoria li::before{background-size:100% 100%,100% 0%;animation:trajFill linear both;animation-timeline:--traj;animation-range:entry 100% cover 38%}
  @keyframes trajFill{from{background-size:100% 100%,100% 0%}to{background-size:100% 100%,100% 100%}}
  .trajetoria .quando{color:rgba(67,86,110,.38);animation:trajAno linear both;animation-timeline:--traj;animation-range:entry 55% entry 100%}
  @keyframes trajAno{to{color:var(--bronze-ink)}}
}
@media(max-width:560px){.trajetoria li{grid-template-columns:1fr}}
/* entrada da lista: desliza da esquerda, não de baixo (variação por contexto, como lá) */
@media (prefers-reduced-motion: no-preference){
  .js :where(.trajetoria li){transform:translateX(-18px)}
}

/* ---------- DEPOIMENTOS: cards empilhando um a um ----------
   Citações curtas, prova social: cabe esconder o de trás. (Nas perguntas e
   nas áreas não — lá a pessoa precisa LER cada uma.) Coluna única de
   propósito. O último fica assentado: é o mais forte. */
.entregas{
  --numcards:3;--stack-top:calc(var(--top-capa) + 28px);--stack-step:12px;
  display:block;max-width:760px;
}
.entrega{
  --index0:calc(var(--index,1) - 1);
  --reverse:calc(var(--numcards) - var(--index0));
  position:sticky;top:calc(var(--stack-top) + var(--index0)*var(--stack-step));
  margin:0 0 20px;min-height:230px;
  box-shadow:0 -12px 34px -22px rgba(22,32,46,.45);
}
.entrega:last-child{margin-bottom:0}
.entrega:nth-child(1){--index:1}
.entrega:nth-child(2){--index:2}
.entrega:nth-child(3){--index:3}
.entrega p{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.65}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .entregas{view-timeline-name:--depo;view-timeline-axis:block}
    .entrega{
      --start:calc(var(--index0)/var(--numcards)*100%);
      --end:calc(var(--index,1)/var(--numcards)*100%);
      transform-origin:50% 0%;
      animation:depoScale linear forwards;
      animation-timeline:--depo;
      animation-range:exit-crossing var(--start) exit-crossing var(--end);
    }
    @keyframes depoScale{to{transform:scale(calc(1.04 - .03*var(--reverse)))}}
  }
}

/* ---------- TÍTULO LETRA A LETRA ----------
   Porte do ScrollFloat (React Bits) sem React: o JS fatia o texto e decide a
   HORA; a cascata é daqui. Aqui cada palavra é uma máscara e as letras sobem
   de dentro dela — reveal tipográfico, sem esticão (Bodoni não pede bounce).
   Sem JS o título aparece inteiro e parado. */
/* a folga vertical da máscara acompanha os ascendentes do Bodoni: com .04em em
   cima ela cortava 2px do topo das maiúsculas em 48px (scrollHeight 65 contra
   clientHeight 63). padding e margin se cancelam, o layout não muda. */
.titulo-float .word{display:inline-block;white-space:pre;overflow:hidden;vertical-align:top;padding:.12em .05em .22em;margin:-.12em -.05em -.22em}
.titulo-float .char{display:inline-block;transform-origin:50% 100%}
@media (prefers-reduced-motion: no-preference){
  .titulo-float.float-pronto .char{opacity:0}
  .titulo-float.float-destravado .char{opacity:1}
  .titulo-float.revela .char{
    animation:subirLetra .75s var(--ease) both;
    animation-delay:calc(var(--i,0)*.018s);
  }
  @keyframes subirLetra{from{opacity:0;transform:translateY(108%)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .titulo-float.float-pronto .char{opacity:0}
  .titulo-float.float-destravado .char{opacity:1}
  .titulo-float.revela .char{animation:surgirLetra .35s ease-out both;animation-delay:calc(var(--i,0)*.01s)}
  @keyframes surgirLetra{from{opacity:0}to{opacity:1}}
}

/* ---------- TEXTO QUE ACENDE PALAVRA A PALAVRA ----------
   Porte do ScrollReveal (React Bits). O borrão é uma faixa presa à base da
   janela (~1,5 linha): só a linha entrando embaixo fica embaçada.
     --y   progresso do parágrafo em px, escrito pelo JS a cada frame
     --o   distância da palavra até o topo do parágrafo, medida uma vez
     --faixa altura do borrão (entrelinha × 1,5), sem unidade
   --y alto = tudo aceso: é o estado quando o JS não roda. */
:root{--faixa:44}
.wordreveal{--y:99999;--o:0}
.wordreveal .w{
  --l:clamp(0,calc((var(--y) - var(--o))/var(--faixa)),1);
  display:inline-block;
  opacity:calc(.28 + .72*var(--l));
  filter:blur(calc((1 - var(--l))*3px));
}
.wordreveal.pronto .w{filter:none}            /* aceso: sai do caminho do compositor */
.wordreveal.suave .w{filter:none}             /* menos movimento: só o acender */

/* ---------- CTA DO CABEÇALHO RESPIRANDO ----------
   `scale` (propriedade independente), nunca transform: .btn:hover usa transform. */
@media (prefers-reduced-motion: no-preference){
  .cta-topo{scale:1;animation:ctaBreath 2.8s var(--ease) infinite}
  @keyframes ctaBreath{0%{scale:1}14%{scale:1.055}30%{scale:1}100%{scale:1}}
  .cta-topo:hover,.cta-topo:focus-visible{animation-play-state:paused}
}

/* ---------- ANEL DE LUZ no botão do simulador ----------
   conic-gradient girando, mascarado só na moldura de 2px. */
@property --lux-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.sim-form .btn{position:relative;isolation:isolate}
@media (prefers-reduced-motion: no-preference){
  .sim-form .btn::after{
    content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;
    background:conic-gradient(from var(--lux-angle),
      transparent 0deg,transparent 250deg,
      var(--gold-light) 305deg,#FFF3DA 332deg,var(--gold-light) 352deg,transparent 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            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 6px rgba(207,150,88,.7));
    animation:luxSpin 3s linear infinite;
    pointer-events:none;z-index:-1;
  }
  @keyframes luxSpin{to{--lux-angle:360deg}}
}

/* ---------- INDICADOR DE ROLAGEM próprio (só ponteiro fino) ----------
   O JS cria o trilho e só então esconde a barra nativa: se falhar, ninguém
   fica sem barra. Arrastável — esconder a nativa sem isso tiraria um jeito
   legítimo de navegar. */
html.tem-indicador{scrollbar-width:none}
html.tem-indicador::-webkit-scrollbar{display:none}
.scroll-rail{
  position:fixed;top:0;right:5px;bottom:0;width:12px;z-index:90;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.scroll-rail.visivel{opacity:1;pointer-events:auto}
.scroll-thumb{
  position:absolute;left:3px;top:0;width:6px;border-radius:3px;
  background:var(--gold);box-shadow:0 0 0 1px rgba(22,32,46,.3);
  cursor:grab;will-change:transform;
}
.scroll-thumb.arrastando{cursor:grabbing;background:var(--gold-light)}

/* =====================================================================
   TIPOGRAFIA SEM SERIFA  (09/09/2026 - aproximacao ao abladvogados.com)
   Uma familia so, do titulo ao botao. O peso e o tracking fazem o trabalho
   que antes era da troca de familia.
   ===================================================================== */

/* Tudo o que era titulo em Bodoni vira sans pesada com o mesmo tracking dos
   h1/h2/h3 -- sem isto cada bloco herdaria o peso 500 do corpo e o titulo
   sumiria dentro do texto. */
.pergunta .q,.porta b,.entrega h3,.sobre .destaque,.nota,.sim-titulo,
.faq summary,.artigo-linha h3,.capa h1,.lado-bloco h3,.unidade h3,.passo h3,
.form-ok h3,.portas-head h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
}

/* O 2026 fantasma do hero e contorno (-webkit-text-stroke), nao preenchimento:
   peso alto so engrossaria a linha do contorno. Fica leve. */
.hero-ano{font-weight:400;letter-spacing:-.04em}

/* O "FP" e desenho de marca: continua na Bodoni, sozinho no site. */
.mark-glyph::before{font-weight:500}

/* ROTULO vai para a sans; DADO fica na mono.
   A monoespaçada era a "textura de documento" da identidade, mas em caixa
   baixa (mudanca de 06/09) ela passou a ler como codigo, nao como rotulo de
   secao -- e o ABL, a referencia desta rodada, nao usa mono em lugar nenhum.
   Fica mono so onde o alinhamento de digito serve para alguma coisa: ano,
   telefone, data, horario, numero de registro. */
.eyebrow,.porta span,.passo b,.unidade .uf,.lado-bloco .rot,.aviso-caixa .rot,
.selo,.capa .trilha,.area-num,.entrega cite,footer h4,.credenciais li,
.mapa span,.perfil-foto figcaption,.sim-dupla small{
  font-family:var(--body);font-weight:600;letter-spacing:.01em;
}
/* o rotulo ganha um fio dourado a esquerda -- e o que o substitui como marca
   visual agora que perdeu a textura da mono. Vale para todo eyebrow que abre
   secao; nem toda secao usa .sec-head (a de "Quem vai cuidar do seu caso", por
   exemplo, nao usa) e sem generalizar o fio aparecia em umas e faltava noutras. */
.eyebrow{padding-left:14px;border-left:3px solid var(--gold)}
/* "Resultado", dentro do painel do simulador, e legenda de estado -- nao abre
   secao nenhuma e nao leva o fio. */
.sim-vazio .eyebrow,.sim-out .eyebrow{padding-left:0;border-left:0}

/* Sobre o navy a serifa precisa de um passo a mais de peso: haste fina em
   texto claro sobre fundo escuro some antes que em fundo claro. */
.on-navy p,.hero p.lead,.capa p,.passo p,.sim-sub,.sim-vazio p,.sim-lista span span,
.marca-ano span,.cta-final p,.faixa-cta p,.aviso,footer{font-weight:500}

/* =====================================================================
   MOBILE 60+  (analise de 06/09/2026)
   ===================================================================== */

/* 3. Rotulo que carrega informacao sai da caixa alta. Quem tem 65+ le pela
   silhueta da palavra; caixa alta apaga a silhueta e custa 10-15% a mais de
   tempo. Fica em caixa alta so o que e lettering (marca) e titulo de coluna
   do rodape -- uma ou duas palavras, decoracao. */
.eyebrow,.pergunta .tag,.porta span,.passo b,.artigo-linha .data,.unidade .uf,
.lado-bloco .rot,.aviso-caixa .rot,.selo,.capa .trilha,.area-num,.entrega cite,
.sim-vazio .eyebrow{
  text-transform:none;letter-spacing:.02em;
}
.eyebrow{letter-spacing:.03em}

/* 4. (revertido em 06/09 a pedido do dono) Aqui houve um bloco que, abaixo de
   860px, desligava a revelacao por rolagem, o titulo letra a letra, o borrao do
   wordreveal e a pilha sticky das "tres coisas" -- a ideia era nada nascer
   invisivel para quem tem 65+. O dono preferiu manter o movimento no celular
   igual ao do desktop. Se voltar a ser pedido, o bloco esta no git em
   DIRECAO-DE-DESIGN.md, secao "Mobile 60+". */

/* 2. Largura para a linha: a calha de 20px vira 16px, e o card perde o
   padding lateral gordo. Ganho de 3 a 4 caracteres por linha num celular de
   375px -- junto com a hifenizacao, e o que faz 22px de serifa caber. */
@media(max-width:560px){
  :root{--gut:16px}
  .pergunta,.entrega,.porta,.item,.unidade,.lado-bloco,.aviso-caixa,.form-ok,
  .sim-form,.sim-out{padding-left:16px;padding-right:16px}
  .faq .resp{padding-right:16px}
}

/* "Letra enorme" (rem base 24px): a regua de anos em duas colunas e os dois
   botoes da barra fixa nao cabem em 375px. Uma coluna e minimo zero. */
@media(max-width:420px){
  .regua-in{grid-template-columns:1fr}
  .barra-mobile a{min-width:0;padding-left:6px;padding-right:6px;overflow-wrap:anywhere}
}