/* ==========================================================================
   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{
  /* ── A PÁGINA CLAREOU ─────────────────────────────────────────────────
     Pedido do cliente: "acho que podia mudar a cor tbm, deixar uma cor mais
     clara, mas o teor e as escritas pode manter". Então mudou SÓ a cor: nem
     uma palavra do texto, nem uma peça da estrutura.
     A identidade continua sendo o azul. O que inverteu foi quem é fundo e
     quem é tinta — e isso obriga o azul a escurecer: #4DA9F7 sobre branco dá
     2,9:1 e reprova; #1F6FB2 dá 5,9:1. Azul claro é azul de fundo escuro.
     Contrastes medidos sobre o fundo #F6F8FB:
       --ink      16,2:1      --ink-mut  7,0:1
       --ink-dim   5,0:1      --acc-ice  8,6:1
     `--bg-rgb` existe porque uma dúzia de degradês dissolvia a foto no fundo
     da página com a cor escrita à mão. Com o token, eles seguem o fundo. */
  --bg-rgb:246,248,251;
  --bg-0:#F6F8FB;  --bg-1:#EDF1F6;  --bg-2:#E3E9F1;
  --surf-1:#FFFFFF; --surf-2:#F2F5F9;
  --ink:#0E1620;   --ink-mut:#46525F; --ink-dim:#5E6977;
  --linha:rgba(14,22,32,.10);
  --linha-2:rgba(14,22,32,.16);
  --linha-3:rgba(14,22,32,.28);
  --acc:#1F6FB2;   --acc-ice:#15527F; --acc-deep:#CFE1F2;
  --acc-lav:rgba(31,111,178,.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,.236), transparent 60%),
    radial-gradient(900px 700px  at 2% 15%,  rgba(28,68,108,.174),  transparent 58%),
    radial-gradient(1000px 820px at 98% 34%, rgba(38,92,140,.149),  transparent 60%),
    radial-gradient(950px 760px  at 0% 52%,  rgba(28,68,108,.136),  transparent 58%),
    radial-gradient(1050px 800px at 96% 70%, rgba(38,92,140,.136),  transparent 60%),
    radial-gradient(1250px 820px at 54% 99%, rgba(54,118,172,.198), 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:#FFFFFF}

.pular{
  position:fixed;top:10px;left:10px;z-index:9999;padding:10px 16px;
  background:var(--acc-ice);color:#FFFFFF;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);
}
/* RISCO, NÃO PONTO. O marcador redondo com halo pulsante abre sete seções da
   página — é o tipo de enfeite que se reconhece de longe como enfeite. Um
   risco vertical faz o mesmo trabalho (separar o olho do texto) com a mesma
   autoridade de uma marca de margem. */
.olho__ponto{
  width:2px;height:1.05em;border-radius:1px;background:var(--acc);flex:0 0 auto;margin-top:.26em;
}
.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:14px;height:2px;border-radius:1px;background:var(--acc-ice);
  margin-right:11px;flex:0 0 auto;margin-top:.72em}

.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,var(--acc),var(--acc-ice));color:#FFFFFF;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 12px 30px -12px rgba(21,82,127,.52)}
.btn--p:hover{box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 20px 44px -14px rgba(21,82,127,.58)}
.btn--f{border:1px solid var(--linha-2);color:var(--ink);background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--f:hover{border-color:var(--acc);background:#FFFFFF}
.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}
/* ---------- O FIO ENTRE DUAS SEÇÕES ----------
   Uma banda que troca de cor já divide; o fio diz que a troca foi decidida.
   Ele se desenha do CENTRO PARA FORA quando a seção entra — um fio que corre
   da esquerda para a direita tem direção, e direção puxa o olho para o lado
   quando o que se quer é que ele desca. As pontas somem numa máscara, porque
   fio que encosta na borda da tela vira moldura.
   O losango no meio é o único enfeite, e tem 5 px. */
.sec::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--linha-2) 22%,var(--linha-3) 50%,var(--linha-2) 78%,transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 1.25s cubic-bezier(.22,1,.3,1);
}
.sec.vista::before{transform:scaleX(1)}
.sec::after{
  content:'';position:absolute;left:50%;top:0;width:5px;height:5px;z-index:4;
  margin:-3px 0 0 -3px;border-radius:1px;background:var(--bg-0);
  box-shadow:inset 0 0 0 1px var(--acc);transform:rotate(45deg) scale(0);
  transition:transform .6s cubic-bezier(.3,1.5,.4,1) .55s;
}
.sec.vista::after{transform:rotate(45deg) scale(1)}
.sec--sem-fio::before,.sec--sem-fio::after{display:none}
.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)}

