/* =========================================================================
   FRANCISCO MAGNO ADVOGADOS ASSOCIADOS
   Estetica base: ebook "Fui acusado de crime sexual. E agora?"
   Vocabulario contemporaneo liberado pelo cliente em 19/08/2026 (supera §4.6
   do prompt mestre): raio, profundidade, gradiente sutil e movimento entram.
   O que NAO muda: as regras de conformidade de §7 (OAB, LGPD, sigilo), a
   paleta de §4.1, a proibicao de foto de banco, de imagem gerada, de emoji,
   de avaliacao de cliente e de qualquer numero de audiencia.
   ========================================================================= */

/* ---------- 1. FONTES ---------------------------------------------------- */
/* Fraunces e Archivo, ambas variaveis, ambas SIL OFL 1.1 (ver /fonts/OFL-*.txt).
   Subconjunto pelo texto (ver fonts/subset.sh) — cobre o portugues do Brasil.
   TRES arquivos, 96 KB. A Fraunces italica nao e embarcada: +56 KB e um quarto
   arquivo. O italico do site e o da Archivo. Ver PENDENCIAS.md. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 700;
  font-display:swap;src:url("/fonts/fraunces.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;
  font-display:swap;src:url("/fonts/archivo.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-weight:400 700;
  font-display:swap;src:url("/fonts/archivo-italic.woff2") format("woff2")}
/* Fallbacks com metrica ajustada — sem isso o H1 salta na troca e estoura o CLS. */
@font-face{font-family:"Display Fallback";src:local("Georgia");
  size-adjust:92%;ascent-override:88%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Texto Fallback";src:local("Helvetica Neue"),local("Arial");
  size-adjust:101%;ascent-override:95%;descent-override:24%;line-gap-override:0%}

/* ---------- 2. TOKENS ---------------------------------------------------- */
:root{
  color-scheme:only light;

  --navy:#0D1F38; --navy-deep:#0A121E; --navy-soft:#192A42;
  --creme:#F5F2EB; --creme-2:#F1EBE0; --creme-3:#EEE7DB;
  --champagne:#D4C4A1; --bronze:#C29F68; --bronze-texto:#7A5A2C;
  --tinta:#0D203D; --corpo:#4A4740; --corpo-fraco-c:#6E6B63;
  --sobre-navy:#FFFFFF; --sobre-navy-corpo:#E8E4DC; --corpo-fraco-e:#948F86;
  --whatsapp:#25D366;

  --filete-claro:rgba(74,71,64,.18);
  --filete-escuro:rgba(212,196,161,.18);
  --foco-claro:var(--bronze-texto);
  --foco-escuro:var(--champagne);

  /* superficies derivadas da paleta — nada de cor nova */
  --sup-escura:color-mix(in srgb, var(--navy-soft) 62%, var(--navy));
  --sup-escura-2:color-mix(in srgb, var(--navy-soft) 88%, var(--navy));
  --sup-clara:#FFFFFF;
  --vidro-escuro:color-mix(in srgb, var(--navy-deep) 78%, transparent);
  --vidro-claro:color-mix(in srgb, var(--creme) 82%, transparent);

  /* raio */
  --r-1:8px; --r-2:14px; --r-3:22px; --r-4:32px; --r-cheio:999px;

  /* profundidade */
  --sombra-1:0 1px 2px rgba(13,32,61,.05), 0 2px 6px rgba(13,32,61,.05);
  --sombra-2:0 2px 4px rgba(13,32,61,.05), 0 10px 28px rgba(13,32,61,.09);
  --sombra-3:0 4px 10px rgba(13,32,61,.07), 0 22px 60px rgba(13,32,61,.14);
  --sombra-e1:0 2px 8px rgba(0,0,0,.28);
  --sombra-e2:0 12px 44px rgba(0,0,0,.42);
  --sombra-bronze:0 8px 28px rgba(194,159,104,.28);

  /* movimento */
  --ease:cubic-bezier(.22,.72,.28,1);
  --rapido:.16s; --medio:.28s; --lento:.52s;

  /* tipografia */
  --display:"Fraunces","Display Fallback",Georgia,serif;
  --texto:"Archivo","Texto Fallback",system-ui,sans-serif;
  --t-micro:clamp(.75rem,.72rem + .15vw,.8125rem);
  --t-peq:clamp(.875rem,.85rem + .12vw,.9375rem);
  --t-corpo:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --t-lead:clamp(1.125rem,1.05rem + .35vw,1.375rem);
  --t-h3:clamp(1.25rem,1.1rem + .7vw,1.75rem);
  --t-h2:clamp(1.75rem,1.35rem + 2vw,3rem);
  --t-h1:clamp(2.25rem,1.4rem + 4.2vw,4.5rem);
  --t-gesto:clamp(2.75rem,1.2rem + 8vw,8rem);
  --lh-h1:1.02; --lh-h2:1.08; --lh-h3:1.2;
  --lh-lead:1.45; --lh-corpo:1.6; --lh-micro:1.25;

  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;
  --e-6:32px;--e-7:48px;--e-8:64px;--e-9:96px;--e-10:128px;

  --margem:20px; --calha:16px;
  --secao-densa:clamp(48px,9vw,80px);
  --secao-media:clamp(64px,11vw,116px);
  --secao-ampla:clamp(80px,15vw,172px);
  --topo-altura:64px;
}
@media(min-width:600px){:root{--margem:32px;--calha:24px}}
@media(min-width:900px){:root{--margem:48px;--calha:32px;--topo-altura:76px}}

/* ---------- 3. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis:none;font-synthesis-small-caps:none;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--topo-altura) + 16px);
  hanging-punctuation:first last}
html,body{overflow-x:clip}
body{margin:0;background:var(--creme);color:var(--corpo);
  font-family:var(--texto);font-size:var(--t-corpo);line-height:var(--lh-corpo);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:900px){body{padding-bottom:0}}
img,svg{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
figure{margin:0}

/* grao de papel no site inteiro — e o que separa "impresso" de "achatado" */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;background-repeat:repeat;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E")}
@media(prefers-reduced-transparency:reduce){body::after{display:none}}
@media(forced-colors:active){body::after{display:none}}

/* ---------- 4. TIPOGRAFIA ------------------------------------------------ */
h1,h2,h3,.gesto{font-family:var(--display);font-weight:600;margin:0;
  text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
/* Sem hifenizacao automatica em titulo: ela produzia "pro-cesso" e "con-tra"
   no H1 em toda largura. O 'overflow-wrap:break-word' acima ja cobre o unico
   caso que o §4.2 queria evitar — palavra longa demais estourando o container. */
h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:-.028em;
  font-variation-settings:"opsz" 144}
h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:-.02em;
  font-variation-settings:"opsz" 96}
h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:-.012em;
  font-variation-settings:"opsz" 42}
p{margin:0;max-width:64ch;text-wrap:pretty}
p + p{margin-top:var(--e-5)}
em,.italico{font-style:italic}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);max-width:52ch}
.micro{font-size:var(--t-micro);line-height:var(--lh-micro)}
.peq{font-size:var(--t-peq);line-height:1.5}
.fraco{color:var(--corpo-fraco-c)}
[data-fundo="escuro"] .fraco{color:var(--corpo-fraco-e)}
.versalete{font-weight:500;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase}
.visualmente-oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* pendencia: anotacao editorial, com o rotulo desenhado */
.pendente{display:block;margin-block:var(--e-3);padding:var(--e-3) var(--e-4);
  border-radius:var(--r-1);border:0;
  background:color-mix(in srgb, var(--bronze) 12%, transparent);
  box-shadow:inset 2px 0 0 var(--bronze-texto);
  font-family:var(--texto);font-style:italic;font-size:var(--t-peq);
  line-height:1.5;color:var(--bronze-texto)}
[data-fundo="escuro"] .pendente{color:var(--champagne);
  background:color-mix(in srgb, var(--bronze) 14%, transparent);
  box-shadow:inset 2px 0 0 var(--bronze)}

/* ---------- 5. LAYOUT ---------------------------------------------------- */
.container{width:min(100% - var(--margem)*2, 1280px);margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--calha);
  position:relative;z-index:2}
.container > *{grid-column:1 / -1}

.bg-navy-deep{background:var(--navy-deep)}
.bg-navy{background:var(--navy)}
.bg-creme{background:var(--creme)}
.bg-creme-2{background:var(--creme-2)}
main section{position:relative}
[data-fundo="escuro"]{color:var(--sobre-navy-corpo)}
[data-fundo="escuro"] h1,[data-fundo="escuro"] h2,[data-fundo="escuro"] h3{color:var(--sobre-navy)}
[data-fundo="claro"] h1,[data-fundo="claro"] h2,[data-fundo="claro"] h3{color:var(--tinta)}

.sangra-dir{margin-right:calc(50% - 50vw)}
.sangra-esq{margin-left:calc(50% - 50vw)}
@media(max-width:899px){.sangra-dir,.sangra-esq{margin-inline:0}}

.pular{position:fixed;left:var(--margem);top:-100px;z-index:90;
  background:var(--creme);color:var(--tinta);padding:var(--e-3) var(--e-5);
  border-radius:var(--r-cheio);box-shadow:var(--sombra-2);text-decoration:none;
  transition:top var(--rapido) var(--ease)}
.pular:focus{top:var(--e-3)}

/* revelacao ao rolar — ver tambem o bloco 14, de animacao guiada pela rolagem */
.anim [data-reveal]{opacity:0;transform:translateY(24px);will-change:opacity,transform;
  transition:opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
  transition-delay:var(--atraso,0ms)}
.anim [data-reveal="esq"]{transform:translateX(-32px)}
.anim [data-reveal="dir"]{transform:translateX(32px)}
.anim [data-reveal="escala"]{transform:scale(.94) translateY(20px)}
/* "cortina" desce de cima, ao contrario do padrao, que sobe. NAO usar clip-path
   aqui: o IntersectionObserver do Chrome leva o clip em conta, entao um elemento
   recortado a zero nunca e reportado como visivel e o titulo jamais aparece.
   Medido em 19/08/2026 num <div> de 688x84 a 152px do topo da janela:
   isIntersecting=false, intersectionRatio=0. */
.anim [data-reveal="cortina"]{transform:translateY(-22px)}
.anim [data-reveal="subir"]{transform:translateY(44px)}
.anim [data-reveal].visivel{opacity:1;transform:none}
.anim [data-reveal].visivel{will-change:auto}
.sem-movimento [data-reveal],html:not(.anim) [data-reveal]{opacity:1;transform:none;transition:none}

/* ---------- 6. TOPO FIXO ------------------------------------------------- */
.topo{position:sticky;top:0;z-index:50;
  background:var(--vidro-escuro);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background var(--medio) var(--ease),border-color var(--medio) var(--ease)}
.topo[data-rolado="sim"]{border-bottom-color:var(--filete-escuro);
  box-shadow:0 1px 0 rgba(0,0,0,.25)}
.topo .container{min-height:var(--topo-altura);display:flex;align-items:center;
  justify-content:space-between;gap:var(--e-5)}
.topo .assinatura{margin:0}
.topo .btn-primario{display:none}
@media(min-width:900px){.topo .btn-primario{display:inline-flex;min-height:46px;
  font-size:.9375rem;padding:0 var(--e-5)}}

/* Assinatura: tipografia do logotipo do escritorio — geometrica, caixa alta,
   peso unico e entreletra larga. A segunda linha e a dourada. */
.assinatura .nome{display:block;font-family:var(--texto);font-weight:400;
  font-size:clamp(1rem,.9rem + .38vw,1.25rem);letter-spacing:.2em;
  text-transform:uppercase;color:var(--sobre-navy);line-height:1.15;
  margin-right:-.2em}
.assinatura .qualificacao{display:block;margin-top:5px;
  font-size:clamp(.625rem,.58rem + .16vw,.75rem);font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);
  line-height:1.2;margin-right:-.26em}
[data-fundo="claro"] .assinatura .nome{color:var(--tinta)}
[data-fundo="claro"] .assinatura .qualificacao{color:var(--bronze-texto)}
.barra-fixa .assinatura-linha,.topo .assinatura-linha{font-family:var(--texto);
  font-weight:400;letter-spacing:.2em;text-transform:uppercase}

/* ---------- 7. COMPONENTES ----------------------------------------------- */

/* 7.1 Rotulo + regua */
.sobretitulo{display:inline-flex;align-items:center;gap:var(--e-2);
  font-weight:500;font-size:var(--t-micro);line-height:1;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze-texto);
  padding:var(--e-2) var(--e-4);border-radius:var(--r-cheio);
  background:color-mix(in srgb, var(--bronze) 14%, transparent)}
[data-fundo="escuro"] .sobretitulo{color:var(--champagne);
  background:color-mix(in srgb, var(--champagne) 12%, transparent)}
.sobretitulo::before{content:"";width:6px;height:6px;border-radius:var(--r-cheio);
  background:var(--bronze-texto);flex:none}
[data-fundo="escuro"] .sobretitulo::before{background:var(--bronze)}
.rotulo{margin-bottom:var(--e-5)}
.regua{height:1px;border:0;margin:var(--e-5) 0;
  background:linear-gradient(90deg,var(--filete-claro),transparent)}
