/* Paleta da rádio desde 08/10/2026 (ordem do Erlandson: "use essa paleta no
   site e para tudo da rádio"): azul escuro #1C1599, verde neon #FD6301,
   laranja neon #FD6301. A antiga (manual de marca) fica comentada para voltar:
   --azul #004F7D · --azul-claro #0367A1 · --laranja #F58634 · --amarelo #FBD729 · --magenta #EE1B84 */
:root {
  --azul: #1C1599;
  --azul-claro: #1C1599;
  --laranja: #FD6301;
  --amarelo: #FD6301;   /* 14/10: paleta = azul neon, laranja neon e branco (o verde saiu) */
  --magenta: #FD6301;
  --preto: #231F20;
  --cinza-fundo: #F4F6F8;
  --cinza-borda: #E1E6EA;
  --branco: #FFFFFF;
  --player-altura: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Open Sans', sans-serif;
  color: var(--preto);
  background: var(--cinza-fundo);
  padding-bottom: var(--player-altura);
  line-height: 1.5;
}
a { color: var(--azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }
/* NÃO PÔR `height: auto` AQUI. Tentei em 05/08/2026 e derrubei o layout do site
   inteiro: atributo HTML é só uma dica de apresentação e perde de qualquer regra
   CSS, então `height: auto` atropelou o `height="46"` do logo do topo e o
   `height="34"` do 96.5 no player. Sem width no CSS, os dois foram para o
   tamanho natural limitado por `max-width: 100%` — o logo tomou a largura da
   tela e o 96.5 virou uma mancha em cima das notícias. O Erlandson viu no ar:
   "Errou aí". O `height: auto` que as fotos do corpo precisam está com escopo
   fechado em .materia-figura/.materia-corpo, mais abaixo. */
img { max-width: 100%; }
.mini { font-size: .8rem; color: #667; }

/* ── Masthead ── */
.masthead { background: var(--branco); border-bottom: 3px solid var(--azul); position: sticky; top: 0; z-index: 50; }
.masthead-inner { max-width: 1360px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 16px; flex-wrap: wrap; }
.marca img { display: block; }
.menu-btn { display: none; margin-left: auto; font-size: 1.4rem; background: none; border: none; cursor: pointer; color: var(--azul); }
.nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.nav a { color: var(--preto); font-weight: 600; font-size: .9rem; padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--azul); border-bottom-color: var(--laranja); text-decoration: none; }
.nav-pinga { color: var(--magenta) !important; }

/* A faixa azul rola sozinha. Antes ela era uma barra com scroll horizontal, e
   no celular só cabia o tempo e o dólar — euro, bitcoin e café existiam mas
   ninguém achava, porque ninguém arrasta uma barra fina de 5px de altura.
   Rolando devagar, toda a informação passa pelos olhos sem esforço. */
.ticker { background: var(--azul); color: var(--branco); overflow: hidden; }
.ticker-fita { display: flex; width: max-content; animation: ticker-anda 60s linear infinite; }
.ticker-inner { display: flex; gap: 22px; padding: 5px 11px; font-size: .82rem; white-space: nowrap; }
.ticker strong { color: var(--amarelo); }
.ticker a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.55); }
.ticker-live strong { color: var(--branco); }
/* deixa ler com calma: parada ao passar o mouse ou ao tocar */
.ticker:hover .ticker-fita, .ticker:active .ticker-fita { animation-play-state: paused; }
@keyframes ticker-anda { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* quem pede menos movimento no sistema recebe a faixa parada, sem perder conteúdo */
@media (prefers-reduced-motion: reduce) {
  .ticker-fita { animation: none; }
  .ticker-inner[aria-hidden="true"] { display: none; }
  .ticker-fita { width: 100%; overflow-x: auto; scrollbar-width: none; }
}

/* ── Layout ── */
.conteudo { max-width: 1360px; margin: 0 auto; padding: 20px 16px; }
.grade-principal { display: grid; grid-template-columns: 1fr 300px; gap: 28px; margin-top: 24px; }
.lateral { display: flex; flex-direction: column; gap: 16px; }

/* ── Destaque + últimas ── */
/* .destaque não é mais um grid de duas colunas: o carrossel abre a coluna
   principal e as "Últimas notícias" foram para a lateral, junto da enquete
   (pedido do Erlandson em 05/08/2026 — "alinhada com a enquete, não mais
   larga"). Enquanto as duas dividiam uma linha de grid, a lista mais alta
   deixava um buraco branco embaixo do carrossel. A regra fica: coluna
   principal e lateral são independentes, cada uma termina onde acaba. */
.destaque { display: block; }
.ultimas-lista .ultima-item:first-of-type { padding-top: 4px; }
.ultima-item { display: block; padding: 9px 0; border-bottom: 1px solid var(--cinza-borda); color: var(--preto); font-weight: 600; font-size: .9rem; }
.ultima-item:last-child { border-bottom: none; }
.ultima-item .chapeu { display: block; margin-bottom: 2px; }

/* ── Cards ── */
.card { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 79, 125, .12); }
.card-link { color: inherit; display: block; height: 100%; }
.card-link:hover { text-decoration: none; }
/* A caixa do card é 16:9. Foto em pé ou quadrada sobra em altura e precisa ser
   recortada — e recortar pelo CENTRO come justamente o topo, que é onde está a
   cabeça de quem foi fotografado. Em foto 16:9 (a maioria) não há sobra, então
   esta linha não muda nada.

   Era 25% e AINDA decepava: o Erlandson mostrou em 09/08/2026 o card do
   Cleitinho, uma arte 4:5 (1620x2025), com a cabeça de um dos dois cortada
   rente. Quanto mais em pé a imagem, maior a sobra e mais fundo o 25% corta —
   ali sobravam 1114px de altura, e 25% deles já passavam da testa. A 12% o
   rosto sobra com folga, e em foto deitada a diferença é imperceptível. */
