/* ============================================================================
   endereco-do-voto — folha de estilo única do projeto
   Regras de cor (para não misturar os papéis):
     · tinta/papel  -> texto, fios, superfícies. Nunca para dado.
     · acento (#ff0059) -> a "mudança" e a marca (fios, links, realce).
     · lula / flavio -> EXCLUSIVOS dos candidatos. Nenhum gráfico neutro usa azul.
     · grafite      -> quantidade (barras e rampa das bolhas): claro = pouco,
                       escuro = muito. Quantidade nunca veste cor de candidato.
     · sobre-tinta  -> só o rodapé escuro (texto e fios sobre a tinta).
   Tipografia: uma família só (Noto Sans Display, local), na escala
     11.5 / 12.5 / 13 / 14 / 14.5 / 15 / 17 px, com os títulos em clamp().
   Toda tela importa esta folha: cor e tipo saem daqui, não do arquivo solto.
   ========================================================================== */
:root{
  --tinta:#16181d;          /* texto principal, títulos */
  --tinta-forte:#0b0d11;    /* o mesmo preto, um passo abaixo (hover) */
  --texto:#3a3f49;          /* corpo de texto */
  --fraco:#6e7480;          /* apoio, legendas */
  --tenue:#9aa0aa;          /* micro-texto */
  --papel:#fcfcfd;          /* fundo da página */
  --papel2:#f4f5f7;         /* faixas e painéis discretos */
  --branco:#fff;
  --linha:#e5e7eb;          /* fio fino */
  --linha2:#d3d7de;         /* fio médio */
  --linha3:#b9bec7;         /* fio forte */

  --acento:#ff0059;         /* mudança / marca */
  --acento-esc:#c4003f;     /* acento sobre papel (texto/realce) */
  --acento-claro:#ff8ab0;   /* acento sobre a tinta (rodapé) */
  --acento-fraco:rgba(255,0,89,.06);   /* véu de acento (fundo) */
  --acento-fio:rgba(255,0,89,.20);     /* fio de acento */
  --selo:#ffe6ef;           /* selo "1º lugar" */
  --selo-fio:#ffc9db;
  --lula:#ff0059;           /* candidato */
  --flavio:#126ded;         /* candidato */
  --outros:#9aa0aa;         /* candidato sem cor própria (a cauda da disputa) */
  --grafite:#3e4350;        /* dado neutro */
  --grafite-forte:#2b303a;  /* topo da rampa: contorno de bolha, 1º lugar */
  --grafite-claro:#c9ced8;  /* pé da rampa (pouca mudança) */
  --verde:#1b7f3b;          /* confirmacao / nao mudou */

  --fio-tinta:#3a4050;      /* fio sobre o rodapé escuro */
  --papel-tinta:#22252c;    /* superfície sobre o rodapé escuro */
  --texto-tinta:#eceef2;    /* texto sobre o rodapé escuro */

  --razo:12px;              /* raio padrão */
  --sombra:0 1px 2px rgba(22,24,29,.04), 0 8px 24px rgba(22,24,29,.05);
  --largura:1000px;         /* largura do miolo */
  --fonte:"Noto Sans Display",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--texto);
  font-family:var(--fonte);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:var(--tinta);margin:0;font-weight:650;line-height:1.18;
  letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 16px}
a{color:var(--acento-esc);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:650;color:var(--tinta)}
/* Sobre o rodapé escuro o negrito herdaria a tinta (preto no preto): vira realce
   no acento. Dentro de cartão claro (o resultado da busca) volta à tinta. */
footer b,footer strong{color:var(--acento)}
.zona-clara b,.zona-clara strong,.rcard b,.rcard strong{color:var(--tinta)}
img{max-width:100%;height:auto}
code{background:var(--papel2);border:1px solid var(--linha);border-radius:4px;
  padding:1px 5px;font-size:.86em;color:var(--tinta)}

.miolo{max-width:var(--largura);margin:0 auto;padding:0 24px}
.fio{border:0;border-top:1px solid var(--linha);margin:0}

/* ---------- micro-rótulo (kicker) ---------- */
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.145em;text-transform:uppercase;
  color:var(--fraco)}
