/* ============================================================
   Fregonezi & Parreira — folha de estilo do site

   Compartilhada pelas cinco páginas. Antes ficava embutida no
   index.html; saiu daqui quando a segunda página nasceu, para que
   um ajuste no sistema não precise ser replicado cinco vezes.
   As decisões estão em docs/decisoes-de-design.md — ler antes.
   ============================================================ */

/* ============================================================
   PALETAS
   ============================================================ */
:root{
  --ground:#EAEBE6; --surface:#F7F8F5; --paper:#FCFBF8; --mid:#C9D0C8; --ink:#14191A; --muted:#636B6A;
  --line:rgba(20,25,26,.16); --line-soft:rgba(20,25,26,.09);
  --deep:#10303A; --deep-2:#081D24;
  --on-deep:#E8EEEB; --on-deep-muted:#B3C1BD; --line-deep:rgba(232,238,235,.18);
  --signal:#7C2F3C; --on-signal:#F7EFEB; --neg:#C4707E;
  /* verde do WhatsApp, para o único botão que leva para lá. Texto em tinta,
     não branco: o branco sobre este verde dá 2,0:1 e reprova o AA do site. */
  --wa:#25D366; --wa-hover:#1EBE5D; --on-wa:#14191A;
  --swipe-neg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M1.5,9 C48,3.5 96,11 150,6.5 C204,2 252,10.5 298.5,5.5 L297.5,52 C250,57.5 200,49.5 148,54 C96,58.5 48,50.5 2.5,55.5 Z' fill='%23C4707E'/%3E%3C/svg%3E");
  --swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M1.5,9 C48,3.5 96,11 150,6.5 C204,2 252,10.5 298.5,5.5 L297.5,52 C250,57.5 200,49.5 148,54 C96,58.5 48,50.5 2.5,55.5 Z' fill='%237C2F3C'/%3E%3C/svg%3E");
}
.band-signal{--label:rgba(255,255,255,.6);--rule:rgba(255,255,255,.28)}
.band-signal .btn--primary{background:var(--on-signal);color:var(--signal)}
.sit__card--signal .sit__go{opacity:.85}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
:root{
  --display:"Newsreader",Georgia,serif;
  --body:"Archivo",system-ui,sans-serif;
  --ui:"Archivo",system-ui,sans-serif;
  --display-wdth:100; --display-weight:600; --display-track:-.016em; --dscale:1.05;
  --body-size:1.09rem; --body-lh:1.62;
  /* ── escala de texto ──
     Havia nove corpos diferentes entre 16,2 e 17,8px espalhados pelos
     componentes: invisíveis um a um, e a razão de nada alinhar. Agora
     são três papéis, e só três:
       --body-size  18px   toda frase que alguém lê
       --t-meta     14,5px data, legenda, metadado
       .lead        20px   entrada de seção
     ⚠️ Corpo de 18px é regra de acessibilidade registrada neste doc, e
     boa parte dos componentes estava ABAIXO dela. */
  --t-meta:.88rem;
}
.display{line-height:1.13}
h2.display{line-height:1.16}
.statement{line-height:1.26}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16.5px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{
  margin:0;background:var(--ground);color:var(--ink);overflow-x:clip;
  font-family:var(--body);font-size:var(--body-size);line-height:var(--body-lh);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--signal);color:var(--on-signal)}

.wrap{width:min(100% - 2.6rem,74rem);margin-inline:auto}
.wrap--narrow{width:min(100% - 2.6rem,52rem);margin-inline:auto}

/* --- faixas: cada seção declara o próprio fundo e o fundo dos cartões --- */
body{--band:var(--ground);--card:var(--paper);--rule:var(--line)}
section{padding-block:clamp(4rem,9vw,7.5rem);background:var(--band);position:relative}

.band-paper{--band:var(--paper);--card:var(--ground)}
.band-mid{--band:var(--mid);--card:var(--paper);--rule:rgba(20,25,26,.22)}
.band-deep{
  --band:var(--deep);--card:rgba(255,255,255,.045);--rule:var(--line-deep);
  color:var(--on-deep);
}
.band-signal{--band:var(--signal);--card:rgba(0,0,0,.05);--rule:rgba(0,0,0,.22);color:var(--on-signal)}

.band-deep .muted,.band-deep p{color:var(--on-deep-muted)}
.band-signal p{color:var(--on-signal)}

/* grão: dá textura de tinta impressa às faixas escuras */
.band-deep::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.band-deep>*{position:relative;z-index:1}

/* --- títulos --- */
.display{
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  letter-spacing:var(--display-track);line-height:1.03;
  text-wrap:balance;margin:0;
}
h1.display,h2.display{max-width:20ch}
h1.display{font-size:calc(clamp(2.2rem,5vw,3.8rem) * var(--dscale,1))}
h2.display{font-size:calc(clamp(1.7rem,3vw,2.45rem) * var(--dscale,1));line-height:1.1}
/* ⚠️ O piso era 1,15rem. Em Newsreader, que tem altura-x menor, isso
   dá 19px de nominal mas ~15,7px de aparente — MENOR que os 18px do
   corpo. No celular todo H3 do site lia como se fosse legenda. O piso
   subiu; o teto não mudou, então acima de ~1310px nada muda. */
h3.display{font-size:clamp(1.28rem,1.7vw,1.35rem);line-height:1.22;letter-spacing:-.012em}

.eyebrow{
  font-family:var(--ui);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label,var(--muted));
  margin:0 0 1.4rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:5rem}
.band-deep{--label:var(--on-deep-muted)}
.band-signal{--label:rgba(0,0,0,.55)}

p{margin:0 0 1.1em;max-width:60ch}
.lead{font-size:1.12em;color:var(--ink)}
.muted{color:var(--muted)}

/* --- marca-texto: a assinatura --- */
.mk{
  display:inline;
  padding:.05em .22em .1em;margin:0 -.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--swipe) left center/0% 100% no-repeat;
  animation:swipe .8s cubic-bezier(.22,.7,.3,1) .45s forwards;
}
@keyframes swipe{to{background-size:100% 100%;color:var(--on-signal)}}
/* sobre o petróleo o bordô puro some: o grifo claro usa --neg e
   inverte o texto para o próprio petróleo */
@keyframes swipe-neg{to{background-size:100% 100%;color:var(--deep-2)}}

/* ════════════════════════════════════════════════════════════
   DESTAQUE DO H1 — o grifo é só uma das formas de enfatizar
   ════════════════════════════════════════════════════════════ */
/* régua: linha fina e precisa sob a frase */

@keyframes regua{to{background-size:100% .09em}}

/* itálico: a ênfase clássica do texto jurídico */


/* cor: a frase muda de cor, sem bloco nem linha */

/* peso: a frase ganha corpo, nada mais */


/* nenhum: a frase se sustenta sozinha */


/* --- botões --- */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--ui);font-weight:600;font-size:.98rem;letter-spacing:-.005em;
  padding:1.05rem 1.6rem;min-height:3.4rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn .arw{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(.28rem)}
.btn--primary{background:var(--ink);color:var(--ground)}
.btn--primary:hover{background:var(--deep)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
.band-deep .btn--primary{background:var(--signal);color:var(--on-signal)}
.band-deep .btn--primary:hover{background:var(--on-deep)}
.band-deep .btn--ghost{color:var(--on-deep);border-color:var(--line-deep)}
.band-deep .btn--ghost:hover{border-color:var(--on-deep)}
.btn--wa{background:var(--wa);color:var(--on-wa);font-size:1.06rem;padding:1.25rem 1.9rem;min-height:3.9rem;width:100%;justify-content:center}
.btn--wa:hover{background:var(--wa-hover)}

a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:2rem;min-height:4.6rem}
.nav__logo{color:var(--ink);display:block;flex:0 0 auto}
.nav__logo .logo-svg{width:clamp(9.5rem,17vw,13rem);height:auto}
.nav__links{display:none;gap:1.9rem;margin-left:auto;font-family:var(--ui);font-size:.9rem;font-weight:500}
.nav__links a{text-decoration:none;color:var(--muted);padding-block:.4rem;border-bottom:1px solid transparent}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.nav__cta{margin-left:auto;padding:.72rem 1.05rem;min-height:2.9rem;font-size:.88rem}
@media(min-width:62rem){
  .nav__links{display:flex}
  .nav__cta{margin-left:0}
}
@media(max-width:36rem){ .nav__cta{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  --band:var(--paper);--card:var(--ground);
  position:relative;overflow:hidden;
  padding-block:clamp(3.4rem,6.5vw,5.6rem) clamp(3rem,5.5vw,4.6rem);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}
.hero__in{position:relative;z-index:2;text-align:center}
.hero__kicker{
  font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin:0 auto 1.9rem;max-width:none;
  /* no celular ele quebra em duas linhas e sobrava "· ABC" sozinho */
  text-wrap:balance;
}
.hero h1{font-size:calc(clamp(2.1rem,4.5vw,3.65rem) * var(--dscale,1));margin-inline:auto}
.hero__deck{
  font-size:1.22rem;line-height:1.55;color:var(--muted);
  max-width:50ch;margin:2.2rem auto 0;
}
.hero__cta{margin-top:2.4rem;display:flex;justify-content:center}

/* documentos entrando cortados pelas bordas */
/* ── as folhas da primeira dobra ──
   Elas ficavam a -5rem e -6rem das bordas: em boa parte das telas o
   rótulo do documento saía do quadro e sobrava só um retângulo com
   barras. Agora entram quase inteiras, e a LARGURA é que cede em tela
   menor, não a posição — assim o rótulo nunca é cortado.

   A da esquerda entra mais que a da direita de propósito: o rótulo de
   toda folha fica no alto à ESQUERDA dela, então quem sangra pela
   direita não perde nada, e quem sangra pela esquerda perde o nome.

   O limite de aparecer caiu de 76rem para 64rem — antes sumiam em
   qualquer notebook menor. */
.hero__side{position:absolute;width:clamp(12.5rem,21vw,19rem);z-index:0;display:none}
@media(min-width:64rem){.hero__side{display:block}}
.hero__side--l{left:-.5rem;top:30%;transform:rotate(-9deg)}
.hero__side--r{right:-2rem;top:26%;transform:rotate(8deg)}

/* No celular elas deixam de ser sangria e viram uma composição: as
   duas lado a lado, sobrepostas, entre o deck e os bullets. É a mesma
   ideia de "documentos sobre a mesa", só que na coluna estreita.
   Antes sumiam abaixo de 64rem e a primeira dobra ficava só de texto. */
@media(max-width:64rem){
  .hero{display:flex;flex-direction:column}
  .hero__in{order:1}
  .hero__mesa{order:2;display:flex;justify-content:center;align-items:flex-start;
              margin-top:clamp(2.2rem,7vw,3rem)}
  .hero__bullets{order:3}
  .hero__cta{order:4}
  .hero__side{position:static;display:block;width:min(10.5rem,43vw)}
  .hero__side--l{transform:rotate(-7deg);margin-right:-1.1rem;z-index:1}
  .hero__side--r{transform:rotate(6deg);margin-top:1.4rem}
  .hero__items{padding-top:clamp(2.2rem,7vw,3rem)}
  .hero__cta{margin-top:clamp(2.4rem,7vw,3rem)}
}


/* bullets: cada um com o objeto que a própria frase nomeia */
.hero__items{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  display:grid;gap:2.4rem;padding-top:clamp(2.4rem,4.5vw,3.6rem);
}
@media(min-width:56rem){.hero__items{grid-template-columns:repeat(3,1fr);gap:0 3rem}}
.hero__items li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.95rem}
.hero__items p{
  margin:0;font-family:var(--ui);font-weight:500;
  font-size:var(--body-size);line-height:1.42;max-width:24ch;
}
.hero__items .chk{width:1.55rem;height:1.55rem;display:block;color:var(--ink);margin:0}

