/* ============================================================
   Amorim & Bolari — site v2
   Sistema: Deep Space Blue + Graphite sobre preto e Alabaster.
   Montserrat única. Cantos retos. Régua de 8px.
   ============================================================ */

:root{
  /* --- paleta oficial (manual de identidade) --- */
  --preto:#05070A;
  --preto-2:#0A0D13;
  --tinta:#111318;
  --grafite:#33343E;
  --azul:#123859;
  --azul-2:#0C2740;
  --acento:#3D7EB4;
  --acento-claro:#639BC8;
  --alabastro:#DEDFE4;
  --claro:#F2F3F4;
  --bege:#E8E8E6;
  --branco:#FFFFFF;
  --rosewood:#BC2052;

  /* --- texto --- */
  --sobre-claro:rgba(17,19,24,.86);
  --sobre-escuro:rgba(255,255,255,.78);
  --linha-clara:rgba(17,19,24,.14);
  --linha-escura:rgba(255,255,255,.16);

  /* --- link em texto corrido sobre fundo claro:
         o acento reprova AA (3,9), o azul passa (10,9) --- */
  --link-claro:var(--azul);

  --fonte:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --max:1200px;
  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(88px,11vw,168px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--claro);color:var(--tinta);
  font-family:var(--fonte);font-size:16.5px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acento);color:#fff}

/* ---------- tipografia ---------- */
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(2.5rem,6vw,5rem);letter-spacing:-.045em;line-height:.98}
h2{font-size:clamp(1.9rem,4vw,3.25rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.02em;line-height:1.24}
.lead{font-size:clamp(1.02rem,1.3vw,1.19rem);line-height:1.66;max-width:64ch;text-wrap:pretty}
.mini{font-size:13.5px;line-height:1.6}
.sobre{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--acento);display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.sobre::before{content:"";width:34px;height:1px;background:currentColor;opacity:.55;flex:none}
.suave{color:var(--sobre-claro)}
.escuro .suave,.azulado .suave{color:var(--sobre-escuro)}
.escuro .sobre,.azulado .sobre{color:var(--acento-claro)}

/* ---------- layout ---------- */
.wrap{width:min(var(--max),100% - var(--gut)*2);margin-inline:auto}
.sec{padding:var(--sec-y) 0;position:relative}
.sec--claro{background:var(--claro)}
.sec--bege{background:var(--bege)}
.escuro{background:var(--preto);color:var(--branco)}
.azulado{background:var(--azul);color:var(--branco)}
.cabeca{max-width:60ch;margin-bottom:clamp(40px,5vw,68px)}
.cabeca h2 + .lead{margin-top:22px}

/* ---------- grão ---------- */
.grao{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- botões ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{
  --bg:var(--acento);--fg:#fff;--bd:var(--acento);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:18px 34px;font-size:14px;font-weight:700;letter-spacing:.02em;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,color .3s,border-color .3s;
}
.btn span{position:relative;z-index:1}
.btn i{font-style:normal;transition:transform .3s;position:relative;z-index:1}
.btn:hover{transform:translateY(-2px)}
.btn:hover i{transform:translateX(5px)}
.btn--p:hover{--bg:var(--azul);--bd:var(--azul)}
.btn--g{--bg:transparent;--fg:var(--tinta);--bd:var(--linha-clara)}
.btn--g:hover{--bd:var(--tinta)}
.escuro .btn--g,.azulado .btn--g,.hero .btn--g,.cta .btn--g{--fg:#fff;--bd:rgba(255,255,255,.34)}
.escuro .btn--g:hover,.azulado .btn--g:hover,.hero .btn--g:hover,.cta .btn--g:hover{--bg:#fff;--fg:var(--preto);--bd:#fff}
.btn--zap{--bg:#fff;--fg:var(--preto);--bd:#fff}
.btn--zap:hover{--bg:var(--acento-claro);--bd:var(--acento-claro)}

/* ---------- navegação ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .4s,backdrop-filter .4s,border-color .4s,transform .4s;
  border-bottom:1px solid transparent;
}
.nav.solida{background:rgba(5,7,10,.88);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--linha-escura)}
.nav.oculta{transform:translateY(-100%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.nav__logo img{height:42px;width:auto}
.nav__links{display:flex;gap:34px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.82)}
.nav__links a{position:relative;padding:6px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--acento-claro);transition:width .3s}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
.nav .btn{padding:13px 24px;font-size:12.5px}
/* botão Menu — texto + ícone, separados por barra */
.nav__menu{display:none;align-items:center;gap:16px;padding:10px 2px 10px 20px;position:relative}
.nav__menu::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(18deg);
  width:1px;height:26px;background:rgba(255,255,255,.34);
}
.nav__menu-txt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff}
.nav__menu-icone{display:flex;flex-direction:column;gap:5px;width:24px}
.nav__menu-icone i{display:block;height:1.6px;background:#fff;transition:transform .35s,opacity .25s}
.nav__menu-icone i:nth-child(2){width:70%;margin-left:auto}
.nav.aberta .nav__menu-icone i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav.aberta .nav__menu-icone i:nth-child(2){opacity:0}
.nav.aberta .nav__menu-icone i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* painel do menu */
.painel{
  position:fixed;inset:0;z-index:49;background:var(--preto);
  display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--gut) 48px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.3,1),visibility .4s;
}
.nav.aberta ~ .painel,.painel.aberto{opacity:1;visibility:visible;transform:none}
.painel a{
  display:flex;align-items:baseline;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--linha-escura);
  font-size:clamp(1.5rem,7vw,2.2rem);font-weight:600;letter-spacing:-.035em;color:#fff;
}
.painel a b{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--acento);min-width:26px}
.painel__zap{margin-top:36px}
.painel__zap .btn{width:100%;justify-content:center}

/* ---------- HERO ---------- */
/* palco de rolagem: a altura extra é o curso que move os frames */
.hero{position:relative;height:250svh;background:var(--preto)}
.hero__palco{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media canvas,.hero__media video,.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* gradação: o clipe é céu claro, o site é escuro */
  filter:grayscale(.42) contrast(1.16) brightness(.56) saturate(.7);
}
.hero__tinta{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(5,7,10,.72) 0%,rgba(5,7,10,.18) 30%,rgba(5,7,10,.68) 70%,var(--preto) 100%),
    linear-gradient(96deg,rgba(18,56,89,.66) 0%,rgba(18,56,89,.06) 60%,rgba(12,39,64,.48) 100%);
}
.hero__vinheta{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 50% 42%,transparent 34%,rgba(5,7,10,.72) 100%)}
.hero__part{position:absolute;inset:0;z-index:3}
.hero .wrap{position:relative;z-index:4;padding-block:clamp(120px,15vh,190px) clamp(48px,7vh,84px)}
.hero__kicker{
  font-size:clamp(1.02rem,1.5vw,1.24rem);font-weight:500;color:var(--acento-claro);
  letter-spacing:-.01em;margin-bottom:20px;
}
.hero h1{color:#fff;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--acento-claro)}
.hero__lead{margin-top:26px;color:rgba(255,255,255,.86);max-width:52ch;text-wrap:pretty}
.hero__lead b{color:#fff;font-weight:600}
.hero__base{
  margin-top:clamp(44px,6vh,72px);padding-top:26px;border-top:1px solid var(--linha-escura);
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,58px);align-items:flex-end;
}
.hero__prova{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px)}
.hero__prova div{display:flex;flex-direction:column;gap:3px}
.hero__prova b{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
.hero__prova span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hero__estrelas{color:var(--acento-claro);letter-spacing:.1em;font-size:13px}
.hero__rolar{
  display:none;position:absolute;right:var(--gut);bottom:26px;z-index:5;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__rolar::after{content:"";width:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);animation:desce 2.4s ease-in-out infinite}
@keyframes desce{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- faixa de plataformas ---------- */
.faixa{background:var(--preto-2);border-block:1px solid var(--linha-escura);padding:22px 0;overflow:hidden;position:relative}
.faixa::before,.faixa::after{content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none}
.faixa::before{left:0;background:linear-gradient(90deg,var(--preto-2),transparent)}
.faixa::after{right:0;background:linear-gradient(270deg,var(--preto-2),transparent)}
.faixa__t{display:flex;gap:58px;width:max-content;animation:desliza 46s linear infinite}
.faixa__t span{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.42);white-space:nowrap;
}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- barra de prova ---------- */
.prova{background:var(--bege);border-bottom:1px solid var(--linha-clara)}
.prova__g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linha-clara)}
.prova__i{background:var(--bege);padding:clamp(30px,4vw,48px) clamp(18px,2.2vw,32px)}
.prova__i b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--azul)}
.prova__i span{display:block;margin-top:10px;font-size:13.5px;font-weight:500}
.prova__i i{display:block;margin-top:6px;font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-claro)}

