/* ==========================================================================
   RENAN BARRETO ADVOGADOS ASSOCIADOS
   Landing page · isenção de Imposto de Renda por doença grave
   --------------------------------------------------------------------------
   O sistema é o MESMO do site institucional — mesmos tokens, mesma família
   tipográfica, mesmo tratamento de foto — e isso é a decisão de projeto mais
   importante do arquivo. São duas peças do mesmo escritório: se a landing
   parecer de outra casa, ela não empresta autoridade nenhuma ao que afirma.

   01 tokens        05 hero           09 alcance / mapa
   02 primitivos    06 a lei          10 escritório
   03 atmosfera     07 listas         11 quem assina
   04 cabeçalho     08 faixa/citação  12 faq / cta / rodapé / responsivo
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root{
  --bg-0:#07090B;  --bg-1:#0D1115;  --bg-2:#151A1F;
  --surf-1:#11161B; --surf-2:#1A2026;
  --ink:#F4F5F6;   --ink-mut:#B7BFC7; --ink-dim:#828D99;
  --linha:rgba(244,245,246,.105);
  --linha-2:rgba(244,245,246,.175);
  --linha-3:rgba(244,245,246,.30);
  --acc:#4DA9F7;   --acc-ice:#8FE0FF; --acc-deep:#1E4E78;
  --acc-lav:rgba(77,169,247,.10);
  --wa:#25D366;

  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --brand:'Jost','Futura','Century Gothic',var(--sans);

  --wrap:1280px;
  --pad:clamp(20px,5vw,52px);
  --cab-h:82px;

  --s1:8px; --s2:16px; --s3:26px; --s4:38px; --s5:56px; --s6:82px;
  --sec-y:clamp(88px,11vw,160px);

  --r-sm:10px; --r:16px; --r-lg:22px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cab-h) + 20px)}

body{
  margin:0;position:relative;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* nebulosas ancoradas na altura do documento: percentuais resolvem contra a
     caixa do body, então elas passam pelo scroll sem JS e sem DOM extra */
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1150px 800px at 84% 1%,  rgba(44,104,158,.38), transparent 60%),
    radial-gradient(900px 700px  at 2% 15%,  rgba(28,68,108,.28),  transparent 58%),
    radial-gradient(1000px 820px at 98% 34%, rgba(38,92,140,.24),  transparent 60%),
    radial-gradient(950px 760px  at 0% 52%,  rgba(28,68,108,.22),  transparent 58%),
    radial-gradient(1050px 800px at 96% 70%, rgba(38,92,140,.22),  transparent 60%),
    radial-gradient(1250px 820px at 54% 99%, rgba(54,118,172,.32), transparent 62%);
  background-repeat:no-repeat;
}
body.travado{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
::selection{background:var(--acc);color:#04070A}

.pular{
  position:fixed;top:10px;left:10px;z-index:9999;padding:10px 16px;
  background:var(--acc);color:#04070A;border-radius:8px;font-size:13px;font-weight:600;
  transform:translateY(-160%);transition:transform .25s var(--ease);
}
.pular:focus{transform:none}
:focus-visible{outline:2px solid var(--acc-ice);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   02 · PRIMITIVOS
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.micro{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.45;color:var(--ink-dim);font-variant-numeric:tabular-nums;
}
.olho{
  display:inline-flex;align-items:flex-start;gap:11px;
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mut);font-variant-numeric:tabular-nums;margin-bottom:var(--s3);
}
.olho__ponto{
  width:6px;height:6px;border-radius:50%;background:var(--acc);flex:0 0 auto;margin-top:.42em;
  box-shadow:0 0 0 4px var(--acc-lav);animation:pulsa 3.4s var(--ease) infinite;
}
.olho__n{color:var(--acc);font-weight:600;padding-right:11px;
  border-right:1px solid var(--linha-2);align-self:stretch}
@keyframes pulsa{0%,100%{box-shadow:0 0 0 3px var(--acc-lav)}50%{box-shadow:0 0 0 7px rgba(77,169,247,.04)}}

.dotp{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--acc-ice);
  margin-right:9px;flex:0 0 auto;margin-top:.55em;box-shadow:0 0 8px rgba(77,169,247,.28)}

.btn{
  --bh:54px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding:0 28px;border-radius:calc(var(--bh)/2);
  font-size:14.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  transition:transform .45s var(--ease),background .3s,border-color .35s,box-shadow .45s;
  overflow:hidden;isolation:isolate;
}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn--p{background:linear-gradient(180deg,#FBFCFC,#DCE2E8);color:#06090C;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -12px rgba(0,0,0,.9)}
.btn--p:hover{box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 42px -14px rgba(77,169,247,.45)}
.btn--f{border:1px solid var(--linha-2);color:var(--ink);background:rgba(255,255,255,.014);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--f:hover{border-color:rgba(143,224,255,.34);background:rgba(255,255,255,.03)}
.btn--w{background:var(--wa);color:#04120A;box-shadow:0 12px 32px -14px rgba(37,211,102,.55)}
.btn--w svg{width:19px;height:19px}
.btn--w:hover{background:#2AE474}
.btn--w:hover svg{transform:none}
.btn--sm{--bh:44px;padding:0 22px;font-size:13.5px}
.btn--g{--bh:60px;padding:0 34px;font-size:15.5px}
.btn--bloco{width:100%}
/* brilho que atravessa */
.btn--p::before,.btn--w::before{
  content:'';position:absolute;top:0;bottom:0;width:42%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-160%) skewX(-14deg);transition:transform .85s var(--ease);
}
.btn--p:hover::before,.btn--w:hover::before{transform:translateX(320%) skewX(-14deg)}
.btn--p > *,.btn--w > *{position:relative;z-index:2}

.link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:var(--acc);
  padding-bottom:3px;border-bottom:1px solid rgba(77,169,247,.28);
  transition:border-color .3s,color .3s,gap .35s var(--ease);
}
.link svg{width:14px;height:14px}
.link:hover{color:var(--acc-ice);border-color:var(--acc-ice);gap:15px}

.sec{position:relative;padding:var(--sec-y) 0}
.sh{max-width:790px;margin-bottom:clamp(44px,6vw,80px)}
.sh__h{font-size:clamp(30px,4.3vw,55px);line-height:1.04;letter-spacing:-.036em;
  font-weight:600;text-wrap:balance}
.sh__h--md{font-size:clamp(26px,3.3vw,41px);line-height:1.08}
.sh__p{margin-top:var(--s3);max-width:62ch;font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.72;color:var(--ink-mut)}
.lead{font-family:var(--serif);font-weight:300;
  font-size:clamp(18px,2vw,25px);line-height:1.5;letter-spacing:-.014em;color:var(--ink)}

.tom-a{background:linear-gradient(180deg,rgba(14,19,25,.86),rgba(11,15,20,.78))}
.tom-b{background:linear-gradient(180deg,rgba(7,9,11,.34),rgba(7,9,11,.66))}
.tom-c{background:linear-gradient(180deg,rgba(17,23,30,.9),rgba(12,17,22,.82))}

.aviso{
  display:flex;align-items:flex-start;margin-top:clamp(24px,3vw,34px);
  padding:16px 20px;border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(77,169,247,.045);
  font-size:13.5px;line-height:1.72;color:var(--ink-mut);max-width:92ch;
}

/* ==========================================================================
   03 · ATMOSFERA
   ========================================================================== */
/* A LOGO COMO MARCA D'ÁGUA.
   Em VETOR e GRANDE, sangrando para fora da seção — não um bitmap pequeno e
   opaco no canto. Logo de fundo em bitmap a 5% vira adesivo chapado; em vetor,
   a 4,5% e com dois terços da altura da seção, ela lê como marca em relevo no
   papel. Cada anel se desenha quando a seção entra, no mesmo gesto da
   abertura — a marca d'água não é decoração parada, é a assinatura sendo
   repetida baixinho.
   A seção precisa de overflow:hidden, senão o sangramento vira barra de
   rolagem horizontal. */
.sec--selo{overflow:hidden}
.sec--selo > .wrap{position:relative;z-index:1}
.selo{
  position:absolute;top:50%;z-index:0;pointer-events:none;
  width:min(46rem,72vw);aspect-ratio:1;color:var(--ink);opacity:.045;
  transform:translateY(-50%);
}
.selo__svg{width:100%;height:100%;overflow:visible}
.selo--dir{right:-14%}
.selo--esq{left:-16%}
@media (min-width:1600px){ .selo--dir{right:-6%} .selo--esq{left:-8%} }
.selo .em-ring,.selo .em-ring2,.selo .em-arc{
  stroke-dasharray:100;stroke-dashoffset:100}
.selo .em-mono path{stroke-dasharray:100;stroke-dashoffset:100}
.sec--selo.dentro .selo .em-ring{animation:selo-traca 3.4s var(--ease) .2s forwards}
.sec--selo.dentro .selo .em-ring2{animation:selo-traca 3.4s var(--ease) .7s forwards}
.sec--selo.dentro .selo .em-arc{animation:selo-traca 2.6s var(--ease) 1.3s forwards}
.sec--selo.dentro .selo .em-mono path{animation:selo-traca 2.8s var(--ease) 1.6s forwards}
@keyframes selo-traca{to{stroke-dashoffset:0}}
.malha{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(244,245,246,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(244,245,246,.026) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(120% 88% at 62% 8%,#000 22%,transparent 76%);
          mask-image:radial-gradient(120% 88% at 62% 8%,#000 22%,transparent 76%);
}
.malha--suave{opacity:.6}
.grao{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  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='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:900;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc),var(--acc-ice));
  box-shadow:0 0 14px rgba(77,169,247,.5)}

/* ==========================================================================
   04 · ABERTURA E CABEÇALHO
   ========================================================================== */
.abre{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:var(--bg-0);transition:transform 1s var(--ease),opacity .6s .35s;
}
.abre.sai{transform:translateY(-101%);opacity:0}
.abre__in{display:flex;flex-direction:column;align-items:center;gap:26px}
.abre .emb{width:auto;height:clamp(86px,13vw,118px);color:var(--ink);overflow:visible}
.abre__nome{
  font-family:var(--brand);font-size:clamp(14px,2.7vw,19px);font-weight:300;
  letter-spacing:.42em;color:var(--ink);white-space:nowrap;
  clip-path:inset(0 100% 0 0);animation:limpa 1.05s var(--ease) 1.62s forwards;
}
.abre__sub{
  margin-top:-14px;
  font-size:clamp(8.5px,1.35vw,10px);font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--acc-ice);white-space:nowrap;
  opacity:0;transform:translateY(9px);animation:sobe .62s var(--ease) 2.34s forwards;
}
@keyframes limpa{to{clip-path:inset(0 0 0 0)}}
@keyframes sobe{to{opacity:1;transform:none}}
/* o emblema se desenha */
.abre .em-ring,.abre .em-ring2{stroke-dasharray:100;stroke-dashoffset:100;
  animation:traca 1.5s var(--ease) .15s forwards}
.abre .em-ring2{animation-delay:.5s}
.abre .em-arc{stroke-dasharray:100;stroke-dashoffset:100;
  animation:traca 1.2s var(--ease) .85s forwards}
.abre .em-mono path{stroke-dasharray:100;stroke-dashoffset:100;
  animation:traca 1.1s var(--ease) 1.05s forwards}
.abre .em-tick{opacity:0;animation:pisca .5s var(--ease) forwards;
  animation-delay:calc(.5s + var(--i) * .016s)}
.abre .em-dot,.abre .em-mdot{opacity:0;animation:pisca .5s var(--ease) 1.95s forwards}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes pisca{to{opacity:1}}

.cab{position:fixed;inset:0 0 auto;z-index:880;
  background:rgba(7,9,11,.55);transition:background .5s;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .5s,transform .5s var(--ease)}
.cab.fixo{border-bottom-color:var(--linha);background:rgba(7,9,11,.9)}
.cab.recolhe{transform:translateY(-100%)}
.cab__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--cab-h);display:flex;align-items:center;gap:22px;
  transition:height .5s var(--ease)}
.cab.fixo .cab__in{height:66px}

.marca{display:inline-flex;align-items:center;gap:15px;flex:0 0 auto;color:var(--ink)}
.marca .emb{width:auto;height:40px;overflow:visible;transition:height .5s var(--ease)}
.cab.fixo .marca .emb{height:34px}
.marca__barra{width:1px;height:32px;background:var(--linha-3);flex:0 0 auto}
.marca__txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.marca__nome{font-family:var(--brand);font-size:15.5px;font-weight:400;letter-spacing:.29em;
  line-height:1;white-space:nowrap;transition:font-size .5s var(--ease)}
.cab.fixo .marca__nome{font-size:14px}
.marca__sub{font-size:8.6px;font-weight:600;letter-spacing:.205em;text-transform:uppercase;
  line-height:1;white-space:nowrap;color:var(--ink-dim)}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{position:relative;padding:10px 13px;border-radius:9px;
  font-size:13.5px;font-weight:500;color:var(--ink-mut);transition:color .32s}
.nav a::after{content:'';position:absolute;left:13px;right:13px;bottom:5px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.aqui{color:var(--ink)}
.nav a.aqui::after{transform:scaleX(1);background:var(--acc-ice)}

.hamb{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex:0 0 auto}
.hamb span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);
  border-radius:2px;transition:transform .45s var(--ease),opacity .3s}
.hamb span:nth-child(1){top:19px}
.hamb span:nth-child(2){top:25px}
.hamb.aberto span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.hamb.aberto span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:870;background:rgba(7,9,11,.97);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  padding:calc(var(--cab-h) + 26px) var(--pad) 42px;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  opacity:0;transition:opacity .42s var(--ease)}
.menu[hidden]{display:none}
.menu.aberto{opacity:1}
/* min-height:0 não é enfeite: item de flex nasce com min-height:auto e não
   encolhe abaixo do conteúdo — sem isso o overflow-y nunca entra em ação e os
   últimos links vazam por baixo da tela, sem barra e sem aviso */
.menu__nav{display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  overscroll-behavior:contain}
.menu__nav a{display:flex;align-items:baseline;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--linha);
  font-size:clamp(18px,5vw,26px);font-weight:600;letter-spacing:-.028em;
  opacity:0;transform:translateY(14px)}
.menu.aberto .menu__nav a{animation:entra .58s var(--ease) forwards}
.menu__nav a i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;
  color:var(--acc);font-variant-numeric:tabular-nums}