[data-fundo="escuro"] .regua{background:linear-gradient(90deg,var(--filete-escuro),transparent)}
.numeral-secao{display:block;font-family:var(--display);font-size:var(--t-h3);
  font-weight:400;color:var(--bronze-texto);margin-bottom:var(--e-4);
  font-variation-settings:"opsz" 60}
[data-fundo="escuro"] .numeral-secao{color:var(--bronze)}

/* 7.2 Ponto-chave */
.ponto-chave{position:relative;border-radius:var(--r-3);padding:var(--e-8) var(--e-6);
  text-align:center;background:var(--sup-clara);box-shadow:var(--sombra-2);
  border:1px solid var(--filete-claro);overflow:hidden}
.ponto-chave::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--champagne),var(--bronze))}
.ponto-chave p{font-family:var(--texto);font-style:italic;font-size:var(--t-lead);
  line-height:var(--lh-lead);color:var(--tinta);max-width:44ch;margin-inline:auto}
.ponto-chave .dispositivo{margin-top:var(--e-5)}

/* 7.3 Dispositivo legal */
.dispositivo{display:block;font-family:var(--texto);font-weight:500;
  font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--bronze-texto);max-width:none}
[data-fundo="escuro"] .dispositivo{color:var(--bronze)}

/* 7.4 Lista de areas — cartoes com elevacao e seta */
.areas{display:grid;gap:var(--e-4)}
.linha-area{position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:0 var(--e-5);align-items:start;min-height:88px;
  padding:var(--e-6) var(--e-6) var(--e-6) var(--e-5);
  border-radius:var(--r-2);text-decoration:none;color:inherit;
  background:var(--sup-clara);border:1px solid var(--filete-claro);
  box-shadow:var(--sombra-1);
  transition:transform var(--medio) var(--ease),box-shadow var(--medio) var(--ease),
    border-color var(--medio) var(--ease)}
[data-fundo="escuro"] .linha-area{background:var(--sup-escura);
  border-color:var(--filete-escuro);box-shadow:var(--sombra-e1)}
.linha-area .numeral{font-family:var(--display);font-size:var(--t-h3);font-weight:400;
  line-height:1;color:var(--bronze-texto);font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 60;padding-top:.12em}
.linha-area .titulo{display:block;font-family:var(--display);font-size:var(--t-h3);
  line-height:var(--lh-h3);letter-spacing:-.012em;color:var(--tinta);
  font-variation-settings:"opsz" 34}
[data-fundo="escuro"] .linha-area .titulo{color:var(--sobre-navy)}
.linha-area .apoio{display:block;margin-top:var(--e-3);font-size:var(--t-peq);
  line-height:1.55;color:var(--corpo);max-width:56ch}
.linha-area .seta-ir{flex:none;width:22px;height:22px;align-self:center;
  stroke:var(--bronze-texto);stroke-width:1.6;fill:none;stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--medio) var(--ease),stroke var(--medio) var(--ease)}

/* 7.5 Passos numerados */
.passos{display:grid;gap:var(--e-4)}
.passos > li{display:grid;grid-template-columns:auto 1fr;gap:0 var(--e-5);
  padding:var(--e-6);border-radius:var(--r-2);background:var(--sup-clara);
  border:1px solid var(--filete-claro);box-shadow:var(--sombra-1)}
.passos .numeral{display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-cheio);font-family:var(--display);font-size:1.125rem;
  font-weight:500;line-height:1;color:var(--navy-deep);
  background:linear-gradient(160deg,var(--champagne),var(--bronze));
  font-variant-numeric:tabular-nums;box-shadow:var(--sombra-bronze)}
.passos h3{margin-bottom:var(--e-3)}

/* 7.6 Botoes */
.btn-primario{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 var(--e-6);border-radius:var(--r-cheio);
  background:linear-gradient(160deg,color-mix(in srgb,var(--champagne) 55%,var(--bronze)),var(--bronze));
  color:var(--navy-deep);font-weight:600;font-size:1.0625rem;line-height:1.25;
  letter-spacing:.005em;text-align:center;text-decoration:none;width:100%;
  box-shadow:var(--sombra-bronze);
  transition:transform var(--rapido) var(--ease),box-shadow var(--medio) var(--ease),
    filter var(--rapido) var(--ease)}
.btn-primario .glifo{flex:none;width:22px;height:22px;fill:var(--whatsapp)}
.btn-primario:active{transform:translateY(1px) scale(.995)}
@media(min-width:600px){.btn-primario{width:auto}.acao{display:flex}}

.btn-secundario{display:inline-flex;align-items:center;gap:var(--e-3);min-height:52px;
  padding:0 var(--e-6);border-radius:var(--r-cheio);
  border:1px solid var(--filete-escuro);color:var(--champagne);text-decoration:none;
  font-weight:500;font-size:var(--t-peq);letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb,var(--navy-soft) 55%,transparent);
  transition:background var(--medio) var(--ease),border-color var(--medio) var(--ease),
    transform var(--rapido) var(--ease)}
[data-fundo="claro"] .btn-secundario{color:var(--bronze-texto);
  border-color:var(--filete-claro);background:var(--sup-clara);box-shadow:var(--sombra-1)}
.btn-secundario:active{transform:translateY(1px)}

.microcopy{margin-top:var(--e-3);font-size:var(--t-peq);line-height:1.5;
  color:var(--corpo-fraco-c);max-width:36ch}
[data-fundo="escuro"] .microcopy{color:var(--corpo-fraco-e)}
.telefone{display:inline-flex;align-items:center;min-height:48px;
  font-size:var(--t-lead);font-weight:500}

/* 7.7 Avisos obrigatorios do ponto de contato */
.avisos{margin-top:var(--e-6);padding:var(--e-5);border-radius:var(--r-2);
  border:1px solid var(--filete-claro);max-width:60ch;
  background:color-mix(in srgb,var(--creme) 55%,transparent)}
[data-fundo="escuro"] .avisos{border-color:var(--filete-escuro);
  background:color-mix(in srgb,var(--navy-soft) 45%,transparent)}
.avisos p{font-size:var(--t-peq);line-height:1.55;color:var(--corpo-fraco-c)}
[data-fundo="escuro"] .avisos p{color:var(--corpo-fraco-e)}
.avisos p + p{margin-top:var(--e-4)}

/* 7.8 Acordeao com abertura animada */
.faq{display:grid;gap:var(--e-3)}
.faq-item{border-radius:var(--r-2);overflow:hidden;
  background:var(--sup-escura);border:1px solid var(--filete-escuro);
  transition:background var(--medio) var(--ease),border-color var(--medio) var(--ease)}
.faq-item[data-aberto="sim"]{background:var(--sup-escura-2);
  border-color:color-mix(in srgb,var(--bronze) 40%,transparent)}
.faq-item h3{margin:0}
.faq-gatilho{display:flex;align-items:center;justify-content:space-between;
  gap:var(--e-5);width:100%;min-height:68px;padding:var(--e-5) var(--e-6);
  text-align:left;cursor:pointer;font-family:var(--display);
  font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:600;
  letter-spacing:-.012em;color:var(--sobre-navy);font-variation-settings:"opsz" 34}
.faq-gatilho .seta{flex:none;width:20px;height:20px;stroke:var(--bronze);
  stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--medio) var(--ease)}
.faq-gatilho[aria-expanded="true"] .seta{transform:rotate(180deg)}
.faq-resposta{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--medio) var(--ease)}
.faq-item[data-aberto="sim"] .faq-resposta{grid-template-rows:1fr}
.faq-resposta > .faq-interno{overflow:hidden}
.faq-resposta .faq-conteudo{padding:0 var(--e-6) var(--e-6)}
.faq-resposta p{color:var(--sobre-navy-corpo);max-width:62ch}
.faq-resposta .dispositivo{margin-top:var(--e-4)}

/* 7.9 Faixa informativa */
.faixa{position:relative;background:var(--creme-2)}
.faixa::before,.faixa::after{content:"";position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent)}
.faixa::before{top:0}.faixa::after{bottom:0}
.faixa .container{padding-block:var(--e-5)}
.faixa-texto{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-4);
  font-size:var(--t-peq);line-height:1.5;color:var(--corpo);max-width:none}
.faixa-texto a{font-weight:600;white-space:nowrap}

/* 7.10 Fotografia */
.foto{position:relative;isolation:isolate;margin:0;border-radius:var(--r-3);
  overflow:hidden;box-shadow:var(--sombra-e2)}
.foto img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.95)}
.foto::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--navy-deep);mix-blend-mode:lighten}
.foto::after{content:"";position:absolute;inset:0;z-index:2;
  background:var(--champagne);mix-blend-mode:multiply}
.grao{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;background-repeat:repeat;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
@media(prefers-reduced-transparency:reduce){.grao{display:none}}
@media(forced-colors:active){.foto::before,.foto::after,.grao{display:none}}

/* Slot de foto ainda vazio: desenhado, nao buraco.
   Na publicacao, slot que continuar vazio = bloco removido. */
.foto-vazia{position:relative;overflow:hidden;border-radius:var(--r-3);
  background:radial-gradient(120% 90% at 20% 10%,var(--navy-soft),var(--navy-deep) 62%);
  border:1px solid var(--filete-escuro);box-shadow:var(--sombra-e2);
  display:flex;align-items:flex-end;padding:var(--e-6)}
.foto-vazia::before{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;background-repeat:repeat;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.foto-vazia::after{content:"";position:absolute;inset:14px;border-radius:calc(var(--r-3) - 8px);
  border:1px solid var(--filete-escuro);pointer-events:none}
.foto-vazia .nome-arquivo{position:relative;z-index:1;font-size:var(--t-micro);
  line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);
  padding:var(--e-2) var(--e-4);border-radius:var(--r-cheio);
  background:color-mix(in srgb,var(--navy-deep) 70%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--filete-escuro)}
@media(forced-colors:active){.foto-vazia::before{display:none}}

/* 7.11 Momento tipografico */
.gesto{font-size:var(--t-gesto);line-height:.95;letter-spacing:-.03em;
  text-align:left;max-inline-size:16ch;overflow-wrap:anywhere;font-weight:400;
  font-variation-settings:"opsz" 144;
  background:linear-gradient(120deg,var(--sobre-navy) 4%,var(--champagne) 44%,var(--bronze) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media(forced-colors:active){.gesto{color:var(--champagne);background:none}}

/* 7.12 Linha do tempo */
.tempo{position:relative;display:grid;gap:0}
.tempo > li{position:relative;padding-left:var(--e-7);padding-bottom:var(--e-7)}
.tempo > li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;
  border-radius:var(--r-cheio);background:var(--bronze);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--bronze) 20%,transparent)}
.tempo > li::after{content:"";position:absolute;left:6px;top:20px;bottom:-4px;width:2px;
  border-radius:var(--r-cheio);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bronze) 55%,transparent),transparent)}
.tempo > li:last-child{padding-bottom:0}
.tempo > li:last-child::after{display:none}
.tempo > li:nth-child(1){padding-bottom:var(--e-9)}
.tempo > li:nth-child(2){padding-bottom:var(--e-10)}
.tempo > li:nth-child(3){padding-bottom:var(--e-6)}
.tempo .hora{display:inline-block;margin-bottom:var(--e-3);padding:var(--e-1) var(--e-3);
  border-radius:var(--r-cheio);font-weight:500;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);
  background:color-mix(in srgb,var(--champagne) 12%,transparent)}
.tempo h3{margin-bottom:var(--e-3)}
.tempo p{color:var(--sobre-navy-corpo);max-width:48ch}
.tempo .dispositivo{margin-top:var(--e-4)}

/* 7.13 Citacao */
.citacao{position:relative;padding-left:var(--e-6)}
.citacao::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;
  border-radius:var(--r-cheio);
  background:linear-gradient(180deg,var(--bronze),transparent)}
.citacao p{font-family:var(--display);font-size:var(--t-lead);line-height:var(--lh-lead);
  color:var(--tinta);max-width:52ch;font-variation-settings:"opsz" 48}
.citacao .dispositivo{margin-bottom:var(--e-4)}

/* 7.14 Tira escura dentro de secao clara */
.tira-escura{border-radius:var(--r-3);padding:var(--e-8) var(--e-7);
  color:var(--sobre-navy-corpo);box-shadow:var(--sombra-3);
  background:radial-gradient(120% 140% at 8% 0%,var(--navy-soft),var(--navy-deep) 58%)}
.tira-escura p{max-width:58ch}
.tira-escura .dispositivo{margin-top:var(--e-5);color:var(--bronze)}

/* 7.15 Mapa */
.mapa{display:block;width:100%;height:auto;border-radius:var(--r-2);
  border:1px solid var(--filete-claro);box-shadow:var(--sombra-1)}

/* 7.16 Canal fixo do celular */
.wa-flutuante{position:fixed;right:clamp(12px,4vw,20px);z-index:60;
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:var(--r-cheio);display:grid;place-items:center;
  background:var(--whatsapp);border:2px solid var(--navy-deep);
  box-shadow:0 6px 24px rgba(37,211,102,.34), 0 2px 8px rgba(0,0,0,.25);
  transition:transform var(--rapido) var(--ease)}
.wa-flutuante svg{width:30px;height:30px;fill:var(--sobre-navy)}
.wa-flutuante:active{transform:scale(.94)}
@media(min-width:900px){.wa-flutuante{display:none}}