/* AS BANDAS PRECISAM SER BANDAS.
   O cliente: "as seções estão um pouco mal divididas, é o branco do site que ta
   muito predominante". Estavam: `tom-c` era branco a 80% sobre um fundo de
   246,248,251 — dava 249, três níveis de diferença, abaixo do que o olho
   distingue numa parede grande. Agora `tom-a` é um cinza-azul assumido,
   `tom-b` é o próprio papel e `tom-c` é folha branca de verdade: três
   degraus, não três sussurros. */
.tom-a{background:linear-gradient(180deg,#E2E9F2,#EBF0F6)}
.tom-b{background:linear-gradient(180deg,rgba(var(--bg-rgb),.34),rgba(var(--bg-rgb),.66))}
.tom-c{background:linear-gradient(180deg,#FFFFFF,#FBFCFE)}

.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(14,22,32,.022) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,22,32,.022) 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 1.05s cubic-bezier(.76,0,.24,1),opacity .5s .45s;
}
/* A CORTINA NÃO ARRASTA O CONTEÚDO JUNTO.
   O painel subia com tudo colado dentro, e a marca ia embora de ré como um
   adesivo. Agora o conteúdo se despede primeiro — sobe oito pixels e apaga em
   meio segundo — e só então o painel sai. São dois gestos em sequência, que é
   o que separa uma saída de um corte. */
.abre__in{transition:opacity .45s var(--ease),transform .6s cubic-bezier(.4,0,.2,1)}
.abre.sai .abre__in{opacity:0;transform:translateY(-8px)}
.abre.sai{transform:translateY(-101%);opacity:0}

/* o carregamento que o cliente pediu: um fio que fecha junto com a cortina */
.abre__barra{position:relative;width:min(230px,48vw);height:1px;margin-top:30px;
  background:var(--linha-2);overflow:hidden;opacity:0;
  animation:pisca .55s var(--ease) 1.2s forwards}
.abre__barra i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--acc-deep),var(--acc) 42%,var(--acc-ice));
  animation:carrega 1.35s cubic-bezier(.5,0,.2,1) 1.2s forwards}
@keyframes carrega{to{transform:scaleX(1)}}
.abre__in{display:flex;flex-direction:column;align-items:center;gap:26px}
.abre .emb{width:auto;height:clamp(86px,13vw,118px);aspect-ratio:1;color:var(--ink);overflow:visible}
/* O NOME NÃO É CORTADO: ELE É REVELADO.
   Era `clip-path` — uma lâmina dura varrendo a palavra da esquerda para a
   direita, que é o gesto de um contador de tempo, não de uma assinatura. Uma
   máscara em degradê atravessa a palavra com a borda macia: as letras entram
   acendendo. É a mesma duração; o que muda é a aresta. */
.abre__nome{
  font-family:var(--brand);font-size:clamp(11.5px,2.3vw,18px);font-weight:300;
  letter-spacing:.24em;color:var(--ink);white-space:nowrap;
  /* ⚠ PORCENTAGEM EM mask-position NÃO É DESLOCAMENTO.
     A primeira versão animava de 0 até -205%, imaginando que -205% empurrava a
     máscara 205% para a esquerda. Não é isso: a porcentagem interpola entre
     “borda esquerda da imagem na borda esquerda da caixa” (0%) e “borda direita
     na borda direita” (100%), e o deslocamento real é (caixa − imagem) × p. Com
     imagem de 300%, -205% virou +410%: a máscara inteira saiu para a direita da
     palavra, e onde não há máscara não há pintura. Medido quadro a quadro, o
     nome ficava invisível do começo ao fim, sem erro nenhum no console.
     A tira é opaca à esquerda e transparente à direita; começa em 100% (a
     palavra vê o fim transparente da tira) e termina em 0% (vê o começo
     opaco). A borda macia de 16% da tira dá 48% da palavra: as letras entram
     acendendo, da esquerda para a direita. */
  -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 56%);
          mask-image:linear-gradient(90deg,#000 0 40%,transparent 56%);
  -webkit-mask-size:300% 100%;   mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;  mask-position:100% 0;
  animation:revela 1.15s cubic-bezier(.58,0,.25,1) 1.25s forwards;
}
@keyframes revela{to{-webkit-mask-position:0 0;mask-position:0 0}}
.abre__sub{
  margin-top:-12px;
  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) 1.95s forwards;
}
@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.7s forwards}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes pisca{to{opacity:1}}