/* ---------- destaque com tracinho ---------- */
.destaque{
  border-left:2px solid var(--acento);padding-left:22px;margin:26px 0;
}
.destaque b,.destaque strong{font-weight:600}
.escuro .destaque,.azulado .destaque,.hero .destaque{border-left-color:var(--acento-claro)}
.hero .destaque{color:#fff}

/* divisória com o monograma */
.divisor{display:flex;align-items:center;gap:22px;padding:clamp(30px,4vw,52px) 0}
.divisor::before,.divisor::after{content:"";flex:1;height:1px;background:var(--linha-clara)}
.escuro .divisor::before,.escuro .divisor::after,
.azulado .divisor::before,.azulado .divisor::after{background:var(--linha-escura)}
.divisor img{width:34px;height:34px;opacity:.62;flex:none}

/* ---------- listas numeradas ---------- */
.lista{border-top:1px solid var(--linha-clara)}
.escuro .lista,.azulado .lista{border-top-color:var(--linha-escura)}
.lista li{
  display:flex;align-items:baseline;gap:20px;padding:19px 4px;
  border-bottom:1px solid var(--linha-clara);transition:padding-left .3s,background .3s;
}
.escuro .lista li,.azulado .lista li{border-bottom-color:var(--linha-escura)}
.lista li:hover{padding-left:14px;background:rgba(61,126,180,.06)}
.lista li b{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--acento);
  min-width:26px;flex:none;font-variant-numeric:tabular-nums;
}
.lista--2{columns:2;column-gap:clamp(30px,5vw,72px)}
.lista--2 li{break-inside:avoid}

/* ---------- grades e cards ---------- */
.grade{display:grid;gap:1px;background:var(--linha-clara)}
.escuro .grade,.azulado .grade{background:var(--linha-escura)}
.grade--2{grid-template-columns:repeat(2,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--claro);padding:clamp(28px,3.2vw,44px);position:relative;transition:background .35s}
.sec--bege .card{background:var(--bege)}
.escuro .card{background:var(--preto)}
.azulado .card{background:var(--azul)}
.card:hover{background:var(--branco)}
.escuro .card:hover{background:var(--preto-2)}
.azulado .card:hover{background:var(--azul-2)}
.card__n{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--acento);font-variant-numeric:tabular-nums;flex:none;
}
.card__linha{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.card__linha h3{margin-bottom:0}
.escuro .card__n,.azulado .card__n{color:var(--acento-claro)}
.card h3{margin-bottom:12px}
.card p{font-size:14.5px;line-height:1.62}

/* card clicável de serviço */
.card--link{display:flex;flex-direction:column}
.card--link .seta{margin-top:auto;padding-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--acento);display:inline-flex;gap:9px;transition:gap .3s}
.card--link:hover .seta{gap:16px}

/* ---------- fluxo do nexo causal ---------- */
.fluxo{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--linha-escura);counter-reset:f}
.fluxo__i{background:var(--preto);padding:30px 24px;position:relative}
.fluxo__i b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--acento-claro);margin-bottom:14px}
.fluxo__i h3{font-size:1rem;margin-bottom:10px}
.fluxo__i p{font-size:13px;line-height:1.58;color:var(--sobre-escuro)}
.fluxo__i::after{
  content:"→";position:absolute;top:34px;right:-12px;z-index:2;
  font-size:15px;color:var(--acento);background:var(--preto);padding:0 3px;
}
.fluxo__i:last-child::after{display:none}
.exemplos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha-escura);margin-top:1px}
.exemplos div{background:var(--preto);padding:26px 24px}
.exemplos b{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#fff;margin-bottom:9px}
.exemplos p{font-size:12.5px;line-height:1.62;color:var(--sobre-escuro)}

/* ---------- estatística 98,7 ---------- */
.stat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,88px);align-items:center}
.stat__barras{display:flex;flex-direction:column;gap:30px}
.stat__b b{display:block;font-size:clamp(3rem,7vw,5.6rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:#fff}
.stat__b.menor b{font-size:clamp(1.7rem,3vw,2.6rem);color:var(--acento-claro)}
.stat__b span{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-escuro)}
.stat__t{height:6px;background:rgba(255,255,255,.12);margin-top:18px;overflow:hidden}
.stat__t i{display:block;height:100%;background:var(--acento);width:0;transition:width 1.6s cubic-bezier(.2,.7,.3,1)}
.stat__b.menor .stat__t i{background:var(--acento-claro)}
.ativo .stat__t i{width:var(--w)}

/* ---------- notícia (decisão pública, registro editorial) ---------- */
.noticia{max-width:74ch;margin-inline:auto}
.noticia__cab{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--linha-escura)}
.noticia__tag{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  background:var(--acento);color:#fff;padding:6px 11px;
}
.noticia__fonte{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sobre-escuro)}
.noticia h2{margin-bottom:20px}
.noticia__linha{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.55;font-weight:500;
  color:var(--acento-claro);padding-bottom:26px;border-bottom:1px solid var(--linha-escura);
}
.noticia__meta{display:flex;flex-wrap:wrap;gap:26px 44px;padding:22px 0;border-bottom:1px solid var(--linha-escura)}
.noticia__meta dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:6px}
.noticia__meta dd{margin:0;font-size:14px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.noticia__corpo{padding-top:28px;display:flex;flex-direction:column;gap:18px}
.noticia__corpo p{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72;color:rgba(255,255,255,.8)}
.noticia__corpo p:first-child::first-letter{
  float:left;font-size:3.4em;line-height:.84;font-weight:600;color:var(--acento-claro);
  margin:4px 12px 0 0;
}
.noticia__nota{
  margin-top:32px;padding:18px 22px;border-left:2px solid var(--acento);
  background:rgba(255,255,255,.04);font-size:12.5px;line-height:1.7;color:var(--sobre-escuro);
}
.noticia__nota b{color:rgba(255,255,255,.86);font-weight:600}

/* ---------- ficha do Google ---------- */
.ficha{display:grid;grid-template-columns:.85fr 1.15fr;gap:1px;background:var(--linha-clara);border:1px solid var(--linha-clara)}
.ficha__nota{background:var(--branco);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;align-items:flex-start}
.ficha__marca{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--sobre-claro);margin-bottom:18px}
.ficha__nota b{font-size:clamp(3rem,5.5vw,4.4rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--azul)}
.ficha__e{color:var(--acento);letter-spacing:.18em;font-size:17px;margin-top:12px}
.ficha__qtd{font-size:13.5px;font-weight:500;margin-top:8px}
.ficha__dl{margin:26px 0 30px;display:flex;flex-direction:column;gap:14px;width:100%}
.ficha__dl dt{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-claro);margin-bottom:4px}
.ficha__dl dd{margin:0;font-size:13.5px;font-weight:500}
.ficha__nota .btn{margin-top:auto}
.ficha__mapa{background:var(--bege);min-height:340px;position:relative}
.ficha__mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.04)}
@media (max-width:860px){
  .ficha{grid-template-columns:1fr}
  .ficha__mapa{min-height:280px}
}
.frase{
  font-size:clamp(1.7rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.08;
  color:#fff;max-width:18ch;
}
.frase em{font-style:normal;color:var(--acento-claro)}

/* ---------- etapas ---------- */
.etapa{display:grid;grid-template-columns:78px 1fr;gap:clamp(20px,3vw,40px);padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid var(--linha-clara);align-items:start}
.etapa:first-of-type{border-top:1px solid var(--linha-clara)}
.etapa__n{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:600;letter-spacing:-.04em;color:var(--acento);line-height:1;font-variant-numeric:tabular-nums}
.etapa__c h3{margin-bottom:9px}
.etapa__c p{font-size:14.5px;max-width:70ch}
.etapa__setor{display:inline-block;margin-bottom:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--grafite);border:1px solid var(--linha-clara);padding:5px 10px}

