/* Apresentação do BrasilGov Connect · identidade BrasilGov Summit
   Marinho profundo, verde-água, laranja e azul-claro, fonte Inter, bolinhas conectadas. */
:root {
  --bg: #061018; --navy: #022449; --card: #0c1b2e; --sup: #10233a; --sup2: #15304f;
  --agua: #3df4d0; --agua2: #14b494; --laranja: #ffad40; --laranja2: #f49416; --ceu: #78bbff;
  /* nomes antigos usados nas páginas, agora nas cores da marca */
  --azul: #3df4d0; --azul2: #14b494; --verde: #3df4d0; --verde2: #14b494;
  --tinta: #e8f1fb; --muted: #93a4ba; --linha: rgba(255, 255, 255, .09); --fundo: #0c1b2e;
  --texto2: #c6d3e3;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; color: var(--tinta); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 600px at 10% -10%, rgba(10, 58, 127, .45), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(61, 244, 208, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%2378bbff' stroke-opacity='.10' stroke-width='1'%3E%3Cpath d='M20 40 L90 20 L160 70 L230 30 M90 20 L110 120 L160 70 M110 120 L40 170 L20 40 M110 120 L200 160 L230 30 M40 170 L130 240 L200 160 L250 230'/%3E%3C/g%3E%3Cg fill='%2378bbff' fill-opacity='.13'%3E%3Ccircle cx='20' cy='40' r='2'/%3E%3Ccircle cx='90' cy='20' r='2.4'/%3E%3Ccircle cx='160' cy='70' r='2'/%3E%3Ccircle cx='230' cy='30' r='2.4'/%3E%3Ccircle cx='110' cy='120' r='2.6'/%3E%3Ccircle cx='40' cy='170' r='2'/%3E%3Ccircle cx='200' cy='160' r='2.4'/%3E%3Ccircle cx='130' cy='240' r='2'/%3E%3Ccircle cx='250' cy='230' r='2'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}
h1, h2, h3 { font-family: Inter, system-ui, sans-serif; font-weight: 800; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 10px; }
a { color: var(--agua); }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(6, 16, 24, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 20px; }
.marca { display: flex; align-items: center; gap: 10px; font: 800 17px Inter, sans-serif; color: var(--tinta); text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.logo { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--bg) 22%, transparent 23%), conic-gradient(from 20deg, var(--agua), var(--ceu), var(--laranja), var(--agua)); color: transparent; font-size: 0; box-shadow: 0 0 18px rgba(61, 244, 208, .25); }
.menu { display: flex; gap: 2px; overflow-x: auto; margin-left: auto; scrollbar-width: none; }
.menu a { padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap; border: 1px solid transparent; }
.menu a:hover { color: var(--tinta); background: rgba(255, 255, 255, .05); }
.menu a.on { background: rgba(61, 244, 208, .1); border-color: rgba(61, 244, 208, .4); color: var(--agua); }
.topo .btn { padding: 9px 14px; font-size: 13px; }
@media (max-width: 760px) { .topo .btn { display: none; } }

/* blocos */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.hero { padding: 46px 0 24px; }
.hero-grade { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .hero-grade { grid-template-columns: 1fr 340px; } }
.etq { display: inline-block; font: 800 12px Inter, sans-serif; letter-spacing: .12em; color: var(--agua); background: rgba(61, 244, 208, .1); border: 1px solid rgba(61, 244, 208, .3); padding: 6px 11px; border-radius: 99px; text-transform: uppercase; }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 14px 0 12px; }
.hero h1 em { font-style: normal; color: var(--agua); }
.lead { font-size: 19px; color: var(--texto2); max-width: 760px; }
.secao { padding: 26px 0; }
.secao > h2, .titulo { font-size: 28px; margin-bottom: 8px; }
.sub { color: var(--muted); font-size: 16px; margin-bottom: 18px; }
.duas { display: grid; gap: 40px; align-items: start; padding: 10px 0 30px; }
@media (min-width: 1000px) { .duas { grid-template-columns: minmax(0, 1fr) 430px; } }
.bloco { margin-bottom: 30px; }
.bloco h2 { font-size: 24px; margin-bottom: 8px; }
.bloco h3 { font-size: 18px; margin: 14px 0 4px; }
.lista { padding-left: 20px; margin: 6px 0 0; color: var(--texto2); }
.lista li { margin: 7px 0; }
.lista li::marker { color: var(--agua); }
.lista b, .passos b { color: var(--tinta); }
.passos { counter-reset: p; list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.passos li { counter-increment: p; position: relative; padding: 12px 16px 12px 54px; border: 1px solid var(--linha); border-radius: 14px; background: rgba(12, 27, 46, .7); color: var(--texto2); }
.passos li::before { content: counter(p); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: rgba(61, 244, 208, .12); border: 1.5px solid var(--agua); color: var(--agua); font: 800 13px Inter, sans-serif; display: grid; place-items: center; }
.destaque { background: linear-gradient(180deg, rgba(21, 48, 79, .55), rgba(12, 27, 46, .75)); border: 1px solid var(--linha); border-radius: 18px; padding: 18px 20px; color: var(--texto2); }
.destaque h3 { color: var(--tinta); }
.destaque b { color: var(--tinta); }
.destaque.verde { background: rgba(61, 244, 208, .07); border-color: rgba(61, 244, 208, .28); }
.destaque.amarelo { background: rgba(255, 173, 64, .08); border-color: rgba(255, 173, 64, .3); }

/* Abelha: as imagens têm fundo branco, então ficam num círculo branco com anel tracejado (como no app) */
.bola { position: relative; aspect-ratio: 1; width: 100%; max-width: 340px; margin: 0 auto; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 6px rgba(120, 187, 255, .12), 0 0 40px rgba(61, 244, 208, .18); }
.bola::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 3px dashed var(--ceu); opacity: .55; pointer-events: none; animation: bola-anel 40s linear infinite; }
.bola img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; display: block; animation: bola-flutua 2.6s ease-in-out infinite; }
@keyframes bola-anel { to { transform: rotate(360deg); } }
@keyframes bola-flutua { 50% { translate: 0 -2.2%; } }
@media (prefers-reduced-motion: reduce) { .bola::after, .bola img { animation: none; } }

