/* Apura — sistema visual */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  --suave: cubic-bezier(0.25, 0.1, 0.25, 1);
  --r-g: 28px; --r-m: 18px; --r-p: 12px;
  --nav-h: 56px;
}
html[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #000000; --bg-2: #0a0a0b;
  --card: #141415; --card-2: #1c1c1e; --card-3: #2c2c2e;
  --linha: rgba(255, 255, 255, 0.08); --linha-2: rgba(255, 255, 255, 0.14);
  --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73;
  --vidro: rgba(18, 18, 20, 0.72);
  --sombra: 0 30px 80px rgba(0, 0, 0, 0.55);
  --brilho-a: rgba(255, 69, 58, 0.22); --brilho-b: rgba(10, 132, 255, 0.24);
  --vivo: #ff453a; --ok: #30d158; --aviso: #ffd60a;
}
html[data-tema="claro"] {
  color-scheme: light;
  --bg: #f5f5f7; --bg-2: #ffffff;
  --card: #ffffff; --card-2: #f5f5f7; --card-3: #e8e8ed;
  --linha: rgba(0, 0, 0, 0.08); --linha-2: rgba(0, 0, 0, 0.14);
  --ink: #1d1d1f; --ink-2: #6e6e73; --ink-3: #86868b;
  --vidro: rgba(255, 255, 255, 0.72);
  --sombra: 0 24px 60px rgba(0, 0, 0, 0.12);
  --brilho-a: rgba(255, 59, 48, 0.12); --brilho-b: rgba(0, 122, 255, 0.13);
  --vivo: #ff3b30; --ok: #28a745; --aviso: #b25000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.47;
  letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  transition: background-color 0.4s var(--suave), color 0.4s var(--suave); }
button { font: inherit; color: inherit; letter-spacing: inherit; }
img { display: block; }
[hidden] { display: none !important; }
.num, .tab { font-variant-numeric: tabular-nums; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* ---------- navegação (vidro) ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--vidro);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.nav.rolou { border-bottom-color: var(--linha); }
.nav-in { width: min(1240px, 100% - 48px); margin-inline: auto; height: 100%; display: flex; align-items: center; gap: 22px; }
.marca { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.marca img { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.marca span { font-size: 21px; font-weight: 700; letter-spacing: -0.035em; }
.links { display: flex; gap: 22px; margin-left: auto; }
.links a { color: var(--ink-2); text-decoration: none; font-size: 13px; letter-spacing: -0.005em; transition: color 0.2s; }
.links a:hover, .links a.ativo { color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; background: var(--card-2); white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; }
.status.vivo { color: #fff; background: var(--vivo); }
.status.vivo i { background: #fff; animation: pulso 1.6s var(--suave) infinite; }
.status.final i { background: var(--ok); }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.tema { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card-2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s, transform 0.3s var(--mola); }
.tema:hover { background: var(--card-3); }
.tema:active { transform: scale(0.92); }
.tema svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; grid-area: 1 / 1; transition: opacity 0.3s, transform 0.5s var(--mola); }
.tema .lua { fill: var(--ink); stroke: none; }
html[data-tema="escuro"] .tema .lua, html[data-tema="claro"] .tema .sol { opacity: 0; transform: rotate(-60deg) scale(0.6); }

/* ---------- controle segmentado ---------- */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card-2); isolation: isolate; flex-shrink: 0; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color 0.25s; }
.seg button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.seg button:disabled { opacity: 0.35; cursor: default; }
.seg button .bolinha { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vivo); margin-left: 6px; vertical-align: 2px; animation: pisca 1.4s infinite; }
@keyframes pisca { 50% { opacity: 0.25; } }
.seg .polegar { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 999px; background: var(--card-3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 0.5px var(--linha); transition: left 0.45s var(--mola), width 0.45s var(--mola); }
html[data-tema="claro"] .seg .polegar { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.seg-turno button { padding: 6px 14px; font-size: 13px; }

/* ---------- ao vivo (primeira dobra) ---------- */
.ao-vivo { position: relative; padding: 26px 0 0; overflow-x: clip; }
.ao-vivo::before { content: ""; position: absolute; inset: -40px -10% auto; height: 620px; pointer-events: none; z-index: -1;
  background: radial-gradient(40% 55% at 15% 10%, var(--brilho-a), transparent 70%), radial-gradient(40% 55% at 85% 10%, var(--brilho-b), transparent 70%); }
.av-cab { margin-bottom: 18px; }
.eyebrow { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: -0.01em; }
h1 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 700; text-wrap: balance; }
.esqueleto { display: inline-block; height: 0.8em; border-radius: 10px; background: linear-gradient(90deg, var(--card-2), var(--card-3), var(--card-2)); background-size: 200% 100%; animation: brilhar 1.4s linear infinite; }
@keyframes brilhar { to { background-position: -200% 0; } }
.aviso { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--r-m); font-size: 14px; background: color-mix(in oklab, var(--vivo) 12%, var(--card)); border: 1px solid color-mix(in oklab, var(--vivo) 35%, transparent); }
.av { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 16px; align-items: start; }
.av-col { display: grid; gap: 16px; min-width: 0; }
.av-mapa { position: sticky; top: calc(var(--nav-h) + 12px); }