/* ---------- taxas ---------- */
.taxas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha-clara)}
.taxa{background:var(--claro);padding:clamp(28px,3.2vw,42px)}
.taxa b{display:block;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:600;letter-spacing:-.045em;color:var(--azul);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.taxa--total{background:var(--azul);color:#fff}
.taxa--total b{color:#fff}
.taxa h3{font-size:.95rem;margin-bottom:10px}
.taxa p{font-size:13px;line-height:1.6}
.taxa--total p{color:rgba(255,255,255,.72)}

/* ---------- pessoas ---------- */
.pessoa{display:flex;gap:24px;align-items:flex-start;background:var(--azul);padding:clamp(28px,3.4vw,44px);transition:background .35s}
.pessoa:hover{background:var(--azul-2)}
.pessoa__av{
  width:76px;height:76px;flex:none;display:grid;place-items:center;
  border:1px solid var(--linha-escura);font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--acento-claro);
}
.pessoa h3{margin-bottom:4px}
.pessoa__oab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acento-claro);font-weight:600}
.pessoa p{margin-top:14px;font-size:14px;color:var(--sobre-escuro)}

/* ---------- avaliações ---------- */
.aval{background:var(--claro);padding:clamp(28px,3.2vw,40px);display:flex;flex-direction:column}
.aval__e{color:var(--acento);letter-spacing:.16em;font-size:13px;margin-bottom:18px}
.aval blockquote{font-size:15px;line-height:1.68;flex:1}
.aval figcaption{margin-top:22px;padding-top:18px;border-top:1px solid var(--linha-clara);font-size:12.5px;font-weight:600}
.aval figcaption span{display:block;font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sobre-claro);margin-top:4px}
.selo{
  display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid var(--linha-clara);
  font-size:13px;font-weight:600;margin-bottom:34px;background:var(--branco);
}
.selo b{font-size:19px;letter-spacing:-.03em;color:var(--azul)}
.selo i{font-style:normal;color:var(--acento);letter-spacing:.12em}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linha-clara)}
.faq details{border-bottom:1px solid var(--linha-clara)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:clamp(.98rem,1.3vw,1.1rem);font-weight:600;letter-spacing:-.015em;transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;
}
.faq details[open] summary{color:var(--azul)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__r{padding:0 clamp(24px,6vw,90px) 28px 0;font-size:14.5px;line-height:1.68;color:var(--sobre-claro)}

/* ---------- CTA final ---------- */
.cta{position:relative;overflow:hidden;background:var(--preto);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:0;opacity:.20}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.5)}
.cta .wrap{position:relative;z-index:2}
.cta h2{max-width:16ch;margin-inline:auto;color:#fff}
.cta .lead{margin:24px auto 0;color:var(--sobre-escuro);text-align:center}
.cta .btns{justify-content:center}

/* ---------- rodapé ---------- */
.rod{background:var(--preto);color:rgba(255,255,255,.66);padding-top:clamp(62px,7vw,96px);border-top:1px solid var(--linha-escura)}
.rod__topo{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(44px,5vw,68px)}
.rod img{height:40px;width:auto;margin-bottom:24px}
.rod p{font-size:13.5px;line-height:1.68}
.rod h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:20px;font-weight:700}
.rod__links{display:flex;flex-direction:column;gap:11px;font-size:13.5px}
.rod__links a{transition:color .25s}
.rod__links a:hover{color:var(--acento-claro)}
.rod__zap{display:flex;flex-direction:column;gap:18px}
.rod__zap a{display:block}
.rod__zap b{display:block;font-size:15px;color:#fff;font-weight:600;letter-spacing:.01em;transition:color .25s}
.rod__zap a:hover b{color:var(--acento-claro)}
.rod__zap span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.rod__dados{border-top:1px solid var(--linha-escura);padding:26px 0;display:flex;flex-wrap:wrap;gap:12px 34px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.rod__disc{border-top:1px solid var(--linha-escura);padding:30px 0;font-size:11.5px;line-height:1.72;color:rgba(255,255,255,.4);display:flex;flex-direction:column;gap:14px}
.rod__fim{border-top:1px solid var(--linha-escura);padding:22px 0 34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px;color:rgba(255,255,255,.42)}

/* ---------- WhatsApp flutuante ---------- */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:11px;
  background:var(--acento);color:#fff;padding:15px 22px;font-size:13.5px;font-weight:700;
  box-shadow:0 12px 34px rgba(5,7,10,.34);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s,transform .4s,visibility .4s,background .3s;
}
.zap.aparece{opacity:1;visibility:visible;transform:none}
.zap:hover{background:var(--azul)}

/* ---------- revelação ---------- */
[data-rev]{opacity:0;transform:translateY(26px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
[data-rev].ativo{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .fluxo{grid-template-columns:repeat(3,1fr)}
  .fluxo__i:nth-child(3)::after{display:none}
  .grade--4{grid-template-columns:repeat(2,1fr)}
  .rod__topo{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* no celular o curso é mais curto: menos frames, menos rolagem */
  .hero{height:180svh}
  .hero__palco{position:sticky;top:0;height:100svh}
  .nav__links{display:none}
  .nav__menu{display:flex}
  .nav__in > .btn{display:none}
  .nav__logo img{height:36px}
  .grade--3,.exemplos,.taxas{grid-template-columns:repeat(2,1fr)}
  .prova__g{grid-template-columns:repeat(2,1fr)}
  .stat,.decisao{grid-template-columns:1fr;gap:34px}
  .lista--2{columns:1}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .grade--2,.grade--3,.grade--4,.exemplos,.taxas,.fluxo{grid-template-columns:1fr}
  .fluxo__i::after{top:auto;bottom:-11px;right:auto;left:24px;content:"↓"}
  .prova__g{grid-template-columns:1fr 1fr}
  .etapa{grid-template-columns:1fr;gap:12px}
  .rod__topo{grid-template-columns:1fr}
  .hero__base{gap:22px}
  /* no celular o flutuante vira barra de largura total, para não cobrir texto */
  .zap{
    left:0;right:0;bottom:0;justify-content:center;
    padding:17px 20px;font-size:14px;box-shadow:0 -8px 28px rgba(5,7,10,.4);
  }
  body{padding-bottom:0}
  .rod__fim{padding-bottom:88px}
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-rev]{opacity:1;transform:none}
  .hero__rolar{display:none}
  .hero{height:auto;min-height:100svh}
  .hero__palco{position:relative;height:auto;min-height:100svh}
}
:focus-visible{outline:2px solid var(--acento-claro);outline-offset:3px}
.pula{position:absolute;left:-9999px}
.pula:focus{left:16px;top:16px;z-index:99;background:#fff;color:var(--preto);padding:12px 18px}

/* ============================================================
   AJUSTES DA REVISÃO — 24/08/2026
   ============================================================ */

/* --- hero: destaque com tracinho e assinatura separada --- */
.hero__destaque{
  margin:26px 0 0;font-size:clamp(1.02rem,1.35vw,1.2rem);font-weight:600;
  line-height:1.5;max-width:44ch;color:#fff;
}
.hero__assinatura{
  margin-top:18px;font-size:clamp(.95rem,1.15vw,1.05rem);
  color:rgba(255,255,255,.72);max-width:46ch;
}

/* --- rótulo de apoio --- */
.rotulo{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--acento-claro);margin-bottom:20px;
}

/* --- cards: rótulo de grupo legível --- */
.card__rot{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acento);margin-bottom:14px;
}
.card__grupo{
  font-size:clamp(1.05rem,1.5vw,1.28rem);font-weight:600;letter-spacing:-.02em;
  margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--acento);
  display:inline-block;
}

/* --- fluxo: número maior, título ao lado, seta visível --- */
.fluxo__cab{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.fluxo__i b{
  font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--acento-claro);
  margin-bottom:0;flex:none;font-variant-numeric:tabular-nums;
}
.fluxo__i h3{font-size:1rem;margin-bottom:0}
.fluxo__i::after{
  content:"→";top:50%;right:-15px;transform:translateY(-50%);
  font-size:22px;font-weight:700;color:var(--acento-claro);
  background:var(--preto);padding:6px 4px;line-height:1;
}

/* --- etapas: título acima, equipe responsável abaixo --- */
.etapa__setor{
  display:block;margin:10px 0 12px;padding:0;border:0;
  font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--sobre-claro);
}
.etapa__setor b{font-weight:700;color:var(--tinta);letter-spacing:.02em}
.etapa__n{color:var(--acento)}

