/* Apuração · the news.
   Tokens em tokens.css (cópia do colita). Os componentes que o colita já tem (topo, abas, seletor de
   estado, palco de duas colunas, título datilografado, dígitos de urna, botões, cartão da newsletter,
   rodapé, abas do celular) seguem o desenho de colita-the-news/public/styles.css. O que é só daqui
   (linhas de resultado, faixa do mapa, pílulas de estado) usa os mesmos tokens e raios. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); font-size: 16px; line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; }
h1, h2, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
button, a, input, select, label { touch-action: manipulation; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root { --mapa-vazio: #e6e6e6; --fio: #eee; --z: 1; }
/* Tela grande (monitor largo, TV): o desenho é feito pra ~1440 px. Acima disso tudo cresce junto, em vez de
   virar uma coluna estreita perdida no meio da tela. `--z` é a escala; as medidas em vh/vw abaixo são
   divididas por ela, porque dentro de um elemento com zoom 100vh passa a valer mais que a janela. */
body { zoom: var(--z); }
@media (min-width: 1800px) and (min-height: 1000px) { :root { --z: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { :root { --z: 1.65; } }
@media (min-width: 3200px) and (min-height: 1900px) { :root { --z: 2.3; } }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; background: var(--white);
  display: flex; align-items: center; gap: var(--space-8);
  max-width: 1360px; margin: 0 auto; padding: 18px 32px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--black); }
.marca img { height: 31px; width: auto; display: block; }
.marca__produto {
  font-weight: var(--weight-black); font-size: 22px; letter-spacing: -0.02em;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-left: 10px; border-left: 1px solid var(--border-soft);
}
.abas { display: flex; gap: 6px; }
.aba {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); white-space: nowrap;
  font-weight: var(--weight-medium); font-size: 15px; transition: background var(--duration-fast) var(--ease-standard);
}
.aba:hover { background: var(--yellow-4); }
.aba.on { background: var(--black); color: var(--white); }
.uf { margin-left: auto; position: relative; }
.uf__botao {
  display: flex; align-items: center; gap: 8px; background: var(--white);
  border: 1px solid var(--black); border-radius: var(--radius-pill); padding: 8px 14px 8px 8px; font-weight: var(--weight-medium);
}
.uf__botao:focus-visible, .uf__botao[aria-expanded='true'] { outline: none; box-shadow: 0 0 0 3px var(--yellow-3); }
.uf__sigla { background: var(--gradient-brand); border-radius: var(--radius-pill); padding: 4px 10px; font-weight: var(--weight-bold); font-size: 13px; }
.uf__botao svg { width: 16px; height: 16px; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--duration-fast) var(--ease-standard); }
.uf__botao[aria-expanded='true'] svg { transform: rotate(180deg); }
/* no desktop o <select> não aparece: a lista é a nossa */
.uf select { display: none; }
.uf__lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; width: 440px; max-width: calc(100vw / var(--z) - 32px);
  background: var(--white); border: 1px solid var(--black); border-radius: 24px; padding: 10px;
  /* tela baixa (notebook de 13"): a lista rola por dentro em vez de sair da janela */
  max-height: calc(100vh / var(--z) - 96px); overflow-y: auto; scrollbar-width: thin;
}
.uf__lista[hidden] { display: none; }
.uf__opcao {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: var(--radius-pill);
  font-size: 15px; white-space: nowrap; cursor: pointer; transition: background var(--duration-fast);
}
.uf__opcao b { min-width: 38px; text-align: center; background: var(--surface-soft); border-radius: var(--radius-pill); padding: 4px 0; font-weight: var(--weight-bold); font-size: 12px; }
.uf__opcao:hover, .uf__opcao:focus-visible { background: var(--yellow-4); outline: none; }
.uf__opcao[aria-selected='true'] { background: var(--black); color: var(--white); }
.uf__opcao[aria-selected='true'] b { background: var(--gradient-brand); color: var(--black); }
.aviso-topo { margin: 0 auto 8px; width: fit-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: var(--radius-pill); background: var(--yellow-4); text-align: center; font-size: 14px; font-weight: var(--weight-medium); }