@keyframes entra{to{opacity:1;transform:none}}
.menu__nav a:nth-child(1){animation-delay:.05s} .menu__nav a:nth-child(2){animation-delay:.09s}
.menu__nav a:nth-child(3){animation-delay:.13s} .menu__nav a:nth-child(4){animation-delay:.17s}
.menu__nav a:nth-child(5){animation-delay:.21s} .menu__nav a:nth-child(6){animation-delay:.25s}
.menu__nav a:nth-child(7){animation-delay:.29s} .menu__nav a:nth-child(8){animation-delay:.33s}
.menu__nav a:nth-child(9){animation-delay:.37s} .menu__nav a:nth-child(10){animation-delay:.41s}
.menu__nav a:nth-child(11){animation-delay:.45s}
.menu__pe{display:flex;flex-direction:column;gap:16px;align-items:center;flex:0 0 auto}
.menu__ig{font-size:13px;letter-spacing:.1em;color:var(--ink-dim)}
@media (max-height:790px){
  .menu{gap:20px;padding-top:calc(var(--cab-h) + 12px);padding-bottom:26px}
  .menu__nav a{padding:10px 0;font-size:clamp(16px,4.4vw,20px)}
}

/* ==========================================================================
   SISTEMA DE IMAGENS — uma linguagem só para toda foto da página
   ==========================================================================
   O recorte de revelação vai no <picture>, NUNCA na própria .ret.
   clip-path no elemento OBSERVADO zera o retângulo de interseção que o
   IntersectionObserver calcula no Chromium: a razão nunca alcança o limiar,
   o observador não dispara, o clip não abre — e a animação tranca a si mesma,
   deixando a foto invisível para sempre, sem um único erro no console. */