/* --- ficha do Google, sem link de saída --- */
.ficha{grid-template-columns:.8fr 1.2fr}
.ficha__temas{background:var(--branco);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column;justify-content:center}
.ficha__rot{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--sobre-claro);margin-bottom:18px}
.ficha__tags{display:flex;flex-wrap:wrap;gap:10px}
.ficha__tags span{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--linha-clara);font-size:13px;font-weight:500;
}
.ficha__tags b{color:var(--acento);font-weight:700}
.ficha__txt{margin-top:22px;font-size:14px;max-width:46ch}
.ficha__mapa{display:none}

/* --- avaliações --- */
.aval blockquote{font-size:14.5px;color:var(--tinta)}
.aval figcaption{color:var(--tinta)}

/* --- fotos dos sócios (com iniciais como reserva) --- */
.pessoa__av{position:relative;overflow:hidden;background:var(--azul-2)}
.pessoa__av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.pessoa__av img[alt]:not([src=""]){}
.pessoa__av span{position:relative;z-index:1}

/* --- CTA final em branco --- */
.cta__lead{color:rgba(255,255,255,.86)}

/* --- painel de menu com submenus --- */
.painel{justify-content:flex-start;overflow-y:auto}
.painel__nav{display:flex;flex-direction:column}
.painel__grupo{border-bottom:1px solid var(--linha-escura)}
.painel__t{
  display:flex;align-items:center;gap:16px;width:100%;padding:20px 0;text-align:left;
  font-size:clamp(1.25rem,5.4vw,1.7rem);font-weight:600;letter-spacing:-.03em;color:#fff;
}
.painel__t b{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--acento);min-width:26px}
.painel__t span{flex:1}
.painel__t i{
  width:11px;height:11px;border-right:1.6px solid var(--acento);border-bottom:1.6px solid var(--acento);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s;flex:none;
}
.painel__t[aria-expanded="true"] i{transform:rotate(225deg) translateY(-3px)}
.painel__sub{display:none;padding:0 0 20px 42px;flex-direction:column;gap:2px}
.painel__t[aria-expanded="true"] + .painel__sub{display:flex}
.painel__sub a{
  display:block;padding:11px 0;border:0;font-size:15px;font-weight:400;
  color:rgba(255,255,255,.74);transition:color .2s,padding-left .25s;
}
.painel__sub a:hover{color:#fff;padding-left:8px}
.painel__grupo--simples .painel__t{border:0}
.painel__zap{margin-top:32px;padding-bottom:20px}

/* --- divisória com o monograma --- */
.divisor{margin-inline:auto;width:min(var(--max),100% - var(--gut)*2)}

/* ============================================================
   BLOG — listagem, leitura e tipografia de texto longo
   ============================================================ */

.pagina{padding-top:84px}
.topo-pagina{padding-bottom:clamp(40px,5vw,64px)}
.topo-pagina h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:22px}

/* --- listagem --- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linha-clara);border:1px solid var(--linha-clara)}
.post{
  background:var(--claro);display:flex;flex-direction:column;
  transition:background .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1);
}
.post:hover{background:var(--branco);transform:translateY(-4px)}
.post__capa{aspect-ratio:16/9;overflow:hidden;background:var(--azul);position:relative}
.post__capa img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.post:hover .post__capa img{transform:scale(1.045)}
.post__capa--vazia{display:grid;place-items:center;background:var(--azul)}
.post__capa--vazia img{width:52px;height:52px;object-fit:contain;opacity:.42}
.post__corpo{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;flex:1}
.post__meta{display:flex;gap:14px;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sobre-claro);margin-bottom:16px}
.post__meta span::before{content:"·";margin-right:14px}
.post h2{font-size:clamp(1.15rem,1.6vw,1.42rem);line-height:1.22;margin-bottom:12px;letter-spacing:-.025em}
.post__resumo{font-size:14px;line-height:1.6;color:var(--sobre-claro)}
.post__seta{
  margin-top:auto;padding-top:24px;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--acento);display:inline-flex;gap:9px;align-items:center;
}
.post__seta i{font-style:normal;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.post:hover .post__seta i{transform:translateX(6px)}

/* --- artigo --- */
.wrap--leitura{width:min(760px,100% - var(--gut)*2)}
.artigo{background:var(--claro)}
.artigo__topo{padding:clamp(44px,6vw,80px) 0 clamp(28px,3vw,40px)}
.artigo__voltar{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:34px;
  font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--acento);
}
.artigo__voltar i{font-style:normal;transition:transform .3s}
.artigo__voltar:hover i{transform:translateX(-5px)}
.artigo__meta{display:flex;gap:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sobre-claro);margin-bottom:20px}
.artigo__meta span::before{content:"·";margin-right:14px}
.artigo h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.06;margin-bottom:22px}
.artigo__resumo{font-size:clamp(1.05rem,1.4vw,1.24rem);line-height:1.58;color:var(--sobre-claro);border-left:2px solid var(--acento);padding-left:22px}
.artigo__capa{margin:clamp(28px,4vw,48px) 0;aspect-ratio:16/9;overflow:hidden;background:var(--azul)}
.artigo__capa img{width:100%;height:100%;object-fit:cover}

/* --- prosa: leitura confortável no celular e no computador --- */
.prosa{font-size:clamp(1.03rem,1.15vw,1.14rem);line-height:1.78;color:var(--tinta);max-width:68ch}
.prosa > * + *{margin-top:1.35em}
.prosa h2{
  font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.18;letter-spacing:-.03em;
  margin-top:2.2em;padding-top:.6em;border-top:1px solid var(--linha-clara);
}
.prosa h3{font-size:clamp(1.1rem,1.6vw,1.32rem);margin-top:1.9em}
.prosa p{text-wrap:pretty}
.prosa strong,.prosa b{font-weight:700}
.prosa a{color:var(--link-claro);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prosa a:hover{color:var(--acento)}
.prosa ul,.prosa ol{padding-left:0;display:flex;flex-direction:column;gap:.6em}
.prosa li{display:flex;gap:14px;align-items:baseline;line-height:1.7}
.prosa ul li::before{content:"";width:6px;height:6px;background:var(--acento);flex:none;transform:translateY(-3px)}
.prosa ol{counter-reset:o}
.prosa ol li{counter-increment:o}
.prosa ol li::before{content:counter(o,decimal-leading-zero);font-size:12px;font-weight:700;color:var(--acento);flex:none;min-width:24px;font-variant-numeric:tabular-nums}
.prosa blockquote{
  border-left:2px solid var(--acento);padding:2px 0 2px 24px;margin-block:1.8em;
  font-size:1.06em;line-height:1.62;color:var(--sobre-claro);
}
.prosa blockquote p{margin:0}
.prosa img{margin-block:1.8em;width:100%}
.prosa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--bege);padding:2px 6px}
.prosa hr{border:0;border-top:1px solid var(--linha-clara);margin-block:2.4em}