/* celular com o app ao vivo */
.celular-wrap { position: sticky; top: 76px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.celular { width: 390px; max-width: 100%; height: 800px; border: 12px solid #02070c; border-radius: 52px; overflow: hidden; box-shadow: 0 0 0 1px rgba(120, 187, 255, .22), 0 30px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(61, 244, 208, .08); background: var(--bg); }
.celular iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1000px) { .celular-wrap { position: static; } }
@media (max-width: 460px) { .celular { height: 700px; border-width: 8px; border-radius: 36px; } }
.legenda { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; font: 800 12px Inter, sans-serif; letter-spacing: .1em; color: var(--laranja); }
.ao-vivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--laranja); box-shadow: 0 0 10px var(--laranja); animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: .25; } }
.tela-larga { width: 100%; height: 780px; border: 1px solid var(--linha); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); background: var(--bg); }
.tela-larga iframe { width: 100%; height: 100%; border: 0; display: block; }

/* tabelas, cartões, números */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; background: rgba(12, 27, 46, .7); color: var(--texto2); }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { font-weight: 800; background: rgba(21, 48, 79, .7); color: var(--tinta); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td b { white-space: nowrap; color: var(--tinta); }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card-item { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--tinta); background: linear-gradient(180deg, rgba(21, 48, 79, .55), rgba(12, 27, 46, .8)); transition: transform .15s, box-shadow .15s, border-color .15s; }
.card-item:hover { transform: translateY(-3px); border-color: rgba(61, 244, 208, .4); box-shadow: 0 14px 30px rgba(0, 0, 0, .35), 0 0 30px rgba(61, 244, 208, .08); }
.card-item .img { aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c, #78bbff) 22%, transparent), transparent 70%); }
.card-item .img .bola { width: auto; height: 82%; max-width: none; box-shadow: 0 0 0 4px rgba(120, 187, 255, .12), 0 0 24px rgba(61, 244, 208, .15); }
.card-item .txt { padding: 16px 18px 18px; }
.card-item small { font: 800 12px Inter, sans-serif; letter-spacing: .1em; color: var(--agua); }
.card-item h3 { font-size: 21px; margin: 4px 0 6px; }
.card-item p { margin: 0; color: var(--muted); font-size: 15px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.numeros div { border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; background: rgba(12, 27, 46, .7); }
.numeros b { display: block; font: 800 30px Inter, sans-serif; color: var(--laranja); letter-spacing: -.02em; }
.numeros span { color: var(--muted); font-size: 14px; }
.fonte { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* botões e controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: var(--agua); color: #032a22; font: 800 15px Inter, sans-serif; text-decoration: none; box-shadow: 0 3px 0 var(--agua2); border: 0; cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.verde { background: var(--laranja); color: #1a1205; box-shadow: 0 3px 0 var(--laranja2); }
.btn.ghost { background: transparent; color: var(--tinta); border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; }
.btn.ghost:hover { border-color: rgba(61, 244, 208, .5); }
.btn[disabled] { opacity: .45; cursor: default; }
.abas { display: inline-flex; flex-wrap: wrap; gap: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha); padding: 4px; border-radius: 14px; }
.abas button { border: 0; background: none; padding: 9px 16px; border-radius: 11px; font: 700 14px Inter, sans-serif; color: var(--muted); cursor: pointer; }
.abas button.on { background: rgba(61, 244, 208, .12); color: var(--agua); box-shadow: inset 0 0 0 1px rgba(61, 244, 208, .4); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid rgba(255, 255, 255, .14); background: transparent; border-radius: 99px; padding: 7px 12px; font: 700 13.5px Inter, sans-serif; color: var(--muted); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.chip:hover { color: var(--tinta); }
.chip.on { border-color: var(--agua); color: var(--tinta); background: rgba(61, 244, 208, .08); }
.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
.campo { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; color: var(--texto2); }
.campo select { font: inherit; font-weight: 600; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: var(--sup); color: var(--tinta); }
.rotulo { font: 800 12px Inter, sans-serif; letter-spacing: .1em; color: var(--muted); margin: 16px 0 8px; text-transform: uppercase; }
.barra { height: 10px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ceu), var(--agua)); }
.painel-vivo { border: 1px solid var(--linha); border-radius: 22px; padding: 20px; background: linear-gradient(180deg, rgba(21, 48, 79, .5), rgba(12, 27, 46, .8)); }

.prox { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--linha); padding: 26px 0 70px; margin-top: 20px; }
.prox a { font: 800 17px Inter, sans-serif; text-decoration: none; }
.rodape-nota { color: var(--muted); font-size: 13px; text-align: center; padding: 0 0 30px; }

/* A abelha aparece solta (recortada), sem círculo */
.bola, .card-item .img .bola, .poses .bola, .resultado-topo .bola { background: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; }
.bola::after { display: none !important; }
.bola img { inset: 0 !important; width: 100% !important; height: 100% !important; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)) drop-shadow(0 0 24px rgba(61, 244, 208, .16)); }