.ret{position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--linha-2);background:var(--surf-1);
  box-shadow:0 40px 100px -46px rgba(0,0,0,.95)}
/* O <picture> PRECISA PREENCHER A FIGURA.
   `.ret img{height:100%}` só funciona se o PAI do img tiver altura — e o
   <picture> não tem: ele se dimensiona pela proporção natural da imagem.
   Quando a figura pede uma proporção diferente da imagem (no celular a faixa
   vira 3:2 e a foto é 16:9), o picture fica MENOR que a figura e sobra caixa
   vazia embaixo. Foi essa a "barra" no pé da primeira foto do escritório:
   350x233 de figura contra 348x196 de picture — 38 px de nada.
   Com width/height 100% no picture, o object-fit:cover finalmente tem o que
   cobrir. Vale para toda foto do site, não só para essa. */
.ret picture{display:block;width:100%;height:100%}
.ret img{width:100%;height:100%;object-fit:cover}
/* O DEGRADÊ DE RODAPÉ VALE PARA RETRATO, NÃO PARA LADRILHO — ver a nota
   equivalente no site institucional. No retrato ele assenta o sujeito na base
   do quadro; num ladrilho de galeria sem texto por cima ele só come 30% da
   imagem e lê como faixa cinza colada no pé. */
.ret::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,9,11,.88),rgba(7,9,11,.12) 38%,transparent 58%),
             linear-gradient(115deg,rgba(30,78,120,.13),transparent 54%)}
.esp__t::after,.esp__faixa::after{
  background:linear-gradient(to top,rgba(7,9,11,.20),transparent 16%),
             linear-gradient(115deg,rgba(30,78,120,.13),transparent 54%)}
.ret figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;max-width:26ch}
.ret figcaption .micro{color:var(--acc-ice)}
.ret__c{position:absolute;z-index:3;width:13px;height:13px;border-color:var(--acc-ice);
  opacity:.42;pointer-events:none}
.ret__c--no{top:13px;left:13px;border-top:1px solid;border-left:1px solid}
.ret__c--se{bottom:13px;right:13px;border-bottom:1px solid;border-right:1px solid}

.ret.reveal > picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.ret.reveal.dentro > picture{clip-path:inset(0 0 0 0)}
.ret.reveal > :not(picture),.ret.reveal::after{
  opacity:0;transition:opacity .8s var(--ease) .38s}
.ret.reveal.dentro > :not(picture),.ret.reveal.dentro::after{opacity:1}

/* placa de identificação sobre a foto.
   `.ret figcaption` tem especificidade (0,1,1) e fixa left/right/bottom/max-width;
   uma classe sozinha (0,1,0) perde dela — daí o seletor descendente. */
.ret .placa{
  left:0;right:0;bottom:0;max-width:none;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:17px clamp(17px,1.9vw,23px);
  background:linear-gradient(100deg,rgba(7,9,11,.92),rgba(7,9,11,.44));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-top:1px solid var(--linha-2);
}
.placa__id strong{display:block;font-family:var(--brand);font-weight:400;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:.012em;line-height:1.18;color:var(--ink)}
.placa__id .micro{margin-top:7px}
.placa__ufs{display:flex;gap:5px;flex:0 0 auto}
.placa__ufs i{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;
  border:1px solid var(--linha-2);background:rgba(7,9,11,.55);
  font-family:var(--brand);font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.05em;color:var(--ink-mut)}

/* ==========================================================================
   05 · HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--cab-h) + clamp(30px,5vw,64px));
  padding-bottom:clamp(46px,6vw,84px);overflow:hidden}
.hero__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(34px,5vw,78px);align-items:center}
/* O VOCATIVO — a quem a página fala, antes de tudo.
   Pedido do cliente, e ele tem razão: o direito do art. 6º, XIV é de quem
   recebe aposentadoria, pensão ou reforma. Quem está na ativa não entra, e a
   página inteira só faz sentido para esse leitor. A informação existia — em
   10,5 px, no pé do hero, DEPOIS dos botões. Chegava tarde.
   Aqui ela é a primeira linha, em caixa alta, e o título completa a frase:
   APOSENTADO E PENSIONISTA / você pode estar pagando um imposto que não
   precisa pagar. O azul é o mesmo do fecho do título, para amarrar os dois. */
.hero__voc{
  font-size:clamp(16px,1.62vw,21px);font-weight:600;letter-spacing:.155em;
  text-transform:uppercase;line-height:1.25;color:var(--acc-ice);
  margin-bottom:clamp(11px,1.2vw,16px);text-wrap:balance;
}
/* No celular o piso de 16 px vale mais que o espacejamento: o leitor desta
   página tem 60, 70 anos. Abaixo de 380 px a entrelinha de .155em faria
   "APOSENTADO E PENSIONISTA" quebrar em duas — então ela cede, não o corpo. */
@media (max-width:380px){ .hero__voc{letter-spacing:.115em} }
/* o olho e o vocativo são um bloco só: o respiro grande fica entre eles e o
   título, não entre os dois */
.hero__txt .olho{margin-bottom:clamp(12px,1.3vw,17px)}

.hero__h1{font-size:clamp(33px,5.1vw,66px);line-height:1.03;letter-spacing:-.042em;
  font-weight:600;margin-top:0}
.hero__h1 .hl{color:var(--acc-ice)}
.hero__sub{margin-top:clamp(20px,2.4vw,30px);max-width:54ch;
  font-size:clamp(15.5px,1.35vw,18.5px);line-height:1.72;color:var(--ink-mut)}
.hero__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3.2vw,40px)}
.hero__pe{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,34px);
  margin-top:clamp(28px,3.6vw,44px);padding-top:var(--s3);
  border-top:1px solid var(--linha-2)}
.hero__pe dt{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ice);margin-bottom:7px}
.hero__pe dd{font-size:14px;line-height:1.4;color:var(--ink);letter-spacing:-.008em}
.hero__slogan{
  margin-top:clamp(20px,2.4vw,28px);padding-left:clamp(14px,1.6vw,20px);
  border-left:1px solid var(--acc);max-width:44ch;
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(16.5px,1.75vw,22px);line-height:1.44;letter-spacing:-.012em;
  color:var(--acc-ice);
}

/* ---------- O DIAGRAMA DAS TRÊS CONDIÇÕES ----------
   Substituiu o retrato. Não é ilustração: é a tese da página desenhada —
   a isenção mora só onde as três condições se cruzam, e dois de três não
   vale. A linguagem de anéis finos vem do emblema do escritório. */
.dia{position:relative;width:100%;max-width:min(34rem,100%);margin-inline:auto;
  color:var(--ink)}
.dia__svg{width:100%;height:auto;overflow:visible}
/* AURÉOLA NOS RÓTULOS.
   As regiões exclusivas de cada círculo têm ~90 px de largura e os rótulos
   têm mais: a linha do círculo vizinho passava por dentro do texto. Em vez de
   encolher a palavra ou empurrá-la para fora do desenho, o texto ganha um
   contorno da cor do fundo desenhado ANTES do preenchimento — a linha passa
   por trás da letra. É o mesmo truque que mapa usa para nome de cidade em
   cima de estrada. */
