:root {
  --vermelho-escuro: #7a0006;
  --lula: #e30613;
  --flavio: #1d4f91;
  --cartao: #ffffff;
  --texto: #1c1c1c;
  --suave: #6b6b6b;
  --fundo: radial-gradient(circle at 50% 0%, #d40812 0%, #9c0008 55%, #5c0004 100%);
}

* { box-sizing: border-box; margin: 0; }

html { font-size: clamp(14px, 0.55vw + 11px, 30px); }

body {
  min-height: 100vh;
  background: #8a0007 var(--fundo) fixed;
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* Camada das estrelas, na frente do conteúdo e sem capturar cliques. */
#ceu { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10; }

/* .voo anda e aponta na direção do movimento; .estrela gira dentro dele; .rastro fica para trás. */
.voo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tam);
  height: var(--tam);
  margin: calc(var(--tam) / -2);
}

.rastro {
  position: absolute;
  top: 50%;
  right: 50%;
  width: calc(var(--tam) * 4.5);
  height: calc(var(--tam) * 0.42);
  transform: translateY(-50%);
  border-radius: 99px;
  background: linear-gradient(to left, rgb(255 255 255 / 0.85), rgb(255 70 70 / 0.45) 35%, transparent);
}

.estrela {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("estrela.svg") center / contain no-repeat;
  animation: girar var(--giro) linear infinite var(--sentido);
}

/* Brilho por gradiente (sem filter), para a animação ficar só em transform. */
.voo::before {
  content: "";
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.75), rgb(255 40 40 / 0.45) 55%, transparent);
}

.voo.destaque .rastro { width: calc(var(--tam) * 6); }
.voo.destaque::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 0.8);
  animation: onda 1.6s ease-out infinite;
}

@keyframes girar { to { rotate: 360deg; } }
@keyframes onda {
  from { transform: scale(0.4); opacity: 0.9; }
  to { transform: scale(1.4); opacity: 0; }
}

main {
  position: relative;
  z-index: 1;
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem 16px 2rem;
}

