/* Maurilio Paulino Junior — site v3 (identidade v4: preto, grafite e prata).
 * Nenhuma cor ou família escrita fora de tokens.css / tokens-identidade.css.
 * Movimento: receitas do transitions.dev adaptadas aos tokens deste site.
 * Regra de ouro do movimento: o estado final é o padrão. O estado "antes" só
 * existe sob html.anima, que só liga com JavaScript e sem pedido de menos movimento. */

/* ============================================================ BASE */
*,*::before,*::after{box-sizing:border-box}
:root{interpolate-size:allow-keywords}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cabecalho-h) + var(--e-sm));
  /* o ícone flutuante não pode cobrir o que recebe foco */
  scroll-padding-bottom:calc(3.75rem + var(--e-lg) + env(safe-area-inset-bottom))}
html,body{overflow-x:clip}
body{margin:0;background:var(--preto);color:var(--cinza-claro);
  font:400 var(--texto-corpo)/1.7 var(--fonte-corpo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fonte-display);font-weight:600;line-height:1.1;
  letter-spacing:-.01em;margin:0;color:var(--branco);overflow-wrap:break-word;
  min-width:0;text-wrap:balance}
p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:var(--fio)}
strong{font-weight:600;color:var(--branco)}
::selection{background:var(--aco-claro);color:var(--preto)}
:focus-visible{outline:var(--fio-forte) solid var(--foco,var(--aco-claro));outline-offset:3px;
  border-radius:var(--raio)}
[hidden]{display:none!important}
a,button,summary{touch-action:manipulation}
html{-webkit-tap-highlight-color:rgb(169 177 186 / .22)}

.faixa{padding-inline:max(var(--margem), env(safe-area-inset-left), env(safe-area-inset-right))}
.quadro{max-width:var(--largura);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.pular{position:fixed;left:var(--e-sm);top:-5rem;z-index:80;padding:var(--e-2xs) var(--e-sm);
  background:var(--branco);color:var(--preto);border-radius:var(--raio);font-weight:600}
.pular:focus{top:var(--e-sm)}
.icone{width:1.15em;height:1.15em;flex:0 0 auto;fill:currentColor}
/* atraso escalonado sem style="" no HTML (uma CSP futura bloqueia atributo de estilo) */
[data-i="1"]{--i:1}[data-i="2"]{--i:2}[data-i="3"]{--i:3}[data-i="4"]{--i:4}
[data-i="5"]{--i:5}[data-i="6"]{--i:6}[data-i="7"]{--i:7}
.link-botao{padding:0;background:none;border:0;font:inherit;color:var(--cinza-claro);cursor:pointer;
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:var(--fio)}
.link-botao:hover{color:var(--branco)}

/* seção clara: concreto, tinta, foco em aço escuro */
.claro{background:var(--concreto);color:var(--tinta-media);--foco:var(--aco)}
.claro h1,.claro h2,.claro h3,.claro strong{color:var(--tinta)}
.claro ::selection{background:var(--tinta);color:var(--branco)}

/* ============================================================ A INSCRIÇÃO
   Identidade v5: PAULINO em Cinzel, ADVOCACIA entre dois fios. Escolhida a
   largura L (--bloco-l), o nome tem corpo n = L ÷ 5,54 e ocupa L; o rótulo tem
   n × 0,3 e começa n × 0,18 abaixo. Mesmos números do identidade/gerar-logo.py. */
.bloco{--bloco-n:calc(var(--bloco-l) / var(--bloco-div-nome));
  display:flex;align-items:center;gap:calc(var(--bloco-n) * .5);width:max-content;max-width:100%;flex:0 0 auto;
  color:var(--bloco-cor,var(--tinta))}
/* emblema (opção 2, escolhida pelo cliente em 08/10/2026): a balança em traço prata, um fio
   vertical e a inscrição. A balança tem a altura da inscrição: n × 1,85 */
.bloco__balanca{display:block;flex:0 0 auto;width:calc(var(--bloco-n) * 1.85);height:auto}
.bloco__fio{align-self:stretch;flex:0 0 1px;width:1px;
  background:linear-gradient(180deg,transparent,#7D8690 20%,#C9CFD5 50%,#7D8690 80%,transparent)}
.bloco__texto{display:block;flex:0 0 auto;width:var(--bloco-l)}
.bloco__nome{display:block;white-space:nowrap;font:600 var(--bloco-n)/1.35 var(--fonte-marca);
  letter-spacing:var(--bloco-tracking);margin-right:calc(-1 * var(--bloco-tracking))}
.bloco__regua{display:flex;align-items:center;gap:1.2em;
  margin-top:calc(var(--bloco-n) * var(--bloco-razao-espaco));
  font:600 max(var(--bloco-rotulo-min,5.5px), calc(var(--bloco-n) * var(--bloco-razao-rotulo)))/1.3 var(--fonte-corpo);
  color:var(--bloco-rotulo,var(--aco))}
.bloco__regua::before,.bloco__regua::after{content:"";flex:1;height:var(--bloco-fio,1px);
  background:var(--bloco-regua,var(--aco))}
.bloco__regua::before{transform-origin:right}
.bloco__regua::after{transform-origin:left}
.bloco__rotulo{letter-spacing:.42em;margin-right:-.42em;white-space:nowrap}
.bloco--negativo{--bloco-cor:var(--branco);--bloco-regua:var(--prata);--bloco-rotulo:var(--aco-claro)}
.bloco--curto{--bloco-rotulo-min:8px}
/* o advogado responsável, logo abaixo da marca no herói */
.heroi__responsavel{margin-top:var(--e-sm);font:400 var(--texto-sm)/1.5 var(--fonte-corpo);color:var(--cinza-claro)}
.heroi__responsavel strong{font-weight:600;color:var(--branco)}
.heroi__responsavel span{display:block;margin-top:.125rem;font-size:var(--texto-xs);color:var(--cinza)}

/* fim das áreas: quem não achou o caso na lista */
.areas__fim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-md);
  margin-top:var(--e-xl);padding-top:var(--e-lg);border-top:var(--fio) solid var(--grafite-3)}
.areas__fim p{max-width:40rem;font-size:var(--texto-lide);line-height:1.5;color:var(--cinza-claro);text-wrap:pretty}
.areas__fim strong{display:block;margin-bottom:var(--e-3xs);font:600 var(--texto-banda)/1.2 var(--fonte-display);color:var(--branco)}

/* ============================================================ BOTÕES */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2xs);
  min-height:var(--alvo);padding:0 var(--e-md);
  font:600 var(--texto-sm)/1.1 var(--fonte-corpo);
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:var(--fio) solid transparent;border-radius:var(--raio);
  transition:background-color var(--dur-rapida) var(--ease-suave),
             border-color var(--dur-rapida) var(--ease-suave),
             color var(--dur-rapida) var(--ease-suave),
             transform var(--dur-rapida) var(--ease-suave)}
.botao:active{transform:translateY(1px)}
.botao--claro{background:var(--branco);color:var(--preto)}
.botao--claro:hover{background:#FFFFFF;border-color:var(--aco-claro)}
.botao--linha{background:transparent;color:var(--branco);border-color:rgb(var(--branco-rgb) / .38)}
.botao--linha:hover{border-color:var(--branco);background:rgb(var(--branco-rgb) / .06)}
.botao--escuro{background:var(--preto);color:var(--branco)}
.botao--escuro:hover{background:var(--grafite-2)}
.botao--grande{min-height:3.5rem;padding-inline:var(--e-lg);font-size:var(--texto-corpo)}

/* seta de "ver mais": receita learn-more do transitions.dev */
.seta{display:inline-flex;align-items:center;gap:.4em;font:600 var(--texto-sm)/1.3 var(--fonte-corpo);
  color:var(--branco);text-decoration:none}
.claro .seta{color:var(--tinta)}
.seta svg{width:1rem;height:1rem;flex:0 0 auto;overflow:visible;
  transition:transform var(--dur-media) var(--ease-suave)}
.seta path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;
  transform-box:view-box;transform-origin:10px 8px;vector-effect:non-scaling-stroke;
  transition:transform var(--dur-media) var(--ease-suave)}