/* 7.17 Rodape */
.rodape{position:relative;background:var(--navy-deep);color:var(--sobre-navy-corpo)}
.rodape::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--bronze),transparent)}
.rodape .container{padding-block:var(--secao-media) var(--secao-densa)}
.rodape .bloco + .bloco{margin-top:var(--e-6);padding-top:var(--e-6);
  border-top:1px solid var(--filete-escuro)}
.rodape p{font-size:var(--t-peq);line-height:1.65;max-width:74ch}
.rodape .disclaimer{font-style:italic;color:var(--corpo-fraco-e)}
.rodape-nav{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3)}
.rodape-nav a{display:inline-flex;align-items:center;min-height:48px;
  padding:0 var(--e-4);border-radius:var(--r-cheio);font-size:var(--t-peq);
  text-decoration:none;border:1px solid var(--filete-escuro);
  transition:background var(--medio) var(--ease),border-color var(--medio) var(--ease)}

/* ---------- 8. ESTADOS --------------------------------------------------- */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--bronze-texto) 55%,transparent);
  transition:text-decoration-color var(--rapido) var(--ease),color var(--rapido) var(--ease)}
a:visited{color:inherit}
[data-fundo="escuro"] a{text-decoration-color:color-mix(in srgb,var(--bronze) 60%,transparent)}
.btn-primario,.btn-secundario,.linha-area,.wa-flutuante,.pular,.rodape-nav a{text-decoration:none}

:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--foco-claro);outline-offset:3px;border-radius:var(--r-1)}
[data-fundo="escuro"] :where(a,button,summary,input,[tabindex]):focus-visible{
  outline-color:var(--foco-escuro)}

@media(hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:var(--tinta)}
  [data-fundo="escuro"] a:hover{text-decoration-color:var(--champagne)}
  .btn-primario:hover{transform:translateY(-2px);filter:brightness(1.04);
    box-shadow:0 12px 34px rgba(194,159,104,.38)}
  .btn-secundario:hover{transform:translateY(-2px);
    background:color-mix(in srgb,var(--navy-soft) 88%,transparent);
    border-color:color-mix(in srgb,var(--bronze) 46%,transparent)}
  [data-fundo="claro"] .btn-secundario:hover{background:var(--creme-2);
    box-shadow:var(--sombra-2)}
  .linha-area:hover{transform:translateY(-3px);box-shadow:var(--sombra-3);
    border-color:color-mix(in srgb,var(--bronze) 45%,transparent)}
  [data-fundo="escuro"] .linha-area:hover{box-shadow:var(--sombra-e2)}
  .linha-area:hover .seta-ir{transform:translateX(5px);stroke:var(--bronze)}
  .faq-gatilho:hover .seta{stroke:var(--champagne)}
  .rodape-nav a:hover{background:var(--navy-soft);
    border-color:color-mix(in srgb,var(--bronze) 40%,transparent)}
  .wa-flutuante:hover{transform:translateY(-3px)}
}
.linha-area:active{transform:translateY(0) scale(.995)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}}

/* ---------- 9. RECORTES DE DESKTOP (>=900px) ----------------------------- */
@media(min-width:900px){
  #hero .hero-texto{grid-column:1 / 7;align-self:center;position:relative;z-index:3}
  #hero .hero-foto{grid-column:7 / -1;grid-row:1;align-self:center}
  .faixa .faixa-texto{grid-column:2 / 12}
  #situacoes .bloco{grid-column:2 / -1}
  #primeira-hora .cabeca{grid-column:1 / 8}
  #primeira-hora .gesto-bloco{grid-column:1 / 10}
  #primeira-hora .tempo-bloco{grid-column:1 / 8}
  #primeira-hora .familia{grid-column:8 / -1;align-self:start}
  #primeiro-contato .bloco{grid-column:1 / 8}
  #saber .saber-cabeca{grid-column:4 / -1}
  #saber .saber-a{grid-column:4 / 12}
  #saber .saber-b{grid-column:5 / 11}
  #saber .saber-c{grid-column:1 / -1}
  #francisco .fm-foto{grid-column:1 / 7}
  #francisco .fm-texto{grid-column:7 / -1;align-self:center}
  #faq .bloco{grid-column:4 / -1}
  #de-onde .onde-texto{grid-column:1 / 8;grid-row:1}
  #de-onde .onde-mapa{grid-column:8 / -1;grid-row:1 / 3;align-self:start}
  #de-onde .onde-foto{grid-column:1 / 8;grid-row:2;margin-top:var(--e-7)}
  .citacao{padding-left:0}
  .citacao::before{display:none}
  .citacao{display:grid;grid-template-columns:16ch 1fr;gap:0 var(--e-6)}
  .citacao .dispositivo{grid-column:1;grid-row:1;margin:.5em 0 0;text-align:right}
  .citacao p{grid-column:2;grid-row:1;padding-left:var(--e-6);
    border-left:1px solid var(--filete-claro)}
  #situacoes .linha-area{grid-template-columns:4rem 1fr auto;
    padding:var(--e-7) var(--e-7) var(--e-7) var(--e-6)}
  #primeiro-contato .passos > li{padding:var(--e-7)}
  .tira-escura{padding:var(--e-9) var(--e-8)}
}

/* ---------- 10. RITMO POR SECAO ------------------------------------------ */
/* A secao 8 (Conteudo publico) nao existe: nenhum veiculo confirmado — §5.1. */
#hero{padding-block:var(--secao-ampla)}
#situacoes{padding-block:var(--secao-media)}
#primeira-hora{padding-block:var(--secao-ampla)}
#primeiro-contato{padding-block:var(--secao-densa)}
#saber{padding-block:var(--secao-media)}
#francisco{padding-block:var(--secao-media) var(--secao-densa)}
#faq{padding-block:var(--secao-densa) var(--secao-media)}
#de-onde{padding-block:var(--secao-media)}

/* clarao de bronze nos campos escuros — profundidade, nao decoracao */
#hero::before,#primeira-hora::before,#faq::before{content:"";position:absolute;
  inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(80% 60% at 78% 8%,color-mix(in srgb,var(--bronze) 13%,transparent),transparent 62%)}
#francisco::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 60% at 12% 92%,color-mix(in srgb,var(--champagne) 10%,transparent),transparent 60%)}
@media(forced-colors:active){
  #hero::before,#primeira-hora::before,#faq::before,#francisco::before{display:none}}

/* ---------- 11. PARES DE ESPACO E AJUSTES -------------------------------- */
h1 + .lead,h2 + .lead{margin-top:var(--e-5)}
h2 + p:not(.lead),h2 + .faq,h2 + ol,h2 + ul,h2 + div,h2 + .areas{margin-top:var(--e-7)}
h3 + p{margin-top:var(--e-3)}
.numeral-secao + h2{margin-top:0}

#hero .acao{margin-top:var(--e-7)}
#hero .telefone{margin-top:var(--e-5)}
#hero .micro{margin-top:var(--e-2)}
#hero .hero-foto{margin-top:var(--e-8);aspect-ratio:4/5;max-height:52svh}
@media(min-width:900px){
  #hero{padding-block:var(--secao-media)}
  #hero .hero-foto{margin-top:0;aspect-ratio:3/4;max-height:min(76svh,680px)}
}
#situacoes .areas{margin-top:var(--e-7)}
.regua-sangrada{height:1px;border:0;margin:var(--e-8) 0 var(--e-7);
  background:linear-gradient(90deg,var(--filete-escuro),transparent)}
#primeira-hora .gesto-bloco{margin-top:var(--e-8)}
#primeira-hora .familia{margin-top:var(--e-8)}
#primeira-hora .familia .lista-familia{display:grid;gap:var(--e-3);margin-top:var(--e-5)}
#primeira-hora .familia .lista-familia li{padding:var(--e-5);border-radius:var(--r-2);
  background:color-mix(in srgb,var(--navy-soft) 55%,transparent);
  border:1px solid var(--filete-escuro)}
#primeira-hora .familia p{color:var(--sobre-navy-corpo);max-width:44ch}
@media(min-width:900px){#primeira-hora .familia{margin-top:var(--e-10)}}
.saber-a{margin-top:var(--e-7)}
.saber-b{margin-top:var(--e-9)}
.saber-c{margin-top:var(--e-9)}
#francisco .fm-foto{aspect-ratio:3/2;margin-bottom:var(--e-7)}
#francisco .acao{margin-top:var(--e-6)}
@media(min-width:900px){#francisco .fm-foto{margin-bottom:0;aspect-ratio:4/5}}
#faq .faq{margin-top:var(--e-7)}
#de-onde .onde-mapa{margin-top:var(--e-7)}
#de-onde .onde-foto{margin-top:var(--e-7);aspect-ratio:3/2}
#de-onde .acao{margin-top:var(--e-7)}
#de-onde .onde-texto .endereco{margin-top:var(--e-6)}
@media(min-width:900px){#de-onde .onde-mapa{margin-top:0}}

/* ---------- 12. CARROSSEL E ATRASOS DE REVELACAO ------------------------- */
[data-atraso="1"]{--atraso:90ms}
[data-atraso="2"]{--atraso:170ms}
[data-atraso="3"]{--atraso:250ms}
[data-atraso="4"]{--atraso:330ms}

.carrossel-cabeca{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e-5);flex-wrap:wrap}
.carrossel-controles{display:flex;gap:var(--e-2)}
.carrossel-btn{display:grid;place-items:center;width:48px;height:48px;
  border-radius:var(--r-cheio);border:1px solid var(--filete-claro);
  background:var(--sup-clara);box-shadow:var(--sombra-1);cursor:pointer;
  transition:transform var(--rapido) var(--ease),box-shadow var(--medio) var(--ease),
    border-color var(--medio) var(--ease),opacity var(--medio) var(--ease)}
.carrossel-btn svg{width:20px;height:20px;fill:none;stroke:var(--bronze-texto);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[data-fundo="escuro"] .carrossel-btn{background:var(--sup-escura);
  border-color:var(--filete-escuro);box-shadow:var(--sombra-e1)}
[data-fundo="escuro"] .carrossel-btn svg{stroke:var(--champagne)}
.carrossel-btn[disabled]{opacity:.35;cursor:default}

.carrossel{display:flex;gap:var(--e-4);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;
  padding:var(--e-2) 0 var(--e-5);margin-inline:calc(var(--margem) * -1);
  padding-inline:var(--margem);scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}
.carrossel-item{flex:0 0 min(86%,360px);scroll-snap-align:start;display:flex}
.carrossel-item .linha-area{width:100%}
.carrossel-dica{margin-top:var(--e-2)}
@media(min-width:600px){.carrossel-item{flex-basis:min(58%,400px)}}
@media(min-width:900px){
  .carrossel{margin-inline:0;padding-inline:0;gap:var(--e-5)}
  .carrossel-item{flex-basis:calc((100% - var(--e-5) * 2) / 3)}
  .carrossel-dica{display:none}
}
.linha-area-texto{min-width:0}

/* o cartao do carrossel empilha o numeral acima do titulo, para caber */
.carrossel .linha-area{grid-template-columns:1fr auto;align-content:start}
.carrossel .linha-area .numeral{grid-column:1;grid-row:1;margin-bottom:var(--e-4)}
.carrossel .linha-area .linha-area-texto{grid-column:1 / -1;grid-row:2}
.carrossel .linha-area .seta-ir{grid-column:2;grid-row:1;align-self:start}
@media(min-width:900px){
  #situacoes .carrossel .linha-area{grid-template-columns:1fr auto;
    padding:var(--e-7) var(--e-6)}
}

/* =========================================================================
   13. PAGINAS DE AREA (§5.2)
   Sete blocos, nenhum repetindo o formato do anterior:
   hero · paragrafos com entrada em versalete · ponto-chave sangrado ·
   linhas numeradas com filete · lista de definicao em duas colunas ·
   autoridade + CTA · acordeao.
   ========================================================================= */

/* 13.1 Migalha */
.migalha{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--corpo-fraco-e)}
.migalha ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.migalha li{display:flex;align-items:center;gap:var(--e-2)}
.migalha li + li::before{content:"";width:12px;height:1px;background:var(--filete-escuro)}
.migalha a{min-height:44px;display:inline-flex;align-items:center}
.migalha [aria-current]{color:var(--champagne)}

/* 13.2 Paragrafos com entrada em versalete — nao e lista com marcador */
.entradas > p{max-width:60ch}
.entradas > p + p{margin-top:var(--e-6)}
.entradas .entrada{font-weight:600;font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bronze-texto);
  margin-right:var(--e-3)}
[data-fundo="escuro"] .entradas .entrada{color:var(--champagne)}

/* 13.3 Linhas numeradas com filete — sem cartao, ao contrario da home */
.numeradas{border-top:1px solid var(--filete-escuro)}
.numeradas > li{display:grid;grid-template-columns:auto 1fr;gap:0 var(--e-5);
  padding:var(--e-6) 0;border-bottom:1px solid var(--filete-escuro)}
.numeradas .numeral{font-family:var(--display);font-size:var(--t-h3);font-weight:400;
  line-height:1.1;color:var(--bronze);font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 60}
.numeradas h3{margin-bottom:var(--e-3)}
.numeradas p{color:var(--sobre-navy-corpo);max-width:56ch}
@media(min-width:900px){.numeradas > li{grid-template-columns:5rem 1fr}}

