@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #05070d;
  --bg-2: #0a0f1c;
  --vidro: rgba(18, 26, 46, .62);
  --vidro-forte: rgba(22, 32, 58, .85);
  --borda: rgba(120, 190, 255, .14);
  --borda-forte: rgba(120, 190, 255, .32);
  --txt: #e8ecf4;
  --txt-2: #b4bccd;
  --mudo: #7d869b;
  --neon: #22e6ff;       /* destaque de interface */
  --neon-2: #a66bff;     /* destaque secundário */
  --lula: #ff4d6d;       /* identidade do candidato Lula */
  --flavio: #3d8bff;     /* identidade do candidato Flávio Bolsonaro */
  --neutro: #2a3042;
  --ok: #2ee59d;
  --alerta: #ffb020;
  --raio: 16px;
  --fonte: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(1200px 700px at 80% -10%, #12204a 0%, transparent 60%), radial-gradient(900px 600px at -10% 30%, #2a0f4a55 0%, transparent 60%), var(--bg); color: var(--txt); font: 16px/1.6 var(--fonte); min-height: 100vh; overflow-x: hidden; }
a { color: var(--neon); text-decoration: none; }
a:hover { text-shadow: 0 0 12px var(--neon); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px; position: relative; z-index: 1; }
::selection { background: var(--neon); color: #001; }

/* ---------- fundo vivo ---------- */
#fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.orbes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orbes span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .28; animation: flutua 22s ease-in-out infinite; }
.orbes span:nth-child(1) { width: 420px; height: 420px; background: var(--neon); top: 10%; left: -120px; }
.orbes span:nth-child(2) { width: 360px; height: 360px; background: var(--neon-2); top: 55%; right: -100px; animation-delay: -7s; }
.orbes span:nth-child(3) { width: 260px; height: 260px; background: #ff2bd6; top: 85%; left: 35%; animation-delay: -14s; opacity: .14; }
@keyframes flutua { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,-40px) scale(1.08); } 66% { transform: translate(-40px,50px) scale(.95); } }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px) saturate(140%); background: rgba(5,7,13,.72); border-bottom: 1px solid var(--borda); }
.topo-in { display: flex; align-items: center; gap: 18px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--txt); font-weight: 600; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; }
.marca b { color: var(--neon); font-weight: 600; margin: 0 1px; text-shadow: 0 0 14px var(--neon); }
.marca small { font-family: var(--mono); font-size: 11px; color: var(--mudo); margin-left: 4px; }
.marca-ic { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; }
.marca-ic i { width: 5px; background: var(--neon); border-radius: 2px; box-shadow: 0 0 10px var(--neon); animation: barras 1.8s ease-in-out infinite; }
.marca-ic i:nth-child(1) { height: 40%; } .marca-ic i:nth-child(2) { height: 100%; animation-delay: .2s; background: var(--neon-2); box-shadow: 0 0 10px var(--neon-2); } .marca-ic i:nth-child(3) { height: 65%; animation-delay: .4s; }
@keyframes barras { 50% { transform: scaleY(.55); } }
.nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--txt-2); font-size: 13.5px; padding: 8px 8px; border-radius: 10px; white-space: nowrap; transition: .2s; }
.nav a:hover { color: var(--txt); background: rgba(34,230,255,.08); text-shadow: none; }
.nav a.ativo { color: var(--neon); background: rgba(34,230,255,.1); box-shadow: inset 0 0 0 1px rgba(34,230,255,.35), 0 0 18px rgba(34,230,255,.15); }
.busca-box { position: relative; }
.busca-box input { width: 180px; background: rgba(255,255,255,.04); border: 1px solid var(--borda); border-radius: 12px; color: var(--txt); font: inherit; font-size: 14px; padding: 8px 12px 8px 34px; outline: none; transition: .25s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2322e6ff' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; }
.busca-box input:focus { width: 270px; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(34,230,255,.15), 0 0 24px rgba(34,230,255,.2); }
.busca-res { position: absolute; right: 0; top: 46px; width: 320px; max-height: 360px; overflow: auto; background: var(--vidro-forte); backdrop-filter: blur(16px); border: 1px solid var(--borda-forte); border-radius: 14px; display: none; padding: 6px; }
.busca-res a { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 9px; color: var(--txt); font-size: 14px; }
.busca-res a:hover, .busca-res a.foco { background: rgba(34,230,255,.12); text-shadow: none; }
.busca-res a span { color: var(--mudo); font-family: var(--mono); font-size: 12px; }
.menu-bt { display: none; }
@media (max-width: 1440px) {
  .menu-bt { display: flex; flex-direction: column; gap: 4px; background: none; border: 1px solid var(--borda); border-radius: 10px; padding: 9px; margin-left: auto; cursor: pointer; }
  .menu-bt span { width: 18px; height: 2px; background: var(--neon); box-shadow: 0 0 6px var(--neon); }
  .nav { position: fixed; top: 66px; left: 0; right: 0; flex-direction: column; background: var(--vidro-forte); backdrop-filter: blur(16px); padding: 12px; border-bottom: 1px solid var(--borda); transform: translateY(-120%); transition: transform .3s; }
  .nav.aberto { transform: none; }
  .busca-box input, .busca-box input:focus { width: 150px; }
}

/* ---------- blocos ---------- */
main { padding: 34px 22px 60px; min-height: 70vh; outline: none; }
.migalha { font-family: var(--mono); font-size: 12px; color: var(--mudo); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.migalha a { color: var(--txt-2); } .migalha span.sep { color: var(--neon); }
.titulo { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 12px; font-weight: 650; }
.titulo .brilho { background: linear-gradient(90deg, var(--neon), var(--neon-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(34,230,255,.35)); }
.lead { font-size: 18px; color: var(--txt-2); max-width: 760px; margin: 0 0 26px; }
h2 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 6px; font-weight: 600; }
h3 { font-size: 17px; margin: 22px 0 6px; font-weight: 600; }
.cartao { background: var(--vidro); backdrop-filter: blur(12px); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 24px; margin-bottom: 20px; position: relative; overflow: hidden; }
.cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34,230,255,.6), transparent); }
.cartao .nota, .nota { color: var(--txt-2); font-size: 14px; margin: 0 0 14px; max-width: 80ch; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grade2, .grade3 { grid-template-columns: 1fr; } }