.seta__haste{opacity:0;transition:opacity var(--dur-media) var(--ease-suave)}
.seta:hover svg,.cartao.is-hover .seta svg{transform:translateX(3px)}
.seta:hover .seta__braco--cima,.cartao.is-hover .seta__braco--cima{transform:rotate(8deg)}
.seta:hover .seta__braco--baixo,.cartao.is-hover .seta__braco--baixo{transform:rotate(-8deg)}
.seta:hover .seta__haste,.cartao.is-hover .seta__haste{opacity:1}
.seta span{background:linear-gradient(currentColor,currentColor) left bottom/0 var(--fio) no-repeat;
  transition:background-size var(--dur-media) var(--ease-suave)}
.seta:hover span{background-size:100% var(--fio)}

/* ============================================================ CABEÇALHO */
.cabecalho{position:fixed;inset:0 0 auto;z-index:40;padding-inline:var(--margem);
  border-bottom:var(--fio) solid transparent;view-transition-name:cabecalho;
  transition:background-color var(--dur-media) var(--ease-suave),
             border-color var(--dur-media) var(--ease-suave)}
.cabecalho.is-solido{background:rgb(var(--preto-rgb) / .9);border-bottom-color:var(--grafite-3);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.cabecalho__miolo{height:var(--cabecalho-h);display:flex;align-items:center;
  justify-content:space-between;gap:var(--e-md);max-width:var(--largura);margin-inline:auto}
.marca{display:block;text-decoration:none;padding-block:var(--e-2xs);border-radius:var(--raio)}
.marca .bloco{--bloco-l:8.5rem}
.nav{display:flex;align-items:center;gap:var(--e-lg)}
.nav__lista{display:flex;gap:var(--e-md)}
.nav__lista a{position:relative;display:block;padding-block:var(--e-2xs);
  font:600 var(--texto-sm)/1 var(--fonte-corpo);color:var(--cinza-claro);text-decoration:none;
  transition:color var(--dur-rapida) var(--ease-suave)}
.nav__lista a::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--fio);
  background:var(--prata);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-media) var(--ease-suave)}
.nav__lista a:hover,.nav__lista a[aria-current="page"]{color:var(--branco)}
.nav__lista a:hover::after,.nav__lista a[aria-current="page"]::after{transform:scaleX(1)}
.cabecalho .botao{min-height:2.5rem;padding-inline:var(--e-sm)}
.menu-botao{display:none;align-items:center;justify-content:center;width:var(--alvo);height:var(--alvo);
  background:transparent;color:var(--branco);border:var(--fio) solid rgb(var(--branco-rgb) / .3);
  border-radius:var(--raio);cursor:pointer}
.menu-botao svg{width:1.4rem;height:1.4rem}

/* menu do celular: popover nativo, desce do topo */
.menu-celular{position:fixed;inset:0 0 auto 0;margin:0;width:100%;max-width:none;height:auto;
  padding:var(--e-sm) var(--margem) var(--e-xl);border:0;border-bottom:var(--fio) solid var(--grafite-3);
  background:var(--preto);color:var(--branco);
  opacity:0;transform:translateY(-12px);overscroll-behavior:contain;
  transition:opacity var(--dur-rapida) var(--ease-suave),transform var(--dur-rapida) var(--ease-suave),
             overlay var(--dur-rapida) allow-discrete,display var(--dur-rapida) allow-discrete}
.menu-celular:popover-open{opacity:1;transform:none;transition-duration:var(--dur-curta)}
@starting-style{.menu-celular:popover-open{opacity:0;transform:translateY(-12px)}}
.menu-celular::backdrop{background:rgb(var(--preto-rgb) / .6)}
.menu-celular__topo{display:flex;align-items:center;justify-content:space-between;
  height:calc(var(--cabecalho-h) - var(--e-sm))}
.menu-celular .bloco{--bloco-l:8.5rem}
.menu-celular__lista{margin-top:var(--e-md);border-top:var(--fio) solid var(--grafite-3)}
.menu-celular__lista a{display:flex;align-items:center;min-height:3.75rem;
  border-bottom:var(--fio) solid var(--grafite-3);text-decoration:none;
  font:600 var(--texto-banda)/1.1 var(--fonte-corpo);letter-spacing:-.01em}
.menu-celular .botao{margin-top:var(--e-lg);width:100%}
.menu-celular__lista a[aria-current="page"]{color:var(--aco-claro)}

/* ============================================================ FOTO DE FUNDO
   P&B com o desfoque já no arquivo: a paralaxe só move, não refiltra. */
/* clip, não hidden: hidden ainda é área rolável, e o foco num botão do herói
   rolava a seção por dentro e deslocava moldura e foto */
.foto{position:relative;isolation:isolate;overflow:clip}
.foto__fundo{position:absolute;inset:-8% 0;z-index:-3}
.foto__fundo img{width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--parallax,0px),0) scale(1.04);will-change:transform}
/* .70 é o piso: abaixo disso o pior pixel claro das fotos derruba o cinza-claro de 4,5:1 */
.foto__cortina{position:absolute;inset:0;z-index:-2;background:rgb(var(--preto-rgb) / .7)}
.grao{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;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='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ============================================================ HERÓI */
.heroi{min-height:100svh;display:grid;align-items:end;
  padding-block:calc(var(--cabecalho-h) + var(--e-xl)) var(--e-xl);background:var(--preto)}
.heroi .foto__fundo img{object-position:58% 38%}
.heroi .foto__cortina{background:
  radial-gradient(90% 80% at 80% 32%, rgb(var(--preto-rgb) / .28) 0%, rgb(var(--preto-rgb) / .62) 55%, rgb(var(--preto-rgb) / .9) 100%),
  linear-gradient(180deg, rgb(var(--preto-rgb) / .62) 0%, rgb(var(--preto-rgb) / .25) 32%, rgb(var(--preto-rgb) / .82) 74%, var(--preto) 100%)}
/* moldura fina, do Elias: o quadro em volta da primeira tela */
.heroi__moldura{position:absolute;inset:var(--e-sm);z-index:-1;pointer-events:none;
  border:var(--fio) solid rgb(169 177 186 / .26)}
.heroi__grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:var(--e-xl);align-items:end;width:100%;max-width:var(--largura);margin-inline:auto}
.heroi .bloco{--bloco-l:clamp(13rem, 8rem + 12vw, 20rem);--bloco-rotulo-min:10px;--bloco-fio:1.5px}
.heroi__titulo{margin-top:var(--e-lg);max-width:none;
  font-size:clamp(1.75rem, 1.15rem + 2vw, 2.875rem);line-height:1.12;letter-spacing:-.02em}
.linha{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.linha > span{display:inline-block}
.heroi__lide{margin-top:var(--e-md);max-width:34rem;font-size:var(--texto-lide);line-height:1.55;
  color:var(--cinza-claro);text-wrap:pretty}
.heroi__acoes{margin-top:var(--e-lg);display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-sm) var(--e-lg)}