/* ---------- palco (2 colunas) ---------- */
.palco {
  max-width: 1360px; margin: 0 auto; padding: 8px 32px 64px;
  display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 72px; align-items: start;
}
.painel {
  position: sticky; top: 88px; max-height: calc(100vh / var(--z) - 104px); overflow: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: var(--space-6); padding: 8px 4px 24px 0;
}
.painel::-webkit-scrollbar { display: none; }
.painel > * { flex-shrink: 0; }
.principal { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding-top: 8px; }

.junto { white-space: nowrap; }
.sobre { font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .08em; color: var(--text-secondary); }

/* ---------- a frase ---------- */
.hero__titulo {
  font-size: clamp(44px, calc(5.2vw / var(--z)), 72px); line-height: var(--leading-tight); letter-spacing: -0.035em;
  font-weight: var(--weight-black); min-height: 2.1em; overflow-wrap: anywhere; margin-top: var(--space-2);
}
/* margem negativa do tamanho dele: o cursor não ocupa largura, então nunca cai sozinho pra linha de baixo */
.cursor { display: inline-block; width: .08em; height: .85em; margin-left: .06em; margin-right: -.14em; vertical-align: -0.06em; background: var(--gradient-brand); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.hero__sub { font-size: var(--text-body); color: var(--text-secondary); max-width: 460px; }
.alerta { color: var(--brown); font-weight: var(--weight-bold); }

.progresso { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.progresso span { height: 6px; border-radius: var(--radius-pill); background: var(--fio); overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--gradient-brand); transition: width var(--duration-slow) var(--ease-standard); }

.totais { display: flex; gap: 14px 32px; flex-wrap: wrap; }
.totais dt { font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .08em; color: var(--text-secondary); }
.totais dd { margin: 2px 0 0; font-weight: var(--weight-bold); font-size: 18px; }
.neutro { font-size: 13px; color: var(--text-secondary); max-width: 460px; }

.news { background: var(--surface-soft); border-radius: var(--radius-feature); padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.news__titulo { font-weight: var(--weight-bold); font-size: 19px; line-height: var(--leading-snug); }
.news__sub { margin: 0 0 8px; color: var(--text-secondary); font-size: 15px; }

/* contagem regressiva: os mesmos dígitos da urna */
.relogio { display: flex; gap: 14px; flex-wrap: wrap; }
.relogio > span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.relogio .digito { width: 40px; height: 52px; font-size: 26px; border: 1px solid var(--black); background: var(--white); color: var(--black); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: var(--black);
  border-radius: var(--radius-pill); padding: 14px 28px; font-weight: var(--weight-bold); font-size: 17px;
  transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast), box-shadow var(--duration-fast);
}
.btn:hover { transform: scale(1.02); filter: brightness(1.05); }
.btn:active { transform: scale(.98); filter: brightness(.95); }
.btn-grad { background: var(--gradient-brand); box-shadow: var(--shadow-button); white-space: nowrap; padding: 10px 22px; font-size: 16px; }
.btn-grad:hover { box-shadow: var(--shadow-button-hover); }
.btn-escuro { background: var(--gray-dark); color: var(--white); }
.btn-contorno { border: 1px solid var(--black); background: var(--white); }
.btn--p { padding: 9px 18px; font-size: 14px; }
.btn--p .ic { width: 16px; height: 16px; }
.btn-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--white); transition: background var(--duration-fast); }
.btn-ic:hover { background: var(--yellow-4); }
.link { display: inline-flex; align-items: center; align-self: center; gap: 6px; font-size: 15px; font-weight: var(--weight-medium); color: var(--text-secondary); padding: 6px 0; }
.link:hover { color: var(--black); text-decoration: underline; }
.acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.fonte { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); text-align: center; }
.aviso-cabine { text-align: center; font-size: 14px; font-weight: var(--weight-medium); background: var(--yellow-4); border-radius: var(--radius-pill); padding: 10px 18px; }
.vazio { color: var(--text-secondary); margin: 16px 0; }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-width: 0; }
.filtros > * { min-width: 0; }
.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--surface-soft); border-radius: var(--radius-pill); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.faixa .seg { background: var(--white); }
.seg__item { padding: 9px 16px; border-radius: var(--radius-pill); font-weight: var(--weight-medium); font-size: 15px; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); }
.seg__item:hover { background: var(--yellow-4); }
.seg__item.on { background: var(--black); color: var(--white); }
.campo-busca {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--black); border-radius: var(--radius-pill);
  padding: 0 20px; height: 50px; background: var(--white);
}
.campo-busca:focus-within { box-shadow: 0 0 0 4px var(--yellow-3); }
.campo-busca input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; }
.campo-busca input:focus { outline: none; }