.cab{position:fixed;inset:0 0 auto;z-index:880;
  background:rgba(var(--bg-rgb),.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(var(--bg-rgb),.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;aspect-ratio:1;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}
/* "RUMBELSPERGER & BARRETO" tem 23 caracteres contra os 13 de antes. No corpo
   e no espaçamento anteriores a marca pedia 410 px num espaço de 333 e o
   cabeçalho quebrava em duas linhas. Corpo e entreletra recuam juntos — é a
   entreletra que cresce com o comprimento da palavra, não o contrário. */
.marca__nome{font-family:var(--brand);font-size:13.5px;font-weight:400;letter-spacing:.15em;
  line-height:1;white-space:nowrap;transition:font-size .5s var(--ease)}
.cab.fixo .marca__nome{font-size:12.5px}
.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(var(--bg-rgb),.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 34px 78px -44px rgba(14,22,32,.26)}
/* 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(var(--bg-rgb),.88),rgba(var(--bg-rgb),.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(var(--bg-rgb),.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(var(--bg-rgb),.92),rgba(var(--bg-rgb),.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(var(--bg-rgb),.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}
/* O SLOGAN SAIU DO HERO. “Soluções estratégicas com inteligência jurídica” é
   assinatura pessoal do Dr. Renan: numa página do escritório ela fala por um
   dos dois sócios. A regra fica aqui, comentada, porque a classe pode voltar
   com outra frase — do escritório — sem precisar ser reescrita.
.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 se apóia em três condições e, faltando uma, não para em pé. O
   arco graduado em cima vem do emblema do escritório, que é um bezel. */
.dia{position:relative;width:100%;max-width:min(34rem,100%);margin-inline:auto;
  color:var(--ink)}
.dia__svg{width:100%;height:auto;aspect-ratio:440/400;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:var(--bg-0);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{stroke:none;stroke-width:0}

/* AS PEÇAS SÃO LEVANTADAS, NÃO REVELADAS.
   Um desenho que surge inteiro é um desenho; um que se ergue por partes é um
   argumento. A ordem importa e é a da obra: risca o chão, sobem as três
   colunas, assenta a verga, fecha o arco. Tudo em 2,3 s — o hero não pode
   ficar se montando enquanto alguém tenta ler o título. */
.dia__chao{stroke-dasharray:100;stroke-dashoffset:100}
.dia.dentro .dia__chao{animation:dia-traca 1s var(--ease) .15s forwards}

.dia__col{opacity:0;transform:translateY(16px) scaleY(.94);
  transform-origin:center 318px;transform-box:view-box}
.dia.dentro .dia__col{
  animation:dia-sobe .85s cubic-bezier(.22,1,.3,1) forwards;
  animation-delay:calc(.45s + var(--i) * .17s);
}
@keyframes dia-sobe{to{opacity:1;transform:none}}

.dia__verga{opacity:0;transform:translateY(-10px);transform-box:view-box}
.dia.dentro .dia__verga{animation:dia-assenta .7s cubic-bezier(.2,1.25,.4,1) 1.12s forwards}
@keyframes dia-assenta{to{opacity:1;transform:none}}

/* A GRADUAÇÃO É A ÚLTIMA COISA A APARECER. Ela é a medida do que foi
   construído: vem depois do chão, das colunas e da verga, nunca antes. */
.dia__escala{color:var(--ink-mut);opacity:0}
.dia.dentro .dia__escala{animation:pisca 1.1s var(--ease) 1.5s forwards}
@keyframes dia-traca{to{stroke-dashoffset:0}}

.dia__cols{color:var(--ink-mut)}
.dia__halo{opacity:0;transform-origin:220px 124px;transform-box:view-box;transform:scale(.6)}
.dia.dentro .dia__halo{animation:dia-halo 1.4s var(--ease) 1.3s forwards}
@keyframes dia-halo{to{opacity:1;transform:none}}

.dia__txt{opacity:0}
.dia.dentro .dia__txt{animation:pisca .9s var(--ease) .95s 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:16px;font-weight:400;letter-spacing:.2em;
  fill:var(--acc-ice)}
.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,#FFFFFF,rgba(255,255,255,.46));
  transition:border-color .45s,transform .5s var(--ease),box-shadow .5s var(--ease)}
.lei:hover{border-color:rgba(31,111,178,.44);transform:translateY(-3px);
  box-shadow:0 24px 54px -28px rgba(14,22,32,.20)}
.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(255,255,255,.72);
  transition:border-color .42s,background .42s}
.doenca:hover{border-color:rgba(31,111,178,.40);background:#FFFFFF}
.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(var(--bg-rgb),.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(255,255,255,.76);
  transition:border-color .45s,transform .5s var(--ease)}
.cart:hover{border-color:rgba(31,111,178,.40);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(255,255,255,.76)}
.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
   ========================================================================== */
/* A ÚNICA PEÇA ESCURA DA PÁGINA, E DE PROPÓSITO.
   Ela estava num cinza-azulado a dois tons do fundo: uma faixa que não é faixa,
   só um pedaço de página com borda. Numa página clara, o que faz uma citação
   parecer citação — e não parágrafo grande — é a inversão: tinta escura,
   texto claro, serifada em itálico, emblema em relevo ao fundo.
   Uma banda escura no meio de uma página clara é acento. Duas seriam indecisão. */
.faixa{position:relative;isolation:isolate;
  padding:clamp(86px,12vw,164px) 0;overflow:hidden;
  border-block:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(120% 150% at 14% -10%, #1B4166 0%, transparent 58%),
    radial-gradient(90% 120% at 92% 108%, #15395A 0%, transparent 56%),
    linear-gradient(152deg,#0F2A43 0%,#0A1B2B 55%,#102E49 100%);
  color:#EAF2F9}
.faixa > .wrap{position:relative;z-index:1}
/* fio de luz no topo e no pé: a banda tem espessura, não é um recorte */
.faixa::before,.faixa::after{content:'';position:absolute;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(143,195,234,.42),transparent)}
.faixa::before{top:0}
.faixa::after{bottom:0}
.faixa .selo{color:#FFFFFF;opacity:.07}
.faixa__in blockquote{max-width:58ch;position:relative;padding-left:clamp(18px,2.4vw,30px);
  border-left:1px solid rgba(143,195,234,.55)}
.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:#FFFFFF}
/* a assinatura herdava --acc-ice (#15527F), que era legivel sobre papel e
   virou azul escuro sobre azul escuro quando a faixa inverteu */
.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:#9FCBEC}

/* ==========================================================================
   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)}
/* Com uma inscrição só, grade de duas colunas vira uma coluna vazia ao lado. */
.oabs--una{grid-template-columns:minmax(0,1fr);max-width:25rem}
.oabs--una .oab span{gap:4px}
.oabs--una .oab em{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:none;color:var(--ink-mut);font-variant-numeric:normal}
.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(31,111,178,.055),rgba(255,255,255,.80));
  transition:border-color .42s,transform .5s var(--ease)}
.oab:hover{border-color:rgba(31,111,178,.44);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(var(--bg-rgb),.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;aspect-ratio:1;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}

/* ==========================================================================
   OS DOIS SÓCIOS
   Era um retrato grande com texto ao lado. Virou um PAR de cartões idênticos:
   mesma caixa, mesmo corte, mesma tipografia. Tamanho é hierarquia — dois
   sócios em tamanhos diferentes leriam como sócio e auxiliar, e o pedido do
   cliente era exatamente o contrário disso.
   ========================================================================== */
/* O CARTÃO NÃO PODE SER MAIOR QUE A FOTOGRAFIA.
   O recorte do Renan sai com 880 px de largura — é o que o original de 1068
   permite com o enquadramento fechado que iguala a cabeça dele à do Thiago.
   Num cartão de 571 px, uma tela de 2× pede 1142: a foto chegava esticada 30%.
   Com 60rem de teto o cartão fica em 463 px, que a 2× pede 926 contra os 880
   que existem. Os 5% que faltam ninguém vê; os 30% viam. */
.socios{position:relative;z-index:2;display:grid;max-width:60rem;margin-inline:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.socio{display:flex;flex-direction:column;
  background:var(--surf-1);border:1px solid var(--linha-2);border-radius:var(--r);
  overflow:hidden;transition:border-color .45s var(--ease),transform .5s var(--ease)}
.socios .socio:hover{border-color:var(--acc-ice);transform:translateY(-3px)}
/* SEM DISSOLUÇÃO. A foto terminava num degradê que ia até metade da altura, e
   o nome morava dentro dele: o retrato acabava num borrão branco e a
   fotografia passava por trás das letras. Corte limpo é melhor — a foto
   termina onde ela termina, um filete marca a divisão, o texto começa depois. */
/* O FADE ERA DO .ret, NÃO DESTE CARTÃO.
    pinta um degradê COM A COR DO FUNDO DA PÁGINA sobre os 58% de
   baixo de toda fotografia do site. Em página preta isso assentava o sujeito
   na base do quadro e a foto se fundia ao fundo. Em página clara, dentro de um
   cartão branco, vira um banho de branco: no retrato do Renan, que tem terno
   escuro e as mãos no colo, o terço de baixo simplesmente lavou.
   Aqui o retrato não tem legenda por cima — o degradê não servia a nada.
   Fora ele, fora a moldura interna, fora a sombra e fora a marca de canto: a
   foto é a tampa do cartão, e tampa não tem moldura própria. */
.socio__foto{position:relative;aspect-ratio:4/5;margin:0;overflow:hidden;
  border:0;border-bottom:1px solid var(--linha);border-radius:0;box-shadow:none;
  background:none}
.socio__foto::after{display:none}
.socio__foto .ret__c{display:none}
.socio__foto img{width:100%;height:100%;object-fit:cover;display:block}
.socio__id{padding:clamp(20px,2.2vw,28px)}
.socio__n{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.9vw,24px);
  line-height:1.18;letter-spacing:-.018em;color:var(--ink)}
.socio__p{margin-top:8px;color:var(--acc-ice)}
.socio__oab{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.socio__oab li{padding:5px 10px;border:1px solid var(--linha-2);border-radius:999px;
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-mut);
  font-variant-numeric:tabular-nums}
.socio__id .creds{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--linha);list-style:none}
.socio__id .creds li{position:relative;padding-left:13px;font-size:13px;
  line-height:1.5;color:var(--ink-mut)}
.socio__id .creds li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--acc)}
.assina__rod{position:relative;z-index:2;margin-top:clamp(20px,2.4vw,30px);
  font-size:12.5px;line-height:1.6;color:var(--ink-dim)}
@media (max-width:760px){ .socios{grid-template-columns:1fr} }

/* ==========================================================================
   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.
   ========================================================================== */
/* UM CANAL SÓ. Eram três números e viraram um: a grade perdeu a razão de
   existir e o cartão passa a ter a largura de um cartão, não a de uma coluna
   vazia ao lado de outra. */
.tels{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(10px,1.2vw,14px);margin-top:clamp(26px,3vw,34px);max-width:23rem}
.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(31,111,178,.055),rgba(255,255,255,.82));
  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 18px 40px -22px rgba(14,22,32,.18)}