/* realce prata: marca-texto que desliza atrás da palavra (Spell UI, portado para CSS) */
.realce{--prata-realce:linear-gradient(90deg,#AEB6BF 0%,#DCE1E6 42%,#F1F3F5 55%,#C4CBD2 100%);
  background-image:var(--prata-realce);background-repeat:no-repeat;background-position:left center;
  background-size:100% 100%;color:var(--preto);padding:0 .14em;margin:0 -.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:1px}

/* retrato: a foto de estúdio dele, em cor (a única cor da identidade), num quadro
   de passe-partout grafite com fio prata, e embaixo a placa gravada com o nome,
   no mesmo sistema da inscrição da marca (Cinzel com espaço largo, rótulo em caixa
   alta). Sombra em camadas (beautiful-shadows, "lg"), reforçada para o fundo escuro. */
.retrato{position:relative;justify-self:end;width:100%;max-width:22rem;margin:0;padding-bottom:1.75rem}
.retrato__moldura{position:relative;padding:.625rem;background:var(--grafite);
  box-shadow:0 0 0 1px rgb(174 182 191 / .3),0 2.8px 2.2px rgb(0 0 0 / .07),0 6.7px 5.3px rgb(0 0 0 / .1),
    0 12.5px 10px rgb(0 0 0 / .12),0 22.3px 17.9px rgb(0 0 0 / .14),0 41.8px 33.4px rgb(0 0 0 / .17),0 100px 80px rgb(0 0 0 / .24)}
.retrato__moldura::after{content:"";position:absolute;inset:.3125rem;pointer-events:none;
  border:1px solid rgb(174 182 191 / .2)}
.retrato__moldura img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 25%;
  box-shadow:0 0 0 1px rgb(0 0 0 / .35)}
.retrato__placa{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:grid;justify-items:center;gap:.35rem;
  padding:.75rem 1.25rem .7rem;background:var(--preto);white-space:nowrap;
  box-shadow:0 0 0 1px rgb(174 182 191 / .32),0 1px 1px -.5px rgb(0 0 0 / .2),0 3px 3px -1.5px rgb(0 0 0 / .2),
    0 6px 6px -3px rgb(0 0 0 / .2),0 12px 12px -6px rgb(0 0 0 / .2)}
.retrato__placa::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--prata)}
.retrato__nome{font:600 var(--texto-rotulo)/1.2 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);margin-right:calc(var(--rotulo-espaco) * -1);color:var(--branco)}
.retrato__cargo{font:600 var(--texto-rotulo)/1.2 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);margin-right:calc(var(--rotulo-espaco) * -1);
  text-transform:uppercase;color:var(--aco-claro)}

/* ============================================================ CREDENCIAIS */
.credenciais{background:var(--grafite);border-block:var(--fio) solid var(--grafite-3)}
.credenciais__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:var(--largura);margin-inline:auto}
.credencial{padding:var(--e-md) var(--e-md) var(--e-md) 0;display:grid;align-content:start;gap:var(--e-3xs)}
.credencial + .credencial{padding-left:var(--e-md);border-left:var(--fio) solid var(--grafite-3)}
.credencial dt{font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;color:var(--aco-claro)}
.credencial dd{font:600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.25 var(--fonte-corpo);color:var(--branco);
  font-variant-numeric:lining-nums}
.credencial dd + dd{font:400 var(--texto-xs)/1.5 var(--fonte-corpo);color:var(--cinza)}

/* ============================================================ SEÇÕES */
.secao{padding-block:var(--e-2xl)}
.secao--grafite{background:var(--grafite)}
.titulo{font-size:var(--texto-secao);line-height:1.06;letter-spacing:-.01em;max-width:20ch}
.lide{margin-top:var(--e-md);max-width:var(--leitura);font-size:var(--texto-lide);line-height:1.55;
  color:var(--cinza-claro);text-wrap:pretty}
.claro .lide{color:var(--tinta-media)}
.rotulo{display:flex;align-items:center;gap:var(--e-2xs);margin:0 0 var(--e-sm);
  font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;
  color:var(--aco-claro)}
.rotulo::before{content:"";flex:0 0 auto;width:28px;height:var(--fio-forte);background:currentColor}
.claro .rotulo{color:var(--aco)}

/* ============================================================ ÁREAS */
.areas__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-md);margin-top:var(--e-xl)}
/* cartão que inclina para o ponteiro: receita card-tilt do transitions.dev.
   O ponteiro é lido no invólucro .cartao, que não gira; quem gira é o .cartao__corpo. */
.cartao{position:relative}
.cartao__corpo{position:relative;height:100%;display:flex;flex-direction:column;gap:var(--e-sm);
  padding:var(--e-lg);background:var(--grafite);border:var(--fio) solid var(--grafite-3);
  border-radius:var(--raio-grande);overflow:hidden;
  transform:perspective(1200px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  transition:transform 1000ms var(--ease-suave),border-color var(--dur-media) var(--ease-suave);
  will-change:transform}
.cartao__corpo.is-tilting{transition:transform 400ms var(--ease-suave),border-color var(--dur-media) var(--ease-suave)}
.cartao.is-hover .cartao__corpo{border-color:var(--aco-fio)}
.cartao__brilho{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    radial-gradient(circle 120px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgb(238 241 244 / .42),rgb(238 241 244 / 0) 80%),
    radial-gradient(circle 320px at var(--tilt-gx,50%) var(--tilt-gy,50%),rgb(238 241 244 / .12),rgb(238 241 244 / 0) 85%);
  transition:opacity 300ms var(--ease-suave)}
.cartao.is-hover .cartao__brilho{opacity:.32}
.cartao h3{font-size:var(--texto-banda);max-width:16ch}
.cartao__texto{max-width:36rem;color:var(--cinza-claro);text-wrap:pretty}
.termos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-md);
  margin-top:var(--e-2xs);border-top:var(--fio-forte) solid var(--grafite-3)}
.termos li{padding-block:var(--e-2xs);border-bottom:var(--fio) solid var(--grafite-3);
  font-size:var(--texto-sm);line-height:1.35;color:var(--cinza-claro)}
.cartao .seta{margin-top:auto;padding-top:var(--e-sm)}
/* o cartão inteiro leva à página, sem aninhar link */
.cartao .seta::after{content:"";position:absolute;inset:0;z-index:1}
.cartao .seta:focus-visible{outline:none}
.cartao:has(.seta:focus-visible) .cartao__corpo{outline:var(--fio-forte) solid var(--aco-claro);outline-offset:3px}

/* consumidor: cartão menor, ao comprido, com o extrato desenhado */
.cartao--largo{grid-column:1 / -1}
.cartao--largo .cartao__corpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:var(--e-lg);align-items:center;background:var(--grafite-2)}
.cartao--largo h3{font-size:var(--texto-pergunta)}
.largo__texto{display:flex;flex-direction:column;gap:var(--e-sm);align-items:flex-start}
.largo__texto .termos{align-self:stretch}
.cartao--largo > .cartao__corpo > .termos{align-self:center}
.extrato{justify-self:center;width:100%;max-width:25rem;padding:var(--e-sm)}
.extrato__papel{background:var(--concreto-2);color:var(--tinta);padding:var(--e-md) var(--e-md) var(--e-sm);
  border-radius:var(--raio);transform:rotate(-1.4deg);
  box-shadow:0 1px 1px rgb(0 0 0 / .25),0 6px 12px -4px rgb(0 0 0 / .35),0 24px 40px -16px rgb(0 0 0 / .55);
  font-variant-numeric:tabular-nums lining-nums}
.extrato__cabeca{display:flex;justify-content:space-between;gap:var(--e-sm);padding-bottom:var(--e-2xs);
  border-bottom:var(--fio-forte) solid var(--tinta);
  font:600 .6875rem/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;color:var(--tinta-media)}
.extrato__linhas div{display:flex;justify-content:space-between;gap:var(--e-sm);padding-block:.55rem;
  border-bottom:var(--fio) solid var(--regua);font-size:var(--texto-xs);line-height:1.3}
.extrato__linhas dt{color:var(--tinta-media)}
.extrato__linhas dd{color:var(--tinta);font-weight:600;white-space:nowrap}
.extrato__suspeito dt,.extrato__suspeito dd{color:var(--tinta)}
.extrato__total{border-bottom:0!important;font-weight:600}
.extrato__total dt{color:var(--tinta)!important}
.extrato__nota{margin-top:var(--e-sm);font-size:var(--texto-xs);line-height:1.5;color:var(--cinza);text-align:center}