/* 13.4 Lista de definicao em duas colunas */
.definicoes{display:grid;gap:var(--e-4)}
.definicoes > div{padding:var(--e-5);border-radius:var(--r-2);
  background:var(--sup-clara);border:1px solid var(--filete-claro);
  box-shadow:var(--sombra-1)}
.definicoes dt{font-family:var(--display);font-size:var(--t-h3);line-height:var(--lh-h3);
  letter-spacing:-.012em;color:var(--tinta);font-variation-settings:"opsz" 34;
  margin-bottom:var(--e-3)}
.definicoes dd{font-size:var(--t-peq);line-height:1.55;color:var(--corpo);max-width:56ch}
@media(min-width:600px){.definicoes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 13.5 Ritmo e recortes das paginas de area */
.area-hero{padding-block:var(--secao-media) var(--secao-ampla)}
.area-quando{padding-block:var(--secao-media)}
.area-urgencia{padding-block:var(--secao-densa)}
.area-defesa{padding-block:var(--secao-ampla)}
.area-piora{padding-block:var(--secao-media)}
.area-cta{padding-block:var(--secao-media)}
.area-faq{padding-block:var(--secao-densa) var(--secao-media)}

.area-hero .migalha{margin-bottom:var(--e-6)}
.area-hero .acao{margin-top:var(--e-7)}
.area-hero .hero-foto{margin-top:var(--e-8);aspect-ratio:4/5;max-height:48svh}
.area-urgencia .ponto-chave{margin:0}
.area-defesa .gesto-bloco{margin-bottom:var(--e-8)}
.area-defesa .numeradas{margin-top:var(--e-7)}
.area-piora .definicoes{margin-top:var(--e-7)}
.area-cta .acao{margin-top:var(--e-7)}
.area-faq .faq{margin-top:var(--e-7)}

@media(min-width:900px){
  .area-hero .hero-texto{grid-column:1 / 8;align-self:center}
  .area-hero .hero-foto{grid-column:8 / -1;grid-row:1;margin-top:0;
    aspect-ratio:3/4;max-height:min(70svh,620px);align-self:center}
  .area-quando .bloco{grid-column:1 / 7}
  .area-urgencia .bloco{grid-column:1 / 10}
  .area-defesa .bloco{grid-column:2 / -1}
  /* §5.2 pede 5-12 aqui. Em 1024px isso deixa duas colunas de ~200px, com o
     titulo quebrando em tres linhas dentro do cartao. Aberto para 4-12. */
  .area-piora .bloco{grid-column:4 / -1}
  .area-cta .bloco{grid-column:1 / 9}
  .area-faq .bloco{grid-column:1 / 9}
}

/* a caixa da linha de urgencia sangra a esquerda a partir de 900px */
@media(min-width:900px){
  .area-urgencia .ponto-chave{margin-left:calc(50% - 50vw);
    border-radius:0 var(--r-3) var(--r-3) 0;
    padding-left:max(var(--margem), calc(50vw - 50% + var(--e-6)))}
}

/* =========================================================================
   14. ANIMACAO GUIADA PELA ROLAGEM
   Duas camadas que se somam sem brigar:
   (a) revelacao de entrada, disparada por IntersectionObserver, usando
       'transform' e 'opacity' — funciona em qualquer navegador;
   (b) movimento continuo, preso a posicao da rolagem via animation-timeline,
       usando as propriedades independentes 'translate' e 'scale', que compoem
       com o 'transform' da camada (a) em vez de sobrescreve-lo.
   Tudo desligado em prefers-reduced-motion.
   ========================================================================= */

/* 14.1 Barra de progresso de leitura */
.progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--bronze),var(--champagne))}

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .progresso{transform:none;scale:0 1;
      animation:barra-progresso linear both;
      animation-timeline:scroll(root block)}
    @keyframes barra-progresso{from{scale:0 1}to{scale:1 1}}
  }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* 14.2 Parallax das fotos e dos slots — 'translate', nao 'transform' */
    .foto,.foto-vazia{animation:parallax-foto linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parallax-foto{from{translate:0 30px}to{translate:0 -30px}}

    /* 14.3 O momento tipografico desliza contra a rolagem */
    .gesto{animation:gesto-desliza linear both;
      animation-timeline:view();animation-range:entry 0% cover 70%}
    @keyframes gesto-desliza{from{translate:-4% 0}to{translate:2% 0}}

    /* 14.4 A regua da linha do tempo se desenha conforme a pessoa desce */
    .tempo > li::after{transform-origin:50% 0;
      animation:desenha-regua linear both;
      animation-timeline:view();animation-range:entry 30% cover 55%}
    @keyframes desenha-regua{from{scale:1 0}to{scale:1 1}}

    /* 14.5 O marco da linha do tempo acende ao entrar */
    .tempo > li::before{animation:acende-marco linear both;
      animation-timeline:view();animation-range:entry 20% entry 90%}
    @keyframes acende-marco{
      from{scale:.4;box-shadow:0 0 0 0 color-mix(in srgb,var(--bronze) 0%,transparent)}
      to{scale:1;box-shadow:0 0 0 5px color-mix(in srgb,var(--bronze) 20%,transparent)}}

    /* 14.6 Clarao de bronze dos campos escuros acompanha a rolagem */
    #hero::before,#primeira-hora::before,#faq::before,#francisco::before{
      animation:clarao linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%}
    @keyframes clarao{
      0%{opacity:.35;translate:0 -3%}
      50%{opacity:1;translate:0 0}
      100%{opacity:.35;translate:0 3%}}

    /* 14.7 A tira escura da secao clara sobe um pouco mais devagar */
    .tira-escura{animation:parallax-tira linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parallax-tira{from{translate:0 18px}to{translate:0 -18px}}

    /* 14.8 O mapa gira um grau, quase nada — so tira a rigidez */
    .mapa{animation:mapa-inclina linear both;
      animation-timeline:view();animation-range:entry 0% cover 60%}
    @keyframes mapa-inclina{from{rotate:-.8deg;translate:0 16px}to{rotate:0deg;translate:0 0}}
  }
}

/* 14.9 Sem suporte a animation-timeline: a barra e movida pelo JS */
.progresso[data-js="sim"]{transition:transform var(--rapido) linear}

@media(prefers-reduced-motion:reduce){
  .progresso{display:none}
  .foto,.foto-vazia,.gesto,.tira-escura,.mapa{animation:none;translate:none;rotate:none}
}
@media(forced-colors:active){.progresso{display:none}}

/* 13.6 Acordeao sobre fundo claro (FAQ das paginas de area) */
.faq-claro .faq-item{background:var(--sup-clara);border-color:var(--filete-claro);
  box-shadow:var(--sombra-1)}
.faq-claro .faq-item[data-aberto="sim"]{background:var(--sup-clara);
  border-color:color-mix(in srgb,var(--bronze) 45%,transparent);
  box-shadow:var(--sombra-2)}
.faq-claro .faq-gatilho{color:var(--tinta)}
.faq-claro .faq-gatilho .seta{stroke:var(--bronze-texto)}
.faq-claro .faq-resposta p{color:var(--corpo)}
@media(hover:hover) and (pointer:fine){
  .faq-claro .faq-gatilho:hover .seta{stroke:var(--tinta)}}

/* 13.7 O gesto das paginas de area leva o dispositivo logo abaixo */
.area-defesa .gesto-bloco .dispositivo{margin-top:var(--e-5)}
.area-defesa .bloco > div + .numeradas{margin-top:var(--e-7)}
.area-piora .bloco > div p.peq{margin-top:var(--e-4)}

/* =========================================================================
   15. PAGINA DO GUIA E PAGINA DE TEXTO LONGO
   ========================================================================= */

/* 15.1 Guia */
.guia-hero{padding-block:var(--secao-media) var(--secao-ampla)}
.guia-capa{position:relative;border-radius:var(--r-3);overflow:hidden;
  box-shadow:var(--sombra-e2);border:1px solid var(--filete-escuro);
  aspect-ratio:3/4;margin-top:var(--e-8)}
.guia-capa img{display:block;width:100%;height:100%;object-fit:cover}
.guia-capa::after{content:"";position:absolute;inset:14px;
  border-radius:calc(var(--r-3) - 8px);border:1px solid var(--filete-escuro);
  pointer-events:none}
.guia-marcadores{display:grid;gap:var(--e-3);margin-top:var(--e-7)}
.guia-marcadores li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-4);
  padding:var(--e-4) var(--e-5);border-radius:var(--r-2);
  background:color-mix(in srgb,var(--navy-soft) 48%,transparent);
  border:1px solid var(--filete-escuro);font-size:var(--t-peq);line-height:1.55}
.guia-marcadores .marca{width:8px;height:8px;border-radius:var(--r-cheio);
  background:var(--bronze);margin-top:.55em}
.guia-baixar{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 var(--e-6);border-radius:var(--r-cheio);
  background:linear-gradient(160deg,color-mix(in srgb,var(--champagne) 55%,var(--bronze)),var(--bronze));
  color:var(--navy-deep);font-weight:600;font-size:1.0625rem;text-decoration:none;
  box-shadow:var(--sombra-bronze);width:100%;
  transition:transform var(--rapido) var(--ease),box-shadow var(--medio) var(--ease)}
.guia-baixar svg{width:20px;height:20px;fill:none;stroke:var(--navy-deep);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guia-baixar:active{transform:translateY(1px)}
@media(min-width:600px){.guia-baixar{width:auto}}
@media(hover:hover) and (pointer:fine){
  .guia-baixar:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(194,159,104,.38)}}
.guia-peso{margin-top:var(--e-3);font-size:var(--t-peq);color:var(--corpo-fraco-e)}
.guia-quem{padding-block:var(--secao-media)}
@media(min-width:900px){
  .guia-hero .guia-texto{grid-column:1 / 7;align-self:center}
  .guia-hero .guia-capa{grid-column:8 / 12;grid-row:1;margin-top:0;align-self:center}
  .guia-quem .bloco{grid-column:1 / 8}
}

/* 15.2 Texto longo (privacidade) */
.texto-longo{padding-block:var(--secao-media)}
.texto-longo .bloco{max-width:72ch}
.texto-longo h2{margin-top:var(--e-8);margin-bottom:var(--e-5);
  font-size:var(--t-h3);scroll-margin-top:calc(var(--topo-altura) + 24px)}
.texto-longo h2:first-of-type{margin-top:var(--e-7)}
.texto-longo h3{margin-top:var(--e-6);margin-bottom:var(--e-3);
  font-size:var(--t-lead);font-family:var(--texto);font-weight:600;
  letter-spacing:0;color:var(--tinta)}
.texto-longo p{margin-top:var(--e-4);max-width:none}
.texto-longo ul{margin-top:var(--e-4);display:grid;gap:var(--e-3)}
.texto-longo ul li{position:relative;padding-left:var(--e-5)}
.texto-longo ul li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:var(--r-cheio);background:var(--bronze-texto)}
.texto-longo .sumario{margin-top:var(--e-6);padding:var(--e-5);border-radius:var(--r-2);
  background:var(--sup-clara);border:1px solid var(--filete-claro);
  box-shadow:var(--sombra-1)}
.texto-longo .sumario ol{display:grid;gap:var(--e-2);counter-reset:s}
.texto-longo .sumario li{counter-increment:s}
.texto-longo .sumario li a{display:inline-flex;align-items:center;min-height:40px;
  font-size:var(--t-peq)}
.texto-longo .sumario li a::before{content:counter(s,decimal-leading-zero);
  margin-right:var(--e-3);font-family:var(--display);color:var(--bronze-texto);
  font-variant-numeric:tabular-nums}
.tabela-envolve{overflow-x:auto;margin-top:var(--e-5);border-radius:var(--r-2);
  border:1px solid var(--filete-claro);background:var(--sup-clara)}
.texto-longo table{border-collapse:collapse;width:100%;min-width:34rem;
  font-size:var(--t-peq)}
.texto-longo th,.texto-longo td{text-align:left;padding:var(--e-4);
  border-bottom:1px solid var(--filete-claro);vertical-align:top}
.texto-longo th{font-weight:600;color:var(--tinta);white-space:nowrap}
.texto-longo tr:last-child td{border-bottom:0}
.btn-recusar{display:inline-flex;align-items:center;min-height:52px;
  padding:0 var(--e-6);border-radius:var(--r-cheio);cursor:pointer;
  border:1px solid var(--bronze-texto);color:var(--bronze-texto);
  background:var(--sup-clara);font-weight:600;font-size:var(--t-peq);
  margin-top:var(--e-5);
  transition:background var(--medio) var(--ease),transform var(--rapido) var(--ease)}
.btn-recusar[disabled]{opacity:.6;cursor:default;border-style:dashed}
@media(hover:hover) and (pointer:fine){
  .btn-recusar:hover:not([disabled]){background:var(--creme-2);transform:translateY(-2px)}}

/* 15.3 Hero tipografico das paginas de area — sem foto (§4.5: slot vazio nao vira
   retrato reaproveitado; a pagina abre so com tipografia). */