.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:var(--acc-ice)}
.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)}

/* ---------- OS PERFIS, COMO CONVITE ----------
   Pilula de contorno com o símbolo e o perfil. Altura de 35 px, acima dos 24
   que a 2.5.8 pede, e com o alvo inteiro clicável — não só o texto.
   `@thiagorumbelsperger.adv` tem 24 caracteres e pede ~215 px; a célula do
   contato tem 373 numa tela de 1440, então as duas empilham em vez de caber
   lado a lado, e é isso mesmo: uma embaixo da outra lê como lista de duas
   pessoas, lado a lado leria como uma opção dividida ao meio. */
.cta__conv{margin:-4px 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.redes{display:flex;flex-wrap:wrap;gap:9px}
.rede{display:inline-flex;align-items:center;gap:9px;max-width:100%;
  padding:8px 16px 8px 12px;border-radius:999px;
  border:1px solid var(--linha-2);background:rgba(255,255,255,.72);
  font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
  transition:border-color .4s,background .3s,transform .45s var(--ease),box-shadow .45s}
.cta__grade .rede{font-size:13.5px;color:var(--ink)}
.rede:hover{border-color:var(--acc);background:#FFFFFF;transform:translateY(-2px);
  box-shadow:0 12px 26px -16px rgba(14,22,32,.26)}
.rede svg{width:17px;height:17px;flex:0 0 auto;color:var(--acc-ice);transition:color .3s}
.rede:hover svg{color:var(--acc)}
.rede span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* no rodapé e no menu o símbolo acompanha o arroba, sem moldura: ali a lista
   inteira já é de links, e pílula no meio de links vira botão perdido */
.rod__ig,.menu__ig{display:inline-flex;align-items:center;gap:9px}
.rod__ig svg,.menu__ig svg{width:16px;height:16px;flex:0 0 auto;color:var(--acc-ice)}
.menu__redes{display:flex;flex-direction:column;gap:10px}

.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);aspect-ratio:1;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:.17em;line-height:1;
  font-size:clamp(14px,1.9vw,23px);white-space:nowrap}
