/* SCBA · A rede acesa — tokens, base e componentes. Fonte única do sistema visual. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Fragment+Mono&display=swap");

:root{
  --noite:#0B1030; --noite-2:#141B4A; --navy:#2F2D5E; --sol:#EC8807; --sol-claro:#FFB547;
  --led:#3F6734; --led-claro:#8DBF6E; --dia:#F5F6FA; --papel:#fff; --tinta:#14162B; --tinta-2:#474B6B;
  --sobre-noite:#E9ECFA; --sobre-noite-2:#AEB5E0; --linha:rgba(20,22,43,.14); --linha-noite:rgba(233,236,250,.18);
  --f-txt:"Hanken Grotesk",system-ui,sans-serif; --f-num:"Fragment Mono",ui-monospace,monospace;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --r:10px; --r-g:18px; --sombra:0 14px 36px -14px rgba(11,16,48,.35),0 3px 8px rgba(11,16,48,.08);
  --ease:cubic-bezier(.16,1,.3,1); --wrap:1240px; --hdr:68px; --rbar:34px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + var(--rbar) + 12px)}
body{margin:0;font:400 1.0625rem/1.6 var(--f-txt);color:var(--tinta);background:var(--dia);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:var(--sol);color:var(--noite)}
:focus-visible{outline:3px solid var(--sol);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--s2);text-wrap:balance}
h1{font-size:clamp(2.5rem,7vw,5.4rem);font-weight:900;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
p{margin:0 0 var(--s2);max-width:68ch}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mut{color:var(--tinta-2)}
.skip{position:absolute;left:-999px;top:0;background:var(--sol);color:var(--noite);padding:.6rem 1rem;z-index:200}
.skip:focus{left:8px;top:8px}
@media (min-width:1024px){ *{scrollbar-width:thin;scrollbar-color:var(--navy) transparent} }

/* layout */
.wrap{width:min(var(--wrap),100% - 2*clamp(1rem,4vw,2.5rem));margin-inline:auto}
.sec{padding-block:clamp(3.5rem,8vw,var(--s6));position:relative}
.sec--dia{background:var(--dia)} .sec--papel{background:var(--papel)}
.sec--noite{background:var(--noite);color:var(--sobre-noite)}
.sec--noite .mut,.sec--noite p.lead,.sec--navy p.lead,.cta-final p.lead,.hero p.lead{color:var(--sobre-noite-2)}
.sec--navy{background:var(--navy);color:var(--sobre-noite)}
.sec--navy .mut{color:var(--sobre-noite-2)}
.sec--sol{background:var(--sol);color:var(--noite)}
.split{display:grid;gap:var(--s4);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s5)} .split--7-5{grid-template-columns:7fr 5fr} .split--5-7{grid-template-columns:5fr 7fr}}
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.lead{font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5;color:var(--tinta-2);max-width:56ch}
.sec-cab{max-width:60ch;margin-bottom:var(--s4)}
.sec-cab--c{margin-inline:auto;text-align:center}
.sec-cab--c p{margin-inline:auto}
.tag{display:inline-block;font:600 .8rem/1 var(--f-num);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:99px;padding:.4rem .7rem;opacity:.9}