.topo { text-align: center; color: #fff; margin-bottom: 1rem; }
.topo h1 { font-size: clamp(1.25rem, 2.6vw, 2.4rem); letter-spacing: 0.02em; text-transform: uppercase; }
.status { margin-top: 0.3rem; font-size: 0.9rem; opacity: 0.9; }
.status.erro { background: #fff3; display: inline-block; padding: 0.2rem 0.7rem; border-radius: 99px; }

.placar {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.3fr) 1fr;
  gap: 1rem;
  align-items: stretch;
}

.cand, .centro, .cartao, .cartao-mapa, .cartao-grafico {
  background: var(--cartao);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
}

.cand { padding: 1rem; text-align: center; border-top: 8px solid var(--cor); }
.cand.lula { --cor: var(--lula); }
.cand.flavio { --cor: var(--flavio); }
.cand img {
  width: clamp(90px, 11vw, 260px);
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid var(--cor);
  background: #eee;
}
.cand h2 { font-size: 1.15rem; margin-top: 0.5rem; }
.num { background: var(--cor); color: #fff; border-radius: 6px; padding: 0 0.35em; font-size: 0.85em; }
.pct { font-size: clamp(2.4rem, 6vw, 7rem); font-weight: 900; color: var(--cor); line-height: 1.05; font-variant-numeric: tabular-nums; }
.votos { color: var(--suave); font-variant-numeric: tabular-nums; }

.centro { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: 1rem 1.25rem; text-align: center; }
.apurado { font-size: 1.05rem; }
.apurado strong { font-size: 2em; display: block; color: var(--vermelho-escuro); }
.atualizado { color: var(--suave); font-size: 0.85rem; }

.humor video {
  display: block;
  width: 100%;
  max-height: clamp(150px, 24vh, 380px);
  object-fit: contain;
  border-radius: 12px;
}
.humor figcaption { margin-top: 0.4rem; font-weight: 800; font-size: 1.1rem; color: var(--lula); }

.barra { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #ddd; }
.barra.grande { height: clamp(22px, 2.6vw, 56px); }
.b-lula { background: var(--lula); width: 50%; transition: width 0.8s ease; }
.b-flavio { background: var(--flavio); flex: 1; }

.secao { color: #fff; font-size: 1.2rem; margin: 1.5rem 0 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; }

.grade { display: grid; gap: 0.75rem; }
.regioes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.estados { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.cartao { padding: 0.7rem 0.85rem; }
.cartao h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.linha { display: flex; justify-content: space-between; font-weight: 800; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
.p-lula { color: var(--lula); }
.p-flavio { color: var(--flavio); text-align: right; }
.linha small { display: block; font-size: 0.75em; font-weight: 600; }
.regioes .linha { font-size: 1.3rem; }
.mini { color: var(--suave); font-size: 0.78rem; margin-top: 0.35rem; }

.cartao-mapa, .cartao-grafico { padding: 1rem; }

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.g-grade line { stroke: #e6e6e6; stroke-width: 1; }
.g-grade line.g-meio { stroke: #9a9a9a; stroke-dasharray: 4 4; }
.g-grade text, .g-rotulo { font-size: 12px; fill: var(--suave); font-variant-numeric: tabular-nums; }
.g-rotulo { fill: var(--texto); font-weight: 700; font-size: 13px; }
.g-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-ponto { stroke: #fff; stroke-width: 2; }
.g-cursor line { stroke: #555; stroke-width: 1; }
.dica {
  position: absolute;
  top: 8px;
  padding: 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
  font-size: 0.8rem;
  pointer-events: none;
  white-space: nowrap;
}
.d-titulo { color: var(--suave); margin-bottom: 0.15rem; }
.d-lula, .d-flavio { font-weight: 700; color: var(--texto); }
.d-lula::before, .d-flavio::before { content: "● "; }
.d-lula::before { color: var(--lula); }
.d-flavio::before { color: var(--flavio); }
.tabela-grafico { margin-top: 0.5rem; font-size: 0.85rem; color: var(--suave); }
.tabela-grafico table { width: 100%; border-collapse: collapse; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.tabela-grafico th, .tabela-grafico td { text-align: right; padding: 0.2rem 0.4rem; border-bottom: 1px solid #eee; }
.tabela-grafico th:first-child, .tabela-grafico td:first-child { text-align: left; }
.mapa { display: block; width: 100%; max-width: 900px; max-height: 85vh; margin: 0 auto; }
.estados-mapa path { fill: #d9d9d9; stroke: #fff; stroke-width: 0.8; stroke-linejoin: round; transition: fill 0.8s ease; }
.rotulos-mapa text {
  font-size: 11px;
  font-weight: 800;
  fill: #1c1c1c;
  stroke: rgb(255 255 255 / 0.85);
  stroke-width: 2.5px;
  paint-order: stroke;
  pointer-events: none;
}
.rotulos-mapa .r-pct { font-size: 10px; font-weight: 700; }
.rotulos-mapa line { stroke: #777; stroke-width: 0.8; }
.legenda-mapa { text-align: center; color: var(--suave); font-size: 0.85rem; margin-top: 0.5rem; }
.chip { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; vertical-align: -0.1em; margin: 0 0.3em 0 0.8em; }
.chip.lula { background: var(--lula); }
.chip.flavio { background: var(--flavio); }
.chip.vazio { background: #d9d9d9; }

footer { color: #fff; opacity: 0.85; font-size: 0.8rem; text-align: center; margin-top: 2rem; }
footer a { color: #fff; }

@media (max-width: 760px) {
  .placar { grid-template-columns: 1fr 1fr; }
  .centro { grid-column: 1 / -1; grid-row: 2; }
  .cand h2 { font-size: 1rem; }
  .regioes { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .estados { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .cartao-mapa { padding: 0.5rem 0; }
  .rotulos-mapa text { font-size: 15px; stroke-width: 3px; }
  .rotulos-mapa .r-pct { font-size: 13px; }
}