/* ============================================================ FORMAÇÃO */
.formacao__topo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--e-xl);align-items:end}
.formacao__foto{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--raio)}
.formacao__foto img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
/* régua do tempo: a assinatura do site. Linha que se desenha com a rolagem. */
.regua-tempo{position:relative;margin-top:var(--e-xl);--p:1}
.regua-tempo__trilho{position:absolute;left:.55rem;right:0;top:.55rem;height:var(--fio-forte);
  background:var(--regua)}
.regua-tempo__trilho::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--aco-fio),var(--tinta-media) 60%,var(--tinta));
  transform:scaleX(var(--p));transform-origin:left}
.regua-tempo__marcos{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--e-sm)}
.marco{position:relative;padding-top:var(--e-lg);padding-right:var(--e-2xs)}
.marco::before{content:"";position:absolute;top:0;left:0;width:1.1rem;height:1.1rem;border-radius:50%;
  background:var(--tinta);border:var(--fio-forte) solid var(--tinta);
  transition:background-color var(--dur-media) var(--ease-suave),border-color var(--dur-media) var(--ease-suave),
             transform var(--dur-media) var(--ease-suave)}
.marco--hoje::before{background:var(--concreto);box-shadow:0 0 0 4px rgb(89 98 108 / .18)}
.marco__ano{display:block;font:600 var(--texto-pergunta)/1 var(--fonte-corpo);color:var(--tinta);
  font-variant-numeric:lining-nums}
.marco__titulo{display:block;margin-top:var(--e-2xs);font:600 var(--texto-sm)/1.35 var(--fonte-corpo);color:var(--tinta)}
.marco__texto{display:block;margin-top:var(--e-3xs);font-size:var(--texto-xs);line-height:1.45;color:var(--tinta-suave)}

/* ============================================================ COMO FUNCIONA */
.passos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-lg);margin-top:var(--e-xl)}
.passo{padding-top:var(--e-md);border-top:var(--fio) solid var(--aco-fio)}
.passo__num{display:block;font:600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--fonte-corpo);
  background:var(--prata);-webkit-background-clip:text;background-clip:text;color:transparent}
.passo h3{margin-top:var(--e-sm);font-size:var(--texto-pergunta)}
.passo p{margin-top:var(--e-2xs);max-width:34ch;font-size:var(--texto-sm);color:var(--cinza-claro);text-wrap:pretty}

/* ============================================================ ONDE ATENDO
   Mapa do IBGE com os três estados de inscrição em grafite; o resto do país
   fica em cinza de régua, só para situar. Mouse num estado, no mapa ou na
   legenda, acende os dois (o site.js põe .is-ativo). Sem JS, fica parado e
   legível. O contato da seção é um ícone só, que abre a escolha dos números. */
.onde{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--e-xl);align-items:start;
  grid-template-areas:"intro mapa" "legenda mapa" "contato mapa";grid-template-rows:auto auto 1fr}
.onde__intro{grid-area:intro}
.onde__contato{grid-area:contato;margin-top:var(--e-xl)}

/* o svg tem a proporção da caixa, então left/top em % caem no lugar certo */
.mapa{grid-area:mapa;margin:0}
.mapa__area{position:relative}
.mapa__svg{display:block;width:100%;height:auto}
.mapa__resto,.mapa__uf path{stroke:var(--concreto);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.mapa__resto{fill:var(--regua)}
.mapa__uf path{fill:var(--grafite);transform-box:fill-box;transform-origin:center;
  transition:fill var(--dur-rapida) var(--ease-suave),transform var(--dur-curta) var(--ease-suave)}
.mapa__uf.is-ativo path{fill:var(--preto);transform:scale(1.04)}
.onde.tem-ativo .mapa__uf:not(.is-ativo) path{fill:var(--tinta-suave)}
.mapa__fonte{margin-top:var(--e-2xs);font-size:var(--texto-xs);color:var(--tinta-suave);text-align:right}
/* posições geradas por fontes/mapa-ibge/gerar-mapa.py */
.mapa [data-ponto="am"]{left:24.2%;top:24.5%}
.mapa [data-ponto="mg"]{left:74.4%;top:60.7%}
.mapa [data-ponto="pr"]{left:57.0%;top:76.2%}
.mapa [data-ponto="sp"]{left:64.2%;top:70.3%}

/* nome do estado sobre o mapa; a inscrição sobe em cima dele quando acende */
.mapa__nome{position:absolute;transform:translate(-50%,-50%);padding:.25rem .5rem;border-radius:var(--raio);
  background:var(--branco);color:var(--tinta);font:600 var(--texto-xs)/1.2 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 2px rgb(0 0 0 / .25);
  transition:background-color var(--dur-rapida) var(--ease-suave),color var(--dur-rapida) var(--ease-suave)}
.mapa__nome.is-ativo{background:var(--preto);color:var(--branco)}
.mapa__sigla{display:none}
.mapa__oab{position:absolute;left:50%;bottom:calc(100% + .375rem);padding:.25rem .5rem;border-radius:var(--raio);
  background:var(--preto);color:var(--aco-claro);font-size:.6875rem;letter-spacing:var(--rotulo-espaco);
  opacity:0;transform:translate(-50%,.25rem);pointer-events:none;
  transition:opacity var(--dur-rapida) var(--ease-suave),transform var(--dur-curta) var(--ease-suave)}
.mapa__nome.is-ativo .mapa__oab{opacity:1;transform:translate(-50%,0)}

/* legenda: o grafite do mapa numa marca quadrada antes do nome */
.legenda{grid-area:legenda;margin-top:var(--e-lg);border-top:var(--fio) solid var(--regua)}
.legenda__uf{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--e-sm);
  padding:var(--e-xs) var(--e-2xs) var(--e-xs) var(--e-md);border-bottom:var(--fio) solid var(--regua);
  transition:background-color var(--dur-rapida) var(--ease-suave)}
.legenda__uf::before{content:"";position:absolute;left:var(--e-2xs);top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;
  background:var(--grafite);transition:transform var(--dur-curta) var(--ease-suave)}
.legenda__nome{font:600 var(--texto-pergunta)/1.25 var(--fonte-corpo);color:var(--tinta)}
.legenda__oab{margin-left:auto;font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;color:var(--aco)}
.legenda__uf.is-ativo{background:var(--concreto-2)}
.legenda__uf.is-ativo::before{transform:scale(1.5);background:var(--preto)}

.whats-grande{display:inline-flex;align-items:center;gap:var(--e-sm);padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer}
.whats-grande__icone{position:relative;flex:none;display:grid;place-items:center;width:4.5rem;height:4.5rem;
  border-radius:50%;background:var(--preto);color:var(--branco);border:var(--fio-forte) solid var(--aco-claro);
  box-shadow:0 2px 4px rgb(0 0 0 / .18),0 14px 28px -12px rgb(0 0 0 / .45);
  transition:transform var(--dur-curta) var(--ease-suave),background-color var(--dur-rapida) var(--ease-suave),
             border-color var(--dur-rapida) var(--ease-suave)}
.whats-grande__icone svg{width:2.125rem;height:2.125rem;fill:currentColor}
.whats-grande__icone::after{content:"";position:absolute;inset:calc(var(--fio-forte) * -1);border-radius:50%;
  border:var(--fio) solid var(--aco);opacity:0;pointer-events:none}
.whats-grande__rotulo{display:block;font:600 var(--texto-pergunta)/1.2 var(--fonte-corpo);color:var(--tinta);
  text-decoration:underline transparent;text-underline-offset:.2em;text-decoration-thickness:var(--fio);
  transition:text-decoration-color var(--dur-rapida) var(--ease-suave)}
.whats-grande__dica{display:block;margin-top:var(--e-3xs);font-size:var(--texto-sm);line-height:1.5;color:var(--tinta-media)}
.whats-grande:hover .whats-grande__icone{transform:translateY(-2px);background:var(--grafite);border-color:var(--aco)}
.whats-grande:hover .whats-grande__rotulo{text-decoration-color:currentColor}
.whats-grande:active .whats-grande__icone{transform:scale(.96)}
.whats-grande:focus-visible{outline-offset:6px;border-radius:2.75rem}

