:root{
  --fundo:#050C1A; --fundo2:#081429; --painel:#0C1B36; --painel2:#10234A; --linha:#1A2F57;
  --azul:#2F7BFF; --azul2:#5B98FF; --ciano:#38D6FF; --verde:#3DDC97; --amarelo:#F5C451; --vermelho:#FF5D6C;
  --texto:#EAF1FC; --suave:#9FB0CF; --fraco:#6B7FA6; --texto2:#D3DEF2;
  --topo:rgba(5,12,26,.78); --grade:rgba(26,47,87,.55); --vidro:rgba(12,27,54,.55);
  --g1:#fff; --g2:#BFD6FF; --g3:var(--ciano); --lig:#23417A; --selo-txt:#BDF3DA;
  --brilho1:rgba(47,123,255,.35); --brilho2:rgba(56,214,255,.12); --mascote-bg:#00061D;
  --margem:clamp(1.25rem,6vw,6rem); --larg:76rem;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --corpo:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font-family:var(--corpo);
  font-size:1.0625rem;line-height:1.65;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--ciano);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--larg);margin:0 auto}

/* topo */
.topo{position:sticky;top:0;z-index:20;padding:.9rem var(--margem);
  background:var(--topo);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--display);font-weight:600}
.selo{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:9px;
  background:linear-gradient(135deg,var(--azul),#1440A0);font-size:.78rem;font-weight:700;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.topo nav{display:flex;align-items:center;gap:1.5rem;font-size:.97rem}
.topo nav a{text-decoration:none;color:var(--suave)}
.topo nav a:hover,.topo nav a[aria-current]{color:var(--texto)}
.topo nav .botao{color:#fff}
@media (max-width:40rem){.topo nav .esconde{display:none}}

/* botoes */
.botao{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.35rem;border-radius:10px;
  font-family:var(--display);font-weight:600;font-size:.98rem;text-decoration:none;
  border:1px solid var(--azul);transition:background .15s,border-color .15s,transform .15s}
.botao.cheio{background:var(--azul);color:#fff}
.botao.cheio:hover{background:var(--azul2);border-color:var(--azul2)}
.botao.vazado{border-color:var(--linha);color:var(--texto);background:var(--vidro)}
.botao.vazado:hover{border-color:var(--azul2)}
.botao.mini{padding:.5rem .95rem;font-size:.9rem}

/* abertura */
.abertura{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,7rem) var(--margem) clamp(4rem,8vw,6.5rem);
  background:radial-gradient(55rem 32rem at 80% 0%,var(--brilho1),transparent 60%),
             radial-gradient(38rem 24rem at 0% 100%,var(--brilho2),transparent 60%),var(--fundo)}
.abertura::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grade) 1px,transparent 1px),linear-gradient(90deg,var(--grade) 1px,transparent 1px);
  background-size:4rem 4rem;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 5%,transparent 68%);mask-image:radial-gradient(ellipse at 70% 30%,#000 5%,transparent 68%)}
.abertura .wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:62rem){.abertura .wrap{grid-template-columns:1fr}.terminal{left:0}}
.abertura h1{font-family:var(--display);font-weight:700;margin:0;font-size:clamp(2.5rem,5.6vw,4.6rem);
  line-height:1.03;letter-spacing:-.035em}