.area-hero--tipo{position:relative;overflow:clip}  /* clip, nao hidden */
.area-hero--tipo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 55% at 82% 6%,color-mix(in srgb,var(--bronze) 15%,transparent),transparent 62%)}
.area-hero--tipo .container{position:relative;z-index:2}
.area-hero--tipo{padding-block:var(--secao-media) var(--secao-ampla)}
.hero-regua{height:1px;border:0;margin:var(--e-6) 0 var(--e-7);
  background:linear-gradient(90deg,var(--bronze),color-mix(in srgb,var(--bronze) 12%,transparent) 62%,transparent)}
.area-hero--tipo h1{max-inline-size:18ch}
.area-hero--tipo .lead{max-inline-size:46ch}
@media(min-width:900px){
  .area-hero--tipo .hero-texto{grid-column:1 / 10}
  .area-hero--tipo h1{font-size:clamp(2.5rem,1.4rem + 4.8vw,5rem)}
  /* A formula de .sangra-dir mede 50% do bloco que a contem. Dentro de uma
     coluna estreita ela sangra pouco e a regua morre no meio da tela. Aqui o
     excedente e cortado pelo overflow:clip da secao, entao basta exagerar. */
  .hero-regua.sangra-dir{margin-right:-50vw}
}
@media(forced-colors:active){.area-hero--tipo::before{display:none}}

/* 15.4 Espaco entre o titulo e o bloco seguinte.
   Na refatoracao da animacao os H2 foram embrulhados num <div data-reveal>, e
   com isso o seletor "h2 + ol" deixou de casar: o titulo ficou colado no
   conteudo. Esta regra restaura o par fixo H2 -> conteudo (--e-7). */
.bloco > div + ol,
.bloco > div + ul,
.bloco > div + dl,
.bloco > div + .faq,
.bloco > div + .entradas,
.bloco > div + .areas,
.bloco > div + .passos,
.bloco > div + .numeradas,
.bloco > div + .definicoes,
.bloco > div + .tabela-envolve{margin-top:var(--e-7)}

/* 15.5 Aperto do topo das paginas de area.
   Migalha -> pilula -> regua -> H1 somavam ~190px antes do titulo no celular.
   Reduzido para ~105px, sem encostar os elementos. */
.area-hero--tipo{padding-block:var(--secao-densa) var(--secao-media)}
.area-hero .migalha{margin-bottom:var(--e-5)}
.area-hero .rotulo{margin-bottom:0}
.hero-regua{margin:var(--e-4) 0 var(--e-5)}
.area-hero--tipo h1 + .lead{margin-top:var(--e-4)}
@media(min-width:900px){
  .area-hero--tipo{padding-block:var(--secao-media) var(--secao-ampla)}
  .hero-regua{margin:var(--e-5) 0 var(--e-6)}
  .area-hero .migalha{margin-bottom:var(--e-6)}
}

/* 15.6 Fotos reais entraram em 19/08/2026. O duotone ainda e aplicado por CSS
   (fase de ajuste); depois da aprovacao ele e queimado no arquivo e o filter sai. */
#hero .hero-foto.foto{aspect-ratio:4/5;max-height:52svh}
#francisco .fm-foto.foto{aspect-ratio:3/2;margin-bottom:var(--e-7)}
@media(min-width:900px){
  #hero .hero-foto.foto{aspect-ratio:3/4;max-height:min(76svh,680px)}
  #francisco .fm-foto.foto{aspect-ratio:4/5;margin-bottom:0}
}

/* =========================================================================
   16. LOGOTIPO EM VETOR
   O cliente nao tinha o arquivo vetorial. As duas linhas foram redesenhadas
   em contornos a partir da Jost (SIL OFL 1.1), geometrica no espirito do
   logotipo original, e exportadas como SVG. Nenhuma fonte nova e embarcada:
   os arquivos sao usados como MASCARA, entao a cor vem dos tokens do site e
   o texto continua existindo no HTML para leitor de tela e para busca.
   Sem suporte a mask-image, o texto aparece normalmente.
   ========================================================================= */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .assinatura .nome,
  .assinatura .qualificacao,
  .topo .assinatura-linha{
    display:block;color:transparent;overflow:hidden;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:left center;mask-position:left center;
    -webkit-mask-size:contain;mask-size:contain}

  .assinatura .nome{
    color:var(--sobre-navy);
    height:clamp(.75rem,.66rem + .34vw,.95rem);
    width:calc(15.2852 * clamp(.75rem,.66rem + .34vw,.95rem));
    max-width:100%;letter-spacing:0;margin-right:0;
    -webkit-mask-image:url("/img/logo-nome.svg");mask-image:url("/img/logo-nome.svg")}

  .assinatura .qualificacao{
    color:var(--bronze);margin-top:.55em;
    height:clamp(.42rem,.37rem + .19vw,.53rem);
    width:calc(18.8966 * clamp(.42rem,.37rem + .19vw,.53rem));
    max-width:100%;letter-spacing:0;margin-right:0;
    -webkit-mask-image:url("/img/logo-sub.svg");mask-image:url("/img/logo-sub.svg")}

  [data-fundo="claro"] .assinatura .nome{color:var(--tinta)}
  [data-fundo="claro"] .assinatura .qualificacao{color:var(--bronze-texto)}

  .topo .assinatura-linha{
    color:var(--sobre-navy);height:.9rem;width:calc(15.2852 * .9rem);
    letter-spacing:0;
    -webkit-mask-image:url("/img/logo-nome.svg");mask-image:url("/img/logo-nome.svg")}
}
@media(forced-colors:active){
  .assinatura .nome,.assinatura .qualificacao,.topo .assinatura-linha{
    -webkit-mask-image:none;mask-image:none;background:none;color:CanvasText;
    width:auto;height:auto}
}

/* 16.1 Foto em cor: desliga o duotone e o dessaturado, mantendo a moldura,
   o raio e o grao. Usada no retrato da secao 7 por decisao do cliente. */
.foto--cor img{filter:none}
.foto--cor::before,.foto--cor::after{display:none}
.foto--cor .grao{opacity:.035}

/* 16.2 O retrato da secao 7 e vertical (1066x1600). Qualquer proporcao mais
   larga que 2/3 corta a cabeca. A caixa passa a ter a proporcao do arquivo, e
   o object-position ancora no topo como rede de seguranca. */
#francisco .fm-foto.foto{aspect-ratio:2/3;margin-bottom:var(--e-7)}
#francisco .fm-foto.foto img{object-position:center top}
@media(min-width:900px){
  #francisco .fm-foto.foto{aspect-ratio:2/3;margin-bottom:0}
}

/* 16.3 Clarão de bronze REMOVIDO dos campos escuros (decisão de 19/08/2026).
   Em repouso passava por profundidade; com a animação de rolagem virava uma
   mancha alaranjada atravessando o texto. Sai também a animação que o movia. */
#hero::before,#primeira-hora::before,#faq::before,#francisco::before,
.area-hero--tipo::before{display:none;content:none;animation:none}

/* menos ar entre o topo fixo e a pílula do hero */
#hero{padding-block:var(--secao-densa) var(--secao-ampla)}
@media(min-width:900px){#hero{padding-block:var(--secao-media)}}

/* 16.4 Hero enxuto (19/08/2026): saíram a caixa de avisos, o telefone, a legenda
   do botão e a OAB. O espaço que sobrava sai junto — a pílula sobe para junto
   da assinatura e o botão fecha o bloco. */
#hero{padding-block:var(--e-5) var(--secao-media)}
#hero .rotulo{margin-bottom:var(--e-4)}
#hero .acao{margin-top:var(--e-6)}
#hero .hero-foto{margin-top:var(--e-7)}
@media(min-width:900px){
  #hero{padding-block:var(--e-6) var(--secao-media)}
  #hero .acao{margin-top:var(--e-7)}
  #hero .hero-foto{margin-top:0}
}
/* selo da OAB ao lado do retrato */
.oab-selo{margin-top:var(--e-3)}
#francisco .oab-selo + p{margin-top:var(--e-6)}

/* 16.5 Hero centralizado (decisão de 19/08/2026).
   Supera a regra "nada é centralizado" do §4.3 do prompt mestre, a pedido do
   cliente. Vale só para o hero: o resto da página segue alinhado à esquerda. */
#hero .hero-texto{text-align:center}
#hero .hero-texto .lead{margin-inline:auto}
#hero .rotulo{display:flex;justify-content:center}
#hero .acao{display:flex;justify-content:center}
#hero .btn-primario{width:auto;max-width:100%}
#hero .hero-foto{margin-inline:auto;width:min(100%,26rem)}
@media(min-width:900px){
  #hero .hero-texto{grid-column:1 / -1;text-align:center}
  #hero .hero-foto{grid-column:4 / 10;grid-row:2;margin-top:var(--e-8);
    width:min(100%,24rem);aspect-ratio:3/4;max-height:none}
  #hero h1{max-inline-size:16ch;margin-inline:auto}
}

/* 16.6 Botão de ligar: transparente, borda dourada, com o glifo do telefone.
   Fica logo abaixo do botão de WhatsApp, com peso menor — canal secundário. */
.btn-ligar{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 var(--e-6);border-radius:var(--r-cheio);
  background:transparent;border:1px solid var(--bronze);color:var(--champagne);
  font-family:var(--texto);font-weight:600;font-size:1rem;line-height:1.25;
  letter-spacing:.01em;text-decoration:none;width:100%;max-width:100%;
  transition:background-color var(--medio) var(--ease),border-color var(--medio) var(--ease),
    transform var(--rapido) var(--ease)}
.btn-ligar .glifo-fone{flex:none;width:19px;height:19px;fill:var(--champagne)}
.btn-ligar:active{transform:translateY(1px)}
[data-fundo="claro"] .btn-ligar{border-color:var(--bronze-texto);color:var(--bronze-texto)}
[data-fundo="claro"] .btn-ligar .glifo-fone{fill:var(--bronze-texto)}
@media(min-width:600px){.btn-ligar{width:auto}}
@media(hover:hover) and (pointer:fine){
  .btn-ligar:hover{transform:translateY(-2px);
    background:color-mix(in srgb,var(--bronze) 14%,transparent);
    border-color:var(--champagne)}
  [data-fundo="claro"] .btn-ligar:hover{background:color-mix(in srgb,var(--bronze) 12%,transparent)}}
/* os dois botões empilham no celular e ficam lado a lado a partir de 600px */
.acao{display:flex;flex-wrap:wrap;gap:var(--e-3)}
#hero .acao{justify-content:center}

/* 16.7 O botão de ligar é o canal secundário: menor que o do WhatsApp. */
.btn-ligar{min-height:46px;font-size:.9375rem;padding:0 var(--e-5)}
.btn-ligar .glifo-fone{width:17px;height:17px}
#hero .acao{flex-direction:column;align-items:center}
#hero .btn-primario{width:min(100%,20rem)}
#hero .btn-ligar{width:min(100%,17rem)}

/* 16.8 Centralização do hero, reforçada: a linha de apoio e o parágrafo também. */
#hero .hero-texto,#hero .hero-texto p,#hero .hero-texto .lead{text-align:center}
#hero .hero-texto p{margin-inline:auto}

/* =========================================================================
   17. MODELO B — hero com a foto atrás do texto
   ========================================================================= */
.hero-imersivo{position:relative;isolation:isolate;overflow:clip;
  min-height:min(92svh,760px);display:grid;align-items:end;
  padding-block:var(--e-8) var(--secao-media)}
.hero-imersivo .hero-fundo{position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero-imersivo .hero-veu{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--navy-deep) 62%,transparent) 0%,
    color-mix(in srgb,var(--navy-deep) 42%,transparent) 28%,
    color-mix(in srgb,var(--navy-deep) 88%,transparent) 62%,
    var(--navy-deep) 96%)}
.hero-imersivo .container{position:relative;z-index:2}
.hero-imersivo .hero-texto{text-align:center;grid-column:1 / -1}
.hero-imersivo .hero-texto p{margin-inline:auto}
.hero-imersivo .rotulo{display:flex;justify-content:center;margin-bottom:var(--e-4)}
.hero-imersivo h1{max-inline-size:15ch;margin-inline:auto}
.hero-imersivo .acao{display:flex;flex-direction:column;align-items:center;
  margin-top:var(--e-6)}
.hero-imersivo .btn-primario{width:min(100%,20rem)}
.hero-imersivo .btn-ligar{width:min(100%,17rem)}
@media(min-width:900px){
  .hero-imersivo{min-height:min(88svh,820px);padding-block:var(--e-9) var(--secao-media)}
  .hero-imersivo .hero-fundo{object-position:center 18%}
}
@media(forced-colors:active){.hero-imersivo .hero-veu{display:none}}

/* Primeira parte: composição integralmente centralizada. */
#hero .hero-texto,
#hero .hero-fim,
#hero .hero-texto h1,
#hero .hero-texto p{
  text-align:center;
  margin-inline:auto;
}
#hero .rotulo,
#hero .acao{
  justify-content:center;
}

/* 17.1 Os passos do primeiro contato em carrossel */
.passos.carrossel{display:flex}
.passos.carrossel > li{flex:0 0 min(86%,360px);scroll-snap-align:start;
  align-content:start}
@media(min-width:600px){.passos.carrossel > li{flex-basis:min(58%,400px)}}
@media(min-width:900px){
  .passos.carrossel > li{flex-basis:calc((100% - var(--e-5) * 2) / 3)}
  #primeiro-contato .bloco{grid-column:1 / -1}
}