/* ============================================================ PERGUNTAS
   Régua de tabela do manual: fio forte no topo, fio fino entre linhas.
   O chevron é feito de duas bordas, para continuar sendo traço. */
.perguntas{margin-top:var(--e-xl);max-width:50rem;border-top:var(--fio-forte) solid var(--tinta)}
.pergunta{border-bottom:var(--fio) solid var(--regua)}
.pergunta > summary{list-style:none;cursor:pointer;display:flex;gap:var(--e-sm);align-items:baseline;
  justify-content:space-between;min-height:var(--alvo);padding-block:var(--e-sm);
  font:600 var(--texto-pergunta)/1.3 var(--fonte-display);letter-spacing:-.01em;color:var(--tinta)}
.pergunta > summary::-webkit-details-marker{display:none}
.pergunta > summary::after{content:"";flex:0 0 auto;width:.6rem;height:.6rem;margin-top:.38em;
  border-right:var(--fio-forte) solid var(--aco);border-bottom:var(--fio-forte) solid var(--aco);
  transform:rotate(45deg);transition:transform var(--dur-curta) var(--ease-suave)}
.pergunta[open] > summary::after{transform:rotate(225deg)}
.pergunta > summary:hover{color:var(--aco)}
.pergunta::details-content{block-size:0;overflow:hidden;
  transition:block-size var(--dur-curta) var(--ease-suave),content-visibility var(--dur-curta) allow-discrete}
.pergunta[open]::details-content{block-size:auto}
.pergunta__corpo{padding-bottom:var(--e-md);max-width:var(--leitura);color:var(--tinta-media);text-wrap:pretty}
.pergunta__corpo p + p{margin-top:var(--e-xs)}

/* ============================================================ CONTATO */
.contato{text-align:left}
.contato .foto__cortina{background:linear-gradient(90deg,rgb(var(--preto-rgb) / .9) 0%,rgb(var(--preto-rgb) / .78) 55%,rgb(var(--preto-rgb) / .72) 100%)}
.contato__grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--e-xl);align-items:end}
.contato__acao{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-sm)}
.contato__nota{font-size:var(--texto-sm);color:var(--cinza-claro)}
.contato__email{font-size:var(--texto-sm);color:var(--cinza-claro)}

/* ============================================================ RODAPÉ */
.rodape{background:var(--preto);color:var(--cinza);border-top:var(--fio) solid var(--grafite-3);
  padding-block:var(--e-xl) calc(var(--e-lg) + 4rem + env(safe-area-inset-bottom));font-size:var(--texto-sm)}
.rodape__grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.5fr);gap:var(--e-lg);
  max-width:var(--largura);margin-inline:auto}
.rodape .bloco{--bloco-l:11rem}
.rodape__aviso{margin-top:var(--e-md);max-width:36ch;font-size:var(--texto-xs);line-height:1.6}
.rodape h2{font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;
  color:var(--aco-claro);margin-bottom:var(--e-sm)}
.rodape li + li{margin-top:var(--e-2xs)}
.rodape a[href^="mailto"]{overflow-wrap:anywhere}
.rodape a{color:var(--cinza-claro);text-decoration:none}
.rodape a:hover{color:var(--branco);text-decoration:underline}
.rodape__base{max-width:var(--largura);margin:var(--e-xl) auto 0;padding-top:var(--e-md);
  border-top:var(--fio) solid var(--grafite-3);display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--e-2xs) var(--e-lg);font-size:var(--texto-xs)}

/* ============================================================ ESCOLHA DO NÚMERO
   Popover nativo: Esc e toque fora fecham sem script. Receita modal do
   transitions.dev (abre em 250ms, fecha em 150ms, escala .96). No celular vira
   folha que sobe de baixo. */
.escolha{position:fixed;inset:0;margin:auto;width:min(27rem, calc(100vw - 2 * var(--margem)));height:fit-content;
  padding:var(--e-lg);background:var(--grafite);color:var(--cinza-claro);
  border:var(--fio) solid var(--grafite-3);border-radius:var(--raio-grande);
  box-shadow:0 2px 4px rgb(0 0 0 / .3),0 24px 64px -12px rgb(0 0 0 / .7);
  opacity:0;transform:scale(var(--escala-popover));overscroll-behavior:contain;
  transition:opacity var(--dur-rapida) var(--ease-suave),transform var(--dur-rapida) var(--ease-suave),
             overlay var(--dur-rapida) allow-discrete,display var(--dur-rapida) allow-discrete}
.escolha:popover-open{opacity:1;transform:none;transition-duration:var(--dur-curta)}
@starting-style{.escolha:popover-open{opacity:0;transform:scale(var(--escala-popover))}}
.escolha::backdrop{background:rgb(var(--preto-rgb) / 0);
  transition:background-color var(--dur-curta) var(--ease-suave),overlay var(--dur-curta) allow-discrete,
             display var(--dur-curta) allow-discrete}
.escolha:popover-open::backdrop{background:rgb(var(--preto-rgb) / .66)}
@starting-style{.escolha:popover-open::backdrop{background:rgb(var(--preto-rgb) / 0)}}
.escolha__topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e-sm)}
.escolha__titulo{font:600 var(--texto-banda)/1.1 var(--fonte-display);color:var(--branco)}
.escolha__fechar{display:inline-flex;align-items:center;justify-content:center;width:var(--alvo);height:var(--alvo);
  margin-right:calc(var(--e-2xs) * -1);background:transparent;color:var(--cinza-claro);border:0;
  border-radius:var(--raio);cursor:pointer}
.escolha__fechar:hover{color:var(--branco);background:var(--grafite-2)}
.escolha__fechar svg{width:1.3rem;height:1.3rem}
.escolha__lide{margin-top:var(--e-2xs);font-size:var(--texto-sm);color:var(--cinza)}
.escolha__opcoes{display:grid;gap:var(--e-xs);margin-top:var(--e-md)}
.opcao{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e-sm);
  min-height:4.5rem;padding:var(--e-sm) var(--e-md);background:var(--branco);color:var(--preto);
  text-decoration:none;border-radius:var(--raio);border:var(--fio) solid transparent;
  transition:background-color var(--dur-rapida) var(--ease-suave),transform var(--dur-rapida) var(--ease-suave)}
.opcao:hover{background:#FFFFFF;transform:translateY(-1px)}
.opcao:active{transform:none}
.opcao__estado{display:block;font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;color:var(--aco)}
.opcao__fone{display:block;margin-top:2px;font:600 var(--texto-pergunta)/1.2 var(--fonte-corpo);
  font-variant-numeric:tabular-nums lining-nums}
.opcao .icone{width:1.6rem;height:1.6rem;color:var(--preto)}
.escolha__nota{margin-top:var(--e-sm);font-size:var(--texto-xs);color:var(--cinza)}


/* ============================================================ PÁGINAS DE ÁREA */
.heroi--pagina{min-height:auto;padding-block:calc(var(--cabecalho-h) + var(--e-2xl)) var(--e-xl)}
.heroi--pagina .heroi__grade{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:end}
.heroi--pagina h1{font-size:clamp(2.25rem, 1.4rem + 3.4vw, 4rem);line-height:1.04;letter-spacing:-.01em;max-width:14ch}
.trilha ol{display:flex;flex-wrap:wrap;gap:var(--e-2xs);font-size:var(--texto-xs);color:var(--cinza)}
.trilha li + li::before{content:"/";margin-right:var(--e-2xs);color:var(--aco-fio)}
.trilha a{color:var(--cinza-claro);text-decoration:none}
.trilha a:hover{color:var(--branco);text-decoration:underline}
.trilha + h1{margin-top:var(--e-md)}
.heroi__credencial{margin-top:var(--e-md);font:600 var(--texto-rotulo)/1.5 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);
  text-transform:uppercase;color:var(--aco-claro)}