.artigo__aviso{
  margin-top:clamp(44px,5vw,68px);padding:22px 24px;background:var(--bege);
  border-left:2px solid var(--grafite);font-size:12.5px;line-height:1.72;color:var(--sobre-claro);
}
.artigo__nav{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha-clara);
  margin-top:clamp(40px,5vw,64px);border:1px solid var(--linha-clara);
}
.artigo__nav a{background:var(--claro);padding:26px;transition:background .35s}
.artigo__nav a:hover{background:var(--branco)}
.artigo__nav a.direita{text-align:right}
.artigo__nav span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-claro);margin-bottom:9px}
.artigo__nav b{font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.02em}

@media (max-width:980px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .posts{grid-template-columns:1fr}
  .artigo__nav{grid-template-columns:1fr}
  .artigo__nav a.direita{text-align:left}
}

/* ============================================================
   REVISÃO 3 — mobile-first, cabeçalho e divisórias
   ============================================================ */

/* --- cabeçalho: sempre preto sólido, logo centralizado --- */
.nav{background:var(--preto);border-bottom:1px solid var(--linha-escura)}
.nav.solida{background:var(--preto);backdrop-filter:none}
.nav__in{position:relative;justify-content:space-between}
.nav__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
.nav__logo img{height:46px}
.nav__links{margin-right:auto}
.nav__menu{margin-left:auto}

/* --- hero: quadro parado quando o movimento está desligado --- */
#heroParado{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- prova do hero: 2 por 2, sem sobra --- */
.hero__prova{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,3vw,52px)}

