/* Sui Juris — site institucional.
   Fundo claro, títulos com serifa leve, interface em sans e um só amarelo
   (o ponto da marca e o botão de ação; texto sobre o amarelo é sempre
   grafite). Sem fonte externa: carrega rápido e funciona sem JavaScript. */
:root{
  --fundo:#FFFFFF; --painel:#F5F5F3; --painel-2:#ECECE8; --linha:#E4E4E0;
  --texto:#23272E; --suave:#5C626B; --fraco:#8B9098;
  --acc:#F2B705; --acc-forte:#E0A800; --acc-700:#8A6500; --on-acc:#23272E;
  --grafite:#23272E; --grafite-2:#2E333B; --grafite-3:#3A4049;
  --ok:#2F855A; --at:#E07B12; --bad:#C0362C;
  --serifa:"Iowan Old Style","Charter","Noto Serif","Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --raio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img,svg{display:block}
.pular{position:absolute;left:-9999px;top:8px;background:var(--acc);color:var(--on-acc);padding:10px 14px;border-radius:99px;z-index:99}
.pular:focus{left:12px}
:focus-visible{outline:2px solid var(--acc-700);outline-offset:3px}
section[id]{scroll-margin-top:72px}

.miolo{max-width:1200px;margin:0 auto;padding:0 32px}
.centro{text-align:center;margin-inline:auto}
.secao{padding:120px 0}
.h2{font:300 clamp(30px,3.6vw,50px)/1.14 var(--serifa);letter-spacing:-.015em;margin:0 0 20px}
.lead{font-size:18px;color:var(--suave);max-width:36em;margin:0}
.rotulo{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);color:var(--acc-700);margin-bottom:20px}
.rotulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}
.num{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--sans);color:var(--fraco);letter-spacing:.04em}
.num::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc)}

/* botão de ação: pílula amarela */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--acc);color:var(--on-acc);
  font:600 15px/1 var(--sans);text-decoration:none;padding:17px 26px;border-radius:99px;
  transition:background .2s,transform .2s;box-shadow:0 8px 24px rgba(242,183,5,.28)}
.btn:hover{background:var(--acc-forte);transform:translateY(-1px)}
.btn .seta{font-size:17px;transition:transform .25s}
.btn:hover .seta{transform:translateX(4px)}
.link-seta{font-weight:600;font-size:15px;text-decoration:none;color:var(--texto);display:inline-flex;align-items:center;gap:8px}
.link-seta::after{content:"→";transition:transform .25s}
.link-seta:hover::after{transform:translateX(4px)}
.link-seta.claro{color:#fff}

/* topo */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .3s}
.topo.rolou{border-bottom-color:var(--linha)}
.topo-faixa{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:36px;height:68px;padding:0 32px;position:relative}
.marca{font:400 23px/1 var(--serifa);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:baseline;white-space:nowrap}
.marca i{width:.3em;height:.3em;border-radius:50%;background:var(--acc);display:inline-block;margin-left:.08em}
.menu{display:flex;gap:30px;margin-left:auto}
.menu a{font-size:14px;text-decoration:none;color:var(--suave);transition:color .2s}
.menu a:hover{color:var(--texto)}
.restrito{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
  border:1px solid var(--texto);border-radius:99px;padding:9px 16px;transition:background .2s,color .2s}
.restrito:hover{background:var(--texto);color:#fff}
.restrito svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9}
.abrir-menu{display:none}

/* abertura */
.abertura{padding:80px 0 30px;overflow:hidden}
.abertura h1{font:300 clamp(38px,5.4vw,74px)/1.06 var(--serifa);letter-spacing:-.025em;margin:0 auto;max-width:15em}
.apoio{font-size:19px;color:var(--suave);max-width:36em;margin:28px auto 38px}
.botoes{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap}

.palco{position:relative;margin-top:72px;perspective:1600px}
.janela{background:#fff;border:1px solid var(--linha);border-radius:16px;overflow:hidden;max-width:1020px;margin:0 auto;
  box-shadow:0 40px 90px -30px rgba(35,39,46,.35),0 0 0 8px rgba(245,245,243,.8);transform-origin:50% 0;will-change:transform}