/* nesta página: índice das subáreas no herói */
.indice-heroi{align-self:end;padding:var(--e-md);background:rgb(48 48 46 / .7);border:var(--fio) solid var(--grafite-3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.indice-heroi .rotulo{margin-bottom:var(--e-xs)}
.indice-heroi ol{columns:1}
.indice-heroi li a{display:block;padding-block:.4rem;border-bottom:var(--fio) solid var(--grafite-3);
  font-size:var(--texto-sm);color:var(--cinza-claro);text-decoration:none}
.indice-heroi li a:hover{color:var(--branco)}

.guia{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--e-2xl);align-items:start}
.guia__indice{position:sticky;top:calc(var(--cabecalho-h) + var(--e-md))}
.guia__indice ol{border-top:var(--fio-forte) solid var(--tinta)}
.guia__indice a{display:block;padding:.55rem 0 .55rem var(--e-sm);border-bottom:var(--fio) solid var(--regua);
  font-size:var(--texto-sm);line-height:1.35;color:var(--tinta-media);text-decoration:none;
  border-left:var(--fio-forte) solid transparent;transition:color var(--dur-rapida),border-color var(--dur-rapida)}
.guia__indice a:hover{color:var(--tinta)}
.guia__indice a[aria-current="true"]{color:var(--tinta);border-left-color:var(--tinta)}
.guia__texto{max-width:44rem;font-size:var(--texto-guia);line-height:1.72}
.guia__abertura{font-size:var(--texto-lide);line-height:1.6;color:var(--tinta);text-wrap:pretty}
.guia__secao{padding-top:var(--e-xl);margin-top:var(--e-xl);border-top:var(--fio) solid var(--regua)}
.guia__secao:first-of-type{margin-top:var(--e-lg)}
.guia__secao h2{font-size:clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);max-width:24ch}
.guia__secao p{margin-top:var(--e-sm);text-wrap:pretty}
/* pedido do cliente em 08/10/2026: texto das áreas justificado */
.guia__texto p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.guia__secao ul.lista{margin-top:var(--e-sm)}
.lista li{position:relative;padding-left:1.25rem}
.lista li + li{margin-top:.35rem}
.lista li::before{content:"";position:absolute;left:0;top:.8em;width:.55rem;height:var(--fio-forte);background:var(--aco)}
.documentos{margin-top:var(--e-md);padding:var(--e-md);background:var(--concreto-2);border-left:var(--fio-forte) solid var(--tinta)}
.documentos .rotulo{margin-bottom:var(--e-2xs)}
.documentos p:not(.rotulo){margin-top:0;font-size:var(--texto-sm);color:var(--tinta-media)}
.documentos .rotulo{margin-top:0}
.autor{margin-top:var(--e-2xl);padding:var(--e-md) var(--e-lg);border:var(--fio) solid var(--regua);
  background:var(--concreto-2);display:grid;gap:var(--e-2xs);font-size:var(--texto-sm)}
.autor strong{font:600 var(--texto-pergunta)/1.25 var(--fonte-corpo)}
.autor p{color:var(--tinta-media)}
.empresa{margin-top:var(--e-md);padding:var(--e-md);border:var(--fio) dashed var(--aco)}

/* ============================================================ MOVIMENTO
   Tudo abaixo só age sob html.anima (JS ligado e sem pedido de menos movimento). */

/* 1. entrada do herói, ao carregar */
@keyframes sobe-linha{from{transform:translateY(108%)}to{transform:none}}
@keyframes bloco-linha{from{clip-path:inset(0 0 100% 0);transform:translateY(35%)}to{clip-path:inset(0);transform:none}}
@keyframes risca{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aparece{from{opacity:0;transform:translateY(var(--dist-texto));filter:blur(var(--blur-texto))}
  to{opacity:1;transform:none;filter:none}}
@keyframes marca-texto{from{background-size:0% 100%;color:inherit}to{background-size:100% 100%;color:var(--preto)}}
@keyframes moldura{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

.anima .heroi .bloco__nome{animation:bloco-linha 900ms var(--ease-suave) both;animation-delay:80ms}
.anima .heroi .bloco__regua::before,.anima .heroi .bloco__regua::after{animation:risca var(--dur-realce) var(--ease-suave) both;animation-delay:360ms}
.anima .heroi .bloco__rotulo{animation:aparece var(--dur-lenta) var(--ease-suave) both;animation-delay:520ms}
.anima .heroi .linha > span{animation:sobe-linha 800ms var(--ease-suave) both;
  animation-delay:calc(420ms + var(--i,0) * 100ms)}
.anima .heroi .realce{animation:marca-texto var(--dur-realce) var(--ease-suave) both;
  animation-delay:calc(1000ms + var(--i,0) * 200ms)}
.anima .heroi [data-entra]{animation:aparece 700ms var(--ease-suave) both;
  animation-delay:calc(650ms + var(--i,0) * 80ms)}
.anima .heroi__moldura{animation:moldura 1400ms var(--ease-suave) both;animation-delay:120ms}

/* 2. revelar ao rolar: o JS põe .is-in quando o bloco entra na tela */
.anima [data-revela]{opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--ease-suave),transform 700ms var(--ease-suave);
  transition-delay:calc(var(--i,0) * var(--dur-micro))}
.anima [data-revela="texto"]{filter:blur(var(--blur-texto));
  transition:opacity var(--dur-lenta) var(--ease-suave),transform var(--dur-lenta) var(--ease-suave),
             filter var(--dur-lenta) var(--ease-suave);transition-delay:calc(var(--i,0) * var(--dur-micro))}
.anima [data-revela].is-in{opacity:1;transform:none;filter:none}

/* 3. realce fora do herói: desliza quando entra na tela */
.anima .realce[data-revela]{opacity:1;transform:none;filter:none;background-size:0% 100%;color:inherit;
  transition:background-size var(--dur-realce) var(--ease-suave),color var(--dur-realce) var(--ease-suave);
  transition-delay:300ms}
.anima .realce[data-revela].is-in{background-size:100% 100%;color:var(--preto)}

/* 4. régua do tempo: o JS escreve --p conforme a rolagem e marca .is-passou */
.anima .regua-tempo{--p:0}
.anima .marco:not(.is-passou)::before{background:var(--concreto);border-color:var(--regua);transform:scale(.85)}

/* 5. transição entre as três páginas, sem script */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-media)}

/* 6. onde atendo: o país aparece, os três estados escurecem um a um, os nomes
   sobem e Paranavaí pulsa três vezes. Keyframes só com "from": quando acabam,
   o hover volta a mandar na cor e no transform. O ícone solta duas ondas. */
@keyframes onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
@keyframes uf-acende{from{fill:var(--regua)}}
@keyframes nome-sobe{from{opacity:0;transform:translate(-50%,-10%)}}
.anima .mapa:not(.is-in) .mapa__uf path{fill:var(--regua)}
.anima .mapa:not(.is-in) .mapa__nome{opacity:0}
.anima .mapa.is-in .mapa__uf path{animation:uf-acende 700ms var(--ease-suave) backwards}
.anima .mapa.is-in .mapa__uf[data-uf="pr"] path{animation-delay:250ms}
.anima .mapa.is-in .mapa__uf[data-uf="mg"] path{animation-delay:400ms}
.anima .mapa.is-in .mapa__uf[data-uf="am"] path{animation-delay:550ms}
.anima .mapa.is-in .mapa__uf[data-uf="sp"] path{animation-delay:700ms}
.anima .mapa.is-in .mapa__nome{animation:nome-sobe var(--dur-lenta) var(--ease-suave) backwards}
.anima .mapa.is-in .mapa__nome[data-uf="pr"]{animation-delay:700ms}
.anima .mapa.is-in .mapa__nome[data-uf="mg"]{animation-delay:850ms}
.anima .mapa.is-in .mapa__nome[data-uf="am"]{animation-delay:1000ms}
.anima .mapa.is-in .mapa__nome[data-uf="sp"]{animation-delay:1150ms}
.anima .onde__contato.is-in .whats-grande__icone::after{animation:onda 1600ms var(--ease-suave) 500ms 2}