/* 17.2 Modelo B, ajuste de 19/08/2026: a cabeça sobe para perto da assinatura e
   a pílula passa a ficar logo acima dela, com folga curta. */
.hero-imersivo{padding-block:var(--e-4) var(--secao-media);align-items:stretch}
.hero-imersivo .hero-fundo{object-position:center top}
.hero-imersivo .container{align-content:space-between;row-gap:var(--e-7)}
.hero-imersivo .hero-texto{display:contents}
.hero-imersivo .rotulo{grid-column:1 / -1;display:flex;justify-content:center;
  margin:0;align-self:start}
.hero-imersivo .hero-fim{grid-column:1 / -1;text-align:center;align-self:end}
.hero-imersivo .hero-fim p{margin-inline:auto}
.hero-imersivo .hero-fim .lead{margin-top:var(--e-5)}
/* o véu escurece menos no topo, para a pílula não sumir sobre o rosto */
.hero-imersivo .hero-veu{background:linear-gradient(180deg,
  color-mix(in srgb,var(--navy-deep) 55%,transparent) 0%,
  color-mix(in srgb,var(--navy-deep) 30%,transparent) 22%,
  color-mix(in srgb,var(--navy-deep) 86%,transparent) 60%,
  var(--navy-deep) 95%)}
@media(min-width:900px){
  .hero-imersivo{padding-block:var(--e-5) var(--secao-media)}
  .hero-imersivo .hero-fundo{object-position:center top}
}

/* 17.3 A pílula do hero cabe em UMA linha, nos dois modelos.
   Em 375px o texto com tracking .16em passava de 350px e quebrava. */
/* Sem "· Todo o Brasil" o rótulo cabe numa linha no tamanho original —
   nada de reduzir corpo nem entreletra. */
#hero .sobretitulo,.hero-imersivo .sobretitulo{white-space:nowrap}

/* 17.4 A folga entre a pílula e a cabeça encolhe: o recorte já subiu o rosto,
   e o hero ganha menos altura para o conjunto ficar mais junto. */
.hero-imersivo{min-height:min(86svh,700px)}
.hero-imersivo .container{row-gap:var(--e-5)}
@media(min-width:900px){.hero-imersivo{min-height:min(84svh,780px)}}

/* 17.5 Com "· Todo o Brasil" de volta, a pílula ainda precisa caber numa linha
   em 375px. O corpo do texto NÃO muda: cede só a entreletra e o respiro lateral. */
@media(max-width:599px){
  #hero .sobretitulo,.hero-imersivo .sobretitulo{
    letter-spacing:.11em;margin-right:-.11em;padding-inline:var(--e-3)}
}

/* 17.6 O carrossel do primeiro contato passa a usar o MESMO tratamento do
   carrossel das situações: numeral em display, sem disco dourado, empilhado
   acima do título, e a mesma escala de texto. */
.passos.carrossel > li{grid-template-columns:1fr;gap:0;
  padding:var(--e-6);align-content:start}
.passos.carrossel .numeral{display:block;width:auto;height:auto;
  background:none;box-shadow:none;border-radius:0;
  font-family:var(--display);font-size:var(--t-h3);font-weight:400;line-height:1;
  color:var(--bronze-texto);font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 60;margin-bottom:var(--e-4);
  place-items:initial}
.passos.carrossel h3{font-family:var(--display);font-size:var(--t-h3);
  line-height:var(--lh-h3);letter-spacing:-.012em;color:var(--tinta);
  font-variation-settings:"opsz" 34;margin-bottom:var(--e-3)}
.passos.carrossel p{font-size:var(--t-peq);line-height:1.55;color:var(--corpo);
  max-width:56ch;margin-top:0}
@media(min-width:900px){
  .passos.carrossel > li{padding:var(--e-7) var(--e-6)}
}

/* 17.7 O hero passa a ocupar a tela inteira: altura da janela menos o topo fixo.
   O teto em pixels que existia antes impedia isso em celular alto. */
.hero-imersivo{min-height:calc(100svh - var(--topo-altura))}
@media(min-width:900px){
  .hero-imersivo{min-height:calc(100svh - var(--topo-altura))}
}

/* 17.8 Com o hero de tela cheia, o quadro alto encosta o rosto no topo. */
.hero-imersivo .hero-fundo{object-position:center 6%}
@media(min-width:900px){.hero-imersivo .hero-fundo{object-position:center 10%}}

/* =========================================================================
   18. PÁGINA DE LINKS (link na bio)
   A pagina inteira e: assinatura, quatro botoes, rodape legal. Nada mais.
   Os botoes sao banners prontos do cliente — arte, tipografia e moldura ja
   vem dentro do JPEG —, entao aqui o CSS so faz tres coisas: dar a razao de
   cada um, arredondar o canto e responder ao toque.
   ========================================================================= */
.pagina-links{min-height:100svh;background:var(--navy-deep);padding-bottom:0}
.pagina-links main{min-height:100svh;display:grid;align-content:start;
  padding-block:var(--secao-densa) var(--secao-media)}
/* 21rem = a largura que a coluna ja tinha no celular. Sem o teto ela crescia
   ate 26rem no desktop e os banoes ficavam maiores la do que no telefone, que
   e onde a pagina de links e de fato aberta. */
.bloco-links{width:min(100% - 54px,21rem);margin-inline:auto;text-align:center;
  container-type:inline-size}

/* 18.1 Assinatura travada na largura dos banoes
   As duas linhas sao esticadas ate a largura da coluna, como um logotipo
   montado. Os coeficientes sao calibragem visual sobre o render real, nao
   conta de metrica: medir num elemento solto deu numero errado porque a
   Archivo variavel nao resolve a mesma instancia fora do contexto da pagina.
   Conferir no navegador depois de mexer aqui. */
.links-id{display:block}
.assinatura-links{display:block;width:100%}

/* A assinatura do site NAO e texto: e o logotipo vetorizado, aplicado como
   mascara (secao 16). Por isso o corpo da fonte nao muda nada aqui — quem
   manda e a altura, porque a largura sai de altura x razao do viewBox.
   logo-nome.svg tem razao 15,2852, entao altura = 100cqw / 15,2852 faz o
   logotipo ocupar exatamente a largura da coluna, igual aos banners. */
.assinatura-links .nome{height:6.5423cqw;width:100%;max-width:none}

/* A segunda linha e a excecao: o vetor existente diz ADVOGADO CRIMINAL, e o
   cliente passou a assinar CRIMINALISTA. Como o SVG e contorno (16 paths,
   sem <text>), nao da para reescrever a palavra nele. Entao AQUI a mascara e
   desligada e a linha volta a ser texto de verdade, em Archivo com a mesma
   entreletra do logotipo. Fica quase identico, mas nao e o vetor original:
   quando o designer reexportar logo-sub.svg com a palavra nova, apagar este
   bloco e deixar a mascara voltar. */
.assinatura-links .qualificacao{
  -webkit-mask-image:none;mask-image:none;background:none;
  color:var(--bronze);width:100%;max-width:none;height:auto;
  /* sem isto herda Fraunces do h1 e sai serifada, brigando com o logotipo */
  font-family:var(--texto);font-weight:400;
  font-size:5.5cqw;letter-spacing:.26em;margin-right:-.26em;
  white-space:nowrap;margin-top:.75em}

/* 18.2 Botoes em imagem
   O banner ja traz a propria moldura, entao o cartao NAO desenha borda: duas
   molduras empilhadas sao o defeito classico deste formato. Cada banner guarda
   a SUA razao (declarada no elemento): forcar os quatro numa razao unica
   cortava a moldura interna de um deles, e diferenca de altura entre cartoes
   passa despercebido — moldura cortada nao. A razao tambem reserva a altura
   antes da imagem chegar, entao nada pula no carregamento.
   O texto do banner tem de viver tambem no alt: dentro do JPEG ele nao existe
   para leitor de tela, para busca nem para tradutor de pagina. */
.lista-bt{display:grid;gap:var(--e-3);margin-top:var(--e-6)}
/* A regra base do cartao: sem ela a <img> renderiza no tamanho natural
   (960px) e estoura a coluna de 26rem — foi o que aconteceu em 20/08/2026,
   quando este bloco se perdeu do arquivo e os cinco banoes quebraram juntos.
   line-height:0 mata a folga de linha embaixo da imagem, que num cartao com
   overflow:hidden aparece como uma tira do fundo abaixo da arte. */
.bt-img{display:block;width:100%;border-radius:var(--r-3);overflow:hidden;
  line-height:0;background:var(--navy-soft);
  transition:transform .25s ease,box-shadow .25s ease}
.bt-img img{display:block;width:100%;height:100%;object-fit:cover}
.bt-img:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
@media(prefers-reduced-motion:reduce){
  .bt-img{transition:none}.bt-img:hover{transform:none}}

/* O CSED nao e banner fotografico: e um logotipo PNG com alfa, mais estreito
   que a caixa e desenhado em preto — cover cortaria as laterais dele e o
   fundo escuro do site engoliria o preto. Aqui a arte cabe inteira, sobre
   claro, com respiro. */
.bt-csed{background:var(--sup-clara);display:grid;place-items:center;
  padding:var(--e-5) var(--e-6)}
.bt-csed img{width:100%;height:100%;object-fit:contain}
/* A razao de cada banner vive AQUI, nao num style= no HTML: a CSP do site e
   style-src 'self', que barra atributo de estilo inline. Em servidor de teste
   sem CSP a pagina parecia certa e so quebrava em producao. */
/* Cada banner guarda a razao da arte INTEIRA. Ja tentei igualar os quatro
   numa razao unica recortando pelo centro: cortou a cabeca dele em todos.
   Botao mais baixo com a mesma largura so existe cortando a arte, e nao ha
   onde cortar — nestes banners ele fica na metade de cima. Entao o botao
   diminui pela LARGURA (ver .bloco-links), e a altura desce junto. */
.bt-r-processos{aspect-ratio:960/462}
.bt-r-crime{aspect-ratio:960/429}
.bt-r-guia{aspect-ratio:960/460}
.bt-r-flagrante{aspect-ratio:960/409}
.bt-r-fale{aspect-ratio:960/461}
.bt-r-csed{aspect-ratio:960/440}

/* 18.4 Pagina-ponte do PDF (/baixar-guia) */
.baixando{margin-top:var(--e-7);font-family:var(--display);
  font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);line-height:1.2;
  color:var(--sobre-navy);text-align:center;max-width:none}
.baixando-alt{margin-top:var(--e-4);color:var(--corpo-fraco-e);
  text-align:center;max-width:none}
.baixando-alt a{color:var(--champagne)}
/* 17.9 Hero em tela larga e baixa (notebook de 1366x768, janela reduzida):
   com 100svh a foto tomava tudo e o H1, a linha de apoio e os botões caíam
   abaixo da dobra — quem abre no computador via só a fotografia. */
@media(min-width:900px){
  .hero-imersivo{min-height:min(calc(100svh - var(--topo-altura)),780px)}
  .hero-imersivo .hero-fim{max-width:40rem;margin-inline:auto}
  .hero-imersivo .acao{flex-direction:row;justify-content:center;gap:var(--e-4)}
  .hero-imersivo .btn-primario,.hero-imersivo .btn-ligar{width:auto}
}
/* janela baixa: o hero deixa de ser de tela cheia e passa a caber no conteúdo */
@media(max-height:660px) and (min-width:700px){
  .hero-imersivo{min-height:auto;padding-block:var(--e-4) var(--e-8)}
  .hero-imersivo .container{row-gap:var(--e-5)}
  .hero-imersivo h1{font-size:clamp(1.75rem,1.1rem + 2.2vw,2.5rem)}
  .hero-imersivo .lead{font-size:var(--t-corpo)}
  .hero-imersivo .hero-fundo{object-position:center 12%}
}

/* =========================================================================
   19. /crimes-sexuais — bloco de autoridade e tipos penais
   ========================================================================= */
.area-autoridade{padding-block:var(--secao-media)}
.area-autoridade .aut-foto{border-radius:var(--r-3);aspect-ratio:3/4;
  margin-bottom:var(--e-7)}
.area-autoridade .aut-foto img{object-position:center 12%}
.aut-oab{display:inline-block;margin:var(--e-4) 0 var(--e-5);
  font-family:var(--texto);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--champagne);
  padding:var(--e-2) var(--e-4);border-radius:var(--r-cheio);
  border:1px solid color-mix(in srgb,var(--bronze) 55%,transparent)}
.area-autoridade .acao{margin-top:var(--e-7);flex-direction:column;align-items:flex-start}
@media(min-width:900px){
  .area-autoridade .aut-foto{grid-column:1 / 6;margin-bottom:0;align-self:center}
  .area-autoridade .aut-texto{grid-column:6 / -1;align-self:center}
  .area-autoridade .acao{flex-direction:row;align-items:center}
}

/* tipos penais, no mesmo cartão dos outros carrosséis */
.area-especificas{padding-block:var(--secao-media)}
.especificas.carrossel{display:flex}
/* gap proprio: com os 16px do .carrossel os quadrados encostavam um no
   outro e o carrossel lia como um bloco unico partido, nao como cartoes. */