/* --- painel do menu: títulos do mesmo tamanho, números legíveis --- */
.painel__t{font-size:clamp(1.3rem,5vw,1.65rem)}
.painel__t span{font-size:inherit}
.painel__t b{font-size:14px;min-width:34px;letter-spacing:.08em}
.painel__sub a{font-size:15.5px}
.painel__contato{
  display:flex;flex-direction:column;gap:5px;padding:20px 0 0;
  border-top:1px solid var(--linha-escura);
}
.painel__contato span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acento)}
.painel__contato b{font-size:19px;font-weight:600;color:#fff;letter-spacing:-.02em}

/* --- divisória: faixa escura, traços e logo brancos --- */
.divisor{
  background:var(--preto);width:auto;margin:0;
  padding:clamp(26px,3.4vw,44px) var(--gut);
}
.divisor::before,.divisor::after{background:rgba(255,255,255,.28)}
.divisor img{width:30px;height:30px;opacity:1;filter:brightness(0) invert(1)}

/* --- etapas: número à esquerda, título à direita --- */
.etapa{grid-template-columns:1fr}
.etapa__cab{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}
.etapa__n{font-size:clamp(1.3rem,2vw,1.7rem);flex:none;min-width:44px}
.etapa__cab h3{margin-bottom:0}

/* --- texto branco onde o fundo é escuro --- */
.azulado .lista li,.escuro .lista li{color:#fff}
.azulado .cabeca .lead,.escuro .cabeca .lead{color:rgba(255,255,255,.86)}
.azulado .card p,.escuro .card p{color:rgba(255,255,255,.82)}
.azulado .pessoa p{color:rgba(255,255,255,.84)}

/* --- foto da sede --- */
.card__foto{margin:22px 0 0;aspect-ratio:4/3;overflow:hidden;background:var(--azul-2)}
.card__foto img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   MOBILE-FIRST — o celular é a tela principal
   ============================================================ */
@media (max-width:860px){
  :root{--sec-y:clamp(64px,13vw,96px);--gut:22px}
  body{font-size:16px;line-height:1.66}

  h1{font-size:clamp(2.15rem,9vw,3rem);line-height:1.03}
  h2{font-size:clamp(1.65rem,7vw,2.2rem);line-height:1.08}
  h3{font-size:1.08rem}
  .lead{font-size:1.02rem;line-height:1.66}

  .nav__in{height:70px}
  .nav__logo img{height:34px}
  .nav__menu{padding-left:16px;gap:12px}
  .nav__menu-txt{font-size:11px;letter-spacing:.16em}
  .pagina{padding-top:70px}

  .hero .wrap{padding-block:104px 40px}
  .hero__kicker{font-size:1rem;margin-bottom:16px}
  .hero__lead,.hero__destaque,.hero__assinatura{max-width:none}
  .hero__base{margin-top:36px;padding-top:22px}
  .hero__prova{grid-template-columns:1fr 1fr;gap:22px 18px;width:100%}
  .hero__prova b{font-size:1.7rem}
  .hero__prova span{font-size:10px;letter-spacing:.1em}

  .btns{gap:10px;margin-top:28px}
  .btn{width:100%;justify-content:space-between;padding:17px 22px}
  .painel__zap .btn,.hero .btn{width:100%}

  .cabeca{margin-bottom:32px}
  .sobre{font-size:10.5px;letter-spacing:.18em;margin-bottom:16px}
  .sobre::before{width:22px}

  .card{padding:26px 22px}
  .prova__i{padding:26px 20px}
  .prova__i b{font-size:2.1rem}

  /* fluxo do nexo causal: uma coluna, seta embaixo, sem sobreposição */
  .fluxo{grid-template-columns:1fr}
  .fluxo__i{padding:24px 22px}
  .fluxo__i::after{
    content:"↓";position:static;display:block;margin:16px 0 -8px;
    background:none;padding:0;font-size:20px;text-align:left;transform:none;
  }
  .exemplos{grid-template-columns:1fr}
  .exemplos div{padding:22px}

  .stat__b b{font-size:3.4rem}
  .taxa{padding:26px 22px}
  .pessoa{flex-direction:column;gap:18px;padding:26px 22px}
  .pessoa__av{width:64px;height:64px}
  .faq summary{padding:20px 40px 20px 0;font-size:1rem}
  .divisor{padding:26px 22px}
  .rod__fim{padding-bottom:34px}
  .artigo__topo{padding-top:36px}
  .prosa{font-size:1.04rem;line-height:1.74}
}

/* a regra de 3 colunas escondia a seta do item 03; no celular todos menos o último têm seta */
@media (max-width:860px){
  .fluxo__i:nth-child(3)::after{display:block}
  .fluxo__i:last-child::after{display:none}
}

/* ============================================================
   REVISÃO 4 — logo, menu sóbrio, fluxo e divisórias
   ============================================================ */

/* --- cabeçalho: só o nome, maior, centralizado --- */
.nav__logo img{height:26px}
.nav__in{height:88px}

/* --- rodapé: logo empilhado, maior --- */
.rod__marca{height:88px !important;width:auto;margin-bottom:26px}

/* --- hero: botão único, seta maior --- */
.btn--unico{padding:20px 38px;font-size:15px}
.seta-grande{font-size:22px;line-height:1;font-weight:400}

/* --- decisão: subtítulo menor que o título --- */
.noticia__linha--curta{
  font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.55;font-weight:400;
  color:var(--sobre-escuro);max-width:62ch;
}
.noticia__corpo p{color:#fff}
.noticia__corpo p:first-child::first-letter{color:var(--acento-claro)}

/* --- menu: fonte sóbria, igual à palavra MENU --- */
.painel__t{
  font-size:clamp(1rem,3.6vw,1.15rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  padding:22px 0;gap:0;
}
.painel__t span{font-size:inherit;letter-spacing:inherit}
.painel__sub a{
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.66);padding:12px 0;
}
.painel__sub{padding-left:0;padding-bottom:16px}
.painel{justify-content:center}
.painel__nav{border-top:1px solid var(--linha-escura)}

/* --- fluxo: passo numerado com trilho, dá para ver que é sequência --- */
.fluxo{background:transparent;gap:0;grid-template-columns:1fr}
.fluxo__i{
  background:transparent;padding:0 0 34px 46px;position:relative;border-left:2px solid rgba(99,155,200,.28);
}
.fluxo__i:last-child{border-left-color:transparent;padding-bottom:0}
.fluxo__i::before{
  content:"";position:absolute;left:-9px;top:4px;width:16px;height:16px;
  background:var(--acento);border:3px solid var(--preto);border-radius:50%;
}
.fluxo__i::after{
  content:"";position:absolute;left:-6px;bottom:16px;width:10px;height:10px;
  border-right:2px solid var(--acento-claro);border-bottom:2px solid var(--acento-claro);
  transform:rotate(45deg);background:none;padding:0;top:auto;right:auto;font-size:0;
}
.fluxo__i:last-child::after{display:none}
.fluxo__cab{margin-bottom:8px}
.fluxo__i b{font-size:12px;letter-spacing:.16em;color:var(--acento-claro)}
.fluxo__i h3{font-size:1.06rem}

/* --- divisórias padronizadas --- */
.divisor--claro{background:var(--claro)}
.divisor--claro::before,.divisor--claro::after{background:var(--tinta);opacity:.32}
.divisor--claro img{filter:none}
.divisor--escuro{background:var(--preto)}
.divisor--escuro::before,.divisor--escuro::after{background:#fff;opacity:.42}
.divisor img{width:46px;height:46px;opacity:1}

/* --- etapas: número e título como um título só --- */
.etapa__cab{gap:14px}
.etapa__n{
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em;
  color:var(--tinta);min-width:auto;
}
.etapa__cab h3{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em}
.etapa__c p:not(.etapa__setor){color:var(--tinta)}

@media (max-width:860px){
  .nav__logo img{height:20px}
  .nav__in{height:74px}
  .pagina{padding-top:74px}
  .rod__marca{height:70px !important}
  .fluxo__i{padding-left:36px}
  .divisor img{width:38px;height:38px}
  .painel__t{font-size:1rem;letter-spacing:.18em}
}

/* logos recortados: agora a altura é a altura da arte */
.nav__logo img{height:22px}
.rod__marca{height:74px !important}
@media (max-width:860px){
  .nav__logo img{height:18px}
  .rod__marca{height:62px !important}
}

/* a regra genérica .painel a vencia por especificidade e deixava BLOG maior */
.painel .painel__t{
  font-size:clamp(1rem,3.6vw,1.15rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding:22px 0;
}
.painel .painel__sub a{
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:12px 0;
}

/* ============================================================
   REVISÃO 5 — cabeçalho em grade, menu sem vão
   ============================================================ */

/* Grade de 3 colunas: o logo ocupa a coluna do meio e nunca é
   cortado, porque não depende mais de posicionamento absoluto. */
.nav__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;height:92px;overflow:visible;
}
.nav__links{grid-column:1;margin:0;justify-self:start}
.nav__logo{position:static;transform:none;grid-column:2;justify-self:center;padding:0 8px}
.nav__logo img{height:30px;width:auto;max-width:none}
.nav__menu{grid-column:3;justify-self:end;margin:0;padding-left:18px;gap:12px}
.nav__menu-txt{font-size:11px;letter-spacing:.16em}
.nav__menu-icone{width:20px;gap:4px}
.nav__menu-icone i{height:1.4px}
.nav__menu::before{height:20px}

/* Painel: conteúdo começa logo abaixo do cabeçalho, sem vão morto */
.painel{
  justify-content:flex-start;
  padding:calc(92px + 28px) var(--gut) 40px;
}
.painel__nav{border-top:0}
.painel__grupo:first-child{border-top:1px solid var(--linha-escura)}

@media (max-width:860px){
  .nav__in{height:76px;gap:8px}
  .nav__logo img{height:26px}
  .nav__logo{padding:0 4px}
  .nav__menu{padding-left:14px;gap:10px}
  .nav__menu-txt{font-size:10px;letter-spacing:.14em}
  .nav__menu-icone{width:18px}
  .nav__menu::before{height:18px}
  .pagina{padding-top:76px}
  .painel{padding:calc(76px + 22px) var(--gut) 32px}
}

/* tela estreita: tudo encolhe junto, mas a palavra MENU continua */
@media (max-width:400px){
  .nav__logo img{height:23px}
  .nav__menu-txt{font-size:9.5px;letter-spacing:.12em}
  .nav__menu-icone{width:16px;gap:3.5px}
  .nav__menu{padding-left:10px;gap:8px}
  .nav__menu::before{height:15px}
}

/* barra de prova com 3 itens: 3 colunas no desktop, empilhada no celular */
.prova__g{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){
  .prova__g{grid-template-columns:1fr}
  .prova__i{padding:24px 22px}
}

/* o monograma é 555x457, não é quadrado: largura automática preserva a proporção */
.divisor img{width:auto;height:52px}
.post__capa--vazia img{width:auto;height:56px;object-fit:contain}
@media (max-width:860px){ .divisor img{width:auto;height:44px} }

/* ============================================================
   REVISÃO 6 — primeira dobra cabe na tela do celular
   ============================================================ */
@media (max-width:860px){
  /* o conteúdo do hero media 954px numa tela de 812: sobrava por cima
     e o H1 era cortado. Duas coisas saem daqui sem perda:
     - a assinatura, que se repete no rodapé
     - os números, que reaparecem inteiros na faixa logo abaixo */
  .hero__assinatura{display:none}
  .hero__base{display:none}
  .hero .wrap{padding-block:96px 32px}
  .hero__kicker{font-size:.95rem;margin-bottom:14px}
  .hero__lead{margin-top:20px;font-size:.98rem;line-height:1.58}
  .hero__destaque{margin-top:20px;font-size:.98rem;line-height:1.46}
  .btns{margin-top:24px}

  /* logo maior, menu mais compacto e mais para a borda */
  .nav__logo img{height:28px}
  .nav__menu{padding-left:12px;gap:9px}
  .nav__menu-txt{font-size:10px;letter-spacing:.12em}
  .nav__menu-icone{width:17px;gap:3.5px}
  .nav__menu::before{height:16px}
}
@media (max-width:380px){
  .nav__logo img{height:25px}
  .nav__menu-txt{font-size:9px}
}

/* A coluna do menu é mais larga que a coluna vazia da esquerda, então a
   grade empurrava o logo 9px para o lado. Centralizar sobre a barra
   inteira resolve — e não corta, porque o logo é bem mais estreito que a tela. */
.nav__in{position:relative}
.nav__logo{position:absolute;left:50%;transform:translateX(-50%);grid-column:auto}

/* menu mais enxuto libera espaço para o logo crescer sem encostar */
@media (max-width:860px){
  .nav__logo img{height:29px}
  .nav__menu{padding-left:9px;gap:8px}
  .nav__menu::before{height:15px}
  .nav__menu-icone{width:16px}
}
@media (max-width:380px){
  .nav__logo img{height:25px}
  .nav__menu-txt{font-size:9px}
}

/* a 29px o logo encostava no menu; 27px mantém a folga e continua maior que antes */
@media (max-width:860px){ .nav__logo img{height:27px} }
@media (max-width:380px){ .nav__logo img{height:24px} }

/* ============================================================
   REVISÃO 7 — no celular o menu é só o ícone
   A palavra MENU e a barra continuam no computador, onde há espaço.
   No celular elas disputavam lugar com o logo centralizado.
   ============================================================ */
@media (max-width:860px){
  .nav__menu-txt{display:none}
  .nav__menu::before{display:none}
  .nav__menu{padding:10px 0 10px 24px;gap:0}
  .nav__menu-icone{width:24px;gap:5px}
  .nav__menu-icone i{height:1.6px}
  .nav__logo img{height:32px}
}
@media (max-width:380px){
  .nav__logo img{height:29px}
  .nav__menu-icone{width:22px}
}

/* ============================================================
   REVISÃO 8 — respiro no cabeçalho e fim da linha branca
   ============================================================ */

/* a borda de 1px em rgba(255,255,255,.16) aparecia como um fio branco
   sobre o hero escuro. O cabeçalho já é preto sólido, não precisa dela. */
.nav,.nav.solida{border-bottom:0}

@media (max-width:860px){
  .nav__in{height:88px}          /* era 76: o logo quase encostava na base */
  .pagina{padding-top:88px}
  .painel{padding:calc(88px + 24px) var(--gut) 32px}
  .hero .wrap{padding-block:106px 32px}
}
@media (max-width:380px){
  .nav__in{height:80px}
  .pagina{padding-top:80px}
  .painel{padding:calc(80px + 22px) var(--gut) 30px}
}

/* ============================================================
   FOTOS — sócios, fachada e print do Escavador
   ============================================================ */
.pessoa{display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:start}
.pessoa__foto{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--azul-2);border:1px solid var(--linha-escura)}
.pessoa__foto img{width:100%;height:100%;object-fit:cover;display:block}
.pessoa__av{display:none}

.card__print{margin:22px 0 0}
.card__print img{width:100%;height:auto;display:block;border:1px solid var(--linha-escura)}
.card__print figcaption{
  margin-top:10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

@media (max-width:860px){
  .pessoa{grid-template-columns:104px 1fr;gap:18px}
}
@media (max-width:480px){
  .pessoa{grid-template-columns:1fr;gap:16px}
  .pessoa__foto{max-width:200px}
}

/* ============================================================
   SÓCIOS — foto grande, colorida, nome sobreposto
   ============================================================ */
.socios{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha-escura)}
.socio{position:relative;margin:0;overflow:hidden;background:var(--azul-2);aspect-ratio:3/4}
.socio img{width:100%;height:100%;object-fit:cover;display:block}
.socio::after{
  content:"";position:absolute;inset:auto 0 0 0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(5,7,10,.12) 42%,rgba(5,7,10,.78) 100%);
}
.socio__id{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:0 clamp(20px,3vw,34px) clamp(20px,3vw,32px);
}
.socio__id b{
  display:block;font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:400;
  letter-spacing:-.02em;line-height:1.05;color:#fff;
}
.socio__id span{
  display:block;margin-top:8px;font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--acento-claro);
}

/* --- moldura de navegador para o print --- */
.janela{margin:24px 0 0;border:1px solid var(--linha-escura);background:#fff;overflow:hidden}
.janela__barra{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:#f2f3f4;border-bottom:1px solid rgba(17,19,24,.1);
}
.janela__barra span{width:9px;height:9px;border-radius:50%;background:#c9ccd1;flex:none}
.janela__barra em{
  font-style:normal;margin-left:14px;font-size:11.5px;letter-spacing:.02em;color:#686a70;
}
.janela img{width:100%;height:auto;display:block}
.janela figcaption{
  padding:12px 14px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#686a70;background:#f2f3f4;border-top:1px solid rgba(17,19,24,.08);
}

/* --- fachada grande e colorida --- */
.card__foto{margin:22px 0 0;aspect-ratio:auto}
.card__foto img{width:100%;height:auto;display:block}

@media (max-width:860px){
  /* no celular a foto ocupa a largura toda da tela, sem margem */
  .socios{grid-template-columns:1fr;gap:0;margin-inline:calc(var(--gut) * -1);width:100vw}
  .socio{aspect-ratio:4/5}
  .socio__id{padding:0 var(--gut) 26px}
  .socio__id b{font-size:2rem}
}

/* ============================================================
   REVISÃO 9 — cabeçalho equilibrado e alinhamento no celular
   ============================================================ */

/* Computador: três links de cada lado do logo, que fica ao centro.
   Antes os links ficavam todos à esquerda e o lado direito vazio. */
.nav__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(20px,3vw,48px);height:96px;
}
.nav__links{display:flex;gap:clamp(18px,2.2vw,32px);font-size:13px;font-weight:500;letter-spacing:.01em}
.nav__links--esq{grid-column:1;justify-self:start}
.nav__links--dir{grid-column:3;justify-self:end}
.nav__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);grid-column:2}
.nav__logo img{height:34px}