/* ============================================================ RESPONSIVO */
@media (max-width:68rem){
  .nav__lista{gap:var(--e-sm)}
  .credenciais__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credencial:nth-child(3){padding-left:0;border-left:0}
  .credencial:nth-child(n+3){border-top:var(--fio) solid var(--grafite-3)}
  .regua-tempo__marcos{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--e-lg)}
  .regua-tempo__trilho{display:none}
  .guia{grid-template-columns:minmax(0,1fr);gap:var(--e-lg)}
  .guia__indice{display:none}
}
@media (max-width:62rem){
  .nav__lista,.cabecalho .nav .botao{display:none}
  .menu-botao{display:inline-flex}
  .heroi__grade,.heroi--pagina .heroi__grade{grid-template-columns:minmax(0,1fr);gap:var(--e-lg)}
  .retrato{justify-self:start;max-width:20rem}
  .areas__grade{grid-template-columns:minmax(0,1fr)}
  .cartao--largo .cartao__corpo{grid-template-columns:minmax(0,1fr)}
  .extrato{justify-self:start}
  .formacao__topo{grid-template-columns:minmax(0,1fr)}
  .passos{grid-template-columns:minmax(0,1fr)}
  .onde{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "mapa" "legenda" "contato";grid-template-rows:none}
  .mapa{margin-top:var(--e-lg);max-width:40rem}
  .contato__grade{grid-template-columns:minmax(0,1fr)}
  .rodape__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape__marca{grid-column:1 / -1}
}
@media (max-width:46rem){
  .secao{padding-block:var(--e-xl)}
  .heroi{min-height:auto;padding-top:calc(var(--cabecalho-h) + var(--e-lg))}
  .heroi__moldura{inset:var(--e-2xs)}
  .heroi__acoes .botao{width:100%}
  /* vazia, a vaga não pode virar um bloco cinza de 470px no celular */
  .retrato{max-width:18rem;width:84%}
  .retrato__nome{font-size:.75rem}
  .credenciais__lista{grid-template-columns:minmax(0,1fr)}
  .credencial,.credencial + .credencial{padding:var(--e-sm) 0;border-left:0;border-top:var(--fio) solid var(--grafite-3)}
  .credencial:first-child{border-top:0}
  .cartao__corpo{padding:var(--e-md)}
  /* mapa estreito: sigla no lugar do nome (a legenda logo abaixo diz OAB/PR)
     e o rótulo do Paraná um pouco mais ao sul, ainda dentro do estado */
  .mapa__nome{padding:.2rem .4rem;font-size:.6875rem;letter-spacing:var(--rotulo-espaco)}
  .mapa__extenso{display:none}
  .mapa__sigla{display:inline}
  .mapa [data-ponto="pr"]{top:78.8%}
  .termos{grid-template-columns:minmax(0,1fr)}
  /* régua do tempo na vertical */
  .regua-tempo__trilho{display:block;left:.55rem;right:auto;top:0;bottom:0;width:var(--fio-forte);height:auto}
  .regua-tempo__trilho::after{background:linear-gradient(180deg,var(--aco-fio),var(--tinta-media) 60%,var(--tinta));
    transform:scaleY(var(--p));transform-origin:top}
  .regua-tempo__marcos{grid-template-columns:minmax(0,1fr);row-gap:var(--e-md)}
  .marco{padding-top:0;padding-left:var(--e-xl)}
  .marco::before{top:.1rem}
  .rodape__grade{grid-template-columns:minmax(0,1fr)}
  .heroi--pagina{padding-block:calc(var(--cabecalho-h) + var(--e-xl)) var(--e-lg)}

  .escolha{inset:auto 0 0 0;margin:0;width:100%;max-width:none;
    border-radius:var(--raio-grande) var(--raio-grande) 0 0;border-bottom:0;
    padding-bottom:calc(var(--e-lg) + env(safe-area-inset-bottom));transform:translateY(100%);opacity:1}
  .escolha:popover-open{transform:none}
  @starting-style{.escolha:popover-open{transform:translateY(100%);opacity:1}}
}

/* ============================================================ MENOS MOVIMENTO */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .cartao__corpo{transform:none!important}
  .foto__fundo img{transform:scale(1.04)!important}
  @view-transition{navigation:none}
}

/* ============================================================ v5, 08/10/2026 */
.heroi__lide + .heroi__lide{margin-top:var(--e-sm)}
/* assinatura do texto "Sobre mim", que é do próprio cliente */
.assinatura{margin-top:var(--e-md);display:grid;gap:var(--e-3xs)}
.assinatura strong{font:600 var(--texto-pergunta)/1.25 var(--fonte-corpo);color:var(--tinta)}
.assinatura span{font:600 var(--texto-rotulo)/1.4 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;color:var(--aco)}
/* títulos das páginas de área com o texto do cliente, mais longos que os da v4:
   cada linha (.linha) precisa caber inteira na coluna do herói */
.heroi--pagina h1{font-size:clamp(1.875rem, 1rem + 2.4vw, 2.875rem);max-width:none}
/* na inicial, a marca do cabeçalho espera a do herói sair da tela (site.js) */
.marca{transition:opacity var(--dur-media) var(--ease-suave),visibility var(--dur-media)}
.cabecalho.marca-oculta .marca{opacity:0;visibility:hidden}
/* régua do tempo: enquanto ele não manda o ano ou a instituição (pendências 19 a 22),
   o marcador some. No desktop o ano fica invisível para os títulos continuarem na
   mesma linha; na vertical do celular ele sai do fluxo. Ao preencher, tirar o
   data-pendencia do span. */
.marco__ano[data-pendencia]{visibility:hidden}
.marco__texto[data-pendencia]{display:none}
@media (max-width:46rem){ .marco__ano[data-pendencia]{display:none} }
/* herói: as quatro áreas em linha de apoio, dentro do h1, acima do slogan dele */
.heroi__areas{display:block;margin-bottom:var(--e-xs);font:600 var(--texto-rotulo)/1.5 var(--fonte-corpo);
  letter-spacing:var(--rotulo-espaco);text-transform:uppercase;color:var(--aco-claro);text-wrap:balance}
/* com o Paraná aceso, a etiqueta da OAB sobe por cima do nome de São Paulo: ele sai da frente */
.mapa__nome{transition:opacity var(--dur-rapida) var(--ease-suave),background-color var(--dur-rapida) var(--ease-suave),color var(--dur-rapida) var(--ease-suave)}
.mapa:has(.mapa__nome[data-uf="pr"].is-ativo) .mapa__nome[data-uf="sp"]{opacity:0}
/* tela muito estreita: o retrato ocupa a largura toda para a placa caber no quadro */
@media (max-width:22rem){ .retrato{width:100%;max-width:none} }
/* pedido do cliente em 08/10/2026: parágrafo de abertura do herói justificado,
   com hifenização para não abrir buracos entre as palavras */