/* texto miúdo no acento usa a versão escura: #ff0059 em 11px não passa no contraste */
.kicker.acento{color:var(--acento-esc)}

/* ---------- fio de assinatura no alto da capa ---------- */
.mastro{border-bottom:1px solid var(--linha);background:var(--papel)}
.mastro .miolo{display:flex;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px;font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fraco)}
.mastro .dir{color:var(--tinta);white-space:nowrap}
@media (max-width:560px){
  .mastro .miolo{flex-direction:column;gap:3px}
}

/* ---------- cabeçalho fino das páginas internas ---------- */
.topo{background:var(--branco);border-bottom:1px solid var(--linha)}
.topo .miolo{padding-top:26px;padding-bottom:24px}
.topo h1{font-size:clamp(22px,3.2vw,32px);letter-spacing:-.02em;margin:10px 0 6px}
.topo p{margin:0;color:var(--fraco);font-size:14.5px}
.topo .volta{display:inline-block;font-size:13px;font-weight:600;margin-bottom:6px}

/* ---------- abridor (capa e narrativa) ---------- */
.abridor{padding:clamp(40px,7vw,78px) 0 0}
.abridor h1{font-size:clamp(32px,5.4vw,60px);line-height:1.04;letter-spacing:-.032em}
.abridor .linhafina{margin:26px 0 0}
.abridor .deck{font-size:clamp(16.5px,2vw,19.5px);color:var(--texto);max-width:64ch;
  margin:22px 0 0;line-height:1.55}
.abridor .deck b{color:var(--tinta)}

/* ---------- placar de números ---------- */
.placar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--linha2);border-bottom:1px solid var(--linha2);
  margin:34px 0 0;padding:18px 0}
.placar>div{padding:2px 20px;border-left:1px solid var(--linha)}
.placar>div:first-child{border-left:0;padding-left:0}
.placar b{display:block;font-size:clamp(26px,3.4vw,38px);font-weight:700;color:var(--tinta);
  line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.placar span{display:block;margin-top:7px;font-size:12.5px;color:var(--fraco);line-height:1.35}
.placar b.acento{color:var(--acento)}
@media (max-width:720px){
  .placar{grid-template-columns:1fr 1fr;gap:16px 0}
  .placar>div:nth-child(odd){border-left:0;padding-left:0}
  .placar>div:nth-child(3){margin-top:6px}
}

/* ---------- sumário (portas de entrada) ---------- */
.sumario{margin:56px 0 0}
.sumario h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fraco);
  font-weight:700;margin-bottom:6px}
.sumario ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha2)}
.sumario a{display:grid;grid-template-columns:44px 1fr 1fr 22px;align-items:baseline;
  gap:0 22px;padding:19px 12px 19px 0;border-bottom:1px solid var(--linha);
  color:inherit;text-decoration:none;transition:background .14s ease}
.sumario a:hover{background:var(--papel2);text-decoration:none}
.sumario a:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}
.sumario .n{font-size:13px;font-weight:700;color:var(--acento-esc);
  font-variant-numeric:tabular-nums}
.sumario .t{font-size:19px;font-weight:650;color:var(--tinta);letter-spacing:-.015em}
.sumario .d{font-size:14px;color:var(--fraco);line-height:1.5}
.sumario .seta{font-size:17px;color:var(--linha3);text-align:right;transition:color .14s ease,transform .14s ease}
.sumario a:hover .seta{color:var(--acento);transform:translateX(3px)}
@media (max-width:780px){
  .sumario a{grid-template-columns:32px 1fr 18px;gap:0 14px;padding:16px 8px 16px 0}
  .sumario .d{grid-column:2 / 3;margin-top:4px}
  .sumario .seta{grid-row:1;grid-column:3}
}

/* ---------- faixa do empate (duelo) ---------- */
/* o nome tem "faixa" para não colidir com o .duelo da narrativa, que é outra coisa */
.faixa-duelo{margin:56px 0 0;background:var(--papel2);border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);padding:30px 0 28px}
.faixa-duelo h2{font-size:clamp(20px,2.4vw,26px);margin:8px 0 4px}
.faixa-duelo .linha-duelo{display:grid;grid-template-columns:1fr 1fr;align-items:end;
  gap:10px;margin:22px 0 10px}