/* hero: o H1 estava encostando no cabeçalho no computador */
.hero .wrap{padding-block:clamp(150px,19vh,220px) clamp(48px,7vh,84px)}

/* ícone do menu: três traços iguais, simétrico */
.nav__menu-icone i:nth-child(2){width:100%;margin-left:0}

@media (max-width:1080px){
  .nav__links{font-size:12.5px;gap:16px}
  .nav__logo img{height:30px}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__in{grid-template-columns:1fr auto 1fr;height:88px}
  .nav__menu{grid-column:3;justify-self:end;padding:12px 0 12px 20px}
  .nav__menu-icone{width:26px;gap:6px}
  .nav__menu-icone i{height:2px}
  .nav__logo img{height:32px}
  .hero .wrap{padding-block:118px 34px}
}
@media (max-width:380px){
  .nav__in{height:80px}
  .nav__logo img{height:28px}
  .nav__menu-icone{width:24px}
  .hero .wrap{padding-block:106px 30px}
}

/* ============================================================
   REVISÃO 10 — descrição junto de cada sócio, logo sem posição absoluta
   ============================================================ */

/* O logo absoluto se ancorava na área da coluna do grid e saía do centro.
   Em fluxo normal, com 1fr de cada lado, o centro é garantido pela grade. */
.nav__logo{position:static;transform:none;grid-column:2;justify-self:center;padding:0}

/* --- sócios: foto e texto na mesma coluna --- */
.socios{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha-escura)}
.socio{display:flex;flex-direction:column;background:var(--azul);aspect-ratio:auto}
.socio__img{position:relative;margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--azul-2)}
.socio__img img{width:100%;height:100%;object-fit:cover;display:block}
.socio__img::after{
  content:"";position:absolute;inset:auto 0 0 0;height:56%;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(5,7,10,.12) 40%,rgba(5,7,10,.8) 100%);
}
.socio::after{display:none}
.socio__id{position:absolute;left:0;bottom:0;z-index:2;padding:0 clamp(20px,2.6vw,30px) clamp(18px,2.4vw,26px)}
.socio__txt{padding:clamp(24px,2.6vw,34px)}
.socio__txt h3{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acento-claro);margin-bottom:14px;
}
.socio__txt p{font-size:14.5px;line-height:1.64;color:rgba(255,255,255,.84)}

@media (max-width:860px){
  .socios{grid-template-columns:1fr;gap:1px;margin-inline:calc(var(--gut) * -1);width:100vw}
  .socio__img{aspect-ratio:4/5}
  .socio__id{padding:0 var(--gut) 24px}
  .socio__txt{padding:26px var(--gut) 30px}
}

/* ============================================================
   REVISÃO 11 — um recuo só dentro da dobra dos sócios
   A foto sangra até a borda, mas todo texto da seção passa a
   começar na mesma linha vertical dos cartões abaixo.
   ============================================================ */
.socio__txt{padding:clamp(28px,3.2vw,44px)}

@media (max-width:860px){
  .socio__id{padding:0 calc(var(--gut) * 2) 26px}
  .socio__txt{padding:28px calc(var(--gut) * 2) 32px}
}

/* ============================================================
   REVISÃO 12 — cabeçalho tradicional no computador
   O logo em coluna 2 empurrava os links para a segunda linha da
   grade, e eles caíam sobre o hero. No computador o cabeçalho volta
   a ser flex: logo à esquerda, navegação à direita. O centro fica
   só no celular, onde funciona bem.
   ============================================================ */
@media (min-width:861px){
  .nav__in{
    display:flex;align-items:center;justify-content:flex-start;
    gap:clamp(20px,2.6vw,40px);height:92px;
  }
  .nav__logo{position:static;transform:none;order:0;margin-right:auto;padding:0}
  .nav__logo img{height:32px}
  .nav__links{display:flex;align-items:center}
  .nav__links--esq{order:1;margin:0}
  .nav__links--dir{order:2;margin:0}
  .nav__links a{padding:8px 0}
}

/* no celular a grade de três colunas segue valendo, com o logo ao centro */
@media (max-width:860px){
  .nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav__logo{grid-column:2;grid-row:1;justify-self:center}
  .nav__menu{grid-column:3;grid-row:1;justify-self:end}
}

