/* MYDS — portal de tecnologia, dados e inteligência.
   Apresentação no padrão do apple.com/br com as artes dos mockups do dono: fundo branco, vitrines pretas ou cinza
   com título grande centralizado e a imagem dominando, grade de produtos com a arte em cartão e o nome embaixo,
   links "Saiba mais ›", Figtree com teto de peso 500. Sem badges, eyebrows em caixa alta, vidro ou dourado solto. */
:root{
  --texto:#1d1d1f; --texto-2:#6e6e73; --texto-3:#86868b; --linha:#d2d2d7;
  --fundo:#fff; --cinza:#f5f5f7; --preto:#000;
  --navy:#0B2252; --navy-2:#123B73; --ouro:#C58A27; --ouro-luz:#E7B957;
  --link:#0B2252; --link-escuro:#E7B957;
  --fonte:"Figtree",-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --max:1240px; --max-t:980px; --max-txt:720px; --raio:28px; --gap:12px;
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fonte);font-weight:400;font-size:17px;color:var(--texto);background:var(--fundo);line-height:1.47;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,a,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:500}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(40px,5.6vw,76px)}
h2{font-size:clamp(32px,4vw,56px)}
h3{font-size:clamp(22px,2.4vw,32px)}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--navy-2);outline-offset:3px;border-radius:6px}
.escuro :focus-visible,.escuro:focus-visible{outline-color:var(--ouro-luz)}
.wrap{width:min(var(--max-t),100% - 44px);margin-inline:auto}
.wrap-l{width:min(var(--max),100% - 44px);margin-inline:auto}
.wrap-txt{width:min(var(--max-txt),100% - 44px);margin-inline:auto}
.centro{text-align:center}
.eyebrow{font-size:17px;color:var(--texto-2);margin-bottom:10px}
.escuro .eyebrow{color:rgba(255,255,255,.62)}
.lead,.sub{font-size:clamp(19px,2vw,26px);line-height:1.28;color:var(--texto);max-width:34ch;margin-inline:auto}
.escuro .lead,.escuro .sub{color:rgba(255,255,255,.88)}
.nota{font-size:14px;color:var(--texto-2);line-height:1.45}
.escuro .nota{color:rgba(255,255,255,.6)}
.gold{color:var(--ouro-luz)}
.acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:19px}
.links a,.saiba{color:var(--link);display:inline-flex;align-items:center}
.links a::after,.saiba::after{content:"›";margin-left:5px;font-size:1.1em;transition:transform .2s var(--ease)}
.escuro .links a,.escuro .saiba{color:var(--link-escuro)}
@media (hover:hover) and (pointer:fine){ .links a:hover,.saiba:hover{text-decoration:underline} .links a:hover::after,.saiba:hover::after{transform:translateX(3px)} }