/* ============================================================
   RECONHECIMENTO
   ============================================================ */
/* nível 2 — seções que conduzem o argumento */
.sec-ancora h2.display{font-size:calc(clamp(1.9rem,4vw,3.05rem) * var(--dscale,1))}
.recon__cols{display:grid;gap:2.8rem;margin-top:clamp(2.6rem,5vw,4rem)}
@media(min-width:60rem){.recon__cols{grid-template-columns:1fr 1fr;gap:5rem;align-items:start}}
.band-deep .statement{color:var(--on-deep)}
.statement{
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.24;
  margin:0;padding-top:2rem;border-top:2px solid currentColor;
  max-width:26ch;text-wrap:balance;
}


.rec__intro{max-width:52ch;margin:2.2rem 0 0}
.voices{list-style:none;margin:2.4rem 0 0;padding:0;max-width:48rem}
.voices li{
  display:flex;gap:1.5rem;align-items:baseline;
  padding:1.2rem 0;border-top:1px solid var(--line-deep);
  font-family:var(--ui);font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.32rem);
  line-height:1.42;letter-spacing:-.012em;color:var(--on-deep);
}
.voices li:last-child{border-bottom:1px solid var(--line-deep)}
.band-deep .rec__after{
  margin:3rem 0 0;padding:1.7rem 2rem;border-top:0;max-width:36rem;
  background:var(--paper);color:var(--ink);
  font-size:calc(clamp(1.22rem,2vw,1.6rem) * var(--dscale,1));line-height:1.26;
}

/* marca negativa: par do tique da primeira dobra */
.vm{width:1.35rem;height:1.35rem;flex:0 0 auto;color:var(--neg)}

/* vozes · linhas — filetes de ponta a ponta, usa a largura toda */
.rec--b__top{display:grid;gap:1.8rem}
@media(min-width:64rem){
  .rec--b__top{grid-template-columns:1.3fr .7fr;gap:4.5rem;align-items:end}
  .rec--b__top .rec__intro{margin:0;padding-bottom:.4rem}
}
.rec--b .rec__intro{max-width:40ch}
.voices{max-width:none}
.voices li{padding:1.35rem 0;align-items:center}
.rec__close{position:relative;z-index:1}

/* ── fecho do reconhecimento ──
   Sem bloco de papel: a frase vai direto no petróleo. Por isso o
   grifo é o CLARO (--neg) — o bordô puro some sobre a faixa escura. */
.mk-rec{display:inline}


.band-deep .rec__after{
  background:none;color:var(--on-deep);padding:0;max-width:30ch;
}
/* O grifo claro nascia PINTADO: sem background-size inicial, o SVG
   sem width/height ocupa a caixa toda e a animação virava só troca
   de cor. Agora ele varre, como o grifo bordô das faixas claras. */
.mk-rec{
  background:var(--swipe-neg) left center/0% 100% no-repeat;
  /* mesmo respiro do grifo bordô. Sem ele a primeira letra encosta
     na borda do marca-texto e parece cortada — aparece quando o
     grifo começa no meio da frase, e não numa palavra isolada.
     clone: cada linha do grifo ganha o próprio respiro quando ele
     quebra em duas. */
  padding:.05em .22em .1em;margin:0 -.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.rec__close.is-in .mk-rec{animation:swipe-neg .8s cubic-bezier(.22,.7,.3,1) .4s forwards}

/* ============================================================
   DOCUMENTOS — "o que costuma estar por trás"
   ============================================================ */
.docs{display:grid;gap:1.3rem;margin:3.2rem 0 0}
.doc{
  background:var(--card);border:1px solid rgba(20,25,26,.13);
  padding:1.65rem 1.5rem 1.75rem;
  box-shadow:0 10px 22px -18px rgba(20,25,26,.45);
}
.doc__rule{height:1px;background:rgba(20,25,26,.18);margin:0 0 1.05rem}
.doc p.doc__label{
  font-family:var(--ui);font-size:.92rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .9rem;max-width:none;
}
.doc p{margin:0;font-family:var(--ui);font-size:var(--body-size);line-height:1.5;max-width:32ch;color:var(--ink)}
@media(min-width:52rem){
  .docs{grid-template-columns:repeat(3,1fr);column-gap:1.6rem}
}
.docs__close{
  margin-top:3rem;padding-top:2rem;
  border-top:1px solid rgba(20,25,26,.18);max-width:none;font-size:var(--body-size);
}
/* Filho direto, não descendente: com `.docs__close span` a regra
   também casava um <span class="mk"> dentro do fecho, e o grifo
   virava bloco de 56ch — o marca-texto atravessava a linha inteira.
   É o mesmo tipo de erro de seletor já registrado no doc. */
.docs__close>span{display:block;max-width:56ch}
/* A frase grifada do fecho começa em LINHA NOVA. Sem isso ela puxa o
   fim da linha anterior e sobra uma palavra órfã antes do grifo — na
   página 3 sobrava um "É" sozinho no alto. */
.docs__close>span+span{margin-top:.12em}
/* mesmo gesto do reconhecimento: negrito de onde a frase final
   começa, e o grifo marcando o trecho decisivo dentro dele. 600 e
   não 700 — em Archivo o 700 grita ao lado do marca-texto. */
.docs__close b{font-weight:600;color:var(--ink)}

.flaw{display:grid;gap:.42rem;margin:0 0 1.15rem}
.flaw--grid{grid-template-columns:1fr 1fr;gap:.42rem .5rem}
.flaw i{display:block;height:.42rem;background:var(--ink);opacity:.14;width:var(--w,100%)}
.flaw b{display:block;height:.42rem;border:1px dashed rgba(124,47,60,.55);width:var(--w,100%)}
.flaw u{display:block;height:.42rem;background:var(--signal);width:var(--w,100%);text-decoration:none}

/* entrada em sequência, disparada quando a seção chega na tela */
.docs .doc{
  opacity:0;transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1);
}
.docs.is-in .doc{opacity:1;transform:none}
.docs.is-in .doc:nth-child(2){transition-delay:.11s}
.docs.is-in .doc:nth-child(3){transition-delay:.22s}

/* o grifo da carta desenhava no load: passa a desenhar quando a seção aparece */
/* ⚠️ `background-position` é obrigatório aqui. O .mk nasce com
   `left center`, que para um fundo de 100% de altura é indiferente —
   mas a régua tem .09em de altura, e centralizada ela cai NO MEIO da
   linha: virava tacha, não sublinhado. Ficou assim desde a home, no
   desktop inclusive ("Traz ~~um motivo escrito~~"). */
.docs .mk{animation:none;background-size:0 .09em;background-position:left bottom}
.docs.is-in .mk{
  animation:regua .7s cubic-bezier(.22,.7,.3,1) .45s forwards;
}
@media(prefers-reduced-motion:reduce){
  .docs .doc{opacity:1!important;transform:none!important}
  .docs .mk{background-size:100% .09em!important}
}

/* ============================================================
   SITUAÇÕES
   ============================================================ */