/* ============================================================
   REVISÃO 13 — primeira dobra cabe em telas de computador baixas
   Com 1512x820 o conteúdo do hero media 1166px numa área de 820:
   o excesso saía por cima e o cabeçalho comia o H1. Em telas mais
   baixas que 900px, a assinatura e os números saem — os números
   reaparecem inteiros na faixa de prova logo abaixo.
   ============================================================ */
@media (min-width:861px) and (max-height:900px){
  .hero .wrap{padding-block:120px 40px}
  .hero__assinatura{display:none}
  .hero__base{display:none}
  .hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem)}
  .hero__kicker{margin-bottom:16px}
  .hero__lead{margin-top:20px}
  .hero__destaque{margin-top:20px}
  .btns{margin-top:28px}
}
@media (min-width:861px) and (max-height:740px){
  .hero .wrap{padding-block:110px 32px}
  .hero h1{font-size:clamp(2.1rem,3.6vw,3rem)}
  .hero__lead{font-size:1rem}
}

/* ============================================================
   REVISÃO 14 — movimento perceptível e hero equilibrado
   ============================================================ */

/* 122 quadros esticados por 250svh davam menos de 17px de rolagem por
   quadro: o movimento existia mas não se via. Em 175svh o mesmo clipe
   passa bem mais rápido e a animação fica evidente. */
.hero{height:175svh}

@media (min-width:861px) and (max-height:900px){
  /* conteúdo curto alinhado pela base deixava um vão morto no topo.
     Centralizado, a sobra se divide e a composição fica equilibrada. */
  .hero__palco{align-items:center}
  .hero .wrap{padding-block:40px}
  .hero__assinatura{display:block}
}
@media (max-width:860px){
  .hero{height:150svh}
}

/* ============================================================
   REVISÃO 15 — o hero para de prender a rolagem
   Prender a tela por 175svh com um movimento discreto passava a
   sensação de scroll travado. O hero volta a ter a altura de uma
   tela e o movimento roda sozinho, em laço, como um vídeo.
   ============================================================ */
.hero{height:auto;min-height:100svh}
.hero__palco{position:relative;top:auto;height:auto;min-height:100svh}
@media (max-width:860px){
  .hero{height:auto;min-height:100svh}
  .hero__palco{position:relative;height:auto;min-height:100svh}
}

/* ============================================================
   REVISÃO 16 — movimento na GPU, sem sequência de quadros
   378 MB de imagens decodificadas travavam a rolagem. Uma imagem
   só, com transformação lenta, dá o mesmo efeito sem custo.
   ============================================================ */
.hero__media picture,
.hero__media img{position:absolute;inset:0;width:100%;height:100%}
.hero__media img{
  object-fit:cover;
  filter:grayscale(.42) contrast(1.16) brightness(.56) saturate(.7);
  transform-origin:52% 42%;
  animation:respira 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes respira{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-1.6%,1.2%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero__media img{animation:none;transform:scale(1.02)}
}

/* ============================================================
   REVISÃO 17 — mesmo menu no computador e no celular
   Eram estruturas diferentes: lista simples no computador e grupos
   com submenu no celular. Agora são os mesmos quatro grupos.
   ============================================================ */
@media (min-width:861px){
  .nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-left:auto}
  .nav__item{position:relative}
  .nav__t{
    display:inline-flex;align-items:center;gap:8px;padding:34px 0;
    font-size:13px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.86);
    transition:color .25s;background:none;border:0;cursor:pointer;
  }
  .nav__t:hover{color:#fff}
  .nav__t i{
    width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
    transform:rotate(45deg) translateY(-2px);opacity:.6;transition:transform .25s;
  }
  .nav__item:hover .nav__t i{transform:rotate(225deg) translateY(-1px)}
  .nav__sub{
    position:absolute;top:100%;left:-18px;min-width:250px;
    background:var(--preto);border:1px solid var(--linha-escura);
    padding:10px 0;display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .25s,transform .25s,visibility .25s;z-index:5;
  }
  .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
  .nav__sub a{
    padding:11px 22px;font-size:13px;color:rgba(255,255,255,.72);
    transition:color .2s,background .2s;
  }
  .nav__sub a:hover{color:#fff;background:rgba(255,255,255,.05)}
}
@media (max-width:860px){ .nav__links{display:none} }

/* página de confirmação de contrato assinado */
.obrigado{padding-bottom:clamp(48px,6vw,80px)}
.obrigado h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:22px}
.obrigado .sobre{color:var(--acento-claro)}

/* ============================================================
   COMUNICADOS
   ============================================================ */
.comunicados{display:flex;flex-direction:column;border-top:1px solid var(--linha-clara)}
.comunicado{padding:clamp(26px,3vw,36px) 0;border-bottom:1px solid var(--linha-clara)}
.comunicado__cab{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.comunicado__tipo{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 11px;background:var(--grafite);color:#fff;
}
.comunicado__tipo--urgente,
.comunicado__tipo--alerta-de-golpe{background:var(--rosewood)}
.comunicado__tipo--aviso{background:var(--azul)}
.comunicado__tipo--informativo{background:var(--grafite)}
.comunicado__cab time{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sobre-claro)}
.comunicado h2{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.2;margin-bottom:10px}
.comunicado h2 a{transition:color .25s}
.comunicado h2 a:hover{color:var(--azul)}
.comunicado p{font-size:14.5px;line-height:1.62;max-width:70ch}
.comunicado__ler{
  display:inline-flex;gap:9px;margin-top:16px;font-size:12.5px;font-weight:700;
  letter-spacing:.03em;color:var(--acento);transition:gap .3s;
}
.comunicado__ler i{font-style:normal}
.comunicado__ler:hover{gap:15px}

/* ═══ 18. Tabelas dentro de artigo e comunicado ═══
   Não havia regra nenhuma: uma tabela vinda do painel saía sem linha,
   sem respiro e estourando a largura no celular. Agora, se alguém
   escrever uma, ela se comporta — inclusive rolando sozinha em tela
   estreita, sem empurrar a página inteira para o lado. */

.prosa table{
  width:100%;
  border-collapse:collapse;
  font-size:.95em;
  line-height:1.55;
  text-align:left;
}
.prosa thead th{
  font-weight:700;
  font-size:.76em;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--grafite);
  border-bottom:2px solid var(--linha-clara);
  padding:0 16px 10px 0;
}
.prosa tbody td{
  padding:13px 16px 13px 0;
  border-bottom:1px solid var(--linha-clara);
  vertical-align:top;
}
.prosa tbody tr:last-child td{border-bottom:0}
.prosa th:last-child,.prosa td:last-child{padding-right:0}

/* a tabela rola dentro da própria caixa; a página não */
.prosa .tabela-rolavel{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-inline:0;
}
.prosa .tabela-rolavel table{min-width:min(100%,420px)}

@media(max-width:560px){
  .prosa table{font-size:.9em}
  .prosa thead th,.prosa tbody td{padding-right:12px}
}

/* ═══ 19. Itens de lista voltam a ser texto ═══
   `.prosa li` era flex. Serve quando o item é um marcador seguido de
   uma frase, mas quando o texto começa em negrito o navegador trata
   o <strong> como uma coluna e o resto como outra — o item vira duas
   colunas com um vão no meio, e no celular fica ilegível.

   Agora o marcador sai do fluxo e o item volta a ser um parágrafo
   comum, que quebra linha como texto deve quebrar. */

.prosa li{
  display:block;
  position:relative;
  padding-left:20px;
  line-height:1.7;
}
.prosa ul li::before{
  position:absolute;
  left:0;
  top:.68em;
  transform:none;
}
.prosa ol li{padding-left:38px}
.prosa ol li::before{
  position:absolute;
  left:0;
  top:.32em;
  min-width:0;
}

/* ═══ 20. Telefone não quebra no meio ═══
   O build envolve todo número brasileiro nesta classe. */
.tel{white-space:nowrap}