/* ---------- pílulas (como os botões da Apple; marinho no claro, dourado no escuro) ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:980px;background:var(--navy);color:#fff;font-weight:500;font-size:17px;border:1px solid var(--navy);cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .18s var(--ease),filter .2s,background .2s,color .2s}
.pill:active{transform:scale(.98)}
.pill.secundario{background:transparent;color:var(--texto);border-color:var(--texto-2)}
.escuro .pill{background:var(--ouro);color:#1d1d1f;border-color:var(--ouro)}
.escuro .pill.secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.pill-p{min-height:32px;padding:0 14px;font-size:13px}
@media (hover:hover) and (pointer:fine){ .pill:hover{filter:brightness(1.08)} .pill.secundario:hover{background:rgba(0,0,0,.05)} .escuro .pill.secundario:hover{background:rgba(255,255,255,.1)} }

/* ---------- cabeçalho (44px, preto translúcido, itens pequenos) ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);color:#fff}
.topo .wrap-l{width:min(1360px,100% - 44px);height:44px;display:flex;align-items:center;gap:22px}
.topo .marca{display:flex;align-items:center}
.topo .marca img{height:18px;width:auto}
.topo nav.menu{display:flex;gap:clamp(14px,1.7vw,28px);margin-left:auto;font-size:12px;letter-spacing:-.01em;white-space:nowrap}
.topo nav.menu a{color:rgba(255,255,255,.8);padding:4px 0;flex:none;transition:color .2s}
.topo nav.menu a.ativo{color:#fff}
.topo .acoes-topo{display:flex;gap:18px;align-items:center;font-size:12px}
.topo .acoes-topo .entrar{background:none;border:0;color:rgba(255,255,255,.8);font:inherit;font-size:12px;cursor:pointer;padding:4px 0;transition:color .2s}
.hamb{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer}
.hamb span{display:block;height:1.5px;width:18px;background:#fff;margin:5px auto;transition:transform .25s var(--ease),opacity .2s}
.hamb.aberto span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.hamb.aberto span:nth-child(2){opacity:0}.hamb.aberto span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){ .topo nav.menu a:hover,.topo .acoes-topo .entrar:hover{color:#fff} }
@media (max-width:1079px){ .topo nav.menu,.topo .acoes-topo{display:none} .hamb{display:block} }

/* menu do celular (painel irmão do cabeçalho) */
.menu-movel{position:fixed;inset:0;z-index:60;background:#000;color:#fff;padding:0 24px 28px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;overflow:auto}
.menu-movel.aberto{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.menu-movel .topo-mm{height:44px;display:flex;align-items:center;justify-content:space-between}
.menu-movel .topo-mm img{height:18px;width:auto}
.menu-movel .fechar-mm{background:none;border:0;color:#fff;font-size:30px;line-height:1;width:44px;height:44px;cursor:pointer}
.menu-movel nav{display:grid;margin-top:14px}
.menu-movel nav a{font-size:26px;font-weight:500;letter-spacing:-.01em;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.menu-movel .acoes-mm{display:grid;gap:10px;margin-top:24px}
.menu-movel .acoes-mm .pill{width:100%;background:var(--ouro);color:#1d1d1f;border-color:var(--ouro)}
.menu-movel .acoes-mm .pill.secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
body.menu-aberto{overflow:hidden}
@media (min-width:1080px){ .menu-movel{display:none} }

/* mega menu de Soluções (desktop) */
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.topo.mega-aberto .mega{visibility:visible;opacity:1;transform:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.mega .wrap-l{width:min(var(--max),100% - 44px);height:auto;display:grid;align-items:start}
.mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:34px 0 40px}
.mega-col{display:grid;gap:6px;align-content:start;font-size:14px}
.mega-col a{color:rgba(255,255,255,.75);padding:3px 0;transition:color .2s}
.mega-col .mega-tit{color:rgba(255,255,255,.5);font-size:12px;margin-bottom:8px}
.mega-extra{border-left:1px solid rgba(255,255,255,.12);padding-left:28px}
@media (hover:hover) and (pointer:fine){ .mega-col a:hover{color:#fff} }
@media (max-width:1079px){ .mega{display:none} }

/* ---------- home: abertura (vitrine preta de largura total com a fita) ---------- */
.hero-home{position:relative;overflow:hidden;color:#fff;text-align:center;padding-top:clamp(56px,7vw,96px);background:#0a0b17}
.hero-home h1{max-width:16ch;margin:0 auto 14px}
.hero-home .sub{max-width:38ch}
.hero-home .arte{width:100%;margin-top:clamp(28px,4vw,52px)}
.hero-home .arte img{width:100%;height:auto;max-height:min(84vh,960px);object-fit:cover;object-position:center}

/* seções da home com título centralizado */
.secao{width:min(var(--max-t),100% - 44px);margin:0 auto;padding:clamp(56px,7vw,96px) 0 clamp(26px,3vw,40px);text-align:center}
.secao h2{margin-bottom:10px}
.secao + .grade-tiles,.secao + .portfolio{margin-bottom:clamp(40px,5vw,72px)}

/* grade de produtos (como no mockup: arte em cartão, nome e legenda embaixo) */
.grade-tiles{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;width:min(var(--max),100% - 44px);margin:0 auto}
.grade-tiles .tile{display:block;color:inherit}
.grade-tiles .tile .arte{border-radius:20px;overflow:hidden;aspect-ratio:5/4;background:#0a0b17;display:grid;place-items:center}
.grade-tiles .tile .arte img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.grade-tiles .tile .arte.sem-arte{background:linear-gradient(135deg,#0B2252,#061631 60%,#000);color:#fff;padding:24px;text-align:center}
.grade-tiles .tile .arte.sem-arte span{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.1;max-width:14ch}
.grade-tiles .tile h3{font-size:22px;margin:16px 0 2px}
.grade-tiles .tile p{font-size:15px;color:var(--texto-2);line-height:1.4}
.grade-tiles .tile .saiba{font-size:15px;margin-top:8px}
.grade-tiles .tile.oculto{display:none}
@media (hover:hover) and (pointer:fine){ .grade-tiles .tile:hover .arte img{transform:scale(1.03)} }
@media (max-width:700px){ .grade-tiles{grid-template-columns:1fr;gap:24px} }

/* portfólio em lista (como no mockup: miniatura à esquerda, título, descrição e nota) */
.portfolio{width:min(var(--max-t),100% - 44px);margin:0 auto}
.portfolio a{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;padding:30px 0;border-top:1px solid var(--linha);color:inherit}
.portfolio a:first-child{border-top:0}
.portfolio .arte{border-radius:16px;overflow:hidden;aspect-ratio:5/4;background:#0a0b17}
.portfolio .arte img{width:100%;height:100%;object-fit:cover}
.portfolio h3{font-size:24px;margin-bottom:6px}
.portfolio p{font-size:19px;line-height:1.35}
.portfolio .saiba{display:inline-flex;margin-top:8px;font-size:15px}
@media (max-width:600px){ .portfolio a{grid-template-columns:1fr;gap:14px} .portfolio .arte{max-width:280px} }

/* vitrines em grade (como os tiles da Apple: texto no alto, fundo preto ou cinza) */
.vitrines{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);width:min(1440px,100% - 24px);margin:0 auto var(--gap)}
.vitrine{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:var(--raio);overflow:hidden;background:var(--cinza);color:var(--texto);min-height:460px;padding:clamp(40px,5vw,64px) 24px 0}
.vitrine.largo{grid-column:1/-1}
.vitrine.escuro{background:#000;color:#fff}
.vitrine .txt{max-width:600px}
.vitrine h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:8px}
.vitrine .sub{font-size:clamp(17px,1.6vw,23px);max-width:34ch}
.vitrine .saiba{display:inline-flex;margin-top:14px;font-size:19px}
.vitrine .numero{font-size:clamp(64px,8vw,112px);line-height:1;letter-spacing:-.03em;color:var(--ouro-luz)}
.vitrine .arte{width:100%;margin-top:auto;padding-top:28px;display:flex;justify-content:center;align-items:flex-end}
.vitrine .arte img{width:100%;height:auto}
.vitrine .arte-mapa{padding:28px 0 0}
.vitrine .arte-mapa svg{width:min(380px,70%);height:auto;margin:0 auto}
.vitrine .arte-mapa path{fill:var(--navy-2);stroke:#fff;stroke-width:1.2}
.vitrine .arte-mapa path.sp{fill:var(--ouro)}
@media (hover:hover) and (pointer:fine){ a.vitrine:hover .saiba{text-decoration:underline} }
@media (max-width:820px){ .vitrines{grid-template-columns:1fr} .vitrine{min-height:0;padding-bottom:40px} .vitrine .arte{padding-bottom:0} }

/* chamada final */
.cta-final{background:#000;color:#fff;text-align:center;padding:clamp(72px,9vw,120px) 0}
.cta-final h2{max-width:22ch;margin:0 auto 14px}

/* ---------- páginas internas ---------- */
.hero-pagina{padding:clamp(56px,7vw,96px) 0 0;text-align:center;background:#fff}
.hero-pagina.escuro{background:#000;color:#fff}
.hero-pagina.cinza{background:var(--cinza)}
.hero-pagina h1{max-width:16ch;margin:0 auto 12px}
.hero-pagina .badges{justify-content:center;font-size:15px;color:var(--texto-2);margin-top:14px}
.hero-pagina.escuro .badges{color:rgba(255,255,255,.6)}
.hero-pagina.sem-cena{padding-bottom:clamp(40px,5vw,72px)}
.arte-hero{width:min(1240px,100%);margin:clamp(28px,4vw,48px) auto 0}
.arte-hero img{width:100%;height:auto}
.arte-hero.pequena{width:min(640px,100% - 44px);border-radius:24px;overflow:hidden;margin-bottom:clamp(40px,5vw,72px)}
.hero-pagina .cena-grande{margin:clamp(28px,4vw,48px) auto 0}
.bloco{padding:clamp(56px,7vw,96px) 0}
.bloco.cinza{background:var(--cinza)}
.bloco.escuro{background:#000;color:#fff}
.bloco h2{margin-bottom:14px}
.bloco h3.sub-tit{font-size:22px;margin-bottom:10px;color:var(--texto-2)}
.bloco .lead{margin-inline:0;max-width:40ch}
.bloco .centro .lead,.bloco.centro .lead{margin-inline:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid-2.alinhar-topo{align-items:start}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr;gap:32px} }
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:14px;color:var(--texto-2)}
.lista-check{list-style:none}
.lista-check li{padding:15px 0;border-top:1px solid var(--linha);font-size:19px;line-height:1.35}
.escuro .lista-check li{border-color:rgba(255,255,255,.15)}
.lista-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.lista-chips li{padding:8px 14px;border-radius:980px;background:var(--cinza);font-size:15px}
.bloco.cinza .lista-chips li{background:#fff}
.escuro .lista-chips li{background:rgba(255,255,255,.1)}
.lista-fontes{list-style:none}
.lista-fontes li{padding:12px 0;border-top:1px solid var(--linha);font-size:16px}
.estado-pendente{border-radius:16px;background:var(--cinza);padding:20px 22px;margin:18px 0}
.bloco.cinza .estado-pendente{background:#fff}
.estado-pendente b{display:block;margin-bottom:4px}
.estado-pendente p{font-size:15px;color:var(--texto-2)}
.escuro .estado-pendente{background:rgba(255,255,255,.08)}
.escuro .estado-pendente p{color:rgba(255,255,255,.7)}
.cena-pagina{margin-top:28px}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:8px}
.rel-card{display:block;padding:24px;border-radius:20px;background:var(--cinza);color:inherit;transition:transform .2s var(--ease)}
.bloco.cinza .rel-card{background:#fff}
.rel-card .eyebrow{font-size:14px;margin-bottom:2px}
.rel-card b{display:block;font-size:20px;margin:2px 0 6px}
.rel-card p{font-size:15px;color:var(--texto-2);line-height:1.4}
.rel-card i{font-style:normal;color:var(--link);display:inline-block;margin-top:10px;font-size:15px}
@media (hover:hover) and (pointer:fine){ .rel-card:hover{transform:translateY(-2px)} }
.passos{display:grid;gap:12px;margin-top:28px}
.passos div{padding:22px;border-radius:20px;background:#fff;font-size:15px;color:var(--texto-2);line-height:1.45}
.bloco:not(.cinza) .passos div{background:var(--cinza)}
.passos b{display:block;font-size:19px;color:var(--texto);margin-bottom:6px}
@media (max-width:900px){ .passos{grid-template-columns:1fr 1fr!important} }
@media (max-width:560px){ .passos{grid-template-columns:1fr!important} }

/* índice de grupo: filtros discretos */
.filtros{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.filtro{border:1px solid var(--linha);background:#fff;color:var(--texto);border-radius:980px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.filtro.ativo{background:var(--texto);color:#fff;border-color:var(--texto)}

/* linha do tempo em texto (sobre) */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tl div{padding-top:18px;border-top:1px solid var(--linha)}
.tl b{display:block;font-size:clamp(32px,3.4vw,44px);letter-spacing:-.02em;margin-bottom:8px;color:var(--navy)}
.tl p{font-size:16px;color:var(--texto-2);line-height:1.45}
@media (max-width:820px){ .tl{grid-template-columns:1fr 1fr} }

/* formulário */
form.contato{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;text-align:left}
form.contato label{display:grid;gap:6px;font-size:14px;color:var(--texto-2)}
form.contato label.full{grid-column:1/-1}
form.contato input,form.contato select,form.contato textarea{font:inherit;font-size:17px;padding:12px 14px;border:1px solid var(--linha);border-radius:12px;background:#fff;color:var(--texto);width:100%;min-width:0}
form.contato input:focus-visible,form.contato select:focus-visible,form.contato textarea:focus-visible{outline:2px solid var(--navy-2);outline-offset:0;border-color:var(--navy-2)}
form.contato textarea{min-height:120px;resize:vertical}
form.contato .aviso{grid-column:1/-1;font-size:13px;color:var(--texto-2)}
form.contato .aviso a{text-decoration:underline}
form.contato .env{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
form.contato .ret{font-size:15px;color:var(--texto-2)}
form.contato .ret.erro{color:#b3261e}
form.contato button[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px}
@media (max-width:700px){ form.contato{grid-template-columns:1fr} }

/* diálogo Entrar */
dialog{border:0;border-radius:24px;padding:28px;width:min(440px,92vw);background:#fff;color:var(--texto);box-shadow:0 30px 80px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
dialog h3{font-size:24px;margin-bottom:4px}
dialog .fechar{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:var(--cinza);border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.entrar-lista{display:grid;gap:8px;margin-top:18px}
.entrar-lista a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--cinza);font-weight:500}
.entrar-lista a span{font-size:12px;color:var(--texto-2);font-weight:400}

/* rodapé (cinza claro, texto pequeno, como o da Apple) */
.rodape{background:var(--cinza);color:var(--texto-2);font-size:12px;padding:40px 0 30px}
.rodape .wrap-l{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px;width:min(var(--max-t),100% - 44px)}
.rodape h4{font-size:12px;color:var(--texto);margin-bottom:10px}
.rodape ul{list-style:none;display:grid;gap:8px}
.rodape a{color:var(--texto-2);transition:color .2s}
.rodape .marca-rod img{height:18px;width:auto;margin-bottom:12px}
.rodape .marca-rod p{max-width:30ch;line-height:1.5}
.rodape .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--linha);padding-top:18px;margin-top:10px}
@media (hover:hover) and (pointer:fine){ .rodape a:hover{color:var(--texto);text-decoration:underline} }
@media (max-width:820px){ .rodape .wrap-l{grid-template-columns:1fr 1fr} }

/* revelação suave ao rolar */
.rv{opacity:0;translate:0 14px;transition:opacity .7s var(--ease),translate .7s var(--ease)}
.rv.in{opacity:1;translate:none}
html.sem-animacao *{transition:none!important;animation:none!important}
html.sem-animacao .rv{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;translate:none;transition:none} html{scroll-behavior:auto} .cena-orbitas .anel,.cena-orbitas .no{animation:none} .cena-modulos .mod,.cena-bi .bar,.cena-bi .linha,.cena-bi .kpi,.cena-conversa .m,.cena-agenda .ev{transition:none;opacity:1;transform:none;stroke-dashoffset:0} }
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes girar-rotulo{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

/* ---------- demonstrações interativas (cenas em HTML/SVG; medidas em cqw/cqh) ---------- */
.cena-grande{width:min(var(--max),100% - 40px);margin:clamp(36px,4vw,56px) auto 0;padding-bottom:clamp(72px,8vw,120px)}
.cena{position:relative;aspect-ratio:16/8;border-radius:var(--raio);overflow:hidden;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.08),transparent 45%),linear-gradient(135deg,#0B2343,#122F59 55%,#8E5E14);box-shadow:0 40px 90px rgba(6,22,49,.35);color:#fff;isolation:isolate;container-type:size}
.cena[data-tema="claro"]{background:radial-gradient(circle at 65% 30%,#DFEEFF,transparent 52%),linear-gradient(135deg,#FCFCFD,#D4E0F0);color:var(--navy);box-shadow:0 40px 90px rgba(6,22,49,.16)}
.cena .rotulo{position:absolute;left:3cqw;bottom:3cqw;font-size:clamp(9px,1.1cqw,13px);letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:.85;z-index:3;max-width:62%;line-height:1.3;text-align:left}
.cena .selo{position:absolute;right:2.4cqw;top:2.2cqw;font-size:clamp(8px,1cqw,11px);letter-spacing:.18em;text-transform:uppercase;font-weight:500;background:rgba(255,255,255,.9);color:var(--ouro-rotulo);border-radius:999px;padding:.6cqw 1.2cqw;z-index:3}
.cena[data-tema="escuro"] .selo{background:rgba(255,255,255,.12);color:var(--ouro-luz);border:1px solid rgba(255,255,255,.2)}
.cena.compacta .rotulo{display:none}
.cena svg.ceu{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:700px){ .cena{aspect-ratio:4/3;border-radius:24px} }
/* componentes das cenas: medidas em cqw/cqh (fração do quadro) para caber em qualquer tamanho; .compacta = quadro baixo */
.cena-modulos .mod{position:absolute;width:11%;aspect-ratio:1;border-radius:14%;background:linear-gradient(145deg,#2D5BA8,#0B2252);box-shadow:0 12px 24px rgba(6,22,49,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform 1.1s var(--ease),opacity .9s;opacity:0}
.cena-modulos .mod.ouro{background:linear-gradient(145deg,#F5D18C,#C58A27)}
.cena-modulos .mod.vidro{background:rgba(255,255,255,.75);box-shadow:0 12px 24px rgba(6,22,49,.18)}
.cena-modulos .janela{position:absolute;left:27%;top:14%;width:46%;height:72%;border-radius:1.4cqw;border:1.5px solid rgba(11,34,82,.35);background:rgba(255,255,255,.35);opacity:0;transition:opacity 1s var(--ease) .9s}
.cena-modulos .janela::before{content:"";position:absolute;left:0;right:0;top:0;height:9%;border-bottom:1.5px solid rgba(11,34,82,.25)}
.cena.ativa .cena-modulos .mod{opacity:1;transform:none!important}
.cena.ativa .cena-modulos .janela{opacity:1}
.cena-bi .bar{transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease)}
.cena-bi .linha{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.6s var(--ease) .4s}
.cena-bi .kpi{opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s var(--ease)}
.cena.ativa .cena-bi .bar{transform:scaleY(1)}
.cena.ativa .cena-bi .linha{stroke-dashoffset:0}
.cena.ativa .cena-bi .kpi{opacity:1;transform:none}
.cena-brasil path{fill:rgba(255,255,255,.14);stroke:rgba(231,185,87,.55);stroke-width:1;transition:fill .25s;cursor:pointer}
.cena[data-tema="claro"] .cena-brasil path{fill:#DCE6F5;stroke:#8EA4C8}
.cena-brasil path:hover,.cena-brasil path.on{fill:var(--ouro-luz);stroke:var(--ouro)}
.cena-brasil .tip{position:absolute;left:3cqw;top:3cqw;background:rgba(6,22,49,.85);color:#fff;border-radius:1.4cqw;padding:1.2cqw 1.6cqw;font-size:clamp(9px,1.3cqw,14px);pointer-events:none;z-index:3;max-width:40%;text-align:left}
.cena-brasil .tip b{display:block;font-size:clamp(11px,1.8cqw,18px)}
.cena-brasil .tip small{display:block;font-size:clamp(8px,1.1cqw,12px);opacity:.75;margin-top:.4cqw}
.cena-cresc{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr;padding:7cqw 3cqw 8cqw;text-align:left}
.cena.compacta .cena-cresc{padding-bottom:3cqw}
.cena-cresc .controles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;font-size:clamp(8px,1.1cqw,12px);letter-spacing:.04em}
.cena-cresc .controles label{display:grid;gap:.5cqw;background:rgba(255,255,255,.12);border-radius:1.4cqw;padding:1.2cqw 1.6cqw;min-width:0}
.cena[data-tema="claro"] .cena-cresc .controles label{background:rgba(6,22,49,.06)}
.cena-cresc .controles b{font-size:clamp(10px,1.6cqw,17px);font-weight:500}
.cena-cresc input[type=range]{width:100%;accent-color:var(--ouro);min-width:0}
.cena-cresc svg{width:100%;height:100%}
.cena-cresc .res{position:absolute;right:3cqw;bottom:9cqw;text-align:right;font-size:clamp(8px,1.1cqw,12px);letter-spacing:.06em}
.cena.compacta .cena-cresc .res{bottom:3.5cqw}
.cena-cresc .res b{display:block;font-size:clamp(14px,2.6cqw,28px);font-weight:500;color:var(--ouro-luz)}
.cena[data-tema="claro"] .cena-cresc .res b{color:var(--ouro-rotulo)}
.cena-orbitas{position:absolute;inset:0;display:grid;place-items:center}
.cena-orbitas .nucleo{width:min(24cqw,40cqh);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 0 0 1.6cqw rgba(231,185,87,.12),0 20px 50px rgba(0,0,0,.35);z-index:2}
.cena-orbitas .nucleo img{width:62%}
.cena-orbitas .anel{position:absolute;border-radius:50%;border:1px dashed rgba(231,185,87,.5);animation:girar 36s linear infinite;aspect-ratio:1}
.cena-orbitas .anel.a1{width:min(44cqw,58cqh)}
.cena-orbitas .anel.a2{width:min(80cqw,90cqh);animation-duration:52s;animation-direction:reverse}
.cena-orbitas .no{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);background:rgba(255,255,255,.95);color:var(--navy);font-size:clamp(7px,1.1cqw,12px);letter-spacing:.08em;font-weight:500;padding:.8cqw 1.4cqw;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:girar-rotulo 36s linear infinite;white-space:nowrap}
.cena-orbitas .anel.a2 .no{animation-duration:52s;animation-direction:normal}
.cena-orbitas .no.n2{left:100%;top:50%}.cena-orbitas .no.n3{left:50%;top:100%}.cena-orbitas .no.n4{left:0;top:50%}
.cena-conversa{position:absolute;inset:0;padding:10cqw 3.4cqw 3.4cqw;display:flex;flex-direction:column;gap:1.2cqw;justify-content:flex-end;overflow:hidden;text-align:left}
.cena-conversa .m{max-width:62%;padding:1.2cqw 1.8cqw;border-radius:2.2cqw;font-size:clamp(10px,1.5cqw,18px);line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s var(--ease)}
.cena-conversa .m.p{align-self:flex-end;background:var(--ouro-luz);color:var(--navy);border-bottom-right-radius:.5cqw}
.cena-conversa .m.a{align-self:flex-start;background:rgba(255,255,255,.95);color:var(--navy);border-bottom-left-radius:.5cqw}
.cena-conversa .m.s{align-self:center;background:transparent;font-size:clamp(8px,1.1cqw,12px);letter-spacing:.14em;text-transform:uppercase;opacity:0;color:inherit;text-align:center;max-width:100%}
.cena.ativa .cena-conversa .m{opacity:1;transform:none}
.cena.ativa .cena-conversa .m.s{opacity:.8}
.cena.compacta .cena-conversa .m:nth-child(4),.cena.compacta .cena-conversa .m:nth-child(5){display:none}
.cena-conversa .fluxo{position:absolute;left:3.4cqw;top:2.6cqw;right:3.4cqw;display:flex;gap:1.2cqw;align-items:center;font-size:clamp(7px,1.1cqw,12px);letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.cena-conversa .fluxo span{padding:.7cqw 1.3cqw;border-radius:999px;border:1px solid rgba(255,255,255,.3);white-space:nowrap}
.cena[data-tema="claro"] .cena-conversa .fluxo span{border-color:rgba(6,22,49,.25)}
.cena-conversa .fluxo i{flex:1;height:1px;background:currentColor;opacity:.4;min-width:1cqw}
.cena-agenda{position:absolute;inset:0;padding:3cqw 3.4cqw 8cqw;display:grid;grid-template-rows:auto 1fr;gap:1.4cqw;font-size:clamp(9px,1.4cqw,16px);color:var(--navy);text-align:left}
.cena.compacta .cena-agenda{padding-bottom:3.4cqw}
.cena-agenda .cab{display:flex;justify-content:space-between;align-items:center;font-weight:500}
.cena-agenda .grade{display:grid;grid-template-columns:repeat(5,1fr);gap:1cqw;background:rgba(255,255,255,.7);border-radius:2cqw;padding:1.6cqw;align-content:start;overflow:hidden}
.cena-agenda .dia{display:grid;gap:1cqw;font-size:clamp(8px,1.25cqw,14px);align-content:start}
.cena-agenda .dia b{text-align:center;color:var(--cinza);font-weight:500}
.cena-agenda .ev{background:#DCE6F5;border-left:.45cqw solid var(--azul-claro);border-radius:.9cqw;padding:.8cqw 1cqw;line-height:1.25;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s var(--ease)}
.cena-agenda .ev.ia{background:#FFF3DA;border-left-color:var(--ouro)}
.cena.ativa .cena-agenda .ev{opacity:1;transform:none}
.cena.compacta .cena-agenda .dia .ev:nth-child(4){display:none}
.cena-trajetoria{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:2cqw;padding:6cqw 6cqw;text-align:left}
.cena-trajetoria::before{content:"";position:absolute;left:6cqw;right:6cqw;top:50%;height:1px;background:linear-gradient(90deg,var(--ouro),rgba(197,138,39,.2))}
.cena-trajetoria div{position:relative;padding-top:3.4cqw}
.cena-trajetoria div::before{content:"";position:absolute;left:0;top:0;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--ouro-luz);box-shadow:0 0 0 .4cqw rgba(231,185,87,.3)}
.cena-trajetoria b{display:block;font-size:clamp(22px,4.6cqw,56px);line-height:1;letter-spacing:-.03em;color:var(--ouro-luz)}
.cena[data-tema="claro"] .cena-trajetoria b{color:var(--navy)}
.cena-trajetoria span{display:block;font-size:clamp(9px,1.3cqw,15px);line-height:1.35;margin-top:1cqw;opacity:.85}
.cena.compacta .cena-trajetoria{grid-template-columns:repeat(2,1fr);row-gap:4cqw}
.cena.compacta .cena-trajetoria::before{display:none}
/* demonstração de BI em HTML (interativa) */
.cena-bi2{position:absolute;inset:0;padding:6.5cqw 3cqw 3cqw;display:grid;grid-template-rows:auto auto 1fr;gap:1.6cqw;text-align:left;color:var(--navy)}
.cena[data-tema="escuro"] .cena-bi2{color:#fff}
.cena-bi2 .cab{display:flex;justify-content:space-between;align-items:center;gap:1cqw;font-size:clamp(10px,1.6cqw,18px);font-weight:500}
.cena-bi2 .cab select{font:inherit;font-size:clamp(9px,1.2cqw,14px);font-weight:400;padding:.6cqw 1.2cqw;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);color:inherit;max-width:40%}
.cena[data-tema="claro"] .cena-bi2 .cab select{border-color:rgba(6,22,49,.2);background:#fff}
.cena-bi2 .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2cqw}
.cena-bi2 .kpi{background:rgba(255,255,255,.12);border-radius:1.4cqw;padding:1.2cqw 1.4cqw;min-width:0}
.cena[data-tema="claro"] .cena-bi2 .kpi{background:#fff;box-shadow:0 .6cqw 2cqw rgba(6,22,49,.06)}
.cena-bi2 .kpi span{display:block;font-size:clamp(8px,1.1cqw,12px);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cena-bi2 .kpi b{display:block;font-size:clamp(12px,2.1cqw,24px);font-weight:500;margin-top:.3cqw;white-space:nowrap}
.cena-bi2 .kpi i{font-style:normal;font-size:clamp(8px,1cqw,11px);color:#7BD389}
.cena-bi2 .graf{display:grid;grid-template-columns:1.7fr 1fr;gap:1.2cqw;min-height:0}
.cena-bi2 .graf>div{background:rgba(255,255,255,.12);border-radius:1.4cqw;padding:1.2cqw 1.4cqw;min-width:0;display:grid;grid-template-rows:auto 1fr;gap:.6cqw}
.cena[data-tema="claro"] .cena-bi2 .graf>div{background:#fff;box-shadow:0 .6cqw 2cqw rgba(6,22,49,.06)}
.cena-bi2 h5{font-size:clamp(9px,1.2cqw,13px);font-weight:500}
.cena-bi2 svg{width:100%;height:100%;min-height:0}
.cena-bi2 .barras{display:flex;align-items:flex-end;gap:.8cqw;height:100%}
.cena-bi2 .barras i{flex:1;background:linear-gradient(180deg,#9AD9FC,#2D5BA8);border-radius:.6cqw .6cqw 0 0;transition:height .6s var(--ease)}
.cena-bi2 .barras i.ouro{background:linear-gradient(180deg,#F0C25A,#C58A27)}
.cena.compacta .cena-bi2 .graf{grid-template-columns:1fr}
.cena.compacta .cena-bi2 .graf>div:last-child{display:none}
.cena.compacta .cena-bi2 .kpis{grid-template-columns:repeat(2,1fr)}