.faixa-duelo .lado{min-width:0}
.faixa-duelo .lado.d{text-align:right}
.faixa-duelo .nome{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--tinta)}
.faixa-duelo .votos{font-size:13px;color:var(--fraco);font-variant-numeric:tabular-nums}
.faixa-duelo .pct{font-size:clamp(30px,4.4vw,46px);font-weight:700;line-height:1.05;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.faixa-duelo .lado.e .pct{color:var(--lula)}
.faixa-duelo .lado.d .pct{color:var(--flavio)}
.barra-duelo{display:flex;height:34px;border-radius:6px;overflow:hidden;
  background:var(--branco);border:1px solid var(--linha2)}
.barra-duelo i{display:block;height:100%}
.barra-duelo .e{background:var(--lula)}
.barra-duelo .d{background:var(--flavio);border-left:2px solid var(--branco)}
.faixa-duelo .pe{margin:14px 0 0;font-size:14px;color:var(--fraco);max-width:76ch}
.faixa-duelo .pe b{color:var(--tinta)}

/* ---------- ressalva / aviso ---------- */
/* "ressalva" e não "nota": a narrativa usa .nota para legenda miúda */
.ressalva{margin:44px 0 0;background:var(--branco);border:1px solid var(--linha);
  border-left:3px solid var(--tinta);border-radius:0 var(--razo) var(--razo) 0;
  padding:20px 24px 8px}
.ressalva .rotulo{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);margin-bottom:8px}
.ressalva p{font-size:14.5px;line-height:1.6;color:var(--texto)}
.ressalva p:last-child{margin-bottom:12px}

/* ---------- caixas de conteúdo genéricas ---------- */
.caixa{background:var(--branco);border:1px solid var(--linha);border-radius:var(--razo);
  padding:22px 24px;box-shadow:var(--sombra)}
.caixa h2,.caixa h3{margin-bottom:10px}

/* ---------- botões ---------- */
.botao{display:inline-flex;align-items:center;gap:8px;background:var(--tinta);color:#fff;
  border:1px solid var(--tinta);border-radius:8px;padding:10px 18px;font-size:15px;
  font-weight:600;font-family:inherit;cursor:pointer;transition:background .14s ease}
.botao:hover{background:var(--tinta-forte);text-decoration:none}
.botao.vazio{background:transparent;color:var(--tinta)}
.botao.vazio:hover{background:var(--papel2)}

/* ---------- tabelas ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.tabela caption{text-align:left;font-size:13px;color:var(--fraco);padding-bottom:8px}
.tabela th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fraco);font-weight:700;border-bottom:1px solid var(--linha2);
  padding:0 12px 8px 0}
.tabela td{padding:11px 12px 11px 0;border-bottom:1px solid var(--linha);color:var(--texto)}
.tabela tr:last-child td{border-bottom:0}
.tabela .n{text-align:right;padding-right:20px}
.tabela tr.destaque td{background:var(--acento-fraco)}
.pino{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;
  vertical-align:-1px;border:1px solid rgba(0,0,0,.18)}

/* ---------- rodapé ---------- */
.rodape{margin-top:64px;border-top:1px solid var(--linha2);background:var(--branco)}
.rodape .miolo{padding:28px 24px 44px;font-size:12.5px;color:var(--fraco);line-height:1.7}
.rodape .miolo b{color:var(--tinta);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:8px}
.rodape a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--linha3)}

/* ---------- selos ---------- */
.selo{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  padding:3px 9px;border-radius:99px;background:var(--papel2);color:var(--fraco);
  border:1px solid var(--linha)}
.selo.acento{background:var(--acento);color:#fff;border-color:var(--acento)}

/* ---------- impressão ---------- */
@media print{
  body{background:#fff}
  .faixa-duelo,.ressalva,.caixa{break-inside:avoid}
  .sumario a:hover{background:none}
}