/* a segunda linha da assinatura alinha pela primeira, não pelo emblema:
   emblema + 20 de intervalo + filete de 1 + 20 de intervalo */
.rod__tag{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc-ice);padding-left:calc(clamp(52px,6.6vw,70px) + 41px)}
@media (max-width:760px){.rod__tag{padding-left:0}}
.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)}
/* 24,0 px de altura reprova por arredondamento na 2.5.8: a linha de 13,8 px
   com entrelinha 1,74 dá exatamente 23,99. Três pixels em cima e embaixo
   resolvem sem mexer no ritmo da coluna. */
.rod__col a{width:fit-content;padding-block:3px}
.rod__end a{display:inline-block;padding-block:3px}
.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(255,255,255,.76)}
.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 .aval__g{margin-left:4px;padding-left:14px;
  border-left:1px solid var(--linha-2)}
.aval__acoes{display:flex;flex-wrap:wrap;gap:10px}

/* AS ESTRELAS SÃO AMARELAS, FORA DA PALETA, DE PROPÓSITO.
   Em azul-gelo elas viravam enfeite da página — e o que a seção mostra não é
   enfeite da página, é dado de terceiro. No amarelo do próprio Google a
   fileira lê como citação com fonte, não como gráfico que o site desenhou
   sobre si mesmo. Um caminho só, chamado cinco vezes por <use>. */