.heroi__lide{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* áreas: bancário e consumidor num cartão só (texto e extrato em cima, as duas
   listas embaixo), a frase final da seção e as listas em <details> */
.cartao--duplo .largo__listas{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--e-md) var(--e-lg);padding-top:var(--e-md);border-top:var(--fio) solid var(--grafite-3)}
.assuntos > summary{list-style:none;cursor:pointer}
.assuntos > summary::-webkit-details-marker{display:none}
@media (min-width:46.01rem){
  /* desktop: lista sempre aberta; o resumo some, e no cartão duplo vira o rótulo da lista */
  .assuntos > summary{display:none}
  .cartao--duplo .assuntos > summary{display:block;pointer-events:none;margin-bottom:var(--e-2xs);
    font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;color:var(--aco-claro)}
  .assuntos__ver{display:none}
}
@media (max-width:46rem){
  /* celular: cada lista é um botão de largura toda, com seta que gira ao abrir */
  .cartao--duplo .largo__listas{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0;border-top:0}
  .assuntos > summary{position:relative;display:flex;align-items:center;min-height:var(--alvo);
    padding:var(--e-xs) 2rem var(--e-xs) 0;border-top:var(--fio) solid var(--grafite-3);border-bottom:var(--fio) solid var(--grafite-3);
    font:600 var(--texto-sm)/1.35 var(--fonte-corpo);color:var(--branco)}
  .assuntos + .assuntos > summary{border-top:0}
  .assuntos > summary::after{content:"";position:absolute;right:.35rem;top:50%;width:.55rem;height:.55rem;
    border-right:2px solid var(--aco-claro);border-bottom:2px solid var(--aco-claro);
    transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-curta) var(--ease-suave)}
  .assuntos[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
  .assuntos > summary:focus-visible{outline:var(--fio-forte) solid var(--aco-claro);outline-offset:2px}
  .assuntos[open] > .termos{margin-top:var(--e-2xs)}
}
/* o link "Ver a página" cobre o cartão inteiro; a lista fica por cima para o toque abrir e fechar */
.cartao .assuntos{position:relative;z-index:2}
/* celular, 08/10/2026: texto de abertura um passo menor (o botão do herói volta para a
   primeira tela), resumo das listas em bloco e alvos de toque com 44 px */
@media (max-width:46rem){
  :root{--texto-lide:1.125rem}
  .assuntos > summary{display:block}
  .heroi .seta,.cartao .seta{min-height:var(--alvo)}
  .rodape li a,.rodape .link-botao{display:inline-flex;align-items:center;min-height:var(--alvo)}
  .rodape li + li{margin-top:0}
}
@media (max-width:46rem){
  /* topo mais justo no celular: o botão do WhatsApp entra na primeira tela em 375 × 812 */
  .heroi{padding-top:calc(var(--cabecalho-h) + var(--e-sm))}
  .heroi__titulo{margin-top:var(--e-md)}
  .heroi__areas{margin-bottom:var(--e-2xs)}
  .heroi__lide{margin-top:var(--e-sm)}
  .heroi__acoes{margin-top:var(--e-md)}
  .contato__email a{display:inline-block;padding-block:.75rem}
}
/* emblema no herói: a balança e o fio entram junto com o nome */
.anima .heroi .bloco__balanca,.anima .heroi .bloco__fio{animation:aparece var(--dur-lenta) var(--ease-suave) both;animation-delay:200ms}
/* tela muito estreita: o emblema com a balança precisa caber em 288 px */
@media (max-width:22rem){ .heroi .bloco{--bloco-l:11rem} }
/* ============================================================ herói, 08/10/2026 (noite)
   Cabe inteiro na tela de notebook (1366 × 657 de janela útil para cima): texto e
   retrato centralizados na altura, a foto dimensionada pela altura da janela, o título
   em duas linhas e o resumo das quatro áreas com links. O texto completo de cada área
   está no cartão dela, em "Assessoria jurídica". */
.resumo{margin-top:var(--e-lg);max-width:none}
.resumo__titulo{font:600 var(--texto-rotulo)/1.3 var(--fonte-corpo);letter-spacing:var(--rotulo-espaco);text-transform:uppercase;color:var(--aco-claro)}
.resumo__lista{margin-top:var(--e-xs);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--e-md);
  border-top:var(--fio) solid rgb(174 182 191 / .22)}
.resumo__lista a{display:block;height:100%;padding:var(--e-xs) 0;text-decoration:none;color:inherit}
.resumo__lista strong{display:block;font:600 1.0625rem/1.25 var(--fonte-corpo);color:var(--branco);
  transition:color var(--dur-rapida) var(--ease-suave)}
.resumo__lista span{display:block;margin-top:.3rem;font-size:var(--texto-xs);line-height:1.45;color:var(--cinza);text-wrap:pretty}
.resumo__lista a:hover strong{color:var(--aco-claro)}
.resumo__lista a:focus-visible{outline:var(--fio-forte) solid var(--aco-claro);outline-offset:3px}
.areas__nota{margin-top:var(--e-lg);max-width:var(--leitura);font-size:var(--texto-lide);line-height:1.55;
  color:var(--cinza-claro);text-wrap:pretty}
#area-bancaria{scroll-margin-top:calc(var(--cabecalho-h) + var(--e-md))}
@media (min-width:62.01rem){
  .heroi{align-items:center;padding-block:calc(var(--cabecalho-h) + var(--e-md)) var(--e-lg)}
  .heroi__grade{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(2rem, 4vw, 4rem)}
  .heroi .bloco{--bloco-l:clamp(12rem, 6rem + 9vw, 15.5rem)}
  .heroi__titulo{margin-top:var(--e-md);font-size:clamp(1.75rem, 1rem + 2vw, 2.625rem)}
  /* foto pela altura da janela: quadro 3:4 + passe-partout + placa cabem em 100svh */
  .retrato{width:clamp(16rem, calc((100svh - var(--cabecalho-h) - 7.25rem) * .75 + 1.25rem), 28rem);max-width:none}
}
@media (max-width:62rem){
  .resumo__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:22rem){
  .resumo__lista{grid-template-columns:minmax(0,1fr)}
}
/* notebook de janela baixa (1366 × 768 com a barra do navegador ≈ 657 px úteis):
   tudo um passo mais justo para o herói caber inteiro */
@media (min-width:62.01rem) and (max-height:46rem){
  .heroi{padding-block:calc(var(--cabecalho-h) + var(--e-xs)) var(--e-sm)}
  .heroi .bloco{--bloco-l:12.5rem}
  .heroi__responsavel{margin-top:var(--e-2xs)}
  .heroi__titulo{margin-top:var(--e-sm);font-size:clamp(1.75rem, 1rem + 1.6vw, 2.25rem)}
  .heroi__acoes{margin-top:var(--e-md)}
  .resumo{margin-top:var(--e-md)}
  .retrato{width:clamp(16rem, calc((100svh - var(--cabecalho-h) - 5.5rem) * .75 + 1.25rem), 28rem)}
}
/* largura intermediária (tablet deitado, notebook pequeno): foto menor e resumo em 2 × 2 */
@media (min-width:62.01rem) and (max-width:75rem){
  .retrato{max-width:21rem}
  .resumo__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* resumo do herói justificado, com hifenização, a pedido (08/10/2026) */
.resumo__lista span{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* com o texto justificado, coluna estreita abre buracos: o resumo fica em 2 × 2
   (≈ 300 px por coluna no notebook) e em uma coluna só no celular */
.resumo__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
.resumo__lista span{text-wrap:wrap}
@media (max-width:46rem){ .resumo__lista{grid-template-columns:minmax(0,1fr)} }
@media (min-width:62.01rem) and (max-height:46rem){ .resumo__lista a{padding:var(--e-2xs) 0} }
/* sem a bola flutuante (08/10/2026): o botão do WhatsApp do cabeçalho fica sempre à
   vista. No celular e no tablet ele vira um ícone de 46 px ao lado do menu */
@media (max-width:62rem){
  .cabecalho .nav .nav__whats{display:inline-flex;width:var(--alvo);height:var(--alvo);padding:0;justify-content:center}
  .nav__whats .icone{margin:0}
  .nav__whats-texto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .nav{gap:var(--e-xs)}
}
/* celular estreito (até 384 px): marca do cabeçalho menor e espaços mais curtos, para a
   marca, o ícone do WhatsApp e o menu caberem dentro da margem */
@media (max-width:24rem){
  .marca .bloco,.menu-celular .bloco{--bloco-l:7rem}
  .cabecalho__miolo{gap:var(--e-xs)}
  .nav{gap:var(--e-2xs)}
}