.dia__svg text{font-family:var(--sans);
  paint-order:stroke fill;stroke:#080B0F;stroke-width:5px;stroke-linejoin:round}
/* SELETOR DESCENDENTE, NÃO CLASSE SOLTA. `.dia__svg text` é (0,1,1) e
   vence `.dia__c` (0,1,0): o texto do núcleo herdava a auréola e ficava
   dentro de uma caixa preta em cima do azul. Ele não precisa de auréola —
   o próprio núcleo já é o fundo dele. */
.dia__svg .dia__c,.dia__svg .dia__cd{stroke:none;stroke-width:0}

/* o bezel gira sempre, devagar demais para distrair e rápido o bastante para
   o desenho nunca parecer uma figura parada */
.dia__bezel{color:var(--ink-mut);opacity:0;transform-origin:220px 200px;transform-box:view-box}
.dia.dentro .dia__bezel{animation:pisca 1.4s var(--ease) .1s forwards}
.dia__marcas{transform-origin:220px 200px;transform-box:view-box;
  animation:girar 150s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

.dia__halo{opacity:0;transform-origin:220px 205px;transform-box:view-box;transform:scale(.5)}
.dia.dentro .dia__halo{animation:dia-halo 1.6s var(--ease) 1.6s forwards}
@keyframes dia-halo{to{opacity:1;transform:none}}

.dia__anel{opacity:0;stroke-dasharray:100;stroke-dashoffset:100;
  color:var(--ink-mut)}
/* O hero não pode levar sete segundos para assentar. Os três anéis fecham em
   2,0 s e o núcleo em 2,4 s — o suficiente para a construção ser lida como
   construção, sem fazer a primeira tela esperar. */
.dia.dentro .dia__anel{
  opacity:.5;
  animation:dia-traca 1.4s var(--ease) forwards;
  animation-delay:calc(.15s + var(--i) * .25s);
}
@keyframes dia-traca{to{stroke-dashoffset:0}}

.dia__par{opacity:0}
.dia.dentro .dia__par{animation:pisca 1s var(--ease) 1.3s forwards}
.dia__nucleo{opacity:0;transform-origin:220px 205px;transform-box:view-box;transform:scale(.72)}
.dia.dentro .dia__nucleo{
  animation:dia-nucleo 1.1s cubic-bezier(.2,1.3,.4,1) 1.7s forwards,
            dia-respira 7s var(--ease) 3.2s infinite;
}
@keyframes dia-nucleo{to{opacity:1;transform:none}}
@keyframes dia-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.dia__txt{opacity:0}
.dia.dentro .dia__txt{animation:pisca .9s var(--ease) 1.45s forwards}
.dia__centro{opacity:0}
.dia.dentro .dia__centro{animation:pisca .9s var(--ease) 2.1s forwards}

.dia__k{font-size:11px;font-weight:600;letter-spacing:.17em;fill:var(--ink)}
.dia__d{font-size:10.5px;letter-spacing:.015em;fill:var(--ink-dim)}
.dia__c{font-family:var(--brand);font-size:17px;font-weight:400;letter-spacing:.16em;
  fill:var(--acc-ice)}
.dia__cd{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-mut)}
.dia__leg{margin-top:clamp(12px,1.8vw,20px);text-align:center;
  opacity:0;transition:opacity .8s var(--ease) 2.4s}
.dia.dentro .dia__leg{opacity:1}

/* ==========================================================================
   06 · A LEI
   ========================================================================== */
.leis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.7vw,22px)}
.lei{position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r);
  border:1px solid var(--linha-2);
  background:linear-gradient(158deg,rgba(77,169,247,.06),rgba(17,22,27,.6));
  transition:border-color .45s,transform .5s var(--ease),box-shadow .5s var(--ease)}
.lei:hover{border-color:rgba(143,224,255,.34);transform:translateY(-3px);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95)}
.lei__k{color:var(--acc);margin-bottom:14px}
.lei h3{font-size:clamp(17px,1.55vw,20px);font-weight:600;letter-spacing:-.024em;
  line-height:1.26;margin-bottom:14px}
.lei p{font-size:14px;line-height:1.74;color:var(--ink-mut)}
.lei p + .lei__nota{margin-top:auto;padding-top:20px}
.lei p b{color:var(--ink);font-weight:600}
.lei__nota{margin-top:auto;padding-top:14px;border-top:1px solid var(--linha);
  font-size:12.5px !important;color:var(--ink-dim) !important}

/* ==========================================================================
   07 · LISTAS — doenças, cartões, itens, documentos, etapas
   ========================================================================== */
/* DUAS COLUNAS, NÃO QUATRO.
   O público desta página é idoso. Nome de doença espremido numa coluna de
   250 px, em 14 px, não é leitura — é obstáculo. Em duas colunas o nome cabe
   inteiro, o corpo sobe para 15,5 px e a explicação tem linha de 1,72.
   E `align-items:start`: cada cartão cresce sozinho ao abrir, sem arrastar os
   vizinhos da mesma linha junto — que é o que a grade de gaps de 1 px fazia. */
.doencas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1vw,12px);align-items:start}
.doenca{border:1px solid var(--linha-2);border-radius:var(--r);
  background:rgba(17,22,27,.5);
  transition:border-color .42s,background .42s}
.doenca:hover{border-color:rgba(143,224,255,.32);background:rgba(26,32,38,.55)}
.doenca details[open]{background:transparent}
.doenca summary{
  position:relative;display:flex;align-items:baseline;gap:13px;cursor:pointer;
  list-style:none;
  padding:clamp(15px,1.7vw,19px) clamp(54px,5vw,62px) clamp(15px,1.7vw,19px) clamp(16px,1.7vw,20px);
}
.doenca summary::-webkit-details-marker{display:none}
.doenca i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.1em;
  color:var(--acc);font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:.25em}
.doenca__t{min-width:0}
.doenca__t b{display:block;font-size:15.5px;font-weight:500;line-height:1.34;
  letter-spacing:-.012em;color:var(--ink)}
.doenca__t em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;
  letter-spacing:.02em;color:var(--ink-dim)}
/* "o que é?" escrito, e não só um ícone: o público desta página não nasceu
   junto com a convenção do sinal de mais. Some quando o cartão abre. */
.doenca__ver{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);opacity:.85;transition:opacity .3s,gap .35s var(--ease)}
.doenca__ver::before{content:'';width:5px;height:5px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px)}
.doenca:hover .doenca__ver{opacity:1;gap:10px}
.doenca details[open] .doenca__ver{display:none}
/* O "+" dentro de um círculo. Para quem tem setenta anos, um sinal solto
   não é evidentemente um botão; um círculo com borda é. E o alvo passa de
   13 px para 30 px, que é o que separa "difícil de acertar" de "acertei". */
.doenca__s{position:absolute;right:clamp(13px,1.5vw,17px);top:clamp(14px,1.6vw,18px);
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--linha-2);background:rgba(7,9,11,.4);
  transition:border-color .4s,background .4s,transform .45s var(--ease)}
.doenca:hover .doenca__s{border-color:var(--acc);background:rgba(77,169,247,.12)}
.doenca__s::before,.doenca__s::after{content:'';position:absolute;background:var(--acc);
  transition:transform .4s var(--ease)}
.doenca__s::before{left:9px;right:9px;top:14.2px;height:1.6px}
.doenca__s::after{top:9px;bottom:9px;left:14.2px;width:1.6px}
.doenca details[open] .doenca__s::after{transform:scaleY(0)}
.doenca details[open] .doenca__t b{color:var(--acc-ice)}
.doenca__d{padding:0 clamp(16px,1.7vw,20px) clamp(16px,1.8vw,20px) clamp(41px,4vw,45px)}
.doenca__d p{font-size:14.5px;line-height:1.72;color:var(--ink-mut)}