.sit{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:52rem){.sit{grid-template-columns:1fr 1fr}}
.sit__card{
  background:var(--card);border:1px solid var(--rule);
  padding:1.7rem 1.45rem 1.5rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.55rem;min-height:0;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.sit__card:hover{transform:translateY(-3px);border-color:currentColor;box-shadow:0 18px 34px -22px rgba(20,25,26,.55)}
.sit__card h3{margin:0;max-width:none;line-height:1.22}
.sit__card p{margin:0;font-size:var(--body-size);color:var(--muted);max-width:none;line-height:1.45}
.sit__go{
  margin-top:auto;padding-top:1.2rem;font-family:var(--ui);font-weight:600;font-size:.88rem;
  letter-spacing:.06em;display:flex;align-items:center;gap:.5rem;color:var(--muted);
}
.sit__card:hover .sit__go{color:var(--ink)}
.sit__card:hover .arw{transform:translateX(.28rem)}
.sit__go .arw{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.sit__card--signal{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
.sit__card--signal:hover{border-color:var(--on-signal)}
.sit__card--signal p,.sit__card--signal .sit__go{color:var(--on-signal);opacity:.78}
.sit__card--signal:hover .sit__go{opacity:1}
@media(min-width:52rem){.sit__card--signal{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-height:auto;gap:2rem}
 .sit__card--signal .sit__go{margin-top:0;padding-top:0}
 .sit__card--signal div{display:flex;flex-direction:column;gap:.4rem}}

.sit__head{display:flex;flex-direction:column;gap:.6rem}
@media(min-width:64rem){.sit{grid-template-columns:repeat(4,1fr);gap:1rem}}
.sit__head-wrap{display:flex;flex-direction:column;gap:.6rem}

/* ============================================================
   CAMINHOS — "O que o escritório faz"

   Os quatro serviços são o conteúdo, em lista numerada; a análise
   de documentos fecha como tese. É a ordem exata da copy.
   Item de lista é corpo (400); fecho é statement (600).
   ============================================================ */
.cm{--muted-2:#4A5251;margin-top:clamp(2.4rem,5vw,3.4rem)}

.cm__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cm__item{
  display:flex;align-items:baseline;gap:1.3rem;
  padding:1.4rem 0;border-top:1px solid rgba(20,25,26,.18);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.cm__item:last-child{border-bottom:1px solid rgba(20,25,26,.18)}
.cm.is-in .cm__item{opacity:1;transform:none}
.cm.is-in .cm__item:nth-child(1){transition-delay:.06s}
.cm.is-in .cm__item:nth-child(2){transition-delay:.18s}
.cm.is-in .cm__item:nth-child(3){transition-delay:.30s}
.cm.is-in .cm__item:nth-child(4){transition-delay:.42s}

/* a numeração é o único elemento com peso na parte de cima */
.cm__n{
  flex:0 0 auto;font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  font-size:.95rem;letter-spacing:.06em;color:var(--signal);opacity:.9;
}
.cm__item:nth-child(1) .cm__n::before{content:"01"}
.cm__item:nth-child(2) .cm__n::before{content:"02"}
.cm__item:nth-child(3) .cm__n::before{content:"03"}
.cm__item:nth-child(4) .cm__n::before{content:"04"}

/* Escala do h3.display (22px), mas peso 400: o 600 do h3 é peso de
   TÍTULO e serve para os cards de Situações, que são títulos curtos.
   Estes quatro são frases da copy, e frase é corpo. */
.cm__txt{
  margin:0;max-width:30ch;
  font-family:var(--display);font-weight:400;
  font-variation-settings:"wdth" var(--display-wdth),"wght" 400;
  /* Corpo aferido contra o .lead ("É comum a pessoa achar…", Archivo
     a ~20px) renderizando os dois lado a lado. A Newsreader precisa
     de ~+24% para ter a mesma altura aparente — o --dscale de 1,05
     subcompensa bastante nesse par. Sem clamp: com ele, abaixo de
     ~1116px de janela o item ficava menor que o texto corrido. */
  /* ⚠️ Era corpo FIXO de 1,44rem: 24,9px. No desktop está aferido
     contra o .lead e é intencional — a Newsreader precisa de ~+24%
     para ter a mesma altura aparente. No celular isso virava o maior
     texto corrido da página, muito acima dos 18px do corpo.
     O clamp só age abaixo de ~660px de janela: entre 660 e 1440 o
     valor continua travado em 1,44rem, então o aviso antigo (de que o
     item ficava menor que o texto corrido em janela média) segue
     respeitado. */
  font-size:calc(clamp(1.25rem,3.6vw,1.44rem) * var(--dscale,1));
  line-height:1.32;letter-spacing:-.012em;
  color:var(--ink);text-wrap:pretty;
}

/* ---------- o fecho ----------
   A quinta frase da copy: não é um quinto serviço, é a condição que
   vale para os quatro. Peso de statement e grifo na chave. */
.cm__obs{
  display:flex;align-items:flex-start;
  margin:clamp(3rem,5.5vw,4rem) 0 0;
  opacity:0;transition:opacity .6s ease .92s;
}
.cm.is-in .cm__obs{opacity:1}
.cm__obs p{
  margin:0;max-width:46ch;
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  letter-spacing:var(--display-track);
  font-size:calc(clamp(1.25rem,2.1vw,1.6rem) * var(--dscale,1));
  line-height:1.34;color:var(--ink);
}
.cm__obs b{font-weight:var(--display-weight);color:var(--ink)}
.mk-ob{
  display:inline;padding:.05em .22em .1em;margin:0 -.22em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--swipe) left center/0% 100% no-repeat;
}
.cm.is-in .mk-ob{animation:swipe .8s cubic-bezier(.22,.7,.3,1) .95s forwards}

@media(min-width:56rem){
  .cm__item{gap:1.6rem;padding:1.7rem 0}
  .cm__txt{max-width:46ch}
}
@media(prefers-reduced-motion:reduce){
  .cm__item,.cm__obs{opacity:1!important;transform:none!important}
}

/* ============================================================
   ATENDIMENTO
   ============================================================ */
.atd__head{max-width:58ch}
/* ── os três passos do atendimento ──
   Numeral fechado: o número serifado em bordô é a estrutura.
   Contorno: cantoneiras, as marcas de registro de um impresso.
   Contêm sem fechar — e por não serem borda contínua não disputam
   com o .atd__box logo abaixo, que já é caixa com fundo. */

.steps{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:0}
.steps li{
  position:relative;display:grid;gap:.55rem;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.steps.is-in li{opacity:1;transform:none}
.steps.is-in li:nth-child(2){transition-delay:.12s}
.steps.is-in li:nth-child(3){transition-delay:.24s}
.steps h3{margin:0;max-width:22ch}
.steps p{margin:0;color:var(--muted);font-size:var(--body-size);max-width:36ch;line-height:1.5}
.steps__n{
  display:block;margin-bottom:.3rem;
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  font-size:calc(2.6rem * var(--dscale,1));line-height:1;letter-spacing:-.02em;
  color:var(--signal);
}

/* A · nenhum */


/* B · cantoneira — marcas de canto, como as de registro de um
   impresso. Contém sem fechar, e por não ser borda contínua não
   disputa com a caixa logo abaixo. */
.steps li{padding:1.5rem 1.4rem 1.6rem}
.steps li::before,
.steps li::after{
  content:"";position:absolute;width:1rem;height:1rem;
  opacity:0;transition:opacity .5s ease .3s;
}
.steps li::before{
  left:0;top:0;border-left:1px solid rgba(20,25,26,.3);border-top:1px solid rgba(20,25,26,.3);
}
.steps li::after{
  right:0;bottom:0;border-right:1px solid rgba(20,25,26,.3);border-bottom:1px solid rgba(20,25,26,.3);
}
.steps.is-in li::before,
.steps.is-in li::after{opacity:1}

/* C · ele — fio em cima e à esquerda. Meia moldura: sugere o
   quadro sem fechá-lo. */


/* D · moldura — fio de 1px fechando, sem fundo */


@media(min-width:56rem){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:2.5rem}
  
  .steps,
}
@media(prefers-reduced-motion:reduce){
  .steps li{opacity:1!important;transform:none!important}
  .steps li::before,.steps li::after{opacity:1!important}
}

/* ── o bloco de documentos + CTA ──
   Caixa de papel com o rótulo da copy ("O que ter em mãos"), os
   documentos em MINIATURA — não ícone: a folha em si, com a
   anatomia de cada documento e o nome dentro dela — e o botão do
   WhatsApp, que é o único link real de WhatsApp da página.

   Descartados: chips/pastilha, lista, grade, cartão, faixa escura
   de ponta a ponta, nome embaixo da folha, e marcas alternativas
   na pastilha (tique, caixa tracejada, ponto).                  */

.atd__box{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 20px 44px -32px rgba(20,25,26,.5);
  padding:clamp(1.6rem,3.5vw,2.6rem);
}
.atd__box h3{
  font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.3rem;
}
.atd__box>div:last-child{margin-top:1.8rem}

.dochints{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,14.5rem));justify-content:start;gap:1.3rem;
}
/* font-size:0 esconde o nome que está no <li> — ele fica no DOM
   como texto acessível, porque a miniatura é aria-hidden. Não
   trocar por display:none. */
.dochints li{display:grid;align-content:start;font-size:0}

.mini{
  /* overflow:hidden é o que faz o aspect-ratio mandar: sem ele o
     conteúdo estica a folha e as quatro ficam de alturas diferentes */
  padding:.6rem .55rem;aspect-ratio:1/1.12;overflow:hidden;
  box-shadow:0 10px 20px -14px rgba(20,25,26,.45);
}
.mini .sheet__lbl{font-size:.68rem;letter-spacing:.1em;margin-bottom:.55rem;color:var(--ink)}
.mini .sheet__rule{margin-bottom:.5rem}
.mini .sheet__lines{gap:.28rem}
.mini .sheet__lines i,.mini .sheet__lines u{height:.26rem}
.mini .sheet__tab{gap:.28rem .3rem}
.mini .sheet__tab span{height:.26rem}
.mini .sheet__form{gap:.34rem .35rem}
.mini .sheet__form span{height:.26rem}
.mini .sheet__form .lbl{height:.22rem}
.mini .sheet__timbre{height:.8rem;margin:.1rem 0 .45rem}
.mini .sheet__foto{width:52%;margin-bottom:.45rem}
.mini .sheet__tri{right:.35rem;top:.35rem;border-left-width:.6rem;border-right-width:.6rem;border-bottom-width:1.05rem}
.mini .sheet__cruz{width:1rem;height:1rem;margin-bottom:.45rem}
@media(max-width:56rem){
  .dochints{grid-template-columns:repeat(2,minmax(0,14.5rem))}
}

.atd__note{margin:1.4rem 0 0;font-size:var(--body-size);color:var(--muted);max-width:52ch;line-height:1.5}
.wa-ico{width:1.35rem;height:1.35rem;flex:0 0 auto}

/* ============================================================
   ESCRITÓRIO
   ============================================================ */
.office{position:relative;overflow:hidden}
/* marca d'água: antes ficava em right:-6% e era cortada pelo
   overflow:hidden da seção. Agora é uma caixa ancorada dentro dos
   limites, e a marca se ajusta por largura E por altura — em tela
   baixa era a altura que estourava, não a largura. */
.office__mark{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2.5rem);
}
.office__mark .mark-svg{
  width:min(42rem,50%);max-height:100%;height:auto;
  color:var(--on-deep);opacity:.055;
}
@media(max-width:60rem){.office__mark .mark-svg{width:min(27rem,62%)}}
.office__in{position:relative}
.office__body{max-width:58ch;margin-top:2.2rem}
.office__body p{color:var(--on-deep-muted);max-width:58ch}

@media(min-width:44rem){}

/* ============================================================
   PROVA SOCIAL
   ============================================================ */
.reviews{display:grid;gap:1.1rem;margin-top:2.6rem}
@media(min-width:52rem){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:70rem){.reviews{grid-template-columns:repeat(3,1fr)}}


.review{background:var(--card);border:1px solid var(--rule);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.stars{display:flex;gap:.18rem;color:var(--ink)}
.stars svg{width:.92rem;height:.92rem}
.review p{margin:0;font-size:var(--body-size);line-height:1.55;max-width:none}
.review footer{
  margin-top:auto;padding-top:.4rem;display:flex;flex-direction:column;gap:.15rem;
  font-family:var(--ui);font-size:.84rem;color:var(--muted);
}
.review footer strong{font-weight:600;color:var(--ink);font-size:var(--t-meta)}
.review footer span{font-size:.78rem;letter-spacing:.02em}

/* ============================================================
   FECHAMENTO
   ============================================================ */
/* ── fechamento ──
   Última decisão da página, na única faixa bordô cheia. O grid
   antigo usava align-items:end com colunas de alturas muito
   diferentes, então o H2 caía para o pé da célula e desalinhava
   do parágrafo.
   topo · centro · manchete · placa                              */
.close__grid{display:grid;gap:2.4rem}
.close p{margin:0;font-size:var(--body-size);max-width:44ch;opacity:.84;line-height:1.55}
.close .btn{margin-top:2rem}

@media(min-width:60rem){
  /* A · topo — o grid de sempre, alinhado pelo topo */
  .close__grid{grid-template-columns:1.05fr .95fr;gap:1.6rem 5rem;align-items:start}
  .close h2{grid-column:1;grid-row:1 / span 2}
  .close p{grid-column:2;grid-row:1}
  .close .btn{grid-column:2;grid-row:2;justify-self:start;margin-top:.4rem}

  /* B · centro — coluna única no eixo. O fechamento deixa de ser
     duas colunas e vira um único bloco de decisão. */
  
  
  
  

  /* C · manchete — o H2 atravessa a largura toda e embaixo o
     parágrafo e o botão dividem a linha, alinhados pela base. */
  
  
  
  

  /* D · placa — texto à esquerda e o botão isolado à direita, num
     campo de papel que o destaca da faixa bordô. */
  
  
  
  
}
.band-signal .btn--primary{background:var(--on-signal);color:var(--signal)}
.band-signal .btn--primary:hover{background:var(--deep);color:var(--signal)}

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot{background:var(--deep-2);color:var(--on-deep);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot__grid{display:grid;gap:2.6rem}
@media(min-width:52rem){.foot__grid{grid-template-columns:1.2fr .9fr .9fr}}
.foot__logo{color:var(--on-deep);width:13rem;margin-bottom:1.5rem}
.foot h4{
  font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-deep-muted);margin:0 0 1.1rem;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.foot a{text-decoration:none;font-family:var(--ui);font-size:.95rem;color:var(--on-deep)}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}
.foot address{font-style:normal;font-family:var(--ui);font-size:.95rem;line-height:1.6;color:var(--on-deep-muted)}
.foot address a{color:inherit}
.foot__legal .nb{white-space:nowrap}
.foot__legal{
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-deep);
  font-family:var(--ui);font-size:.8rem;line-height:1.6;color:var(--on-deep-muted);max-width:70ch;
}

/* ============================================================
   BARRA FIXA MOBILE — REMOVIDA

   Existia um botão fixo no pé da tela no celular. A Mari tirou: em
   telas mais baixas ele não lia como botão, parecia parte da página
   que não carregou. O CTA do hero e o do fechamento cobrem o mesmo
   papel, e agora o menu também tem um.
   ============================================================ */

/* ============================================================
   GLIFOS DE DOCUMENTO
   ============================================================ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:3.6rem;height:3.6rem;display:block;flex:0 0 auto;color:currentColor}
.sit__card .ic{width:2.8rem;height:2.8rem;margin-bottom:1rem}
.sit__card{padding-top:2.1rem}
.sit__card--signal{--icacc:var(--on-signal)}

/* ============================================================
   PILHA DE DOCUMENTOS DO HERO
   ============================================================ */
.sheet{
  background:var(--paper);border:1px solid var(--line);
  padding:1.3rem 1.25rem 1.5rem;margin:0;
  box-shadow:0 26px 50px -30px rgba(20,25,26,.5);
}
.sheet__lbl{
  font-family:var(--ui);font-size:.66rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .55rem;
}
.sheet__rule{height:1px;background:var(--line);margin-bottom:1rem}
.sheet__lines{display:grid;gap:.5rem}
.sheet__lines i{display:block;height:.42rem;width:var(--w,100%);background:var(--ink);opacity:.13}

/* ============================================================
   OBJETOS DE DOCUMENTO — escala grande (hero e afins)

   Variantes da .sheet. Cada documento tem ANATOMIA própria em vez
   de ser o mesmo retângulo com barras: é isso que faz a hero ler
   como "os papéis do seu caso" e não como dois cartões.
   Posicionamento na hero fica em aberto — isto aqui só define os
   objetos. Referência viva: docs/elementos.html
   ============================================================ */
.sheet__lines u{display:block;height:.42rem;width:var(--w,100%);background:var(--signal);text-decoration:none}
.sheet__lines b{display:block;height:.42rem;width:var(--w,100%);border:1px dashed rgba(124,47,60,.6)}

/* carta de decisão · timbre cheio no topo e o motivo em bordô */
.sheet--carta .sheet__timbre{height:1.5rem;background:var(--ink);margin:0 0 .75rem}

/* extrato do CNIS · série temporal: linhas iguais que se repetem,
   e a lacuna de contribuição em campo tracejado */
.sheet--cnis .sheet__tab{display:grid;grid-template-columns:34% 1fr;gap:.5rem .55rem}
.sheet--cnis .sheet__tab span{display:block;height:.42rem;width:var(--w,100%);background:var(--ink);opacity:.14}
.sheet--cnis .sheet__tab .gap{opacity:1;background:none;border:1px dashed rgba(124,47,60,.6);height:.44rem}

/* PPP · formulário rotulado: coluna de rótulos curtos à esquerda,
   valores à direita. É o que o separa do CNIS. */
.sheet--ppp .sheet__form{display:grid;grid-template-columns:38% 1fr;gap:.62rem .6rem;align-items:center}
.sheet--ppp .sheet__form span{display:block;height:.42rem;width:var(--w,100%);background:var(--ink);opacity:.14}
.sheet--ppp .sheet__form .lbl{opacity:.32;height:.36rem}
.sheet--ppp .sheet__form b{display:block;height:.9rem;width:100%;border:1px dashed rgba(124,47,60,.6)}

/* carteira de trabalho · lombada e retrato: a única com silhueta
   de livreto */
.sheet--carteira{border-left:6px solid var(--ink)}
.sheet--carteira .sheet__foto{width:44%;aspect-ratio:3/4;border:1px solid rgba(20,25,26,.3);margin:0 0 .8rem}

/* laudo · cabeçalho médico e a linha da limitação em bordô — que é
   o que a copy diz que separa laudo bom de laudo ruim */
.sheet--laudo .sheet__cruz{
  width:1.5rem;height:1.5rem;margin:0 0 .7rem;position:relative;
}
.sheet--laudo .sheet__cruz::before,
.sheet--laudo .sheet__cruz::after{
  content:"";position:absolute;background:var(--ink);
}
.sheet--laudo .sheet__cruz::before{left:40%;top:0;width:20%;height:100%}
.sheet--laudo .sheet__cruz::after{top:40%;left:0;height:20%;width:100%}

/* CAT · o triângulo de alerta rompendo a margem da folha */
.sheet--cat{position:relative}
.sheet--cat .sheet__tri{
  position:absolute;right:-.6rem;top:-.6rem;width:0;height:0;
  border-left:.85rem solid transparent;border-right:.85rem solid transparent;
  border-bottom:1.5rem solid var(--signal);
}

/* envelope · como a carta do INSS chega. A aba é SVG: feita com
   gradiente ela virava um X sobre o papel. */
.sheet--envelope .sheet__flap{display:block;width:100%;height:2.6rem;margin:0 0 .7rem}
.sheet--envelope .sheet__flap path{fill:none;stroke:rgba(20,25,26,.3);stroke-width:1.5}
.sheet--envelope .sheet__selo{width:2.1rem;height:2.6rem;background:var(--signal);margin:0 0 .8rem auto}

/* ============================================================
   RODAPÉ DA SEÇÃO DO ESCRITÓRIO
   ============================================================ */
.office__foot{
  display:grid;gap:2.6rem;margin-top:clamp(2.8rem,5vw,4rem);
  padding-top:2.4rem;border-top:1px solid var(--rule);
}

.office__lbl{
  font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-deep-muted);margin:0 0 1.2rem;
}
/* ── o bloco dos sócios ──
   A copy pede "foto de cada sócio, nome completo e inscrição na
   OAB". Foto não existe ainda (decisão registrada), então o que
   varia é como nome e OAB se apresentam.
   lista · fichas · assinatura                                   */
