/* Paleta oficial do manual de marca — não estimar cores */
:root {
  --azul: #004F7D;
  --azul-claro: #0367A1;
  --laranja: #F58634;
  --amarelo: #FBD729;
  --magenta: #EE1B84;
  --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: linear-gradient(90deg, var(--laranja), var(--magenta)); 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: linear-gradient(90deg, var(--azul), var(--azul-claro)); 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: linear-gradient(135deg, #003A5C, 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: linear-gradient(120deg, var(--laranja), var(--magenta)); 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: linear-gradient(90deg, #14181B, var(--preto)); 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: linear-gradient(135deg, var(--amarelo), var(--magenta)); 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: linear-gradient(90deg, var(--laranja), var(--magenta)); color: var(--branco) !important; padding: 5px 12px !important; border-radius: 16px; border-bottom: none !important; }
.nav-anuncie:hover { opacity: .9; }
.anuncie-hero { background: linear-gradient(120deg, var(--azul), var(--azul-claro)); 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: linear-gradient(90deg, var(--laranja), var(--magenta)); 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: linear-gradient(160deg, var(--azul), #024e7a); 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: linear-gradient(90deg, #00304F, #0367A1); }
.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: linear-gradient(90deg, var(--azul-claro), 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: linear-gradient(135deg, #fff8e1, #ffefc2); 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: linear-gradient(160deg, #fff8e1, #ffedba); 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; }

/* 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(0,32,52,.94) 0%, rgba(0,32,52,.78) 45%, rgba(0,32,52,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); }

.carrossel-seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0,32,52,.55); color: #fff; font-size: 1.7rem; line-height: 1;
  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: 7px; }
.carrossel-ponto { width: 9px; height: 9px; 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; }
}

/* 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; }
}

/* 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; }
}