.abertura h1 .grad{background:linear-gradient(90deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.abertura .lead{max-width:34rem;margin:1.5rem 0 0;font-size:1.2rem;line-height:1.55;color:var(--suave)}
.acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.status{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;padding:.35rem .8rem;
  border:1px solid var(--linha);border-radius:999px;font-size:.9rem;color:var(--suave);background:var(--vidro)}
.pulso{width:.55rem;height:.55rem;border-radius:50%;background:var(--verde);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 .55rem rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}

/* cena da abertura */
.cena{position:relative;aspect-ratio:1/1;min-height:22rem}
.topologia{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.topologia .lig{stroke:var(--lig);stroke-width:1.4}
.topologia .forte{fill:var(--texto);font-weight:600}
.topologia .pacotes{filter:drop-shadow(0 0 6px rgba(56,214,255,.45))}
.topologia .pacotes .rot{fill:#BFEFFF;font:600 10.5px var(--mono);paint-order:stroke;stroke:#050C1A;stroke-width:3px}
.topologia .no circle{fill:var(--painel2);stroke:var(--azul);stroke-width:1.5}
.topologia .no.core circle{fill:var(--azul);stroke:#9CC4FF}
.topologia text{fill:var(--suave);font:500 11px var(--corpo)}
.terminal{position:absolute;left:-9%;bottom:2%;width:min(22.5rem,74%);border-radius:12px;overflow:hidden;
  background:rgba(8,18,38,.94);border:1px solid var(--linha);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(47,123,255,.08)}
.terminal .barra{display:flex;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--linha);background:rgba(12,27,54,.9)}
.terminal .barra i{width:.6rem;height:.6rem;border-radius:50%;background:#2A3E66}
.terminal pre{margin:0;padding:.9rem 1rem;min-height:10.5rem;font:400 .8rem/1.6 var(--mono);color:#CFE1FF;white-space:pre-wrap}
.terminal .ok{color:var(--verde)} .terminal .av{color:var(--amarelo)} .terminal .pr{color:var(--ciano)}
.cursor{display:inline-block;width:.5em;height:1em;background:var(--ciano);vertical-align:-.15em;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}

/* faixa de tecnologia */
.faixa-tec{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:var(--fundo2);overflow:hidden;padding:1.1rem 0}
.trilho{display:flex;gap:3rem;width:max-content;animation:rolar 40s linear infinite}
.trilho span{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--fraco);white-space:nowrap}
.trilho span b{color:var(--azul2);font-weight:600}
@keyframes rolar{to{transform:translateX(-50%)}}

/* secoes */
.secao{padding:clamp(4rem,9vw,7.5rem) var(--margem)}
.secao.alt{background:var(--fundo2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.titulo{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.titulo h2{font-family:var(--display);font-weight:700;margin:0;font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em}
.titulo p{margin:1rem 0 0;color:var(--suave);font-size:1.15rem}

/* vitrine */
.vitrine{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.vitrine + .vitrine{margin-top:clamp(5rem,10vw,8rem)}
.vitrine.inv .texto{order:2}
@media (max-width:62rem){.vitrine{grid-template-columns:1fr}.vitrine.inv .texto{order:0}}
.vitrine .sigla{display:inline-block;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ciano);
  padding:.25rem .7rem;border:1px solid rgba(56,214,255,.35);border-radius:999px;background:rgba(56,214,255,.07)}
.vitrine h3{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.1;letter-spacing:-.025em;margin:1rem 0 .8rem}
.vitrine .texto > p{color:var(--suave);margin:0 0 1.5rem;font-size:1.1rem}
.recursos{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem}
.recursos li{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;align-items:start}
.recursos .ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;background:var(--painel);border:1px solid var(--linha);color:var(--azul2)}
.recursos .ic svg{width:1.2rem;height:1.2rem}
.recursos strong{display:block;font-family:var(--display);font-weight:600;font-size:1rem}
.recursos span{color:var(--suave);font-size:.97rem}

/* moldura de tela */
.tela{position:relative;border-radius:14px;overflow:hidden;background:#0A162E;border:1px solid var(--linha);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(47,123,255,.06),0 0 80px -30px rgba(47,123,255,.45)}
.tela .navbar{display:flex;align-items:center;gap:.8rem;padding:.6rem .85rem;background:#0E1E3D;border-bottom:1px solid var(--linha)}
.tela .navbar i{width:.6rem;height:.6rem;border-radius:50%;background:#2A3E66}
.tela .url{flex:1;margin-left:.4rem;padding:.25rem .7rem;border-radius:6px;background:#081429;color:var(--fraco);font:400 .72rem var(--mono);
  display:flex;align-items:center;gap:.4rem;overflow:hidden;white-space:nowrap}
.tela .url svg{width:.7rem;height:.7rem;color:var(--verde);flex:none}
.legenda{margin:.8rem 0 0;font-size:.85rem;color:var(--fraco)}
.ui{font-size:.74rem;line-height:1.4;color:var(--texto)}

/* SACI ui */
.saci{display:grid;grid-template-columns:8.5rem 1fr;min-height:21rem}
.saci aside{background:#0B1832;border-right:1px solid var(--linha);padding:.9rem .7rem}
.saci aside .lg{display:flex;align-items:center;gap:.45rem;font:700 .85rem var(--display);margin-bottom:1rem}
.saci aside .lg svg{width:1.3rem;height:1.3rem}
.saci aside a{display:block;padding:.35rem .5rem;border-radius:6px;color:var(--suave);text-decoration:none;margin-bottom:.15rem}
.saci aside a.on{background:rgba(47,123,255,.16);color:#fff}
.saci .main{padding:.9rem 1rem}
.saci .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.kpi{background:var(--painel);border:1px solid var(--linha);border-radius:8px;padding:.55rem .65rem}
.kpi b{display:block;font:700 1.15rem var(--display)}
.kpi small{color:var(--suave)}
.tab{width:100%;border-collapse:collapse}
.tab th{text-align:left;font-weight:500;color:var(--fraco);padding:.35rem .4rem;border-bottom:1px solid var(--linha)}
.tab td{padding:.42rem .4rem;border-bottom:1px solid rgba(26,47,87,.6);white-space:nowrap}
.tab td:first-child{font-family:var(--mono);font-size:.7rem}
.pill{display:inline-block;padding:.08rem .45rem;border-radius:999px;font-size:.66rem;font-weight:600}
.pill.ok{background:rgba(61,220,151,.14);color:var(--verde)}
.pill.av{background:rgba(245,196,81,.14);color:var(--amarelo)}
.pill.er{background:rgba(255,93,108,.14);color:var(--vermelho)}
.pill.ex{background:rgba(56,214,255,.14);color:var(--ciano)}
.barrinha{height:4px;width:4.5rem;border-radius:4px;background:var(--linha);overflow:hidden;display:inline-block;vertical-align:middle}
.barrinha i{display:block;height:100%;width:40%;background:var(--ciano);animation:carregar 2.4s ease-in-out infinite}
@keyframes carregar{0%{width:5%}100%{width:100%}}
@media (max-width:34rem){.saci{grid-template-columns:1fr}.saci aside{display:none}.tab .h{display:none}}

/* Extranet ui */
.extra{padding:1.1rem 1.2rem 1.3rem;min-height:21rem;background:radial-gradient(30rem 14rem at 100% 0%,rgba(47,123,255,.18),transparent 70%)}
.extra .cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.5rem;flex-wrap:wrap}
.extra .cab b{font:600 .95rem var(--display)}
.seg{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:999px;background:rgba(61,220,151,.12);color:var(--verde);font-weight:600;font-size:.68rem}
.seg svg{width:.75rem;height:.75rem}
.busca{padding:.45rem .7rem;border-radius:8px;background:#081429;border:1px solid var(--linha);color:var(--fraco);margin-bottom:1rem}
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media (max-width:34rem){.apps{grid-template-columns:repeat(3,1fr)}}
.app{background:var(--painel);border:1px solid var(--linha);border-radius:10px;padding:.7rem .4rem .6rem;text-align:center;transition:border-color .2s,transform .2s}
.app .ico{width:2.1rem;height:2.1rem;margin:0 auto .45rem;border-radius:9px;display:grid;place-items:center}
.app .ico svg{width:1.1rem;height:1.1rem;color:#fff}
.app.ativo{border-color:var(--azul);animation:destaque 6s infinite}
@keyframes destaque{0%,60%,100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}30%{box-shadow:0 0 0 4px rgba(47,123,255,.25)}}
.sessao{margin-top:1rem;display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:8px;border:1px dashed var(--linha);color:var(--suave)}

/* PRISMA ui */
.prisma{padding:1rem 1.1rem 1.2rem;min-height:21rem}
.prisma .cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.prisma .cab b{font:600 .95rem var(--display)}
.filtros{display:flex;gap:.35rem}
.filtros span{padding:.15rem .5rem;border-radius:6px;background:var(--painel);border:1px solid var(--linha);color:var(--suave);font-size:.66rem}
.filtros span.on{border-color:var(--azul);color:#fff}
.prisma .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.8rem}
@media (max-width:34rem){.prisma .kpis{grid-template-columns:repeat(2,1fr)}}
.kpi .tend{font-size:.64rem;color:var(--verde)}
.graficos{display:grid;grid-template-columns:1.6fr 1fr;gap:.6rem}
@media (max-width:34rem){.graficos{grid-template-columns:1fr}}
.cartao{background:var(--painel);border:1px solid var(--linha);border-radius:8px;padding:.6rem .7rem}
.cartao small{color:var(--suave)}
.linha-graf path.l{fill:none;stroke:var(--ciano);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.linha-graf path.a{fill:url(#gradP);opacity:0}
.visivel .linha-graf path.l{animation:desenhar 1.8s ease-out forwards}
.visivel .linha-graf path.a{animation:aparecer 1s .9s ease-out forwards}
@keyframes desenhar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}
.fontes{display:grid;gap:.35rem;margin-top:.4rem}
.fonte{display:flex;align-items:center;gap:.45rem}
.fonte i{width:.5rem;height:.5rem;border-radius:2px}
.fonte .bar{flex:1;height:5px;border-radius:4px;background:var(--linha);overflow:hidden}
.fonte .bar b{display:block;height:100%;width:0;background:var(--azul2);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}

/* processo */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:0;padding:0;list-style:none;counter-reset:p}
@media (max-width:62rem){.passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:36rem){.passos{grid-template-columns:1fr}}
.passos li{position:relative;padding:1.5rem 1.3rem;border-radius:14px;background:var(--painel);border:1px solid var(--linha);counter-increment:p}
.passos li::before{content:counter(p);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:rgba(47,123,255,.16);color:var(--azul2);font:700 .95rem var(--display);margin-bottom:1rem}
.passos h3{font-family:var(--display);font-weight:600;font-size:1.12rem;margin:0 0 .4rem}
.passos p{margin:0;color:var(--suave);font-size:.98rem}

/* sobre */
.sobre-bloco{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:52rem){.sobre-bloco{grid-template-columns:1fr}}
.sobre-bloco p{margin:0 0 1.1rem;color:var(--suave);font-size:1.1rem}
.sobre-bloco p:first-child{color:var(--texto);font-size:1.3rem;line-height:1.5}
.areas{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.areas li{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-radius:12px;background:var(--painel);border:1px solid var(--linha)}
.areas b{font-family:var(--display);font-weight:600}
.areas span{color:var(--suave);text-align:right;font-size:.95rem}

/* chamada final */
.chamada{position:relative;overflow:hidden;text-align:center;padding:clamp(4rem,9vw,7rem) var(--margem);
  background:radial-gradient(40rem 20rem at 50% 120%,var(--brilho1),transparent 70%),var(--fundo)}
.chamada h2{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.2rem);letter-spacing:-.03em;line-height:1.08;margin:0 auto;max-width:22ch}
.chamada p{color:var(--suave);max-width:36rem;margin:1rem auto 2rem;font-size:1.1rem}
.chamada .acoes{justify-content:center}

/* paginas de projeto */
.proj-cab{padding:clamp(3rem,7vw,5.5rem) var(--margem) clamp(2.5rem,5vw,4rem);
  background:radial-gradient(50rem 26rem at 90% 0%,var(--brilho1),transparent 60%),var(--fundo)}
.proj-cab .voltar{display:inline-block;color:var(--suave);text-decoration:none;margin-bottom:1.5rem;font-size:.95rem}
.proj-cab .voltar:hover{color:var(--texto)}
.proj-cab h1{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,5rem);letter-spacing:-.04em;line-height:1;margin:.9rem 0 .6rem}
.proj-cab .sub{font-size:1.25rem;color:var(--suave);max-width:40rem;margin:0}
.proj-tela{padding:0 var(--margem)}
.proj-tela .wrap{margin-top:-.5rem}
.proj-corpo{padding:clamp(3rem,7vw,5rem) var(--margem)}
.proj-corpo .wrap{display:grid;grid-template-columns:1fr 17rem;gap:clamp(2rem,6vw,5rem)}
@media (max-width:56rem){.proj-corpo .wrap{grid-template-columns:1fr}}
.corpo{max-width:42rem}
.corpo h2{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.2;margin:2.4rem 0 .7rem}
.corpo h2:first-child{margin-top:0}
.corpo p{margin:0 0 1.15rem;color:var(--texto2)}
.corpo ul{margin:0 0 1.2rem;padding-left:1.15rem;color:var(--texto2)}
.corpo li{margin-bottom:.45rem}
.ficha{align-self:start;position:sticky;top:5.5rem;padding:1.3rem;border-radius:14px;background:var(--painel);border:1px solid var(--linha)}
.ficha dl{margin:0}
.ficha dt{color:var(--fraco);font-size:.85rem;margin-top:1rem}
.ficha dt:first-child{margin-top:0}
.ficha dd{margin:.2rem 0 0;font-family:var(--display);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.tags span{padding:.2rem .6rem;border-radius:999px;border:1px solid var(--linha);background:var(--fundo2);font-size:.82rem;color:var(--azul2)}
.outros{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:3rem}
@media (max-width:36rem){.outros{grid-template-columns:1fr}}
.outros a{display:block;padding:1.2rem 1.3rem;border-radius:12px;background:var(--painel);border:1px solid var(--linha);text-decoration:none;transition:border-color .15s}
.outros a:hover{border-color:var(--azul)}
.outros small{color:var(--ciano);font-family:var(--display);font-weight:600}
.outros b{display:block;font-family:var(--display);font-weight:600;margin-top:.3rem}

.rodape{padding:2rem var(--margem);border-top:1px solid var(--linha);color:var(--fraco);font-size:.92rem}
.rodape .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* revelacao ao rolar */
.js .revela{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .revela.visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revela{opacity:1;transform:none}
  .linha-graf path.l{stroke-dashoffset:0}.linha-graf path.a{opacity:1}
}

.seg-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:16px;overflow:hidden}
@media (max-width:62rem){.seg-grade{grid-template-columns:repeat(2,1fr)}}
@media (max-width:36rem){.seg-grade{grid-template-columns:1fr}}
.seg-grade li{background:var(--fundo2);padding:1.5rem 1.35rem}
.seg-grade .ic{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:10px;margin-bottom:1rem;
  background:color-mix(in srgb,var(--verde) 11%,transparent);color:var(--verde);border:1px solid color-mix(in srgb,var(--verde) 30%,transparent)}
.seg-grade .ic svg{width:1.25rem;height:1.25rem}
.seg-grade h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 .35rem}
.seg-grade p{margin:0;color:var(--suave);font-size:.95rem}
.fluxo{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media (max-width:40rem){.fluxo{grid-template-columns:1fr 1fr}}
.fluxo li{position:relative;padding:1rem;border-radius:12px;background:var(--painel);border:1px solid var(--linha)}
.fluxo li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-.75rem;width:.6rem;height:.6rem;
  border-top:2px solid var(--azul2);border-right:2px solid var(--azul2);transform:translateY(-50%) rotate(45deg)}
@media (max-width:40rem){.fluxo li:nth-child(2)::after{display:none}}
.fluxo b{display:block;font-family:var(--display);font-weight:600;font-size:.98rem;margin-bottom:.2rem;color:var(--texto)}
.fluxo span{color:var(--suave);font-size:.88rem;line-height:1.45;display:block}
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.9rem;margin:1rem 0 1.4rem}
.grupos div{padding:1.1rem 1.15rem;border-radius:12px;background:var(--painel);border:1px solid var(--linha)}
.grupos b{display:block;font-family:var(--display);font-weight:600;margin-bottom:.5rem;color:var(--ciano)}
.grupos ul{margin:0;padding-left:1rem;color:var(--suave);font-size:.94rem}
.grupos li{margin-bottom:.3rem}
.corpo .selos{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 1.4rem;padding:0;list-style:none}
.selos li{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem;border-radius:999px;margin:0;
  background:color-mix(in srgb,var(--verde) 9%,transparent);border:1px solid color-mix(in srgb,var(--verde) 30%,transparent);color:var(--selo-txt);font-size:.9rem}
.selos svg{width:.95rem;height:.95rem;color:var(--verde)}

.numeros{list-style:none;margin:0 0 clamp(3rem,6vw,4.5rem);padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:52rem){.numeros{grid-template-columns:repeat(2,1fr)}}
.numeros li{padding:1.4rem 1.3rem;border-radius:14px;background:linear-gradient(160deg,var(--painel2),var(--painel));border:1px solid var(--linha)}
.numeros b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.03em;line-height:1.05;
  background:linear-gradient(90deg,var(--g1),var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}
.numeros span{display:block;margin-top:.4rem;color:var(--suave);font-size:.95rem;line-height:1.4}
.linha-tempo{list-style:none;margin:0;padding:0;position:relative}
.linha-tempo::before{content:"";position:absolute;left:7.25rem;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--ciano),var(--azul) 40%,var(--linha))}
.linha-tempo li{position:relative;display:grid;grid-template-columns:6rem 1fr;gap:2.5rem;padding:0 0 2.4rem}
.linha-tempo li:last-child{padding-bottom:0}
.linha-tempo li::before{content:"";position:absolute;left:calc(7.25rem - 6px);top:.45rem;width:14px;height:14px;border-radius:50%;
  background:var(--fundo);border:3px solid var(--azul)}
.linha-tempo li:first-child::before{border-color:var(--ciano);box-shadow:0 0 0 5px rgba(56,214,255,.15)}
.linha-tempo .anos{text-align:right}
.linha-tempo .anos b{display:block;font-family:var(--display);font-weight:700;font-size:1.25rem}
.linha-tempo .anos span{color:var(--fraco);font-size:.9rem}
.linha-tempo small{font-family:var(--display);font-weight:600;color:var(--ciano);font-size:.95rem}
.linha-tempo h3{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.25;margin:.2rem 0 .4rem}
.linha-tempo p{margin:0;color:var(--suave);max-width:44rem}
@media (max-width:40rem){
  .linha-tempo::before{left:.45rem}
  .linha-tempo li{grid-template-columns:1fr;gap:.3rem;padding-left:2rem}
  .linha-tempo li::before{left:0}
  .linha-tempo .anos{text-align:left;display:flex;gap:.5rem;align-items:baseline}
}

.sub-titulo{font-family:var(--display);font-weight:600;font-size:1.35rem;margin:3.5rem 0 1.2rem}
.certs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem}
.corpo .certs{padding:0}
.cert{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;border-radius:12px;background:var(--painel);border:1px solid var(--linha);margin:0}
.cert .mono{flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:10px;font:700 .85rem var(--display);
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.cert b{display:block;font-family:var(--display);font-weight:600;font-size:.98rem;line-height:1.3;color:var(--texto)}
.cert small{color:var(--suave);font-size:.88rem}

.mascote{display:grid;grid-template-columns:15rem 1fr;gap:2rem;align-items:center;margin:2.6rem 0;padding:1.5rem 1.75rem 1.5rem 1rem;
  border-radius:18px;border:1px solid var(--linha);
  background:radial-gradient(22rem 18rem at 18% 50%,var(--brilho1),transparent 70%),var(--mascote-bg)}
.mascote img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
.mascote h2{margin-top:0}
.mascote p:last-child{margin-bottom:0}
@media (max-width:40rem){.mascote{grid-template-columns:1fr;padding:1.25rem}.mascote img{max-width:13rem;margin:0 auto}}

.proj-cab .com-mascote{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:end;gap:clamp(1rem,4vw,3.5rem)}
.mascote-topo{display:block;width:clamp(9.5rem,17vw,14rem);margin:-1rem 0 -2.5rem}
.mascote-topo{position:relative}
.mascote-topo img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.fumaca{position:absolute;left:91%;top:55%;width:2rem;height:9rem;transform:translateY(-100%);pointer-events:none}
.fumaca i{position:absolute;bottom:0;left:0;font:600 .95rem var(--mono);font-style:normal;color:var(--ciano);
  text-shadow:0 0 8px rgba(56,214,255,.8);opacity:0;animation:fumaca 4.2s linear infinite}
.fumaca i:nth-child(2){animation-delay:.7s;left:.5rem}.fumaca i:nth-child(3){animation-delay:1.4s;left:-.2rem}
.fumaca i:nth-child(4){animation-delay:2.1s;left:.7rem}.fumaca i:nth-child(5){animation-delay:2.8s;left:.1rem}.fumaca i:nth-child(6){animation-delay:3.5s;left:.4rem}
@keyframes fumaca{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.95}70%{opacity:.5}100%{transform:translate(.9rem,-8.5rem) scale(1.05);opacity:0}}
@media (prefers-reduced-motion:reduce){.fumaca{display:none}}
@media (max-width:40rem){.proj-cab .com-mascote{grid-template-columns:1fr auto;gap:.5rem}.mascote-topo{width:7.5rem;margin:0 .6rem -1.5rem 0}}

/* ---------- modo claro ---------- */
[data-tema="claro"]{
  color-scheme:light;
  --fundo:#EEF5FF; --fundo2:#E2EDFB; --painel:#FFFFFF; --painel2:#F4F8FE; --linha:#C8D8EE;
  --azul:#1D5FD8; --azul2:#1D5FD8; --ciano:#0A86B8; --verde:#0F9A62; --amarelo:#A87708; --vermelho:#CF3445;
  --texto:#0B1A33; --suave:#475B7C; --fraco:#6A7C9C; --texto2:#24364F;
  --topo:rgba(238,245,255,.82); --grade:rgba(29,95,216,.10); --vidro:rgba(255,255,255,.7);
  --g1:#0B1A33; --g2:#1D5FD8; --g3:#0A86B8; --lig:#9DB7DD; --selo-txt:#0B6B45;
  --brilho1:rgba(47,123,255,.20); --brilho2:rgba(56,214,255,.16); --mascote-bg:#DCE9FB;
}
/* telas ilustrativas e terminal continuam escuros no modo claro */
[data-tema="claro"] .tela,[data-tema="claro"] .terminal{
  --fundo2:#081429; --painel:#0C1B36; --painel2:#10234A; --linha:#1A2F57;
  --azul:#2F7BFF; --azul2:#5B98FF; --ciano:#38D6FF; --verde:#3DDC97; --amarelo:#F5C451; --vermelho:#FF5D6C;
  --texto:#EAF1FC; --suave:#9FB0CF; --fraco:#6B7FA6; color:var(--texto)}
[data-tema="claro"] .tela{box-shadow:0 30px 60px -28px rgba(13,40,90,.45),0 0 0 1px rgba(29,95,216,.08)}
[data-tema="claro"] .terminal{box-shadow:0 24px 50px -20px rgba(13,40,90,.45)}
[data-tema="claro"] .topologia .no.core circle{stroke:#1D5FD8}
[data-tema="claro"] .botao.cheio{color:#fff}
[data-tema="claro"] .numeros li{background:linear-gradient(160deg,#fff,var(--painel2))}
[data-tema="claro"] .mascote-topo img{filter:drop-shadow(0 16px 26px rgba(13,40,90,.25))}
[data-tema="claro"] .mascote img{filter:drop-shadow(0 12px 20px rgba(13,40,90,.25))}
[data-tema="claro"] .fumaca i{text-shadow:0 0 6px rgba(10,134,184,.35)}

/* botao de tema */
.tema{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;cursor:pointer;
  background:var(--vidro);border:1px solid var(--linha);color:var(--texto);padding:0;transition:border-color .15s}
.tema:hover{border-color:var(--azul2)}
.tema svg{width:1.15rem;height:1.15rem}
.tema .sol{display:none}
[data-tema="claro"] .tema .sol{display:block}
[data-tema="claro"] .tema .lua{display:none}
html.trocando,html.trocando *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}

/* PRISMA animado */
.prisma-anim{display:block;width:100%;height:auto;overflow:visible}
.prisma-anim .juntas{stroke:var(--fundo);stroke-width:6;stroke-linecap:round;fill:none}
.prisma-anim .raio-base{fill:none;stroke-width:2.2;opacity:.22;stroke-linecap:round}
.prisma-anim .raio{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:100;
  animation:raio 3s linear infinite;animation-delay:var(--d)}
.prisma-anim .raios-dentro .raio-base{opacity:.35;stroke:#fff}
.prisma-anim .raios-dentro .raio{stroke:#fff;opacity:.9}
@keyframes raio{to{stroke-dashoffset:0}}
.prisma-anim .feixe-base{fill:none;stroke:#BFF3FF;stroke-width:3;opacity:.3;stroke-linecap:round}
.prisma-anim .feixe{fill:none;stroke:#E9FCFF;stroke-width:5;stroke-linecap:round;stroke-dasharray:18 82;stroke-dashoffset:100;
  animation:raio 1.5s linear infinite}
.prisma-anim .varredura{animation:varrer 5.5s ease-in-out infinite}
@keyframes varrer{0%,55%{transform:skewX(-18deg) translateX(0)}100%{transform:skewX(-18deg) translateX(520px)}}
.prisma-anim .nucleo{filter:drop-shadow(0 0 10px rgba(56,214,255,.55))}
.prisma-anim .cruz rect{fill:#0E5E70}
.prisma-anim .cruz{transform-box:fill-box;transform-origin:center;animation:batida 1.5s ease-in-out infinite}
@keyframes batida{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(.98)}36%{transform:scale(1.09)}50%{transform:scale(1)}}
.prisma-anim .onda{fill:none;stroke:#38D6FF;stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:onda 1.5s ease-out infinite}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.prisma-topo{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
[data-tema="claro"] .prisma-topo{filter:drop-shadow(0 14px 22px rgba(13,40,90,.18))}
[data-tema="claro"] .prisma-anim .feixe-base{stroke:#0A86B8;opacity:.25}
[data-tema="claro"] .prisma-anim .feixe{stroke:#0A86B8}
[data-tema="claro"] .prisma-anim .raio-base{opacity:.35}
@media (prefers-reduced-motion:reduce){.prisma-anim .raio,.prisma-anim .feixe{stroke-dasharray:none;opacity:.7}.prisma-anim .varredura,.prisma-anim .onda{display:none}}

/* Extranet animada */
.extra-anim{display:block;width:100%;height:auto;overflow:visible}
.extra-anim .anel-fundo{fill:color-mix(in srgb,var(--azul) 8%,transparent)}
.extra-anim .anel{fill:none;stroke:var(--ciano);stroke-width:2.6;opacity:.6}
.extra-anim .anel-luz{fill:none;stroke:#E9FCFF;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:10 90;animation:girar-anel 7s linear infinite}
@keyframes girar-anel{to{stroke-dashoffset:-100}}
.extra-anim .fora-base{fill:none;stroke:var(--lig);stroke-width:2;stroke-linecap:round}
.extra-anim .dentro-base{fill:none;stroke:var(--verde);stroke-width:2.4;opacity:.45;stroke-linecap:round}
.extra-anim .fora{fill:none;stroke:var(--ciano);stroke-width:3.8;stroke-linecap:round;stroke-dasharray:14 86;stroke-dashoffset:14;opacity:0;
  animation:fora 3.6s linear infinite;animation-delay:var(--d)}
@keyframes fora{0%{stroke-dashoffset:14;opacity:1}40%{stroke-dashoffset:-86;opacity:1}41%,100%{stroke-dashoffset:-86;opacity:0}}
.extra-anim .dentro{fill:none;stroke:var(--verde);stroke-width:4.2;stroke-linecap:round;stroke-dasharray:30 70;stroke-dashoffset:30;opacity:0;
  animation:dentro 3.6s linear infinite;animation-delay:var(--d)}
@keyframes dentro{0%,56%{stroke-dashoffset:30;opacity:0}57%{opacity:1}74%{stroke-dashoffset:-70;opacity:1}75%,100%{stroke-dashoffset:-70;opacity:0}}
.extra-anim .disp circle{fill:var(--painel);stroke:var(--linha);stroke-width:1.5}
.extra-anim .disp .ic{fill:none;stroke:var(--texto);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.extra-anim .janela{fill:#0C1B36;stroke:#1F3C70;stroke-width:1.5}
.extra-anim .barra{fill:#1D5FD8}
.extra-anim .pt{fill:#fff;opacity:.75}
.extra-anim .app-d{opacity:.35}
.extra-anim .app-l{opacity:.35;transform-box:fill-box;transform-origin:center;animation:abrir 3.6s ease-out infinite;animation-delay:calc(var(--d) - 2.7s)}
@keyframes abrir{0%{opacity:1;transform:scale(1.12);filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}30%{opacity:.85;transform:scale(1)}60%,100%{opacity:.35;transform:scale(1);filter:none}}
/* verificação: cada acesso para no escudo, é conferido e só então segue */
.extra-anim .escudo{fill:#fff;stroke:var(--ciano);stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(56,214,255,.55));animation:escudo 1.2s ease-out infinite;animation-delay:1.44s}
@keyframes escudo{0%,8%{stroke:var(--ciano)}18%,45%{stroke:var(--verde);filter:drop-shadow(0 0 14px rgba(61,220,151,.75))}70%,100%{stroke:var(--ciano)}}
.extra-anim .cadeado-ic rect{fill:#0E5E70}
.extra-anim .cadeado-ic path{fill:none;stroke:#0E5E70;stroke-width:2.8;stroke-linecap:round}
.extra-anim .cadeado-ic{animation:cadeado 1.2s ease-out infinite;animation-delay:1.44s}
@keyframes cadeado{0%,10%{opacity:1}18%,45%{opacity:0}60%,100%{opacity:1}}
.extra-anim .ok{fill:none;stroke:var(--verde);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:ok 1.2s ease-out infinite;animation-delay:1.44s}
@keyframes ok{0%,12%{opacity:0}20%,45%{opacity:1}58%,100%{opacity:0}}
.extra-anim .varre{fill:none;stroke:var(--ciano);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:22 78;opacity:.85;transform-box:fill-box;transform-origin:center;animation:varrer-l 1.2s linear infinite}
@keyframes varrer-l{to{transform:rotate(360deg)}}
.extra-anim .onda-l{fill:none;stroke:var(--verde);stroke-width:2.5;transform-box:fill-box;transform-origin:center;opacity:0;animation:onda 1.2s ease-out infinite;animation-delay:1.65s}
.extra-topo{filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));width:clamp(12.5rem,24vw,19.5rem);margin:-2.5rem 0 -3.5rem clamp(1.5rem,7vw,6.5rem)}
@media (max-width:40rem){.extra-topo{width:9.5rem;margin:0 .4rem -1.5rem 0}}
[data-tema="claro"] .extra-topo{filter:drop-shadow(0 14px 22px rgba(13,40,90,.18))}
[data-tema="claro"] .extra-anim .fora{stroke:#0A86B8}
[data-tema="claro"] .extra-anim .anel-luz{stroke:#1D5FD8}
@media (prefers-reduced-motion:reduce){.extra-anim .fora,.extra-anim .dentro{stroke-dasharray:none;opacity:.7}.extra-anim .onda-l,.extra-anim .varre,.extra-anim .anel-luz,.extra-anim .ok{display:none}.extra-anim .app-l{opacity:.9}}