.socios{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.socios strong{display:block;font-family:var(--ui);font-weight:600;font-size:1.06rem}
.socios span{font-family:var(--ui);font-size:.84rem;letter-spacing:.05em;color:var(--on-deep-muted)}

/* B · fichas — o lugar do retrato fica reservado e visível, com a
   hachura que a página já usa como marcação de pendência */

/* C · assinatura — os nomes em corpo de display, lado a lado, como
   quem assina o documento no pé. Sem rótulo e sem caixa. */
/* sem filete no item: o .office__foot já tem um logo acima */
/* colunas com teto: dois sócios dão a mesma largura de antes (38rem) e
   um terceiro entra ao lado em vez de quebrar a assinatura em duas
   fileiras. O subgrid alinha a linha da OAB mesmo quando um nome ocupa
   duas linhas. */
.socios{grid-template-columns:repeat(auto-fit,minmax(15rem,17.7rem));gap:.35rem 2.6rem;max-width:none}
.socios li{display:grid;grid-template-rows:subgrid;grid-row:span 2}
.socios li:not(:last-child){padding-bottom:2.25rem}
.socios strong{
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  font-size:calc(1.5rem * var(--dscale,1));letter-spacing:var(--display-track);
  line-height:1.2;margin-bottom:.4rem;
}


/* ============================================================
   CAMINHOS SOBRE O PETRÓLEO

   Nas páginas internas "o que pode ser feito" é a promessa da página
   e ganha a faixa escura. O componente foi desenhado para fundo
   claro: texto, filetes e numeração vinham em tinta e em bordô puro,
   e sobre o petróleo o bordô some (é a mesma regra do grifo).
   ============================================================ */
.band-deep .cm__txt,
.band-deep .cm__obs p,
.band-deep .cm__obs b{color:var(--on-deep)}
.band-deep .cm__item{border-top-color:var(--line-deep)}
.band-deep .cm__item:last-child{border-bottom-color:var(--line-deep)}
.band-deep .cm__n{color:var(--neg);opacity:1}
.band-deep .mk-ob{background-image:var(--swipe-neg)}
.band-deep .cm.is-in .mk-ob{animation-name:swipe-neg}

/* Rótulo de duas linhas: quando um dos três ocupa duas, todos
   reservam duas. Em ficha de formulário o que alinha é o campo, não
   o texto — sem isso as barras e o corpo de uma ficha descem
   sozinhos e a fileira perde o pé. */
.docs--rotulo-longo .doc__label{min-height:2.7em}

/* ── reconhecimento em bloco único ──
   Quando a copy do Reconhecimento é UM parágrafo só, não há o que
   separar: título e texto ficam na MESMA MEDIDA, colados, como a
   abertura de um capítulo. O texto sobe um pouco de corpo porque
   sobre o petróleo ele é o único da seção.

   ⚠️ Sem filete entre os dois. A frase de virada é continuação da
   mesma frase de cima — o traço partia o parágrafo no meio. Foi essa
   a reprovação que originou este bloco.
   ⚠️ Sem o texto ao lado do H2. Naquele lugar ele só existe para
   puxar a lista de vozes; sem a lista vira coluna solta.

   O peso vem de dentro do parágrafo: negrito de onde a copy vira a
   chave, e o grifo claro fechando. */
.recon--bloco .recon__bloco{max-width:41rem}
.recon--bloco h2.display{max-width:none}
.recon--bloco .recon__txt{
  margin:1.5rem 0 0;max-width:none;color:var(--on-deep);
  font-size:1.22rem;line-height:1.62;
}
.recon--bloco .recon__txt b{font-weight:600;color:var(--on-deep)}
.recon__txt.is-in .mk-rec{animation:swipe-neg .8s cubic-bezier(.22,.7,.3,1) .3s forwards}

/* ── reconhecimento empilhado ──
   O topo em duas colunas só funciona quando o texto de entrada tem
   corpo. Quando ele é uma frase curta — "A situação é sempre a
   mesma:" — a coluna da direita fica com uma linha solta no meio do
   vazio. Aqui ele desce para baixo do H2, antes da lista. */
@media(min-width:64rem){
  .recon--empilhado .rec--b__top{grid-template-columns:1fr;gap:1.3rem}
  .recon--empilhado .rec--b__top .rec__intro{margin:0;padding-bottom:0;max-width:52ch}
}

/* ── reconhecimento sem as vozes ──
   A copy das internas nem sempre enumera situações; quando não
   enumera, o texto fica em prosa e a lista de X não existe. Sem ela
   some também o filete que separava o topo do fecho, e ele volta
   aqui — dentro da .wrap, para não atravessar a tela inteira. */
.recon--prosa .rec--b__top{
  padding-bottom:clamp(2.4rem,4.5vw,3.4rem);
  border-bottom:1px solid var(--line-deep);
}
.recon--prosa .rec__close{margin-top:clamp(2.4rem,4.5vw,3.4rem)}

/* ============================================================
   FECHO DE "O QUE ESTÁ POR TRÁS"

   O grifo do fecho anima junto com as fichas, não no load. As fichas
   é que carregam o data-reveal, então o gatilho vem por irmão
   adjacente — o .docs__close vem logo depois do .docs.
   (Na home o fecho não tem grifo; a regra não muda nada lá.)
   ============================================================ */
.docs__close .mk{animation:none;background-size:0 100%}
.docs__close.is-in .mk{animation:swipe .8s cubic-bezier(.22,.7,.3,1) .5s forwards}
/* ⚠️ O gatilho é o PRÓPRIO fecho, não o irmão anterior. A primeira
   versão usava `.docs.is-in + .docs__close`, e em /auxilio-acidente,
   onde o que vem antes do fecho não é a fileira de fichas, o grifo
   nunca desenhava. Cada .docs__close leva o seu data-reveal. */

@media(prefers-reduced-motion:reduce){
  .docs__close .mk{background-size:100% 100%!important;color:var(--on-signal)}
}

/* ============================================================
   NÚMERO DO BENEFÍCIO — objeto

   ⚠️ O único objeto da biblioteca com TEXTO LEGÍVEL dentro. Todos os
   outros são abstratos, feitos de barras. A exceção existe porque
   aqui o conteúdo do documento *é* a informação que se pede — uma
   barra cinza no lugar do número não diz "número".

   Os dígitos são `000.000.000-0`: o NB do INSS tem dez dígitos (isso
   é oficial), e os zeros leem como número sem parecer o número real
   de alguém. Uma sequência tipo 123.456.789-0 foi testada e
   descartada por isso.

   O campo é FECHADO e preenchido, e é essa a anatomia que distingue:
   o campo tracejado bordô da biblioteca já significa o contrário —
   campo em falta.
   ============================================================ */
.sheet--numero{container-type:inline-size}
.sheet--numero .sheet__num{
  display:block;border:2px solid var(--signal);
  padding:1.1rem .8rem;margin:14% 0 0;
}
.sheet--numero .sheet__num b{
  display:block;font-family:var(--ui);font-weight:600;color:var(--signal);
  letter-spacing:.02em;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  /* O corpo acompanha a LARGURA DA FOLHA, não a raiz: o mesmo objeto
     aparece com 239px na fileira do desktop, ~137px na de duas
     colunas do celular e ~190px na prancha de elementos. Com corpo
     fixo os dez dígitos vazavam da folha no celular, e quebrar em
     duas linhas não é opção — número não se parte. */
  font-size:min(1.15rem,9.2cqi);
}
.mini.sheet--numero .sheet__num{padding:.65rem .45rem;border-width:1.5px}

/* ============================================================
   CONJUNTO DE DOCUMENTOS — objeto

   O único com mais de uma folha, e é a silhueta em leque que se lê
   antes de qualquer detalhe.

   As folhas de trás são ELEMENTOS, não sombra. A primeira versão as
   fazia com box-shadow, que não gira — e sem giro ninguém percebia
   que era mais de um papel.

   O giro é deliberado e grande o bastante para ler como intenção. Não
   confundir com a rotação de 0,3° que foi removida das fichas: aquilo
   era desalinhamento. Os ângulos aqui são medidos para caber no vão
   da fileira (1,3rem): uma folha girada avança
   (largura/2)·cos θ + (altura/2)·sen θ além do próprio meio.

   O clipe é o acento bordô, e é SVG: desenhado com borda de CSS ele
   vira um retângulo arredondado, não um arame.
   ============================================================ */
.conj{position:relative;display:grid}
/* display:grid e não block: dentro de um bloco o <span> da folha
   continua inline, e em elemento inline aspect-ratio e overflow não
   valem — a miniatura perderia a altura. */
.conj>.sheet{position:relative;z-index:1}
.conj__tras{
  position:absolute;inset:0;background:var(--paper);
  border:1px solid rgba(20,25,26,.3);
  box-shadow:0 8px 16px -12px rgba(20,25,26,.55);
  transform:rotate(-5deg) translate(-5px,-3px);
}
.conj__tras--2{transform:rotate(4deg) translate(7px,-4px)}
.conj__clipe{
  position:absolute;z-index:3;right:13%;top:-1.5rem;
  width:2.5rem;height:auto;color:var(--signal);
}
.conj__clipe path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
.dochints .conj__clipe{width:1.85rem;top:-1.05rem}
.dochints .conj__clipe path{stroke-width:3.6}
/* o rótulo para antes do clipe: em coluna estreita (celular) ele
   quebra em duas linhas e a segunda passava por baixo do arame */
.conj .sheet__lbl{display:block;padding-right:26%}

/* ============================================================
   FAQ — sanfona · padrão das cinco páginas

   As respostas abrem e fecham. Cinco perguntas de uma vez leem como
   ÍNDICE em vez de texto corrido, e a pessoa escolhe a dúvida que é
   a dela. A primeira vem aberta: com todas fechadas a seção lê como
   uma lista de títulos soltos.

   É `<details>` nativo. Funciona sem JavaScript, abre pelo teclado,
   e o alvo de toque passa dos 56px que a página exige.
   ⚠️ Não trocar por sanfona de JS.

   ⚠️ Custo assumido: o que está dentro de `<details>` pesa menos
   para o Google, e o FAQ é parte do que sustenta a relevância de uma
   página que é destino de anúncio. Decisão da Mari, ciente disso.
   Descartadas: duas colunas (a versão anterior — pergunta e resposta
   ficavam longe uma da outra e sobrava vazio na esquerda), fichas em
   grade (ficha significa documento no site, e pergunta não é) e
   P./R. pendurados (não economizava altura e criava marca nova).

   ── o destaque ──
   Cruz bordô na ponta direita, a convenção de sanfona, e a pergunta
   ABERTA inteira em bordô. É o destaque mais forte das opções que
   testamos, e foi a escolha da Mari.
   O texto começa na margem, alinhado com o eyebrow, o H2 e o resto da
   página — a marca é que fica pendurada do outro lado.
   Descartados: cruz à esquerda com régua sob a pergunta aberta,
   numeral pendurado 01–05 (a página já tem duas listas numeradas) e o
   item aberto virando campo de papel branco.
   ============================================================ */
.faq{list-style:none;margin:clamp(2.4rem,5vw,3.4rem) 0 0;padding:0;display:grid}
.faq li{
  border-top:1px solid rgba(20,25,26,.18);
  opacity:0;transform:translateY(10px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
}
.faq li:last-child{border-bottom:1px solid rgba(20,25,26,.18)}
/* entrada escalonada, como as fichas e os caminhos */
.faq.is-in li{opacity:1;transform:none}
.faq.is-in li:nth-child(1){transition-delay:.05s}
.faq.is-in li:nth-child(2){transition-delay:.14s}
.faq.is-in li:nth-child(3){transition-delay:.23s}
.faq.is-in li:nth-child(4){transition-delay:.32s}
.faq.is-in li:nth-child(5){transition-delay:.41s}
.faq.is-in li:nth-child(6){transition-delay:.50s}

.faq summary{list-style:none;cursor:pointer;padding:1.45rem 0}
.faq summary::-webkit-details-marker{display:none}

/* A marca fica DENTRO do <h3>, não ao lado: <summary> aceita conteúdo
   de frase OU um único elemento de cabeçalho, e um <span> irmão do
   <h3> deixaria o markup inválido. */
.faq__q{
  position:relative;margin:0;padding-right:3rem;max-width:none;
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  font-size:clamp(1.28rem,1.7vw,1.35rem);line-height:1.32;letter-spacing:-.012em;
  color:var(--ink);transition:color .16s ease;
}
.faq details[open] .faq__q{color:var(--signal)}
.faq summary:hover .faq__q{color:var(--signal)}

/* a cruz que vira traço, na ponta direita */
.faq__mk{position:absolute;right:0;top:.3em;width:1.05rem;height:1.05rem}
.faq__mk::before,.faq__mk::after{
  content:"";position:absolute;background:var(--signal);transition:transform .2s ease;
}
.faq__mk::before{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.faq__mk::after{top:0;bottom:0;left:50%;width:2px;margin-left:-1px}
.faq details[open] .faq__mk::after{transform:scaleY(0)}

/* a resposta começa na margem, alinhada com a pergunta e com o resto
   da página */
.faq details>p{
  margin:0;padding:0 3rem 1.6rem 0;max-width:60ch;
  font-size:var(--body-size);line-height:1.55;color:var(--ink);
  animation:faq-abre .24s ease both;
}
@keyframes faq-abre{from{opacity:0;transform:translateY(-5px)}}

@media(max-width:40rem){
  .faq__q{padding-right:2.1rem}
  .faq__mk{width:.9rem;height:.9rem}
  .faq details>p{padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  .faq li{opacity:1!important;transform:none!important}
  .faq details>p{animation:none}
  .faq__mk::before,.faq__mk::after,.faq__q{transition:none}
}

/* ============================================================
   LOGOS

   O logo horizontal e o monograma eram SVG embutido — 53 KB cada,
   e o index trazia dois. Multiplicado por cinco páginas viraria
   meio megabyte do mesmo desenho.

   Agora são MÁSCARA: o arquivo entra por mask-image e a cor vem de
   background-color:currentColor, que é o que preserva a inversão
   que o fill="currentColor" fazia (petróleo na barra clara,
   branco-osso no rodapé e na marca d'água).

   ⚠️ Não trocar por <img>: img não herda currentColor, e o logo
   precisa mudar de cor conforme a faixa em que está.
   ============================================================ */
.logo-svg,.mark-svg{
  display:block;max-width:100%;width:100%;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Os arquivos de máscara são gerados (tools/gerar-mascaras.py): os de
   marca declaram width/height que não batem com o viewBox, e como
   máscara é a proporção do arquivo que manda — com ela errada a marca
   d'água saía deslocada. As proporções abaixo são as do viewBox. */
.logo-svg{
  aspect-ratio:1125/217.5;
  -webkit-mask-image:url("logo/completa-mascara.svg");mask-image:url("logo/completa-mascara.svg");
}
.mark-svg{
  aspect-ratio:375/224.88;
  -webkit-mask-image:url("logo/marca-mascara.svg");mask-image:url("logo/marca-mascara.svg");
}

/* ============================================================
   EXAME DE IMAGEM — objeto

   Único objeto com BLOCO ESCURO: a chapa. É isso que o separa de
   todas as outras folhas, que são só barras cinza sobre papel. A
   folha em volta continua papel — o exame chega impresso numa folha,
   não solto.

   São DUAS chapas, porque a copy fala em "exames", no plural, e o
   acento bordô é a marcação de uma delas: o gesto de circular o que
   importa, que é o vocabulário do site.

   ⚠️ Forma dentro da chapa NÃO funciona. Uma silhueta orgânica no
   meio do bloco foi testada e reprovada — "parece uma batata". Nesse
   corpo, o bloco preto sozinho já diz chapa; qualquer desenho dentro
   vira ruído. Negativo de radiografia com pautas também já tinha sido
   descartado no glifo, por ler como código de barras.
   ============================================================ */
.sheet--exame .sheet__chapas{
  display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin:0 0 .9rem;
}
.sheet--exame .sheet__chapas span{display:block;aspect-ratio:1/1.18;background:var(--ink)}
/* a marcação é sombra INTERNA: contorno externo é cortado pelo
   overflow:hidden que a miniatura precisa ter */
.sheet--exame .sheet__chapas .mk{box-shadow:inset 0 0 0 2.5px var(--signal)}
.mini.sheet--exame .sheet__chapas{gap:.25rem;margin-bottom:.5rem}
.mini.sheet--exame .sheet__chapas .mk{box-shadow:inset 0 0 0 2px var(--signal)}

/* ============================================================
   ATESTADO E HISTÓRICO DE AFASTAMENTO — objeto

   O acento é um VÃO MEDIDO, não uma barra — é o período de
   afastamento, com as duas pontas marcadas. Nenhum outro objeto tem
   medida; todos os outros acentos são mancha ou linha.
   (Mesma ideia do glifo ic-atestado, que já existia.)

   ⚠️ O PESO é o que faz funcionar. A primeira versão usava 1,5px de
   traço e ponta de meio corpo, e some na miniatura — foi reprovada
   por isso, não pela ideia. Não afinar de novo.
   ============================================================ */
.sheet--atestado .sheet__periodo{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.5rem;margin:.5rem 0 1.1rem;
}
.sheet--atestado .sheet__periodo b{display:block;width:3px;height:1.5rem;background:var(--signal)}
.sheet--atestado .sheet__periodo i{display:block;height:3px;background:var(--signal)}
.mini.sheet--atestado .sheet__periodo{gap:.35rem;margin:.3rem 0 .7rem}
.mini.sheet--atestado .sheet__periodo b{width:2px;height:1rem}
.mini.sheet--atestado .sheet__periodo i{height:2px}

/* ============================================================
   FILEIRA DE CINCO DOCUMENTOS

   As páginas 3 e 5 pedem cinco itens em "o que ter em mãos". Em
   quatro colunas o quinto cai sozinho numa segunda linha; aqui a
   fileira vira cinco colunas iguais, e as folhas encolhem um pouco.
   ============================================================ */
.dochints--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:56rem){.dochints--5{grid-template-columns:repeat(2,minmax(0,14.5rem))}}

/* ============================================================
   DUAS FICHAS EM VEZ DE TRÊS

   Em /auxilio-doenca a copy não enumera três coisas: ela CONTRAPÕE
   duas — o laudo que descreve a doença e o laudo que descreve a
   limitação. Forçar uma terceira ficha seria inventar.
   ⚠️ É a primeira vez que uma das fichas mostra o acerto e não o
   defeito. Se a contraposição virar padrão, registrar aqui.
   ============================================================ */
@media(min-width:52rem){
  .docs--duas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   CAMPOS — três colunas sob um cabeçalho

   Para a seção "o que costuma estar por trás" quando a copy NÃO tem
   documento para mostrar. Nas páginas 2, 3 e 4 ela é a fileira de
   fichas, e as barras de cada ficha são o defeito do papel — o campo
   que faltou, a linha da perícia, a lacuna do CNIS. Em
   /auxilio-acidente não há documento nenhum: o que a copy traz são
   três afirmações sobre o benefício.

   Ficha sem barra seria a casca do componente, e o cartão com borda e
   sombra daria peso de OBJETO a um conteúdo que não é objeto. Aqui a
   estrutura vem de fio e campo, não de caixa: filete forte no
   cabeçalho e fios finos separando as colunas — a anatomia de um
   formulário, que é o conceito do site.

   Descartadas: ficha sem barras, régua bordô abrindo cada coluna (a
   marca mais silenciosa do sistema, três seguidas leem como enfeite)
   e tique abrindo cada coluna (bom sentido, mas repete a anatomia dos
   bullets da primeira dobra, que fica duas dobras acima).
   ============================================================ */
.campos{
  display:grid;gap:0;margin-top:clamp(2.4rem,5vw,3.4rem);
  border-top:2px solid rgba(20,25,26,.3);
}
.campos>div{padding:1.7rem 0 1.9rem}
.campos h3{
  font-family:var(--ui);font-size:.92rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .9rem;max-width:22ch;
}
.campos p{margin:0;font-size:var(--body-size);line-height:1.5;color:var(--ink);max-width:34ch}
@media(min-width:52rem){
  .campos{grid-template-columns:repeat(3,1fr)}
  .campos>div{padding:1.7rem 2rem 1.9rem 0}
  .campos>div+div{border-left:1px solid rgba(20,25,26,.2);padding-left:2.2rem}
}
@media(max-width:52rem){
  .campos>div+div{border-top:1px solid rgba(20,25,26,.2)}
  /* empilhados, a última coluna e o fecho somavam ~110px de vão */
  .campos>div:last-child{padding-bottom:.5rem}
}

/* ============================================================
   MENU DE CELULAR

   Em tela estreita a barra não cabe os links, e até aqui não havia
   navegação nenhuma — só o logo. Agora tem hambúrguer, e ele abre em
   TELA CHEIA sobre a SÁLVIA: é a superfície que o site usa para
   conteúdo técnico e material do escritório, e o menu é justamente
   um índice. Sobre ela o bordô aparece — na página em que a pessoa
   está e no botão — o que sobre o petróleo não aconteceria.
   ⚠️ Petróleo foi testado e reprovado. Papel não serve: a barra já é
   papel, e abrir o menu não mudaria de superfície.

   Dois grupos, e a diferença entre eles é o que os justifica:
   SITUAÇÕES leva a outras páginas, NESTA PÁGINA leva a âncoras da
   página atual — que são as mesmas que a copy define para os
   sitelinks do Google Ads. "Início" saiu: o logo no alto do menu já
   é esse link, e ele ficava esquisito entre os dois grupos.

   Abre e fecha com transição, e os itens entram em cascata. Fecha por
   Esc, por clique em qualquer link e pelo X. Enquanto está aberto a
   página não rola por trás.
   ============================================================ */
.nav__burger{
  margin-left:auto;display:none;background:none;border:0;cursor:pointer;
  width:2.9rem;height:2.9rem;padding:0;position:relative;color:var(--ink);
}
@media(max-width:62rem){
  .nav__burger{display:block}
  .nav__cta{display:none}
}
.nav__burger span{
  position:absolute;left:.6rem;right:.6rem;height:2px;background:currentColor;
  transition:transform .26s cubic-bezier(.22,.7,.3,1),opacity .18s ease;
}
.nav__burger span:nth-child(1){top:1.05rem}
.nav__burger span:nth-child(2){bottom:1.05rem}
[data-menu="on"] .nav__burger span:nth-child(1){transform:translateY(.37rem) rotate(45deg)}
[data-menu="on"] .nav__burger span:nth-child(2){transform:translateY(-.37rem) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:60;background:var(--mid);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-.9rem);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.7,.3,1);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1;transform:none}
/* o mesmo grão fino da primeira dobra, para o menu ter matéria */
.menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}
.menu__in{position:relative;z-index:1;padding-block:1.1rem 3rem;min-height:100%;
  display:flex;flex-direction:column}
.menu__topo{display:flex;align-items:center;min-height:4.6rem;margin-bottom:1.6rem}
.menu__topo .logo-svg{width:11rem;color:var(--ink)}
.menu__fechar{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink);
  width:2.9rem;height:2.9rem;padding:0;position:relative;
}
.menu__fechar span{position:absolute;left:.6rem;right:.6rem;top:50%;height:2px;background:currentColor}
.menu__fechar span:nth-child(1){transform:rotate(45deg)}
.menu__fechar span:nth-child(2){transform:rotate(-45deg)}

.menu__lbl{
  font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .3rem;
}
.menu__lista{list-style:none;margin:0;padding:0}
.menu__lista li{border-top:1px solid rgba(20,25,26,.22)}
.menu__lista li:last-child{border-bottom:0}
/* só o último grupo fecha com filete: dois filetes com um vão entre
   eles leem como acidente, não como separação de grupo */
.menu__lista--sec li:last-child{border-bottom:1px solid rgba(20,25,26,.22)}
.menu__lista a{
  display:block;padding:1.05rem 0;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:var(--display-weight);
  font-variation-settings:"wdth" var(--display-wdth),"wght" var(--display-weight);
  font-size:calc(1.35rem * var(--dscale,1));line-height:1.22;letter-spacing:-.014em;
}
.menu__lista a[aria-current]{color:var(--signal)}
.menu__in>div+div{margin-top:2.2rem}
.menu__lista--sec{margin-top:0}
/* ⚠️ Os dois grupos são links de navegação: MESMO corpo. Cheguei a
   deixar o segundo menor "por hierarquia" e foi reprovado — o que
   distingue os grupos é o rótulo, não o tamanho da fonte. Vale a
   regra geral da escala: papel igual, corpo igual. */
.menu__cta{margin-top:auto;padding-top:2.6rem}
.menu__cta .btn{width:100%;justify-content:center;min-height:3.6rem}
/* o botão primário nasce em tinta; sobre a sálvia ele é bordô, que é
   o mesmo par do card de triagem e da faixa de fechamento */
.menu .btn--primary{background:var(--signal);color:var(--on-signal)}
.menu .btn--primary:hover{background:var(--deep);color:var(--on-deep)}

/* entrada em cascata dos blocos do menu */
.menu__in>*{opacity:0;transform:translateY(10px)}
.menu.is-open .menu__in>*{
  opacity:1;transform:none;
  transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.3,1);
}
.menu.is-open .menu__in>*:nth-child(2){transition-delay:.06s}
.menu.is-open .menu__in>*:nth-child(3){transition-delay:.12s}
.menu.is-open .menu__in>*:nth-child(4){transition-delay:.18s}
.menu.is-open .menu__in>*:nth-child(5){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .menu,.menu__in>*,.nav__burger span{transition:none!important}
  .menu__in>*{opacity:1!important;transform:none!important}
}