.estrelas{display:inline-block;overflow:hidden;line-height:0;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease) .15s}
.dentro .estrelas,.estrelas.dentro{clip-path:inset(0 0 0 0)}
.estrelas svg{height:15px;width:auto;display:block;fill:#FBBC04}
.estrelas--p svg{height:11.5px}

/* o G do Google: quatro caminhos, cores oficiais, nada alterado. Sem ele a
   nota é um número que o site escreveu sobre si mesmo. */
.aval__g{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;
  color:var(--ink-mut)}
.gg{width:15px;height:15px;flex:0 0 auto}

/* 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,.26fr) 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(31,111,178,.09),rgba(255,255,255,.80) 58%)}
.destaque__lado{display:flex;flex-direction:column;justify-content:center;
  gap:clamp(18px,2.2vw,28px)}
.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:flex;align-items:center;gap:8px;margin-top:5px;
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.01em;
  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. */
/* GRADE, NÃO MULTICOLUNA. Com quatro avaliações em `columns:3` a primeira
   coluna ficava com duas e as outras com uma — pé irregular, que é o que o
   cliente viu. Duas por linha, e a ordem do HTML já é do mais longo para o
   mais curto (292, 121, 63 e 34 caracteres): cada linha junta dois textos de
   tamanho parecido, e os dois cartões de uma linha têm sempre a mesma altura. */
.avals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px);margin-top:clamp(12px,1.5vw,20px)}
.aval{display:flex;flex-direction:column;
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r);
  border:1px solid var(--linha-2);background:rgba(255,255,255,.76);
  transition:border-color .45s var(--ease),transform .5s var(--ease)}
.aval .estrelas{margin-bottom:0}
.aval__q{margin-top:15px;font-size:clamp(14px,1.18vw,15.5px);line-height:1.68;
  color:var(--ink-mut)}
.aval__n{margin-top:auto}
.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(31,111,178,.40);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{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .avals{grid-template-columns:1fr}
  .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}
  .estrelas{clip-path: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}
  /* O DIAGRAMA TROCOU DE PEÇAS e esta lista ficou falando dos anéis do
     diagrama antigo. Com movimento reduzido as animações duram 0,01 ms, então
     quem começa em opacity:0 e só ganha opacidade NA animação fica visível; mas
     quem depende de stroke-dashoffset ou translate precisa do estado final
     escrito aqui, senão o desenho aparece torto ou não aparece. */
  .dia__chao{stroke-dashoffset:0}
  .dia__col,.dia__verga,.dia__escala,.dia__txt,.dia__halo,.dia__leg{opacity:1;transform:none}
  .selo .em-ring,.selo .em-ring2,.selo .em-arc,.selo .em-mono path{stroke-dashoffset:0}
  .abre__nome{-webkit-mask-image:none;mask-image:none}
  .abre__barra i{transform: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}
}