.grade-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.cart{padding:clamp(22px,2.4vw,30px);border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(17,22,27,.55);
  transition:border-color .45s,transform .5s var(--ease)}
.cart:hover{border-color:rgba(143,224,255,.3);transform:translateY(-3px)}
.cart__i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid var(--linha-2);color:var(--acc-ice);margin-bottom:20px}
.cart__i svg{width:20px;height:20px}
.cart h3{font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.28}
.cart p{margin-top:11px;font-size:13.5px;line-height:1.7;color:var(--ink-mut)}

.analise{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px);align-items:start}
.itens li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:18px 0;border-bottom:1px solid var(--linha);
  font-size:15px;line-height:1.66;color:var(--ink-mut)}
.itens li:first-child{padding-top:0}
.itens li i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.12em;
  color:var(--acc);font-variant-numeric:tabular-nums;padding-top:.32em}
.itens li b{color:var(--ink);font-weight:600}

.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
.doc{padding:clamp(22px,2.4vw,30px);border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(17,22,27,.5)}
.doc .micro{color:var(--acc);margin-bottom:16px}
.doc li{position:relative;padding-left:20px;margin-bottom:11px;
  font-size:14px;line-height:1.6;color:var(--ink-mut)}
.doc li::before{content:'';position:absolute;left:0;top:.58em;width:7px;height:7px;
  border-radius:50%;border:1px solid var(--acc);opacity:.7}

.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.etapa{position:relative;padding-top:28px;border-top:1px solid var(--linha-2)}
.etapa::before{content:'';position:absolute;top:-1px;left:0;width:38px;height:1px;
  background:var(--acc)}
.etapa__n{font-family:var(--brand);font-size:26px;font-weight:300;color:var(--acc-ice);
  letter-spacing:.04em;font-variant-numeric:tabular-nums}
.etapa h3{margin-top:14px;font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.etapa p{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--ink-mut)}

.cta-linha{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  margin-top:clamp(38px,4.6vw,60px);padding-top:var(--s4);
  border-top:1px solid var(--linha)}
.cta-linha p{flex:1 1 20rem;font-size:15px;line-height:1.66;color:var(--ink-mut)}

/* ==========================================================================
   08 · FAIXA COM CITAÇÃO
   ========================================================================== */
.faixa{position:relative;isolation:isolate;
  padding:clamp(78px,11vw,150px) 0;overflow:hidden;
  border-block:1px solid var(--linha);
  background:linear-gradient(180deg,rgba(17,23,30,.88),rgba(10,14,18,.8))}
.faixa > .wrap{position:relative;z-index:1}
.faixa__in blockquote{max-width:58ch;position:relative;padding-left:clamp(18px,2.4vw,30px);
  border-left:1px solid var(--acc)}
.faixa__in p{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(20px,2.9vw,36px);line-height:1.42;letter-spacing:-.012em;color:var(--ink)}
.faixa__in cite{display:block;margin-top:var(--s3);font-style:normal;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-ice)}

/* ==========================================================================
   09 · ALCANCE E MAPA
   ========================================================================== */
.alcance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,76px);align-items:center}
.alcance__nota{margin-top:clamp(22px,2.6vw,30px);padding-left:19px;
  border-left:1px solid var(--linha-2);max-width:62ch;
  font-size:13.5px;line-height:1.74;color:var(--ink-dim)}

.oabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:clamp(24px,3vw,34px)}
.oab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--linha-2);
  background:linear-gradient(150deg,rgba(77,169,247,.055),rgba(17,22,27,.55));
  transition:border-color .42s,transform .5s var(--ease)}
.oab:hover{border-color:rgba(143,224,255,.34);transform:translateY(-2px)}
.oab b{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--linha-2);background:rgba(7,9,11,.55);
  font-family:var(--brand);font-weight:400;font-size:17px;letter-spacing:.05em;
  color:var(--acc-ice)}
.oab span{display:flex;flex-direction:column;gap:2px;min-width:0;
  font-size:16px;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.oab em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim)}

.mapa{color:var(--ink)}
.mapa__palco{position:relative}
.mapa__svg{width:100%;height:auto;overflow:visible}
.mapa__malha{opacity:.17}
.mapa__rota{opacity:0;stroke-dasharray:100;stroke-dashoffset:100}
/* Devagar de propósito: são treze rotas: e o desenho conta uma história —
   as pontas do país chegando ao mesmo lugar. Em 1,6 s com 90 ms de intervalo
   aquilo virava um piscar; em 3,2 s com 190 ms, dá para acompanhar cada uma. */
.mapa.dentro .mapa__rota{opacity:.5;
  animation:traca-rota 3.2s var(--ease) forwards;
  animation-delay:calc(.5s + var(--i) * .19s)}
@keyframes traca-rota{to{stroke-dashoffset:0}}
.mapa__no{opacity:0}
.mapa.dentro .mapa__no{animation:pisca 1.1s var(--ease) 2.4s forwards}
.mapa__sec{opacity:0}
.mapa.dentro .mapa__sec{animation:pisca 1.1s var(--ease) 3.1s forwards}
.mapa__sede{opacity:0}
.mapa.dentro .mapa__sede{animation:pisca 1.2s var(--ease) .3s forwards}
.mapa.dentro .mapa__sede circle:first-child{animation:respira 5.6s var(--ease) 2.2s infinite}
@keyframes respira{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.18);opacity:.08}}
.mapa__sede circle:first-child{transform-origin:78.06% 71.72%;transform-box:view-box}

/* rótulos posicionados pelos percentuais que gerar-mapa.py imprime */
.mapa__rot{position:absolute;transform:translate(10px,-50%);white-space:nowrap;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mut);opacity:0;transition:opacity 1.1s var(--ease) 3.6s}
.mapa.dentro .mapa__rot{opacity:1}
.mapa__rot em{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;
  color:var(--acc);margin-top:3px}
.mapa__rot--sede{left:78.06%;top:71.72%;color:var(--ink);font-size:11px}
.mapa__rot--sp{left:69.36%;top:73.33%;transform:translate(-10px,-50%) translateX(-100%)}
.mapa__rot--df{left:66.21%;top:53.81%;transform:translate(-10px,-50%) translateX(-100%)}
.mapa__rot--rs{left:57.79%;top:89.64%;transform:translate(-10px,-50%) translateX(-100%)}
.mapa__leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin-top:clamp(14px,2vw,22px);padding-top:16px;border-top:1px solid var(--linha)}
.leg{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;
  vertical-align:middle}
.leg--sede{background:var(--acc);box-shadow:0 0 0 3px rgba(77,169,247,.18)}
.leg--sec{background:var(--acc-ice)}
.leg--no{background:var(--acc-ice);opacity:.45;width:6px;height:6px}

/* ==========================================================================
   10 · O ESCRITÓRIO
   ========================================================================== */
/* Faixa larga + quatro ladrilhos iguais.
   O institucional usa âncora 4:5 à esquerda com quatro 3:2 em volta; aqui é o
   contrário — uma faixa 16:9 mandando e quatro 4:3 embaixo, em fila. Mesmo
   escritório, outra leitura. */
.esp__faixa{aspect-ratio:16/9;margin:0 0 clamp(10px,1.3vw,18px)}
/* `.ret figcaption` limita a 26ch, que serve ao ladrilho e aperta a faixa:
   numa foto de 1 270 px de largura a legenda quebrava em duas linhas por
   falta de permissão, não por falta de espaço. */