/* ============================================================
   ACERTOS DE CELULAR

   Achados numa passada pelas cinco páginas em 390px. O que é bug de
   verdade foi corrigido junto ao componente; aqui ficam os ajustes
   que só valem em tela estreita.
   ============================================================ */
@media(max-width:56rem){
  /* os três passos ficam em coluna e as cantoneiras de um encostavam
     nas do seguinte — em três colunas isso não acontecia */
  .steps{gap:1.6rem}

  /* o número do benefício caía para 8,5px na miniatura de duas
     colunas: ilegível. Com o campo mais justo e corpo fixo ele
     recupera o mínimo. ⚠️ Não dá para crescer mais: são treze
     caracteres numa folha de 135px. */
  .mini.sheet--numero .sheet__num{padding:.45rem .28rem;border-width:1.4px}
  .mini.sheet--numero .sheet__num b{font-size:.68rem}

  /* o leque abria demais para a coluna estreita e as folhas de trás
     saíam da célula, quebrando o alinhamento da fileira */
  .conj__tras{transform:rotate(-3.5deg) translate(-3px,-2px)}
  .conj__tras--2{transform:rotate(3deg) translate(4px,-3px)}
  .dochints .conj__clipe{width:1.4rem;top:-.75rem}
}

@media(max-width:52rem){
  /* alvo de toque: os links do rodapé tinham 17px de altura. O vão da
     lista encolhe na mesma medida para o ritmo não mudar. */
  .foot ul{gap:.15rem}
  .foot ul a{display:inline-block;padding-block:.55rem}
}