/* ---------- números destaque ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { background: var(--vidro); backdrop-filter: blur(12px); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; position: relative; overflow: hidden; transition: transform .3s, border-color .3s; }
.kpi:hover { transform: translateY(-3px); border-color: var(--borda-forte); }
.kpi .rot { font-size: 13px; color: var(--txt-2); display: flex; align-items: center; gap: 8px; }
.kpi .val { font: 600 32px/1.15 var(--mono); letter-spacing: -.03em; margin: 6px 0 2px; }
.kpi .det { font-size: 13px; color: var(--mudo); font-family: var(--mono); }
.kpi.lula { border-color: rgba(255,77,109,.35); } .kpi.lula .val { color: #ff8095; text-shadow: 0 0 22px rgba(255,77,109,.45); }
.kpi.flavio { border-color: rgba(61,139,255,.35); } .kpi.flavio .val { color: #7ab0ff; text-shadow: 0 0 22px rgba(61,139,255,.45); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw.lula { background: var(--lula); box-shadow: 0 0 8px var(--lula); } .sw.flavio { background: var(--flavio); box-shadow: 0 0 8px var(--flavio); }

/* ---------- botões neon ---------- */
.bt { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--fonte); color: var(--neon); background: rgba(34,230,255,.06); border: 1px solid rgba(34,230,255,.55); border-radius: 12px; padding: 10px 16px; cursor: pointer; transition: .25s; position: relative; text-shadow: 0 0 8px rgba(34,230,255,.5); box-shadow: 0 0 0 0 rgba(34,230,255,0), inset 0 0 12px rgba(34,230,255,.08); }
.bt:hover { background: rgba(34,230,255,.14); box-shadow: 0 0 22px rgba(34,230,255,.45), inset 0 0 16px rgba(34,230,255,.18); transform: translateY(-1px); text-shadow: 0 0 10px var(--neon); }
.bt.roxo { color: #c7a4ff; border-color: rgba(166,107,255,.6); background: rgba(166,107,255,.07); text-shadow: 0 0 8px rgba(166,107,255,.5); }
.bt.roxo:hover { box-shadow: 0 0 22px rgba(166,107,255,.5), inset 0 0 16px rgba(166,107,255,.2); }
.bt.peq { padding: 6px 11px; font-size: 13px; border-radius: 10px; }
.bts { display: flex; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 13px var(--mono); color: var(--txt-2); border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px; cursor: pointer; background: rgba(255,255,255,.02); transition: .2s; }
.chip:hover { color: var(--neon); border-color: rgba(34,230,255,.5); box-shadow: 0 0 14px rgba(34,230,255,.25); text-shadow: none; }
.chip.ativo { color: #001; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px rgba(34,230,255,.6); }

/* ---------- herói da home ---------- */
.heroi { display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; margin-bottom: 30px; }
@media (max-width: 960px) { .heroi { grid-template-columns: 1fr; } }
.selo { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--neon); border: 1px solid rgba(34,230,255,.4); border-radius: 999px; padding: 5px 12px; margin-bottom: 16px; background: rgba(34,230,255,.06); }
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulsa 1.6s infinite; }
@keyframes pulsa { 50% { opacity: .35; } }
.mapa-heroi { position: relative; }
.mapa-heroi svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 30px rgba(34,230,255,.12)); }
.uf-path { stroke: rgba(34,230,255,.55); stroke-width: .8; cursor: pointer; transition: fill .25s, stroke .25s, filter .25s; }
.uf-path:hover, .uf-path:focus { stroke: var(--neon); stroke-width: 2; filter: drop-shadow(0 0 8px var(--neon)); outline: none; }
.uf-rot { font: 600 11px var(--mono); fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; }
.placar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 22px 0; }
.placar .lado { padding: 16px; border-radius: 14px; background: var(--vidro); border: 1px solid var(--borda); }
.placar .lado.l { border-color: rgba(255,77,109,.45); box-shadow: 0 0 30px rgba(255,77,109,.12); }
.placar .lado.f { border-color: rgba(61,139,255,.45); box-shadow: 0 0 30px rgba(61,139,255,.12); text-align: right; }
.placar .nome { font-size: 14px; color: var(--txt-2); }
.placar .pct { font: 600 38px/1.1 var(--mono); }
.placar .l .pct { color: #ff8095; text-shadow: 0 0 20px rgba(255,77,109,.5); }
.placar .f .pct { color: #7ab0ff; text-shadow: 0 0 20px rgba(61,139,255,.5); }
.placar .sub { font: 12px var(--mono); color: var(--mudo); }
.placar .vs { font: 600 13px var(--mono); color: var(--mudo); }
.cabo { height: 12px; border-radius: 999px; overflow: hidden; display: flex; gap: 3px; margin: 8px 0 4px; }
.cabo div { height: 100%; transition: flex 1.2s cubic-bezier(.2,.8,.2,1); }
.cabo .l { background: linear-gradient(90deg, #ff2d55, var(--lula)); box-shadow: 0 0 16px var(--lula); border-radius: 999px 0 0 999px; }
.cabo .f { background: linear-gradient(90deg, var(--flavio), #1d6bff); box-shadow: 0 0 16px var(--flavio); border-radius: 0 999px 999px 0; }
.legenda-cabo { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--mudo); }

/* cartões de navegação */
.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 10px 0 26px; }
@media (max-width: 960px) { .atalhos { grid-template-columns: 1fr 1fr; } }
.atalho { display: block; padding: 18px; border-radius: var(--raio); background: var(--vidro); border: 1px solid var(--borda); color: var(--txt); transition: .3s; position: relative; overflow: hidden; }
.atalho::after { content: "→"; position: absolute; right: 16px; top: 16px; color: var(--neon); transition: .3s; }
.atalho:hover { border-color: rgba(34,230,255,.6); transform: translateY(-4px); box-shadow: 0 10px 40px rgba(34,230,255,.15); text-shadow: none; }
.atalho:hover::after { transform: translateX(4px); text-shadow: 0 0 10px var(--neon); }
.atalho b { display: block; font-size: 16px; margin-bottom: 4px; }
.atalho span { font-size: 13px; color: var(--txt-2); }
.atalho .ic { font: 600 12px var(--mono); color: var(--neon); margin-bottom: 10px; display: block; }

/* ---------- tabelas ---------- */
.tabela { overflow: auto; max-height: 640px; border-radius: 12px; border: 1px solid var(--borda); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 11px; border-bottom: 1px solid rgba(120,190,255,.08); text-align: right; white-space: nowrap; }
th { font-weight: 500; color: var(--txt-2); position: sticky; top: 0; background: #0d1426; z-index: 1; cursor: pointer; user-select: none; font-size: 12.5px; }
th:hover { color: var(--neon); }
th.esq, td.esq { text-align: left; }
td { font-family: var(--mono); font-size: 13px; }
td.esq { font-family: var(--fonte); font-size: 14px; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: rgba(34,230,255,.06); }
td.pos { color: #ff8095; } td.neg { color: #7ab0ff; }
tr.clica { cursor: pointer; }

/* comparativo */
.comp td.barra-c { width: 30%; }
.mbar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; min-width: 120px; }
.mbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.comp tr.grupo td { color: var(--neon); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .08em; background: rgba(34,230,255,.04); padding-top: 14px; }
.breve { font: 11px var(--mono); color: var(--alerta); border: 1px solid rgba(255,176,32,.4); border-radius: 6px; padding: 1px 6px; }

/* dica didática */
.dica { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(166,107,255,.08); border: 1px solid rgba(166,107,255,.3); margin: 14px 0; font-size: 14.5px; color: var(--txt-2); }
.dica::before { content: "i"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--mono); color: #001; background: var(--neon-2); box-shadow: 0 0 12px var(--neon-2); }
.dica b { color: var(--txt); }

/* boletim lado a lado */
.boletins { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .boletins { grid-template-columns: 1fr; } }
.bu { font-family: var(--mono); background: linear-gradient(180deg, rgba(34,230,255,.05), rgba(0,0,0,0)); border: 1px dashed rgba(34,230,255,.35); border-radius: 14px; padding: 18px; }
.bu h3 { font-family: var(--fonte); margin-top: 0; color: var(--neon); }
.bu .ln { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted rgba(120,190,255,.15); font-size: 13.5px; }
.bu .ln span { color: var(--txt-2); }
.bu .ln.forte { font-weight: 700; }

/* filtros */
.filtros { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.filtros label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--txt-2); }
select, .campo { font: inherit; font-size: 14px; color: var(--txt); background: #0d1426; border: 1px solid var(--borda); border-radius: 10px; padding: 8px 12px; outline: none; }
select:focus, .campo:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(34,230,255,.15); }

/* gráficos */
svg text { fill: var(--txt-2); font: 11px var(--mono); }
.grade line { stroke: rgba(120,190,255,.09); } .grade path { display: none; }
.eixo path, .eixo line { stroke: rgba(120,190,255,.25); }
.mun-path { stroke: rgba(5,7,13,.6); stroke-width: .2; cursor: pointer; transition: opacity .2s; }
.mun-path:hover { stroke: var(--neon); stroke-width: 1.4; }
.borda-uf { fill: none; stroke: rgba(34,230,255,.5); stroke-width: .8; pointer-events: none; }
.legenda { display: flex; align-items: center; gap: 10px; font: 12px var(--mono); color: var(--txt-2); margin-bottom: 10px; flex-wrap: wrap; }
.legenda .rampa { width: 240px; height: 10px; border-radius: 4px; }

.tip { position: fixed; pointer-events: none; z-index: 60; background: rgba(10,15,28,.95); border: 1px solid var(--borda-forte); border-radius: 12px; padding: 10px 12px; font-size: 13px; box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 20px rgba(34,230,255,.12); display: none; max-width: 320px; backdrop-filter: blur(10px); }
.tip b { color: var(--txt); } .tip .lt { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--txt-2); }
.tip .lt b { color: var(--txt); font-weight: 600; }

/* animação de entrada */
.surge { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.surge.visivel { opacity: 1; transform: none; }
.carregando { display: flex; align-items: center; gap: 12px; color: var(--txt-2); font: 14px var(--mono); padding: 40px 0; }
.carregando::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(34,230,255,.2); border-top-color: var(--neon); animation: gira .8s linear infinite; box-shadow: 0 0 12px rgba(34,230,255,.4); }
@keyframes gira { to { transform: rotate(360deg); } }

.rodape { border-top: 1px solid var(--borda); padding: 26px 0 40px; font-size: 13.5px; color: var(--txt-2); position: relative; z-index: 1; background: rgba(5,7,13,.6); }
.rodape .mudo { color: var(--mudo); }
.mudo { color: var(--mudo); }
code { font-family: var(--mono); font-size: 13px; color: var(--neon); }
.texto p, .texto li { max-width: 78ch; color: var(--txt-2); }
.texto b { color: var(--txt); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .surge { opacity: 1; transform: none; }
}

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  main { padding: 22px 14px 50px; }
  .topo-in { gap: 10px; }
  .marca { font-size: 16px; } .marca small { display: none; }
  .menu-bt { order: 3; margin-left: 0; }
  .busca-box { margin-left: auto; }
  .busca-box input, .busca-box input:focus { width: 120px; padding-left: 30px; }
  .busca-res { position: fixed; left: 10px; right: 10px; top: 62px; width: auto; }
  .placar { grid-template-columns: 1fr 1fr; }
  .placar .vs { display: none; }
  .placar .pct { font-size: 26px; }
  .placar .lado { padding: 12px; min-width: 0; }
  .placar .sub { font-size: 11px; }
  .kpi .val { font-size: 24px; }
  .lead { font-size: 16px; }
  .atalhos { grid-template-columns: 1fr; }
  .cartao { padding: 18px 14px; }
}