.especificas{gap:var(--e-6)}
.especificas > li{flex:0 0 min(62%,260px);scroll-snap-align:start}
.area-esp{height:100%;padding:var(--e-6);border-radius:var(--r-2);
  background:var(--sup-clara);border:1px solid var(--filete-claro);
  box-shadow:var(--sombra-1)}
.area-esp .numeral{display:block;font-family:var(--display);font-size:var(--t-h3);
  font-weight:400;line-height:1;color:var(--bronze-texto);
  font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 60;
  margin-bottom:var(--e-4)}
.area-esp h3{font-family:var(--display);font-size:var(--t-h3);line-height:var(--lh-h3);
  letter-spacing:-.012em;color:var(--tinta);font-variation-settings:"opsz" 34;
  margin-bottom:var(--e-3)}
.area-esp p{font-size:var(--t-peq);line-height:1.55;color:var(--corpo)}
.area-esp .dispositivo{margin-top:var(--e-4)}
@media(min-width:600px){.especificas > li{flex-basis:min(50%,300px)}}
@media(min-width:900px){
  .especificas > li{flex-basis:min(calc((100% - var(--e-5) * 2) / 3),280px)}
  .area-esp{padding:var(--e-7) var(--e-6)}
}

/* =========================================================================
   20. LANDING PAGE DE CRIMES SEXUAIS
   ========================================================================= */
.lp-contexto,.lp-prova,.lp-caso,.lp-geo,.lp-experiencia,.lp-documentos{padding-block:var(--secao-media)}
.lp-etapas,.lp-urgencia,.lp-atendimento{padding-block:var(--secao-media)}
.lp-fim{padding-block:var(--secao-ampla)}
.lp-contexto .dispositivo{margin-top:var(--e-5)}

@media(min-width:900px){
  .lp-contexto .bloco,.lp-prova .bloco,.lp-documentos .bloco{grid-column:2 / 11}
  .lp-etapas .bloco,.lp-experiencia .bloco,.lp-geo .bloco{grid-column:2 / 12}
  .lp-urgencia .bloco{grid-column:1 / 9}
  .lp-fim .bloco{grid-column:2 / 11;text-align:center}
  .lp-fim .lead,.lp-fim .avisos{margin-inline:auto}
  .lp-fim .acao{justify-content:center}
  .lp-caso .bloco{grid-column:2 / 12}
}

/* etapas do processo */
.etapas{display:grid;gap:0;margin-top:var(--e-7);position:relative}
.etapas > li{display:grid;grid-template-columns:auto 1fr;gap:0 var(--e-5);
  padding:var(--e-5) 0 var(--e-6);position:relative}
.etapas > li:not(:last-child)::after{content:"";position:absolute;left:17px;
  top:44px;bottom:6px;width:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bronze) 55%,transparent),transparent)}
.et-num{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-cheio);
  font-family:var(--display);font-size:.875rem;line-height:1;color:var(--champagne);
  border:1px solid color-mix(in srgb,var(--bronze) 50%,transparent);
  font-variant-numeric:tabular-nums;background:var(--navy-deep)}
.etapas h3{margin-bottom:var(--e-2)}
.etapas p{color:var(--sobre-navy-corpo);max-width:54ch;font-size:var(--t-peq);line-height:1.55}

/* listas de prova e documentos */
.lista-prova{margin-top:var(--e-5);display:grid;gap:var(--e-3)}
.lista-prova li{position:relative;padding-left:var(--e-5);font-size:var(--t-peq);
  line-height:1.5;color:var(--corpo)}
.lista-prova li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  border-radius:var(--r-cheio);background:var(--bronze-texto)}
@media(min-width:600px){.lista-prova{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3) var(--e-6)}}

.aviso-forte{margin-top:var(--e-6);padding:var(--e-5);border-radius:var(--r-2);
  background:var(--sup-clara);border:1px solid var(--filete-claro);
  box-shadow:inset 3px 0 0 var(--bronze-texto)}
.aviso-forte p{font-size:var(--t-peq);line-height:1.55;color:var(--corpo)}

/* marcador de dado a confirmar, discreto */
.pendencia-tec{margin-top:var(--e-4);padding:var(--e-3) var(--e-4);border-radius:var(--r-1);
  font-size:var(--t-peq);font-style:italic;line-height:1.5;
  color:var(--corpo-fraco-e);border:1px dashed var(--filete-escuro)}
[data-fundo="claro"] .pendencia-tec{color:var(--corpo-fraco-c);border-color:var(--filete-claro)}

.cta-discreto{margin-top:var(--e-8)}
.cta-discreto .acao{justify-content:flex-start}
.lp-urgencia .acao{margin-top:var(--e-7)}
.lp-fim .avisos{margin-top:var(--e-8)}
.lp-fim .lead{margin-top:var(--e-5)}
/* Card de area sem corpo: o h3 vira o ultimo filho e sua margem inferior
   passa a ser espaco morto no fim do card. */
.area-esp h3:last-child{margin-bottom:0}

/* ---------- 22. lista de escritorios ------------------------------------- */
/* Substitui o bloco de endereco unico. Nasce preparada para varios: enquanto
   houver so um, a grade de uma coluna nao denuncia a falta dos outros. */
.escritorios{margin-top:var(--e-6);display:grid;gap:var(--e-5);list-style:none;padding:0}
@media(min-width:640px){.escritorios{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.escritorios li{padding-left:var(--e-4);border-left:2px solid var(--champagne)}
.escritorios .cidade{display:block;font-family:var(--texto);font-weight:600;
  font-size:var(--t-peq);letter-spacing:.02em;color:var(--tinta);margin-bottom:.35em}
.escritorios .peq{display:block;color:var(--corpo);line-height:1.6}
.telefone-unico{margin-top:var(--e-5)}

/* Linha de area sem texto de apoio: o titulo passa a ser o unico filho e sua
   margem inferior vira espaco morto. */
.linha-area .linha-area-texto .titulo:last-child{margin-bottom:0}

/* ---------- 23. cartao de area quadrado ---------------------------------- */
/* Numeral no topo, titulo na base: com aspect-ratio 1 o titulo curto e o longo
   ficam alinhados entre si, em vez de flutuar no meio de cada cartao. */
/* O numeral fica preso no topo e o titulo toma TODO o resto da caixa,
   centrado nele. Com justify-content:space-between o titulo colava na base e
   sobrava um buraco no meio do cartao — pior quanto maior o cartao. */
.area-esp{aspect-ratio:1;display:flex;flex-direction:column;text-align:center}
/* h3 e caixa flex para centrar na vertical; para o texto sair centrado na
   horizontal tambem, o alinhamento tem de ir no proprio h3 — text-align do
   pai nao atravessa um filho que e container flex. */
.area-esp h3{justify-content:center}
/* O texto do cartao e centrado, mas o numeral volta a ancorar na esquerda:
   text-align:start desfaz a heranca do pai so nele. */
.area-esp .numeral{flex:0 0 auto;margin-bottom:0;text-align:start}
.area-esp h3{flex:1 1 auto;display:flex;align-items:center;margin-bottom:0}

/* ---------- 21. titulo do cartao de area ---------------------------------- */
/* O cartao e quadrado e nao tem corpo de texto: o titulo e que precisa ocupar
   a caixa. text-wrap:balance distribui as linhas, senao "Assedio sexual" fica
   numa linha so e "Recursos e revisao criminal em condenacoes" em cinco. */
/* NAO usar cqw aqui. container-type:inline-size no <li> aplica
   contain:inline-size, que briga com o flex-basis do item de carrossel: o
   cartao caiu de 370px para 109px e a fonte, que e derivada dele, para 6,6px.
   Medido em 20/08/2026 num viewport de 430px. */
.area-esp h3{font-size:min(1.5rem,8vw);
  line-height:1.04;letter-spacing:-.03em;text-wrap:balance;hyphens:none}
/* O cartao tem largura quase igual no celular e no desktop (335 e 360px), por
   isso a fonte e fixa em rem: vw fazia o titulo encolher no celular sem que a
   caixa encolhesse junto. O min() com vw so protege telas abaixo de 360px.
   O respiro tambem deixa de ser fixo, senao em tela estreita ele come a
   largura util e o titulo quebra no meio da palavra. */
.area-esp{padding:clamp(1.1rem,5.5%,1.75rem)}

/* No desktop o cartao e maior (374px contra 335 no celular) e a mesma fonte
   deixa de quebrar: "Assedio sexual" voltava para uma linha so e o titulo
   ocupava 40% da caixa. Aqui a fonte sobe para 3,25rem, que e o ponto em que
   o titulo mais largo ("Importunacao") ainda cabe nos 333px uteis. */
@media(min-width:900px){.area-esp h3{font-size:1.75rem}}

/* As setas saem do cabecalho e vao para baixo do trilho, centradas. Como o
   cabecalho era flex com space-between, sem elas o titulo ficaria sozinho —
   por isso o cabecalho perde o espalhamento quando nao ha mais controles. */
.carrossel-cabeca:not(:has(.carrossel-controles)){justify-content:flex-start}
.carrossel + .carrossel-controles{justify-content:center;margin-top:var(--e-4)}
.carrossel + .carrossel-controles + .carrossel-dica{text-align:center}

/* ---------- 24. assinatura: a palavra muda, e para isso a máscara sai ------- */
/* O logo-sub.svg desenha ADVOGADO CRIMINAL em contorno (16 paths, zero <text>):
   trocar a palavra no HTML não muda um pixel enquanto a máscara estiver ligada.
   Mesma saída já usada em .assinatura-links: desliga a máscara nesta linha e ela
   volta a ser texto de verdade. Quando o designer reexportar o vetor com a
   palavra nova, apagar este bloco e a máscara volta sozinha.
   font-family explícito: dentro de um <p> ao lado do logotipo, sem isto herda a
   serifada de display e briga com o desenho geométrico do nome. */
.assinatura .qualificacao{
  -webkit-mask-image:none;mask-image:none;background:none;
  width:auto;max-width:none;height:auto;
  color:var(--bronze);
  font-family:var(--texto);font-weight:400;
  font-size:clamp(.625rem,.58rem + .16vw,.75rem);
  letter-spacing:.26em;margin-right:-.26em;
  text-transform:uppercase;line-height:1.2;white-space:nowrap}
[data-fundo="claro"] .assinatura .qualificacao{color:var(--bronze-texto)}

/* ---------- 25. hero: a headline vira o peso da primeira tela -------------- */
/* Pedido de 02/09: headline ~30% maior, mais encorpada, entrelinha fechada,
   com respiro antes e depois, apoio discreto e botões afastados.
   NOTA sobre a largura: 12ch quebraria "Defesa criminal especializada em crimes
   sexuais." em quatro linhas. Para as DUAS linhas pedidas, a caixa precisa
   comportar a maior metade — "Defesa criminal especializada" tem 29 caracteres.
   Daí 30ch com text-wrap:balance, que reparte as duas linhas sozinho. */
.hero-imersivo h1{
  font-size:clamp(2.25rem,1.35rem + 3vw,3.25rem);
  max-inline-size:30ch;
  line-height:.95;
  letter-spacing:-.034em;
  font-variation-settings:"opsz" 144,"wght" 500;
  text-wrap:balance;
  margin-block:var(--e-6) var(--e-5)}

/* o apoio recua: menor, mais claro e com entreletra, para não competir */
.hero-imersivo .hero-fim .lead{
  margin-top:var(--e-4);
  font-size:var(--t-peq);
  font-style:normal;
  color:var(--corpo-fraco-e);
  letter-spacing:.04em;
  max-inline-size:34ch}

/* os botões descem: a headline precisa de ar embaixo antes da ação */
.hero-imersivo .acao{margin-top:var(--e-7)}

/* mais contraste sob o texto: uma segunda camada, por cima do véu, que escurece
   só a metade de baixo — é onde a headline vive. O véu original continua
   cuidando do topo, senão a pílula some sobre o rosto. */
.hero-imersivo .hero-fim{position:relative;isolation:isolate}
.hero-imersivo .hero-fim::before{
  content:"";position:absolute;z-index:-1;
  inset:calc(var(--e-8) * -1) -50vw calc(var(--e-9) * -1);
  background:radial-gradient(120% 100% at 50% 100%,
    color-mix(in srgb,var(--navy-deep) 82%,transparent) 0%,
    color-mix(in srgb,var(--navy-deep) 55%,transparent) 45%,
    transparent 78%);
  pointer-events:none}

@media(min-width:900px){
  .hero-imersivo h1{font-size:clamp(2.75rem,1.6rem + 3.6vw,3.75rem);
    margin-block:var(--e-7) var(--e-6)}
  .hero-imersivo .acao{margin-top:var(--e-8)}
}
@media(forced-colors:active){.hero-imersivo .hero-fim::before{display:none}}

/* =========================================================================
   26. HERO DA HOME — 02/09/2026, montado contra o print aprovado pelo dono
   O que estava diferente do print, medido no ar em 02/09 (1440x900 e 375x812):
     (a) assinatura no canto esquerdo, dentro de barra escura, com o botao de
         WhatsApp a direita — o print traz a assinatura CENTRALIZADA, sobre a
         foto, sem barra e sem botao;
     (b) rotulo em pilula com bolinha — o print traz texto puro com um filete
         de cada lado;
     (c) headline em TRES linhas: `.hero-fim{max-width:40rem}` apertava a caixa
         e o text-wrap:balance da secao 25 nao tinha onde repartir em duas.
         A metade maior, "Defesa criminal especializada", pede ~835px em
         60px de corpo; 40rem = 640px;
     (d) apoio em --corpo-fraco-e (#948F86) sobre fundo escuro: ilegivel;
     (e) botoes empilhados no desktop — `#hero .acao{flex-direction:column}`
         da secao 16.7 nao tem media query e, com especificidade de ID,
         vencia a regra de 900px que os punha lado a lado;
     (f) no CELULAR os dois botoes ficavam ABAIXO da dobra: o hero mede
         100svh e o conteudo passava disso, entao o hero terminava em faixa
         escura vazia e so restava o botao flutuante.
   ========================================================================= */

/* 26.1 O topo sai do fluxo e fica sobre a foto enquanto a pagina nao rolou.
   Ao rolar, `data-rolado="sim"` devolve o comportamento antigo — fundo solido,
   assinatura a esquerda e botao a direita. */
body:has(#hero.hero-imersivo) .topo{position:fixed;inset-inline:0;top:0}
body:has(#hero.hero-imersivo) .hero-imersivo{min-height:100svh}
@media(min-width:900px){
  body:has(#hero.hero-imersivo) .hero-imersivo{min-height:min(100svh,860px)}
}
body:has(#hero.hero-imersivo) .topo[data-rolado="nao"]{
  background:transparent;border-bottom-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body:has(#hero.hero-imersivo) .topo[data-rolado="nao"] .container{
  justify-content:center}
body:has(#hero.hero-imersivo) .topo[data-rolado="nao"] .assinatura{
  text-align:center}
body:has(#hero.hero-imersivo) .topo[data-rolado="nao"] .btn-primario{
  display:none}

/* 26.2 Rotulo: sem pilula, sem bolinha. Os filetes so entram a partir de
   900px — em 375px o texto ja ocupa a linha inteira e o filete nao caberia. */
#hero .sobretitulo{background:transparent;border:0;border-radius:0;padding:0}
#hero .sobretitulo::before{display:none}
@media(min-width:900px){
  #hero .rotulo{display:flex;align-items:center;justify-content:center;
    gap:var(--e-5)}
  #hero .rotulo::before,#hero .rotulo::after{content:"";height:1px;
    width:clamp(2.5rem,7vw,6rem);flex:none;
    background:color-mix(in srgb,var(--champagne) 40%,transparent)}
}

/* 26.3 A caixa do texto alarga: e o que faz a headline cair em DUAS linhas. */
@media(min-width:900px){
  .hero-imersivo .hero-fim{max-width:56rem}
}

/* 26.4 O apoio volta a ser legivel sobre a foto. */
.hero-imersivo .hero-fim .lead{color:var(--sobre-navy-corpo)}

/* 26.5 Acao: no desktop os dois lado a lado. Precisa de #hero para vencer a
   regra da secao 16.7, que tem a mesma forca. */
@media(min-width:900px){
  #hero .acao{flex-direction:row;align-items:center;justify-content:center;
    gap:var(--e-6)}
  #hero .btn-primario,#hero .btn-ligar{width:auto}
}

/* 26.6 O botao de ligar deixa de ser caixa e vira link sublinhado, como no
   print. Escopo em #hero: nas outras secoes ele continua com moldura. */
#hero .btn-ligar{background:transparent;border:0;border-radius:0;
  padding:0 2px;min-height:auto;color:var(--champagne);
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--t-micro);
  text-decoration:underline;text-underline-offset:8px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--champagne) 55%,transparent)}