.esp__faixa img{transform:scale(var(--sc,1));transition:transform 1.3s var(--ease)}
.esp__faixa:hover{--sc:1.04}
.esp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.3vw,18px)}
.esp__t{margin:0;aspect-ratio:4/3}
.esp__t img{transform:scale(var(--sc,1));transition:transform 1.15s var(--ease)}
.esp__t:hover{--sc:1.055}
.esp .esp__t.reveal:nth-child(2) > picture{transition-delay:.09s}
.esp .esp__t.reveal:nth-child(3) > picture{transition-delay:.18s}
.esp .esp__t.reveal:nth-child(4) > picture{transition-delay:.27s}
.esp__pe{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px 40px;margin-top:clamp(24px,3vw,36px);padding-top:var(--s3);
  border-top:1px solid var(--linha-2)}
.esp__pe dl{display:flex;flex-wrap:wrap;gap:20px clamp(26px,3.4vw,54px)}
.esp__pe dt{margin-bottom:7px}
.esp__pe dd{font-size:14.5px;line-height:1.5;color:var(--ink);letter-spacing:-.008em}

/* ==========================================================================
   11 · QUEM ASSINA
   ========================================================================== */
.assina{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);
  gap:clamp(34px,5vw,82px);align-items:start}
/* a moldura deslocada vive no ENVOLTÓRIO. Toda .ret recorta o próprio conteúdo
   e cortaria um ::before empurrado para fora da caixa. */
.assina__quadro{position:relative;z-index:0}
.assina__quadro::before{content:'';position:absolute;z-index:-1;border-radius:var(--r-lg);
  border:1px solid var(--linha-2);
  inset:clamp(13px,1.5vw,21px) calc(-1 * clamp(13px,1.5vw,21px))
        calc(-1 * clamp(13px,1.5vw,21px)) clamp(13px,1.5vw,21px)}
/* Retrato de corpo inteiro, igual ao que o hero usava antes: a placa vai
   para FORA, como base do cartão, porque os sapatos estão nos últimos 3% do
   quadro e a placa tem 14% de altura. */
.assina__foto{aspect-ratio:4/5;margin:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
.assina__foto::after{background:linear-gradient(to top,rgba(7,9,11,.5),transparent 32%),
  linear-gradient(115deg,rgba(30,78,120,.13),transparent 54%)}
.assina__placa{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:16px clamp(17px,1.9vw,22px) 18px;
  border:1px solid var(--linha-2);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:linear-gradient(100deg,rgba(17,22,27,.92),rgba(13,17,21,.72));
  box-shadow:0 40px 100px -46px rgba(0,0,0,.95);
}
.assina__placa > span:first-child{display:flex;flex-direction:column;gap:7px;min-width:0}
.assina__placa strong{font-family:var(--brand);font-weight:400;
  font-size:clamp(16px,1.5vw,20px);letter-spacing:.012em;line-height:1.18;color:var(--ink)}
.assina__placa .micro{color:var(--acc-ice)}
.assina__txt .sh{margin-bottom:clamp(22px,2.6vw,30px)}
.assina__txt > p{margin-top:var(--s2);font-size:15px;line-height:1.76;color:var(--ink-mut)}
.creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,30px)}
.creds li{padding:8px 15px;border-radius:var(--r-sm);
  border:1px solid var(--linha-2);border-left:2px solid var(--acc);
  background:rgba(17,22,27,.55);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mut)}
.assina__rod{margin-top:clamp(24px,3vw,32px);padding-top:var(--s3);
  border-top:1px solid var(--linha);
  font-size:11px !important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim) !important}

/* ==========================================================================
   12 · FAQ · CTA · RODAPÉ
   ========================================================================== */
.faq{max-width:920px;border-top:1px solid var(--linha)}
.faq__i{border-bottom:1px solid var(--linha)}
.faq__i summary{position:relative;display:flex;align-items:center;gap:18px;
  padding:22px 46px 22px 0;cursor:pointer;list-style:none;
  font-size:clamp(15px,1.35vw,17.5px);font-weight:500;letter-spacing:-.018em;
  line-height:1.4;transition:color .32s}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary:hover{color:var(--acc-ice)}
.faq__s{position:absolute;right:6px;top:50%;width:13px;height:13px;
  transform:translateY(-50%);flex:0 0 auto}
.faq__s::before,.faq__s::after{content:'';position:absolute;background:var(--acc);
  transition:transform .4s var(--ease),opacity .3s}
.faq__s::before{left:0;right:0;top:6px;height:1.5px}
.faq__s::after{top:0;bottom:0;left:6px;width:1.5px}
.faq__i[open] .faq__s::after{transform:scaleY(0)}
.faq__i[open] summary{color:var(--acc-ice)}
.faq__a{padding:0 clamp(28px,4vw,60px) 24px 0}
.faq__a p{font-size:14.5px;line-height:1.78;color:var(--ink-mut)}
.faq__a a{color:var(--acc);border-bottom:1px solid rgba(77,169,247,.3)}

.cta{position:relative;padding:clamp(86px,11vw,150px) 0 clamp(74px,9vw,110px);
  overflow:hidden;border-top:1px solid var(--linha-2)}
.cta__in{position:relative;z-index:2;max-width:880px}
.cta__h{font-size:clamp(31px,5vw,64px);line-height:1.03;letter-spacing:-.042em;
  font-weight:600;text-wrap:balance}
.cta__p{margin-top:var(--s3);max-width:52ch;
  font-size:clamp(15.5px,1.4vw,19px);line-height:1.68;color:var(--ink-mut)}
.cta__acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.6vw,46px)}
/* ==========================================================================
   OS DOIS COMERCIAIS
   O número é o produto final de toda a página — não pode terminar como nota
   de rodapé em 13,5 px dentro de uma frase explicativa. Vira dado: rótulo
   pequeno em cima, número grande em tabular-nums embaixo, o glifo do
   WhatsApp no canto acendendo no hover.
   ========================================================================== */
.tels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,1.2vw,14px);margin-top:clamp(26px,3vw,34px);max-width:40rem}
.tel{position:relative;display:flex;flex-direction:column;gap:9px;
  padding:clamp(16px,1.8vw,20px) clamp(18px,2vw,24px);
  border-radius:var(--r);border:1px solid var(--linha-2);
  background:linear-gradient(150deg,rgba(77,169,247,.055),rgba(17,22,27,.5));
  transition:border-color .42s,transform .5s var(--ease),box-shadow .5s var(--ease);
}
.tel:hover{border-color:rgba(37,211,102,.42);transform:translateY(-2px);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.95)}
.tel__k{color:var(--acc-ice)}
.tel__n{font-size:clamp(19px,2.1vw,26px);font-weight:600;letter-spacing:-.022em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:color .35s}
.tel:hover .tel__n{color:#fff}
.tel__i{position:absolute;top:clamp(14px,1.6vw,18px);right:clamp(16px,1.8vw,20px);
  width:19px;height:19px;color:var(--ink-dim);opacity:.5;
  transition:color .4s,opacity .4s,transform .5s var(--ease)}
.tel__i svg{width:100%;height:100%}
.tel:hover .tel__i{color:var(--wa);opacity:1;transform:scale(1.08)}
@media (max-width:560px){ .tels{grid-template-columns:1fr} }
.cta__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(40px,5vw,64px);padding-top:var(--s4);
  border-top:1px solid var(--linha)}
.cta__grade .micro{margin-bottom:10px}
.cta__grade p:not(.micro),.cta__grade a{font-size:14.5px;line-height:1.6;color:var(--ink-mut)}
.cta__grade a:hover{color:var(--acc-ice)}

.rod{position:relative;border-top:1px solid var(--linha-2);
  padding:clamp(60px,8vw,100px) 0 clamp(96px,8vw,112px)}