.card-img { aspect-ratio: 16/9; background-size: cover; background-position: center 12%; background-color: var(--cinza-borda); }
.card-corpo { padding: 12px 14px; }
.card h3 { font-size: 1rem; line-height: 1.3; margin: 6px 0; }
.card-grande h3 { font-size: 1.5rem; }
.card-grande .card-img { aspect-ratio: 16/9; }
.linha-fina { font-size: .85rem; color: #556; }
.card-meta { font-size: .75rem; color: #778; }

/* 3 COLUNAS FIXAS, não auto-fill.
   Com auto-fill o número de colunas mudava com a largura da tela, então era
   impossível saber quantas matérias buscar para fechar a linha — e sobrava
   buraco branco no fim (4 matérias em 3 colunas deixam 2 vãos, que foi o que o
   Erlandson viu em 05/08/2026). Colunas fixas por faixa de tela deixam o
   servidor mandar sempre um MÚLTIPLO de 3, e a linha fecha certa. */
.cards-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .cards-linha { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-linha { grid-template-columns: 1fr; } }
.cards-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }

/* chapéus por editoria — texto branco nos azuis/magenta, preto no laranja/amarelo */
.chapeu { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 4px; background: var(--azul); color: var(--branco); }
.chapeu-esporte { background: var(--verde-esporte); }
.chapeu-entretenimento { background: var(--azul-entret); }
.chapeu-cotidiano { background: var(--vermelho-jorn); }
.chapeu-memoria { background: var(--vermelho-jorn); }
.chapeu-pinga-fogo { background: var(--laranja); color: var(--branco); }
.chapeu-obituario { background: var(--vermelho-jorn); }

.secao-titulo { font-size: 1.15rem; margin: 26px 0 12px; padding-left: 10px; border-left: 5px solid var(--azul); }
.secao-titulo a { color: var(--preto); }
.secao-esporte { border-left-color: var(--azul-claro); }
.secao-entretenimento { border-left-color: var(--magenta); }
.secao-cotidiano { border-left-color: var(--laranja); }
.secao-memoria { border-left-color: var(--amarelo); }
.bloco-pinga .secao-titulo, .bloco-pinga h2 { border-left-color: var(--magenta); }

/* ── Página de matéria ── */
.materia { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 26px; max-width: 860px; margin: 0 auto; }
.materia h1 { font-size: 1.8rem; line-height: 1.25; margin: 10px 0; }
.materia-linha-fina { font-size: 1.05rem; color: #445; margin-bottom: 10px; }
.materia-meta { font-size: .85rem; color: #667; border-bottom: 1px solid var(--cinza-borda); padding-bottom: 12px; margin-bottom: 12px; }
/* `height: auto` com ESCOPO FECHADO nas fotos da matéria. Só aqui é que o
   src/lib/dimensoes.js injeta width E height juntos, e sem isto o `width: 100%`
   ao lado deixaria a altura presa no atributo — uma foto de 960x1280 sairia
   esticada em 320x1280. Foi a tentativa de fazer isto no `img` global que
   derrubou os logos do topo e do player em 05/08/2026 (ver o comentário lá).
   Fora daqui, quem declara só `height` continua mandando na própria altura. */
.materia-figura img, .materia-video video { width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
.materia-corpo img, .materia-grafico img { height: auto; }
.materia-corpo { font-size: 1.17rem; line-height: 1.75; margin: 14px 0; }
/* Justificado sem rio de espaco em branco.
   hyphens:auto so funciona porque o <html> declara lang="pt-BR": sem
   hifenizacao, coluna estreita justificada abre buracos entre as palavras.
   overflow-wrap impede que uma URL longa, que o navegador nao sabe cortar,
   empurre a linha inteira e estique os espacos da anterior. */
.materia-corpo p,
.materia-linha-fina {
  /* Alinhado a esquerda, nao justificado: justificar sem hifenizacao garantida
     abre rio de espaco branco, e a hifenizacao depende de o navegador ter o
     dicionario pt-BR, o que nao da para assumir. E o que G1, Folha e UOL fazem.
     Ordem do Erlandson em 02/08 ("ao justificar nao deixe esses espacos"). */
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}
.materia-corpo p { margin: 15px 0; }

/* Listas do corpo: o reset global zera o padding e as bolinhas ficavam
   penduradas fora da coluna do texto (ordem do Erlandson em 10/08: marcador
   alinhado com a cabeca do texto, nunca a esquerda da margem). */
.materia-corpo ul, .materia-corpo ol { margin: 15px 0; padding-left: 1.5em; }
.materia-corpo li { margin: 8px 0; }
.materia-corpo li::marker { color: var(--azul); }

/* Endereco do portal em destaque, sozinho na linha */
.materia-corpo p.endereco-portal {
  text-align: center;
  font-size: 1.08rem;
  letter-spacing: .3px;
  margin: 10px 0 18px;
}
.materia-corpo strong { color: #123a5c; }

.compartilhar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; font-size: .85rem; }
.compartilhar a, .btn-copiar { padding: 7px 14px; border-radius: 20px; font-weight: 700; font-size: .82rem; border: none; cursor: pointer; color: var(--branco); text-decoration: none; }
.btn-zap { background: #25D366; }
.btn-face { background: #1877F2; }
.btn-copiar { background: var(--azul); }
.compartilhar a:hover { text-decoration: none; opacity: .9; }

.reacoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0; padding: 12px; background: var(--cinza-fundo); border-radius: 10px; font-size: .88rem; }
.reacao-btn { border: 1px solid var(--cinza-borda); background: var(--branco); border-radius: 18px; padding: 5px 12px; cursor: pointer; font-size: .95rem; }
.reacao-btn:hover, .reacao-btn.ativa { border-color: var(--azul); background: #E8F2F9; }

/* ── Comentários ── */
.comentarios { max-width: 860px; margin: 22px auto; }
.form-comentario, .form-ouvidoria { display: flex; flex-direction: column; gap: 10px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.form-comentario input, .form-comentario textarea, .form-ouvidoria input, .form-ouvidoria textarea { padding: 10px; border: 1px solid var(--cinza-borda); border-radius: 8px; font: inherit; }
.form-comentario button, .form-ouvidoria button { align-self: flex-start; background: var(--azul); color: var(--branco); border: none; padding: 10px 22px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.form-comentario button:hover, .form-ouvidoria button:hover { background: var(--azul-claro); }
.hp { position: absolute !important; left: -9999px !important; height: 1px; }
.comentario { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.form-aviso { color: #187a3c; font-weight: 600; }
.aviso-ok { background: #E6F7EC; border: 1px solid #9ED8B2; color: #187a3c; padding: 14px; border-radius: 10px; margin: 14px 0; font-weight: 600; }
.form-ouvidoria label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }

/* ── Widgets laterais ── */
.widget { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 16px; }
.widget h3 { font-size: .95rem; margin-bottom: 8px; }
.widget h3 a { color: var(--preto); }
.widget-enquete .enquete-opcoes { display: flex; flex-direction: column; gap: 6px; }
.enquete-opcao { text-align: left; padding: 9px 12px; border: 1px solid var(--cinza-borda); background: var(--cinza-fundo); border-radius: 8px; cursor: pointer; font: inherit; font-size: .88rem; }
.enquete-opcao:hover { border-color: var(--azul); }
.enquete-barra { background: var(--cinza-fundo); border-radius: 6px; overflow: hidden; margin: 4px 0; position: relative; height: 26px; }
.enquete-barra-fill { background: var(--azul); height: 100%; }
.enquete-barra span { position: absolute; left: 8px; top: 3px; font-size: .78rem; font-weight: 600; }
.tempo-grau { font-size: 1.5rem; font-weight: 800; color: var(--azul); }
.widget-radio { text-align: center; background: var(--azul); color: var(--branco); }
.widget-radio p { font-size: .85rem; margin-top: 8px; }
.obituario-nome { font-size: .88rem; padding: 4px 0; border-bottom: 1px dashed var(--cinza-borda); }

/* ── Páginas de serviço ── */
.pagina-titulo { font-size: 1.6rem; margin: 6px 0 14px; padding-left: 12px; border-left: 6px solid var(--azul); }
.vazio { background: var(--branco); border: 1px dashed var(--cinza-borda); border-radius: 12px; padding: 40px 24px; text-align: center; margin: 20px 0; }
.signos-grade, .cotacoes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.signo-card, .cotacao-card, .obituario-card { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 14px 16px; }
.signo-card h3 { margin-bottom: 6px; }
.signo-card p { font-size: .9rem; }
.cotacao-valor { display: block; font-size: 1.4rem; font-weight: 800; color: var(--azul); margin: 4px 0; }
.cotacao-var.alta { color: #187a3c; }
.cotacao-var.baixa { color: #c0263a; }
.cotacao-cafe { border-top: 4px solid var(--laranja); }
.tempo-destaque { display: flex; align-items: center; gap: 18px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 20px; }
.tempo-grau-grande { font-size: 3rem; font-weight: 800; color: var(--azul); }
.tempo-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.tempo-dia { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tempo-emoji { font-size: 1.6rem; }
.obituario-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 720px; }
.pinga-cabecalho { background: var(--laranja); color: var(--branco); border-radius: 12px; padding: 24px; margin-bottom: 18px; }
.pinga-cabecalho .pagina-titulo { border-left-color: var(--amarelo); color: var(--branco); margin-bottom: 6px; }
.paginacao { display: flex; justify-content: space-between; margin: 20px 0; font-weight: 700; }

/* ── Player fixo ── */
.player { position: fixed; bottom: 0; left: 0; right: 0; height: var(--player-altura); background: var(--azul); color: var(--branco); display: flex; align-items: center; gap: 14px; padding: 0 18px; z-index: 100; box-shadow: 0 -3px 14px rgba(0, 0, 0, .3); }
.play-btn { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.05rem; background: var(--laranja); color: var(--preto); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.play-btn.tocando { background: var(--magenta); color: var(--branco); }
.player-info { display: flex; flex-direction: column; line-height: 1.2; }
.aovivo { color: #FF5A5A; font-size: .7rem; font-weight: 800; letter-spacing: 1px; }
.player-nome { font-size: .9rem; font-weight: 700; }

/* ── Rodapé ── */
.rodape { background: var(--azul); color: var(--branco); margin-top: 40px; }
.rodape-inner { max-width: 1360px; margin: 0 auto; padding: 30px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.rodape a { display: block; color: #CFE3F0; font-size: .88rem; padding: 3px 0; }
.rodape h4 { color: var(--amarelo); margin-bottom: 8px; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; }
.rodape p { font-size: .85rem; margin-top: 8px; }
.selo80 { margin-top: 10px; }

/* ── Mobile ── */
@media (max-width: 860px) {
  .grade-principal, .destaque { grid-template-columns: 1fr; }
  .materia { padding: 18px; }
  .materia h1 { font-size: 1.4rem; }
}

/* O MENU troca de forma antes do conteúdo, e por um motivo medido: Jornalismo
   + Pinga Fogo + Esporte + Entretenimento + Programação + Ouvidoria + Anuncie,
   ao lado da logo, só cabem em uma linha a partir de ~1000px. Enquanto o
   hambúrguer só entrava aos 860px havia uma faixa cega de 861 a 990px em que os
   itens eram espremidos, o "▾" caía para a linha de baixo e a barra subia por
   cima da logo. Achado pelo Erlandson em 03/08/2026. */
@media (max-width: 1024px) {
  .menu-btn { display: block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; }
  .nav.aberto { display: flex; }
  .nav a { padding: 8px 4px; width: 100%; border-bottom: 1px solid var(--cinza-borda); }
}
.destaque-sozinho { grid-template-columns: 1fr; }

/* ── Anuncie ── */
.nav-anuncie { background: var(--laranja); color: var(--branco) !important; padding: 5px 12px !important; border-radius: 16px; border-bottom: none !important; }
.nav-anuncie:hover { opacity: .9; }
.anuncie-hero { background: var(--azul); color: var(--branco); border-radius: 12px; padding: 28px; margin-bottom: 18px; }
.anuncie-hero h1 { margin-bottom: 8px; }
.anuncie-grade { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; }
.anuncie-motivos { display: flex; flex-direction: column; gap: 12px; }
.form-anuncie h2 { margin-bottom: 4px; }
.widget-anuncie { border-top: 4px solid var(--laranja); text-align: center; }
.btn-anuncie { display: inline-block; margin-top: 8px; background: var(--laranja); color: var(--branco); font-weight: 800; padding: 9px 20px; border-radius: 20px; }
.btn-anuncie:hover { text-decoration: none; opacity: .9; }
@media (max-width: 860px) { .anuncie-grade { grid-template-columns: 1fr; } }

/* ── Convite ouça ao vivo ── */
.convite-aovivo { position: absolute; bottom: calc(var(--player-altura) + 10px); left: 12px; max-width: 320px; background: var(--branco); color: var(--preto); border: 2px solid var(--magenta); border-radius: 12px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 6px; animation: subir .4s ease; }
@keyframes subir { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.convite-fechar { position: absolute; top: 6px; right: 8px; background: none; border: none; cursor: pointer; font-size: .9rem; color: #667; }
.convite-play { background: var(--magenta); color: var(--branco); border: none; border-radius: 20px; padding: 9px 18px; font-weight: 800; cursor: pointer; font-size: .95rem; }
.convite-play:hover { opacity: .9; }
.convite-aovivo span { font-size: .85rem; }

/* No celular o convite virava uma placa: 320px de largura numa tela de 390, e
   junto com o player tapava 204px dos 844 — um quarto do portal, exatamente em
   cima da primeira notícia (Erlandson, 05/08/2026: "está muito ruim o portal no
   celular"). Aqui ele deita numa faixa fina de uma linha, o convite continua
   fazendo o serviço dele — arrancar o clique que o navegador exige para liberar
   o áudio — e devolve 80px de leitura. */
@media (max-width: 700px) {
  .convite-aovivo { flex-direction: row; align-items: center; justify-content: space-between;
    left: 8px; right: 8px; max-width: none; padding: 8px 34px 8px 12px; gap: 10px; }
  /* "Clique e continue navegando com a rádio tocando" é o que o botão ▶ já diz. */
  .convite-aovivo span { display: none; }
  .convite-aovivo strong { font-size: .92rem; }
  .convite-play { padding: 7px 14px; font-size: .88rem; white-space: nowrap; }
  /* Com o menu aberto o convite cobria o último item da lista, que é o
     📢 Anuncie. O menu volta a aparecer inteiro; o convite reaparece ao fechar,
     e a marca de "já vi" continua sendo o sessionStorage, não isto. */
  body.menu-aberto .convite-aovivo { display: none; }
}

/* ── Programação ── */
.programa-lista { display: flex; flex-direction: column; gap: 8px; }
.programa-item { display: flex; gap: 14px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 10px 14px; }
.programa-hora { font-weight: 800; color: var(--azul); min-width: 88px; }

/* ── Assinatura da rádio nas matérias ── */
.assinatura-radio { font-size: .78rem; color: #778; }

/* rodapé: crédito centralizado em todas as páginas */
.rodape-dev { text-align: center; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.18); color: #CFE3F0; font-size: .85rem; }

/* capa institucional (sem foto real): destaque vira faixa fina, não um cartaz gigante */
.card-grande .capa-fallback { aspect-ratio: 21/6; background-size: contain; background-repeat: no-repeat; background-color: #F7F2E8; }

/* caixa de números dentro da matéria (Edição Extra style) */
.stats-materia { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.stats-materia div { background: var(--cinza-fundo); border-left: 4px solid var(--azul); border-radius: 8px; padding: 10px 12px; }
.stats-materia strong { display: block; font-size: 1.3rem; color: var(--azul); }
.stats-materia span { font-size: .78rem; color: #556; }
.materia-corpo h2 { margin: 26px 0 8px; font-size: 1.45rem; padding-left: 12px; border-left: 5px solid var(--laranja); color: #14324f; }
.materia-linha-fina { font-size: 1.12rem; }
.materia-corpo blockquote { border-left: 4px solid var(--magenta); margin: 14px 0; padding: 10px 16px; background: #FDF3F8; font-style: italic; border-radius: 0 8px 8px 0; }
.materia-corpo blockquote cite { font-style: normal; font-size: .78rem; color: #778; }
.programa-hora { display: flex; flex-direction: column; line-height: 1.2; }
.programa-ate { font-size: .75rem; font-weight: 600; color: #778; }

/* rodapé: tudo em branco sobre o azul (o cinza .mini sumia) */
.rodape .mini, .rodape p { color: #FFFFFF; }
.rodape-dev { color: #FFFFFF; display: flex; flex-direction: column; gap: 2px; }
.rodape-direcao { font-weight: 700; }

/* hidden SEMPRE esconde — display:flex de widgets não pode anular o atributo */
[hidden] { display: none !important; }

/* barra de enquete: preenchimento claro + texto escuro = legível em qualquer percentual
   (regra da casa: texto claro em fundo escuro, texto escuro em fundo claro) */
.enquete-barra { background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); }
.enquete-barra-fill { background: #BFDCEF; }
.enquete-barra span { color: var(--preto); }

/* ── Menu de um andar só, com grupos suspensos ── */
.masthead-inner { flex-wrap: nowrap; }
.nav { flex-wrap: nowrap; }
.nav-grupo { position: relative; }
/* nowrap nos rótulos: sem isto o "▾" desgruda e cai sozinho para a linha de
   baixo assim que a barra aperta, que foi como o menu se desmontou */
.nav > a, .nav-grupo > a { white-space: nowrap; }
.nav-grupo > a { display: inline-block; }
.nav-sub { position: absolute; top: 100%; left: 0; min-width: 190px; background: var(--branco); border: 1px solid var(--cinza-borda); border-top: 3px solid var(--azul); border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(0, 79, 125, .18); padding: 6px 0; display: none; z-index: 60; }
.nav-grupo:hover .nav-sub, .nav-grupo:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; padding: 8px 16px; border-bottom: none; white-space: nowrap; }
.nav-sub a:hover { background: var(--cinza-fundo); color: var(--azul); border-bottom: none; }

@media (max-width: 1024px) {
  .masthead-inner { flex-wrap: wrap; }
  /* no celular o menu hambúrguer mostra tudo aberto, em lista */
  /* O MENU ROLA POR CONTA PRÓPRIA, e sem isto seis itens eram INALCANÇÁVEIS.
     O .masthead é `position: sticky; top: 0`, e elemento sticky mais alto que a
     tela não rola junto: ele gruda no topo e o que passa da altura da viewport
     fica fora do alcance para sempre. Com as 30 linhas abertas o cabeçalho
     passava de 1200px numa tela de 844 — Programação, a Ouvidoria inteira e o
     Anuncie não podiam ser clicados de jeito nenhum. Medido em 05/08/2026,
     depois do "está faltando itens aqui" do Erlandson: rolando a página até o
     fim, o "📢 Anuncie" ficava em y=1204 com o player começando em 780.
     `dvh` e não `vh` porque no iPhone a barra do Safari entra e sai, e `vh`
     congela na tela cheia — o menu ficaria alto demais justo quando a barra
     aparece. O `vh` fica como reserva para navegador que não conheça `dvh`. */
  .nav.aberto {
    /* `nowrap` é obrigatório junto do max-height abaixo. Com `wrap` (que era o
       valor herdado do desktop), coluna + altura limitada faz o flex abrir uma
       NOVA COLUNA em vez de deixar o overflow rolar: na primeira tentativa deste
       conserto os itens foram para x=376 e x=750 numa tela de 390 — duas colunas
       do menu inteiras fora da tela, pior do que o problema original. */
    flex-wrap: nowrap; flex-direction: column;
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);   /* logo + fita + player + folga */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;       /* chegando no fim, não arrasta a página atrás */
  }
  .nav-grupo { width: 100%; }
  .nav-sub { display: block; position: static; border: none; box-shadow: none; padding: 0 0 0 14px; }
  /* O CABEÇALHO DE CADA GRUPO APARECE, e como cabeçalho. Ele estava com
     `display: none` aqui, e o Erlandson viu o estrago em 05/08/2026 ("está
     faltando itens aqui"): sem "Jornalismo", "Esporte", "Entretenimento" e
     "Ouvidoria", o menu do celular virava uma lista rasa de 26 itens sem
     hierarquia — "Todas as notícias" aparecia solto no meio, quando é *Todas as
     notícias do Esporte*. Nenhum link havia sido removido do HTML; o CSS tinha
     escondido justamente os rótulos que davam sentido ao resto.
     Vira faixa de seção: fundo cinza, caixa alta, azul da marca. Assim o item
     repetido logo abaixo (o "Jornalismo" que leva à listagem completa da
     editoria) lê como conteúdo da seção, e não como repetição sem motivo. */
  .nav-grupo > a {
    display: block; margin-top: 6px;
    background: var(--cinza-fundo); color: var(--azul);
    font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    padding: 7px 10px; border-bottom: 1px solid var(--cinza-borda);
  }
  /* O "▾" só faz sentido onde existe hover para abrir. Aberto em lista, ele
     promete um clique que não acontece. */
  .nav-seta { display: none; }
  /* O Pinga Fogo existe duas vezes no menu: dentro de Jornalismo e solto na
     barra, para ficar em evidência no desktop. Aberto em lista, os dois ficam
     um embaixo do outro — some com a cópia de dentro do submenu. */
  .nav-sub .nav-pinga { display: none; }
}
.nav-sub-divisor { border: none; border-top: 1px solid var(--cinza-borda); margin: 5px 0; }

/* ── Ouvidoria: denúncia, lâmpada e telefones ── */
.check-anonimo { flex-direction: row !important; gap: 10px !important; align-items: flex-start; background: var(--cinza-fundo); border-radius: 8px; padding: 12px; cursor: pointer; }
.check-anonimo input { width: 18px; height: 18px; margin-top: 2px; }
.protocolo { font-size: 1.3rem; letter-spacing: 1px; color: var(--azul); }
.telefones-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.tel { display: block; font-size: 1.6rem; font-weight: 800; color: var(--azul); margin-top: 4px; }
.tel:hover { text-decoration: none; color: var(--azul-claro); }
.tel-radio { color: var(--amarelo); }
.boletim { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 18px; margin-bottom: 20px; }
.boletim .secao-titulo { margin-top: 0; }
.boletim-texto p { margin: 10px 0; font-size: 1.02rem; }

/* ── Gráfico animado do boletim (SVG + CSS, sem JS: passa no CSP) ── */
.materia-grafico { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 14px; margin: 14px 0; }
.materia-grafico svg { width: 100%; height: auto; }
.materia-grafico .gtitulo { font: 700 15px sans-serif; fill: var(--preto); }
.materia-grafico .gnome { font: 600 13px sans-serif; fill: #445; }
.materia-grafico .gvalor { font: 700 12px sans-serif; }
.materia-grafico .gbar { transform-origin: left center; transform: scaleX(0); animation: crescerBarra 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.materia-grafico .gbar:nth-of-type(1) { animation-delay: .05s } .materia-grafico .gbar:nth-of-type(2) { animation-delay: .15s }
.materia-grafico .gbar:nth-of-type(3) { animation-delay: .25s } .materia-grafico .gbar:nth-of-type(4) { animation-delay: .35s }
.materia-grafico .gbar:nth-of-type(5) { animation-delay: .45s } .materia-grafico .gbar:nth-of-type(6) { animation-delay: .55s }
.materia-grafico .gbar:nth-of-type(7) { animation-delay: .65s } .materia-grafico .gbar:nth-of-type(8) { animation-delay: .75s }
.materia-grafico .gbar:nth-of-type(9) { animation-delay: .85s } .materia-grafico .gbar:nth-of-type(10) { animation-delay: .95s }
.materia-grafico .gbar:nth-of-type(11) { animation-delay: 1.05s }
@keyframes crescerBarra { to { transform: scaleX(1); } }

/* Painel de números do boletim de economia.
   Era um JPG gerado em Python: bonito, e completamente parado. Boletim de
   economia é feito de número, e número parado numa foto não conta história.
   Em HTML os valores sobem até o total quando o leitor chega neles, e ainda
   sai de graça o que a imagem não dava: texto selecionável, leitor de tela e
   nada de arquivo novo em /midia a cada dia. */
.painel-num { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.pn-item { background: var(--azul); color: var(--branco);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.pn-rot { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.pn-val { font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--amarelo);
  font-variant-numeric: tabular-nums; }
.pn-sub { font-size: .7rem; opacity: .8; }
@media (max-width: 420px) { .painel-num { grid-template-columns: 1fr; } }
/* Quem pede menos movimento recebe o número final direto, nunca um zero. */
@media (prefers-reduced-motion: reduce) { .pn-val { transition: none !important; } }

/* editoria economia */
.chapeu-economia { background: var(--azul); }
.secao-economia { border-left-color: #0367A1; }

/* rodapé mega (estilo grandes portais) */
.rodape-mega { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.rodape-social a { display: inline-block; margin-right: 10px; }

/* Jornalismo é VERMELHO na linguagem visual da Cultura (moldura oficial VERMELHO_FEED) */
.chapeu-jornalismo { background: var(--vermelho-jorn); }
.secao-jornalismo { border-left-color: #C90040; }
.foto-direcao { border-radius: 12px; max-width: 320px; width: 100%; }
.rodape-h4-espaco { margin-top: 14px; }

/* placar da enquete: texto + percentual em destaque, barra fininha embaixo (nada cortado) */
.enquete-resultado { margin: 9px 0; }
.enquete-res-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .86rem; }
.enquete-res-texto { color: var(--preto); }
.enquete-res-pct { color: var(--azul); font-size: 1rem; white-space: nowrap; }
.enquete-res-barra { height: 8px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); border-radius: 6px; overflow: hidden; margin-top: 3px; }
.enquete-res-fill { height: 100%; background: var(--azul); border-radius: 6px; transition: width .8s cubic-bezier(.2,.8,.2,1); }

/* ── Mercado Agro (gráficos) ── */
.agro-grade { display: grid; grid-template-columns: 180px 1fr 240px; gap: 18px; margin-top: 16px; }
.agro-menu h3, .agro-fechamentos h3 { font-size: .95rem; margin-bottom: 8px; }
.agro-item { display: block; padding: 10px 12px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 8px; margin-bottom: 6px; color: var(--preto); font-weight: 600; font-size: .88rem; }
.agro-item:hover { border-color: var(--azul-claro); text-decoration: none; }
.agro-item.ativo { background: #E3F0FA; border-color: var(--azul-claro); color: var(--azul); }
.agro-central { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 16px; }
.agro-titulo-grafico { font-weight: 800; color: var(--azul); border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 8px 14px; margin-bottom: 10px; display: inline-block; }
.agro-svg { width: 100%; height: auto; }
.agro-eixo { font: 600 11px sans-serif; fill: #778; }
.agro-area { fill: #E3F0FA; opacity: .8; }
.agro-linha { fill: none; stroke: var(--azul-claro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.agro-ponto { fill: var(--azul); }
.agro-fech { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 8px; margin-bottom: 6px; color: var(--preto); font-size: .85rem; }
.agro-fech strong { color: var(--azul); white-space: nowrap; }
.agro-fech:hover { border-color: var(--azul-claro); text-decoration: none; }
.agro-fech.ativo { background: var(--azul); color: var(--branco); }
.agro-fech.ativo strong { color: var(--amarelo); }
@media (max-width: 900px) { .agro-grade { grid-template-columns: 1fr; } }
.cotacao-brl { display: block; font-weight: 700; color: #0367A1; font-size: 1.05rem; }

/* ── Previsão hora a hora (abas + animações do gráfico) ── */
.tp-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.tp-cabecalho h3 { font-size: 1.05rem; }
.tp-abas { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-aba { border: 1.5px solid var(--cinza-borda); background: var(--branco); color: #556; border-radius: 20px; padding: 7px 15px; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; transition: all .15s; }
.tp-aba:hover { border-color: #99a; }
.tp-aba.ativa { color: #fff; }
.tp-linha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tpDesenha 1.2s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes tpDesenha { to { stroke-dashoffset: 0; } }
.tp-area { opacity: 0; animation: tpAparece .8s ease .5s forwards; }
.tp-fade { opacity: 0; animation: tpAparece .5s ease forwards; }
@keyframes tpAparece { to { opacity: 1; } }

/* marca d'água animada da rádio nos gráficos */
.marca-grafico { animation: marcaPulsa 4s ease-in-out infinite; }
@keyframes marcaPulsa {
  0%, 100% { opacity: .5; transform: translateY(0); }
  50% { opacity: .95; transform: translateY(-4px); }
}

.rodape-multi { font-size: .82rem; color: rgba(255,255,255,.75); max-width: 240px; }

.sat-aba.ativa { background: #004F7D; border-color: #004F7D; color: #fff; }

/* ── Central de Futebol ── */
.fut-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fut-time { background: var(--branco); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fut-time h3 { margin: 0 0 6px; }
.fut-rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #789; margin: 8px 0 2px; }
.fut-placar b { font-size: 1.05rem; }
.fut-card { background: var(--branco); border-radius: 14px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.1); margin-bottom: 16px; }
.fut-card h2 { margin: 0 0 8px; }
.fut-sub { margin: 14px 0 8px; font-size: 1rem; }
.fut-jogos { display: grid; gap: 6px; }
.fut-jogo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 8px 10px; background: #f6f8fa; border-radius: 8px; }
.fut-eq { display: flex; align-items: center; gap: 7px; font-weight: 600; min-width: 0; }
.fut-eq img { width: 22px; height: 22px; object-fit: contain; }
.fut-eq-dir { justify-content: flex-end; text-align: right; }
.fut-x { color: #345; font-size: .9rem; white-space: nowrap; }
.fut-tabela { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.fut-tabela th { text-align: left; font-size: .75rem; text-transform: uppercase; color: #789; padding: 6px 8px; border-bottom: 2px solid #e8ecf0; }
.fut-tabela td { padding: 7px 8px; border-bottom: 1px solid #eef1f4; }
.fut-tabela .fut-time-col { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fut-tabela .fut-time-col img { width: 20px; height: 20px; object-fit: contain; }
.fut-pos { position: relative; padding-left: 14px !important; font-weight: 700; }
.fut-faixa { position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; }
.fut-ultimos { white-space: nowrap; }
.fut-bola { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 3px; }
.fut-v { background: #2e9e5b; } .fut-e { background: #b9c2cc; } .fut-d { background: #d64545; }
.fut-mineiro { border-left: 5px solid #1B7A43; }

.materia-video { margin: 18px 0; }
.materia-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 10px; }

.aviso-erro { background: #fdecea; border-left: 4px solid #d64545; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.form-ouvidoria select { width: 100%; padding: 10px; border: 1px solid var(--cinza-borda, #ccd); border-radius: 8px; font: inherit; background: #fff; }

.widget-piada { background: #fff8e1; border-left: 4px solid var(--amarelo, #FBD729); }

/* ── Piadas do Dia com votação ── */
.piadas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.piada-card { background: #fff8e1; border-radius: 14px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 10px; }
.piada-num { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #a07800; }
.piada-texto { font-size: 1.12rem; line-height: 1.6; flex: 1; margin: 0; }
.piada-votar { align-self: flex-start; border: 2px solid #E8B60A; background: #FBD729; color: #4a3800; font: inherit; font-weight: 800; border-radius: 22px; padding: 9px 18px; cursor: pointer; transition: transform .12s; }
.piada-votar:hover { transform: scale(1.06); }
.piada-votar.votou { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.piada-campeas { background: var(--branco); border-radius: 14px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.piada-campeas li { margin: 10px 0; line-height: 1.55; }

/* ===== Imagens das matérias (v3 — 02/08/2026, decisão do Erlandson):
   SEM flutuação. Toda imagem grande, largura total, empilhada com o texto.
   Nada de buraco em branco nem painel cortado. ===== */
.materia-figura, .materia-figura img { width: 100%; }
.materia-figura { margin: 18px 0; }
.materia-figura figcaption,
.materia-corpo figcaption {
  font-size: .82rem; color: #667; margin-top: 6px;
  border-left: 3px solid var(--laranja); padding-left: 8px; line-height: 1.4;
}
.materia-corpo figure { float: none; width: 100%; margin: 22px 0; }
.materia-corpo figure img { width: 100%; border-radius: 10px; display: block; }
.materia-corpo > img, .materia-corpo p > img { width: 100%; border-radius: 10px; margin: 18px 0; }
.materia-corpo h2, .stats-materia, .materia-grafico, .materia-video, .reacoes { clear: both; }
.materia-corpo::after { content: ""; display: block; clear: both; }

/* Galeria de fotos de urna (ex.: matéria dos mais votados): miniaturas pequenas
   em grade, em vez de uma foto vertical gigante por bloco. Mira só as fotos de
   candidato (/midia/candidatos/), sem afetar as demais matérias. 05/10/2026. */
.materia-corpo figure.materia-figura:has(img[src*="/midia/candidatos/"]) {
  display: inline-block; width: 150px; margin: 6px; vertical-align: top;
}
.materia-corpo figure.materia-figura:has(img[src*="/midia/candidatos/"]) img {
  width: 100%; border-radius: 8px; margin: 0;
}
.materia-corpo figure.materia-figura:has(img[src*="/midia/candidatos/"]) figcaption {
  font-size: .72rem; border-left: none; padding-left: 0; margin-top: 4px; text-align: center;
}
@media (max-width: 480px) {
  .materia-corpo figure.materia-figura:has(img[src*="/midia/candidatos/"]) { width: 30%; margin: 1.5%; }
}

/* submenu de segundo nível (Esporte > Futebol > times) */
.nav-subgrupo { position: relative; }
.nav-subgrupo > a { display: block; padding: 8px 16px; white-space: nowrap; }
.nav-sub2 { display: none; position: absolute; left: 100%; top: -7px; min-width: 210px; background: var(--branco); border: 1px solid var(--cinza-borda); border-top: 3px solid var(--azul); border-radius: 0 10px 10px 10px; box-shadow: 0 10px 24px rgba(0, 79, 125, .18); padding: 6px 0; z-index: 61; }
.nav-subgrupo:hover .nav-sub2, .nav-subgrupo:focus-within .nav-sub2 { display: block; }
@media (max-width: 1024px) {
  .nav-sub2 { display: block; position: static; border: none; box-shadow: none; padding: 0 0 0 14px; }
}

.time-hero { background: var(--branco); border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.1); display: flex; gap: 20px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.time-escudo { width: 110px; height: 110px; object-fit: contain; }

/* ── Sistema de cores das máscaras (02/08): esporte VERDE, jornalismo VERMELHO, entretenimento AZUL ── */
:root { --verde-esporte: #1B7A43; --vermelho-jorn: #C1003D; --azul-entret: #00558B; }
.secao-esporte { border-left-color: var(--verde-esporte); }
.secao-jornalismo, .secao-cotidiano, .secao-memoria { border-left-color: var(--vermelho-jorn); }
.secao-entretenimento { border-left-color: var(--azul-entret); }
/* matéria: filetes de h2 e legenda acompanham a editoria */
.ed-esporte .materia-corpo h2, .ed-esporte .materia-figura figcaption, .ed-esporte .materia-corpo figcaption { border-left-color: var(--verde-esporte); }
.ed-esporte .materia-corpo h2 { color: #14502e; }
.ed-jornalismo .materia-corpo h2, .ed-cotidiano .materia-corpo h2, .ed-memoria .materia-corpo h2, .ed-obituario .materia-corpo h2,
.ed-jornalismo .materia-figura figcaption, .ed-cotidiano .materia-figura figcaption, .ed-memoria .materia-figura figcaption, .ed-obituario .materia-figura figcaption,
.ed-jornalismo .materia-corpo figcaption, .ed-cotidiano .materia-corpo figcaption, .ed-memoria .materia-corpo figcaption, .ed-obituario .materia-corpo figcaption { border-left-color: var(--vermelho-jorn); }
.ed-jornalismo .materia-corpo h2, .ed-cotidiano .materia-corpo h2, .ed-memoria .materia-corpo h2, .ed-obituario .materia-corpo h2 { color: #7c0a2e; }
.ed-entretenimento .materia-corpo h2, .ed-entretenimento .materia-figura figcaption, .ed-entretenimento .materia-corpo figcaption { border-left-color: var(--azul-entret); }
.ed-entretenimento .materia-corpo h2 { color: #003a5e; }

/* ===== Falas em destaque (13/08/2026, pedido do Frederico Mesquita na cobertura
   de Cruzeiro x Flamengo pela Libertadores): a citação do entrevistado sai do
   corpo corrido e ganha peso próprio.
   Entra no MESMO sistema do intertítulo e da legenda, com filete à esquerda na
   cor da editoria, para não virar um elemento estranho ao portal. O corpo é
   escrito em texto puro e o <blockquote> é gravado depois no corpo_html, porque
   textoParaHtml() escapa HTML de propósito. ===== */
.materia-corpo blockquote {
  margin: 24px 0; padding: 2px 0 2px 18px;
  border-left: 4px solid var(--laranja);
  font-size: 1.13rem; line-height: 1.55; font-weight: 600; color: #1e2530;
}
.materia-corpo blockquote p { margin: 0 0 10px; }
.materia-corpo blockquote p:last-child { margin-bottom: 0; }
.materia-corpo blockquote cite {
  display: block; margin-top: 8px; font-size: .84rem;
  font-weight: 600; font-style: normal; color: #667;
}
.ed-esporte .materia-corpo blockquote { border-left-color: var(--verde-esporte); }
.ed-jornalismo .materia-corpo blockquote, .ed-cotidiano .materia-corpo blockquote,
.ed-memoria .materia-corpo blockquote, .ed-obituario .materia-corpo blockquote { border-left-color: var(--vermelho-jorn); }
.ed-entretenimento .materia-corpo blockquote { border-left-color: var(--azul-entret); }
@media (max-width: 640px) { .materia-corpo blockquote { font-size: 1.06rem; padding-left: 14px; } }

/* central de futebol e páginas de time no clima verde */
.fut-card h2, .time-hero h1 { padding-left: 10px; border-left: 5px solid var(--verde-esporte); }
.fut-sub { color: #14502e; }

/* selo de privacidade: autodeclaração factual (sem cookies/rastreadores), não é certificação oficial */
.selo-privacidade { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 auto 6px; padding: 4px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: .8rem; font-weight: 700; color: #FFFFFF; background: rgba(255,255,255,.08); width: fit-content; }
.selo-privacidade:hover { background: rgba(255,255,255,.16); }
.selo-saiba { font-weight: 400; font-size: .72rem; color: #CFE3F0; text-decoration: underline; }

/* ── Vídeo do YouTube na matéria ──────────────────────────────────────────
   Formato pedido pelo Erlandson em 03/08, no modelo da Itatiaia: capa grande
   no meio do texto. É uma FACHADA: nada do Google carrega antes do clique,
   porque /privacidade promete que o portal não usa rastreadores de terceiros. */
.materia-video-yt { margin: 22px 0; }
.video-yt {
  display: block; position: relative; width: 100%; padding: 0; border: none;
  background: #0a1a2c; border-radius: 12px; overflow: hidden; cursor: pointer;
  aspect-ratio: 16/9; line-height: 0;
}
.video-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.video-yt:hover img { transform: scale(1.03); }

/* Prévia em movimento: trecho curto e mudo, servido do nosso domínio, rodando
   em loop no lugar da capa parada. Pedido do Erlandson em 17/08/2026. Continua
   sem rastreador — o player do YouTube só entra no clique. */
.video-yt-previa {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s; pointer-events: none;
}
.video-yt:hover .video-yt-previa { transform: scale(1.03); }

/* Quem pediu menos animação no sistema tem a prévia PAUSADA — e isso é feito no
   JS (public/js/video-yt.js), não aqui: CSS não pausa <video>. */

/* botão de play do YouTube, desenhado em CSS (nada vem de fora) */
.video-yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 60px; border-radius: 14px; background: rgba(0, 0, 0, .72);
  transition: background .2s, transform .2s; z-index: 2;
}
.video-yt-play::after {
  content: ''; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.video-yt:hover .video-yt-play { background: #FF0000; transform: translate(-50%, -50%) scale(1.06); }

/* Sem tarja de texto sobre a capa: a miniatura do YouTube JA traz o titulo
   embutido pelo veiculo. Escrever por cima da uma arte pronta e o erro que
   estragou o carrossel do Boletim — aqui o titulo vive na legenda de baixo. */
.materia-video-yt figcaption { margin-top: 8px; font-weight: 600; }

/* depois do clique, o player ocupa exatamente o mesmo espaço */
.video-yt-player { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.video-yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 560px) {
  .video-yt-play { width: 68px; height: 48px; }
  .video-yt-play::after { border-width: 10px 0 10px 17px; }
}

/* Variação escrita embaixo do gráfico do agro. O desenho dá a impressão; o
   número dá o fato — e foi a falta dele que deixou 1 centavo parecer desabamento. */
.agro-variacao { margin-top: 8px; font-size: .92rem; color: #445; }
.agro-sobe { color: #1B7A43; }
.agro-cai { color: #C1003D; }
.agro-estavel { color: #55606d; }

/* ── Carrossel de destaques da capa (05/08/2026) ────────────────────────────
   Ocupa a mesma coluna que o antigo card de destaque, então a lista de
   "Últimas notícias" ao lado continua no lugar, sem mexer no grid da home.
   Os slides ficam empilhados na mesma célula do grid e trocam por opacidade —
   sem deslocar layout e sem provocar reflow a cada 6 segundos. */
/* SEM min-height AQUI. Havia um `min-height: 320px` para reservar espaço
   enquanto a foto baixava, e ele deixava o celular feio: no iPhone a coluna
   útil é 358px (390 menos os 32 de padding do .conteudo), a foto 16:9 fica com
   201px, e os 119px que sobravam viravam um bloco de azul chapado embaixo do
   título — foi o que o Erlandson fotografou em 05/08/2026. No desktop a coluna
   passa de 570px, a foto já nasce com mais de 320, e o defeito nunca aparecia.
   O `aspect-ratio` do .carrossel-img abaixo JÁ reserva a altura antes do
   download, que era a única razão do min-height existir. */
.carrossel { position: relative; border-radius: 10px; overflow: hidden; background: var(--azul); }
/* A MOLDURA É 16:9 E NÃO NEGOCIA.
   Tentei antes esticar a imagem para acompanhar a altura da coluna de
   "Últimas notícias" ao lado — e o resultado foi a arte do Boletim de Economia
   cortada nas laterais: "Rádio Cultura" virou "ura" e o dólar ficou pela
   metade. A arte era 1280x720, perfeita; quem deixou de ser 16:9 foi a caixa,
   e aí o `cover` comeu as bordas para preencher a altura sobrando.
   Agora a caixa mantém a proporção da imagem e o grid não a estica
   (align-items: start em .destaque). Vale a mesma regra do carrossel do
   Instagram: arte pronta entra inteira. */
.carrossel-palco { display: grid; }
.carrossel-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .55s ease; }
.carrossel-slide.ativo { opacity: 1; visibility: visible; }
.carrossel-link { display: block; color: var(--branco); position: relative; }
.carrossel-link:hover { text-decoration: none; }
/* 12%, e não 25%, pelo mesmo motivo do .card-img acima: em imagem em pé o
   corte a 25% come a cabeça de quem foi fotografado. */
.carrossel-img { aspect-ratio: 16/9; background-image: var(--img); background-size: cover; background-position: center 12%; position: relative; overflow: hidden; }
/* SLIDE DE ARTE: a imagem aparece INTEIRA e o título sai de cima dela.
   A arte que nós geramos (capa do Boletim, cards) já traz logo, títulos e
   números desenhados; a manchete por cima tapa justamente a informação — no
   print de 05/08 ela cobria a inflação e o café. Aqui a imagem ocupa a parte
   de cima com `contain`, e o texto ganha faixa própria embaixo, no azul da
   marca. A altura total do slide não muda, então o carrossel não pula. */
/* ARTE QUADRADA: nem cortar, nem deixar duas tarjas azuis chapadas dos lados —
   a segunda tentativa ficou pior que a primeira, com a arte do Zé Humberto
   virando um selo perdido no meio do azul. A saída é a mesma que Spotify e
   YouTube usam: o FUNDO é a própria imagem, ampliada e desfocada, e a arte
   nítida fica inteira por cima. Preenche a moldura, não corta nada e a peça
   ganha a cor da própria arte em vez de um azul solto. */
.carrossel-slide.arte .carrossel-img { background: none; aspect-ratio: auto; height: 74%; }
.carrossel-slide.arte .carrossel-img::before,
.carrossel-slide.arte .carrossel-img::after { content: ""; position: absolute; inset: 0; }
.carrossel-slide.arte .carrossel-img::before {
  background-image: var(--img); background-size: cover; background-position: center;
  filter: blur(26px) brightness(.55) saturate(1.15); transform: scale(1.25); }
.carrossel-slide.arte .carrossel-img::after {
  background-image: var(--img); background-size: contain; background-repeat: no-repeat;
  background-position: center; }
.carrossel-slide.arte .carrossel-link { display: flex; flex-direction: column; height: 100%; }
.carrossel-slide.arte .carrossel-texto { position: static; flex: 1; display: flex; align-items: center; background: var(--azul); padding: 12px 20px; }
.carrossel-slide.arte .carrossel-texto h2 { font-size: 1.25rem; margin: 0; }
.carrossel-slide.arte .chapeu { display: none; }
/* o palco precisa de altura fixa para o slide de arte ter 100% de quê medir */
.carrossel-palco { aspect-ratio: 16/9; }
.carrossel-slide { height: 100%; }
.destaque { align-items: start; }

/* O texto entra por cima da foto, com um degradê que escurece só a metade de
   baixo: contraste suficiente para ler o título sem apagar a imagem. */
.carrossel-texto { position: absolute; inset: auto 0 0 0; padding: 20px 22px 18px;
  background: linear-gradient(to top, rgba(28,21,153,.94) 0%, rgba(28,21,153,.78) 45%, rgba(28,21,153,0) 100%); }
.carrossel-texto h2 { font-size: 1.55rem; line-height: 1.22; margin: 8px 0 6px; color: var(--branco); }
.carrossel-texto .linha-fina { color: rgba(255,255,255,.9); font-size: .93rem; margin: 0 0 4px; }
.carrossel-meta { font-size: .78rem; color: rgba(255,255,255,.72); }

/* Setas maiores a pedido do Erlandson (07/10/2026): 40px → 60px. */
.carrossel-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 60px; height: 60px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0,32,52,.6); color: #fff; font-size: 2.6rem; line-height: 1; padding-bottom: 4px;
  display: flex; align-items: center; justify-content: center; transition: background .15s; }
.carrossel-seta:hover { background: var(--azul); }
.carrossel-anterior { left: 10px; }
.carrossel-proxima { right: 10px; }

.carrossel-pontos { position: absolute; right: 16px; bottom: 14px; z-index: 3; display: flex; gap: 10px; }
.carrossel-ponto { width: 14px; height: 14px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.85); background: transparent; transition: background .15s, transform .15s; }
.carrossel-ponto.ativo { background: var(--branco); transform: scale(1.25); }

/* Foco visível: quem navega por teclado precisa enxergar onde está. */
.carrossel-seta:focus-visible, .carrossel-ponto:focus-visible, .carrossel-link:focus-visible {
  outline: 3px solid var(--laranja); outline-offset: 2px; }

@media (max-width: 700px) {
  .carrossel-texto { padding: 14px 15px 13px; }
  .carrossel-texto h2 { font-size: 1.12rem; }
  .carrossel-texto .linha-fina { display: none; }
  /* Setas FORA do celular. A foto aqui tem só ~200px de altura e a faixa de
     texto come os 90px de baixo, então a seta em `top: 50%` caía dentro do
     texto: na tela do Erlandson ela cobriu o "DE" do selo DESTAQUE e a primeira
     letra do título. E são dispensáveis — o carrossel.js já troca o slide no
     arraste do dedo (touchstart/touchend). Sumindo com elas, o toque inteiro
     volta a ser o link da matéria, que é o que se quer no celular. */
  .carrossel-seta { display: none; }
  /* Os pontos sobem para o canto de cima, sobre a foto. Embaixo eles ficariam
     em cima da segunda linha do título — a faixa de texto no celular é
     estreita e o título ocupa ela toda. */
  .carrossel-pontos { top: 10px; right: 10px; bottom: auto; }
}

/* TÍTULO ANIMADO ALTERNANDO COM A MARCA (Erlandson, 07/10/2026: "deixe os
   títulos sempre animados alternando com a marca da rádio"). A animação mora
   no .ativo: quando o carrossel.js troca o slide, a classe sai e volta e o
   navegador reinicia a sequência. Com troca a cada 2,5 s: a marca ocupa a
   faixa até ~0,8 s e o título entra a partir de 0,65 s, ficando ~1,8 s
   parado. Mouse em cima pausa o carrossel, então quem quiser ler, lê. */
.carrossel-texto { overflow: hidden; }
.carrossel-slide.arte .carrossel-texto { position: relative; }
.carrossel-marca { position: absolute; left: 22px; bottom: 18px; height: 62px; display: flex;
  align-items: center; opacity: 0; pointer-events: none; }
.carrossel-marca img { height: 100%; width: auto; display: block; }
.carrossel-marca.marca-80 { height: 70px; bottom: 14px; }
.carrossel-slide.ativo .carrossel-marca { animation: carrossel-marca .85s ease both; }
.carrossel-slide.ativo .carrossel-texto .chapeu { animation: carrossel-titulo .45s ease .6s both; }
.carrossel-slide.ativo .carrossel-texto h2 { animation: carrossel-titulo .5s ease .68s both; }
@keyframes carrossel-marca {
  0%   { opacity: 0; transform: translateY(10px) scale(.92); }
  20%  { opacity: 1; transform: none; }
  70%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes carrossel-titulo {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .carrossel-marca { left: 15px; bottom: 13px; height: 42px; }
  .carrossel-marca.marca-80 { height: 48px; bottom: 10px; }
}

/* Sem animação para quem pediu ao sistema para reduzir movimento. O JS já não
   troca sozinho nesse caso; aqui a transição também some. */
@media (prefers-reduced-motion: reduce) {
  .carrossel-slide { transition: none; }
  .carrossel-slide.ativo .carrossel-marca,
  .carrossel-slide.ativo .carrossel-texto .chapeu,
  .carrossel-slide.ativo .carrossel-texto h2 { animation: none; }
}

/* Botão para o mídia kit na página Anuncie (05/08/2026). Laranja da marca, que
   é a cor de ação do portal: precisa competir com o formulário ao lado sem
   parecer outro "enviar". */
.btn-midiakit { display: inline-block; margin-top: 14px; padding: 12px 22px; border-radius: 8px;
  background: var(--laranja); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
.btn-midiakit:hover { filter: brightness(1.07); text-decoration: none; color: #fff; }
.btn-midiakit-menor { margin-top: 10px; padding: 9px 16px; font-size: .85rem; width: 100%; text-align: center; }
.widget-midiakit { border-color: var(--laranja); }

/* ── Busca de matérias (10/08/2026) ─────────────────────────────────── */
.nav-busca { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 50%; color: var(--azul); border-bottom: none !important; }
.nav-busca:hover { background: var(--cinza-fundo); }
.busca-pagina { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.busca-vazia { text-align: center; padding-top: 56px; }
.busca-logo { margin-bottom: 26px; max-width: 60%; height: auto; }
.busca-caixa { display: flex; align-items: center; gap: 10px; background: var(--branco);
  border: 1px solid var(--cinza-borda); border-radius: 28px; padding: 8px 10px 8px 18px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, .12); transition: box-shadow .15s; }
.busca-caixa:focus-within { box-shadow: 0 2px 12px rgba(32, 33, 36, .2); border-color: transparent; }
.busca-lupa { color: #9aa0a6; flex: none; }
.busca-caixa input { flex: 1; border: none; outline: none; font-size: 1.05rem; background: transparent;
  color: var(--preto); min-width: 0; }
.busca-botao { flex: none; border: none; cursor: pointer; background: var(--azul); color: var(--branco);
  font-weight: 800; font-size: .9rem; padding: 9px 20px; border-radius: 20px; }
.busca-botao:hover { background: var(--azul-claro); }
.busca-dica { margin-top: 20px; color: #5f6368; font-size: .92rem; }
.busca-contagem { margin: 18px 2px 6px; color: #5f6368; font-size: .86rem; }
.busca-resultados { display: flex; flex-direction: column; gap: 26px; margin-top: 14px; }
.busca-chapeu { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; }
.busca-data { color: #5f6368; font-size: .78rem; }
.busca-titulo { margin: 0; font-size: 1.16rem; line-height: 1.3; }
.busca-titulo a { color: var(--azul); }
.busca-titulo a:hover { text-decoration: underline; }
.busca-linhafina { margin: 3px 0 0; color: var(--preto); font-size: .9rem; }
.busca-trecho { margin: 4px 0 0; color: #4d5156; font-size: .88rem; line-height: 1.5; }
.busca-trecho strong { color: var(--preto); }
.busca-pag-atual { color: #5f6368; font-size: .85rem; padding: 0 10px; }
@media (max-width: 560px) {
  .busca-vazia { padding-top: 32px; }
  .busca-botao { padding: 8px 14px; }
}

/* ── A Grande Apuração · Eleições 2026 (04/10/2026) ───────────────────── */
.bloco-hoje { margin: 0 0 22px; }
.hoje-faixa { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 12px; color: var(--branco); background: var(--azul); text-decoration: none; box-shadow: 0 6px 20px rgba(0,79,125,.25); }
.hoje-faixa:hover { filter: brightness(1.06); }
.hoje-selo { font-size: .78rem; font-weight: 800; letter-spacing: .04em; background: var(--magenta); padding: 6px 10px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.hoje-titulo { font-size: 1.25rem; font-weight: 900; }
.hoje-estado { font-size: .95rem; font-weight: 600; color: var(--amarelo); text-align: right; }
.hoje-cards { margin-top: 14px; }
.ap-pulso { width: 10px; height: 10px; border-radius: 50%; background: var(--amarelo); display: inline-block; animation: ap-pulsa 1.4s ease-in-out infinite; }
@keyframes ap-pulsa { 0%,100% { transform: scale(.8); opacity: .6 } 50% { transform: scale(1.2); opacity: 1 } }
.ap-cabecalho { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; background: var(--azul); color: var(--branco); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.ap-selo { display: inline-block; background: var(--amarelo); color: var(--preto); font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.ap-titulo.pagina-titulo { color: var(--branco); border-left-color: var(--amarelo); margin: 10px 0 6px; }
.ap-sub { margin: 0; max-width: 760px; opacity: .95; }
.ap-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.ap-botao { background: var(--magenta); color: var(--branco); font-weight: 800; padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.ap-botao-sec { background: rgba(255,255,255,.14); }
.ap-status { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px; border-radius: 10px; background: var(--cinza-fundo); border: 1px solid var(--cinza-borda); margin-bottom: 8px; }
.ap-hora { margin-left: auto; color: #556; font-size: .9rem; }
.ap-bloco { margin-bottom: 10px; }
.ap-abrangencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ap-abr { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 14px 16px; }
.ap-abr.ap-lavras { border: 2px solid var(--magenta); box-shadow: 0 4px 16px rgba(238,27,132,.12); }
.ap-abr-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ap-abr-topo h3 { margin: 0; font-size: 1.1rem; color: var(--azul); }
.ap-lavras .ap-abr-topo h3 { color: var(--magenta); }
.ap-secoes { font-size: .85rem; color: #556; white-space: nowrap; }
.ap-lista { list-style: none; margin: 0; padding: 0; }
.ap-cand { display: grid; grid-template-columns: 22px 44px 40px 1fr auto 64px; grid-template-areas: "pos num foto nome votos pct" "pos num foto barra barra barra"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cinza-borda); }
.ap-cand:last-child { border-bottom: 0; }
.ap-pos { grid-area: pos; font-size: .8rem; color: #889; text-align: center; }
.ap-num { grid-area: num; font-weight: 900; color: var(--branco); background: var(--azul); border-radius: 6px; text-align: center; padding: 3px 0; font-size: .9rem; }
.ap-nome { grid-area: nome; font-weight: 700; line-height: 1.2; }
/* Foto oficial de urna (TSE), 04/10/2026. Vazia vira um círculo neutro para a grade não pular. */
.ap-foto { grid-area: foto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #dfe3ea; border: 2px solid var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,.18); display: block; }
.ap-foto-vazia { background: #dfe3ea; }
.ap-eleito .ap-foto { border-color: #1B7A43; }
.ap-nome small { font-weight: 600; color: #667; margin-left: 4px; }
.ap-sit { font-style: normal; font-size: .75rem; font-weight: 800; color: var(--branco); background: #1B7A43; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.ap-votos { grid-area: votos; font-variant-numeric: tabular-nums; font-weight: 700; }
.ap-pct { grid-area: pct; font-variant-numeric: tabular-nums; font-weight: 900; text-align: right; color: var(--azul); }
.ap-barra { grid-area: barra; height: 6px; background: var(--cinza-fundo); border-radius: 999px; overflow: hidden; }
.ap-barra span { display: block; height: 100%; background: var(--azul); border-radius: 999px; transition: width .6s ease; }
.ap-eleito .ap-pct { color: #1B7A43; }
.ap-rodape { margin: 10px 0 0; color: #556; }
.ap-nota { margin: 14px 0 0; color: #667; }
/* Modo estúdio: tela escura e tipos grandes, para a cabine ler à distância */
.modo-estudio { background: #134274; color: var(--branco); }
.modo-estudio .ap-cabecalho { display: none; }
.modo-estudio .ap-status { background: #1b4c82; border-color: #2f68a6; color: var(--branco); font-size: 1.2rem; }
.modo-estudio .ap-hora { color: #BFD3EA; }
.modo-estudio .secao-titulo { color: var(--amarelo); border-left-color: var(--amarelo); font-size: 1.6rem; }
.modo-estudio .ap-abr { background: #1b4c82; border-color: #2f68a6; }
.modo-estudio .ap-abr-topo h3 { color: var(--branco); font-size: 1.4rem; }
.modo-estudio .ap-lavras .ap-abr-topo h3 { color: var(--amarelo); }
.modo-estudio .ap-secoes, .modo-estudio .ap-rodape, .modo-estudio .ap-nota, .modo-estudio .ap-pos, .modo-estudio .ap-nome small { color: #BFD3EA; }
.modo-estudio .ap-cand { border-bottom-color: #2f68a6; padding: 11px 0; grid-template-columns: 28px 56px 48px 1fr auto 96px; }
.modo-estudio .ap-foto { width: 48px; height: 48px; border-color: #2f68a6; background: #2f68a6; }
/* Cabine: a tela é larga e fica longe. Solta o limite de 1360px para as três colunas respirarem
   e o nome não quebrar em três linhas ao lado da foto (visto em 04/10/2026 em 1920 px). */
.modo-estudio .conteudo { max-width: none; padding: 20px 32px; }
.modo-estudio .ap-abrangencias { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.modo-estudio .ap-nome { font-size: 1.25rem; }
.modo-estudio .ap-nome { font-size: 1.35rem; color: var(--branco); }
.modo-estudio .ap-votos { font-size: 1.3rem; color: var(--branco); }
.modo-estudio .ap-pct { font-size: 1.6rem; color: var(--amarelo); }
.modo-estudio .ap-num { font-size: 1.1rem; background: var(--azul-claro); }
.modo-estudio .ap-barra { background: #2f68a6; height: 8px; }
.modo-estudio .ap-eleito .ap-pct { color: #7CE495; }
@media (max-width: 720px) {
  .hoje-faixa { grid-template-columns: 1fr; gap: 8px; }
  .hoje-estado { text-align: left; }
  .ap-cand { grid-template-columns: 18px 42px 40px 1fr auto; column-gap: 6px;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra"; }
  .ap-foto { width: 38px; height: 38px; }
  .ap-nome { font-size: .98rem; }
  .ap-pct { text-align: right; font-size: 1.02rem; }
  .ap-votos { font-size: .9rem; color: #556; }
  .modo-estudio .ap-cand { grid-template-columns: 18px 44px 42px 1fr auto; column-gap: 6px;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra"; padding: 9px 0; }
  .modo-estudio .ap-foto { width: 42px; height: 42px; }
  .modo-estudio .ap-nome { font-size: 1.08rem; }
  .modo-estudio .ap-votos { font-size: 1.05rem; }
  .modo-estudio .ap-pct { font-size: 1.2rem; text-align: right; }
  .modo-estudio .ap-abrangencias { grid-template-columns: 1fr; }
  .modo-estudio .secao-titulo { font-size: 1.2rem; }
  .modo-estudio .ap-abr-topo h3 { font-size: 1.1rem; }
}

/* ── Cronômetro da Grande Apuração (04/10/2026) ───────────────────────── */
.contagem-apuracao { position: fixed; right: 16px; bottom: calc(var(--player-altura) + 14px); z-index: 120; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; color: var(--branco); text-decoration: none; background: var(--azul); border: 2px solid var(--amarelo); box-shadow: 0 10px 28px rgba(0,0,0,.35); font-weight: 700; animation: subir .4s ease; }
.contagem-apuracao:hover { filter: brightness(1.08); }
.contagem-apuracao[hidden] { display: none; }
.contagem-rotulo { font-size: .92rem; white-space: nowrap; }
.contagem-tempo { font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--amarelo); letter-spacing: .03em; min-width: 7.2ch; text-align: center; }
.contagem-cta { font-size: .85rem; background: var(--magenta); padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.contagem-ao-vivo { border-color: var(--magenta); }
.contagem-ao-vivo .contagem-tempo { color: var(--branco); animation: ap-pulsa 1.4s ease-in-out infinite; }
@media (max-width: 720px) {
  .contagem-apuracao { left: 10px; right: 10px; bottom: calc(var(--player-altura) + 8px); justify-content: space-between; padding: 8px 12px; border-radius: 14px; gap: 6px; }
  .contagem-rotulo { font-size: .8rem; white-space: normal; line-height: 1.1; }
  .contagem-tempo { font-size: 1.25rem; }
  .contagem-cta { font-size: .75rem; }
  .convite-aovivo { bottom: calc(var(--player-altura) + 70px); }
}

/* ── Busca de candidatos (Grande Apuração) ────────────────────────────── */
.ap-busca { background: var(--branco); border: 2px solid var(--azul); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; }
.ap-busca-rotulo { display: block; font-weight: 800; color: var(--azul); margin-bottom: 8px; }
.ap-busca-linha { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.ap-busca-campo { font-size: 1.15rem; padding: 12px 16px; border: 2px solid var(--cinza-borda); border-radius: 999px; width: 100%; box-sizing: border-box; }
.ap-busca-campo:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(238,27,132,.15); }
.ap-busca-cargo { font-size: 1rem; padding: 10px 14px; border: 2px solid var(--cinza-borda); border-radius: 999px; background: var(--branco); }
.ap-busca-dica { margin: 8px 0 0; color: #556; }
.ap-busca-resultado { margin-top: 10px; }
.ap-busca-resultado[hidden] { display: none; }
.bc-resumo { margin: 6px 0 8px; color: #556; }
.bc-hora { color: #889; margin-left: 6px; }
.bc-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--cinza-borda); }
.bc-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--cinza-fundo); display: block; }
.bc-id { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bc-num { font-weight: 900; color: var(--branco); background: var(--azul); border-radius: 6px; padding: 4px 8px; font-size: .95rem; white-space: nowrap; }
.bc-nome { font-weight: 800; line-height: 1.2; }
.bc-sub { font-size: .85rem; color: #667; }
.bc-cols { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bc-col { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; background: var(--cinza-fundo); border-radius: 8px; padding: 6px 10px; min-width: 128px; }
.bc-abr { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #667; }
.bc-col strong { font-variant-numeric: tabular-nums; }
.bc-pct { font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.bc-pos { grid-column: 1 / -1; font-size: .75rem; color: #889; }
.modo-estudio .ap-busca { background: #1b4c82; border-color: var(--amarelo); }
.modo-estudio .ap-busca-rotulo { color: var(--amarelo); }
.modo-estudio .ap-busca-campo, .modo-estudio .ap-busca-cargo { background: #0B1E42; color: var(--branco); border-color: #2f68a6; font-size: 1.4rem; }
.modo-estudio .bc-item { border-top-color: #2f68a6; }
.modo-estudio .bc-nome { color: var(--branco); font-size: 1.3rem; }
.modo-estudio .bc-sub, .modo-estudio .bc-resumo, .modo-estudio .ap-busca-dica { color: #BFD3EA; }
.modo-estudio .bc-col { background: #0B1E42; color: var(--branco); }
.modo-estudio .bc-pct { color: var(--amarelo); font-size: 1.2rem; }
.modo-estudio .bc-abr, .modo-estudio .bc-pos { color: #BFD3EA; }
@media (max-width: 720px) {
  .ap-busca-linha { grid-template-columns: 1fr; }
  .bc-item { grid-template-columns: 44px 1fr; }
  .bc-cols { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Brasil inteiro: mapa, estados e lugares (Grande Apuração) ────────── */
.ap-brasil { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.ap-brasil-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ap-brasil-topo .secao-titulo { margin: 0; }
.ap-abas { display: inline-flex; background: var(--cinza-fundo); border-radius: 999px; padding: 4px; gap: 4px; }
.ap-aba { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 800; color: var(--azul); cursor: pointer; font-size: .95rem; }
.ap-aba.ativa { background: var(--azul); color: var(--branco); }
.ap-lugar-busca { margin: 14px 0 12px; }
.ap-lugar-wrap { position: relative; }
.ap-sugestoes { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); list-style: none; margin: 0; padding: 6px 0; max-height: 320px; overflow: auto; }
.ap-sugestoes[hidden] { display: none; }
.ap-sugestoes li { padding: 10px 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.ap-sugestoes li:hover { background: var(--cinza-fundo); }
.ap-sugestoes small { color: #667; }
.ap-sug-vazio { color: #667; cursor: default; }
.ap-mapa-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr); gap: 16px; align-items: start; }
.ap-mapa-caixa { background: var(--cinza-fundo); border-radius: 14px; padding: 12px; }
.mapa-brasil { width: 100%; height: auto; display: block; max-height: 70vh; }
.mapa-uf { fill: #CFD8DC; stroke: var(--branco); stroke-width: 2; cursor: pointer; transition: fill .4s ease, opacity .2s; }
.mapa-uf:hover { opacity: .82; }
.mapa-uf-sel { stroke: var(--preto); stroke-width: 4; }
.mapa-rotulo { font-size: 22px; font-weight: 800; fill: var(--preto); pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 4px; }
.ap-mapa-legenda { margin: 10px 2px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: #556; }
.ap-leg { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--preto); }
.ap-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.ap-leg small { font-weight: 500; color: #667; }
.ap-mapa-painel { background: var(--branco); border: 2px solid var(--azul); border-radius: 14px; padding: 14px 16px; position: sticky; top: 12px; }
.ap-mapa-painel h3 { margin: 0; color: var(--azul); font-size: 1.15rem; }
.ap-painel-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ap-painel-sub { margin: 10px 0 2px; font-weight: 700; color: var(--azul); }
.ap-botao-mini { display: inline-block; margin-top: 12px; padding: 8px 14px; font-size: .9rem; }
.ap-link { background: none; border: 0; color: var(--magenta); font-weight: 800; cursor: pointer; padding: 8px 0 0; font-size: .95rem; }
.ap-lugar-resultado { margin-top: 16px; border-top: 2px dashed var(--cinza-borda); padding-top: 14px; }
.ap-lugar-resultado[hidden] { display: none; }
.ap-lugar-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ap-lugar-topo h3 { margin: 6px 0 0; font-size: 1.5rem; color: var(--azul); }
.ap-lugar-meta { color: #556; font-size: .95rem; }
.ap-tudo { margin-top: 8px; }
.ap-estados-titulo { margin: 18px 0 10px; color: var(--azul); }
.ap-estados { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ap-estado .ap-cand { padding: 5px 0; }
.modo-estudio .ap-brasil { background: #1b4c82; border-color: #2f68a6; }
.modo-estudio .ap-mapa-caixa { background: #0B1E42; }
.modo-estudio .mapa-uf { stroke: #0B1E42; }
.modo-estudio .mapa-rotulo { fill: var(--branco); stroke: rgba(11,30,66,.9); }
.modo-estudio .ap-mapa-painel { background: #1b4c82; border-color: var(--amarelo); }
.modo-estudio .ap-mapa-painel h3, .modo-estudio .ap-lugar-topo h3, .modo-estudio .ap-estados-titulo, .modo-estudio .ap-painel-sub { color: var(--amarelo); }
.modo-estudio .ap-abas { background: #0B1E42; }
.modo-estudio .ap-aba { color: var(--branco); }
.modo-estudio .ap-aba.ativa { background: var(--amarelo); color: var(--preto); }
.modo-estudio .ap-leg, .modo-estudio .ap-lugar-meta, .modo-estudio .ap-mapa-legenda { color: var(--branco); }
.modo-estudio .ap-sugestoes { background: #1b4c82; border-color: #2f68a6; color: var(--branco); }
.modo-estudio .ap-sugestoes li:hover { background: #0B1E42; }
@media (max-width: 860px) {
  .ap-mapa-grade { grid-template-columns: 1fr; }
  .ap-mapa-painel { position: static; }
  .mapa-brasil { max-height: none; }
  .mapa-rotulo { font-size: 26px; }
  .ap-estados { grid-template-columns: 1fr; }
}

/* Ajuste 04/10 11h20 (ele viu no PC): no modo estúdio a letra gigante é só
   para os quadros de Lavras/Minas/Brasil. Grade dos estados, painel do mapa e
   consulta por lugar voltam a um tamanho que cabe em 4 colunas, sem estourar. */
.ap-abr, .ap-cand, .ap-estado { min-width: 0; }
.ap-nome { overflow-wrap: anywhere; }
.ap-abr { overflow: hidden; }
.ap-estados { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.modo-estudio .ap-estados { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand {
  grid-template-columns: 22px 46px 1fr auto 86px; padding: 7px 0;
}
.modo-estudio .ap-estado .ap-nome, .modo-estudio .ap-mapa-painel .ap-nome, .modo-estudio .ap-lugar-resultado .ap-nome { font-size: 1.05rem; }
.modo-estudio .ap-estado .ap-votos, .modo-estudio .ap-mapa-painel .ap-votos, .modo-estudio .ap-lugar-resultado .ap-votos { font-size: 1rem; }
.modo-estudio .ap-estado .ap-pct, .modo-estudio .ap-mapa-painel .ap-pct, .modo-estudio .ap-lugar-resultado .ap-pct { font-size: 1.2rem; }
.modo-estudio .ap-estado .ap-num, .modo-estudio .ap-mapa-painel .ap-num, .modo-estudio .ap-lugar-resultado .ap-num { font-size: .95rem; }
.modo-estudio .ap-estado .ap-abr-topo h3 { font-size: 1.15rem; }
.modo-estudio .ap-estado .ap-barra { height: 6px; }
/* No modo normal, a coluna do percentual também ganha folga para "100,00%" */
.ap-cand { grid-template-columns: 22px 44px 1fr auto 72px; }

/* ── Ficha do candidato (página e painel flutuante) ───────────────────── */
.ap-cand-link { cursor: pointer; }
.ap-cand-link:hover .ap-nome { color: var(--magenta); text-decoration: underline; }
.bc-item { text-decoration: none; color: inherit; }
.bc-item:hover .bc-nome { color: var(--magenta); text-decoration: underline; }
.cand-overlay { position: fixed; inset: 0; background: rgba(11,30,66,.72); z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: hidden; }
.cand-overlay[hidden] { display: none; }
.cand-modal-caixa { position: relative; background: var(--branco); color: var(--preto); border-radius: 16px; max-width: 900px; width: 100%; max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 24px 64px rgba(0,0,0,.4); animation: subir .25s ease; }
.cand-modal-fechar { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--magenta); color: var(--branco); font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.cand-aberto { overflow: hidden; }
.cand-ficha { padding: 18px 22px 26px; max-width: 900px; margin: 0 auto; }
.cand-topo { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; background: var(--azul); color: var(--branco); border-radius: 14px; padding: 18px; }
.cand-foto { width: 140px; height: 140px; border-radius: 14px; object-fit: cover; background: var(--cinza-fundo); border: 3px solid var(--branco); }
.cand-foto-vazia { display: block; }
.cand-nome { margin: 8px 0 4px; font-size: 1.7rem; line-height: 1.15; color: var(--branco); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cand-num { font-size: 1.1rem; background: var(--amarelo); color: var(--preto); }
.cand-sub { margin: 0 0 4px; opacity: .95; }
.cand-topo .mini { color: #DCE7F3; margin: 2px 0; }
.cand-chapa { margin: 8px 0 0; }
.cand-bloco { margin-top: 18px; }
.cand-bloco h2 { font-size: 1.15rem; color: var(--azul); border-left: 5px solid var(--magenta); padding-left: 10px; margin: 0 0 10px; }
.cand-bloco h3 { font-size: 1rem; color: var(--azul); margin: 14px 0 6px; }
.cand-votos { display: flex; gap: 10px; flex-wrap: wrap; }
.cand-votos .bc-col { min-width: 160px; }
.cand-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.cand-dl dt { color: #556; font-weight: 600; }
.cand-dl dd { margin: 0; font-weight: 600; }
.cand-tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cand-tabela th, .cand-tabela td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--cinza-borda); vertical-align: top; }
.cand-tabela th { color: #556; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.cand-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cand-tabela small { color: #667; }
.cand-total { font-size: 1.1rem; margin: 0 0 8px; }
.cand-redes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cand-redes a { display: inline-block; background: var(--cinza-fundo); border-radius: 999px; padding: 6px 12px; font-weight: 700; color: var(--azul); text-decoration: none; }
.cand-fonte { margin-top: 18px; color: #667; }
.modo-estudio .cand-modal-caixa { background: #1b4c82; color: var(--branco); }
.modo-estudio .cand-bloco h2, .modo-estudio .cand-bloco h3, .modo-estudio .cand-redes a { color: var(--amarelo); }
.modo-estudio .cand-dl dt, .modo-estudio .cand-tabela th, .modo-estudio .cand-fonte, .modo-estudio .cand-tabela small { color: #BFD3EA; }
.modo-estudio .cand-tabela th, .modo-estudio .cand-tabela td { border-bottom-color: #2f68a6; }
.modo-estudio .cand-redes a, .modo-estudio .cand-votos .bc-col { background: #0B1E42; }
@media (max-width: 720px) {
  .cand-topo { grid-template-columns: 96px 1fr; padding: 14px; }
  .cand-foto { width: 96px; height: 96px; }
  .cand-nome { font-size: 1.3rem; }
  .cand-dl { grid-template-columns: 1fr; gap: 2px; }
  .cand-dl dt { margin-top: 8px; }
  .cand-ficha { padding: 14px; }
  .cand-overlay { padding: 10px 6px; }
  .cand-modal-caixa { max-height: calc(100vh - 20px); }
}

/* ── Colinha do eleitor ───────────────────────────────────────────────── */
.hoje-colinha-link { display: block; margin-top: 8px; font-weight: 800; color: var(--magenta); text-decoration: none; }
.col-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; align-items: start; }
.col-escolhas { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 14px; padding: 16px 18px; }
.col-ordem { margin: 0 0 10px; color: #556; }
.col-slot { padding: 10px 0; border-top: 1px solid var(--cinza-borda); }
.col-slot:first-of-type { border-top: 0; }
.col-rotulo { display: block; font-weight: 800; color: var(--azul); margin-bottom: 6px; }
.col-rotulo small { color: #667; font-weight: 600; }
.col-campo-wrap { position: relative; }
.col-campo { font-size: 1.05rem; padding: 10px 14px; }
.col-sugestoes li { align-items: center; justify-content: flex-start; }
.col-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-right: 6px; }
.col-escolhido { display: grid; grid-template-columns: 44px auto 1fr auto; gap: 10px; align-items: center; background: var(--cinza-fundo); border-radius: 12px; padding: 8px 12px; }
.col-escolhido[hidden], .col-campo-wrap[hidden] { display: none; }
.col-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--cinza-borda); }
.col-esc-num { font-weight: 900; font-size: 1.3rem; color: var(--branco); background: var(--azul); border-radius: 8px; padding: 2px 10px; }
.col-esc-nome { font-weight: 700; }
.col-trocar { background: none; border: 0; color: var(--magenta); font-weight: 800; cursor: pointer; }
.col-previa { position: sticky; top: 12px; }
.col-cartao { background: var(--azul); color: var(--branco); border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 12px 32px rgba(0,79,125,.3); }
.col-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; color: var(--amarelo); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.col-logo { height: 44px; width: auto; }
.col-lista { list-style: none; margin: 12px 0 10px; padding: 0; display: grid; gap: 8px; }
.col-item { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "passo cargo num" "passo nome num"; column-gap: 10px; align-items: center; background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px; }
.col-passo { grid-area: passo; font-weight: 800; color: #BFD3EA; }
.col-cargo { grid-area: cargo; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #BFD3EA; font-weight: 700; }
.col-nome { grid-area: nome; font-weight: 700; }
.col-nome small { color: #BFD3EA; font-weight: 600; }
.col-num { grid-area: num; font-size: 2rem; font-weight: 900; color: var(--amarelo); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.col-num-vazio { color: rgba(255,255,255,.35); }
.col-vazio .col-nome { color: #BFD3EA; }
.col-rodape { margin: 4px 0 0; font-size: .78rem; color: #DCE7F3; text-align: center; }
.col-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.col-acoes .ap-botao { padding: 10px 14px; font-size: .95rem; }
@media (max-width: 860px) {
  .col-grade { grid-template-columns: 1fr; }
  .col-previa { position: static; }
  .col-cartao { border-radius: 14px; }
  .col-num { font-size: 1.7rem; }
}
@media print {
  .topo, header, nav, .player, .contagem-apuracao, .convite-aovivo, .col-escolhas, .col-acoes, .col-cabecalho, .rodape, footer, .ticker, .faixa-ticker { display: none !important; }
  body { padding: 0; background: #fff; }
  .col-grade { display: block; }
  .col-cartao { background: #fff !important; color: #000; box-shadow: none; border: 2px solid #000; -webkit-print-color-adjust: exact; }
  .col-item { background: #f2f2f2; }
  .col-num { color: #000; }
  .col-cargo, .col-passo, .col-nome small, .col-rodape, .col-cartao-topo { color: #333; }
  .col-logo { filter: invert(1); }
}

/* ── Atalhos da capa: perfis e colinha ────────────────────────────────── */
.hoje-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.hoje-atalho { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--preto); }
.hoje-atalho:hover { border-color: var(--azul); box-shadow: 0 6px 16px rgba(0,79,125,.12); }
.hoje-atalho-ico { font-size: 1.8rem; text-align: center; }
.hoje-atalho strong { display: block; color: var(--azul); }
.hoje-atalho small { display: block; color: #556; line-height: 1.25; }
.hoje-atalho-btn { background: var(--azul); color: var(--branco); font-weight: 800; padding: 8px 12px; border-radius: 999px; white-space: nowrap; font-size: .85rem; }
.ap-busca-linha-3 { grid-template-columns: 1fr auto auto; }
@media (max-width: 720px) {
  .hoje-atalhos { grid-template-columns: 1fr; }
  .hoje-atalho { grid-template-columns: 36px 1fr; }
  .hoje-atalho-btn { grid-column: 2; justify-self: start; }
  .ap-busca-linha-3 { grid-template-columns: 1fr; }
}

/* Foto em todas as listas (04/10 11h35): colunas com a área "foto" também nas
   listas secundárias do modo estúdio e no modo normal. */
.ap-cand { grid-template-columns: 22px 44px 40px 1fr auto 72px; }
.modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand { grid-template-columns: 22px 46px 40px 1fr auto 86px; }
.modo-estudio .ap-estado .ap-foto, .modo-estudio .ap-mapa-painel .ap-foto, .modo-estudio .ap-lugar-resultado .ap-foto { width: 40px; height: 40px; }

/* Presidente tem 4 abrangências (Brasil, Minas, Lavras, Exterior): em tela larga, 4 colunas */
@media (min-width: 1300px) { #ap-presidente .ap-abrangencias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ap-abr [data-ver-tudo] { margin-top: 6px; }

/* ── Receitas e gastos ───────────────────────────────────────────────── */
.ct-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ct-abas .ap-aba { background: var(--cinza-fundo); text-decoration: none; }
.ct-bloco { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.ct-bloco .secao-titulo { margin-top: 0; }
.ct-totais { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.ct-totais .bc-col { min-width: 200px; }
.ct-totais strong { font-size: 1.25rem; color: var(--azul); }
.ct-lista { list-style: none; margin: 0; padding: 0; }
.ct-item { display: grid; grid-template-columns: 24px 40px minmax(160px, 1.4fr) 1.2fr 1fr .8fr; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--cinza-borda); cursor: pointer; }
.ct-item:hover .ct-nome strong { color: var(--magenta); text-decoration: underline; }
.ct-nome small { display: block; color: #667; }
.ct-val { display: grid; line-height: 1.2; }
.ct-val strong { font-variant-numeric: tabular-nums; }
.ct-val small { color: #667; font-size: .78rem; }
.ct-barra { height: 6px; background: var(--cinza-fundo); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.ct-barra span { display: block; height: 100%; background: var(--azul); }
.ct-mais summary { cursor: pointer; list-style: none; padding: 10px 4px; }
.ct-mais summary::-webkit-details-marker { display: none; }
.hoje-atalhos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .ct-item { grid-template-columns: 24px 40px 1fr; }
  .ct-val { grid-column: 3; }
  .hoje-atalhos { grid-template-columns: 1fr; }
}
/* 11h42: na página de contas, foto e posição herdavam grid-area dos quadros da apuração e bagunçavam a linha */
.ct-item > * { grid-area: auto; }
.ct-item .ap-pos { text-align: center; }

/* Atalhos da capa com imagem (04/10 11h50) */
.hoje-atalhos { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hoje-atalho { display: block; padding: 0; overflow: hidden; border-radius: 14px; }
.hoje-atalho-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hoje-atalho-txt { display: block; padding: 12px 14px 14px; }
.hoje-atalho strong { font-size: 1.05rem; }
.hoje-atalho small { margin: 4px 0 10px; }
.hoje-atalho .hoje-atalho-btn { display: inline-block; }
.hoje-atalho:hover .hoje-atalho-btn { background: var(--magenta); }
@media (max-width: 860px) {
  .hoje-atalhos { grid-template-columns: 1fr; }
  .hoje-atalho { display: grid; grid-template-columns: 120px 1fr; align-items: center; }
  .hoje-atalho-img { height: 100%; aspect-ratio: auto; min-height: 110px; }
  .hoje-atalho-txt { padding: 10px 12px; }
}

/* 14h37 (ele viu no PC): no modo estúdio a linha tinha 5 colunas para 6 áreas
   (a foto entrou depois) e o nome caía numa coluna sem largura, quebrando letra
   por letra. Seis colunas em todos os casos e nome sem quebra forçada. */
.ap-nome { overflow-wrap: normal; word-break: normal; min-width: 0; }
.modo-estudio .ap-cand { grid-template-columns: 28px 56px 48px minmax(0, 1fr) auto 96px; grid-template-areas: "pos num foto nome votos pct" "pos num foto barra barra barra"; }
.modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand { grid-template-columns: 22px 46px 40px minmax(0, 1fr) auto 86px; }
/* Presidente com 4 quadros no estúdio só em tela bem larga; senão 2 por linha */
@media (min-width: 1300px) and (max-width: 1899px) { .modo-estudio #ap-presidente .ap-abrangencias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .modo-estudio .ap-cand { grid-template-columns: 22px 48px 42px 1fr 70px; grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra"; }
}
.ap-estados-det summary { cursor: pointer; list-style: none; }
.ap-estados-det summary::-webkit-details-marker { display: none; }
.ap-estados-det[open] summary { margin-bottom: 10px; }
/* 15h05: botões secundários da colinha ficavam brancos no fundo claro */
.col-acoes .ap-botao-sec, .ap-busca .ap-botao-sec, .ct-bloco .ap-botao-sec { background: var(--azul); color: var(--branco); }
.col-acoes .ap-botao-sec:hover { background: var(--azul-claro); }
.modo-estudio .col-acoes .ap-botao-sec { background: rgba(255,255,255,.14); }

/* ── Progresso da apuração (17h22, ordem dele: % da cidade e do estado em destaque) ── */
.ap-progresso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.ap-prog { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 12px 14px; }
.ap-prog-lavras { border: 2px solid var(--magenta); }
.ap-prog-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ap-prog-nome { font-weight: 800; color: var(--azul); }
.ap-prog-lavras .ap-prog-nome { color: var(--magenta); }
.ap-prog-pct { font-size: 1.6rem; font-weight: 900; color: var(--azul); font-variant-numeric: tabular-nums; }
.ap-prog-barra { height: 10px; background: var(--cinza-fundo); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.ap-prog-barra span { display: block; height: 100%; background: var(--azul); border-radius: 999px; transition: width .8s ease; }
.ap-prog-fim .ap-prog-barra span { background: #1B7A43; }
.ap-prog-fim .ap-prog-pct { color: #1B7A43; }
.ap-prog-sub { font-size: .85rem; color: #556; }
.modo-estudio .ap-prog { background: #1b4c82; border-color: #2f68a6; }
.modo-estudio .ap-prog-nome, .modo-estudio .ap-prog-pct { color: var(--amarelo); font-size: 1.3rem; }
.modo-estudio .ap-prog-pct { font-size: 2.2rem; }
.modo-estudio .ap-prog-sub { color: #BFD3EA; font-size: 1rem; }
.modo-estudio .ap-prog-barra { background: #0B1E42; height: 14px; }
@media (max-width: 720px) { .ap-progresso { grid-template-columns: 1fr; } }

/* 17h30 (ele viu no celular): a regra de 6 colunas valia em toda largura e
   atropelava a grade do celular. Abaixo de 720px: nome na linha de cima,
   votos e percentual na de baixo, barra embaixo de tudo. Nada se sobrepõe. */
@media (max-width: 720px) {
  .ap-cand, .modo-estudio .ap-cand, .modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand {
    grid-template-columns: 20px 44px 40px minmax(0, 1fr) auto;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra";
    column-gap: 8px; row-gap: 2px;
  }
  .ap-votos { text-align: left; font-size: .95rem; color: #556; }
  .ap-pct { text-align: right; }
  .ap-nome { font-size: 1rem; line-height: 1.15; }
  .ap-nome small { display: inline; }
  .modo-estudio .ap-nome { font-size: 1.1rem; }
  .modo-estudio .ap-pct { font-size: 1.3rem; }
  .modo-estudio .ap-votos { color: #BFD3EA; }
}
/* Cartões estreitos no desktop (3 ou 4 por linha): nome não pode empurrar os números */
.ap-nome { min-width: 0; overflow-wrap: break-word; }
.ap-votos, .ap-pct { white-space: nowrap; }

/* 17h35 (ele viu em tela média): a quebra da linha agora depende da largura do
   CARTÃO (container query), não da tela. Cartão com menos de 460px empilha:
   nome em cima, votos e percentual embaixo. Nome nunca quebra letra por letra. */
.ap-abr, .ap-mapa-painel { container-type: inline-size; }
.ap-nome { overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 90px; }
@container (max-width: 460px) {
  .ap-cand {
    grid-template-columns: 20px 44px 40px minmax(0, 1fr) auto !important;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra" !important;
    column-gap: 8px; row-gap: 2px;
  }
  .ap-votos { text-align: left; color: #556; font-size: .95rem; }
  .ap-pct { text-align: right; }
  .ap-nome { font-size: 1rem; line-height: 1.15; min-width: 0; }
  .modo-estudio .ap-nome { font-size: 1.15rem; }
  .modo-estudio .ap-votos { color: #BFD3EA; }
  .modo-estudio .ap-pct { font-size: 1.4rem; }
}
/* Sem suporte a container query (navegador velho): nome com largura mínima digna */
@supports not (container-type: inline-size) { .ap-nome { min-width: 140px; } }

/* 17h45, ordem dele: no modo estúdio os quadros ficam um ABAIXO do outro
   (Brasil, Minas, Lavras, Exterior), em tamanho grande para a cabine. */
.modo-estudio .ap-abrangencias, .modo-estudio #ap-presidente .ap-abrangencias { grid-template-columns: 1fr !important; gap: 18px; }
.modo-estudio .ap-abr { padding: 20px 26px; }
.modo-estudio .ap-abr-topo h3 { font-size: 2rem; }
.modo-estudio .ap-secoes { font-size: 1.2rem; }
.modo-estudio .ap-cand { grid-template-columns: 40px 90px 64px minmax(0, 1fr) auto 150px; column-gap: 16px; padding: 14px 0; }
.modo-estudio .ap-pos { font-size: 1.1rem; }
.modo-estudio .ap-num { font-size: 1.5rem; padding: 6px 0; }
.modo-estudio .ap-foto { width: 64px; height: 64px; }
.modo-estudio .ap-nome { font-size: 1.9rem; }
.modo-estudio .ap-nome small { font-size: 1.1rem; }
.modo-estudio .ap-votos { font-size: 1.7rem; }
.modo-estudio .ap-pct { font-size: 2.3rem; }
.modo-estudio .ap-barra { height: 12px; }
.modo-estudio .ap-rodape { font-size: 1.05rem; }
.modo-estudio .secao-titulo { font-size: 2rem; margin-top: 34px; }
.modo-estudio .ap-progresso { gap: 14px; }
.modo-estudio .ap-prog-pct { font-size: 2.6rem; }
/* Listas secundárias (mapa, estados, cidades) continuam compactas */
.modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand { grid-template-columns: 22px 46px 40px minmax(0, 1fr) auto 86px; padding: 7px 0; column-gap: 8px; }
.modo-estudio .ap-estado .ap-foto, .modo-estudio .ap-mapa-painel .ap-foto, .modo-estudio .ap-lugar-resultado .ap-foto { width: 40px; height: 40px; }
.modo-estudio .ap-estado .ap-num, .modo-estudio .ap-mapa-painel .ap-num, .modo-estudio .ap-lugar-resultado .ap-num { font-size: .95rem; padding: 3px 0; }
.modo-estudio .ap-lugar-resultado .ap-abrangencias { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }

/* 17h50, ordem dele: modo estúdio em DUAS colunas: Brasil | Minas, depois Lavras | Exterior */
.modo-estudio .ap-abrangencias, .modo-estudio #ap-presidente .ap-abrangencias { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px; }
.modo-estudio .ap-cand { grid-template-columns: 34px 78px 56px minmax(0, 1fr) auto 130px; column-gap: 14px; padding: 12px 0; }
.modo-estudio .ap-foto { width: 56px; height: 56px; }
.modo-estudio .ap-nome { font-size: 1.6rem; }
.modo-estudio .ap-votos { font-size: 1.45rem; }
.modo-estudio .ap-pct { font-size: 2rem; }
.modo-estudio .ap-num { font-size: 1.3rem; }
@media (max-width: 1100px) { .modo-estudio .ap-abrangencias, .modo-estudio #ap-presidente .ap-abrangencias { grid-template-columns: 1fr !important; } }

/* ── Lavras em destaque, todos os cargos (18h40) ──────────────────────── */
.ap-lavras-bloco { background: rgba(253,99,1,.08); border: 2px solid var(--magenta); border-radius: 16px; padding: 12px 16px 16px; margin-bottom: 18px; }
.ap-lavras-titulo { border-left-color: var(--magenta); color: var(--magenta); margin-top: 6px; }
.ap-lavras-grade { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ap-esperando { margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; background: rgba(251,215,41,.25); color: var(--preto); font-weight: 700; }
.ap-esperando small { font-weight: 500; color: #556; display: block; }
.modo-estudio .ap-lavras-bloco { background: rgba(238,27,132,.12); border-color: var(--magenta); }
.modo-estudio .ap-lavras-titulo { color: var(--amarelo); border-left-color: var(--amarelo); }
.modo-estudio .ap-esperando { background: rgba(251,215,41,.18); color: var(--amarelo); }
.modo-estudio .ap-esperando small { color: #BFD3EA; }
.modo-estudio .ap-lavras-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .modo-estudio .ap-lavras-grade { grid-template-columns: 1fr !important; } }

/* 18h55, ordem dele: números maiores na busca (modo estúdio) */
.modo-estudio .bc-item { padding: 16px 8px; grid-template-columns: 64px 1fr auto; }
.modo-estudio .bc-foto { width: 64px; height: 64px; }
.modo-estudio .bc-num { font-size: 1.4rem; padding: 6px 12px; }
.modo-estudio .bc-nome { font-size: 1.7rem; }
.modo-estudio .bc-sub { font-size: 1.05rem; }
.modo-estudio .bc-col { min-width: 230px; padding: 12px 16px; column-gap: 14px; }
.modo-estudio .bc-col strong { font-size: 1.9rem; }
.modo-estudio .bc-pct { font-size: 2.1rem; }
.modo-estudio .bc-abr { font-size: .95rem; }
.modo-estudio .bc-pos { font-size: 1.05rem; }
.modo-estudio .bc-resumo { font-size: 1.1rem; }
@media (max-width: 720px) { .modo-estudio .bc-col { min-width: 150px; } .modo-estudio .bc-col strong { font-size: 1.3rem; } .modo-estudio .bc-pct { font-size: 1.4rem; } .modo-estudio .bc-nome { font-size: 1.25rem; } }

/* Rótulos no mapa: percentual apurado e líder (19h) */
.mapa-apur { font-size: 15px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(11,30,66,.75); stroke-width: 3px; pointer-events: none; }
.mapa-lider, .mapa-lider2 { font-size: 16px; font-weight: 900; fill: #FBD729; paint-order: stroke; stroke: rgba(11,30,66,.85); stroke-width: 3.5px; pointer-events: none; }
.mapa-lider2 { fill: #fff; font-weight: 800; }
.mapa-rotulo { font-size: 24px; }
@media (max-width: 720px) { .mapa-apur { font-size: 20px; } .mapa-lider, .mapa-lider2 { display: none; } }
.mapa-apur { font-size: 13px; }
.mapa-lider, .mapa-lider2 { font-size: 14px; }
.mapa-rotulo { font-size: 22px; }
/* 20h05: rótulos completos no mapa (dois primeiros + senadores, com votos) */
.mapa-apur { font-size: 12px; }
.mapa-lider, .mapa-lider2 { font-size: 13px; }
.mapa-sen { font-size: 12px; font-weight: 800; fill: #E6F0FF; paint-order: stroke; stroke: rgba(11,30,66,.85); stroke-width: 3px; pointer-events: none; }
.mapa-rotulo { font-size: 20px; }
@media (max-width: 720px) { .mapa-sen { display: none; } }

/* 20h30: com os rótulos completos, o mapa precisa da largura toda; painel vai para baixo */
.ap-mapa-grade { grid-template-columns: 1fr; }
.ap-mapa-painel { position: static; max-width: 760px; }
.mapa-brasil { max-height: none; }
.mapa-apur { font-size: 12px; }
.mapa-lider, .mapa-lider2 { font-size: 13.5px; }
.mapa-sen { font-size: 12.5px; }

/* 20h40: no mapa, só a cara dos dois primeiros e o percentual */
.mapa-foto { clip-path: circle(50%); pointer-events: none; }
.mapa-pct { font-size: 17px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: rgba(11,30,66,.85); stroke-width: 3.5px; pointer-events: none; }
.mapa-pct-lider { fill: #FBD729; }
.mapa-apur { font-size: 13px; }
.mapa-rotulo { font-size: 22px; }
@media (max-width: 720px) { .mapa-foto { display: none; } .mapa-pct { display: none; } .mapa-apur { font-size: 20px; } }
/* 20h43: mapa com teto de tamanho (em tela larga passava de 1.900px) */
.ap-mapa-caixa { max-width: 1000px; margin: 0 auto; }
.mapa-brasil { max-height: 78vh; margin: 0 auto; }
.ap-mapa-painel { margin: 12px auto 0; }

/* ── Votação de todos os estados ─────────────────────────────────────── */
.est-ufs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 14px; padding: 10px; position: sticky; top: 0; z-index: 30; }
.est-ufs .ap-aba { background: var(--cinza-fundo); padding: 8px 12px; }
.est-ufs .ap-aba.ativa { background: var(--azul); color: var(--branco); }
.est-resultado { border-top: 0; padding-top: 0; }
.est-resultado .ap-lugar-topo h2 { margin: 6px 0 0; font-size: 1.6rem; color: var(--azul); }
.est-abr { max-width: 960px; }
.secao-titulo .ap-secoes { font-weight: 600; margin-left: 10px; }
.modo-estudio .est-ufs { background: #1b4c82; border-color: #2f68a6; }
.modo-estudio .est-ufs .ap-aba { background: #0B1E42; color: var(--branco); }
.modo-estudio .est-ufs .ap-aba.ativa { background: var(--amarelo); color: var(--preto); }

/* 21h20 (ele viu): número de 5 dígitos cortado no quadrinho. A coluna do número
   passa a crescer com o conteúdo em todas as variações da linha. */
.ap-num { min-width: 44px; padding-left: 7px; padding-right: 7px; box-sizing: border-box; white-space: nowrap; }
.ap-cand { grid-template-columns: 22px minmax(44px, auto) 40px minmax(0, 1fr) auto 72px; }
.modo-estudio .ap-cand { grid-template-columns: 34px minmax(78px, auto) 56px minmax(0, 1fr) auto 130px; }
.modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand { grid-template-columns: 22px minmax(46px, auto) 40px minmax(0, 1fr) auto 86px; }
@container (max-width: 460px) {
  .ap-cand { grid-template-columns: 20px minmax(44px, auto) 40px minmax(0, 1fr) auto !important; }
}
@media (max-width: 720px) {
  .ap-cand, .modo-estudio .ap-cand, .modo-estudio .ap-estado .ap-cand, .modo-estudio .ap-mapa-painel .ap-cand, .modo-estudio .ap-lugar-resultado .ap-cand { grid-template-columns: 20px minmax(44px, auto) 40px minmax(0, 1fr) auto; }
}
.bc-num, .col-esc-num, .cand-num { white-space: nowrap; }
/* 22h30: painel do mapa encolhia a um fio com margin auto dentro da grade */
.ap-mapa-caixa { width: 100%; max-width: 1000px; justify-self: center; margin: 0; }
.ap-mapa-painel { width: 100%; max-width: 1000px; justify-self: center; margin: 12px 0 0; box-sizing: border-box; }
.ap-mapa-grade { justify-items: center; }

/* 05/10/2026 (muita gente reclamando do vertical): o modo estúdio tinha 6 colunas
   e fontes gigantes valendo em QUALQUER largura, e a correção mobile dependia de
   @container (que nem sempre dispara). No celular isso fazia votos e percentual se
   sobreporem. Aqui, abaixo de 720px, o estúdio vira compacto e empilhado, à força. */
@media (max-width: 720px) {
  .modo-estudio .ap-cand,
  .modo-estudio .ap-estado .ap-cand,
  .modo-estudio .ap-mapa-painel .ap-cand,
  .modo-estudio .ap-lugar-resultado .ap-cand {
    grid-template-columns: 20px 44px 38px minmax(0, 1fr) auto !important;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra" !important;
    column-gap: 8px !important; row-gap: 2px !important; padding: 9px 0 !important;
  }
  .modo-estudio .ap-foto { width: 40px !important; height: 40px !important; }
  .modo-estudio .ap-num { font-size: 1rem !important; }
  .modo-estudio .ap-pos { font-size: .8rem !important; }
  .modo-estudio .ap-nome { font-size: 1.05rem !important; line-height: 1.15 !important; }
  .modo-estudio .ap-nome small { font-size: .85rem !important; }
  .modo-estudio .ap-votos { font-size: .95rem !important; text-align: left !important; }
  .modo-estudio .ap-pct { font-size: 1.25rem !important; text-align: right !important; }
  .modo-estudio .secao-titulo { font-size: 1.4rem !important; }
  .modo-estudio .ap-abr-topo h3 { font-size: 1.4rem !important; }
  .modo-estudio .ap-abr { padding: 14px 16px !important; }
  .modo-estudio .ap-prog-pct { font-size: 1.6rem !important; }
}

/* "O Retrato do Poder" — hemiciclos interativos (05/10/2026). Página renderiza
   em .modo-estudio (fundo azul-marinho do estúdio). */
.congresso-wrap { max-width: 1000px; margin: 0 auto; padding: 8px 16px 48px; }
.congresso-cab { text-align: center; padding: 10px 0 4px; }
.congresso-titulo { color: var(--amarelo); margin: 8px 0; }
.congresso-sub { color: #BFD3EA; max-width: 720px; margin: 0 auto 14px; line-height: 1.5; }
.hemi-casa { background: #1b4c82; border: 1px solid #2f68a6; border-radius: 14px; padding: 18px 16px 20px; margin: 18px 0; }
.hemi-nome { color: #fff; font-size: 1.5rem; text-align: center; margin-bottom: 4px; }
.hemi-ano { color: #BFD3EA; letter-spacing: 4px; font-size: .95rem; font-weight: 400; }
.hemi-grafico { width: 100%; }
.hemi-svg { width: 100%; height: auto; display: block; max-height: 420px; }
.hemi-seat { cursor: pointer; transition: opacity .1s; }
.hemi-seat:hover { opacity: .55; stroke: #fff; stroke-width: 2; }
.hemi-legenda { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 10px; font-family: Arial, sans-serif; }
.hemi-legenda .lg { color: #BFD3EA; font-size: .95rem; display: flex; align-items: baseline; gap: 6px; }
.hemi-legenda .lg b { font-size: 1.6rem; }
.hemi-legenda .dir b { color: #2b6cb0; } .hemi-legenda .cen b { color: #d9a300; }
.hemi-legenda .esq b { color: #c0392b; } .hemi-legenda .neu b { color: #7d8db0; }
.hemi-rodape { text-align: center; color: #8aa0c4; font-size: .85rem; margin-top: 10px; }
.congresso-fonte { color: #7d8db0; font-size: .82rem; text-align: center; margin-top: 20px; line-height: 1.5; }
.hemi-tip { position: fixed; display: none; z-index: 9999; background: #0B1E42; border: 1px solid var(--amarelo);
  border-radius: 10px; padding: 9px 11px; max-width: 250px; box-shadow: 0 8px 24px rgba(0,0,0,.55); pointer-events: none; overflow: hidden; }
.hemi-tip img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; float: left; margin-right: 9px; }
.hemi-tip .tip-nome { color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.hemi-tip .tip-sub { color: var(--amarelo); font-size: .85rem; margin-top: 2px; }
.hemi-tip .tip-votos { color: #BFD3EA; font-size: .8rem; margin-top: 2px; }
.hemi-tip::after { content: ""; display: block; clear: both; }

/* 05/10 00h35, ordem dele: topo do modo estúdio mais baixo na vertical */
.modo-estudio .ap-busca { padding: 8px 14px 6px; margin-bottom: 8px; }
.modo-estudio .ap-busca-rotulo { font-size: .9rem; margin-bottom: 4px; }
.modo-estudio .ap-busca-campo, .modo-estudio .ap-busca-cargo { font-size: 1rem; padding: 7px 12px; }
.modo-estudio .ap-busca-dica { display: none; }
.modo-estudio .ap-status { padding: 6px 12px; margin-bottom: 6px; font-size: .95rem; }
.modo-estudio .ap-progresso { gap: 8px; margin-bottom: 8px; }
.modo-estudio .ap-prog { padding: 6px 12px; }
.modo-estudio .ap-prog-topo { align-items: center; }
.modo-estudio .ap-prog-nome { font-size: 1rem; }
.modo-estudio .ap-prog-pct { font-size: 1.5rem; }
.modo-estudio .ap-prog-barra { height: 7px; margin: 3px 0; }
.modo-estudio .ap-prog-sub { font-size: .8rem; }
.modo-estudio .ap-cabecalho { display: none; }
.modo-estudio .secao-titulo { margin-top: 16px; font-size: 1.5rem; }

/* 05/10 17h15, ordem dele: no modo estúdio cada cargo vira uma janela só, com
   rolagem horizontal para o próximo quadro (Brasil › Minas › Lavras › Exterior) */
.modo-estudio .ap-bloco:not(.ap-lavras-bloco) .ap-abrangencias {
  display: flex !important; grid-template-columns: none !important; gap: 0 !important;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.modo-estudio .ap-bloco:not(.ap-lavras-bloco) .ap-abrangencias::-webkit-scrollbar { display: none; }
.modo-estudio .ap-bloco:not(.ap-lavras-bloco) .ap-abr { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box; margin-right: 18px; }
.modo-estudio .ap-bloco:not(.ap-lavras-bloco) .ap-abr:last-child { margin-right: 0; }
.ap-car-nav { display: none; align-items: center; gap: 10px; }
.modo-estudio .ap-car-nav { display: inline-flex; margin-left: 18px; vertical-align: middle; }
.ap-car-nav button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--amarelo); background: #0B1E42; color: var(--amarelo); font-size: 1.6rem; font-weight: 900; cursor: pointer; line-height: 1; }
.ap-car-nav button:disabled { opacity: .3; cursor: default; }
.ap-car-dots { display: inline-flex; gap: 6px; }
.ap-car-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.3); display: inline-block; }
.ap-car-dots i.ativo { background: var(--amarelo); }
.ap-car-atual { color: var(--branco); font-size: 1rem; font-weight: 700; }
.modo-estudio .ap-bloco:not(.ap-lavras-bloco) .secao-titulo { display: flex; align-items: center; flex-wrap: wrap; }

/* ── Apresentação em tela cheia (05/10 17h25) ──────────────────────────── */
@keyframes ap-entra { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.ap-show { position: fixed; inset: 0; z-index: 900; background: radial-gradient(120% 120% at 50% 0%, #1b4c82 0%, #0B1E42 60%, #06132c 100%); color: var(--branco); display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 80px 1fr 80px; grid-template-areas: "topo topo topo" "ant corpo prox" "rod rod rod"; }
.ap-show[hidden] { display: none; }
.ap-show-aberto { overflow: hidden; }
.ap-show-topo { grid-area: topo; display: flex; align-items: center; gap: 18px; padding: 16px 28px; font-size: 1.6rem; font-weight: 900; color: var(--amarelo); }
.ap-show-pos { color: #BFD3EA; font-size: 1.1rem; font-weight: 700; }
.ap-show-botoes { margin-left: auto; display: flex; gap: 10px; }
.ap-show-botoes button { background: rgba(255,255,255,.12); color: var(--branco); border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800; cursor: pointer; font-size: 1rem; }
.ap-show-botoes button.ativo { background: var(--magenta); }
.ap-show-seta { background: transparent; border: 0; color: var(--amarelo); font-size: 5rem; font-weight: 900; cursor: pointer; opacity: .75; }
.ap-show-seta:hover { opacity: 1; }
.ap-show-ant { grid-area: ant; } .ap-show-prox { grid-area: prox; }
.ap-show-corpo { grid-area: corpo; overflow: auto; padding: 0 10px 10px; display: flex; align-items: flex-start; justify-content: center; }
.ap-show-corpo .ap-abr { width: 100%; max-width: 1700px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 22px 34px; }
.ap-show-corpo .ap-abr.ap-lavras { border-color: var(--magenta); }
.ap-show-corpo .ap-abr-topo h3 { color: var(--branco); font-size: 2.4rem; }
.ap-show-corpo .ap-lavras .ap-abr-topo h3 { color: var(--amarelo); }
.ap-show-corpo .ap-secoes, .ap-show-corpo .ap-rodape, .ap-show-corpo .ap-pos, .ap-show-corpo .ap-nome small { color: #BFD3EA; }
.ap-show-corpo .ap-secoes { font-size: 1.4rem; }
.ap-show-corpo .ap-cand { grid-template-columns: 44px minmax(96px, auto) 72px minmax(0, 1fr) auto 190px; column-gap: 18px; padding: 14px 0; border-bottom-color: rgba(255,255,255,.14); }
.ap-show-corpo .ap-num { font-size: 1.7rem; padding: 6px 10px; background: var(--azul-claro); }
.ap-show-corpo .ap-foto { width: 72px; height: 72px; border-color: rgba(255,255,255,.4); }
.ap-show-corpo .ap-nome { font-size: 2.2rem; color: var(--branco); }
.ap-show-corpo .ap-votos { font-size: 1.9rem; color: var(--branco); }
.ap-show-corpo .ap-pct { font-size: 2.8rem; color: var(--amarelo); }
.ap-show-corpo .ap-barra { height: 14px; background: rgba(255,255,255,.12); }
.ap-show-corpo .ap-eleito .ap-pct { color: #7CE495; }
.ap-show-corpo .ap-esperando { background: rgba(251,215,41,.18); color: var(--amarelo); }
.ap-show-corpo [data-ver-tudo] { display: none; }
.ap-show-rodape { grid-area: rod; display: flex; align-items: center; justify-content: space-between; padding: 10px 28px 16px; color: #BFD3EA; }
.ap-show-dots { display: flex; gap: 7px; flex-wrap: wrap; }
.ap-show-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-block; }
.ap-show-dots i.ativo { background: var(--amarelo); }
.ap-show-abrir { margin-left: 12px; }
@media (max-width: 900px) { .ap-show { grid-template-columns: 48px 1fr 48px; } .ap-show-seta { font-size: 3rem; } .ap-show-corpo .ap-nome { font-size: 1.4rem; } .ap-show-corpo .ap-pct { font-size: 1.8rem; } .ap-show-corpo .ap-votos { font-size: 1.2rem; } .ap-show-corpo .ap-cand { grid-template-columns: 24px minmax(56px, auto) 44px minmax(0, 1fr) auto 100px; } }

/* ── Barra do estúdio no rodapé: rss próprio + botões dos cargos (05/10 17h40) ── */
.modo-estudio .player, .modo-estudio #contagem-apuracao, .modo-estudio footer.rodape, .modo-estudio .rodape { display: none !important; }
.modo-estudio .conteudo { padding-bottom: 120px !important; }
.ap-est-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: var(--azul); color: var(--branco); box-shadow: 0 -3px 14px rgba(0,0,0,.4); }
.ap-est-ticker { overflow: hidden; background: var(--azul); border-top: 3px solid var(--amarelo); height: 42px; display: flex; align-items: center; }
.ap-est-fita { display: flex; width: max-content; animation: ap-est-rola 90s linear infinite; }
.ap-est-fita:hover { animation-play-state: paused; }
.ap-est-inner { display: flex; gap: 0; white-space: nowrap; }
.ap-est-inner span { padding: 0 34px; font-size: 1.15rem; font-weight: 600; color: #E3EDF8; }
.ap-est-inner strong { color: var(--amarelo); font-weight: 900; }
@keyframes ap-est-rola { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ap-est-botoes { display: flex; align-items: center; gap: 12px; padding: 10px 18px; }
.ap-est-cargos { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: center; }
.ap-est-cargos button, .ap-est-show { background: rgba(255,255,255,.1); color: var(--branco); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.ap-est-cargos button:hover, .ap-est-show:hover { background: rgba(255,255,255,.2); }
.ap-est-cargos button.ativo { background: var(--amarelo); color: var(--azul); border-color: var(--amarelo); }
.ap-est-show { background: var(--magenta); border-color: var(--magenta); }
.ap-show-dica { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ap-show-dica button { background: rgba(255,255,255,.12); color: var(--branco); border: 0; border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; font-size: .95rem; }
.ap-show-dica button:hover { background: var(--amarelo); color: var(--azul); }
.ap-show-dica small { color: #8FA8C6; margin-left: 10px; }

/* ── 8 candidatos por tela no estúdio e na apresentação (05/10 17h50) ── */
.ap-contando { color: var(--amarelo) !important; }
.modo-estudio .ap-cand { padding: 6px 0 !important; column-gap: 12px !important; grid-template-columns: 30px minmax(66px, auto) 44px minmax(0, 1fr) auto 118px !important; }
.modo-estudio .ap-foto { width: 44px !important; height: 44px !important; }
.modo-estudio .ap-nome { font-size: 1.35rem !important; line-height: 1.15; }
.modo-estudio .ap-nome small { font-size: .95rem !important; }
.modo-estudio .ap-votos { font-size: 1.25rem !important; }
.modo-estudio .ap-pct { font-size: 1.7rem !important; line-height: 1.1; }
.modo-estudio .ap-num { font-size: 1.15rem !important; padding: 4px 0 !important; }
.modo-estudio .ap-barra { height: 7px !important; margin-top: 2px !important; }
.modo-estudio .ap-abr { padding: 10px 20px 8px !important; }
.modo-estudio .ap-abr-topo { margin-bottom: 4px !important; }
.modo-estudio .ap-abr-topo h3 { font-size: 1.5rem !important; }
.modo-estudio .secao-titulo { margin: 8px 0 6px !important; font-size: 1.5rem !important; }
.ap-show-corpo .ap-abr { padding: 14px 30px 10px !important; }
.ap-show-corpo .ap-abr-topo h3 { font-size: 2.1rem !important; }
.ap-show-corpo .ap-cand { padding: 9px 0 !important; column-gap: 18px !important; grid-template-columns: 40px minmax(90px, auto) 66px minmax(0, 1fr) auto 180px !important; }
.ap-show-corpo .ap-foto { width: 66px !important; height: 66px !important; }
.ap-show-corpo .ap-nome { font-size: 2rem !important; }
.ap-show-corpo .ap-nome small { font-size: 1.2rem !important; }
.ap-show-corpo .ap-votos { font-size: 1.8rem !important; }
.ap-show-corpo .ap-pct { font-size: 2.6rem !important; }
.ap-show-corpo .ap-num { font-size: 1.6rem !important; padding: 5px 8px !important; }
.ap-show-corpo .ap-barra { height: 10px !important; }

/* ── Apresentação: 6 por quadro, logo branca (05/10 18h) ── */
.ap-show-logo { height: 36px; width: auto; margin-right: 6px; filter: brightness(0) invert(1); opacity: .95; }
.ap-show-pag { font-size: 1.1rem; color: #BFD3EA; font-weight: 700; margin-left: 10px; vertical-align: middle; }
.ap-show-corpo .ap-abr { max-width: 1760px !important; padding: 18px 34px 14px !important; }
.ap-show-corpo .ap-cand { padding: 13px 0 !important; grid-template-columns: 44px minmax(96px, auto) 76px minmax(0, 1fr) auto 200px !important; }
.ap-show-corpo .ap-foto { width: 76px !important; height: 76px !important; }
.ap-show-corpo .ap-nome { font-size: 2.3rem !important; }
.ap-show-corpo .ap-votos { font-size: 2rem !important; }
.ap-show-corpo .ap-pct { font-size: 3rem !important; }
.ap-show-corpo .ap-barra { height: 12px !important; }
.ap-show-corpo .ap-cand:last-child { border-bottom: 0; }
.modo-estudio .ap-est-botoes img.ap-est-logo { height: 28px; filter: brightness(0) invert(1); opacity: .9; margin-left: 6px; }
/* ── Apresentação: 6 linhas preenchem a tela; nulos corrigidos p/ ptvn (05/10 18h05) ── */
.ap-show-corpo a, .ap-show-corpo a:hover { text-decoration: none !important; color: inherit !important; }
.ap-show-corpo .ap-abr { padding: 20px 40px 16px !important; }
.ap-show-corpo .ap-cand { padding: 17px 0 !important; grid-template-columns: 50px minmax(110px, auto) 90px minmax(0, 1fr) auto 230px !important; column-gap: 22px !important; }
.ap-show-corpo .ap-foto { width: 90px !important; height: 90px !important; }
.ap-show-corpo .ap-num { font-size: 1.9rem !important; padding: 7px 10px !important; }
.ap-show-corpo .ap-nome { font-size: 2.7rem !important; }
.ap-show-corpo .ap-nome small { font-size: 1.4rem !important; }
.ap-show-corpo .ap-votos { font-size: 2.3rem !important; }
.ap-show-corpo .ap-pct { font-size: 3.4rem !important; }
.ap-show-corpo .ap-barra { height: 14px !important; margin-top: 6px !important; }
.ap-show-corpo .ap-rodape { font-size: 1.25rem !important; margin-top: 10px !important; }
.ap-show-corpo .ap-pos { font-size: 1.4rem !important; }
@media (max-height: 900px) { .ap-show-corpo .ap-cand { padding: 10px 0 !important; } .ap-show-corpo .ap-foto { width: 64px !important; height: 64px !important; } .ap-show-corpo .ap-nome { font-size: 2rem !important; } .ap-show-corpo .ap-pct { font-size: 2.5rem !important; } .ap-show-corpo .ap-votos { font-size: 1.7rem !important; } }

/* 05/10 18h10: barra do estúdio sem rss, só botões */
.modo-estudio .conteudo { padding-bottom: 80px !important; }

/* ── Nome do candidato puro (05/10 18h20, ordem dele: "não quebre, deixe puro"):
   sem rosa/sublinhado no hover, selo de situação numa linha só, nome sem quebrar
   no estúdio e na apresentação. Hover vira só um realce leve da linha. ── */
.ap-cand-link:hover .ap-nome { color: inherit !important; text-decoration: none !important; }
.ap-cand-link:hover { background: rgba(255, 255, 255, .04); }
.ap-sit { white-space: nowrap; }
.modo-estudio .ap-nome, .ap-show-corpo .ap-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.modo-estudio .ap-cand-link:hover .ap-nome, .ap-show-corpo .ap-cand-link:hover .ap-nome { color: var(--branco) !important; }
/* Apresentação: tamanhos acompanham a largura da tela, nome nunca corta (05/10 18h25) */
.ap-show-corpo .ap-cand { grid-template-columns: clamp(30px, 2.4vw, 50px) minmax(clamp(70px, 5.6vw, 110px), auto) clamp(60px, 4.7vw, 90px) minmax(0, 1fr) auto clamp(140px, 11.5vw, 230px) !important; column-gap: clamp(12px, 1.1vw, 22px) !important; }
.ap-show-corpo .ap-foto { width: clamp(60px, 4.7vw, 90px) !important; height: clamp(60px, 4.7vw, 90px) !important; }
.ap-show-corpo .ap-nome { font-size: clamp(1.4rem, 2.05vw, 2.7rem) !important; }
.ap-show-corpo .ap-nome small { font-size: clamp(.95rem, 1.05vw, 1.4rem) !important; }
.ap-show-corpo .ap-sit { font-size: clamp(.7rem, .75vw, 1rem) !important; }
.ap-show-corpo .ap-votos { font-size: clamp(1.3rem, 1.75vw, 2.3rem) !important; }
.ap-show-corpo .ap-pct { font-size: clamp(2rem, 2.6vw, 3.4rem) !important; }
.ap-show-corpo .ap-num { font-size: clamp(1.2rem, 1.45vw, 1.9rem) !important; }
.modo-estudio .ap-nome { overflow: visible; text-overflow: clip; }
.ap-show-corpo .ap-nome { overflow: visible; text-overflow: clip; }

/* ── Mapa como último slide da apresentação (05/10 18h35) ── */
.ap-show-mapa { width: 100%; max-width: 1760px; display: flex; flex-direction: column; gap: 10px; }
.ap-show-mapa .ap-abas { justify-content: center; }
.ap-show-mapa .ap-aba { font-size: 1.15rem; padding: 10px 22px; }
.ap-show-mapa .ap-mapa-grade { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr) !important; gap: 20px; align-items: stretch; }
.ap-show-mapa .ap-mapa-caixa { max-width: none !important; width: 100%; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; justify-content: center; }
.ap-show-mapa .ap-mapa-caixa svg { width: 100%; height: auto; max-height: calc(100vh - 230px); }
.ap-show-mapa .ap-mapa-painel { max-width: none !important; position: static; max-height: calc(100vh - 210px); overflow: auto; background: rgba(255,255,255,.06) !important; border-color: var(--amarelo) !important; color: var(--branco); }
.ap-show-mapa .ap-mapa-legenda { color: #BFD3EA; }
.ap-show-btn-mapa { background: var(--azul-claro) !important; }
.ap-est-mapa { background: var(--azul-claro) !important; border-color: var(--azul-claro) !important; margin-right: 8px; }
@media (max-width: 1100px) { .ap-show-mapa .ap-mapa-grade { grid-template-columns: 1fr !important; } }

/* ── Painel do mapa na apresentação: tamanho próprio, compacto (05/10 18h45,
   "ficou muito grande"). As regras .ap-show-corpo .ap-* dos quadros não valem aqui. ── */
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-cand { grid-template-columns: 22px minmax(46px, auto) 40px minmax(0, 1fr) auto 78px !important; column-gap: 10px !important; padding: 8px 0 !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-foto { width: 40px !important; height: 40px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-num { font-size: 1rem !important; padding: 3px 6px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-nome { font-size: 1.1rem !important; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-nome small { font-size: .8rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-sit { font-size: .65rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-votos { font-size: 1rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-pct { font-size: 1.35rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-pos { font-size: .95rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-barra { height: 6px !important; margin-top: 3px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel h3 { font-size: 1.3rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel { padding: 14px 18px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-secoes { font-size: .95rem !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-lista { width: 100%; }

/* ── Slide do mapa: mapa menor e à esquerda, painel maior com letra maior
   (05/10 18h55, "ficou muito pequena a letra / diminua o mapa e arraste p/ esquerda") ── */
.ap-show-mapa .ap-mapa-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 24px !important; }
.ap-show-mapa .ap-mapa-caixa { justify-self: start !important; padding: 8px 10px !important; }
.ap-show-mapa .ap-mapa-caixa svg { max-height: calc(100vh - 290px) !important; width: 100% !important; margin: 0 auto 0 0 !important; display: block; }
.ap-show-mapa .ap-abas { justify-content: flex-start !important; padding-left: 4px; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel { padding: 18px 24px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel h3 { font-size: clamp(1.4rem, 1.6vw, 2rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-secoes { font-size: clamp(1rem, 1vw, 1.25rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-cand { grid-template-columns: clamp(22px, 1.6vw, 30px) minmax(clamp(52px, 4vw, 72px), auto) clamp(46px, 3.4vw, 62px) minmax(0, 1fr) auto clamp(84px, 7vw, 130px) !important; column-gap: clamp(8px, .8vw, 14px) !important; padding: clamp(8px, .8vw, 13px) 0 !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-foto { width: clamp(46px, 3.4vw, 62px) !important; height: clamp(46px, 3.4vw, 62px) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-num { font-size: clamp(1.1rem, 1.15vw, 1.5rem) !important; padding: 4px 8px !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-nome { font-size: clamp(1.25rem, 1.45vw, 1.9rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-nome small { font-size: clamp(.85rem, .85vw, 1.1rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-sit { font-size: clamp(.65rem, .65vw, .85rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-votos { font-size: clamp(1.1rem, 1.25vw, 1.65rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-pct { font-size: clamp(1.5rem, 1.8vw, 2.4rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-pos { font-size: clamp(1rem, 1vw, 1.3rem) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-barra { height: clamp(6px, .5vw, 10px) !important; }
.ap-show-corpo .ap-show-mapa .ap-mapa-painel .ap-painel-sub, .ap-show-corpo .ap-show-mapa .ap-mapa-painel h4 { font-size: clamp(1rem, 1.05vw, 1.35rem) !important; }

/* ── Sem contorno fino nas caixas (05/10 19h05, ordem dele: "em todos tem uma
   pequena borda, ajuste para que não exista"). Vale no estúdio e na apresentação.
   Ficam só os destaques de propósito: amarelo (busca, painel do mapa) e rosa
   (bloco de Lavras), e a faixa colorida à esquerda dos cartões de estado. ── */
.modo-estudio .ap-abr:not(.ap-estado),
.modo-estudio .ap-status,
.modo-estudio .ap-prog,
.modo-estudio .ap-brasil,
.modo-estudio .ap-mapa-caixa,
.ap-show-corpo .ap-abr,
.ap-show-mapa .ap-mapa-caixa { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
.modo-estudio .ap-abr.ap-estado { border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; }

/* Ícones de rede em SVG monocromático que seguem a cor do texto (ordem dele, 05/10/2026
   17h57: "altere para ícones brancos automáticos"). Emoji colorido saiu do rodapé e do
   Quem somos; qualquer lugar que use .ico herda a cor do link, sem imagem nem filtro. */
.ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.15em; margin-right: .35em; flex: 0 0 auto; }
.rodape-social a { display: inline-flex; align-items: center; color: var(--branco); margin-right: 14px; }
.rodape-social a:hover { color: var(--amarelo); }

/* ── Apresentação escala também pela ALTURA (05/10/2026 18h12, "está grande ainda porra").
   Medido: o quadro de 6 nomes tinha 656 px num corpo de 562 (1280x720) e 671 em 642 (1440x800):
   rolava e o título sumia. Os clamps anteriores só olhavam a largura (vw) e tinham pisos altos
   (foto 60 px, padding 17 px fixo). Aqui tudo usa min(vw, vh) com pisos baixos: na TV 1920x1080
   os valores batem nos de antes; em notebook encolhe até caber sem rolagem. ── */
.ap-show-topo { font-size: clamp(.9rem, min(1.3vw, 2.4vh), 1.6rem) !important; padding: clamp(5px, 1.5vh, 16px) clamp(12px, 1.5vw, 28px) !important; gap: clamp(8px, 1vw, 18px) !important; }
.ap-show-botoes button { font-size: clamp(.75rem, min(.85vw, 1.5vh), 1rem) !important; padding: clamp(5px, .9vh, 10px) clamp(9px, .9vw, 16px) !important; }
.ap-show-seta { font-size: clamp(2rem, 4.6vh, 5rem) !important; }
.ap-show-corpo { padding: 0 clamp(4px, .5vw, 10px) clamp(4px, .9vh, 10px) !important; }
.ap-show-corpo .ap-abr { padding: clamp(5px, 1.6vh, 20px) clamp(12px, 2.1vw, 40px) clamp(4px, 1.5vh, 16px) !important; border-radius: clamp(10px, 2vh, 22px) !important; }
.ap-show-corpo .ap-abr-topo { margin-bottom: clamp(2px, .75vh, 8px) !important; }
.ap-show-corpo .ap-abr-topo h3 { font-size: clamp(1rem, min(1.8vw, 3.6vh), 2.4rem) !important; }
.ap-show-corpo .ap-secoes { font-size: clamp(.7rem, min(1vw, 1.85vh), 1.4rem) !important; }
.ap-show-corpo .ap-cand { padding: clamp(2px, 1.35vh, 17px) 0 !important; column-gap: clamp(6px, 1.15vw, 22px) !important;
  grid-template-columns: clamp(20px, 2.4vw, 50px) minmax(clamp(48px, 5.6vw, 110px), auto) clamp(34px, min(4.7vw, 8.1vh), 90px) minmax(0, 1fr) auto clamp(96px, 11.5vw, 230px) !important; }
.ap-show-corpo .ap-foto { width: clamp(34px, min(4.7vw, 8.1vh), 90px) !important; height: clamp(34px, min(4.7vw, 8.1vh), 90px) !important; }
.ap-show-corpo .ap-nome { font-size: clamp(.95rem, min(2.05vw, 4vh), 2.7rem) !important; }
.ap-show-corpo .ap-nome small { font-size: clamp(.7rem, min(1.05vw, 2.05vh), 1.4rem) !important; }
.ap-show-corpo .ap-sit { font-size: clamp(.55rem, min(.65vw, 1.25vh), .85rem) !important; }
.ap-show-corpo .ap-votos { font-size: clamp(.9rem, min(1.75vw, 3.4vh), 2.3rem) !important; }
.ap-show-corpo .ap-pct { font-size: clamp(1.2rem, min(2.6vw, 5vh), 3.4rem) !important; }
.ap-show-corpo .ap-num { font-size: clamp(.85rem, min(1.45vw, 2.8vh), 1.9rem) !important; padding: clamp(2px, .65vh, 7px) clamp(5px, .55vw, 10px) !important; }
.ap-show-corpo .ap-barra { height: clamp(4px, 1.2vh, 14px) !important; margin-top: clamp(1px, .4vh, 6px) !important; }
.ap-show-corpo .ap-rodape { font-size: clamp(.7rem, min(.9vw, 1.5vh), 1.05rem) !important; margin-top: clamp(2px, .7vh, 10px) !important; }
.ap-show-rodape { padding: clamp(3px, .9vh, 10px) clamp(12px, 1.5vw, 28px) clamp(4px, 1.5vh, 16px) !important; font-size: clamp(.7rem, min(.85vw, 1.5vh), 1rem) !important; }
.ap-show-dots i { width: clamp(5px, .8vh, 9px) !important; height: clamp(5px, .8vh, 9px) !important; }

/* Mapa das Eleições 2026 — "O Brasil nas urnas" (05/10/2026). Página em .modo-estudio. */
.mapa-wrap{max-width:1000px;margin:0 auto;padding:8px 16px 48px}
.mapa-cab{text-align:center;padding:10px 0}
.mapa-titulo{color:var(--amarelo)}
.mapa-sub{color:#BFD3EA;max-width:680px;margin:6px auto 0;line-height:1.5}
.mapa-h2{color:var(--amarelo);text-align:center;font-size:1.4rem;margin-bottom:10px}
.brasil-box,.mapa-sec,.mapa-cta,.mapa-video{background:#1b4c82;border:1px solid #2f68a6;border-radius:14px;padding:20px 18px;margin:18px 0}
.brasil-barra{max-width:620px;margin:0 auto}
.bz-linha{margin:14px 0}
.bz-top{display:flex;justify-content:space-between;color:#fff;font-weight:700;font-size:1.1rem}
.bz-trilho{height:26px;background:#0B1E42;border-radius:6px;overflow:hidden;margin:4px 0}
.bz-fill{height:100%;width:0;border-radius:6px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bz-flavio{background:#1F5BD6}
.bz-lula{background:#E30613}
.bz-votos{color:#8aa0c4;font-size:.85rem}
.mapa-legenda{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:10px;color:#BFD3EA}
.mapa-legenda .sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle;margin-right:6px}
.sw.flavio{background:#2b6cb0}.sw.lula{background:#c0392b}
.mapa-br{width:100%}
.mapa-svg{width:100%;height:auto;max-height:640px;display:block}
.uf{stroke:#0B1E42;stroke-width:1;opacity:0;transform:scale(.96);transform-origin:center;transition:opacity .5s ease,transform .5s ease,fill .2s;cursor:pointer}
.uf.on{opacity:1;transform:scale(1)}
.uf-flavio{fill:#2b6cb0}.uf-lula{fill:#c0392b}
.uf:hover{fill:var(--amarelo);stroke:#fff;stroke-width:1.5}
.uf-sigla{fill:#fff;font-size:15px;font-weight:700;text-anchor:middle;pointer-events:none;font-family:Arial,sans-serif;paint-order:stroke;stroke:#0B1E42;stroke-width:2px}
.mapa-cta{text-align:center}.mapa-cta p{color:#BFD3EA;margin:6px 0 14px}
.video-moldura{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden}
.video-moldura iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-nota{color:#8aa0c4;text-align:center;font-size:.9rem;margin-top:8px}
.mapa-fonte{color:#7d8db0;font-size:.82rem;text-align:center;margin-top:18px;line-height:1.5}
.mapa-tip{position:fixed;display:none;z-index:9999;background:#0B1E42;border:1px solid var(--amarelo);border-radius:10px;padding:10px 12px;max-width:230px;box-shadow:0 8px 24px rgba(0,0,0,.55);pointer-events:none}
.mapa-tip .mt-uf{color:var(--amarelo);font-weight:800;margin-bottom:6px}
.mapa-tip .mt-linha{color:#cfe0f2;font-size:.92rem;margin:3px 0}
.mapa-tip .mt-linha.lid{color:#fff;font-weight:700}
.mapa-tip .mt-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.mapa-tip .mt-dot.flavio{background:#2b6cb0}.mapa-tip .mt-dot.lula{background:#c0392b}

/* Modo estúdio é para telão de transmissão. No celular: esconder a entrada
   (o modo normal já é completo) e, se aberto, compactar a barra de cargos. 05/10/2026. */
@media (max-width: 720px){
  .ap-so-desktop{display:none !important}
  .ap-est-botoes{flex-wrap:wrap;gap:8px;padding:8px 10px;justify-content:center}
  .ap-est-botoes img{height:22px !important}
  .ap-est-cargos{gap:6px;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .ap-est-cargos button,.ap-est-show{font-size:.8rem;padding:7px 12px;white-space:nowrap}
}

/* FIX FINAL (05/10/2026): no celular o modo estúdio tinha regra !important de 6
   colunas que colidia votos x porcentagem. Esta, por ser a última e !important,
   crava o empilhamento: nome em cima, votos+pct embaixo, barra ocupando a linha. */
@media (max-width: 720px){
  .modo-estudio .ap-cand{
    grid-template-columns: 22px 46px 40px minmax(0,1fr) auto !important;
    grid-template-areas: "pos num foto nome nome" "pos num foto votos pct" "barra barra barra barra barra" !important;
    column-gap: 8px !important; row-gap: 2px !important;
  }
  .modo-estudio .ap-nome{ font-size: 1.05rem !important; }
  .modo-estudio .ap-votos{ font-size: .92rem !important; text-align: left !important; }
  .modo-estudio .ap-pct{ font-size: 1.25rem !important; text-align: right !important; }
}

/* Apresentação em tela cheia (ap-show) no celular: rodapé em pilha, cargos em
   carrossel horizontal, sem a dica de teclado, setas e topo menores. 05/10/2026. */
@media (max-width: 720px){
  .ap-show{grid-template-columns:32px 1fr 32px}
  .ap-show-topo{padding:10px 12px;font-size:1.05rem;gap:8px;flex-wrap:wrap}
  .ap-show-logo{height:26px}
  .ap-show-botoes{gap:8px}
  .ap-show-botoes button{padding:7px 12px;font-size:.85rem}
  .ap-show-seta{font-size:2.4rem}
  .ap-show-rodape{flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px 14px}
  .ap-show-dots{justify-content:center}
  .ap-show-dica{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:8px;-webkit-overflow-scrolling:touch}
  .ap-show-dica button{padding:7px 12px;font-size:.82rem;white-space:nowrap}
  .ap-show-dica small{display:none}
}

/* Mapa das cidades de Minas (choropleth, 05/10/2026). */
.cid{stroke:#0f3560;stroke-width:.3;cursor:pointer;transition:opacity .1s,stroke-width .1s}
.cid:hover{stroke:#fff;stroke-width:1.2;opacity:.85}
.mapa-legenda-grad{gap:28px}
.mapa-legenda-grad .grad{display:inline-block;width:64px;height:12px;border-radius:3px;vertical-align:middle;margin:0 7px}
.grad-flavio{background:#1F5BD6}
.grad-lula{background:#E30613}

/* ===== Eleições 2026 — página única /eleicoes (05/10/2026) ===== */
.modo-estudio .elx-nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;gap:16px;
  padding:10px 18px;background:rgba(10,34,66,.92);backdrop-filter:blur(6px);border-bottom:1px solid #2f68a6}
.elx-nav-logo{height:34px}
.elx-nav-links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.elx-nav-links a{color:#cfe0f2;text-decoration:none;font-weight:700;font-size:.92rem;padding:7px 12px;border-radius:999px}
.elx-nav-links a:hover{background:#2f68a6;color:#fff}
html{scroll-behavior:smooth}
.elx-hero{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:90px 18px 40px;
  background:radial-gradient(circle at 50% 30%,#0a6ea0,#134274 55%,#0a2c50)}
.elx-hero-tit{font-size:4.2rem;font-weight:900;color:var(--amarelo);line-height:1;margin:14px 0}
.elx-hero-sub{color:#dff0ff;max-width:620px;margin:0 auto;font-size:1.25rem;line-height:1.5}
.elx-hero-seta{display:inline-block;margin-top:34px;color:var(--amarelo);font-size:3rem;text-decoration:none;animation:elxpula 1.6s ease-in-out infinite}
@keyframes elxpula{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.elx-sec{padding:60px 18px;display:flex;justify-content:center}
.elx-bloco{width:100%;max-width:1000px;background:#1b4c82;border:1px solid #2f68a6;border-radius:16px;padding:28px 22px;text-align:center}
.elx-h2{color:var(--amarelo);font-size:2rem;margin-bottom:8px}
.elx-lead{color:#dff0ff;font-size:1.15rem;max-width:680px;margin:0 auto 18px;line-height:1.5}
.elx-nota{color:#8aa0c4;font-size:.9rem;margin-top:10px}
.elx-barra{max-width:620px;margin:0 auto}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}
/* B: mapa sticky */
.elx-mapa-wrap{position:relative;height:320vh}
.elx-mapa-gatilhos{display:none}
.elx-mapa-sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#17508a,#0e3a68)}
.elx-mapa-palco{position:absolute;inset:0}
.elx-svg{position:absolute;inset:0;margin:auto;width:auto;height:90%;max-width:96%;will-change:transform,opacity}
.elx-camada-cidades{opacity:0}
.elx-mapa-passo{position:absolute;left:24px;bottom:28px;max-width:360px;background:rgba(10,34,66,.82);border-left:4px solid var(--amarelo);
  border-radius:0 10px 10px 0;padding:14px 18px;text-align:left}
.elx-mapa-passo b{color:var(--amarelo);display:block;font-size:1.4rem}
.elx-mapa-passo span{color:#dff0ff;font-size:1rem}
/* Sua cidade */
.elx-busca{width:100%;max-width:460px;padding:14px 18px;border-radius:999px;border:2px solid #2f68a6;background:#0e3a68;color:#fff;font-size:1.1rem;outline:none}
.elx-busca:focus{border-color:var(--amarelo)}
.elx-cidade-res{max-width:460px;margin:14px auto 18px;text-align:left}
.elx-cidade-item{width:100%;display:flex;align-items:center;gap:10px;background:#0e3a68;border:1px solid #2f68a6;color:#fff;border-radius:10px;padding:10px 14px;margin:6px 0;cursor:pointer}
.elx-cidade-item:hover{background:#17508a}
.eci-nome{font-weight:800}.eci-lider{font-size:.85rem;margin-left:auto}.eci-lider.flavio{color:#8cc0 f0}.eci-lider.flavio{color:#8cc0f0}.eci-lider.lula{color:#f0a6a0}
.eci-pct{font-weight:800;color:var(--amarelo)}
.elx-cidade-ficha{background:#0e3a68;border:1px solid var(--amarelo);border-radius:12px;padding:16px;max-width:460px;margin:0 auto}
.ecf-nome{color:var(--amarelo);font-weight:800;font-size:1.3rem;margin-bottom:8px}
.ecf-linha{color:#cfe0f2;font-size:1rem;margin:5px 0}.ecf-linha.lid{color:#fff;font-weight:700}
.ecf-linha .mt-dot,.elx-cidade-ficha .mt-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px}
.mt-dot.flavio{background:#2b6cb0}.mt-dot.lula{background:#c0392b}
/* Congresso na página */
.elx-casa{background:#0e3a68;border:1px solid #2f68a6;border-radius:14px;padding:16px;margin:16px 0}
.elx-casa-nome{color:#fff;font-size:1.3rem;text-align:center;margin-bottom:4px}
.elx-casa-nome span{color:#BFD3EA;letter-spacing:3px;font-size:.9rem}
/* Rodapé */
.elx-rodape{background:#0a2c50;text-align:center;padding:36px 18px;color:#aebfd6;border-top:1px solid #2f68a6}
.elx-rod-logo{height:44px;margin-bottom:8px}
.elx-rod-selo{height:48px;display:block;margin:10px auto}
.elx-rodape p{font-size:.9rem;line-height:1.6;margin-top:8px}
@media (max-width:720px){
  .elx-hero-tit{font-size:2.8rem}.elx-hero-sub{font-size:1.05rem}
  .elx-nav-logo{height:28px}.elx-nav-links a{font-size:.8rem;padding:6px 9px}
  .elx-h2{font-size:1.5rem}.elx-lead{font-size:1rem}
  .elx-mapa-passo{left:12px;right:12px;bottom:16px;max-width:none}
  .elx-mapa-passo b{font-size:1.1rem}
}

/* Botão "Veja os números da apuração" no cabeçalho de Política - Eleições 2026 (06/10/2026) */
.pinga-botao-ap { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 22px; border-radius: 999px; background: var(--amarelo); color: var(--azul) !important; font-weight: 900; font-size: 1.05rem; text-decoration: none !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .15s ease, box-shadow .15s ease; }
.pinga-botao-ap:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
@media (max-width: 600px) { .pinga-botao-ap { display: flex; justify-content: center; width: 100%; } }

/* ── Votação por estado direto na página da apuração (06/10/2026) ── */
.ap-ufs-sec { margin: 0 0 16px; }
.ap-ufs-rotulo { margin: 0 0 8px; }
.ap-ufs-sec .est-ufs { margin-bottom: 0; }
.ap-ufs-sec .est-ufs .ap-aba[data-uf="br"], .ap-ufs-sec .est-ufs .ap-aba[data-uf="mg"] { font-weight: 900; background: var(--azul-claro); color: var(--branco); }
.ap-ufs-sec .est-ufs .ap-aba.ativa { background: var(--azul) !important; color: var(--branco) !important; }
.ap-ufs-sec .est-resultado { margin-top: 12px; position: relative; }
.est-fechar { float: right; margin: 4px 0 8px 12px; background: var(--cinza-fundo); border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 800; cursor: pointer; color: var(--preto); }
.est-fechar:hover { background: var(--magenta); color: var(--branco); }
.modo-estudio .ap-ufs-sec { display: none; }

/* ===== TEMA NEON do modo estúdio (08/10/2026, prévia pedida pelo Erlandson) =====
   Abre com /apuracao?estudio=1&tema=neon. Paleta aprovada para os vídeos:
   azul escuro #1C1599, verde neon #FD6301, laranja neon #FD6301. Gerado a partir
   das regras .modo-estudio trocando só as cores; o estúdio normal não muda. */
.modo-estudio.tema-neon { background: #1C1599; color: var(--branco); }
.modo-estudio.tema-neon .ap-status { background: #1C1499; border-color: #3A30C4; color: var(--branco); font-size: 1.2rem; }
.modo-estudio.tema-neon .ap-hora { color: #D8D5FF; }
.modo-estudio.tema-neon .secao-titulo { color: #FD6301; border-left-color: #FD6301; font-size: 1.6rem; }
.modo-estudio.tema-neon .ap-abr { background: #1C1499; border-color: #3A30C4; }
.modo-estudio.tema-neon .ap-lavras .ap-abr-topo h3 { color: #FD6301; }
.modo-estudio.tema-neon .ap-secoes, .modo-estudio.tema-neon .ap-rodape, .modo-estudio.tema-neon .ap-nota, .modo-estudio.tema-neon .ap-pos, .modo-estudio.tema-neon .ap-nome small { color: #D8D5FF; }
.modo-estudio.tema-neon .ap-cand { border-bottom-color: #3A30C4; padding: 11px 0; grid-template-columns: 28px 56px 48px 1fr auto 96px; }
.modo-estudio.tema-neon .ap-foto { width: 48px; height: 48px; border-color: #3A30C4; background: #3A30C4; }
.modo-estudio.tema-neon .ap-pct { font-size: 1.6rem; color: #FD6301; }
.modo-estudio.tema-neon .ap-num { font-size: 1.1rem; background: #3A30C4; }
.modo-estudio.tema-neon .ap-barra { background: #3A30C4; height: 8px; }
.modo-estudio.tema-neon .ap-eleito .ap-pct { color: #FD6301; }
.modo-estudio.tema-neon .ap-busca { background: #1C1499; border-color: #FD6301; }
.modo-estudio.tema-neon .ap-busca-rotulo { color: #FD6301; }
.modo-estudio.tema-neon .ap-busca-campo, .modo-estudio.tema-neon .ap-busca-cargo { background: #08045A; color: var(--branco); border-color: #3A30C4; font-size: 1.4rem; }
.modo-estudio.tema-neon .bc-item { border-top-color: #3A30C4; }
.modo-estudio.tema-neon .bc-sub, .modo-estudio.tema-neon .bc-resumo, .modo-estudio.tema-neon .ap-busca-dica { color: #D8D5FF; }
.modo-estudio.tema-neon .bc-col { background: #08045A; color: var(--branco); }
.modo-estudio.tema-neon .bc-pct { color: #FD6301; font-size: 1.2rem; }
.modo-estudio.tema-neon .bc-abr, .modo-estudio.tema-neon .bc-pos { color: #D8D5FF; }
.modo-estudio.tema-neon .ap-brasil { background: #1C1499; border-color: #3A30C4; }
.modo-estudio.tema-neon .ap-mapa-caixa { background: #08045A; }
.modo-estudio.tema-neon .mapa-uf { stroke: #08045A; }
.modo-estudio.tema-neon .mapa-rotulo { fill: var(--branco); stroke: rgba(8,4,90,.9); }
.modo-estudio.tema-neon .ap-mapa-painel { background: #1C1499; border-color: #FD6301; }
.modo-estudio.tema-neon .ap-mapa-painel h3, .modo-estudio.tema-neon .ap-lugar-topo h3, .modo-estudio.tema-neon .ap-estados-titulo, .modo-estudio.tema-neon .ap-painel-sub { color: #FD6301; }
.modo-estudio.tema-neon .ap-abas { background: #08045A; }
.modo-estudio.tema-neon .ap-aba.ativa { background: #FD6301; color: var(--preto); }
.modo-estudio.tema-neon .ap-sugestoes { background: #1C1499; border-color: #3A30C4; color: var(--branco); }
.modo-estudio.tema-neon .ap-sugestoes li:hover { background: #08045A; }
.modo-estudio.tema-neon .cand-modal-caixa { background: #1C1499; color: var(--branco); }
.modo-estudio.tema-neon .cand-bloco h2, .modo-estudio.tema-neon .cand-bloco h3, .modo-estudio.tema-neon .cand-redes a { color: #FD6301; }
.modo-estudio.tema-neon .cand-dl dt, .modo-estudio.tema-neon .cand-tabela th, .modo-estudio.tema-neon .cand-fonte, .modo-estudio.tema-neon .cand-tabela small { color: #D8D5FF; }
.modo-estudio.tema-neon .cand-tabela th, .modo-estudio.tema-neon .cand-tabela td { border-bottom-color: #3A30C4; }
.modo-estudio.tema-neon .cand-redes a, .modo-estudio.tema-neon .cand-votos .bc-col { background: #08045A; }
.modo-estudio.tema-neon .ap-prog { background: #1C1499; border-color: #3A30C4; }
.modo-estudio.tema-neon .ap-prog-nome, .modo-estudio.tema-neon .ap-prog-pct { color: #FD6301; font-size: 1.3rem; }
.modo-estudio.tema-neon .ap-prog-sub { color: #D8D5FF; font-size: 1rem; }
.modo-estudio.tema-neon .ap-prog-barra { background: #08045A; height: 14px; }
.modo-estudio.tema-neon .ap-lavras-bloco { background: rgba(253,99,1,.10); border-color: #FD6301; }
.modo-estudio.tema-neon .ap-lavras-titulo { color: #FD6301; border-left-color: #FD6301; }
.modo-estudio.tema-neon .ap-esperando { background: rgba(253,99,1,.18); color: #FD6301; }
.modo-estudio.tema-neon .ap-esperando small { color: #D8D5FF; }
.modo-estudio.tema-neon .est-ufs { background: #1C1499; border-color: #3A30C4; }
.modo-estudio.tema-neon .est-ufs .ap-aba { background: #08045A; color: var(--branco); }
.modo-estudio.tema-neon .est-ufs .ap-aba.ativa { background: #FD6301; color: var(--preto); }
.modo-estudio.tema-neon .ap-barra span, .modo-estudio.tema-neon .ap-prog-barra span { background: #FD6301; }
.modo-estudio.tema-neon .ap-aba.ativa, .modo-estudio.tema-neon .est-ufs .ap-aba.ativa { background: #FD6301; color: #1C1599; }
.modo-estudio.tema-neon .ap-eleito .ap-nome { color: #FD6301; }

/* ===== TEMA NEON: texto em branco (08/10/2026 ~15h45, Erlandson) =====
   "Não gosto do laranja neon sobre o azul. O botão com a letra branca dentro
   ficou legal, mas informações por escrito são melhores brancas."
   Papéis das cores no estúdio neon:
     branco #FFFFFF ......... todo texto escrito (títulos, nomes, porcentagens)
     lavanda #D8D5FF ........ texto de apoio (urnas apuradas, hora, rodapé)
     verde neon #FD6301 ..... só gráfico: barras (degradê verde->laranja), risco do título, aba ativa
     laranja neon #FD6301 ... só botão cheio com letra branca
     ciano #33D6FF (nova) ... interação: link, contorno da busca, foco
   Para voltar: apagar este bloco (backup em ~/backups/portal.css.bak-antes-neon-texto-branco-*). */
.modo-estudio.tema-neon .secao-titulo,
.modo-estudio.tema-neon .ap-lavras-titulo { color: #FFFFFF; border-left-color: #FD6301; }
.modo-estudio.tema-neon .ap-abr-topo h3,
.modo-estudio.tema-neon .ap-lavras .ap-abr-topo h3,
.modo-estudio.tema-neon .ap-mapa-painel h3,
.modo-estudio.tema-neon .ap-lugar-topo h3,
.modo-estudio.tema-neon .ap-estados-titulo,
.modo-estudio.tema-neon .ap-painel-sub,
.modo-estudio.tema-neon .cand-bloco h2,
.modo-estudio.tema-neon .cand-bloco h3 { color: #FFFFFF; }
.modo-estudio.tema-neon .ap-pct,
.modo-estudio.tema-neon .ap-eleito .ap-pct,
.modo-estudio.tema-neon .ap-eleito .ap-nome,
.modo-estudio.tema-neon .bc-pct,
.modo-estudio.tema-neon .ap-prog-nome,
.modo-estudio.tema-neon .ap-prog-pct { color: #FFFFFF; }
.modo-estudio.tema-neon .ap-busca { border-color: #33D6FF; }
.modo-estudio.tema-neon .ap-busca-rotulo { color: #FFFFFF; }
.modo-estudio.tema-neon .ap-busca-campo:focus,
.modo-estudio.tema-neon .ap-busca-cargo:focus { border-color: #33D6FF; outline: 2px solid rgba(51,214,255,.35); }
.modo-estudio.tema-neon .ap-mapa-painel { border-color: #33D6FF; }
.modo-estudio.tema-neon .ap-link,
.modo-estudio.tema-neon .cand-redes a { color: #33D6FF; }
.modo-estudio.tema-neon .ap-esperando { background: rgba(51,214,255,.12); color: #FFFFFF; }
/* Barras: o degrade neon verde->laranja FICA (ele pediu de volta, 08/10 ~16h). */
/* Faixa de manchetes do topo (vale para o portal todo): rótulo em branco. */
.ticker strong { color: #FFFFFF; }

/* ══ Mapa da apuração, nível profissional (08/10/2026, ordem do Erlandson) ══
   Paleta oficial: fundo azul chapado #1C1599, laranja neon #FD6301 (1º no país),
   verde neon #FD6301 (2º), texto branco e secundário #D8D5FF. Coroplético por
   margem (4 tons), rótulos sem sobreposição (coluna de chamadas à direita para
   os estados pequenos), dica no mouse, entrada em varredura Norte→Sul.
   JS: public/js/brasil-apuracao.js. Tudo aqui sobrepõe as regras antigas. */
.ap-mapa-grade { grid-template-columns: 1fr; }
@media (min-width: 1180px) {
  body:not(.modo-estudio) .ap-mapa-grade { grid-template-columns: minmax(0, 1.7fr) minmax(300px, .9fr); align-items: start; justify-items: stretch; gap: 18px; }
  body:not(.modo-estudio) .ap-mapa-grade .ap-mapa-painel { position: sticky; top: 64px; margin: 0; max-width: none; }
}
.modo-estudio .ap-brasil > .ap-mapa-grade .ap-mapa-caixa { max-width: 1100px; }
.ap-mapa-caixa { position: relative; background: #1C1599 !important; border: 1px solid #2E25C9; border-radius: 16px; padding: 18px 18px 16px; color: #FFFFFF; max-width: none; box-sizing: border-box; overflow: hidden;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ap-mapa-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 0 2px 6px; }
.ap-mapa-cab-cargo { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF; }
.ap-mapa-cab-cargo b { color: #FD6301; }
.ap-mapa-cab-apur { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: #D8D5FF; }
.ap-mapa-cab-barra { display: inline-block; width: 90px; height: 5px; border-radius: 3px; background: #2E25C9; overflow: hidden; }
.ap-mapa-cab-barra i { display: block; height: 100%; background: #FD6301; border-radius: 3px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.mapa-brasil { width: 100%; height: auto; max-height: 82vh; margin: 0 auto; display: block; overflow: visible; }
.mapa-brasil text.mapa-rotulo, .mapa-brasil .mapa-info { display: none; }
.mapa-brasil .mapa-uf, .modo-estudio .mapa-brasil .mapa-uf { fill: #2B23B8; stroke: #1C1599; stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; opacity: 1;
  transition: fill .75s cubic-bezier(.2,.8,.2,1), filter .2s ease, transform .2s ease, stroke-width .2s; transform-box: fill-box; transform-origin: center; outline: none; }
.mapa-brasil .mapa-uf:hover, .mapa-brasil .mapa-uf.mapa-hover, .mapa-brasil .mapa-uf:focus-visible { opacity: 1; stroke: #FFFFFF; stroke-width: 2.4; filter: drop-shadow(0 6px 10px rgba(5, 2, 50, .65)) brightness(1.08); transform: translateY(-3px); }
.mapa-brasil .mapa-uf.mapa-uf-sel { stroke: #FFFFFF; stroke-width: 3.6; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .55)); }
.mapa-camada { pointer-events: none; font-family: inherit; }
.mapa-sig { font-weight: 800; letter-spacing: .04em; dominant-baseline: middle; }
.mapa-num { font-weight: 600; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.mapa-apur2 { font-weight: 600; opacity: .8; dominant-baseline: middle; }
.mapa-guia { fill: none; stroke: rgba(216, 213, 255, .55); stroke-width: 1.1; }
.mapa-compacto .mapa-guia { stroke-width: 2; }
.mapa-guia-ponto { fill: #FFFFFF; stroke: #1C1599; stroke-width: 1.4; }
.mapa-chip { pointer-events: all; cursor: pointer; outline: none; }
.mapa-chip-fundo { fill: #120C7A; stroke: #2E25C9; stroke-width: 1; transition: fill .2s, stroke .2s; }
.mapa-chip:hover .mapa-chip-fundo, .mapa-chip.mapa-hover .mapa-chip-fundo, .mapa-chip:focus-visible .mapa-chip-fundo { fill: #2B23B8; stroke: #FFFFFF; }
.mapa-chip-cor { transition: fill .75s cubic-bezier(.2,.8,.2,1); }
.mapa-chip-sig { fill: #FFFFFF; font-weight: 800; letter-spacing: .04em; dominant-baseline: middle; }
.mapa-chip-pct { fill: #FFFFFF; font-weight: 600; dominant-baseline: middle; font-variant-numeric: tabular-nums; }
.mapa-chip-apur { fill: #FD6301; }
@keyframes mapa-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mapa-entra { animation: mapa-entra .55s cubic-bezier(.2,.8,.2,1) both; }
.mapa-rot.mapa-entra, .mapa-chip.mapa-entra { transform-box: fill-box; }

/* Legenda */
.ap-mapa-legenda, .modo-estudio .ap-mapa-legenda, .ap-show-mapa .ap-mapa-legenda { display: block; margin: 8px 2px 0; color: #D8D5FF; }
.ap-leg-cands { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.ap-leg-cand { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "foto nome pct" "foto est votos"; align-items: center; column-gap: 12px; row-gap: 2px; background: #120C7A; border: 1px solid #2E25C9; border-left: 5px solid var(--cor); border-radius: 12px; padding: 10px 14px 10px 10px; }
.ap-leg-cand img { grid-area: foto; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #2E25C9; box-shadow: 0 0 0 3px var(--cor); }
.ap-leg-nome { grid-area: nome; font-weight: 800; color: #FFFFFF; font-size: 1.02rem; line-height: 1.15; min-width: 0; }
.ap-leg-nome small { font-weight: 600; color: #D8D5FF; font-size: .78rem; margin-left: 3px; }
.ap-leg-pct { grid-area: pct; font-weight: 800; font-size: 1.55rem; color: var(--cor); text-align: right; line-height: 1; }
.ap-leg-votos { grid-area: votos; font-size: .74rem; color: #D8D5FF; text-align: right; }
.ap-leg-est { grid-area: est; font-size: .82rem; color: #D8D5FF; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ap-leg-est b { color: #FFFFFF; font-size: 1rem; }
.ap-leg-escala { display: inline-flex; gap: 2px; margin-left: 4px; }
.ap-leg-escala i { width: 16px; height: 9px; border-radius: 2px; display: inline-block; }
.ap-leg-fila { display: flex; gap: 2px; margin: 10px 0 0; }
.ap-leg-fila i { flex: 1 1 0; min-width: 0; font-style: normal; font-size: .6rem; font-weight: 800; text-align: center; padding: 6px 0; border-radius: 3px; cursor: pointer; letter-spacing: .02em; overflow: hidden; }
.ap-leg-fila i:hover { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.ap-leg-partidos { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ap-leg-part { display: inline-flex; align-items: center; gap: 7px; background: #120C7A; border: 1px solid #2E25C9; border-radius: 999px; padding: 5px 12px 5px 8px; color: #FFFFFF; font-size: .86rem; }
.ap-leg-part .ap-leg-escala { margin: 0; }
.ap-leg-part small { color: #D8D5FF; }
.ap-leg-nota, .ap-leg-vazio { margin: 10px 0 0; font-size: .74rem; color: #D8D5FF; line-height: 1.4; }

/* Dica flutuante */
.ap-mapa-dica { position: absolute; left: 0; top: 0; z-index: 20; width: 290px; pointer-events: none; background: #0E0966; border: 1px solid #3A30C4; border-radius: 12px; padding: 10px 12px; box-shadow: 0 14px 34px rgba(4, 2, 40, .55); color: #FFFFFF; font-size: .86rem; transition: transform .08s linear; }
.ap-mapa-dica[hidden] { display: none; }
.ap-dica-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ap-dica-topo b { font-size: 1rem; }
.ap-dica-topo span { font-size: .74rem; color: #FD6301; font-weight: 700; }
.ap-dica-c { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #2E25C9; }
.ap-dica-c img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cor); background: #2E25C9; }
.ap-dica-c:not(.lider) { opacity: .82; }
.ap-dica-nome { font-weight: 700; line-height: 1.2; min-width: 0; }
.ap-dica-nome small { color: #D8D5FF; font-weight: 600; }
.ap-dica-barra { display: block; height: 4px; background: #2E25C9; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.ap-dica-barra i { display: block; height: 100%; background: var(--cor); }
.ap-dica-num { text-align: right; line-height: 1.1; }
.ap-dica-num b { display: block; font-size: 1.12rem; color: var(--cor); }
.ap-dica-num small { color: #D8D5FF; font-size: .72rem; }
.ap-dica-margem, .ap-dica-vazio { margin: 6px 0 0; font-size: .74rem; color: #D8D5FF; }

/* Estúdio (tema neon) e apresentação: mesmo cartão azul chapado, sem textura */
.modo-estudio .ap-mapa-caixa, .modo-estudio.tema-neon .ap-mapa-caixa { background: #1C1599 !important; }
.ap-show-mapa .ap-mapa-caixa { background: #1C1599 !important; border: 1px solid #2E25C9 !important; justify-content: flex-start; }
.ap-show-mapa .ap-mapa-caixa svg { max-height: calc(100vh - 410px) !important; }
.ap-show-mapa .ap-leg-fila, .ap-show-mapa .ap-leg-nota { display: none; }
.ap-show-mapa .ap-mapa-caixa { overflow: visible; }
.ap-show-mapa .ap-leg-cand { padding: 8px 12px 8px 8px; }
.ap-show-mapa .ap-leg-nota { margin-top: 6px; }
.ap-show-mapa .ap-mapa-cab-cargo { font-size: 1rem; }
.ap-show-mapa .ap-mapa-cab-apur { font-size: 1rem; }
.ap-show-mapa .ap-leg-cand img { width: 64px; height: 64px; }
.ap-show-mapa .ap-leg-pct { font-size: 2rem; }
.ap-show-mapa .ap-leg-nome { font-size: 1.2rem; }
@media (max-width: 720px) {
  .ap-mapa-caixa { padding: 12px 10px 12px; border-radius: 12px; }
  .ap-mapa-cab { margin-bottom: 2px; }
  .ap-mapa-cab-cargo { font-size: .7rem; letter-spacing: .1em; }
  .ap-mapa-cab-apur { font-size: .72rem; }
  .ap-mapa-cab-barra { width: 54px; }
  .ap-leg-cands { grid-template-columns: 1fr; gap: 8px; }
  .ap-leg-cand { grid-template-columns: 46px 1fr auto; padding: 8px 12px 8px 8px; }
  .ap-leg-cand img { width: 46px; height: 46px; }
  .ap-leg-pct { font-size: 1.3rem; }
  .ap-leg-fila i { font-size: 0; padding: 5px 0; }
  .ap-mapa-dica { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-brasil .mapa-uf, .mapa-chip-cor, .ap-mapa-cab-barra i { transition: none !important; }
  .mapa-entra { animation: none !important; }
  .mapa-brasil .mapa-uf:hover, .mapa-brasil .mapa-uf.mapa-hover { transform: none; }
}
/* Mapa no celular: estados pequenos viram botões embaixo do mapa */
.ap-mapa-pequenos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px 0 2px; }
.ap-mapa-pequenos[hidden] { display: none; }
.ap-mapa-pequenos button { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; overflow: hidden; background: #120C7A; border: 1px solid #2E25C9; border-radius: 999px; color: #FFFFFF; font: inherit; font-size: .66rem; font-weight: 600; padding: 4px 3px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-mapa-pequenos button i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ap-mapa-pequenos button small { color: #FD6301; }
@media (max-width: 720px) {
  .ap-brasil { padding: 12px 8px; }
  .ap-mapa-caixa { padding: 10px 6px 10px; }
  .ap-mapa-cab-barra { display: none; }
  .ap-leg-cand { grid-template-areas: "foto nome pct" "foto est est"; column-gap: 10px; }
  .ap-leg-nome { font-size: .9rem; }
  .ap-leg-nome small { font-size: .7rem; }
  .ap-leg-pct { font-size: 1.2rem; }
  .ap-leg-votos { display: none; }
  .ap-leg-est { font-size: .74rem; }
  .ap-leg-est b { font-size: .86rem; }
  .ap-leg-nota { font-size: .68rem; }
}

/* ══ MAPA NEON: página /eleicoes/mapa (08/10/2026 ~17h30, ordem do Erlandson:
   "está ridículo, sem animação inteligente e paleta nova") ══
   Só vale para a página do mapa: tudo preso em .mapa-neon (a apuração não usa
   essa classe). Papéis das cores, os mesmos do estúdio neon:
     fundo #11097E, cartão #1C1499, trilho/divisória #3A30C4, fundo fundo #08045A;
     texto branco, apoio lavanda #D8D5FF; verde #FD6301 só gráfico (risco do
     título, líder, Lavras, estado escolhido); barras no degradê verde->laranja;
     laranja #FD6301 só botão cheio com letra branca; ciano #33D6FF interação.
   Áreas do mapa: azul PL / vermelho PT em 4 tons pela folga (cores no JS e na
   legenda do EJS). JS: public/js/eleicoes-mapa.js.
   Para voltar: apagar este bloco e restaurar ~/backups/*-antes-mapa-neon-202610081731. */
body.modo-estudio:has(.mapa-neon) { background: #11097E; }
body:has(.mapa-neon) .conteudo { padding: 0 0 80px; max-width: none; }
.mapa-neon { max-width: 1200px; margin: 0 auto; padding: 0 24px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.mapa-neon p { margin: 0; }

.mapa-neon .mn-cab { padding: 44px 0 6px; }
.mapa-neon .mn-selo { display: flex; align-items: center; gap: 10px; color: #D8D5FF; font-size: .95rem; font-weight: 600; margin-bottom: 14px; }
.mapa-neon .mn-selo::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: #FD6301; flex: none; }
.mapa-neon .mn-titulo { color: #FFFFFF; font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; margin: 0; padding-left: 18px; border-left: 8px solid #FD6301; }
.mapa-neon .mn-sub { color: #D8D5FF; font-size: 1.12rem; line-height: 1.5; max-width: 60ch; margin-top: 16px; }

.mapa-neon .mn-bloco { margin-top: 40px; padding-top: 28px; border-top: 1px solid #3A30C4; }
.mapa-neon .mn-h2 { color: #FFFFFF; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 16px; padding-left: 12px; border-left: 5px solid #FD6301; }
.mapa-neon .mn-texto { color: #D8D5FF; max-width: 68ch; line-height: 1.5; margin: -4px 0 18px; }
.mapa-neon .mn-grade { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.mapa-neon .mn-palco { position: relative; min-width: 0; }

/* Mapa */
.mapa-neon .mn-svg { width: 100%; height: auto; display: block; max-height: 78vh; overflow: visible; -webkit-tap-highlight-color: transparent; }
.mapa-neon .mn-area { stroke: #11097E; stroke-width: 1.4; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .3s ease; }
.mapa-neon .mn-cid { stroke-width: .6; }
.mapa-neon .mn-sigla { fill: #FFFFFF; font-size: 17px; font-weight: 800; letter-spacing: .02em; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #08045A; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.mapa-neon .mn-sigla-peq { font-size: 13px; }
.mapa-neon .mn-realce { fill: rgba(255, 255, 255, .14); stroke: #33D6FF; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(51, 214, 255, .75)); opacity: 0; transition: opacity .12s ease; pointer-events: none; }
.mapa-neon .mn-sel { fill: none; stroke: #FD6301; stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(253,99,1, .55)); opacity: 0; pointer-events: none; }
.mapa-neon .mn-realce.on, .mapa-neon .mn-sel.on { opacity: 1; }
.mapa-neon .mn-lavras { pointer-events: none; }
.mapa-neon .mn-lavras-ponto { fill: #FFFFFF; stroke: #08045A; stroke-width: 2; }
.mapa-neon .mn-lavras-pulso { fill: none; stroke: #FD6301; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mapa-neon .mn-lavras-nome { fill: #FFFFFF; font-size: 22px; font-weight: 800; paint-order: stroke; stroke: #08045A; stroke-width: 5px; stroke-linejoin: round; }

/* Entrada: Brasil se desenha de norte a sul; Minas acende a partir de Lavras */
.mapa-neon .mn-espera .mn-area, .mapa-neon .mn-espera .mn-siglas, .mapa-neon .mn-espera .mn-lavras { opacity: 0; }
.mapa-neon .mn-anim .mn-uf { animation: mn-desenha .5s cubic-bezier(.3, .7, .3, 1) var(--d, 0ms) both; }
.mapa-neon .mn-anim .mn-cid { animation: mn-acende .34s ease-out var(--d, 0ms) both; }
.mapa-neon .mn-anim .mn-siglas { animation: mn-aparece .3s ease-out .45s both; }
.mapa-neon .mn-anim .mn-lavras { animation: mn-aparece .25s ease-out .05s both; }
.mapa-neon .mn-anim .mn-lavras-pulso { animation: mn-pulso .7s ease-out .1s 1 both; }
@keyframes mn-desenha {
  0% { fill-opacity: 0; stroke: #D8D5FF; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
  55% { fill-opacity: 0; stroke: #D8D5FF; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
  100% { fill-opacity: 1; stroke: #11097E; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes mn-acende { 0% { fill-opacity: 0; stroke: #3A30C4; } 100% { fill-opacity: 1; stroke: #11097E; } }
@keyframes mn-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes mn-pulso { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

/* Painel de leitura */
.mapa-neon .mn-painel { position: sticky; top: 112px; background: #1C1499; border: 1px solid #3A30C4; border-radius: 16px; padding: 20px 20px 18px; color: #FFFFFF; min-width: 0; }
.mapa-neon .mn-campo-rotulo { display: block; color: #D8D5FF; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.mapa-neon .mn-campo { width: 100%; background: #08045A; color: #FFFFFF; border: 1px solid #3A30C4; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.mapa-neon select.mn-campo { padding-right: 40px; cursor: pointer; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%2333D6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mapa-neon select.mn-campo option { background: #08045A; color: #FFFFFF; }
.mapa-neon .mn-campo::placeholder { color: #D8D5FF; opacity: .75; }
.mapa-neon .mn-campo:hover { border-color: #33D6FF; }
.mapa-neon .mn-campo:focus { outline: none; border-color: #33D6FF; box-shadow: 0 0 0 3px rgba(51, 214, 255, .3); }
.mapa-neon .mn-painel-corpo { margin-top: 18px; }
.mapa-neon .mn-lugar { color: #FFFFFF; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.1; letter-spacing: -.015em; }
.mapa-neon .mn-lugar-sub { color: #D8D5FF; font-size: .9rem; margin: 4px 0 10px; }
.mapa-neon .mn-troca .mn-lugar, .mapa-neon .mn-troca .mn-lugar-sub { animation: mn-troca .22s ease-out; }
@keyframes mn-troca { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mapa-neon .mn-linha { padding: 10px 0 10px 12px; border-left: 3px solid transparent; transition: border-color .25s ease; }
.mapa-neon .mn-linha.lider { border-left-color: #FD6301; }
.mapa-neon .mn-linha-topo { display: flex; align-items: baseline; gap: 8px; }
.mapa-neon .mn-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; transition: background-color .3s ease; }
.mapa-neon .mn-nome { flex: 1; min-width: 0; color: #FFFFFF; font-weight: 700; font-size: 1.02rem; }
.mapa-neon .mn-nome small { color: #D8D5FF; font-weight: 600; font-size: .78rem; }
.mapa-neon .mn-pct { color: #FFFFFF; font-weight: 900; font-size: 1.65rem; line-height: 1; }
.mapa-neon .mn-trilho { height: 12px; background: #3A30C4; border-radius: 999px; overflow: hidden; margin: 8px 0 5px; }
.mapa-neon .mn-barra { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FD6301, #FD6301); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.mapa-neon .mn-votos { color: #D8D5FF; font-size: .85rem; }
.mapa-neon .mn-votos[hidden], .mapa-neon .mn-extra[hidden], .mapa-neon .mn-acoes[hidden], .mapa-neon .mn-placar[hidden] { display: none; }
.mapa-neon .mn-margem { color: #FFFFFF; font-size: .95rem; margin-top: 10px; padding-top: 12px; border-top: 1px solid #3A30C4; }
.mapa-neon .mn-margem b { font-weight: 800; }
.mapa-neon .mn-extra { color: #D8D5FF; font-size: .85rem; margin-top: 6px; }
.mapa-neon .mn-placar { margin-top: 16px; padding-top: 14px; border-top: 1px solid #3A30C4; }
.mapa-neon .mn-placar-tit { color: #D8D5FF; font-size: .85rem; margin-bottom: 8px; }
.mapa-neon .mn-placar-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mapa-neon .mn-placar-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "chip nome" "num num"; align-items: center; column-gap: 8px; background: #08045A; border-radius: 12px; padding: 10px 12px; }
.mapa-neon .mn-placar-item .mn-chip { grid-area: chip; }
.mapa-neon .mn-placar-item span { grid-area: nome; color: #FFFFFF; font-weight: 700; font-size: .92rem; }
.mapa-neon .mn-placar-item b { grid-area: num; color: #FFFFFF; font-size: 2.2rem; font-weight: 900; line-height: 1.05; margin-top: 4px; }
.mapa-neon .mn-acoes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.mapa-neon .mn-link { background: none; border: 0; padding: 0; font: inherit; font-size: .92rem; font-weight: 700; color: #33D6FF; cursor: pointer; text-decoration: none; }
.mapa-neon .mn-link:hover { color: #33D6FF; text-decoration: underline; }
.mapa-neon .mn-link:focus-visible { outline: 2px solid #33D6FF; outline-offset: 3px; border-radius: 3px; }

/* Legenda: tabela de tons por folga */
.mapa-neon .mn-legenda { margin-top: 20px; }
.mapa-neon .mn-leg-grade { display: grid; grid-template-columns: minmax(150px, auto) repeat(4, minmax(44px, 76px)); gap: 6px; align-items: center; justify-content: start; }
.mapa-neon .mn-leg-canto, .mapa-neon .mn-leg-faixa { color: #D8D5FF; font-size: .8rem; line-height: 1.2; }
.mapa-neon .mn-leg-faixa { text-align: center; }
.mapa-neon .mn-leg-nome { color: #FFFFFF; font-weight: 700; font-size: .92rem; padding-right: 8px; }
.mapa-neon .mn-leg-cor { display: block; height: 16px; border-radius: 4px; background: var(--c); }
.mapa-neon .mn-leg-nota { color: #D8D5FF; font-size: .85rem; line-height: 1.45; max-width: 70ch; margin-top: 10px; }

/* Chamada final, botões e fonte */
.mapa-neon .mn-cta { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; background: #1C1499; border: 1px solid #3A30C4; border-radius: 16px; padding: 24px; }
.mapa-neon .mn-cta .mn-h2 { margin-bottom: 8px; }
.mapa-neon .mn-cta .mn-texto { margin: 0; }
.mapa-neon .mn-cta-botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa-neon .mn-botao { display: inline-block; background: #FD6301; color: #FFFFFF; font-weight: 800; padding: 12px 20px; border-radius: 999px; border: 2px solid #FD6301; text-decoration: none; white-space: nowrap; transition: box-shadow .15s ease, border-color .15s ease; }
.mapa-neon .mn-botao:hover { color: #FFFFFF; text-decoration: none; box-shadow: 0 0 0 3px rgba(51, 214, 255, .55); }
.mapa-neon .mn-botao:focus-visible { outline: 3px solid #33D6FF; outline-offset: 2px; }
.mapa-neon .mn-botao-sec { background: transparent; border-color: #3A30C4; }
.mapa-neon .mn-botao-sec:hover { border-color: #33D6FF; box-shadow: none; }
.mapa-neon .mn-fonte { color: #D8D5FF; font-size: .85rem; line-height: 1.5; max-width: 80ch; margin-top: 28px; }

@media (max-width: 900px) {
  .mapa-neon .mn-grade { grid-template-columns: 1fr; gap: 16px; }
  .mapa-neon .mn-painel { position: static; }
  .mapa-neon .mn-svg { max-height: none; }
}
@media (max-width: 600px) {
  .mapa-neon { padding: 0 16px; }
  .mapa-neon .mn-cab { padding-top: 28px; }
  .mapa-neon .mn-titulo { padding-left: 14px; border-left-width: 6px; }
  .mapa-neon .mn-sub { font-size: 1rem; }
  .mapa-neon .mn-bloco { margin-top: 28px; padding-top: 22px; }
  .mapa-neon .mn-sigla { font-size: 26px; stroke-width: 5px; }
  .mapa-neon .mn-sigla-peq { display: none; }
  .mapa-neon .mn-lavras-nome { font-size: 34px; stroke-width: 7px; }
  .mapa-neon .mn-painel { padding: 16px 14px; }
  .mapa-neon .mn-pct { font-size: 1.45rem; }
  .mapa-neon .mn-leg-grade { grid-template-columns: minmax(0, 1fr) repeat(4, 38px); gap: 5px; }
  .mapa-neon .mn-leg-canto, .mapa-neon .mn-leg-faixa { font-size: .7rem; }
  .mapa-neon .mn-leg-nome { font-size: .82rem; }
  .mapa-neon .mn-cta { padding: 18px 16px; }
  .mapa-neon .mn-cta-botoes, .mapa-neon .mn-botao { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa-neon *, .mapa-neon *::before, .mapa-neon *::after { animation: none !important; transition: none !important; }
}

/* ══ Retrato do Poder, nível profissional (08/10/2026, ordem do Erlandson) ══
   Página /apuracao/congresso. Fundo azul chapado #1C1599 (sem degradê em lugar
   nenhum), verde neon #FD6301 (maioria, destaques), laranja neon #FD6301
   (aviso de parcial), texto branco, secundário #D8D5FF, linhas #3A30C4.
   Hemiciclos montados em public/js/congresso.js. Classes rp-* só desta página
   (o resumo do /eleicoes continua com as hemi-* antigas). */
body.modo-estudio:has(.rp-pagina) { background: #1C1599; }
body:has(.rp-pagina) .conteudo { padding: 0 24px 48px !important; max-width: none; }
.rp-pagina { --rp-azul: #1C1599; --rp-painel: #1F18A6; --rp-linha: #3A30C4; --rp-sec: #D8D5FF; --rp-verde: #FD6301; --rp-laranja: #FD6301;
  background: #1C1599; color: #FFFFFF; max-width: 1880px; margin: 0 auto; padding: 18px 8px 40px; box-sizing: border-box;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.rp-cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; padding: 4px 4px 22px; border-bottom: 1px solid var(--rp-linha); margin-bottom: 22px; }
.rp-kicker { grid-column: 1 / -1; margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rp-sec); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-kicker span { background: var(--rp-verde); color: #1C1599; padding: 4px 10px; border-radius: 4px; letter-spacing: .12em; }
.rp-titulo { margin: 4px 0 0; font-size: clamp(2.2rem, 4.4vw, 4.6rem); line-height: 1; font-weight: 900; letter-spacing: -.02em; color: #FFFFFF; }
.rp-sub { grid-column: 1; margin: 6px 0 0; max-width: 72ch; color: var(--rp-sec); font-size: clamp(.98rem, 1.1vw, 1.15rem); line-height: 1.5; }
.rp-voltar { grid-column: 2; grid-row: 2 / 4; align-self: end; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: .95rem; border: 1px solid var(--rp-linha); border-radius: 999px; padding: 10px 18px; white-space: nowrap; transition: border-color .2s, color .2s; }
.rp-voltar:hover, .rp-voltar:focus-visible { border-color: var(--rp-verde); color: var(--rp-verde); }

.rp-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) {
  .rp-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "camara camara" "senado almg"; }
  .rp-casa-senado { grid-area: senado; } .rp-casa-camara { grid-area: camara; } .rp-casa-almg { grid-area: almg; }
  .rp-casa-camara .rp-hemi { max-width: 760px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1500px) {
  .rp-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr); grid-template-areas: "senado camara almg"; align-items: stretch; }
  .rp-casa-camara .rp-hemi { max-width: none; }
}
.rp-casa { background: var(--rp-painel); border: 1px solid var(--rp-linha); border-radius: 14px; padding: 18px 20px 16px; min-width: 0; display: flex; flex-direction: column; }
.rp-casa-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rp-casa-onde { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rp-sec); }
.rp-casa-nome { margin: 2px 0 0; font-size: clamp(1.3rem, 1.6vw, 1.75rem); font-weight: 850; line-height: 1.1; color: #FFFFFF; }
.rp-casa-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; border-left: 2px solid var(--rp-verde); padding-left: 10px; }
.rp-casa-total span { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--rp-verde); }
.rp-casa-total b { font-size: 1.7rem; font-weight: 900; color: #FFFFFF; margin-top: 3px; }
.rp-parcial { align-self: flex-start; margin: 10px 0 0; background: var(--rp-laranja); color: #FFFFFF; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; }
.rp-parcial[hidden] { display: none; }

.rp-hemi { width: 100%; margin: 8px auto 2px; }
.rp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-linha-maioria { stroke: var(--rp-verde); stroke-width: .7; stroke-dasharray: 2 1.6; }
.rp-rot-maioria { fill: var(--rp-verde); font-size: 5px; font-weight: 800; letter-spacing: .14em; text-anchor: middle; }
.rp-miolo-num { fill: #FFFFFF; font-size: 21px; font-weight: 900; text-anchor: middle; letter-spacing: -.02em; }
.rp-miolo-rot { fill: var(--rp-sec); font-size: 4.6px; font-weight: 800; letter-spacing: .2em; text-anchor: middle; }
.rp-cad { cursor: pointer; opacity: 0; transform: scale(.15); transform-box: fill-box; transform-origin: center;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2, .9, .3, 1.3); }
.rp-cad-contorno { stroke: #D8D5FF; stroke-opacity: .5; }
.rp-cad-exercicio { fill: #1C1599; fill-opacity: 0; stroke: #D8D5FF; stroke-opacity: .85; stroke-dasharray: none; pointer-events: all; }
.rp-entrou .rp-cad, .rp-sem-anim .rp-cad { opacity: 1; transform: none; }
.rp-entrou .rp-svg.rp-focando .rp-cad:not(.rp-foco) { opacity: .14; }
.rp-entrou .rp-cad.rp-sobre { stroke: #FFFFFF; stroke-width: 1px; stroke-opacity: 1; transform: scale(1.35); }
.rp-sem-anim .rp-cad { transition: none; }

.rp-espectro { margin: 22px 0 0; }
.rp-esp-barra { position: relative; display: flex; height: 14px; border-radius: 3px; background: #1C1599; border: 1px solid var(--rp-linha); }
.rp-esp-seg { display: block; height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.rp-esp-seg + .rp-esp-seg { box-shadow: inset 2px 0 0 #1C1599; }
.rp-seg-neutro { background: transparent; box-shadow: inset 0 0 0 1.5px #D8D5FF !important; }
.rp-entrou .rp-esp-seg, .rp-sem-anim .rp-esp-seg { transform: none; }
.rp-esp-maioria { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px solid var(--rp-verde); transform: translateX(-1px); }
.rp-esp-maioria em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .7rem; font-weight: 900; color: var(--rp-verde); }
.rp-esp-rot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: .9rem; color: var(--rp-sec); }
.rp-esp-item { display: inline-flex; align-items: baseline; gap: 6px; }
.rp-esp-item b { color: #FFFFFF; font-size: 1.35rem; font-weight: 900; }
.rp-esp-cor { display: inline-block; width: 10px; height: 10px; border-radius: 2px; align-self: center; }
.rp-esp-item .rp-esp-cor.rp-seg-dir { box-shadow: inset 0 0 0 1px rgba(216, 213, 255, .7); }

.rp-partidos { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rp-linha); display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 7px; background: #1C1599; border: 1px solid var(--rp-linha); color: #FFFFFF; border-radius: 6px; padding: 5px 9px 5px 7px; font: inherit; font-size: .84rem; cursor: pointer; transition: border-color .15s, background .15s; }
.rp-chip i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rp-chip i.rp-chip-contorno { box-shadow: 0 0 0 1px rgba(216, 213, 255, .75); }
.rp-chip-sigla { font-weight: 700; letter-spacing: .02em; }
.rp-chip b { font-weight: 900; font-size: .95rem; color: #FFFFFF; min-width: 1.4em; text-align: right; }
.rp-chip:hover, .rp-chip:focus-visible, .rp-chip.ativo { border-color: var(--rp-verde); outline: none; }
.rp-chip.ativo { background: #2A22B8; }
.rp-chip-exercicio i { background: transparent; box-shadow: inset 0 0 0 1.5px #D8D5FF; }
.rp-chip-exercicio .rp-chip-sigla { font-weight: 600; color: var(--rp-sec); }
.rp-nota { margin: 12px 0 0; padding-top: 0; color: var(--rp-sec); font-size: .8rem; line-height: 1.45; margin-top: auto; padding-top: 12px; }
.rp-fonte { color: var(--rp-sec); font-size: .8rem; line-height: 1.5; max-width: 110ch; margin: 22px 4px 0; opacity: .9; }

.rp-tip { position: fixed; z-index: 9999; display: none; align-items: flex-start; gap: 10px; max-width: 300px; background: #1C1599; border: 1px solid var(--rp-verde, #FD6301); border-radius: 10px; padding: 10px 12px; color: #FFFFFF; pointer-events: none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; box-shadow: 0 10px 24px rgba(5, 2, 50, .55); }
.rp-tip.on { display: flex; }
.rp-tip img { width: 54px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; background: #2A22B8; }
.rp-tip-tag { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #D8D5FF; }
.rp-tip-tag i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(216, 213, 255, .6); }
.rp-tip-nome { font-weight: 800; font-size: 1.02rem; line-height: 1.2; margin-top: 3px; }
.rp-tip-sub { color: #D8D5FF; font-size: .82rem; margin-top: 3px; line-height: 1.35; }
.rp-tip-votos { color: #D8D5FF; font-size: .85rem; margin-top: 4px; }
.rp-tip-votos b { color: var(--rp-verde, #FD6301); font-size: 1rem; }

/* TV do estúdio (1920x1080): tudo numa tela só */
@media (min-width: 1800px) {
  .rp-pagina { padding-top: 12px; }
  .rp-cab { padding-bottom: 14px; margin-bottom: 16px; }
  .rp-titulo { font-size: 3.6rem; }
  .rp-sub { font-size: 1.05rem; max-width: 120ch; }
  .rp-casa { padding: 14px 18px 12px; }
  .rp-partidos { margin-top: 10px; padding-top: 10px; }
  .rp-titulo { font-size: 3.3rem; }
  .rp-kicker { font-size: .78rem; }
  .rp-partidos { gap: 5px; }
  .rp-chip { font-size: .84rem; padding: 4px 8px 4px 6px; }
}
/* celular */
@media (max-width: 600px) {
  .rp-pagina { padding: 12px 0 28px; }
  .rp-cab { grid-template-columns: 1fr; padding-bottom: 16px; }
  .rp-voltar { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; }
  .rp-casa { padding: 14px 12px 12px; border-radius: 12px; }
  .rp-esp-item b { font-size: 1.15rem; }
  .rp-esp-rot { gap: 2px 12px; font-size: .82rem; }
  body:has(.rp-pagina) .conteudo { padding: 0 10px 32px !important; }
  .rp-partidos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .rp-partidos li { min-width: 0; }
  .rp-partidos li:has(.rp-chip-exercicio) { grid-column: 1 / -1; }
  .rp-chip { width: 100%; font-size: .82rem; padding: 6px 8px 6px 7px; }
  .rp-chip b { margin-left: auto; }
  .rp-chip-sigla { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rp-rot-maioria { font-size: 8px; }
  .rp-miolo-rot { font-size: 6.5px; }
  .rp-miolo-num { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-cad, .rp-esp-seg { transition: none !important; }
}

/* Senadores em exercício até 2031 (eleitos em 2022): cor do partido + anel branco fino (08/10/2026) */
.rp-cad.rp-cad-ex { stroke: #FFFFFF; stroke-width: 1.4px; stroke-opacity: .9; }

/* ── Área do Agronegócio /agro (12/10/2026) ── */
.agro-cabecalho { margin-bottom: 6px; }
.agro-sub { color: #445; max-width: 760px; margin: 4px 0 10px; }
.agro-atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.agro-atalhos a { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: .88rem; color: var(--azul); }
.agro-atalhos a:hover { border-color: var(--laranja); text-decoration: none; }
.agro-h2 { border-left-color: #1B7A43; scroll-margin-top: 90px; }
.agro-tempo-hoje { display: flex; gap: 16px; align-items: center; background: var(--azul); color: var(--branco); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; }
.agro-tempo-icone { font-size: 58px; line-height: 1; }
.agro-tempo-info { display: flex; flex-direction: column; gap: 3px; }
.agro-tempo-info strong { font-size: 1.15rem; }
.agro-tempo-info b { color: var(--amarelo); }
.agro-boletim { margin-top: 6px; font-size: .92rem; color: rgba(255,255,255,.92); }
.agro-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 8px; }
.agro-dia { background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: .88rem; }
.agro-dia-nome { font-weight: 800; text-transform: capitalize; }
.agro-dia-nome small { font-weight: 600; color: #667; }
.agro-dia-emoji { font-size: 30px; }
.agro-dia-chuva { font-weight: 700; color: var(--azul); }
.agro-dia-chuva.forte { color: var(--laranja); }
.agro-dia-prob { font-size: .75rem; color: #667; }
.agro-cot-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.agro-cot { background: var(--branco); border: 1px solid var(--cinza-borda); border-top: 4px solid #1B7A43; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.agro-cot-velho { border-top-color: var(--laranja); }
.agro-cot-nome { font-weight: 800; }
.agro-cot-valor { font-size: 1.5rem; color: var(--azul); line-height: 1.2; }
.agro-cot-unid { font-size: .8rem; font-weight: 700; color: #445; }
.agro-cot-praca { font-size: .8rem; color: #667; }
.agro-cot-data { font-size: .82rem; margin-top: 4px; }
.agro-cot-aviso { display: block; font-style: normal; color: var(--laranja); font-weight: 700; font-size: .78rem; }
.agro-cot-fonte { font-size: .78rem; color: #667; }
.agro-ufla { list-style: none; background: var(--branco); border: 1px solid var(--cinza-borda); border-radius: 12px; padding: 4px 14px; }
.agro-ufla li { padding: 10px 0; border-bottom: 1px solid var(--cinza-borda); display: flex; flex-direction: column; }
.agro-ufla li:last-child { border-bottom: 0; }
.agro-ufla a { font-weight: 700; color: var(--preto); }
@media (max-width: 600px) { .agro-tempo-hoje { flex-direction: column; text-align: center; } }

/* H1 da capa (SEO 13/10/2026): existe para o Google e o leitor de tela, não aparece na tela */
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Ouvidoria de serviços públicos (15/10/2026) ── */
.ouv-subtitulo { font-size: 1.15rem; margin: 18px 0 10px; }
.ouv-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ouv-tipo { display: flex; align-items: center; gap: 10px; background: var(--branco); color: #231F20; border: 1px solid var(--cinza-borda); border-radius: 10px; padding: 12px; text-decoration: none; font-weight: 600; }
.ouv-tipo:hover { border-color: var(--azul); }
.ouv-tipo-emoji { font-size: 1.6rem; }
.ouv-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; }
.ouv-ficha { max-width: 720px; }
.ouv-relato { white-space: pre-wrap; }
.ouv-estado { display: inline-block; background: #FFF4D6; color: #231F20; border-radius: 6px; padding: 2px 8px; }
.ouv-estado-concluida { background: #E6F7EC; color: #187a3c; }
.ouv-estado-vencida, .ouv-estado-nao_resolvida { background: #fdecea; color: #8a1f1f; }
.ouv-linha { list-style: none; padding: 0; border-left: 3px solid var(--azul); margin: 0 0 16px 6px; }
.ouv-linha li { padding: 6px 0 6px 14px; }
.ouv-quando { display: block; font-size: .8rem; color: #555; }