/* barra de rede (roteador entre os 3 sites) */
.rbar{height:var(--rbar);background:var(--noite);color:var(--sobre-noite-2);font:600 .78rem/1 var(--f-txt);position:relative;z-index:60}
.rbar .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.rbar nav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.rbar a{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:99px;text-decoration:none;white-space:nowrap}
.rbar a::before{content:"";width:7px;height:7px;border-radius:50%;background:#3b4380}
.rbar a:hover{color:#fff}
.rbar a[aria-current]{color:#fff;background:rgba(236,136,7,.16)}
.rbar a[aria-current]::before{background:var(--sol);box-shadow:0 0 10px var(--sol)}
.rbar .rbar-idioma{display:none;font-family:var(--f-num)} @media(min-width:760px){.rbar .rbar-idioma{display:block}}

/* cabeçalho */
.hdr{position:relative;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);height:var(--hdr)}
.hdr .wrap{display:flex;align-items:center;height:100%;gap:1.5rem}
.hdr .logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;color:var(--navy);flex:none}
.hdr .logo img{height:40px;width:auto}
.hdr .logo b{font-size:1.15rem;letter-spacing:-.03em;line-height:1}
.hdr .logo b i{color:var(--sol);font-style:normal}
.menu{display:none;gap:.15rem;margin-left:auto;align-items:center}
.menu>li{list-style:none;position:relative}
.menu a,.menu button{white-space:nowrap;font:600 .86rem/1 var(--f-txt);color:var(--tinta);background:none;border:0;padding:.7rem .7rem;border-radius:8px;text-decoration:none;cursor:pointer;display:flex;gap:.3rem;align-items:center}
.menu a:hover,.menu button:hover,.menu [aria-current]{background:rgba(47,45,94,.08);color:var(--navy)}
.menu [aria-current]{box-shadow:inset 0 -2px 0 var(--sol)}
.sub{position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sombra);padding:.4rem;list-style:none;margin:6px 0 0;opacity:0;visibility:hidden;translate:0 6px;transition:.25s var(--ease)}
.menu li:hover>.sub,.menu li:focus-within>.sub,.menu li.aberto>.sub{opacity:1;visibility:visible;translate:0 0}
.sub a{padding:.65rem .8rem;font-weight:600;width:100%}
.hdr-cta{display:none;gap:.5rem;margin-left:.5rem}.hdr-cta .btn{white-space:nowrap}
.burger{margin-left:auto;width:44px;height:44px;border:1px solid var(--linha);background:#fff;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--navy);box-shadow:0 6px 0 var(--navy),0 -6px 0 var(--navy)}
@media(min-width:1180px){.menu,.hdr-cta{display:flex}.burger{display:none}}
.drawer{position:fixed;inset:0;z-index:100;background:var(--noite);color:var(--sobre-noite);padding:calc(var(--rbar) + 1rem) 1.25rem 6rem;overflow:auto;translate:100% 0;transition:translate .45s var(--ease);visibility:hidden}
.drawer.on{translate:0 0;visibility:visible}
.drawer ul{list-style:none;padding:0;margin:1rem 0}
.drawer li>a,.drawer summary{display:block;font:800 1.6rem/1.2 var(--f-txt);padding:.8rem 0;border-bottom:1px solid var(--linha-noite);text-decoration:none;cursor:pointer}
.drawer details ul{margin:0;padding-left:1rem}
.drawer details li a{font-size:1.1rem;font-weight:600;padding:.6rem 0;color:var(--sobre-noite-2)}
.drawer .fechar{position:absolute;right:1rem;top:calc(var(--rbar) + .6rem);width:44px;height:44px;border-radius:50%;border:1px solid var(--linha-noite);background:none;color:#fff;font-size:1.4rem;cursor:pointer}
.cta-fixo{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.5rem;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(11,16,48,.96);backdrop-filter:blur(8px)}
.cta-fixo .btn{flex:1;padding-inline:.5rem}
@media(min-width:1180px){.cta-fixo{display:none}}
body.tem-cta-fixo{padding-bottom:72px} @media(min-width:1180px){body.tem-cta-fixo{padding-bottom:0}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:800 .95rem/1 var(--f-txt);padding:.95rem 1.4rem;border-radius:99px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s;min-height:46px}
.btn::after{content:"→";font-weight:600;transition:translate .25s var(--ease)}
.btn:hover::after{translate:4px 0}
.btn:active{transform:scale(.97)}
.btn--sol{background:var(--sol);color:var(--noite);box-shadow:0 8px 22px -10px rgba(236,136,7,.9)}
.btn--sol:hover{background:var(--sol-claro)}
.btn--navy{background:var(--navy);color:#fff}.btn--navy:hover{background:#3b3984}
.btn--line{border-color:currentColor;color:var(--navy);background:transparent}
.btn--line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sec--noite .btn--line,.sec--navy .btn--line,.cta-fixo .btn--line,.hero .btn--line,.cta-final .btn--line{color:var(--sobre-noite)}
.sec--noite .btn--line:hover,.sec--navy .btn--line:hover,.hero .btn--line:hover,.cta-final .btn--line:hover{background:#fff;color:var(--noite);border-color:#fff}
.btn--sm{padding:.7rem 1rem;font-size:.85rem;min-height:40px}
.btn--seta::after{content:none}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s3)}
.link-seta{font-weight:800;text-decoration:none;color:var(--navy);display:inline-flex;gap:.4rem}
.link-seta::after{content:"→";transition:translate .25s var(--ease)}.link-seta:hover::after{translate:4px 0}
.sec--noite .link-seta{color:var(--sol-claro)}

/* hero */
.hero{position:relative;min-height:min(88vh,860px);display:grid;align-items:end;background:var(--noite);color:#fff;overflow:hidden;isolation:isolate}
.hero canvas.rede{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero .wrap{padding-block:clamp(3rem,10vw,6rem)}
.hero h1{max-width:14ch;margin-bottom:var(--s3)}
.hero h1 em{font-style:normal;color:var(--sol)}
.hero .lead{color:var(--sobre-noite-2)}
.hero--int{min-height:0}
.hero--int h1{font-size:clamp(2.2rem,5.5vw,4.2rem);max-width:20ch}
.hero-dados{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:var(--s3);font:600 .95rem var(--f-num);color:var(--sobre-noite)}
.hero-dados b{color:var(--sol);font-weight:600}
.hero-foto{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.16;mix-blend-mode:luminosity}
.crumb{font:600 .8rem var(--f-num);color:var(--sobre-noite-2);margin-bottom:var(--s2)}
.crumb a{text-decoration:none}.crumb a:hover{color:#fff}

/* números em casas fixas */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r-g);overflow:hidden}
@media(min-width:760px){.nums{grid-template-columns:repeat(var(--cols,4),1fr)}}
.sec--noite .nums{background:var(--linha-noite);border-color:var(--linha-noite)}
.nums>div{background:var(--papel);padding:1.4rem 1.2rem}
.sec--noite .nums>div{background:var(--noite-2)}
.nums b{display:block;font:600 clamp(1.9rem,3.6vw,2.8rem)/1 var(--f-num);letter-spacing:-.04em;color:var(--navy);font-variant-numeric:tabular-nums}
.sec--noite .nums b{color:var(--sol)}
.nums span{display:block;margin-top:.5rem;font-size:.92rem;line-height:1.3;color:var(--tinta-2)}
.sec--noite .nums span{color:var(--sobre-noite-2)}
.nums small{display:block;margin-top:.35rem;font:400 .72rem var(--f-num);opacity:.7}

/* acordeão */
.acc{border-top:1px solid var(--linha)}
.sec--noite .acc,.sec--navy .acc{border-color:var(--linha-noite)}
.acc details{border-bottom:1px solid var(--linha)}
.sec--noite .acc details,.sec--navy .acc details{border-color:var(--linha-noite)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem .2rem;font:800 1.2rem/1.25 var(--f-txt)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-weight:600;transition:rotate .3s var(--ease),background .2s}
.acc details[open] summary::after{rotate:45deg;background:var(--sol);border-color:var(--sol);color:var(--noite)}
.acc .corpo{padding:0 .2rem 1.4rem;max-width:68ch;color:var(--tinta-2)}
.sec--noite .acc .corpo,.sec--navy .acc .corpo{color:var(--sobre-noite-2)}
.acc ul{margin:.5rem 0 0;padding-left:1.1rem}

/* abas / seletor */
.tabs-lista{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:var(--s3)}
.tabs-lista [role=tab]{flex:none;font:800 .95rem/1 var(--f-txt);padding:.85rem 1.1rem;border-radius:99px;border:1.5px solid var(--linha);background:transparent;color:inherit;cursor:pointer;transition:.25s var(--ease);min-height:44px}
.sec--noite .tabs-lista [role=tab]{border-color:var(--linha-noite)}
.tabs-lista [role=tab]:hover{border-color:var(--sol)}
.tabs-lista [role=tab][aria-selected=true]{background:var(--sol);border-color:var(--sol);color:var(--noite)}
[role=tabpanel][hidden]{display:none}
[role=tabpanel]{animation:entra .5s var(--ease)}
@keyframes entra{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}

/* faixa horizontal arrastável (tempo) */
.strip{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:0 max(1rem,calc((100vw - var(--wrap))/2)) 1rem;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--sol) transparent}
.strip.arrastando{cursor:grabbing;scroll-snap-type:none}
.strip>*{flex:none;scroll-snap-align:start}
.marco{width:min(240px,70vw);padding:1.1rem;border-top:3px solid var(--sol);background:var(--papel);border-radius:0 0 var(--r) var(--r)}
.sec--noite .marco{background:var(--noite-2)}
.marco b{display:block;font:600 2rem/1 var(--f-num);color:var(--navy);letter-spacing:-.04em}
.sec--noite .marco b{color:var(--sol)}
.marco span{display:block;margin-top:.5rem;font-size:.92rem;line-height:1.35}
.marco small{display:block;margin-top:.6rem;font:600 .78rem var(--f-num);opacity:.75}
.marco.apagado{border-top-style:dashed;border-top-color:var(--sobre-noite-2);opacity:.6}

/* carrossel */
.car{position:relative}
.car-pista{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.5rem}
.car-pista>*{flex:0 0 min(320px,82%);scroll-snap-align:start}
.car-ctl{display:flex;gap:.5rem;margin-top:1rem}
.car-ctl button{width:46px;height:46px;border-radius:50%;border:1.5px solid currentColor;background:none;color:inherit;font-size:1.2rem;cursor:pointer}
.car-ctl button:hover{background:var(--sol);border-color:var(--sol);color:var(--noite)}

/* cartões (usar com moderação) e fotos */
.cartao{background:var(--papel);border-radius:var(--r-g);overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;text-decoration:none;transition:translate .35s var(--ease)}
a.cartao:hover{translate:0 -4px}
.cartao .corpo{padding:1.2rem 1.3rem 1.4rem}
.cartao h3{margin-bottom:.4rem}
.cartao p{font-size:.95rem;color:var(--tinta-2);margin:0}
.sec--noite .cartao{background:var(--noite-2);box-shadow:none;border:1px solid var(--linha-noite)}
.sec--noite .cartao p{color:var(--sobre-noite-2)}
.foto{position:relative;margin:0;border-radius:var(--r-g);overflow:hidden;background:var(--navy);aspect-ratio:var(--ar,4/3)}
.foto img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.foto:hover img{scale:1.04}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,16,48,.55));pointer-events:none}
.foto--duo img{filter:grayscale(1) contrast(1.1);mix-blend-mode:luminosity;opacity:.8}
.foto figcaption{position:absolute;left:1rem;bottom:.8rem;right:1rem;z-index:1;color:#fff;font:600 .85rem var(--f-txt)}
.foto-vazia{display:grid;place-items:center;color:var(--sobre-noite-2);font:600 .85rem var(--f-num);text-align:center;padding:1rem}
.mosaico{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
.mosaico .foto:first-child{grid-column:span 2;--ar:16/9}
.mosaico .foto{--ar:1/1}

/* selo, lista com pontos acesos */
.selo{display:inline-flex;gap:.5rem;align-items:center;font:600 .78rem var(--f-num);padding:.45rem .75rem;border-radius:99px;background:rgba(236,136,7,.14);color:#9a5b00;border:1px dashed var(--sol)}
.sec--noite .selo{color:var(--sol-claro)}
.pontos{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.pontos li{display:flex;gap:.8rem;align-items:flex-start}
.pontos li::before{content:"";flex:none;margin-top:.55em;width:9px;height:9px;border-radius:50%;background:var(--sol);box-shadow:0 0 0 4px rgba(236,136,7,.2)}
.pontos--led li::before{background:var(--led);box-shadow:0 0 0 4px rgba(63,103,52,.2)}
.sec--noite .pontos--led li::before{background:var(--led-claro)}

/* linha contínua desenhada com a rolagem */
.linha-guia{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.linha-guia path{fill:none;stroke:var(--sol);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(236,136,7,.6))}
.linha-guia .base{stroke:var(--linha-noite);filter:none}
main{position:relative}
main>.sec,main>.hero{z-index:1}

/* diagrama de rede (nós clicáveis) */
.orbita{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.orbita svg{position:absolute;inset:0;width:100%;height:100%}
.orbita .nucleo{position:absolute;left:50%;top:50%;translate:-50% -50%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--noite);color:#fff;display:grid;place-items:center;text-align:center;font:800 1rem/1.15 var(--f-txt);box-shadow:0 0 0 8px rgba(236,136,7,.18),0 0 40px rgba(236,136,7,.35)}
.orbita .no{position:absolute;translate:-50% -50%;width:var(--nw,20%);aspect-ratio:1;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);font:800 clamp(.66rem,1.7vw,.74rem)/1.05 var(--f-txt);letter-spacing:-.02em;padding:0;hyphens:none;display:grid;place-items:center;text-align:center;cursor:pointer;padding:.2rem;transition:.3s var(--ease)}
.orbita .no:hover,.orbita .no[aria-pressed=true]{background:var(--sol);border-color:var(--sol);color:var(--noite);scale:1.15}
.sec--noite .orbita .no{background:var(--noite-2);border-color:var(--sobre-noite-2);color:var(--sobre-noite)}
.orbita-info{margin-top:var(--s3);padding:1rem 0 0;border-top:1px solid var(--linha)}
.sec--noite .orbita-info{border-top-color:var(--linha-noite)}
.orbita-info h3{margin-bottom:.3rem}.orbita-info p{margin:0;font-size:.98rem}

/* mapa de espaços (SVG interativo) */
.mapa{display:grid;gap:var(--s3)}
@media(min-width:900px){.mapa{grid-template-columns:1.4fr 1fr;align-items:start}}
.mapa svg{width:100%;height:auto}
.mapa .esp{cursor:pointer;transition:.3s var(--ease)}
.mapa .esp rect{fill:#fff;stroke:var(--navy);stroke-width:2;transition:.3s}
.mapa .esp text{font:800 13px var(--f-txt);fill:var(--navy);pointer-events:none}
.mapa .esp:hover rect,.mapa .esp:focus rect,.mapa .esp[aria-pressed=true] rect{fill:var(--sol);stroke:var(--sol)}
.mapa .esp:hover text,.mapa .esp[aria-pressed=true] text{fill:var(--noite)}
.mapa-info{padding:1.4rem;border-radius:var(--r-g);background:var(--noite);color:var(--sobre-noite);min-height:220px}
.mapa-info p{color:var(--sobre-noite-2)}

/* grade de programação */
.grade{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r-g);background:var(--papel)}
.grade table{border-collapse:collapse;width:100%;min-width:900px;font-size:.88rem}
.grade th{position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;padding:.8rem;font-weight:800}
.grade td{padding:.6rem .7rem;border-top:1px solid var(--linha);vertical-align:top}
.grade td:first-child{font:600 .85rem var(--f-num);white-space:nowrap;color:var(--tinta-2)}
.grade .ev{display:block;padding:.45rem .6rem;border-radius:6px;background:rgba(236,136,7,.14);border-left:0;font-weight:600}
.grade .ev.led{background:rgba(63,103,52,.16)}

/* barras de gráfico (público por edição) */
.barras{display:flex;align-items:flex-end;gap:clamp(.25rem,1vw,.6rem);height:260px;padding-top:1.5rem}
.barras>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.4rem;height:100%;min-width:0}
.barras i{display:block;width:100%;background:var(--navy);border-radius:5px 5px 0 0;height:var(--h);transition:height 1s var(--ease)}
.barras .proj i{background:repeating-linear-gradient(45deg,var(--sol),var(--sol) 6px,#ffc266 6px,#ffc266 12px)}
.barras b{font:600 .7rem var(--f-num);letter-spacing:-.04em}
.barras span{font:600 .68rem var(--f-num);color:var(--tinta-2)}
.rv-pre .barras i{height:0}

/* CTA final e rodapé */
.cta-final{background:var(--noite);color:#fff;text-align:center;overflow:hidden;position:relative;isolation:isolate}
.cta-final canvas.rede{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.7}
.cta-final h2{font-size:clamp(2.2rem,6vw,4.4rem);max-width:16ch;margin-inline:auto}
.cta-final .btns{justify-content:center}
.cta-final p{margin-inline:auto;color:var(--sobre-noite-2)}
.ftr{background:var(--noite);color:var(--sobre-noite-2);padding:var(--s5) 0 var(--s4);font-size:.92rem;border-top:1px solid var(--linha-noite)}
.ftr .wrap{display:grid;gap:var(--s4)}
@media(min-width:900px){.ftr .wrap{grid-template-columns:1.4fr repeat(3,1fr)}}
.ftr h4{font:800 .85rem var(--f-txt);color:#fff;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.8rem}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.ftr a{text-decoration:none}.ftr a:hover{color:#fff;text-decoration:underline}
.ftr .fim{grid-column:1/-1;border-top:1px solid var(--linha-noite);padding-top:var(--s3);font:400 .8rem var(--f-num);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}

/* revelação ao rolar: conteúdo visível por padrão, só anima se o JS marcar */
.js .rv{opacity:0;translate:0 22px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .rv.on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:0 0}
}
@media print{.rbar,.hdr,.cta-fixo,.drawer{display:none}}

/* ===================================================================
   v5 — identidade da Home levada a todas as páginas (23/10)
   Tipografia Plus Jakarta Sans + Hanken Grotesk + Fragment Mono,
   fundos claros, escuros orgânicos com azul elétrico, dourado nos destaques.
   =================================================================== */
:root{
  --f-disp:"Plus Jakarta Sans","Hanken Grotesk",system-ui,sans-serif;
  --eletrico:#2F7BFF; --eletrico-claro:#6FB0FF; --abismo:#070B26;
  --ouro:linear-gradient(100deg,#EC8807 0%,#FFC65C 48%,#F5A524 100%);
  --org:radial-gradient(55% 65% at 88% 8%,rgba(47,123,255,.42),transparent 62%),radial-gradient(45% 55% at 6% 96%,rgba(236,136,7,.22),transparent 62%),radial-gradient(60% 70% at 38% 42%,rgba(58,63,184,.55),transparent 70%),var(--abismo);
  --claro:radial-gradient(50% 70% at 92% 0%,rgba(47,123,255,.10),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(236,136,7,.08),transparent 70%),#fff;
}
@keyframes brilho{to{background-position:200% 0}}
body{font-size:.95rem;background:#fff}
h1,h2,h3,h4{font-family:var(--f-disp);letter-spacing:-.035em;line-height:1.05}
h1{font-size:clamp(2.3rem,5vw,4.4rem);font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(1.65rem,2.9vw,2.6rem);font-weight:800;max-width:24ch}
h3{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:700;letter-spacing:-.02em}
h1 em,h2 em{font-style:normal;background:var(--ouro);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 7s linear infinite}
.lead{font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.6}
.sec{padding-block:clamp(4.5rem,9vw,8rem)}
.sec-cab{margin-bottom:clamp(2.2rem,4.5vw,3.5rem)}
.sec--papel{background:#fff}
.sec--dia{background:linear-gradient(180deg,#F4F6FD,#fff)}
.sec--noite,.cta-final{background:var(--org)}
.sec--noite h2,.sec--noite h3,.cta-final h2{color:#fff}
/* navy vira seção clara: menos blocos escuros */
.sec--navy{background:linear-gradient(180deg,#fff,#F4F6FD);color:var(--tinta)}
.sec--navy .mut,.sec--navy p.lead,.sec--navy .acc .corpo{color:var(--tinta-2)}
.sec--navy .btn--line{color:var(--navy)}
.sec--navy .btn--line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sec--navy .acc,.sec--navy .acc details{border-color:var(--linha)}
.cta-final h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.btn{font:600 .88rem/1 var(--f-txt);padding:.9rem 1.45rem;transition:transform .35s var(--ease),box-shadow .35s,background .3s,color .3s}
.btn:hover{transform:translateY(-3px)}
.btn--sol{background:var(--ouro);background-size:160% 100%;color:#0B1030;box-shadow:0 10px 30px -12px rgba(236,136,7,.75)}
.btn--sol:hover{background:var(--ouro);background-position:100% 0}
.btn--sm{padding:.65rem 1rem;font-size:.82rem}
.tabs-lista [role=tab]{font:600 .86rem/1 var(--f-disp);padding:.7rem 1.05rem}
.tabs-lista [role=tab][aria-selected=true]{background:var(--abismo);border-color:transparent;color:#fff}
.sec--noite .tabs-lista [role=tab][aria-selected=true]{background:var(--ouro);color:var(--abismo)}
.acc summary{font:700 clamp(1rem,1.3vw,1.12rem)/1.25 var(--f-disp);letter-spacing:-.015em}
.nums b{font:800 clamp(1.8rem,3.2vw,2.6rem)/1 var(--f-disp);letter-spacing:-.045em;background:linear-gradient(120deg,#1B2470,var(--eletrico));-webkit-background-clip:text;background-clip:text;color:transparent}
.sec--noite .nums b{background:var(--ouro);-webkit-background-clip:text;background-clip:text}
.nums span{font-size:.86rem}
.marco b{font:800 1.7rem/1 var(--f-disp)}
.cartao{border-radius:18px}
.foto{border-radius:18px}
.foto img{filter:saturate(1.1)}
.foto::after{background:linear-gradient(180deg,transparent 70%,rgba(7,11,38,.4))}
.tag{font-weight:400}

/* ---------- cabeçalho: transparente sobre o hero; ao rolar fica branco e a barra de sites recolhe ---------- */
:root{--hdr:64px;--rbar:32px}
.site-topo{position:fixed;top:0;left:0;right:0;z-index:60;transition:translate .45s var(--ease),background-color .35s,box-shadow .35s;background-color:transparent}
.site-topo::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,11,38,.62),rgba(7,11,38,0));transition:opacity .35s}
.site-topo.rolou{translate:0 calc(-1 * var(--rbar));background-color:#fff;box-shadow:0 14px 30px -24px rgba(7,11,38,.55)}
.site-topo.rolou::before,.site-topo.claro::before{opacity:0}
.rbar{height:var(--rbar);background:none;color:rgba(233,236,250,.74);font:500 .74rem/1 var(--f-txt);border-bottom:1px solid rgba(233,236,250,.14)}
.site-topo:is(.rolou,.claro) .rbar{color:var(--tinta-2);border-color:var(--linha)}
.rbar a{padding:.32rem .65rem}
.rbar a::before{width:6px;height:6px;background:currentColor;opacity:.5}
.rbar a:hover{color:#fff}
.rbar a[aria-current]{color:#fff;background:rgba(236,136,7,.22)}
.rbar a[aria-current]::before{background:var(--sol);opacity:1}
.site-topo:is(.rolou,.claro) .rbar a:hover,.site-topo:is(.rolou,.claro) .rbar a[aria-current]{color:var(--navy)}
.site-topo:is(.rolou,.claro) .rbar a[aria-current]{background:rgba(236,136,7,.12)}
.hdr{position:static;background:none;backdrop-filter:none;border-bottom:1px solid transparent;transition:border-color .35s}
.site-topo.rolou .hdr{border-color:var(--linha)}
.hdr .logo{padding:.2rem 0}

.hdr .logo img{height:32px}
.hdr .logo b{font-family:var(--f-disp);font-weight:800;font-size:1.02rem;letter-spacing:-.04em;padding-right:.1rem}
.menu a,.menu button{font:500 .84rem/1 var(--f-txt);padding:.6rem .55rem}
.site-topo:not(.rolou,.claro) .menu>li>:is(a,button){color:#fff}
.site-topo:not(.rolou,.claro) .menu>li>:is(a,button):hover,.site-topo:not(.rolou,.claro) .menu>li>[aria-current]{background:rgba(255,255,255,.12);color:#fff}
.site-topo:not(.rolou,.claro) .hdr-cta .btn--line{color:#fff;border-color:rgba(255,255,255,.55)}
.site-topo:not(.rolou,.claro) .burger{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);backdrop-filter:blur(8px)}
.site-topo:not(.rolou,.claro) .burger span{background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}
@media(min-width:1180px) and (max-width:1399px){.hdr-cta .btn--line{display:none}}
.idiomas{display:flex;gap:.15rem;align-items:center}
.idiomas button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .45rem;border-radius:99px;font:400 .7rem/1 var(--f-num);letter-spacing:.06em;color:inherit;opacity:.75;transition:.25s}
.idiomas button:hover,.idiomas button[aria-pressed=true]{opacity:1;background:rgba(127,135,180,.16)}
.idiomas button:focus-visible{outline:2px solid var(--sol)}
.idiomas svg{width:18px;height:12.6px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.rbar .idiomas{display:none} @media(min-width:760px){.rbar .idiomas{display:flex}}
@media(max-width:560px){.rbar a{padding:.32rem .45rem}}
html{scroll-padding-top:calc(var(--hdr) + 16px)}
.drawer{padding-top:1.2rem}.drawer .fechar{top:.8rem}
.drawer .idiomas{color:#fff;margin-top:1.5rem}

/* ---------- heros: cinco aberturas ---------- */
.hero{min-height:min(100svh,900px);align-items:end}
.hero .wrap{padding-block:clamp(6.5rem,13vh,9rem) clamp(2.5rem,6vh,4rem);position:relative}
.hero h1{max-width:20ch;margin-bottom:1rem}
.hero .lead{max-width:56ch}
.hero .crumb{font:400 .74rem var(--f-num);letter-spacing:.06em}
.hero .btns{margin-top:clamp(1.4rem,3vh,2rem)}
.hero-foto{mix-blend-mode:normal}
/* A — foto em destaque */
.hero--foto{background:var(--abismo)}
.hero--foto .hero-foto{opacity:1;filter:saturate(1.2) contrast(1.05)}
.hero--foto::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,11,38,.85) 0%,rgba(7,11,38,.45) 40%,transparent 70%),linear-gradient(0deg,rgba(7,11,38,.9) 0%,transparent 45%)}
.hero--foto canvas.rede{opacity:.3}
@media(max-width:899px){.hero--foto::after{background:linear-gradient(0deg,rgba(7,11,38,.95) 0%,rgba(7,11,38,.65) 55%,rgba(7,11,38,.15) 90%)}}
/* B — headline em destaque */
.hero--titulo{background:var(--org);align-items:center;text-align:center;min-height:min(88svh,820px)}
.hero--titulo .hero-foto{opacity:.12;filter:grayscale(.4)}
.hero--titulo h1{margin-inline:auto;max-width:18ch;font-size:clamp(2.4rem,5.6vw,4.8rem)}
.hero--titulo .lead{margin-inline:auto}
.hero--titulo .btns{justify-content:center}
.hero--titulo .wrap{padding-bottom:clamp(3rem,8vh,5rem)}
/* C — dividido (escuro ou claro) */
.hero--split{background:var(--org);align-items:center}
.hero--split .hero-foto{opacity:1;filter:saturate(1.2);border-radius:24px;box-shadow:0 50px 90px -40px rgba(7,11,38,.75)}
@media(min-width:960px){
  .hero--split .hero-foto{inset:auto;right:max(1.5rem,calc((100vw - var(--wrap))/2));top:50%;translate:0 -42%;height:min(66svh,600px);aspect-ratio:4/5;width:auto;z-index:0}
  .hero--split .wrap>*{max-width:min(54%,620px)}
}
@media(max-width:959px){
  .hero--split{display:flex;flex-direction:column;align-items:stretch}
  .hero--split .wrap{order:1;padding-bottom:1.6rem}
  .hero--split .hero-foto{position:relative;inset:auto;order:2;height:230px;margin:0 clamp(1rem,4vw,2.5rem) 2.2rem;border-radius:18px}
}
/* claro (sem foto ou C claro) */
.hero--claro{background:var(--claro);color:var(--tinta)}
.hero--claro h1{color:var(--tinta)}
.hero--claro .lead,.hero--claro p.lead{color:var(--tinta-2)}
.hero--claro .crumb,.hero--claro .crumb a{color:var(--tinta-2)}
.hero--claro .crumb a:hover{color:var(--navy)}
.hero--claro .btn--line{color:var(--navy)}
.hero--claro .btn--line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hero--claro canvas.rede{opacity:.45}
.hero--claro:not(.hero--split){min-height:auto}
.hero--claro:not(.hero--split) .hero-foto{display:none}
.hero--claro:not(.hero--split) .wrap{padding-block:clamp(7rem,15vh,10rem) clamp(3.5rem,7vh,5rem)}
.hero--claro:not(.hero--split) h1{font-size:clamp(2.3rem,5.4vw,4.6rem);max-width:17ch}
.hero--claro:not(.hero--split)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(236,136,7,.6),rgba(47,123,255,.5),transparent)}

/* ===================================================================
   v6 (30/10) — identidade da Home do Congress disponível em todas as páginas.
   Contrato de uso: shared/COMPONENTES.md. home.css fica só com o que é exclusivo da Home.
   =================================================================== */
@keyframes flutua{0%,100%{translate:0 0;scale:1}50%{translate:5% -6%;scale:1.14}}
@keyframes corre{to{translate:-50% 0}}
.btn--sol:hover{box-shadow:0 16px 36px -12px rgba(236,136,7,.9)}
.ftr{font-family:var(--f-txt)}
.ftr h4{font-family:var(--f-num);font-weight:400;letter-spacing:.14em}

/* texto dourado: sem itálico e com folga no fim, para o recorte do gradiente não comer a última letra */
em.sol,.ouro,h1 em,h2 em,h3 em,.h1 em{font-style:normal}
:is(h1 em,h2 em,h3 em,.h1 em,.ouro,em.sol,.w.sol,.faixa-m span,.nums b,.cifras b,.grande b){padding-inline-end:.1em;margin-inline-end:-.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ouro,.h1 em{background:var(--ouro);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 7s linear infinite}

/* barra de progresso de leitura: <div class="prog"></div> logo após <body> */
.prog{position:fixed;inset:0 0 auto;height:3px;z-index:99;transform-origin:0 50%;scale:0 1;background:linear-gradient(90deg,#EC8807,#FFC65C,var(--eletrico))}

/* cabeçalho de seção em 2 colunas (h2 à esquerda, lead à direita): <div class="topo"><h2>..</h2><p class="lead">..</p></div> */
.topo{display:grid;gap:1.2rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media(min-width:900px){.topo{grid-template-columns:1fr 1fr;align-items:end;gap:3rem}}
.topo .lead,.topo h2{margin:0}

/* região escura orgânica: <section class="sec escuro"><div class="aura"><i></i><i></i><i></i></div>... */
.escuro{position:relative;isolation:isolate;overflow:hidden;background:var(--org);color:var(--sobre-noite)}
.escuro h2,.escuro h3{color:#fff}
.escuro .lead,.escuro p.lead{color:#BFC6EE}
.escuro .btn--line{color:#fff;border-color:rgba(255,255,255,.5)}
.escuro .btn--line:hover{background:#fff;color:var(--abismo);border-color:#fff}
.aura{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;width:48vmax;height:48vmax;border-radius:50%;filter:blur(80px);opacity:.55;animation:flutua 18s ease-in-out infinite}
.aura i:nth-child(1){right:-18%;top:-30%;background:radial-gradient(closest-side,rgba(47,123,255,.7),transparent)}
.aura i:nth-child(2){left:-20%;bottom:-35%;background:radial-gradient(closest-side,rgba(236,136,7,.45),transparent);animation-delay:-7s}
.aura i:nth-child(3){left:30%;top:20%;width:32vmax;height:32vmax;background:radial-gradient(closest-side,rgba(111,176,255,.35),transparent);animation-delay:-12s}

/* hero de capa com foto e parallax: <section class="h-hero escuro"><div class="foto-bg" data-parallax style="background-image:url(..)"></div>... */
.h-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.h-hero.escuro{background:var(--abismo)}
.h-hero .foto-bg{position:absolute;inset:-6% 0 0;z-index:-2;background:url(/img/expo-center-norte-hora-azul.webp) center/cover;filter:saturate(1.2) contrast(1.05)}
.h-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,11,38,.85) 0%,rgba(7,11,38,.42) 38%,transparent 66%),linear-gradient(0deg,rgba(7,11,38,.9) 0%,transparent 42%)}
.h-hero canvas.rede{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.3}
.h-hero .aura{display:none}
.h-hero .wrap{padding-top:clamp(6.5rem,12vw,9rem)}
.h-hero h1{font-size:clamp(2.5rem,6.4vw,5.6rem);line-height:1;max-width:none;margin:0 0 .9rem;color:#fff}
.h-hero h1 em{white-space:nowrap}
.h-hero .lead{color:#C9D0F5;max-width:52ch;margin:0 0 clamp(2rem,4vw,3rem)}
.h-base{display:grid;gap:1.3rem 2.5rem;grid-template-columns:1fr;border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:1.2rem 1.5rem;background:rgba(7,11,38,.42);backdrop-filter:blur(14px);margin:0 0 clamp(1.2rem,3vh,2rem)}
@media(min-width:900px){.h-base{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
.h-base dt{font:400 .68rem/1 var(--f-num);letter-spacing:.14em;text-transform:uppercase;color:var(--eletrico-claro);margin-bottom:.5rem}
.h-base dd{margin:0;font:600 clamp(.98rem,1.25vw,1.12rem)/1.25 var(--f-disp);letter-spacing:-.015em;color:#fff}
.h-base .btns{margin:0}
.h-hero .credito{position:absolute;right:clamp(1rem,4vw,3rem);bottom:1rem;font:400 .64rem var(--f-num);letter-spacing:.12em;color:rgba(255,255,255,.6)}
@media(max-width:899px){.h-hero::after{background:linear-gradient(0deg,rgba(7,11,38,.95) 0%,rgba(7,11,38,.65) 55%,rgba(7,11,38,.12) 88%)}.h-base{grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;padding:1rem}.h-base>div:first-child,.h-base .btns{grid-column:1/-1}.h-hero .credito{display:none}}

/* hero alternado: <section class="hero hero--rot" data-herorot><div class="slide" data-foto=".." data-nome="..">..</div>..</section> */
.hero--rot{display:grid;align-items:stretch;min-height:min(100svh,920px)}
.hero--rot>.slide{grid-area:1/1;position:relative;isolation:isolate;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 0s 1.1s}
.hero--rot>.slide.on,.hero--rot:not(.pronto)>.slide:first-of-type{opacity:1;visibility:visible;transition:opacity 1.1s var(--ease)}
.slide-bg{position:absolute;inset:0;z-index:-2;background:var(--abismo) center/cover no-repeat;filter:saturate(1.15) contrast(1.03);scale:1.07;transition:scale 9s cubic-bezier(.2,.6,.3,1)}
.slide.on .slide-bg{scale:1}
.hero--rot>.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,11,38,.9) 0%,rgba(7,11,38,.5) 42%,rgba(7,11,38,.1) 72%),linear-gradient(0deg,rgba(7,11,38,.92) 0%,transparent 50%)}
@media(max-width:899px){.hero--rot>.slide::after{background:linear-gradient(0deg,rgba(7,11,38,.96) 0%,rgba(7,11,38,.7) 55%,rgba(7,11,38,.2) 90%)}}
.hero--rot>.slide>.wrap{padding-block:clamp(7rem,15vh,10rem) clamp(5.5rem,11vh,7.5rem)}
.hero--rot :is(h1,.h1){font:800 clamp(2.3rem,5.4vw,4.6rem)/1.02 var(--f-disp);letter-spacing:-.045em;max-width:17ch;margin:0 0 1rem;color:#fff;text-wrap:balance}
.hero--rot .slide.on :is(h1,.h1,.lead,.btns){animation:entra .9s var(--ease) both}
.hero--rot .slide.on .lead{animation-delay:.12s}.hero--rot .slide.on .btns{animation-delay:.22s}
.rot-ctl{position:absolute;z-index:2;left:0;right:0;bottom:clamp(1.4rem,4vh,2.4rem);width:min(var(--wrap),100% - 2*clamp(1rem,4vw,2.5rem));margin-inline:auto;display:flex;align-items:center;gap:.35rem}
.rot-ind{all:unset;cursor:pointer;position:relative;width:clamp(44px,6vw,72px);height:28px}
.rot-ind::before,.rot-ind i{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px}
.rot-ind::before{right:0;background:rgba(255,255,255,.28)}
.rot-ind i{width:0;background:var(--ouro)}
.rot-ind[aria-current=true] i{width:100%}
.rot-ind.corre i{animation:enche 7s linear both}
@keyframes enche{from{width:0}to{width:100%}}
.hero--rot:is(:hover,:has(:focus-visible),.parado) .rot-ind.corre i{animation-play-state:paused}
.rot-ind:focus-visible,.rot-pausa:focus-visible{outline:2px solid #FFC65C;outline-offset:4px;border-radius:6px}
.rot-pausa{all:unset;cursor:pointer;margin-left:.6rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.35);color:#fff;transition:background .25s}
.rot-pausa:hover{background:rgba(255,255,255,.14)}
.rot-pausa svg{width:14px;height:14px}
.rot-pausa .p{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rot-pausa .r{display:none;fill:currentColor}
.parado .rot-pausa .p{display:none}.parado .rot-pausa .r{display:block}
@media(prefers-reduced-motion:reduce){.rot-pausa{display:none}}

/* faixa em movimento: <div class="faixa-m" aria-hidden="true"><div><span>..</span><b></b><span>..</span>.. (conteúdo repetido 2x)</div></div> */
.faixa-m{overflow:hidden;background:var(--abismo);border-top:1px solid rgba(233,236,250,.1);padding-block:1rem}
.faixa-m>div{display:flex;align-items:center;gap:2rem;width:max-content;animation:corre 42s linear infinite}
.faixa-m:hover>div{animation-play-state:paused}
.faixa-m span{font:700 clamp(.95rem,1.4vw,1.2rem)/1.1 var(--f-disp);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.faixa-m span:nth-of-type(2n){background:var(--ouro);-webkit-background-clip:text;background-clip:text;color:transparent}
.faixa-m b{width:6px;height:6px;border-radius:50%;background:var(--eletrico);box-shadow:0 0 10px var(--eletrico);font-size:0}

/* cifras com holofote: <div class="cifras"><div><b data-count="7000" data-pre="+">+7.000</b><span>..</span></div>..</div> */
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media(min-width:900px){.cifras{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1rem}}
.cifras>div{position:relative;overflow:hidden;padding:1.3rem 1.2rem 1.4rem;border:1px solid var(--linha);border-radius:16px;background:#fff;transition:transform .45s var(--ease),box-shadow .45s}
.cifras>div::before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(47,123,255,.14),transparent 70%);opacity:0;transition:opacity .3s}
.cifras>div:hover{transform:translateY(-5px);box-shadow:0 24px 50px -28px rgba(7,11,38,.45)}
.cifras>div:hover::before{opacity:1}
.cifras b{display:block;font:800 clamp(1.9rem,3.4vw,2.9rem)/1 var(--f-disp);letter-spacing:-.045em;font-variant-numeric:tabular-nums;background:linear-gradient(120deg,#1B2470,var(--eletrico));-webkit-background-clip:text;background-clip:text;color:transparent}
.cifras>div:first-child b{background:var(--ouro);-webkit-background-clip:text;background-clip:text}
.cifras span{display:block;margin-top:.55rem;font-size:.88rem;line-height:1.35;color:var(--tinta-2)}
.cifras small{display:block;margin-top:.4rem;font:400 .66rem var(--f-num);letter-spacing:.08em;color:#9a5b00}
.nota{margin-top:1.6rem;font:400 .72rem/1.5 var(--f-num);color:var(--tinta-2);max-width:70ch}

/* fecho escuro centralizado: <section class="sec fecho escuro"><div class="aura">..</div><canvas class="rede" data-rede></canvas><div class="wrap"><h2>..</h2><p>..</p><div class="btns">.. */
.fecho{text-align:center}
.fecho canvas.rede{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.55}
.fecho h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:16ch;margin:0 auto 1.2rem}
.fecho p{margin-inline:auto;color:#BFC6EE;font-size:1rem}
.fecho .btns{justify-content:center;margin-top:2rem}

/* títulos entram por máscara (h2/h3 com .rv) */
.js .rv:is(h2,h3){opacity:1;clip-path:inset(0 0 100% 0);translate:0 .45em;transition:clip-path 1s var(--ease),translate 1s var(--ease)}
.js .rv.on:is(h2,h3){clip-path:inset(-.25em -.3em);translate:0 0}

/* matérias do blog: <div data-posts data-n="2"></div> */
.posts{display:grid;gap:clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem)}
@media(min-width:900px){.posts{grid-template-columns:repeat(12,minmax(0,1fr))}.post{grid-column:span 4}.post--destaque{grid-column:span 7}.post--destaque+.post{grid-column:span 5}}
.post a{display:grid;gap:.85rem;align-content:start;text-decoration:none;color:inherit}
.post .foto{--ar:4/3;margin-bottom:.35rem;box-shadow:0 30px 60px -40px rgba(7,11,38,.6)}
.post--destaque .foto{--ar:16/10}
.post .foto img{object-position:50% 28%}
.post a:hover .foto img{scale:1.04}
.post-meta{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;font:400 .7rem/1.3 var(--f-num);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.post-meta span:first-child{color:#9a5b00}
.post h3{margin:0;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.15;max-width:30ch;transition:color .25s}
.post--destaque h3{font-size:clamp(1.4rem,2.4vw,2.05rem);max-width:26ch}
.post a:hover h3{color:var(--navy)}
.post-resumo{margin:0;color:var(--tinta-2);font-size:.95rem;max-width:56ch}
.post .link-seta{font:600 .88rem var(--f-txt)}
.post a:focus-visible{outline:3px solid var(--sol);outline-offset:6px;border-radius:14px}
.escuro .post-meta{color:#BFC6EE}.escuro .post-meta span:first-child{color:#FFC65C}
.escuro .post-resumo{color:#C9D0F5}.escuro .post a:hover h3{color:#FFC65C}.escuro .post .link-seta{color:#FFC65C}

/* quadro: todos os itens [título, texto] plotados de uma vez sobre uma via acesa: <div data-quadro="encontro" [data-titulo]></div> */
.quadro{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:clamp(1.6rem,3.5vw,2.8rem);background:var(--org);color:var(--sobre-noite);box-shadow:0 40px 80px -48px rgba(7,11,38,.7)}
.quadro-tit{margin:0 0 1.8rem;font:400 .7rem/1 var(--f-num);letter-spacing:.14em;text-transform:uppercase;color:var(--eletrico-claro)}
.quadro ul{list-style:none;margin:0;padding:0;display:grid;gap:2rem}
.quadro li{position:relative;padding-left:1.9rem}
.quadro li::before{content:"";position:absolute;left:0;top:.3em;width:10px;height:10px;border-radius:50%;background:#FFC65C;box-shadow:0 0 0 4px rgba(255,198,92,.16),0 0 18px rgba(255,198,92,.7)}
.quadro li::after{content:"";position:absolute;left:4.5px;top:calc(.3em + 16px);bottom:-1.6rem;width:1px;background:linear-gradient(rgba(255,198,92,.55),rgba(111,176,255,.25))}
.quadro li:last-child::after{display:none}
.quadro h3{margin:0 0 .5rem;color:#fff;font-size:clamp(1.05rem,1.4vw,1.25rem)}
.quadro p{margin:0;color:#C9D0F5;font-size:.93rem;max-width:44ch}
@media(min-width:760px){
  .quadro ul{grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:2.4rem 0}
  .quadro li{padding:2.1rem clamp(1rem,2.2vw,2rem) 0 0}
  .quadro li::before{top:0}
  .quadro li::after,.quadro li:last-child::after{display:block;left:18px;right:0;top:4.5px;bottom:auto;width:auto;height:1px;height:1.5px;background:linear-gradient(90deg,rgba(255,198,92,.85),rgba(111,176,255,.4))}
}
.quadro--claro{background:#fff;border:1px solid var(--linha);color:var(--tinta);box-shadow:0 30px 60px -44px rgba(7,11,38,.45)}
.quadro--claro h3{color:var(--tinta)}.quadro--claro p{color:var(--tinta-2)}.quadro--claro .quadro-tit{color:var(--navy)}
.quadro--claro li::before{background:var(--sol);box-shadow:0 0 0 4px rgba(236,136,7,.16)}

/* ciclo do SCB-Nexus: 12 meses convergindo no SCB-Con27: <div data-ciclo></div> (desenhado pelo site.js) */
.ciclo{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:var(--org);color:var(--sobre-noite);box-shadow:0 40px 80px -48px rgba(7,11,38,.7)}
.ciclo svg{display:block;width:100%;height:auto;overflow:visible}
.ciclo .grade-m{stroke:rgba(233,236,250,.07)}
.ciclo .mes{font:400 11px var(--f-num);letter-spacing:.1em;text-transform:uppercase;fill:#AEB5E0}
.ciclo .ano{font:400 9.5px var(--f-num);letter-spacing:.1em;fill:var(--eletrico-claro)}
.ciclo .via{fill:none;stroke:rgba(111,176,255,.36);stroke-width:1.4}
.ciclo .pulso{fill:none;stroke:#FFC65C;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:34 1000;stroke-dashoffset:34;animation:flui 6.5s linear infinite;filter:drop-shadow(0 0 6px rgba(255,198,92,.85))}
@keyframes flui{to{stroke-dashoffset:-1000}}
.ciclo .ativ{fill:var(--abismo);stroke:var(--eletrico-claro);stroke-width:1.6}
.ciclo .faixa{font:600 12.5px var(--f-disp);letter-spacing:-.01em;fill:#E9ECFA}
.ciclo .halo{fill:rgba(236,136,7,.18);transform-box:fill-box;transform-origin:center;animation:pulsa 3.4s ease-in-out infinite}
@keyframes pulsa{50%{scale:1.14;opacity:.55}}
.ciclo .no-t{font:800 14px var(--f-disp);letter-spacing:-.02em;fill:var(--abismo)}
.ciclo .no-d{font:400 10.5px var(--f-num);letter-spacing:.12em;fill:#FFC65C}
.ciclo-leg{list-style:none;margin:0;padding:0 1.2rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.ciclo-leg li{font:400 .72rem/1 var(--f-num);padding:.42rem .7rem;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(111,176,255,.3);color:#E9ECFA}
.ciclo-nota{margin:0;padding:0 clamp(1.2rem,3vw,2rem) 1.3rem;font:400 .68rem/1.5 var(--f-num);color:#AEB5E0;max-width:none}

/* logo: branca sobre azul (sem caixa); colorida no cabeçalho branco. Troca por CSS, o <img> não muda */
.hdr .logo img{width:auto;object-fit:none;object-position:-9999px 0;background:url(/img/logo-scba-branca.webp) center/contain no-repeat}
.site-topo:is(.rolou,.claro) .hdr .logo img{object-fit:contain;object-position:center;background:none}
.site-topo:not(.rolou,.claro) .hdr .logo b{color:#fff}
.logo-rod-branca{display:block;height:42px;width:auto;margin-bottom:1rem}

/* avatar: círculo com iniciais (use .avatar--p, --m ou --g) */
.avatar{--d:48px;width:var(--d);height:var(--d);flex:none;border-radius:50%;display:inline-grid;place-items:center;background:var(--navy);color:#fff;font:800 calc(var(--d)*.36)/1 var(--f-txt);letter-spacing:.02em;text-transform:uppercase;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--p{--d:32px}.avatar--m{--d:56px}.avatar--g{--d:96px}
.escuro .avatar,.sec--noite .avatar{background:var(--sol);color:var(--noite)}

/* card compacto de dirigente, para dispor lado a lado: <div class="pess-grid"><article class="pess-card">avatar + <div><h3>nome</h3><p>cargo</p></div></article>…</div> */
.pess-grid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pess-card{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-g);color:var(--tinta)}
.pess-card h3{font:800 1.05rem/1.2 var(--f-txt);margin:0}
.pess-card p{font:400 .9rem/1.35 var(--f-txt);margin:.2rem 0 0;color:var(--tinta-2)}
.pess-card a{color:var(--navy);font-weight:700}
.escuro .pess-card,.sec--noite .pess-card{background:rgba(255,255,255,.06);border-color:var(--linha-noite);color:#fff}
.escuro .pess-card p,.sec--noite .pess-card p{color:var(--sobre-noite-2)}

/* slide claro (Hermano): identidade clara do card; faixa escura só no topo para o menu */
.hero--rot>.slide--claro::after{background:linear-gradient(180deg,rgba(11,16,48,.55) 0,rgba(11,16,48,0) 20%),linear-gradient(90deg,rgba(240,246,252,.85) 0%,rgba(240,246,252,.35) 45%,transparent 65%)}
.slide--claro .slide-bg{background-position:right center;filter:none}
.hero--rot .slide--claro :is(h1,.h1){color:var(--navy)}
.hero--rot .slide--claro :is(h1,.h1) em{color:var(--sol)}
.hero--rot .slide--claro .lead{color:var(--tinta-2)}
.hero--rot:has(.slide--claro.on) .rot-ind::before{background:rgba(47,45,94,.22)}
.hero--rot:has(.slide--claro.on) .rot-pausa{color:var(--navy);border-color:rgba(47,45,94,.35)}
@media(max-width:899px){.slide--claro .slide-bg{background-position:86% top}.hero--rot>.slide--claro::after{background:linear-gradient(180deg,rgba(11,16,48,.55) 0,rgba(11,16,48,0) 18%),linear-gradient(0deg,rgba(240,246,252,.97) 0%,rgba(240,246,252,.85) 42%,rgba(240,246,252,0) 70%)}}