.rod__marca{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:30px;padding-bottom:clamp(34px,4.4vw,54px)}
.rod__logo{display:flex;flex-direction:column;gap:var(--s3)}
.rod__trava{display:flex;align-items:center;gap:20px}
.rod__trava .emb{width:auto;height:clamp(52px,6.6vw,70px);overflow:visible;flex:0 0 auto}
.rod__barra{width:1px;height:clamp(32px,4.2vw,42px);background:var(--linha-3);flex:0 0 auto}
.rod__nome{font-family:var(--brand);font-weight:300;letter-spacing:.3em;line-height:1;
  font-size:clamp(18px,2.5vw,28px);white-space:nowrap}
.rod__tag{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc-ice)}
.rod__cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.rod__cta .micro{color:var(--ink-dim)}
.rod__cols{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,.85fr));
  gap:clamp(28px,4vw,62px);padding:clamp(34px,4.4vw,54px) 0;
  border-top:1px solid var(--linha)}
.rod__col{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.rod__col .micro{margin-bottom:6px}
.rod__col a,.rod__col p:not(.micro){font-size:13.8px;line-height:1.72;color:var(--ink-mut);
  transition:color .32s,transform .38s var(--ease)}
.rod__col a{width:fit-content}
.rod__col a:hover{color:var(--ink);transform:translateX(3px)}
.rod__end{font-style:normal;font-size:13.8px;line-height:1.74;color:var(--ink-mut)}
.rot{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);opacity:.62}
.rod__legal{padding-top:var(--s4);border-top:1px solid var(--linha)}
.rod__legal p{font-size:11.5px;line-height:1.78;color:var(--ink-dim);max-width:106ch}
.rod__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:var(--s3);font-size:11.5px;color:var(--ink-dim)}
.rod__regs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 9px;
  font-variant-numeric:tabular-nums}
.rod__regs b{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);opacity:.75}
.rod__regs i{display:inline-block;width:1px;height:11px;background:var(--linha-2)}

.flut{position:fixed;right:20px;bottom:20px;z-index:860;
  display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 22px;
  border-radius:27px;background:var(--wa);color:#04120A;
  font-size:13.5px;font-weight:600;box-shadow:0 16px 40px -16px rgba(37,211,102,.7);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.flut svg{width:21px;height:21px}
.flut.ativo{opacity:1;transform:none;pointer-events:auto}
.flut:hover{background:#2AE474}

/* ---------- AVALIAÇÕES ----------
   Prova social num site de advogado anda numa corda bamba: o Provimento nº
   205/2021 veda anúncio com promessa de resultado, e depoimento de cliente é
   justamente onde o resultado costuma aparecer. A resposta aqui é de seleção,
   não de edição — seis das onze entram, palavra por palavra; as que falam de
   causa ganha ficam no Google, que é onde são opinião de cliente e não anúncio
   do escritório. O que a seção afirma é só o que dá para conferir em um
   clique: a nota e o texto de cada uma. */
/* A BARRA DE FECHO. A nota morava no topo da seção, antes de qualquer
   avaliação — mobília na frente da prova. No pé ela faz outro serviço: fecha
   o que acabou de ser lido e carrega os dois convites, "ver todas" para quem
   está avaliando o escritório e "avaliar" para quem já é cliente.
   Os dois botões são de contorno, não preenchidos: o botão cheio da página é
   o do WhatsApp, e prova social não pode competir com a conversa. */
.aval__pe{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(14px,2vw,26px);
  margin-top:clamp(18px,2.2vw,28px);
  padding:clamp(16px,1.9vw,22px) clamp(20px,2.4vw,30px);border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(17,22,27,.55)}
.aval__nt{display:flex;align-items:center;gap:13px;margin-right:auto}
.aval__nt b{font-size:clamp(26px,2.6vw,34px);line-height:1;font-weight:600;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.aval__nt span{font-size:11px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-dim)}
.aval__acoes{display:flex;flex-wrap:wrap;gap:10px}

/* as estrelas: um caminho só, usado cinco vezes por <use> — seis avaliações
   estreladas custam menos bytes assim que um ícone repetido no HTML */
.estrelas{height:15px;width:auto;fill:var(--acc-ice);display:block}
.estrelas--p{height:12px;fill:rgba(143,224,255,.72)}

/* o destaque: aspas e assinatura numa coluna, o texto na outra. A avaliação
   mais longa não pode virar um parágrafo perdido no meio da parede. */
.destaque{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:stretch;
  margin-top:clamp(12px,1.5vw,20px);padding:clamp(24px,2.8vw,38px);
  border-radius:var(--r);border:1px solid var(--linha-2);
  background:linear-gradient(135deg,rgba(30,78,120,.11),rgba(17,22,27,.55) 58%)}
.destaque__lado{display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(24px,3vw,40px)}
.destaque__asp{display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(64px,7vw,104px);line-height:.6;color:var(--acc);opacity:.34}
.destaque__quem{display:flex;align-items:center;gap:13px}
.destaque__quem b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.destaque__quem em{display:block;margin-top:3px;font-style:normal;
  font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-dim)}
.destaque__i,.aval__i{display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--linha-2);
  font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--acc-ice);
  background:rgba(30,78,120,.16)}
.destaque__txt p{font-family:var(--serif);font-weight:300;
  font-size:clamp(16px,1.5vw,19.5px);line-height:1.62;letter-spacing:-.008em;
  color:var(--ink)}
.destaque__txt p + p{margin-top:.85em}

/* A PAREDE É DE COLUNAS, NÃO DE GRADE.
   Cinco avaliações de 33 a 300 caracteres numa grade viram cartões com metros
   de vazio embaixo dos curtos. Em multicoluna cada uma ocupa a altura que tem
   e o navegador equilibra as colunas sozinho. */
.avals{columns:3;column-gap:clamp(12px,1.5vw,20px);margin-top:clamp(12px,1.5vw,20px)}
.aval{break-inside:avoid;margin-bottom:clamp(12px,1.5vw,20px);
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(17,22,27,.55);
  transition:border-color .45s var(--ease),transform .5s var(--ease)}
.aval__q{margin-top:15px;font-size:clamp(14px,1.18vw,15.5px);line-height:1.68;
  color:var(--ink-mut)}