.grupo { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .08em; color: var(--text-secondary); }
.grupo::after { content: ''; flex: 1; height: 1px; background: var(--fio); }
.bancadas { display: flex; flex-wrap: wrap; gap: 8px 6px; }
.bancada { display: inline-flex; align-items: baseline; gap: 5px; background: var(--surface-soft); border-radius: var(--radius-pill); padding: 5px 10px 5px 12px; font-size: 13px; font-weight: var(--weight-medium); white-space: nowrap; }
.bancada small { font-size: 12px; font-weight: var(--weight-black); }

/* ---------- linhas de candidato ---------- */
.linhas { display: flex; flex-direction: column; gap: 10px; }
.linha {
  display: flex; align-items: center; gap: 16px; background: var(--surface-soft); border-radius: 24px; padding: 12px 22px 12px 12px; min-width: 0;
}
.linha__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.linha__nome { font-weight: var(--weight-bold); font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.linha__det { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha__valor { display: flex; flex-direction: column; align-items: flex-end; flex: none; min-width: 96px; line-height: 1.2; }
.linha__valor strong { font-size: 24px; font-weight: var(--weight-black); letter-spacing: -0.02em; }
.linha__valor small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.linha--partido { padding-left: 22px; }
/* dentro de uma faixa ou de um cargo, o fundo já é cinza: a linha vira branca */
.linhas--claras .linha { background: var(--white); }
.linha--p { padding: 10px 18px 10px 10px; gap: 12px; border-radius: 20px; }
.linha--p .retrato { height: 56px; border-radius: 11px; font-size: 14px; }
.linha--p .linha__nome { font-size: 16px; }
.linha--p .linha__valor strong { font-size: 19px; }
.linha--p .linha__valor { min-width: 84px; }
.linha--p .digito { width: 24px; height: 32px; font-size: 16px; border-radius: 7px; }

/* Barra de uma cor só, pra todos: comparar candidatos da mesma disputa com cores diferentes sugere preferência. */
.barra { display: block; height: 5px; margin-top: 5px; border-radius: var(--radius-pill); background: #e9e9e9; overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--black); transition: width var(--duration-slow) var(--ease-standard); }

/* A foto do TSE é 161×225. A caixa tem essa proporção e a imagem entra inteira (contain): nada de cortar
   cabeça ou queixo — e o parecer jurídico do colita pede foto sem recorte. */
.retrato {
  font-style: normal; overflow: hidden; height: 76px; width: auto; aspect-ratio: 161 / 225; border-radius: 14px; flex: none; object-fit: contain; display: grid; place-items: center;
  background: var(--white); font-weight: var(--weight-black); font-size: 22px; color: var(--gray-disabled);
}
.linhas--claras .retrato { background: var(--surface-soft); }
/* no anel da legenda a foto é um círculo pequeno: aí o recorte é inevitável, então ele mira o rosto, não o meio da foto */
.retrato--mini { width: 34px; height: 34px; aspect-ratio: 1; border-radius: 50%; font-size: 12px; object-fit: cover; object-position: 50% 18%; }
.digitos { display: inline-flex; gap: 5px; flex: none; }
.digito {
  display: grid; place-items: center; width: 30px; height: 40px; border-radius: 10px;
  border: 1px solid var(--black); background: var(--white); font-weight: var(--weight-bold); font-size: 20px; font-variant-numeric: tabular-nums;
}
.selo { display: inline-block; background: var(--black); color: var(--white); border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: var(--weight-medium); white-space: nowrap; vertical-align: 2px; }

/* ---------- meu estado: um bloco por cargo ---------- */
.cargo { display: flex; flex-direction: column; gap: 10px; background: var(--surface-soft); border-radius: 24px; padding: 14px; }
.cargo__topo { display: flex; align-items: center; gap: 12px; padding: 4px 0 0 10px; }
.cargo__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cargo__nome { font-weight: var(--weight-bold); font-size: 18px; }
.cargo__det { font-size: 14px; color: var(--text-secondary); }
/* antes da apuração: os cargos em branco, com as caixinhas vazias da colita */
.cargo--vazio { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; width: 100%; transition: background var(--duration-fast); }
.cargo--vazio:hover { background: #f3f3f3; }
.cargo--vazio[data-ativo] { box-shadow: inset 0 0 0 2px var(--black); }
.digito--vazio { border: 1.5px dashed #c9c9c9; background: transparent; }
.aviso-cabine a { color: inherit; font-weight: var(--weight-bold); }

/* ---------- faixa do mapa ---------- */
.faixa { background: var(--surface-soft); padding: 72px 0 80px; }
.faixa__dentro { max-width: 1360px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: var(--space-4); }
.faixa__topo { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.faixa__titulo { font-size: clamp(34px, calc(4vw / var(--z)), 56px); line-height: var(--leading-tight); letter-spacing: -0.035em; font-weight: var(--weight-black); }
.leitura { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 26px; font-size: 16px; }
.leitura__dica { font-size: 14px; color: var(--text-secondary); }
.faixa__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.faixa__grade--uma { grid-template-columns: minmax(0, 720px); }
.faixa__mapa { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mapa__svg { display: block; width: 100%; height: auto; max-height: calc(70vh / var(--z)); }
.mapa__uf, .mapa__cidade { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke: var(--surface-soft); }   /* traço em pixel de tela: proporcional, o DF some na própria borda */
.mapa__uf { cursor: pointer; stroke-width: 1; transition: fill 160ms ease; }
.mapa__uf:focus, .mapa__uf:focus-visible { outline: none; }
/* O realce é esta camada, por cima e sem ponteiro: engrossar o traço do próprio estado rouba clique do vizinho. */
.mapa__contorno { fill: none; stroke: var(--black); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mapa__cidade { stroke-width: .5; }
.mapa__divisa { fill: none; stroke: var(--black); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }

.legenda { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.legenda li { display: flex; align-items: center; gap: 10px; line-height: 1.25; }
.legenda strong { display: block; font-size: 15px; }
.legenda small { font-size: 13px; color: var(--text-secondary); }
.legenda--siglas { gap: 6px 16px; font-size: 14px; }
.legenda--siglas li { gap: 6px; }
.legenda--siglas i { width: 12px; height: 12px; border-radius: 4px; flex: none; border: 1px solid rgb(0 0 0 / .08); }
.anel { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.anel .retrato { border: 2px solid var(--white); }
/* o anel repete a trama do mapa: a legenda explica o que está pintado, não só a cor */
.anel[data-trama='diagonal'] { background-image: repeating-linear-gradient(45deg, rgb(0 0 0 / .45) 0 2px, transparent 2px 5px); }
.anel[data-trama='contra-diagonal'] { background-image: repeating-linear-gradient(-45deg, rgb(0 0 0 / .45) 0 2px, transparent 2px 5px); }
.anel[data-trama='pontos'] { background-image: radial-gradient(rgb(0 0 0 / .45) 1.1px, transparent 1.2px); background-size: 5px 5px; }
.anel[data-trama='grade'] { background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / .4) 0 1.5px, transparent 1.5px 5px), repeating-linear-gradient(90deg, rgb(0 0 0 / .4) 0 1.5px, transparent 1.5px 5px); }

/* estados em pílulas: o selo de sigla do seletor de estado, na cor de quem lidera lá */
.pilulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; min-width: 0; }
.pilulas li { min-width: 0; }
.pilula {
  width: 100%; display: flex; align-items: center; gap: 10px; background: var(--white); border-radius: var(--radius-pill);
  padding: 7px 16px 7px 7px; font-size: 14px; transition: background var(--duration-fast), box-shadow var(--duration-fast);
}
.pilula b { flex: none; min-width: 42px; text-align: center; border-radius: var(--radius-pill); padding: 5px 0; font-weight: var(--weight-bold); font-size: 13px; background: var(--mapa-vazio); }
.pilula span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilula strong { flex: none; font-weight: var(--weight-black); }
.pilula:hover, .pilula[data-foco] { background: var(--yellow-4); }
.pilula[data-ativa] { box-shadow: inset 0 0 0 2px var(--black); }

/* ---------- página de texto ---------- */
.palco--pagina { grid-template-columns: minmax(0, 720px); justify-content: center; }
.pagina { font-size: 17px; line-height: 1.6; padding: 24px 0 32px; }
.pagina h1 { font-size: 48px; line-height: var(--leading-tight); letter-spacing: -0.03em; font-weight: var(--weight-black); margin: 16px 0 12px; }
.pagina h2 { font-size: 20px; font-weight: var(--weight-bold); margin: 32px 0 6px; }
.pagina p { margin: 0 0 12px; color: var(--gray-mid); }

/* ---------- carregando ---------- */
.esqueleto { min-height: 320px; border-radius: 24px; background: var(--surface-soft); animation: pulso 1.2s ease-in-out infinite alternate; }
.esqueleto--titulo { min-height: 180px; }
@keyframes pulso { to { opacity: .5; } }

/* ---------- rodapé ---------- */
.rodape { max-width: 1360px; margin: 0 auto; padding: 24px 32px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--fio); font-size: 14px; color: var(--text-secondary); }
.faixa + .rodape { border-top: 0; }
.rodape nav { display: flex; gap: 20px; }
.rodape a { color: inherit; font-weight: var(--weight-medium); text-decoration: none; }
.rodape a:hover { background: var(--yellow); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--black); color: var(--white); padding: 12px 22px; border-radius: var(--radius-pill); font-weight: var(--weight-medium);
  transition: opacity var(--duration-standard), transform var(--duration-standard) var(--ease-standard); max-width: calc(100vw / var(--z) - 32px); text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.abas-mobile { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
  .palco { gap: 32px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .hero__titulo { font-size: clamp(40px, calc(5.2vw / var(--z)), 72px); }
  .linha .digitos { display: none; }
  .linha--p .digitos { display: none; }
  .faixa__grade { gap: 32px; }
}

/* tablet deitado: os cinco cargos cabem na coluna sem rolar de lado */
@media (min-width: 900px) and (max-width: 1199px) {
  .seg__item { padding: 9px 11px; font-size: 14px; }
}

/* tela baixa em duas colunas (tablet deitado, notebook pequeno): o painel fixo aperta pra caber inteiro */
@media (min-width: 900px) and (max-height: 820px) {
  .painel { gap: var(--space-4); }
  .news { padding: 18px 20px; }
  .news__sub { display: none; }
}

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .topo { padding: 12px 16px; gap: 12px; }
  .marca img { height: 22px; }
  .marca__produto { font-size: 18px; padding-left: 8px; }
  .abas { display: none; }
  /* celular: o <select> cobre o botão, invisível — o toque abre o seletor nativo do aparelho, que é melhor que qualquer lista nossa */
  .uf__botao { padding: 6px 8px 6px 6px; gap: 4px; }
  .uf__nome { display: none; }
  .uf select { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; cursor: pointer; font-size: 16px; }
  .uf__lista { display: none; }
  .palco { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 4px 16px 24px; }
  .painel { position: static; max-height: none; overflow: visible; padding: 0; gap: var(--space-4); }
  .hero__titulo { font-size: 44px; min-height: 0; }
  /* no celular a disputa vem antes do convite: a newsletter desce pra depois da lista */
  .palco { display: flex; flex-direction: column; align-items: stretch; }
  .painel { display: contents; }
  .painel > .news, .painel > .neutro { order: 3; }
  .principal { order: 2; padding-top: 0; }
  .totais { gap: 12px 24px; }
  .linha { gap: 12px; padding: 12px 16px 12px 12px; }
  .retrato:not(.retrato--mini) { height: 64px; font-size: 17px; }
  .linha__nome { font-size: 16px; }
  .linha__valor { min-width: 0; }
  .linha__valor strong { font-size: 20px; }
  .acoes { grid-template-columns: 1fr; }
  .faixa { padding: 40px 0 48px; }
  .faixa__dentro { padding: 0 16px; }
  .faixa__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilula { padding-right: 12px; font-size: 13px; }
  .pagina h1 { font-size: 36px; }
  .relogio .digito { width: 34px; height: 44px; font-size: 22px; }
  .rodape { padding: 20px 16px 110px; flex-direction: column; }
  .toast { bottom: 90px; }

  .abas-mobile {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--white); border-top: 1px solid var(--fio); padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .abas-mobile .aba { flex-direction: column; justify-content: center; gap: 2px; font-size: 12px; padding: 6px; border-radius: 16px; }
  .abas-mobile .aba.on { background: var(--yellow-4); color: var(--black); }
}
@media (max-width: 380px) { .pilulas { grid-template-columns: minmax(0, 1fr); } .news { padding: 20px 14px; } }

/* dedo em vez de mouse (celular, tablet): alvo de toque com pelo menos 44 px */
@media (pointer: coarse) {
  .seg__item, .abas .aba { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .aba, .seg__item, .barra span, .progresso i, .mapa__uf, .toast, .pilula, .uf__opcao, .uf__botao svg { transition: none; }
  .esqueleto, .cursor { animation: none; }
}

/* ---------- modo TV (?modo=tv): peça de exibição, sem controles ---------- */
body.tv .abas, body.tv .abas-mobile, body.tv .uf, body.tv .filtros, body.tv .acoes, body.tv .news, body.tv .neutro,
body.tv .rodape nav, body.tv .link, body.tv .faixa .seg, body.tv .btn, body.tv .aviso-cabine--colita { display: none !important; }
body.tv .topo { position: static; }
body.tv .painel { position: static; max-height: none; overflow: visible; }
body.tv .pilula, body.tv .mapa__uf { cursor: default; }
body.tv { overflow-x: hidden; cursor: none; }
/* sem rolagem na TV: a linha que não cabe inteira sai (app.js › caberNaTv) e o mapa fica abaixo da primeira tela */
body.tv .linha.fora { display: none; }
body.tv .palco { min-height: calc(100vh / var(--z) - 64px); }

/* ---------- modo TV › cena do mapa (?modo=tv&cena=mapa): o mapa é a tela inteira, sem rolagem ---------- */
body:is([data-cena='mapa'], [data-cena='projecao']) { height: calc(100vh / var(--z)); overflow: hidden; display: flex; flex-direction: column; }
body:is([data-cena='mapa'], [data-cena='projecao']) > * { flex: none; }
body:is([data-cena='mapa'], [data-cena='projecao']) #tela { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body:is([data-cena='mapa'], [data-cena='projecao']) .rodape { display: none; }
/* a cena usa a largura toda do quadro (o placar para em 1360): cada pixel a mais vai pro mapa */
body:is([data-cena='mapa'], [data-cena='projecao']) .topo { width: 100%; max-width: 1440px; padding-inline: 40px; }
.cena {
  flex: 1; min-height: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 8px 40px 28px;
  display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 444px); grid-template-rows: minmax(0, 1fr); gap: 24px;
}
/* governador: 27 nomes diferentes, quase todos mais longos que os de presidente — a lista ganha largura pra não cortar */
.cena--nomes { grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 506px); }
.cena__lado { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.cena__lado .hero__titulo { font-size: 42px; min-height: 0; margin-top: 0; }
.cena__lado .hero__sub { font-size: 15px; }
.cena__lado .legenda:not(.legenda--siglas) { flex-direction: column; gap: 12px; margin-top: var(--space-2); }
.cena__lado .fonte { margin-top: auto; text-align: left; }
/* o desenho ocupa a caixa que sobrar entre o topo e a borda de baixo, seja qual for a proporção da tela */
.cena__mapa { position: relative; min-width: 0; min-height: 0; }
.cena__mapa .mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
.cena .mapa__uf, .cena .mapa__cidade { stroke: var(--white); }
.cena__lista { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.cena .pilulas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cena .pilula { background: var(--surface-soft); padding: 6px 12px 6px 6px; gap: 8px; }

/* ---------- modo TV › rodízio (?modo=tv&cena=rodizio): um gomo por cena no topo ---------- */
.rodizio { margin-left: auto; display: flex; gap: 6px; }
.rodizio[hidden] { display: none; }
.rodizio span { width: 36px; height: 5px; border-radius: var(--radius-pill); background: var(--fio); overflow: hidden; }
.rodizio i { display: block; width: 0; height: 100%; border-radius: var(--radius-pill); background: var(--black); }
.rodizio .foi i { width: 100%; }
.rodizio .on i { animation: encher var(--cada, 20s) linear forwards; }
@keyframes encher { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .rodizio .on i { animation: none; width: 100%; } }
/* sem tempo (o padrão): quem apresenta troca a cena, e o gomo só marca onde ela está */
.rodizio--manual .foi i { width: 0; }
.rodizio--manual .on i { animation: none; width: 100%; }
/* deslizar e dois toques trocam a cena: o gesto não pode selecionar texto, dar zoom nem voltar a página do navegador */
html.apresenta { overscroll-behavior-x: none; }
html.apresenta body { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---------- projeção (Cubo Três): seção própria, entre o placar e o mapa ---------- */
.faixa--clara { background: var(--white); padding: 8px 0 72px; }
.projecao__aviso { font-size: 14px; color: var(--text-secondary); max-width: 720px; }
.projecao__aviso strong { color: var(--black); font-weight: var(--weight-bold); white-space: nowrap; }
.projecao__resumo { gap: 6px 18px; margin: var(--space-2) 0; }
.projecoes { display: flex; flex-direction: column; gap: 10px; }
/* larguras fixas nas pontas: cada linha é uma grade só dela, e é isso que alinha as réguas e os números entre as linhas */
.projecao {
  display: grid; grid-template-columns: 46px 200px 150px minmax(0, 1fr) 150px; align-items: center; gap: 12px 24px;
  background: var(--surface-soft); border-radius: 28px; padding: 14px 28px 14px 16px;
}
.projecao .retrato { height: 64px; background: var(--white); }
.projecao__quem { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.projecao__regua { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.projecao__regua small { font-size: 12px; color: var(--text-secondary); }
.projecao__valor { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; text-align: right; }
.projecao__chance { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
/* a linha que soma os demais não tem foto: começa na coluna do nome */
.projecao--outros .projecao__quem { grid-column: 2; }
.projecao__valor strong { font-size: 24px; font-weight: var(--weight-black); letter-spacing: -0.02em; }
.projecao__chance strong { font-size: 24px; font-weight: var(--weight-black); letter-spacing: -0.02em; white-space: nowrap; }
.projecao__valor small, .projecao__chance small { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.projecao__chance--texto strong { font-size: 17px; letter-spacing: -0.01em; }
.projecao--outros .linha__nome { font-weight: var(--weight-medium); color: var(--text-secondary); }

/* a régua: 0 a 100%, com o meio marcado (50% é o que decide um turno) */
.regua { position: relative; display: block; height: 18px; }
.regua::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: var(--radius-pill); background: #e3e3e3; }
.regua i { position: absolute; display: block; }
.regua__contado { left: 0; top: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--black); transition: width var(--duration-slow) var(--ease-standard); }
.regua__meio { left: 50%; top: 2px; width: 1px; height: 14px; background: rgb(0 0 0 / .28); }
.regua__intervalo { top: 1px; height: 16px; min-width: 6px; border-radius: 5px; background: var(--yellow); box-shadow: 0 0 0 1.5px var(--white); transition: left var(--duration-slow) var(--ease-standard), width var(--duration-slow) var(--ease-standard); }
.regua__estimativa { top: -1px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--black); transition: left var(--duration-slow) var(--ease-standard); }

/* a legenda vem antes da lista, no mesmo desenho da régua */
.chave { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 2px 0 var(--space-2); font-size: 13px; color: var(--text-secondary); }
.chave li { display: flex; align-items: center; gap: 8px; }
.chave i { display: block; flex: none; }
.chave__contado { width: 18px; height: 6px; border-radius: var(--radius-pill); background: var(--black); }
.chave__intervalo { width: 26px; height: 12px; border-radius: 4px; background: var(--yellow); }
.chave__estimativa { width: 3px; height: 14px; border-radius: 2px; background: var(--black); }

@media (max-width: 1199px) {
  .projecao { grid-template-columns: 46px 150px 132px minmax(0, 1fr) 138px; gap: 10px 16px; padding-right: 20px; }
}
@media (max-width: 899px) {
  .faixa--clara { padding: 0 0 40px; }
  /* celular: nome e chance em cima, a régua na largura toda, o número projetado embaixo */
  .projecao { grid-template-columns: 37px minmax(0, 1fr) auto; grid-template-areas: 'foto quem chance' 'regua regua regua' 'valor valor valor'; padding: 12px 16px 14px 12px; border-radius: 24px; gap: 10px 12px; }
  .projecao .retrato { grid-area: foto; height: 52px; }
  .projecao__quem { grid-area: quem; }
  .projecao__chance { grid-area: chance; align-items: flex-end; text-align: right; }
  .projecao__regua { grid-area: regua; }
  .projecao__valor { grid-area: valor; flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; }
  .projecao--outros { grid-template-areas: 'quem quem chance' 'regua regua regua' 'valor valor valor'; }
  .projecao--outros .projecao__quem { grid-column: auto; }
  .projecao__valor strong, .projecao__chance strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .regua i { transition: none; } }

/* modo TV › cena da projeção (?modo=tv&cena=projecao): aviso, crédito, urnas e horário à esquerda; candidatos à direita */
.cena--projecao { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 40px; }
.cena--projecao .projecao__aviso { margin-top: auto; font-size: 13px; }
.cena--projecao .projecao__aviso strong { display: block; margin-top: 4px; }
.cena__dado { font-size: 14px; color: var(--text-secondary); line-height: 1.35; }
.cena__dado strong { display: block; font-size: 24px; font-weight: var(--weight-black); letter-spacing: -0.02em; color: var(--black); }
.cena--projecao .projecao { grid-template-columns: 52px 200px 160px minmax(0, 1fr) 150px; padding-block: 16px; }
.cena--projecao .projecao .retrato { height: 72px; }

/* antes da primeira urna: a candidatura existe, o resultado não */
.linha--previa .linha__valor strong { color: var(--text-secondary); font-weight: var(--weight-bold); }