.janela-barra{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:var(--painel);border-bottom:1px solid var(--linha)}
.janela-barra i{width:10px;height:10px;border-radius:50%;background:var(--painel-2)}
.janela-barra span{margin-left:14px;font-size:12px;color:var(--fraco)}
.flutua{position:absolute;border-radius:14px;will-change:transform;box-shadow:0 24px 50px -18px rgba(35,39,46,.45)}
.f-prazo{left:max(16px,calc(50% - 600px));bottom:-26px;width:290px;background:var(--grafite);color:#fff;padding:22px 24px}
.f-prazo .rot{font:600 12px/1 var(--sans);color:var(--acc)}
.contagem{display:flex;align-items:center;gap:14px;margin:10px 0 14px}
.contagem strong{font:300 60px/1 var(--serifa);color:var(--acc)}
.contagem span{font-size:13px;color:#C4C8CE;line-height:1.4}
.barra{height:4px;background:var(--grafite-3);border-radius:4px;overflow:hidden}
.barra i{display:block;height:100%;width:72%;background:var(--acc);border-radius:4px;animation:encher 2.4s .8s ease-out both}
@keyframes encher{from{width:0}}
.f-aud{right:max(16px,calc(50% - 600px));top:120px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linha);padding:14px 16px;font-size:13px}
.f-aud .pt{width:10px;height:10px;border-radius:50%;background:var(--acc);flex-shrink:0}
.f-aud small{display:block;color:var(--suave);font-size:12px}
.nota-ilustra{font-size:12px;color:var(--fraco);text-align:right;margin-top:44px}

.app{display:flex;font-size:12.5px;min-height:360px}
.app-lado{width:160px;background:var(--grafite);color:#AEB3BA;padding:18px 14px;display:flex;flex-direction:column;gap:3px;flex-shrink:0}
.app-lado b{color:#fff;font:400 17px/1 var(--serifa);margin:2px 0 16px 10px}
.app-lado span{padding:8px 10px;border-radius:8px}
.app-lado .on{background:var(--acc);color:var(--on-acc);font-weight:600}
.app-corpo{flex:1;padding:20px;display:flex;flex-direction:column;gap:9px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.kpis div{background:var(--painel);border-radius:10px;padding:12px 14px}
.kpis b{display:block;font:600 22px/1.1 var(--sans)}
.kpis small{color:var(--suave);font-size:11.5px}
.lin{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--linha);border-radius:10px;padding:9px 14px;font-weight:600;white-space:nowrap}
.lin>div{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lin small{display:block;font-weight:400;color:var(--suave);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.selo{font-style:normal;font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0}
.selo.ok{background:#E3F1E9;color:var(--ok)}
.selo.a{background:#FCEBD9;color:#A2560A}
.selo.v{background:#FFF4CC;color:var(--acc-700)}
.btn-mini{font-style:normal;background:var(--acc);color:var(--on-acc);font-size:11px;font-weight:700;padding:6px 11px;border-radius:99px;white-space:nowrap}

/* fontes oficiais — esteira */
.fontes{padding:80px 0 20px}
.fontes-rot{text-align:center;font-size:14px;color:var(--fraco);margin:0 0 26px}
.esteira{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.esteira-faixa{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0;animation:esteira 38s linear infinite}
.esteira-faixa li{display:flex;align-items:center;white-space:nowrap;font:400 26px/1 var(--serifa);color:#6B7078;padding:0 30px}
.esteira-faixa li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:60px}
.esteira:hover .esteira-faixa{animation-play-state:paused}
@keyframes esteira{to{transform:translateX(-100%)}}

/* números do Judiciário (CNJ) — painel em mosaico */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.numeros .cabeca{margin-bottom:48px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.b{background:var(--painel);border-radius:22px;padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.b h3{font:400 22px/1.25 var(--serifa);margin:0}
.b p{margin:0;color:var(--suave);font-size:15px}
.b-rot{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--suave)}
.b-rot .ponto{display:inline-block}
.b-num{display:flex;align-items:baseline;gap:10px;margin:0!important;color:var(--texto)!important}
.b-num b{font:300 clamp(56px,6.6vw,92px)/1 var(--serifa);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.b-num span{font:400 22px/1 var(--serifa);color:var(--suave)}
.b-grande{grid-column:span 2;background:var(--grafite);color:#fff;min-height:320px;justify-content:flex-end}
.b-grande .b-rot{color:var(--acc)}
.b-grande .b-num{color:#fff!important}
.b-grande .b-num b{font-size:clamp(80px,10vw,150px)}
.b-grande .b-num span{color:#AEB3BA}
.b-grande .b-txt{color:#BFC4CB;max-width:30em;position:relative;z-index:1}
.b-grande .b-txt strong{color:#fff;font-weight:600}
.b-grande>*{position:relative;z-index:1}
.chuva{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 35%,#000 75%)}
.chuva i{position:absolute;top:-10px;width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.0;animation:cai linear infinite}
.chuva i:nth-child(3n){background:#5A616B}
@keyframes cai{0%{transform:translateY(0);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translateY(340px);opacity:0}}
.b-vivo{background:#fff;border:1px solid var(--linha)}
.b-vivo .b-num b{font-size:clamp(52px,5.6vw,80px);color:var(--acc-700)}
.b-vivo small{font-size:12px;color:var(--fraco);margin-top:auto}
.anel{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin-bottom:6px;
  background:conic-gradient(var(--acc) calc(var(--p)*1%),var(--painel-2) 0);transition:--p 1.8s cubic-bezier(.2,.7,.2,1)}
.visto .anel,.sem-js .anel{--p:var(--v)}
.anel span{width:112px;height:112px;border-radius:50%;background:var(--painel);display:flex;align-items:baseline;justify-content:center;padding-top:38px;font:400 18px/1 var(--serifa)}
.anel b{font:300 38px/1 var(--serifa);font-variant-numeric:tabular-nums}
.picto{display:flex;flex-direction:column;gap:14px;margin:6px 0}
.picto-linha{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:10px;font-size:13px;color:var(--suave)}
.picto-linha b{font-weight:700;color:var(--texto);text-align:right}
/* 18 colunas nas duas linhas: o Brasil ocupa visivelmente metade da Europa */
.bolas{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.bolas i{width:100%;aspect-ratio:1;border-radius:50%;background:var(--acc);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.bolas.eu i{background:#9AA0A8}
.visto .bolas i,.sem-js .bolas i{transform:scale(1)}
.barras-h{display:flex;flex-direction:column;gap:16px;margin:6px 0}
.bh{display:grid;grid-template-columns:1fr;gap:6px;font-size:13px;color:var(--suave)}
.bh i{display:block;height:12px;border-radius:6px;background:var(--grafite);width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.bh:last-child i{background:var(--acc)}
.visto .bh i,.sem-js .bh i{width:var(--v)}
.bh b{font:400 18px/1 var(--serifa);color:var(--texto)}
.b-largo{grid-column:span 2}
.pilha{display:flex;height:22px;border-radius:11px;overflow:hidden;background:var(--painel-2);margin-top:6px}
.pilha i{display:block;height:100%;width:0;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.pilha .p1{background:var(--grafite)}
.pilha .p2{background:var(--acc);transition-delay:.5s}
.visto .pilha i,.sem-js .pilha i{width:var(--v)}
.pilha-leg{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--suave)}
.pilha-leg span{display:inline-flex;align-items:center;gap:8px}
.pilha-leg i{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.pilha-leg i.p1{background:var(--grafite)}.pilha-leg i.p2{background:var(--acc)}
.b-acc{background:var(--acc)}
.b-acc .b-num b{font-size:clamp(56px,6vw,84px)}
.b-acc .b-num span{color:var(--texto)}
.b-acc p{color:#4A3B00}
.fonte-dados{font-size:13px;color:var(--fraco);margin:22px 0 0}

/* destaque escuro */
.destaque{background:var(--grafite);color:#fff;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:72px 64px;align-items:center;overflow:hidden;position:relative}
.destaque::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-140px;top:-160px;background:radial-gradient(circle,rgba(242,183,5,.22),transparent 65%)}
.destaque>*{position:relative}
.destaque .rotulo{color:var(--acc)}
.destaque .h2{color:#fff}
.destaque p{color:#BFC4CB;font-size:17px;margin:0}
.feed{background:var(--grafite-2);border:1px solid var(--grafite-3);border-radius:16px;padding:20px;height:360px;overflow:hidden;position:relative}
.feed-contas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.feed-contas div{background:var(--grafite);border-radius:10px;padding:10px 12px}
.feed-contas b{display:block;font:300 30px/1.05 var(--serifa);color:var(--acc);font-variant-numeric:tabular-nums}
.feed-contas b.pulo{animation:pulo .5s ease}
@keyframes pulo{40%{transform:scale(1.18)}}
.feed-contas small{font-size:11px;color:#AEB3BA}
.feed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--grafite-2))}
.feed-topo{display:flex;align-items:center;gap:10px;font-size:13px;color:#AEB3BA;margin-bottom:16px}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(242,183,5,.6);animation:pulsar 1.8s infinite}
@keyframes pulsar{70%{box-shadow:0 0 0 10px rgba(242,183,5,0)}100%{box-shadow:0 0 0 0 rgba(242,183,5,0)}}
.feed-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feed-lista li{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--grafite-3);border-radius:10px;padding:12px 14px;font-size:13px;color:#E4E6E9;white-space:nowrap}
.feed-lista li span{overflow:hidden;text-overflow:ellipsis}
.feed-lista li.entra{animation:entra .6s cubic-bezier(.2,.7,.2,1)}
@keyframes entra{from{opacity:0;transform:translateY(-18px)}}

/* como funciona — barras de progresso no alto */
.cabeca{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.cabeca .h2{margin:0}
.abas{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:36px}
.abas button{all:unset;cursor:pointer;display:block;font-size:15px;color:var(--fraco);padding:16px 0 4px;position:relative;transition:color .2s}
.abas button span{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:4px}
.abas button i{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--linha);overflow:hidden}
.abas button i::after{content:"";position:absolute;inset:0;background:var(--acc);transform:scaleX(var(--progresso,0));transform-origin:left}
.abas button:hover{color:var(--texto)}
.abas button[aria-selected="true"]{color:var(--texto);font-weight:600}
.abas button[aria-selected="true"] span{color:var(--acc-700)}
.abas button.feito i::after{transform:scaleX(1);background:#D9D9D4}
.abas button:focus-visible{outline:2px solid var(--acc-700);outline-offset:4px;border-radius:4px}
.passo{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.passo .cena{background:var(--painel);border-radius:20px;height:420px;display:flex;align-items:center;justify-content:center;padding:32px;overflow:hidden}
.passo-texto .num{margin-bottom:18px}
.passo-texto h3{font:300 36px/1.15 var(--serifa);letter-spacing:-.01em;margin:0 0 16px}
.passo-texto p{color:var(--suave);margin:0;font-size:17px}
html:not(.sem-js) .passo{display:none}
html:not(.sem-js) .passo.on{display:grid;animation:aparece .5s ease}
.sem-js .passo{margin-bottom:48px}
.sem-js .abas{display:none}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}}

/* cenas das etapas (ilustrações) */
.pub,.cal,.agenda,.perfil{background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(35,39,46,.09);width:100%;max-width:400px;padding:24px}
.pub-topo{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13px}
.pub-topo b{background:var(--grafite);color:#fff;padding:4px 9px;border-radius:99px;font-size:11px;letter-spacing:.04em}
.pub-topo span{color:var(--suave);flex:1}
.pub>i{display:block;height:9px;background:var(--painel-2);border-radius:5px;margin-bottom:10px}
.pub>i.curta{width:62%}
.pub small{display:block;margin-top:16px;font-size:12px;color:var(--acc-700);font-weight:600}
.passo.on .pub>i{animation:linha-lida 1.4s ease both}
.passo.on .pub>i:nth-of-type(2){animation-delay:.15s}.passo.on .pub>i:nth-of-type(3){animation-delay:.3s}
.passo.on .pub>i:nth-of-type(4){animation-delay:.45s}.passo.on .pub>i:nth-of-type(5){animation-delay:.6s}
@keyframes linha-lida{0%{background:var(--painel-2)}50%{background:#FFE58A}100%{background:var(--painel-2)}}

.cal-topo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.cal-topo b{font:400 20px/1 var(--serifa)}
.cal-topo span{font-size:12px;font-weight:600;color:var(--acc-700)}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;font-size:12px}
.cal-dias span{padding:7px 0;border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.cal-dias .f{color:var(--fraco)}
.cal-dias .p{background:var(--grafite);color:#fff}
.cal-dias .u{background:#FFF4CC;color:var(--acc-700);font-weight:600}
.cal-dias .x{background:#FBE3E1;color:var(--bad)}
.cal-dias .fim{background:var(--acc);color:var(--on-acc);font-weight:700}
.passo.on .cal-dias .u{animation:acende .4s ease both}
@keyframes acende{from{background:transparent;color:var(--fraco)}}
.cal small{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:14px;font-size:11px;color:var(--suave)}
.lg{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-6px}
.lg.p{background:var(--grafite)}.lg.u{background:#FFE58A}.lg.x{background:#F4B9B3}.lg.fim{background:var(--acc)}

.agenda{display:flex;flex-direction:column;gap:10px}
.ag{display:flex;align-items:center;gap:14px;border:1px solid var(--linha);border-radius:12px;padding:12px 14px;font-size:13px}
.ag .h{font-weight:700;width:44px;flex-shrink:0}
.ag div{flex:1;min-width:0}
.ag small{display:block;color:var(--suave);font-size:12px}
.ag.dest{border-color:var(--acc);background:#FFFBEB}
.passo.on .ag.dest{animation:entra .6s .3s cubic-bezier(.2,.7,.2,1) both}

.linha-tempo{list-style:none;margin:0;padding:0 0 0 26px;position:relative;width:100%;max-width:340px}
.linha-tempo::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--linha)}
.linha-tempo li{position:relative;padding:0 0 26px}
.linha-tempo li:last-child{padding-bottom:0}
.linha-tempo li::before{content:"";position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--fraco)}
.linha-tempo li.fim::before{background:var(--ok);border-color:var(--ok)}
.linha-tempo b{display:block;font-size:15px}
.linha-tempo small{color:var(--suave)}
.passo.on .linha-tempo li{animation:aparece .5s ease both}
.passo.on .linha-tempo li:nth-child(2){animation-delay:.2s}.passo.on .linha-tempo li:nth-child(3){animation-delay:.4s}.passo.on .linha-tempo li:nth-child(4){animation-delay:.6s}

.perfil-topo{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:18px}
.perfil-topo b{font:400 20px/1 var(--serifa)}
.perfil-topo span{font-size:12px;color:var(--suave)}
.pb{display:grid;grid-template-columns:96px 1fr 40px;align-items:center;gap:10px;font-size:13px;margin-bottom:12px}
.pb i{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--grafite) var(--v),var(--painel-2) 0)}
.pb em{font-style:normal;font-weight:700;text-align:right}
.passo.on .pb i{animation:aparece .9s ease both}
.perfil small{display:block;margin-top:10px;font-size:12px;color:var(--acc-700);font-weight:600}

.rel{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%;gap:36px;background:#fff;border-radius:14px;box-shadow:0 14px 34px rgba(35,39,46,.09);padding:28px}
.rosca{width:150px;height:150px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:conic-gradient(#3B6EA5 0 58%,var(--ok) 58% 82%,var(--at) 82% 94%,var(--bad) 94% 100%)}
.rosca span{width:104px;height:104px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--suave)}
.rosca b{font:600 26px/1 var(--sans);color:var(--texto)}
.colunas{display:flex;align-items:flex-end;gap:10px;height:150px}
.colunas i{width:22px;height:var(--v);background:var(--grafite);border-radius:6px 6px 0 0}
.colunas i:nth-child(5){background:var(--acc)}
.passo.on .colunas i{animation:sobe .8s ease both;transform-origin:bottom}
.passo.on .colunas i:nth-child(2){animation-delay:.1s}.passo.on .colunas i:nth-child(3){animation-delay:.2s}
.passo.on .colunas i:nth-child(4){animation-delay:.3s}.passo.on .colunas i:nth-child(5){animation-delay:.4s}
@keyframes sobe{from{transform:scaleY(0)}}

/* o modelo — quatro ideias numeradas */
.modelo{background:var(--painel)}
.modelo .h2{max-width:20em}
.ideias{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:64px}
.ideias article{border-top:1px solid #D6D6D1;padding-top:26px}
.ideias h3{font:400 23px/1.25 var(--serifa);margin:18px 0 12px}
.ideias p{margin:0;color:var(--suave);font-size:15px}

/* segurança — faixa escura */
.seguranca{background:var(--grafite);color:#fff}
.seg-grade{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.seguranca .rotulo{color:var(--acc)}
.seg-cabeca .h2{color:#fff;margin-bottom:28px}
.seg-itens{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.seg-itens>div{background:var(--grafite-2);border:1px solid var(--grafite-3);border-radius:var(--raio);padding:28px;display:flex;flex-direction:column;gap:18px}
.seg-itens svg{width:40px;height:40px;padding:9px;border-radius:50%;fill:none;stroke:var(--acc);stroke-width:1.7;background:rgba(242,183,5,.1)}
.seg-itens h3{font:400 21px/1.25 var(--serifa);margin:0 0 8px}
.seg-itens p{margin:0;color:#BFC4CB;font-size:15px}

/* para quem */
.frentes-lista{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.frente{border-radius:24px;padding:36px;overflow:hidden}
.frente.claro{background:var(--painel)}
.frente.escuro{background:var(--grafite);color:#fff}
.frente.escuro p{color:#BFC4CB}
.frente-arte{height:200px;position:relative;margin-bottom:28px}
.frente-arte span{position:absolute;border-radius:99px}
.a1 span:nth-child(1){left:0;top:14%;width:62%;height:20%;background:#fff}
.a1 span:nth-child(2){left:14%;top:42%;width:72%;height:20%;background:var(--acc)}
.a1 span:nth-child(3){left:0;top:70%;width:46%;height:20%;background:#fff}
.a2 span{bottom:0;width:13%;background:var(--grafite-3);border-radius:10px 10px 0 0}
.a2 span:nth-child(1){left:6%;height:26%}.a2 span:nth-child(2){left:30%;height:46%}
.a2 span:nth-child(3){left:54%;height:68%}.a2 span:nth-child(4){left:78%;height:92%;background:var(--acc)}
.frente h3{font:400 30px/1.15 var(--serifa);margin:0 0 12px}
.frente p{margin:0;color:var(--suave)}

/* lema discreto (o sentido do nome, sem dizer o nome) */
.seg-lema{color:#BFC4CB;font-size:16px;margin:0 0 26px;max-width:28em}
.rodape-marca{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lema{font:italic 400 15px/1 var(--serifa);color:var(--fraco)}

/* notícias e novidades — vitrine na página inicial */
.seg-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.seg-topo .h2{margin:0}
.cartoes-noticia{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.noticia{display:flex;flex-direction:column;gap:12px;text-decoration:none;background:var(--painel);border-radius:20px;padding:28px;
  transition:transform .25s,box-shadow .25s}
.noticia:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(35,39,46,.35)}
.noticia h3{font:400 22px/1.25 var(--serifa);margin:0}
.noticia p{margin:0;color:var(--suave);font-size:15px}
.etq{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--suave)}
.etq::before{content:"";width:7px;height:7px;border-radius:50%;background:#9AA0A8}
.noticia.plataforma{background:var(--grafite);color:#fff}
.noticia.plataforma p{color:#BFC4CB}
.noticia.plataforma .etq{color:var(--acc)}
.noticia.plataforma .etq::before{background:var(--acc)}

/* página /noticias */
.pagina-noticias{padding:80px 0 120px}
.pagina-noticias h1{font:300 clamp(40px,5vw,66px)/1.08 var(--serifa);letter-spacing:-.02em;margin:0 0 18px}
.abas-noticia{display:inline-flex;gap:6px;background:var(--painel);border-radius:99px;padding:6px;margin:40px 0 20px}
.abas-noticia button{all:unset;cursor:pointer;padding:11px 20px;border-radius:99px;font-size:14px;font-weight:600;color:var(--suave);transition:background .2s,color .2s}
.abas-noticia button[aria-selected="true"]{background:var(--grafite);color:#fff}
.abas-noticia button:focus-visible{outline:2px solid var(--acc-700);outline-offset:2px}
html:not(.sem-js) .lista-noticias{display:none}
html:not(.sem-js) .lista-noticias.on{display:block;animation:aparece .4s ease}
.sem-js .abas-noticia{display:none}
html:not(.sem-js) .so-sem-js{display:none}
.so-sem-js{font:400 28px/1.2 var(--serifa);margin:48px 0 8px}
.item-noticia{display:grid;grid-template-columns:200px 1fr;gap:40px;padding:36px 0;border-bottom:1px solid var(--linha)}
.item-data{font-size:14px;font-weight:600;color:var(--texto)}
.item-data span{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:400;color:var(--suave)}
.item-data span::before{content:"";width:7px;height:7px;border-radius:50%;background:#9AA0A8}
.novidade .item-data span::before{background:var(--acc)}
.item-corpo h3{font:400 27px/1.2 var(--serifa);margin:0 0 12px}
.item-corpo p{margin:0 0 14px;color:var(--suave);max-width:44em}
.item-numeros{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:6px 0 16px}
.item-numeros span{display:inline-flex;align-items:baseline;gap:8px}
.item-numeros b{font:300 34px/1 var(--serifa);color:var(--texto)}
.item-numeros small{font-size:13px;color:var(--suave)}
.item-fonte{font-size:13px!important;color:var(--fraco)!important}
.item-fonte a{color:var(--acc-700)}

/* perguntas */
.perguntas{background:var(--painel)}
.faq-grade{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}
.faq{border-top:1px solid #D6D6D1}
.faq details{border-bottom:1px solid #D6D6D1}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:400 21px/1.3 var(--serifa)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2323272E' stroke-width='1.8'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s,background-color .25s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--acc)}
.faq details p{margin:0 0 26px;color:var(--suave);max-width:46em}

/* fechamento */
.fecho{padding:150px 0;text-align:center;background:var(--grafite);color:#fff;overflow:hidden;position:relative}
.fecho::before{content:"";position:absolute;left:50%;top:50%;width:700px;height:700px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(242,183,5,.14),transparent 62%)}
.fecho .miolo{position:relative}
.fecho-grande{font:300 clamp(64px,11vw,160px)/1 var(--serifa);letter-spacing:-.03em;margin:0}
.fecho-grande i{display:inline-block;width:.17em;height:.17em;border-radius:50%;background:var(--acc);margin-left:.05em}
.fecho-sub{font-size:18px;color:#BFC4CB;margin:22px 0 44px}

/* rodapé */
.rodape{padding:40px 0;font-size:14px}
.rodape .miolo{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rodape .marca{font-size:20px}
.rodape nav{display:flex;gap:28px;flex-wrap:wrap}
.rodape nav a{text-decoration:none;color:var(--suave)}
.rodape nav a:hover{color:var(--texto)}
.rodape .restrito-rodape{color:var(--texto);font-weight:600}

/* páginas de texto (privacidade) */
.texto{max-width:760px;margin:0 auto;padding:88px 32px 110px}
.texto h1{font:300 clamp(36px,4.6vw,54px)/1.15 var(--serifa);margin:0 0 24px}
.texto h2{font:400 24px/1.3 var(--serifa);margin:44px 0 12px}
.texto p,.texto li{color:var(--suave)}
.texto li{margin-bottom:8px}
.texto a{color:var(--acc-700)}

/* 404 */
.erro{min-height:72vh;display:flex;align-items:center;padding:80px 0}
.erro h1{font:300 clamp(44px,7vw,92px)/1.05 var(--serifa);margin:0 0 20px;letter-spacing:-.02em}
.erro .lead{margin-bottom:36px}

/* entrada suave dos blocos */
html:not(.sem-js) .surge{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html:not(.sem-js) .surge.visto{opacity:1;transform:none}
.d1{transition-delay:.08s!important}.d2{transition-delay:.16s!important}.d3{transition-delay:.24s!important}

/* telas médias */
@media (max-width:1200px){
  .f-aud{top:90px}
  .ideias{grid-template-columns:1fr 1fr;gap:40px 36px}
  .passo{grid-template-columns:1fr 1.2fr;gap:40px}
}

/* tablet */
@media (max-width:1020px){
  .menu{gap:22px}
  .app-lado{width:130px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpis div:nth-child(4){display:none}
  .destaque{grid-template-columns:1fr;padding:56px 40px}
  .cabeca{grid-template-columns:1fr;gap:18px}
  .abas{grid-template-columns:repeat(3,1fr);row-gap:22px}
  .passo{grid-template-columns:1fr;gap:28px}
  .seg-grade,.faq-grade{grid-template-columns:1fr;gap:40px}
  .bento{grid-template-columns:1fr 1fr}
}

/* celular */
@media (max-width:760px){
  .miolo{padding:0 16px}
  .secao{padding:80px 0}
  .h2 br{display:none}
  .topo-faixa{padding:0 0 0 16px;height:60px;gap:12px}
  .marca{font-size:21px}
  .abrir-menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:56px;height:60px;background:none;border:0;cursor:pointer;padding:0 17px;flex-shrink:0}
  .abrir-menu span{display:block;height:1.5px;background:var(--texto);transition:transform .25s,opacity .25s}
  .abrir-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .abrir-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
  .abrir-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .restrito{margin-left:auto;padding:7px 12px;font-size:13px}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--linha);margin:0}
  .menu.aberto{display:flex}
  .menu a{padding:17px 16px;border-top:1px solid var(--linha);font-size:15px;color:var(--texto)}
  .sem-js .abrir-menu{display:none}
  .sem-js .topo-faixa{flex-wrap:wrap;height:auto;padding:12px 16px}
  .sem-js .menu{display:flex;position:static;order:3;width:100%;flex-direction:row;flex-wrap:wrap;gap:0 16px;border:0}
  .sem-js .menu a{border:0;padding:8px 0}
  .abertura{padding:48px 0 20px}
  .apoio{font-size:17px}
  .botoes{flex-direction:column;gap:20px}
  .palco{margin-top:48px}
  .janela{border-radius:12px;box-shadow:0 30px 60px -24px rgba(35,39,46,.35),0 0 0 5px rgba(245,245,243,.8)}
  .app{min-height:0}
  .app-lado{display:none}
  .kpis div:nth-child(3){display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .lin:nth-of-type(n+4){display:none}
  .f-prazo{position:relative;left:auto;bottom:auto;width:auto;margin:-30px 18px 0}
  .f-aud{display:none}
  .nota-ilustra{margin-top:20px}
  .fontes{padding:60px 0 0}
  .esteira-faixa li{font-size:20px;padding:0 18px}
  .esteira-faixa li::after{margin-left:36px}
  .cartoes-noticia{grid-template-columns:1fr}
  .seg-topo{flex-direction:column;align-items:flex-start;gap:14px}
  .item-noticia{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .item-corpo h3{font-size:23px}
  .item-numeros b{font-size:28px}
  .pagina-noticias{padding:48px 0 80px}
  .abas-noticia{display:flex;width:100%}
  .abas-noticia button{flex:1;text-align:center;padding:11px 8px;font-size:13px}
  .bento{grid-template-columns:1fr;gap:14px}
  .b-grande,.b-largo{grid-column:auto}
  .b{padding:26px 22px;border-radius:18px}
  .b-grande{min-height:280px}
  .feed-contas b{font-size:24px}
  .destaque{padding:44px 22px;border-radius:18px;gap:32px}
  .feed{height:250px;padding:14px}
  .feed-lista li{font-size:12px;padding:10px 12px}
  .abas{grid-template-columns:repeat(2,1fr)}
  .abas button{font-size:14px}
  .passo .cena{height:auto;min-height:320px;padding:20px}
  .passo-texto h3{font-size:30px}
  .rel{flex-direction:column;gap:22px}
  .ideias{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .seg-itens{grid-template-columns:1fr}
  .frentes-lista{grid-template-columns:1fr;margin-top:40px}
  .frente{padding:26px;border-radius:18px}
  .frente-arte{height:150px}
  .faq summary{font-size:18px;padding:20px 0}
  .fecho{padding:110px 0}
  .rodape .miolo{flex-direction:column;align-items:flex-start}
  .texto{padding:60px 16px 80px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html:not(.sem-js) .surge{opacity:1;transform:none}
}