.aval__n{display:flex;align-items:center;gap:12px;margin-top:18px;
  font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.aval__i{width:34px;height:34px;font-size:11px}
/* especificidade de tres classes: `.reveal.dentro{transform:none}` mora depois
   nesta folha e empataria com `.aval:hover` — no empate vence quem vem depois,
   e o salto do hover morreria sem erro nenhum */
.avals .aval:hover{border-color:rgba(143,224,255,.3);transform:translateY(-3px)}

@media (max-width:1020px){
  .destaque{grid-template-columns:1fr;gap:clamp(14px,2vw,20px)}
  .destaque__lado{display:flex;align-items:center;gap:clamp(16px,2.4vw,24px)}
  .destaque__quem{margin-top:0}
  .avals{columns:2}
}
@media (max-width:680px){
  .avals{columns:1}
  .aval__nt{margin-right:0;flex:1 1 100%}
  .aval__acoes{flex:1 1 100%}
  .aval__acoes .btn{flex:1 1 100%}
}

/* ==========================================================================
   REVELAÇÃO
   ========================================================================== */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.dentro{opacity:1;transform:none}
.ret.reveal{opacity:1;transform:none}
.linha{display:block;overflow:hidden;padding-block:.1em;margin-block:-.1em}
.linha > span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
.linha.dentro > span{transform:none}
.linha:nth-child(2) > span{transition-delay:.08s}
.linha:nth-child(3) > span{transition-delay:.16s}
.linha:nth-child(4) > span{transition-delay:.24s}
.linha:nth-child(4) > span{transition-delay:.24s}
.leis .lei.reveal:nth-child(2){transition-delay:.1s}
.leis .lei.reveal:nth-child(3){transition-delay:.2s}
.grade-4 .cart.reveal:nth-child(2){transition-delay:.08s}
.grade-4 .cart.reveal:nth-child(3){transition-delay:.16s}
.grade-4 .cart.reveal:nth-child(4){transition-delay:.24s}
.docs .doc.reveal:nth-child(2){transition-delay:.1s}
.docs .doc.reveal:nth-child(3){transition-delay:.2s}
.etapas .etapa.reveal:nth-child(2){transition-delay:.09s}
.etapas .etapa.reveal:nth-child(3){transition-delay:.18s}
.etapas .etapa.reveal:nth-child(4){transition-delay:.27s}
.faq .faq__i.reveal:nth-child(n+2){transition-delay:.05s}

/* ==========================================================================
   ESCALONAMENTOS
   Nada disso é enfeite solto: cada lista entra na ordem em que se lê, e a
   defasagem é curta o bastante (70–90 ms) para o olho registrar movimento sem
   ter de esperar por ele.
   ========================================================================== */
.doencas .doenca.reveal:nth-child(2){transition-delay:.05s}
.doencas .doenca.reveal:nth-child(3){transition-delay:.10s}
.doencas .doenca.reveal:nth-child(4){transition-delay:.15s}
.doencas .doenca.reveal:nth-child(5){transition-delay:.20s}
.doencas .doenca.reveal:nth-child(6){transition-delay:.25s}
.doencas .doenca.reveal:nth-child(7){transition-delay:.30s}
.doencas .doenca.reveal:nth-child(8){transition-delay:.35s}
.doencas .doenca.reveal:nth-child(n+9){transition-delay:.40s}

.itens li{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.itens.dentro li{opacity:1;transform:none}
.itens.dentro li:nth-child(2){transition-delay:.07s}
.itens.dentro li:nth-child(3){transition-delay:.14s}
.itens.dentro li:nth-child(4){transition-delay:.21s}
.itens.dentro li:nth-child(5){transition-delay:.28s}
.itens.dentro li:nth-child(6){transition-delay:.35s}

.oabs .oab{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .42s}
.oabs.dentro .oab{opacity:1;transform:none}
.oabs.dentro .oab:nth-child(2){transition-delay:.08s}
.oabs.dentro .oab:nth-child(3){transition-delay:.16s}
.oabs.dentro .oab:nth-child(4){transition-delay:.24s}

.tels .tel{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .42s,box-shadow .5s}
.tels.dentro .tel{opacity:1;transform:none}
.tels.dentro .tel:nth-child(2){transition-delay:.09s}

.cta__grade > div{opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.cta__grade.dentro > div{opacity:1;transform:none}
.cta__grade.dentro > div:nth-child(2){transition-delay:.08s}
.cta__grade.dentro > div:nth-child(3){transition-delay:.16s}

/* a trilha das quatro etapas se desenha da esquerda para a direita */
.etapas{position:relative}
.etapas::after{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--acc),var(--acc-ice));
  transition:width 1.8s var(--ease) .2s}
.etapas.dentro::after{width:100%}
@media (max-width:760px){ .etapas::after{display:none} }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1240px){
  .nav a{padding:10px 10px;font-size:13px}
}
@media (max-width:1140px){
  .cab__in{gap:16px}
  .nav a{padding:10px 7px;font-size:12.5px;letter-spacing:-.004em}
  .marca__sub{font-size:8px;letter-spacing:.17em}
  .btn--sm{padding:0 17px}
}
@media (max-width:1020px){
  .cab__in{gap:14px}
  .nav{display:none}
  .cab .btn--sm{display:none}
  .hamb{display:block}
  .hero{min-height:0;padding-top:calc(var(--cab-h) + 34px)}
  .hero__in{grid-template-columns:1fr;gap:clamp(30px,5vw,46px)}
  .hero__foto{max-width:28rem;aspect-ratio:3/4}
  .leis,.docs{grid-template-columns:1fr}
  .dia{max-width:28rem}
  .grade-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analise,.alcance,.assina{grid-template-columns:1fr}
  .assina__quadro{max-width:25rem}
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta__grade{grid-template-columns:1fr}
}
@media (max-width:980px){
  .esp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selo{width:min(40rem,90vw);opacity:.035}
}
@media (max-width:1000px){
  .rod__cols{grid-template-columns:1fr 1fr}
  .rod__col--larga{grid-column:1/-1}
}
@media (max-width:760px){
  .doencas{grid-template-columns:1fr}
  .grade-4,.etapas{grid-template-columns:1fr}
  .oabs{grid-template-columns:1fr}
  .esp{grid-template-columns:1fr}
  .esp__faixa{aspect-ratio:3/2}
  .assina__quadro{max-width:none;margin-right:clamp(13px,1.5vw,21px)}
  .placa__ufs{display:none}
  .rod__cols{grid-template-columns:1fr}
  .rod__marca{flex-direction:column;align-items:flex-start}
  .hero__acoes .btn,.cta__acoes .btn{flex:1 1 100%}
  /* os rótulos do mapa não cabem ao lado do desenho numa tela estreita */
  .mapa__rot{display:none}
}
@media (max-width:600px){
  .some-xs{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal,.linha > span{opacity:1;transform:none}
  .itens li,.oabs .oab,.tels .tel,.cta__grade > div{opacity:1;transform:none}
  .etapas::after{width:100%}
  .ret.reveal > picture{clip-path:none}
  .ret.reveal > :not(picture),.ret.reveal::after{opacity:1}
  .mapa__rota,.mapa__no,.mapa__sec,.mapa__sede,.mapa__rot{opacity:1;stroke-dashoffset:0}
  .dia__anel{opacity:.5;stroke-dashoffset:0}
  .dia__par,.dia__txt,.dia__centro,.dia__leg,.dia__bezel,.dia__halo{opacity:1}
  .dia__nucleo,.dia__halo{opacity:1;transform:none}
  .dia__marcas{animation:none}
  .selo .em-ring,.selo .em-ring2,.selo .em-arc,.selo .em-mono path{stroke-dashoffset:0}
  .abre__nome{clip-path:none}
  .abre__sub{opacity:1;transform:none}
  .prog{display:none}
}

/* ==========================================================================
   CELULAR ESTREITO E ALVOS DE TOQUE
   ========================================================================== */
@media (max-width:370px){
  .marca{gap:11px}
  .marca .emb{height:34px}
  .marca__barra{display:none}
  .marca__nome{font-size:13px;letter-spacing:.2em}
  .marca__sub{font-size:7.4px;letter-spacing:.14em}
  .rod__trava{gap:14px}
  .rod__trava .emb{height:46px}
  .rod__nome{font-size:17px;letter-spacing:.22em}
  .rod__barra{display:none}
}
/* dedo, não cursor: 40 px de altura mínima nos links de texto.
   O público desta página é idoso — este é o ajuste de acessibilidade que mais
   rende aqui, e não custa um pixel de leiaute em telas maiores. */
@media (max-width:768px){
  .rod__col a,.link,.cta__linhas a,.cta__grade a{
    display:inline-flex;align-items:center;min-height:40px;
  }
  /* "A lei" tem 25 px de largura: a altura já subiu para 40, faltava a
     horizontal. min-width não mexe em leiaute nenhum aqui — os links do
     rodapé são width:fit-content numa coluna. */
  .rod__col a{min-width:44px}
  /* link dentro de frase corrida: não pode virar bloco de 40 px sem estragar
     a entrelinha do parágrafo. padding vertical em elemento inline cresce a
     área de toque SEM mexer na caixa de linha — é para isso que ele serve. */
  .faq__a a{padding-block:11px}
}