/* cartões */
.card { background: var(--card); border-radius: var(--r-g); border: 1px solid var(--linha); transition: background-color 0.4s var(--suave), border-color 0.4s; }

/* placar */
.placar { padding: 20px 22px 18px; container-type: inline-size; }
.pl-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); }
.chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.chip.vivo { background: var(--vivo); color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.chip.vivo i { background: #fff; animation: pulso 1.6s var(--suave) infinite; }
.chip.ok i { background: var(--ok); }
.pl-st { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-st b { color: var(--ink); }
.partilhar { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--ink); color: var(--bg); transition: transform 0.25s var(--mola), opacity 0.2s; }
.partilhar:hover { opacity: 0.88; }
.partilhar:active { transform: scale(0.95); }
.partilhar svg, .partilhar-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.partilhar-nav svg { stroke: var(--ink); }
.pl-rot { margin: 16px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.pl-rot span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-3); }
.pl-duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pl-lado { display: grid; gap: 4px; min-width: 0; }
.pl-lado.b { justify-items: end; text-align: right; }
.pl-quem { display: flex; align-items: center; gap: 10px; }
.pl-lado.b .pl-quem { flex-direction: row-reverse; }
.pl-quem img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 18%; background: var(--card-2); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); flex-shrink: 0; }
.pl-quem b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.pl-quem span { font-size: 12px; color: var(--ink-2); }
.pl-num { font-size: clamp(36px, 13cqi, 76px); font-weight: 700; letter-spacing: -0.055em; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; margin-top: 8px; }
.pl-votos { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-barra { position: relative; display: flex; height: 14px; border-radius: 7px; background: var(--card-3); margin-top: 14px; }
.pl-barra i { display: block; height: 100%; transition: width 1.1s var(--mola); }
.pl-barra i:first-child { border-radius: 7px 0 0 7px; }
.pl-barra i:last-of-type { border-radius: 0 7px 7px 0; margin-left: auto; }
.pl-barra .meio { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.pl-dif { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-dif b { color: var(--ink); }
.pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.pl-stats span { display: block; font-size: 12px; color: var(--ink-2); }
.pl-stats b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pl-outros { display: grid; gap: 2px; margin-top: 16px; }
.pl-outro { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; font-size: 14px; padding: 4px 0; }
.pl-outro img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 18%; box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--c); }
.pl-outro small { display: block; font-size: 11px; color: var(--ink-3); }
.pl-outro b { font-variant-numeric: tabular-nums; font-weight: 600; }
.pl-outros .botao-txt { justify-self: start; margin-left: -14px; font-size: 13px; }
.botao-txt { border: 0; background: none; color: var(--ink-2); font-size: 15px; font-weight: 500; cursor: pointer; padding: 8px 14px; border-radius: 999px; transition: background 0.2s, color 0.2s; }
.botao-txt:hover { background: var(--card-2); color: var(--ink); }

/* previsão */
.previsao { padding: 18px 22px 20px; position: relative; overflow: hidden; }
.previsao::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--vivo) 55%, transparent), transparent 40%, transparent 60%, color-mix(in oklab, #0a84ff 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.previsao:empty { display: none; }
.pv-cab { display: flex; justify-content: space-between; align-items: center; }
.pv-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pv-tag img { width: 18px; height: 18px; }
.pv-q { font-size: 13px; color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.pv-q:hover { color: var(--ink); }
.pv-pergunta, .pv-tit { margin: 12px 0 4px; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.pv-chances { display: flex; justify-content: space-between; align-items: flex-end; }
.pv-chances div { display: grid; }
.pv-chances .d { text-align: right; }
.pv-chances b { font-size: 40px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.05; color: var(--c); font-variant-numeric: tabular-nums; }
.pv-chances div > span { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.pv-barra { display: flex; gap: 3px; height: 8px; margin-top: 8px; }
.pv-barra i { display: block; height: 100%; border-radius: 4px; transition: width 1.1s var(--mola); }
.pv-exp { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pv-exp b { color: var(--ink); }
.pv-nota { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.pv-alerta { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: color-mix(in oklab, var(--aviso) 14%, transparent); }
.pv-fim { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--ink-2); }
.pv-fim b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-fim i { font-style: normal; }

/* placar previsto (antes da apuração) */
.placar.previsto { position: relative; overflow: hidden; }
.placar.previsto::after, .anuncie::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--vivo) 55%, transparent), transparent 40%, transparent 60%, color-mix(in oklab, #0a84ff 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.pl-rot-prev { display: flex; align-items: center; gap: 7px; color: var(--ink); }
.pl-rot-prev img { width: 18px; height: 18px; }
.placar.previsto .pl-votos { font-size: 12px; color: var(--ink-3); }
.pl-nota { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pl-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.pl-acoes .botao-txt { font-size: 13px; }
.botao-sec { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; padding: 8px 12px 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--card-2); color: var(--ink); transition: background 0.2s, transform 0.25s var(--mola); }
.botao-sec:hover { background: var(--card-3); }
.botao-sec:active { transform: scale(0.96); }
.botao-sec svg, .pv-mais svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-mais { display: inline-flex; align-items: center; gap: 3px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pv-mais:hover { opacity: 0.75; }
.pv-chances div > span { font-variant-numeric: tabular-nums; }

/* base da previsão: 2022 → 1º turno → previsto */
.bp { display: grid; gap: 12px; margin-top: 14px; }
.bp-lin { display: grid; gap: 5px; }
.bp-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.bp-cab small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.bp-nums { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.bp-lin:last-child .bp-nums { font-size: 19px; }
.bp-lin:last-child .split { height: 10px; }
.bp-seta { display: grid; place-items: center; height: 4px; color: var(--ink-3); }
.bp-seta svg { width: 18px; height: 18px; transform: rotate(90deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* gráfico */
.cartao-graf { padding: 18px 22px 18px; }
.b-tit i { font-style: normal; }
.selo-sec { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; background: var(--card-2); }
.selo-sec img { width: 16px; height: 16px; }
.cg-tit { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.cg-sub { margin: 4px 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }

/* ---------- seções ---------- */
.sec { padding: 96px 0 0; }
.titulo { margin: 0 0 28px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.04em; font-weight: 700; max-width: 22ch; text-wrap: balance; }
.titulo span { color: var(--ink-3); }
.sec-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-cab .titulo { margin: 0; }
.lead { font-size: 21px; color: var(--ink-2); max-width: 52ch; margin: -6px 0 34px; line-height: 1.45; letter-spacing: -0.02em; }

/* ---------- mapa ---------- */
.mapa-ctl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 6px; }
.mapa-ctl .seg button { padding: 6px 12px; font-size: 13px; }
.seg-rolar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-rolar::-webkit-scrollbar { display: none; }
.mapa-palco { position: relative; padding: 14px 14px 12px; overflow: hidden; }
.mapa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 4px; }
.mapa-chips { position: relative; }
.chips-grupo { position: absolute; left: 0; right: 0; display: grid; gap: 4px; }
.chip-uf { display: flex; justify-content: space-between; align-items: center; gap: 4px; border: 0; cursor: pointer; padding: 4px 7px; border-radius: 7px; color: #fff; font-size: 11px; transition: transform 0.2s var(--mola), background-color 0.7s var(--suave); }
.chip-uf:hover { transform: scale(1.06); }
.chip-uf b { font-weight: 700; }
.chip-uf span { opacity: 0.9; font-variant-numeric: tabular-nums; }
.g-rot text { fill: #fff; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, 0.28); stroke-width: 3px; transition: opacity 0.4s; }
.g-rot .r1 { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.g-rot .r2 { font-size: 14px; font-weight: 500; opacity: 0.92; }
.nivel-mun .g-rot, .focado .g-rot { opacity: 0; }
.focado-uf .mapa-chips { opacity: 0; pointer-events: none; }
.mapa-chips { transition: opacity 0.4s; }
.mapa-topo { position: absolute; left: 18px; right: 18px; top: 62px; display: flex; justify-content: space-between; align-items: center; gap: 10px; z-index: 3; pointer-events: none; }
.mapa-topo > * { pointer-events: auto; }
.voltar { display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer; padding: 7px 14px 7px 9px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--linha), 0 6px 20px rgba(0, 0, 0, 0.2); animation: entrar 0.5s var(--mola); }
.voltar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes entrar { from { opacity: 0; transform: translateX(-10px); } }
.mapa-nota { font-size: 12px; color: var(--ink-2); background: var(--vidro); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 5px 11px; border-radius: 999px; box-shadow: 0 0 0 1px var(--linha); margin-left: auto; text-align: right; }
.mapa-nota:empty { display: none; }
.mapa-svg { position: relative; aspect-ratio: 1 / 0.97; max-height: calc(100vh - var(--nav-h) - 190px); margin-inline: auto; width: 100%; }
.mapa-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.mapa-svg path { vector-effect: non-scaling-stroke; }
.g-mun path { stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.3; transition: fill 0.7s var(--suave), opacity 0.6s var(--suave); cursor: pointer; }
html[data-tema="escuro"] .g-mun path { stroke: rgba(0, 0, 0, 0.5); }
.g-uf path { fill-opacity: 1; stroke: #fff; stroke-width: 1.1; cursor: pointer;
  transition: fill 0.7s var(--suave), fill-opacity 0.7s var(--suave), opacity 0.6s var(--suave), stroke-width 0.3s; }
html[data-tema="escuro"] .g-uf path { stroke: #000; }
.nivel-mun .g-uf path, .g-uf path.aberto { fill-opacity: 0; stroke-width: 1; }
html[data-tema="escuro"] .nivel-mun .g-uf path, html[data-tema="escuro"] .g-uf path.aberto { stroke: rgba(0, 0, 0, 0.9); }
.nivel-uf .g-mun path { pointer-events: none; }
.nivel-mun .g-uf path, .g-uf path.aberto { pointer-events: none; }
.focado .g-mun path { pointer-events: auto; }
.focado .g-mun path.fora { opacity: 0.1; pointer-events: none; }
.focado .g-uf path.fora { opacity: 0.16; }
.realce { fill: none; stroke: var(--ink); stroke-width: 2.2; pointer-events: none; transition: opacity 0.15s; }
.realce.sel { stroke-width: 2.8; }
.mapa-carregando { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--ink-2); font-size: 15px; }
.girando { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--card-3); border-top-color: var(--ink); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.desenhar .g-uf path { animation: aparecer 0.9s var(--mola) both; animation-delay: var(--d, 0ms); }
.desenhar .g-mun { animation: aparecerMun 1.2s var(--suave) 0.6s both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } }
@keyframes aparecerMun { from { opacity: 0; } }
.mapa-rodape { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 4px 4px 0; }
.mapa-leg { display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); min-width: 240px; }
.mapa-leg .grad { height: 10px; border-radius: 5px; width: min(320px, 100%); }
.mapa-leg .pontas { display: flex; justify-content: space-between; width: min(320px, 100%); font-variant-numeric: tabular-nums; }
.mapa-leg .cats { display: flex; gap: 14px; flex-wrap: wrap; }
.mapa-leg .cats span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.exterior { border: 1px solid var(--linha); background: var(--card-2); border-radius: 14px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); text-align: left; transition: background 0.2s; }
.exterior:hover { background: var(--card-3); }
.exterior .sw { width: 22px; height: 22px; border-radius: 7px; }
.exterior b { color: var(--ink); display: block; font-size: 13px; }
.exterior:empty { display: none; }

.mapa-painel { padding: 22px; }
.painel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.painel-cab .rotulo { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.painel-cab h3 { margin: 2px 0 0; font-size: 30px; letter-spacing: -0.04em; line-height: 1.08; font-weight: 700; }
.painel-cab .anel { width: 50px; height: 50px; flex-shrink: 0; }
.painel-linhas { display: grid; gap: 14px; margin-top: 22px; }
.p-cand { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.p-cand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 18%; background: var(--card-2); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--c); }
.p-cand .n { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.p-cand .mini { height: 5px; border-radius: 3px; background: var(--card-3); margin-top: 6px; overflow: hidden; }
.p-cand .mini i { display: block; height: 100%; background: var(--c); border-radius: 3px; transition: width 0.8s var(--mola); }
.p-cand .v { text-align: right; }
.p-cand .v b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.p-cand .v span { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dados { margin-top: 22px; border-top: 1px solid var(--linha); }
.dado { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linha); font-size: 14px; color: var(--ink-2); }
.dado b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.dado:last-child { border-bottom: 0; }
.subtit { margin: 24px 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.cidades { display: grid; gap: 2px; }
.cidade { display: grid; grid-template-columns: 1fr 92px 56px; gap: 12px; align-items: center; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.cidade:hover { background: var(--card-2); }
.cidade .cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cidade .cv { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 13px; }
.cidade.dec { grid-template-columns: 1fr 110px 104px; }
.dica { margin: 18px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* barra dividida mini (A × B) */
.split { position: relative; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--card-3); gap: 2px; }
.split i { display: block; height: 100%; transition: width 0.9s var(--mola); }
.split i:last-child { margin-left: auto; }
.split::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; background: var(--card); }

/* ---------- tooltip ---------- */
.tip { position: fixed; z-index: 80; pointer-events: none; min-width: 210px; max-width: 280px; padding: 12px 14px; border-radius: 16px; font-size: 13px;
  background: var(--vidro); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: 0 0 0 1px var(--linha-2), var(--sombra); opacity: 0; transform: translateY(4px) scale(0.98); transition: opacity 0.15s, transform 0.2s var(--mola); }
.tip.on { opacity: 1; transform: none; }
.tip .t { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.tip .s { color: var(--ink-2); font-size: 12px; margin: 1px 0 8px; }
.tip .l { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink-2); }
.tip .l b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- aviso flutuante ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--ink); color: var(--bg); box-shadow: var(--sombra); transition: opacity 0.25s, transform 0.4s var(--mola); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- estados ---------- */
.ufs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.uf-lin { display: grid; grid-template-columns: 46px minmax(0, 1fr) 104px; gap: 14px; align-items: center; padding: 13px 10px; margin: 0 -10px; border: 0; border-bottom: 1px solid var(--linha); background: none; text-align: left; cursor: pointer; border-radius: 0; transition: background 0.2s; }
.uf-lin:hover { background: var(--card); border-radius: 14px; }
.uf-lin .sig { width: 46px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.uf-lin .band { position: relative; width: 46px; height: 32px; }
.uf-lin .band img { width: 46px; height: 32px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px var(--linha-2); }
.uf-lin .band em { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; padding: 1px 5px; border-radius: 6px; box-shadow: 0 0 0 2px var(--bg); letter-spacing: 0.02em; }
.uf-lin .ap small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.mini-band { display: inline-block; width: 20px; height: 14px; border-radius: 3px; object-fit: cover; margin-right: 8px; vertical-align: -2px; box-shadow: 0 0 0 1px var(--linha-2); }
.uf-lin .nm { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; letter-spacing: -0.01em; }
.uf-lin .nm span { font-weight: 500; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uf-lin .ap { text-align: right; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1.3; }
.uf-lin .ap b { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.uf-lin .nums { display: flex; justify-content: space-between; font-size: 12px; margin-top: 5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------- análises (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento > .card { padding: 30px; min-width: 0; }
.b-6 { grid-column: span 6; } .b-4 { grid-column: span 4; } .b-3 { grid-column: span 3; } .b-2 { grid-column: span 2; }
.b-tit { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.b-sub { margin: 6px 0 22px; font-size: 15px; color: var(--ink-2); line-height: 1.5; max-width: 62ch; }
.vazio { display: grid; place-items: center; text-align: center; min-height: 220px; color: var(--ink-2); font-size: 15px; border: 1px dashed var(--linha-2); border-radius: var(--r-m); padding: 24px; line-height: 1.6; }
.graf { position: relative; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf text { font-family: var(--font); }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-2); margin-top: 14px; }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.halt { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--ink-2); }
.halt.trac { border-top-style: dashed; }

.halteres { display: grid; gap: 16px; }
.halter { display: grid; grid-template-columns: 130px 1fr 92px; gap: 14px; align-items: center; font-size: 14px; }
.halter .q { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.halter .eixo { position: relative; height: 22px; }
.halter .eixo::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--card-3); border-radius: 1px; }
.halter .liga { position: absolute; top: 9px; height: 4px; border-radius: 2px; background: var(--c); opacity: 0.45; }
.halter .pp { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2.5px solid var(--c); background: var(--card); }
.halter .pu { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--card); }
.halter .d { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.halter .d small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }

.comp22 { display: grid; gap: 22px; }
.comp22 .lin { display: grid; gap: 8px; }
.comp22 .cab { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.comp22 .cab b { color: var(--ink); }
.comp22 .barras { display: grid; gap: 6px; }
.comp22 .bar { display: grid; grid-template-columns: 44px 1fr 56px; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.comp22 .bar .tr { height: 10px; border-radius: 5px; background: var(--card-3); overflow: hidden; }
.comp22 .bar .tr i { display: block; height: 100%; border-radius: 5px; background: var(--c); transition: width 1s var(--mola); }
.comp22 .bar .tr i.velho { opacity: 0.38; }
.comp22 .bar b { color: var(--ink); text-align: right; font-weight: 600; }
.viradas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.virada { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in oklab, var(--c) 16%, transparent); color: var(--c); border: 0; cursor: pointer; }
.virada:hover { background: color-mix(in oklab, var(--c) 26%, transparent); }

.sankey svg { display: block; width: 100%; height: auto; overflow: visible; }
.sankey text { font-family: var(--font); }
.sankey .fita { transition: opacity 0.25s; }
.sankey.hover .fita { opacity: 0.12; }
.sankey.hover .fita.on { opacity: 0.75; }

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--linha-2); white-space: nowrap; }
.tabela td { padding: 11px 8px; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.tabela .r { text-align: right; }
.tabela tr.media td { font-weight: 700; border-bottom: 0; }
.rolar-x { overflow-x: auto; margin: 0 -8px; }

/* ---------- método ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passo { padding: 30px; display: flex; flex-direction: column; }
.passo .n { font-size: 15px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.passo h3 { margin: 18px 0 8px; font-size: 22px; letter-spacing: -0.03em; line-height: 1.2; }
.passo p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.passo code { display: block; margin-top: auto; padding-top: 18px; font: 500 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink-2); letter-spacing: 0; }
.passo code::before { content: ""; display: block; height: 1px; background: var(--linha); margin-bottom: 14px; }

/* ---------- sobre e anuncie ---------- */
.sobre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sobre-item { padding: 30px; }
.sobre-item h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.03em; }
.sobre-item p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.sobre-item b { color: var(--ink); }
.anuncie { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding: 40px; }
.anuncie h2 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.04em; line-height: 1.08; }
.anuncie p:not(.selo-sec) { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 56ch; line-height: 1.5; }
.botao-pri { display: inline-flex; align-items: center; padding: 14px 26px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none;
  background: var(--ink); color: var(--bg); transition: opacity 0.2s, transform 0.25s var(--mola); flex-shrink: 0; }
.botao-pri:hover { opacity: 0.88; }
.botao-pri:active { transform: scale(0.96); }
.anuncie-nav { flex-shrink: 0; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linha-2); transition: background 0.2s; }
.anuncie-nav:hover { background: var(--card-2); }

/* ---------- rodapé ---------- */
.rodape { padding: 100px 0 60px; }
.rodape .wrap { border-top: 1px solid var(--linha); padding-top: 26px; display: grid; gap: 12px; }
.rodape-marca { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rodape-marca span { color: var(--ink-3); }
.rodape p { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.6; max-width: 90ch; }

/* ---------- entrada ao rolar ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--suave), transform 1s var(--mola); }
.revelar.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .links { display: none; }
  .status { margin-left: auto; }
  .av { grid-template-columns: 1fr; }
  .av-mapa { position: static; }
  .mapa-svg { max-height: none; }
  .bento .b-2, .bento .b-3, .bento .b-4 { grid-column: span 6; }
  .passos { grid-template-columns: 1fr 1fr; }
  .sobre { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ufs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --r-g: 22px; --nav-h: 52px; }
  body { font-size: 16px; }
  .wrap, .nav-in { width: calc(100% - 24px); }
  .nav-in { gap: 8px; }
  .marca span { font-size: 19px; }
  .status { display: none; }
  .seg-turno { margin-left: auto; }
  .seg-turno button { padding: 6px 10px; }
  .ao-vivo { padding-top: 16px; }
  .av-cab { margin-bottom: 12px; padding: 0 4px; }
  .eyebrow { font-size: 13px; }
  h1 { font-size: 27px; }
  .placar, .previsao, .cartao-graf { padding: 16px; }
  .pl-quem img { width: 38px; height: 38px; }
  .pl-quem b { font-size: 15px; }
  .pl-stats b { font-size: 15px; }
  .pl-st { font-size: 12px; }
  .partilhar { padding: 6px 12px 6px 9px; }
  .pv-chances b { font-size: 34px; }
  .mapa-palco { padding: 10px 8px 12px; }
  .mapa-topo { position: static; margin: 2px 2px 6px; flex-wrap: wrap; }
  .mapa-nota { margin-left: 0; text-align: left; }
  .mapa-corpo { grid-template-columns: minmax(0, 1fr) 46px; }
  .chip-uf { padding: 3px 5px; font-size: 10px; justify-content: center; }
  .chip-uf span { display: none; }
  .g-rot .r2 { display: none; }
  .g-rot .r1 { font-size: 26px; }
  .mapa-painel { padding: 18px; }
  .sec { padding-top: 72px; }
  .bento > .card { padding: 22px 18px; }
  .halter { grid-template-columns: 84px 1fr 70px; gap: 10px; }
  .cidade.dec { grid-template-columns: 1fr 64px 92px; }
  .passos { grid-template-columns: 1fr; }
  .lead { font-size: 18px; }
  .seg button { padding: 7px 12px; }
  .partilhar-nav { display: none; }
  .anuncie { padding: 26px 20px; }
  .sobre-item { padding: 22px 18px; }
  .anuncie-nav { padding: 5px 9px; font-size: 11px; }
  .bp-cab small { display: none; }
}
@media (max-width: 380px) {
  .marca span { display: none; }
}