#hero .btn-ligar .glifo-fone{display:none}
@media(hover:hover) and (pointer:fine){
  #hero .btn-ligar:hover{background:transparent;transform:none;
    text-decoration-color:var(--champagne)}
}

/* 26.7 O botao do WhatsApp em caixa alta, como no print. */
#hero .btn-primario{text-transform:uppercase;letter-spacing:.1em;
  font-size:var(--t-micro)}

/* 26.8 CELULAR: o conjunto tem de caber numa tela. Antes o hero media 100svh
   e o conteudo passava disso — os dois botoes nasciam abaixo da dobra. */
@media(max-width:899px){
  #hero .btn-primario{width:min(100%,22rem)}
  #hero .btn-ligar{width:auto}
  #hero .acao{gap:var(--e-5);margin-top:var(--e-6)}
  .hero-imersivo h1{margin-block:var(--e-5) var(--e-4)}
  .hero-imersivo .container{row-gap:var(--e-4)}
  body:has(#hero.hero-imersivo) .topo[data-rolado="nao"]{padding-top:var(--e-2)}
}

/* 26.9 Correcoes medidas contra o print, depois da primeira montagem:
   (a) com o topo fora do fluxo, o rotulo subia ate encostar na assinatura —
       o hero passa a reservar a altura do topo;
   (b) o print agrupa rotulo + headline + apoio + botoes TODOS na base; o
       container estava com align-content:space-between e jogava o rotulo
       para o topo da tela;
   (c) a headline continuava em TRES linhas: `max-inline-size:30ch` da secao
       25 vale 577px nesta serifa de display (o "0" dela e estreito, entao ch
       nao mede o que o comentario supos). "Defesa criminal especializada"
       pede ~640px em 60px de corpo. Passa a largura em rem, medida. */
.hero-imersivo{padding-top:calc(var(--topo-altura) + var(--e-4))}
.hero-imersivo .container{align-content:end;row-gap:var(--e-4)}
.hero-imersivo .rotulo{align-self:end}
@media(min-width:900px){
  .hero-imersivo{padding-top:calc(var(--topo-altura) + var(--e-5))}
  .hero-imersivo .container{row-gap:var(--e-5)}
  .hero-imersivo h1{max-inline-size:44rem}
}

/* 26.10 As duas regras que ainda perdiam por especificidade.
   `#hero h1{max-inline-size:16ch}` (secao 16.x, com ID) vencia a secao 25 e a
   26.9. E `ch` engana aqui: nesta serifa de display o "0" mede ~0,6em, entao
   16ch em 60px da 577px — exatamente a caixa que quebrava a headline em tres
   linhas. Medido no ar: "Defesa criminal especializada" precisa de ~640px.
   Daqui em diante a largura da headline e escrita em rem, nao em ch. */
@media(min-width:900px){
  #hero h1{max-inline-size:44rem}
  #hero.hero-imersivo{padding-top:calc(var(--topo-altura) + var(--e-5))}
}
#hero.hero-imersivo{padding-top:calc(var(--topo-altura) + var(--e-4))}

/* ---------- 27. home: todo texto centralizado (pedido do dono, 06/10/2026) --
   Excecao explicita ao congelamento de layout de 20/08, como a do hero em
   02/09. Escopo: SO a home, pela classe body.pagina-home de index.html;
   crimes-sexuais.html divide as classes e nao muda. Nada acima foi reescrito. */
body.pagina-home main section,
body.pagina-home .rodape{text-align:center}
body.pagina-home main section :is(h1,h2,h3,h4,p,li,dt,dd,summary,blockquote,figcaption,a,span,div),
body.pagina-home .rodape :is(p,li,a,span,div){text-align:center}
/* blocos com largura maxima (p em 64ch, lead etc.) ficam no meio da coluna */
body.pagina-home main section :is(h2,h3,p,dl,dd,.lead),
body.pagina-home .rodape p{margin-inline:auto}
/* listas: sem recuo de marcador puxando o texto para a esquerda */
body.pagina-home main section :is(ul,ol),
body.pagina-home .rodape :is(ul,ol){padding-inline-start:0;list-style-position:inside}
/* linhas de botoes e grupos em flex ficam no meio */
body.pagina-home main section :is(.acao,.botoes,.cta,.carrossel-nav),
body.pagina-home .rodape :is(ul,nav,div){justify-content:center;justify-items:center}

/* ---------- 28. secao Francisco: botoes leves para os dois Instagram ------- */
.fm-redes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--e-4)}
.btn-rede{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  border:1px solid rgba(212,196,161,.55);border-radius:999px;color:var(--champagne);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  background:transparent;transition:background .2s,color .2s,border-color .2s}
.btn-rede:hover,.btn-rede:focus-visible{background:var(--champagne);color:#0D1F38;border-color:var(--champagne)}
.btn-rede svg{flex:none}
@media(max-width:480px){
  .fm-redes{gap:8px}
  .btn-rede{padding:0 12px;gap:6px;font-size:.7rem;letter-spacing:.06em;min-height:38px}
}

/* ---------- 29. secao preta do podcast CSED, acima das perguntas ----------- */
.bg-preto{background:#000;color:#fff}
.podcast-cabeca{display:grid;justify-items:center;gap:var(--e-3);margin-bottom:var(--e-5)}
.podcast-logo{inline-size:min(78vw,340px);block-size:auto}
.podcast-cabeca p{color:rgba(255,255,255,.72);font-size:var(--t-peq)}
.podcast-trilho .carrossel-item{flex-basis:min(78%,300px)}
@media(min-width:900px){.podcast-trilho .carrossel-item{flex-basis:calc((100% - var(--e-5) * 3) / 4)}}
.ep{display:flex;flex-direction:column;gap:8px;inline-size:100%;color:#fff;text-decoration:none}
.ep-capa{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid rgba(212,196,161,.25)}
.ep-capa img{inline-size:100%;block-size:100%;object-fit:cover;display:block;transition:transform .35s}
.ep-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);transition:background .2s}
.ep-play svg{inline-size:44px;block-size:44px;padding:10px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--champagne);fill:var(--champagne)}
.ep:hover .ep-capa img,.ep:focus-visible .ep-capa img{transform:scale(1.04)}
.ep:hover .ep-play{background:rgba(0,0,0,.05)}
.ep-num{color:var(--champagne);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.ep-titulo{font-size:var(--t-peq);line-height:1.4;color:rgba(255,255,255,.88)}
.podcast-canal{display:flex;justify-content:center;margin-top:var(--e-4)}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 27.1 cabecalho de carrossel e flex com space-between: o bloco do titulo
   encolhia e ficava no canto esquerdo, mesmo com o texto centralizado dentro */
body.pagina-home .carrossel-cabeca{justify-content:center}

/* ---------- 30. headline do topo da home em Libre Caslon (06/10/2026) -------
   Pedido do dono: fonte mais formal, que passe credibilidade. Escolhida entre
   Libre Caslon, EB Garamond, Cormorant e Playfair numa comparacao lado a lado.
   SO o h1 do hero da home; os outros titulos seguem em Fraunces. A Caslon e
   mais larga que a Fraunces apertada (-1,2px): corpo cai ~8% e o tracking zera. */
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:400;
  font-display:swap;src:url("/fonts/libre-caslon-text.woff2") format("woff2")}
body.pagina-home #hero h1{font-family:"Libre Caslon Text","Display Fallback",Georgia,serif;
  font-weight:400;font-variation-settings:normal;letter-spacing:0;line-height:1.18;
  font-size:calc(var(--t-h1, 2.25rem) * .92)}
/* A Caslon e mais larga: em 44rem a headline caia em tres linhas no desktop,
   e o print aprovado em 02/09 pede duas. Largura em rem, medida no ar. */
@media(min-width:900px){body.pagina-home #hero h1{max-inline-size:56rem;font-size:min(calc(var(--t-h1) * .92),3.75rem)}}
.ep-capa iframe{position:absolute;inset:0;inline-size:100%;block-size:100%;border:0}

/* ---------- 31. home: TODOS os titulos em Libre Caslon (06/10/2026) ---------
   Segundo pedido do dono no mesmo dia: o que a secao 30 fez so no h1 do topo
   passa a valer para todo titulo da home. Troca-se a variavel --display no
   escopo da home, entao tudo que ja usa var(--display) (h1-h3, numerais,
   .gesto) muda junto. A Caslon so tem o peso 400 hospedado: titulo em 600
   sairia em negrito falso, por isso o peso cai para 400. Os ajustes da Fraunces
   (eixo opsz e tracking negativo) nao fazem sentido nela e zeram. */
body.pagina-home{--display:"Libre Caslon Text","Display Fallback",Georgia,serif}
body.pagina-home :is(h1,h2,h3,h4,.gesto,.numeral,.numeral-secao,.linha-area .titulo){
  font-weight:400;font-variation-settings:normal;letter-spacing:0}

/* ---------- 32. todas as paginas: titulos em Libre Caslon (06/10/2026) ------
   O dono estendeu a secao 31 (so a home) ao site inteiro. Mesma tecnica:
   troca a variavel --display na raiz. Peso 400 e tracking zero pelos mesmos
   motivos da secao 31. A assinatura do topo e mascara SVG, nao muda. */
:root{--display:"Libre Caslon Text","Display Fallback",Georgia,serif}
:is(h1,h2,h3,h4,.gesto,.numeral,.numeral-secao,.linha-area .titulo){
  font-weight:400;font-variation-settings:normal;letter-spacing:0}

/* ---------- 33. /links: menos respiro no topo (pedido do dono, 06/10/2026) --
   Antes: 48px acima da assinatura e 32px ate o primeiro botao. Com o 6o botao
   (guia), o 5o ficava cortado na primeira tela do iPhone. Agora 20px e 18px. */
main#conteudo:has(.lista-bt){padding-top:20px}
main#conteudo:has(.lista-bt) .lista-bt{margin-top:18px}