/* ============================================================
   ENTRADAS — o gesto padrão

   Um gesto só no site inteiro: sobe 14px e aparece, disparado pelo
   IntersectionObserver quando a seção chega na tela — nunca no load.
   (Erro já registrado: a animação acontecia com a pessoa ainda na
   primeira dobra e já tinha terminado quando ela rolava até lá.)

   Fichas, caminhos, passos e FAQ trazem o gesto escrito dentro do
   próprio componente, porque nasceram antes disto. Bloco novo usa
   daqui:

     .rv               no elemento que carrega data-reveal
     [data-stagger]    no contêiner: os filhos diretos entram em cascata
     .rv--d1 / --d2    atraso, quando os irmãos têm observadores próprios

   ⚠️ Título não anima. Em nenhuma seção do site o H2 entra — o que
   entra é o conteúdo abaixo dele. Manter assim.
   ============================================================ */
/* ⚠️ O gesto é ANIMAÇÃO, não transição, e isso é de propósito.
   Com `transition` a regra do utilitário sobrescreve a transição
   própria do componente — o card de Situações e o botão do
   fechamento perdiam a suavidade do hover, porque a lista de
   propriedades do utilitário não tem background nem box-shadow.
   Com `animation ... backwards` nada é sobrescrito: antes de entrar
   vale o keyframe, depois de entrar valem os estilos do componente. */
.rv,[data-stagger]>*{opacity:0}
.rv.is-in,[data-stagger].is-in>*{
  opacity:1;animation:rv .6s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes rv{from{opacity:0;transform:translateY(14px)}}
.rv--d1{animation-delay:.1s}
.rv--d2{animation-delay:.2s}
[data-stagger].is-in>*:nth-child(2){animation-delay:.09s}
[data-stagger].is-in>*:nth-child(3){animation-delay:.18s}
[data-stagger].is-in>*:nth-child(4){animation-delay:.27s}
[data-stagger].is-in>*:nth-child(5){animation-delay:.36s}
[data-stagger].is-in>*:nth-child(6){animation-delay:.45s}
[data-stagger].is-in>*:nth-child(7){animation-delay:.54s}
[data-stagger].is-in>*:nth-child(8){animation-delay:.63s}
@media(prefers-reduced-motion:reduce){
  .rv,[data-stagger]>*{opacity:1!important;animation:none!important}
}

/* ============================================================
   PÁGINA DE DOCUMENTO — política de privacidade

   A única página do site que é texto corrido do começo ao fim. Não
   ganhou o vaivém de faixas das outras: em documento jurídico, faixa
   nova lê como assunto novo, e aqui os assuntos são os H2. O ritmo
   vem da RÉGUA acima de cada H2 e do respiro antes dela — é a mesma
   marcação de quem separa um documento em blocos com a régua na mão.

   Medida de 52rem (.wrap--narrow), não as 74rem do site. Texto
   corrido longo em linha larga não se lê: o olho perde a volta.

   ⚠️ O bloco chama-se `.pol`, e não `.doc`, por um motivo: `.doc` JÁ
   EXISTE neste arquivo (linha ~344), é o cartão de documento da home,
   e traz `.doc p{max-width:32ch}`. Batizada de `.doc`, esta página
   nasceu com todo parágrafo em 32 caracteres e as listas em 60 — o
   texto ficava mais estreito que a lista logo abaixo dele. Antes de
   criar classe nova aqui, procurar o nome no arquivo.
   ============================================================ */
/* A medida da página inteira — abertura, resumo e corpo na MESMA
   coluna, para que a régua de cada H2, a caixa do resumo e a linha do
   texto tenham a mesma borda esquerda e a mesma borda direita. Com
   .wrap--narrow (52rem) a régua sobrava 240px à direita do texto, que
   parava nos 60ch: lia como desalinhamento, e era. 38,5rem ≈ 60
   caracteres, então a coluna é a medida. */
.pol-wrap{width:min(100% - 2.6rem,38.5rem);margin-inline:auto}
.pol p,.pol ul,.pol__resumo ul{max-width:none}

.pol__abre{padding-block:clamp(3.4rem,6.5vw,5.6rem) clamp(2.6rem,5vw,4rem)}
.pol__abre .lead{margin-top:1.6rem}
.pol__data{font-family:var(--ui);font-size:var(--t-meta);color:var(--muted);margin:2rem 0 0}

/* o resumo — primeira camada da política em camadas que a ANPD
   recomenda: quem lê só esta caixa já sabe o essencial */
.pol__resumo{
  background:var(--card);padding:clamp(1.8rem,4vw,2.8rem);
  border-left:3px solid var(--signal);
}
.pol__resumo h2{font-size:calc(clamp(1.5rem,2.4vw,1.9rem) * var(--dscale,1));margin-bottom:1.5rem}
.pol__resumo ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:64ch}
.pol__resumo li{padding-left:1.5rem;position:relative}
.pol__resumo li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.6rem;height:.6rem;background:var(--signal);
}

.pol>h2{
  margin-top:clamp(3rem,6vw,4.6rem);padding-top:clamp(2.2rem,4vw,3rem);
  border-top:1px solid var(--line);max-width:none;
  font-size:calc(clamp(1.5rem,2.6vw,2rem) * var(--dscale,1));
}
.pol>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.pol>h2+p,.pol>h2+ul,.pol>h2+div{margin-top:1.4rem}
.pol>h3{margin:2.4rem 0 .8rem;color:var(--ink)}
.pol ul{margin:0 0 1.1em;padding-left:1.15rem;max-width:60ch;display:grid;gap:.6rem}
.pol li::marker{color:var(--signal)}
.pol a{color:var(--ink);text-underline-offset:3px}

/* o bloco dos direitos, na faixa escura. A régua e o marcador têm de
   trocar de cor: o bordô --signal sobre o petróleo fica ilegível, e
   quem cobre esse papel no escuro é o --neg, que já existe. */
.pol--deep>h2{border-color:var(--line-deep);color:var(--on-deep)}
.pol--deep>h2:first-child{border-top:0}
.pol--deep li{color:var(--on-deep-muted)}
.pol--deep li::marker{color:var(--neg)}
.pol--deep strong{color:var(--on-deep)}
.pol--deep a{color:var(--on-deep)}
/* o e-mail: é o canal para exercer os direitos, e é a única coisa
   desta página que alguém precisa COPIAR. Tratado como dado, não
   como frase. */
.pol__canal{
  font-family:var(--ui);font-weight:600;
  font-size:calc(clamp(1.05rem,2vw,1.25rem) * var(--dscale,1));
  color:var(--on-deep);margin:1.6rem 0 2rem;
  padding:1.1rem 1.4rem;border:1px solid var(--line-deep);
  overflow-wrap:anywhere;
}
.pol__acao{margin-top:1.5rem}
.pol__nota{font-size:var(--t-meta)}

/* ============================================================
   AVISO DE COOKIES

   A LGPD não exige banner: exige CONSENTIMENTO para cookie não
   necessário, e o banner é só o jeito de coletar. Do Guia Orientativo
   da ANPD saem as regras que este componente obedece:

   · “Aceitar” e “Recusar” na PRIMEIRA camada e com o MESMO peso — daí
     os dois serem btn--ghost idênticos. Aceitar escuro e recusar
     apagado é o dark pattern que o guia nomeia; aqui não cabe, ainda
     mais em site de escritório de advocacia.
   · Não é muro: não escurece a página, não trava a rolagem, não
     bloqueia conteúdo nenhum. Dá para ler o site inteiro ignorando.
   · Nada dispara antes do aceite — quem cuida disso é o site.js.
   ============================================================ */
.ck{
  position:fixed;inset:auto 0 0 0;z-index:60;
  background:var(--paper);border-top:2px solid var(--ink);
  box-shadow:0 -14px 44px rgba(20,25,26,.14);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.ck.is-in{transform:none}
.ck__in{display:grid;gap:1.4rem;padding-block:1.5rem}
.ck p{margin:0;font-size:.95rem;line-height:1.55;color:var(--muted);max-width:64ch}
.ck strong{color:var(--ink);font-weight:600}
.ck__acoes{display:flex;gap:.7rem}
/* os dois botões com a MESMA largura: a paridade é a regra, e ela
   tem de aparecer também para quem não lê o texto */
.ck__acoes .btn{flex:1 1 0;justify-content:center;min-height:3.1rem;padding-inline:1.1rem}
@media(min-width:52rem){
  .ck__in{grid-template-columns:1fr auto;align-items:center;gap:2.6rem}
  .ck__acoes{flex:0 0 auto}
  .ck__acoes .btn{flex:0 0 auto;min-width:10rem}
}
@media(prefers-reduced-motion:reduce){
  .ck{transition:none}
}

/* ============================================================
   PENDÊNCIAS
   ============================================================ */
.pend{position:relative}
[data-pend="on"] .pend{outline:2px dashed #E4572E;outline-offset:6px}
[data-pend="on"] .pend::after{
  content:attr(data-pend);position:absolute;top:-.65rem;left:0;transform:translateY(-100%);
  background:#E4572E;color:#fff;font-family:var(--ui);font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.28rem .5rem;white-space:nowrap;z-index:20;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .mk{background-size:100% 100%;color:var(--on-signal)}
}