/*
Theme Name: Todo Dia
Theme URI: https://tododia.com.br
Author: Rede Todo Dia
Description: Tema do portal Todo Dia — jornal das regioes metropolitanas de Campinas e de
  Piracicaba. Layout editorial em rio de noticias, inventario publicitario nomeado e
  templates de home selecionaveis.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietario
Text Domain: tododia
*/

/* ----------------------------------------------------------------------
   Ajustes que só existem no WordPress (o protótipo não precisava deles).
   O WP imprime width/height em toda imagem; sem height:auto o atributo
   vence o aspect-ratio e a foto da manchete sai esticada.
   ---------------------------------------------------------------------- */
img{max-width:100%;height:auto}
.wp-caption{max-width:100%}
.screen-reader-text{position:absolute;left:-9999px}
.pagination,.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:30px 0 10px}
.pagination .page-numbers,.nav-links .page-numbers{background:var(--card);border:1px solid var(--line-card);
  border-radius:8px;padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--body)}
.pagination .current,.nav-links .current{background:var(--link);border-color:var(--link);color:#fff}

/* Base herdada de site-tododia/prototipo/ — o protótipo é a fonte da verdade do desenho.
   Gerado por site-tododia/tema/build.py; não editar à mão sem refletir lá. */


/* ======================================================================
   BASE + HOME (index.html)
   ====================================================================== */
/* ---------- TOKENS (paleta oficial 17/07) ---------- */
:root{
  /* ⛔ ISTO CONSERTA O MENU DE CIDADES SUMIDO NO MODO ESCURO (09/09/2026).
     O menu suspenso de um <select> é desenhado pelo NAVEGADOR, fora da página:
     o CSS de dentro não o alcança. Sem `color-scheme` o Chrome supõe página
     clara, pinta o menu de branco — e herda o `color` do tema escuro, que é
     quase branco. Branco no branco. 🔑 Uma linha por tema conserta TODOS os
     controles nativos de uma vez: os 5 outros <select> (denúncia, contato,
     publicidade legal), as barras de rolagem e o preenchimento automático. */
  color-scheme:light;
  --bg:#EFEBE0;          /* fundo geral (creme) */
  --surface:#F2F2F2;     /* seções internas */
  --card:#FFFFFF;        /* cards/posts */
  --ink:#1A1A1A;         /* título/texto forte */
  --body:#3D3D3D;        /* corpo */
  --meta:#8A8F98;        /* meta/timestamp */
  --line:#E3DCC9;        /* hairlines sobre creme */
  --line-card:#E8E4D8;
  --brand:#0D1E52;       /* navy institucional */
  --link:#1560A5;        /* AZUL = interação (links, títulos, botões) */
  --hot:#F12F28;         /* VERMELHO = urgência (ao vivo, breaking) */
  --up:#1A9C4B; --down:#C62828;
  /* ⛔ CADA BLOCO DA LATERAL TEM UMA COR DE IDENTIDADE — o horóscopo é rosa
     (#E8478B), Especiais é marrom (#5D4037), a TV é o vermelho. Tempo e cotação
     eram os únicos 100% cinza, e ele viu: "está muito monocromático".
     🔑 ESCOLHIDAS POR MEDIÇÃO, como o marrom do Especiais: 12 candidatas contra
     as 20 cores em uso. Âmbar a 53,4 de distância da vizinha mais próxima,
     petróleo a 30,4.
     ⚠️ E SÃO PARES, um valor por tema, porque a medição mostrou que NENHUM valor
     único passa em contraste nos dois: o âmbar que lê no branco some no escuro.
     É o mesmo que o tema já faz com --link e --hot. */
  --sol:#A85F00;         /* previsão do tempo */
  --cambio:#0F6E6E;      /* cotações */
  --loteria:#6B6B1F;     /* loterias — medida: 37,9 da vizinha mais próxima, contraste 5,60 */
  /* ⛔ CORES OFICIAIS DA CAIXA, lidas do CSS do portal deles (loterias.css) e
     AJUSTADAS POR CONTRASTE. SEIS DAS ONZE não aguentam número branco em cima: a
     Timemania (#00FF48) dá 1,36 e a Super Sete (#A8CF45) dá 1,80, contra o mínimo
     de 4,5 — o número simplesmente some. Escurecidas o MÍNIMO necessário, com alvo
     4,8 para ter margem. As cinco que passam ficam no tom oficial.
     ⛔ E SÃO PARES, como --sol e --cambio: no escuro o roxo da Quina cai para 1,30
     e o azul da Federal para 1,74. 🎁 Lá várias VOLTAM ao tom oficial, porque o que
     não lê no branco lê no preto — e o número vira tinta escura sobre cor clara. */
  --j-megasena:#1B7F58;       /* oficial #209869, ajustado · branco 4,97 */
  --j-quina:#260085;          /* oficial · branco 14,78 */
  --j-lotofacil:#930089;      /* oficial · branco 8,07 */
  --j-lotomania:#A55600;      /* oficial #F78100, ajustado · branco 5,34 */
  --j-timemania:#007A23;      /* oficial #00FF48, ajustado · branco 5,51 */
  --j-duplasena:#A61324;      /* oficial · branco 7,66 */
  --j-federal:#103099;        /* oficial · branco 11,02 */
  --j-diadesorte:#986420;     /* oficial #CB852B, ajustado · branco 5,03 */
  --j-supersete:#607A20;      /* oficial #A8CF45, ajustado · branco 4,88 */
  --j-maismilionaria:#2E3078; /* oficial · branco 11,60 */
  --j-loteca:#DC1B00;         /* oficial #FB1F00, ajustado · branco 5,00 */
  --j-tinta:#FFFFFF;          /* a cor do número dentro da bolinha */
  /* Verde do WhatsApp, ESCURECIDO de propósito e igual nos dois temas.
     ⛔ O #25D366 da marca dá 1,72:1 com texto branco — ilegível. O #128C4B que
     estava aqui dava 4,30:1, ainda abaixo do mínimo de 4,5:1 (medido em 26/08).
     Este dá 4,63:1 e continua sendo lido como "verde do WhatsApp".
     ⛔ NÃO recriar um tom mais claro para o modo escuro: era o que havia antes
     (#2BB56B) e dava 3,09:1. Botão de marca leva texto branco; clarear o fundo
     para "aparecer no escuro" é justamente o que apaga o texto. */
  --zapverde:#12864B;
  --font:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --serif:'Playfair Display',Georgia,serif;  /* tempero vintage */
  --shadow:0 1px 2px rgba(13,30,82,.06);
  --shadow-hover:0 6px 24px rgba(13,30,82,.12);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C0F16; --surface:#12161F; --card:#161B25;
  --ink:#F2F3F5; --body:#C9CED6; --meta:#8B93A0;
  --line:#222A38; --line-card:#242C3A;
  --link:#66A9E8; --hot:#FF5B52;
  --sol:#E8A33C; --cambio:#5FB8C4;   /* claros o bastante para o fundo escuro */
  --loteria:#B5B54A;                 /* par da oliva: 8,83 no fundo escuro */
  --j-megasena:#209869; --j-quina:#9266FF; --j-lotofacil:#E500D5;
  --j-lotomania:#F78100; --j-timemania:#00FF48; --j-duplasena:#E94054;
  --j-federal:#5578ED; --j-diadesorte:#CB852B; --j-supersete:#A8CF45;
  --j-maismilionaria:#7C7ECD; --j-loteca:#FB1F00;
  --j-tinta:#0C0F16;                 /* no escuro o número é ESCURO sobre cor clara */
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-hover:0 6px 24px rgba(0,0,0,.5);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--body);line-height:1.6;
     transition:background .25s,color .25s}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- HEADER (navy) ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--brand);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.topbar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:56px}
.burger{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:8px 6px}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px}
.logo-top{height:28px;width:auto}  /* +15% */
.data-hoje{color:rgba(255,255,255,.75);font-size:12px;font-weight:600;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.25);padding-left:14px;margin-left:2px}
.top-spacer{flex:1}
.inst-links{display:none;gap:14px;margin-right:4px}
.inst-links a{color:rgba(255,255,255,.8);font-size:12.5px;font-weight:600}
.inst-links a:hover{color:#fff;text-decoration:none}
@media(min-width:900px){.inst-links{display:flex}}
.icon-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:8px;height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:15px;padding:0 10px;font-family:var(--font)}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.btn-entrar{background:#fff;color:var(--brand);font-weight:700;font-size:13px;border:0;
  border-radius:8px;padding:8px 16px;cursor:pointer}
.busca-nav{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin-left:auto;
  background:var(--surface);border:1px solid var(--line-card);border-radius:20px;
  padding:0 14px;height:32px;color:var(--meta);font-size:13px;min-width:180px}
.busca-nav input{background:none;border:0;outline:0;color:var(--ink);font-family:var(--font);font-size:13px;width:100%}
.busca-nav input::placeholder{color:var(--meta)}
/* topo no celular: a data e os botões não cabem em 390px e empurravam a página
   inteira para o lado (scrollWidth 480). Some com a data e aperta os botões. */
@media(max-width:720px){.data-hoje{display:none}}
@media(max-width:440px){.topbar-in{gap:9px;padding:0 12px}
  .btn-entrar{padding:8px 12px;font-size:12.5px}
  .icon-btn{padding:0 9px;font-size:12.5px;height:32px}}

/* ---------- BARRA DE MENU (editorias + Cidades dropdown) ---------- */
.nav-bar{background:var(--card);border-bottom:1px solid var(--line-card);position:relative;z-index:55}
.nav-in{max-width:1120px;margin:0 auto;display:flex;gap:2px;overflow-x:auto;
  padding:0 16px;align-items:center;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav-in .chip{margin:8px 10px 8px 0}
.mi{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--ink);padding:13px 12px;
  white-space:nowrap;border-bottom:2.5px solid transparent;cursor:pointer}
.mi:hover{color:var(--link);text-decoration:none;border-bottom-color:var(--link)}
.mi.discreto{color:var(--meta);font-weight:600}
.mi.dd-toggle .seta{font-size:10px;opacity:.6}
.dd-panel{position:absolute;top:100%;left:16px;background:var(--card);
  border:1px solid var(--line-card);border-top:0;border-radius:0 0 14px 14px;
  box-shadow:var(--shadow-hover);padding:12px;display:none;
  grid-template-columns:1fr 1fr;gap:2px;min-width:360px;max-width:92vw;z-index:66}
.dd-panel.open{display:grid}
.dd-panel a{font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 12px;border-radius:8px}
.dd-panel a:hover{background:var(--surface);color:var(--link);text-decoration:none}
.chip{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--body);background:var(--surface);
  border:1px solid var(--line-card);border-radius:20px;padding:6px 14px;cursor:pointer;white-space:nowrap;
  font-family:var(--font);transition:all .15s}
.chip:hover{border-color:var(--link);color:var(--link);text-decoration:none}
.chip.ativa{background:var(--link);border-color:var(--link);color:#fff}

/* ---------- FAIXA AO VIVO ---------- */
.aovivo{display:block;background:var(--brand);text-align:center;padding:9px 16px}
.aovivo:hover{text-decoration:none;filter:brightness(1.12)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hot);
  vertical-align:middle;margin:-2px 8px 0 0;animation:blink 1.3s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.aovivo b{color:#fff;font-size:12px;letter-spacing:.08em;font-weight:800}
.aovivo span{color:rgba(255,255,255,.85);font-size:12px}

/* ---------- SLOTS DE ANÚNCIO ---------- */
.ad-slot{text-align:center;padding:18px 16px 22px}
.ad-slot .tag-ad{font-size:9px;font-weight:700;letter-spacing:.22em;color:var(--meta);
  text-transform:uppercase;margin-bottom:8px}
.ad-slot img{margin:0 auto;border-radius:6px;max-height:140px;width:auto;max-width:100%}
.ad-regua{display:flex;align-items:center;gap:14px;color:var(--meta);font-size:9px;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin:6px 0 12px}
.ad-regua::before,.ad-regua::after{content:"";flex:1;height:1px;background:var(--line)}
/* etiquetas de REVISÃO (temporárias — remover após remodelagem) */
.btag{display:inline-block;background:#F5C518;color:#1A1A1A;font-size:10px;font-weight:800;
  letter-spacing:.08em;padding:3px 10px;border-radius:6px;margin:0 0 8px;font-family:var(--font)}
.btag-row{max-width:1120px;margin:0 auto;padding:10px 16px 0}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.grid{display:grid;grid-template-columns:1fr;gap:28px;padding:22px 0 40px}
@media(min-width:980px){.grid{grid-template-columns:1fr 340px;gap:36px}}

/* ---------- AGRUPADOR DE SEÇÃO (tempero vintage) ---------- */
.secao{display:flex;align-items:baseline;gap:12px;margin:34px 0 16px}
.secao:first-child{margin-top:0}
.secao .kicker{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--hot);text-transform:uppercase}
.secao h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:26px;color:var(--ink);
  letter-spacing:.01em}
.secao .fio{flex:1;height:1px;background:var(--line);align-self:center}
.secao a{font-size:12px;font-weight:700;white-space:nowrap}

/* ⛔ NO CELULAR O TÍTULO DO BLOCO NÃO PODE QUEBRAR EM DUAS LINHAS (14/09/2026, decisão dele).
   O cabeçalho é uma fila: rótulo · título · fio · "ver todas". O que sobra para o título é o
   que resta depois dos outros três, e isso VARIA com o tamanho do rótulo — medido a 390px:
   148px quando o rótulo é "Viralizou nas redes" (111px) e 270px quando é "TV Todo Dia".
   Resultado: "Segurança na região", "O que acontece na sua cidade" e "Fique por dentro"
   quebravam em duas linhas.

   🔑 DIMINUIR A FONTE NÃO RESOLVE, e isso foi MEDIDO por injeção no site no ar: a 15px dois
   títulos ainda quebravam, e a 14px também — porque o espaço disponível encolhe junto com o
   texto. A saída é dar a LINHA INTEIRA ao título, o que só é possível no celular.

   Com 24px o pior caso ("O que acontece na sua cidade") ainda sobra 32px — folga que o
   Safari do iPhone precisa, já que ele mede a fonte um pouco diferente do Chrome. Com 26px a
   folga cairia para 5px, e um aparelho diferente quebraria de novo.

   Efeito medido: a home encolhe de 16,5 para 16,3 telas, porque os cabeçalhos que ocupavam
   83px (duas linhas) passam a 51px. No computador nada muda. */
@media (max-width:979.98px){
  .secao{ flex-wrap:wrap; align-items:center; row-gap:4px; }
  .secao .kicker{ order:1; }
  .secao .fio{ order:2; }
  .secao a{ order:3; }
  .secao h2{ order:4; flex-basis:100%; width:100%; font-size:24px; line-height:1.15; }
}

/* ---------- CARDS ---------- */
.card{background:var(--card);border:1px solid var(--line-card);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s;display:block}
/* .card:hover, não a.card:hover — desde 07/08 os cards com suíte são <div>,
   porque link dentro de link é HTML inválido (ver .td-stretch no fim). */
.card:hover{text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card .body{padding:16px 20px 18px}
.meta-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.pill{display:inline-block;background:var(--brand);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:4px}
.pill.red{background:var(--brand)} /* editoria = navy (vermelho reservado p/ AO VIVO + Anuncie) */
.hora{font-size:11.5px;color:var(--meta)}
.autor{font-size:11.5px;color:var(--meta)}
.t-manchete{font-size:29px;line-height:1.22;font-weight:800;color:var(--link);letter-spacing:-.015em}
.t-grande{font-size:21px;line-height:1.3;font-weight:800;color:var(--link);letter-spacing:-.01em}
.t-medio{font-size:16.5px;line-height:1.35;font-weight:700;color:var(--link)}
.t-lista{font-size:15.5px;line-height:1.4;font-weight:700;color:var(--link)}
.linhafina{font-size:14.5px;color:var(--body);margin-top:8px;line-height:1.55}
/* ⛔ AQUI HAVIA UMA REGRA `.zap` ÓRFÃ (removida em 26/08). Estava no meio das
   classes de título, sobra de outro componente: nenhum elemento do site usa
   `.zap` sozinho. O único que ela alcançava era o botão de WhatsApp da matéria
   (`.acao zap`), por acidente — e o `margin-left:auto` dela brigava com o do
   rótulo "COMPARTILHAR". Dois `auto` dividem o espaço livre entre si, e foi
   assim que o rótulo ficou boiando no meio do vão, a 142px do botão.
   🔑 Regra órfã não é inofensiva: ela não é usada por ninguém ATÉ o dia em que
   alguém cria uma classe com o mesmo nome. */

/* satélites (thumb à direita) */
.sat{display:grid;grid-template-columns:1fr 118px;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line)}
.sat:last-child{border-bottom:0}
.sat img{width:118px;height:78px;object-fit:cover;border-radius:8px}
/* linhas de lista (thumb à esquerda) */
.row{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row img{width:96px;height:64px;object-fit:cover;border-radius:8px}
.duo{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.duo{grid-template-columns:1fr 1fr}}

/* native ad = card com anatomia de notícia + badge */
.badge-ad{display:inline-block;background:#F5C518;color:#1A1A1A;font-size:9px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px}

/* ---------- BLOCO TV (modo TV = dark sempre) ---------- */
.tvblock{background:#0C1024;border-radius:14px;padding:22px;margin-top:34px;border:1px solid #1B2342}
.tvblock .secao{margin:0 0 14px}
.tvblock .secao h2{color:#fff}
.tvblock .secao .fio{background:#232C52}
.tvgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.tvgrid{grid-template-columns:repeat(3,1fr)}}
.tv-item{position:relative;display:block}
.tv-item img{border-radius:10px;aspect-ratio:16/10;object-fit:cover;width:100%}
.tv-item .dur{position:absolute;right:8px;top:8px;background:rgba(0,0,0,.75);color:#fff;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px}
.tv-item p{color:#E8EAF2;font-size:13.5px;font-weight:700;line-height:1.4;margin-top:8px}
.tv-item:hover{text-decoration:none}
.play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:40px;height:40px;
  background:rgba(241,47,40,.92);border-radius:50%;display:flex;align-items:center;justify-content:center}
.play::after{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}

/* ---------- SIDEBAR WIDGETS ---------- */
.widget{background:var(--card);border:1px solid var(--line-card);border-radius:12px;
  padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow)}
.widget h3{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--meta);
  text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.widget h3 .em{font-size:14px}
/* tempo */
/* O título vira uma linha com o ícone empurrado para a direita. ⚠️ `.widget h3`
   já traz tamanho, cor e espaçamento — aqui só o alinhamento, para o bloco
   continuar igual aos vizinhos. */
.tempo-tit{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tempo-ic{width:26px;height:26px;flex:none;color:var(--sol);opacity:.95}
.tempo-city{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tempo-city select{font-family:var(--font);font-weight:700;font-size:15px;color:var(--ink);
  background:transparent;border:0;outline:0;cursor:pointer}
/* o convite que ocupa o lugar dos números enquanto o leitor não escolhe */
.tempo-convite{font-size:12.5px;color:var(--meta);line-height:1.45;margin-top:2px}
/* ⚠️ Cinto e suspensório do `color-scheme` lá de cima: nem todo navegador
   aplica o esquema ao menu, mas todos respeitam cor explícita no <option>.
   Vale para os selects do site inteiro, não só o do tempo. */
select option{background:var(--card);color:var(--ink)}
.tempo-main{display:flex;align-items:center;gap:16px}
.tempo-main .ico{font-size:38px}
.tempo-main .max{font-size:26px;font-weight:800;color:var(--ink)}
.tempo-main .min{font-size:15px;color:var(--meta);font-weight:600}
.tempo-extra{font-size:12px;color:var(--meta);margin-top:8px}
/* turnos do dia — entrou em 09/09. Texto e nada mais: a temperatura por turno
   NÃO varia no INMET e mostrá-la seria precisão que o dado não tem. */
.tempo-turnos{margin-top:10px;display:grid;gap:4px}
.tempo-turnos div{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:baseline}
.tempo-turnos b{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--sol);font-weight:800}
.tempo-turnos span{font-size:12px;color:var(--body);line-height:1.35}
/* a porcentagem de chuva, ao lado do texto do turno. ⚠️ Fonte DIFERENTE da do
   texto (OpenWeather x INMET) — as duas são creditadas no rodapé do bloco. */
.tempo-turnos div{grid-template-columns:52px 1fr auto}
.tempo-turnos i{font-style:normal;font-size:12px;font-weight:800;color:var(--link);white-space:nowrap}
/* turno cujo texto é igual ao resumo do dia: some o texto, fica rótulo + %. */
.tempo-turnos div.so-hora{grid-template-columns:52px auto 1fr}
.tempo-turnos div.so-hora i{justify-self:start}
.tempo-prox u{display:block;text-decoration:none;font-size:10px;font-weight:700;color:var(--link)}
/* próximos dias — entrou em 09/09 com a previsão real do INMET. ⚠️ `--line` é o
   nome da variável da régua (não `--linha`): errar o nome não dá erro, só some
   a linha em silêncio. */
/* ⚠️ `space-between` e não `gap` fixo: são 5 dias e a coluna tem 300px — com
   gap fixo sobrava branco à direita, que foi o que ele viu em 09/09. */
.tempo-prox{display:flex;justify-content:space-between;gap:6px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line)}
.tempo-prox span{font-size:11px;color:var(--meta);line-height:1.45;text-align:center}
.tempo-amanha{font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sol);font-weight:800;margin-bottom:2px}
.tempo-prox b{display:block;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sol);font-weight:700;margin-bottom:1px}
.tempo-prox i{font-style:normal;font-weight:800;color:var(--ink)}
/* cotações */
.cot{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;
  border-bottom:1px solid var(--line)}
.cot:last-of-type{border-bottom:0}
/* ⚠️ O NOME da moeda toma a cor do bloco e o VALOR fica em ink: o olho vai
   primeiro ao número, que é o que o leitor veio buscar. O verde e o vermelho da
   variação continuam intocados — ali a cor SIGNIFICA alta e baixa, e mexer neles
   seria trocar informação por decoração. */
.cot .m{font-size:13.5px;font-weight:800;color:var(--cambio)}
.cot .v{font-size:14.5px;font-weight:800;color:var(--ink)}
.cot .var{font-size:11.5px;font-weight:700;margin-left:8px}

/* ── LOTERIAS ────────────────────────────────────────────────────────────────
   ⛔ A cor de CADA JOGO vem de --j-<chave>, e a classe `.j-<chave>` é escrita
   pelo PHP a partir da chave que veio da Caixa. Um jogo sem classe cai na cor do
   bloco (--loteria), então jogo novo aparece com cor neutra em vez de sumir. */
/* ⛔⛔ O PADRÃO TEM DE TER O MESMO PESO DA COR DO JOGO. Isto era
   `.lot-box .lot-jogo` — dois seletores, peso (0,2,0) — contra `.j-megasena`,
   que tem (0,1,0). Na LATERAL o padrão vencia e TODAS as bolinhas saíam oliva;
   na PÁGINA funcionava, porque lá o padrão é `.lot-cart`, que empata em peso e
   perde por vir antes. Ele viu na tela: "por que as cores estão na página e não
   estão na home?" (11/09). 🔑 Mesmo peso, e a ordem decide — que é como o resto
   do tema já trabalha. */
.lot-jogo,.lot-cart,.lot-aqui-jogo{--cor:var(--loteria)}
.j-megasena{--cor:var(--j-megasena)}
.j-quina{--cor:var(--j-quina)}
.j-lotofacil{--cor:var(--j-lotofacil)}
.j-lotomania{--cor:var(--j-lotomania)}
.j-timemania{--cor:var(--j-timemania)}
.j-duplasena{--cor:var(--j-duplasena)}
.j-federal{--cor:var(--j-federal)}
.j-diadesorte{--cor:var(--j-diadesorte)}
.j-supersete{--cor:var(--j-supersete)}
.j-maismilionaria{--cor:var(--j-maismilionaria)}
.j-loteca{--cor:var(--j-loteca)}

.lot-box .tempo-tit{border-bottom:2px solid var(--loteria)}
.lot-box .tempo-ic{color:var(--loteria)}
.lot-jogo{padding:9px 0;border-bottom:1px solid var(--line-card);
  display:flex;flex-direction:column;gap:5px}
.lot-jogo:last-of-type{border-bottom:0}
.lot-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  flex-wrap:wrap}
.lot-nome{font-family:var(--serif);font-weight:800;font-size:14.5px;color:var(--cor)}
.lot-c{font-size:11.5px;color:var(--meta);font-variant-numeric:tabular-nums}
.lot-dez{display:flex;flex-wrap:wrap;gap:5px}
.lot-dez span{background:var(--cor);color:var(--j-tinta);font-size:12.5px;
  font-weight:800;min-width:27px;height:27px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;font-variant-numeric:tabular-nums;
  padding:0 6px;line-height:1}
/* ⚠️ A Federal é BILHETE, não dezena: seis dígitos não cabem em círculo. */
.lot-dez.bilhete span{border-radius:3px;min-width:auto;padding:0 7px;
  letter-spacing:.5px;font-size:12px}
.lot-pe{font-size:12.5px;color:var(--body);line-height:1.45}
.lot-pe b{color:var(--ink);font-weight:700}
.lot-acum{color:var(--hot);font-weight:800}
.lot-teve{color:var(--up);font-weight:800}
.lot-extra{font-size:12px;color:var(--meta)}
/* 🔑 O PRÊMIO DA REGIÃO É O DIFERENCIAL: é a única linha aqui que nenhum portal
   nacional escreve pela nossa região. Por isso ganha destaque próprio. */
.lot-regiao{font-size:12.5px;color:var(--ink);background:var(--surface);
  border-left:3px solid var(--cor);padding:5px 9px;border-radius:0 3px 3px 0;
  line-height:1.4}
.lot-todos{display:block;text-align:center;margin-top:10px;padding:8px;
  font-size:13px;font-weight:700;color:var(--loteria);text-decoration:none;
  border:1px solid var(--loteria);border-radius:5px;transition:background .15s,color .15s}
.lot-todos:hover,.lot-todos:focus-visible{background:var(--loteria);color:var(--card)}

/* ── a página /loterias ─────────────────────────────────────────────────── */
.lot-quando{display:block;font-size:13px;color:var(--meta);margin-top:4px;
  font-variant-numeric:tabular-nums}
.lot-vazio{font-size:15px;color:var(--body)}
.lot-grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.lot-cart{background:var(--card);border:1px solid var(--line-card);border-radius:8px;
  padding:15px 16px;display:flex;flex-direction:column;gap:8px;
  border-top:3px solid var(--cor)}
.lot-cart .lot-nome{font-size:17px}
.lot-aqui{background:var(--card);border:1px solid var(--line-card);border-radius:8px;
  padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.lot-aqui h2{font-family:var(--serif);font-size:19px;color:var(--ink);font-weight:800}
.lot-aqui-it{font-size:14.5px;color:var(--body);line-height:1.5}
.lot-aqui-it b{color:var(--ink)}
.lot-aqui-jogo{display:inline-block;background:var(--cor);color:var(--j-tinta);
  font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:3px;margin-right:6px;vertical-align:1px}
.lot-aqui-c{color:var(--meta);font-size:12.5px;font-variant-numeric:tabular-nums}
/* ⛔ O aviso NÃO é rodapé decorativo: o STJ decidiu em 2026 que resultado errado
   publicado por veículo de imprensa é falha de serviço pelo CDC. Fica legível. */
.lot-aviso{font-size:13.5px;color:var(--body);line-height:1.55;
  border-left:3px solid var(--line);padding-left:12px;max-width:680px}
.lot-aviso b{color:var(--ink)}
@media (max-width:520px){
  .lot-grade{grid-template-columns:1fr}
}
.var.up{color:var(--up)}.var.down{color:var(--down)}
.fonte-w{font-size:10px;color:var(--meta);margin-top:10px}
.fonte-w a{color:var(--meta);text-decoration:underline}
/* mais lidas */
.ml{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ml:last-child{border-bottom:0}
.ml .n{font-family:var(--serif);font-style:italic;font-weight:700;font-size:30px;color:var(--link);
  line-height:1;min-width:26px}
.ml a{font-size:13.5px;font-weight:700;line-height:1.4}
/* horóscopo */
.signos{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.signos span{font-size:17px;background:var(--surface);border:1px solid var(--line-card);
  border-radius:8px;padding:4px 7px;cursor:pointer}
/* newsletter */
/* ⛔ A CAIXA DA NEWSLETTER PRECISA VENCER O `.widget` POR ESPECIFICIDADE.
   `.widget` está declarado DUAS vezes (linhas ~219 e ~1068) e a segunda vem
   DEPOIS destas regras. Mesma especificidade, quem vem por último ganha: a
   caixa perdia o navy e virava `--card`. No modo CLARO isso é branco, e o texto
   branco desaparecia — **contraste medido de 1,00:1** em 26/08.
   🔑 Só quebrava no claro: no escuro o `--card` é #161B25 e o texto branco ainda
   lia. Mesmo padrão do `h1` na faixa azul das institucionais (25/08).
   ⛔ `.widget.news-box` (0,2,0) vence `.widget` (0,1,0) **independentemente da
   ordem no arquivo** — que foi justamente o que falhou aqui. Não trocar por
   mover a regra para baixo: a próxima pessoa reordena o arquivo e quebra de
   novo, em silêncio.
   ⚠️ A `single.php` usa `.news-box` SEM `.widget`, e por isso nunca quebrou —
   as regras abaixo continuam servindo aquele caso. */
.widget.news-box{background:var(--brand);border:0}
.widget.news-box h3{color:rgba(255,255,255,.7)}
/* O link herda a cor global de link (#1560A5), que sobre o navy fica ilegível.
   Sobre fundo escuro ele acompanha o texto ao redor. */
.widget.news-box small a{color:#fff;text-decoration:underline}
.widget.news-box small a:hover{color:#fff;opacity:.8}
.news-box{background:var(--brand);border:0}
.news-box h3{color:rgba(255,255,255,.7)}
.news-box p{color:#fff;font-size:14.5px;font-weight:700;line-height:1.45;margin-bottom:12px}
.news-box input{width:100%;border:0;border-radius:8px;padding:11px 12px;font-family:var(--font);
  font-size:13px;margin-bottom:8px;outline:0}
.news-box button{width:100%;background:#2FA84F;color:#fff;border:0;border-radius:8px;
  padding:11px;font-family:var(--font);font-weight:800;font-size:13px;cursor:pointer;letter-spacing:.04em}
.news-box button:hover{filter:brightness(1.1)}
.news-box small{color:rgba(255,255,255,.55);font-size:10.5px;display:block;margin-top:8px}
/* denúncia */
.denuncia{border-left:4px solid var(--hot)}
.denuncia p{font-size:13px;margin-bottom:10px}
.denuncia .btn{display:inline-block;background:var(--link);color:#fff;font-weight:700;font-size:12.5px;
  border-radius:8px;padding:9px 14px}
.denuncia .btn:hover{text-decoration:none;filter:brightness(1.1)}

/* ---------- FOOTER ---------- */
/* ⛔ O 96px de recuo no pé SAIU JUNTO com a barra fixa (26/08). Ele existia só
   para o conteúdo não ficar embaixo dela no celular; sem a barra, era uma faixa
   vazia de 52px no fim de toda página. A regra de 900px que devolvia 44px no
   desktop também perdeu a função e saiu. */
footer{background:var(--brand);margin-top:20px;padding:44px 16px}
.foot-in{max-width:1120px;margin:0 auto}
.foot-top{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-bottom:28px}
.foot-top img{height:26px;width:auto}
.foot-top p{color:rgba(255,255,255,.75);font-size:13px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:30px}
@media(min-width:760px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
.foot-cols h4{color:#fff;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.foot-cols a{display:block;color:rgba(255,255,255,.72);font-size:13px;padding:3px 0}
.foot-cols a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;flex-wrap:wrap;
  gap:12px;justify-content:space-between;align-items:center}
.foot-base p{color:rgba(255,255,255,.45);font-size:11.5px}
.social{display:flex;gap:14px}
.social a{color:#fff;font-size:12px;font-weight:700}

/* ---------- DRAWER (menu lateral) ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,15,30,.55);z-index:80;opacity:0;
  pointer-events:none;transition:opacity .25s}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(84vw,340px);background:var(--card);z-index:90;
  transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;display:flex;flex-direction:column}
/* drill-down estilo g1: 2 painéis deslizantes */
.dpanels{flex:1;display:flex;width:200%;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.dpanel{width:50%;overflow-y:auto;padding-bottom:20px}
.drawer.lvl2 .dpanels{transform:translateX(-50%)}
.drill{display:flex !important;justify-content:space-between;align-items:center}
.drill .seta{color:var(--meta);font-size:19px;line-height:1}
.voltar{display:flex;align-items:center;gap:10px;padding:14px 20px;font-size:14px;font-weight:800;
  color:var(--link);border-bottom:1px solid var(--line)}
.voltar:hover{text-decoration:none}
.voltar .seta{font-size:19px}
body.menu-open .overlay{opacity:1;pointer-events:auto}
body.menu-open .drawer{transform:none}
.drawer-head{background:var(--brand);padding:18px 20px;display:flex;align-items:center;justify-content:space-between}
.drawer-head img{height:22px;width:auto}
.drawer-head button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.drawer-sec{padding:18px 20px 6px}
.drawer-sec h5{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--meta);
  text-transform:uppercase;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.drawer-list a{display:block;padding:7px 0;font-size:14px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.drawer-list a:last-child{border-bottom:0}
.drawer-list a:hover{color:var(--link);text-decoration:none}
.drawer-list a small{color:var(--meta);font-weight:400;font-size:11px}
.drawer hr{border:0;height:1px;background:var(--line);margin:10px 20px}

/* ===== placeholders de anúncio (cinza rotulado) ===== */
.ad-ph{background:repeating-linear-gradient(135deg,#dcdcdc 0 10px,#d5d5d5 10px 20px);
  border:1px dashed #a6a6a6;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#555;padding:12px;width:100%}
.ad-ph .kar{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px}
.ad-ph .nm{font-weight:800;font-size:13px;letter-spacing:.02em;color:#3d3d3d}
.ad-ph .sz{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-top:4px}
[data-theme="dark"] .ad-ph{background:repeating-linear-gradient(135deg,#232a36 0 10px,#1e242f 10px 20px);
  border-color:#3a4150;color:#aab1bd}
[data-theme="dark"] .ad-ph .nm{color:#e6e9ee}
[data-theme="dark"] .ad-ph .kar,[data-theme="dark"] .ad-ph .sz{color:#8b93a0}
.widget-ad{padding:12px;background:transparent;border:0;box-shadow:none}
/* ===== opinião (colunistas) ===== */
.op-card .op-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.op-card .op-av{font-size:20px;background:var(--surface);border:1px solid var(--line-card);
  border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.op-card .op-nome{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.op-card .op-cargo{display:block;font-size:11px;font-weight:700;color:var(--meta);
  letter-spacing:.03em;text-transform:uppercase}
/* ===== lightbox interstitial ===== */
.lb-overlay{position:fixed;inset:0;background:rgba(8,12,24,.72);z-index:120;display:none;
  align-items:center;justify-content:center;padding:20px}
.lb-overlay.on{display:flex}
.lb-box{position:relative;width:600px;max-width:94vw;height:600px;max-height:82vh}
.lb-close{position:absolute;top:-14px;right:-14px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:0;background:#fff;color:#111;font-size:17px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}




















/* GENCSS-START */
/* coluna do rio: min-width:0 deixa carrosséis (ex.: tv-yt) rolarem sem esticar o grid */
.rio{min-width:0}
/* placeholders de anúncio */
.ad-ph{background:repeating-linear-gradient(135deg,#dcdcdc 0 10px,#d5d5d5 10px 20px);
  border:1px dashed #a6a6a6;border-radius:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#555;padding:12px;width:100%}
.ad-ph .kar{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px}
.ad-ph .nm{font-weight:800;font-size:13px;letter-spacing:.02em;color:#3d3d3d}
.ad-ph .sz{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-top:4px}
[data-theme="dark"] .ad-ph{background:repeating-linear-gradient(135deg,#232a36 0 10px,#1e242f 10px 20px);border-color:#3a4150;color:#aab1bd}
[data-theme="dark"] .ad-ph .nm{color:#e6e9ee}
[data-theme="dark"] .ad-ph .kar,[data-theme="dark"] .ad-ph .sz{color:#8b93a0}
.widget-ad{padding:12px;background:transparent;border:0;box-shadow:none}
/* opinião (inicial no avatar) */
.op-card .op-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.op-card .op-av{font-family:var(--serif);font-weight:700;font-style:normal;font-size:18px;color:var(--link);
  background:var(--surface);border:1px solid var(--line-card);border-radius:50%;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center}
.op-card .op-nome{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.op-card .op-cargo{display:block;font-size:11px;font-weight:700;color:var(--meta);letter-spacing:.03em;text-transform:uppercase}
/* tempo (condição em texto, sem emoji) */
.tempo-cond{font-size:14px;font-weight:700;color:var(--ink);margin-top:6px}
/* publicidade legal */
.pl{padding:9px 0;border-bottom:1px solid var(--line)}
.pl:last-of-type{border-bottom:0}
.pl a{display:block;font-size:13px;font-weight:700;line-height:1.35;color:var(--ink)}
.pl a:hover{color:var(--link)}
.pl .pl-org{font-size:11px;color:var(--meta);margin-top:2px}
.pl-all{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:700}
/* Anuncie (header pílula + rodapé) */
.btn-anuncie{background:var(--hot);color:#fff;font-weight:700;font-size:12.5px;border-radius:8px;padding:8px 15px;white-space:nowrap} /* Anuncie = vermelho (comercial/compra) */
.btn-anuncie:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
.foot-anuncie{display:inline-block;background:var(--link);color:#fff;font-weight:700;border-radius:8px;padding:8px 16px;margin-bottom:10px}
.foot-anuncie:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
/* faixa comercial (Números + Mídia Kit) */
.comm-band{background:var(--brand);margin-top:8px}
.comm-in{max-width:1120px;margin:0 auto;padding:34px 16px;display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:900px){.comm-in{grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}}
.comm-kicker{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8FB4E0;margin-bottom:8px}
.comm-h{font-family:var(--serif);font-style:italic;font-weight:700;font-size:25px;color:#fff;line-height:1.22;margin-bottom:20px}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{border-left:2px solid var(--link);padding-left:12px}
.stat-n{display:block;font-size:20px;font-weight:800;color:#fff;line-height:1.15}
.stat-l{display:block;font-size:12px;color:rgba(255,255,255,.62);margin-top:3px}
.comm-note{font-size:10px;color:rgba(255,255,255,.4);margin-top:14px}
.midiakit{background:#fff;border-radius:14px;padding:22px 22px 20px}
[data-theme="dark"] .midiakit{background:var(--card)}
.midiakit h3{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:6px}
.midiakit p{font-size:13px;color:var(--body);margin-bottom:14px;line-height:1.5}
.midiakit input{width:100%;border:1px solid var(--line-card);border-radius:8px;padding:11px 12px;
  font-family:var(--font);font-size:13px;margin-bottom:8px;outline:0;background:var(--surface);color:var(--ink)}
.midiakit button{width:100%;background:var(--link);color:#fff;border:0;border-radius:8px;padding:12px;
  font-family:var(--font);font-weight:800;font-size:13px;cursor:pointer;letter-spacing:.03em}
.midiakit button:hover{filter:brightness(1.08)}
.midiakit small{display:block;color:var(--meta);font-size:10.5px;margin-top:8px}
/* módulo TV: player ao vivo + programas + youtube */
.tv-live{position:relative;display:block;border-radius:12px;overflow:hidden;margin-bottom:4px}
.tv-live img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tv-live .play{width:58px;height:58px;top:50%}
.live-badge{position:absolute;top:12px;left:12px;background:var(--hot);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.06em;padding:5px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:6px}
.live-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.3s ease-in-out infinite}
.tv-live-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-size:14px;font-weight:700}
.tv-sub{color:#8FB4E0;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin:22px 0 12px}
.tv-progs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.tv-progs{grid-template-columns:repeat(5,1fr)}}
.prog-card{display:block}
.prog-card:hover{text-decoration:none}
.prog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:7px}
.prog-nome{display:block;color:#E8EAF2;font-size:12.5px;font-weight:700;line-height:1.3}
.prog-hora{display:block;color:#8B93A8;font-size:11px;margin-top:2px}
.tv-yt{display:grid;grid-auto-flow:column;grid-auto-columns:210px;gap:14px;
  overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.tv-yt::-webkit-scrollbar{height:6px}.tv-yt::-webkit-scrollbar-thumb{background:#2a3350;border-radius:3px}
/* horóscopo full-width (carrossel horizontal) */
.horoscopo{margin:36px auto 6px}
.horo-track{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:14px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;min-width:0}
.horo-track::-webkit-scrollbar{height:6px}.horo-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.horo-card{background:var(--card);border:1px solid var(--line-card);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow);display:block}
.horo-card:hover{text-decoration:none;box-shadow:var(--shadow-hover)}
.horo-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.horo-sym{font-family:var(--serif);font-size:24px;color:var(--link);line-height:1}
.horo-nome{display:block;font-size:15.5px;font-weight:800;color:var(--ink)}
.horo-data{display:block;font-size:11px;color:var(--meta)}
.horo-txt{font-size:12.5px;color:var(--body);line-height:1.5}
/* ===== SERVIÇOS COLORIDOS (regra: editorial sóbrio × serviços coloridos) ===== */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.svc-grid{grid-template-columns:repeat(6,1fr)}}
.svc{border-radius:14px;padding:18px 16px;color:#fff;display:block;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s}
.svc:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-hover);color:#fff}
.svc svg{width:26px;height:26px;margin-bottom:10px}
.svc .t{display:block;font-weight:800;font-size:14.5px;line-height:1.25}
.svc .d{display:block;font-size:11.5px;opacity:.85;margin-top:4px;line-height:1.3}
.s-tv{background:#E42313}.s-of{background:#F2711C}.s-pl{background:#7A5AF5}
.s-nw{background:#2FA84F}.s-dn{background:#F5B301;color:#3A2E00}.s-ho{background:#E8478B}
.s-dn:hover{color:#3A2E00}.s-dn .d{opacity:.7}
/* rodapé: atalhos coloridos dos produtos */
.foot-svc{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:28px}
@media(min-width:700px){.foot-svc{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.foot-svc{grid-template-columns:repeat(6,1fr)}}
.foot-svc a{display:flex;align-items:center;gap:9px;border-radius:10px;padding:11px 13px;color:#fff;
  font-size:12.5px;font-weight:700;line-height:1.2}
.foot-svc a:hover{text-decoration:none;filter:brightness(1.12);color:#fff}
.foot-svc svg{width:18px;height:18px;flex:0 0 auto}
.foot-svc .s-dn,.foot-svc .s-dn:hover{color:#3A2E00}
/* nav do rodapé (Início - Cidades - Editorias - Anuncie - Contato) */
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-nav a{color:#fff;font-size:13px;font-weight:700}
.foot-nav a:hover{color:rgba(255,255,255,.72)}
/* GENCSS-END */

/* ======================================================================
   GENPROD (ofertas.html)
   ====================================================================== */
/* GENPROD-START */
/* placeholder de asset rotulado */
.ph-asset{background:repeating-linear-gradient(135deg,#e6ebf1 0 12px,#dfe5ec 12px 24px);
  border:1px dashed #b3bfce;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#6f7b8c;padding:14px;min-height:90px}
.ph-asset .k{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#94a0af;margin-bottom:5px}
.ph-asset .d{font-size:12px;font-weight:700;color:#59677a;max-width:240px;line-height:1.3}
[data-theme="dark"] .ph-asset{background:repeating-linear-gradient(135deg,#232a36 0 12px,#1e242f 12px 24px);
  border-color:#3a4150;color:#8b93a0}
[data-theme="dark"] .ph-asset .d{color:#aab1bd}
/* duas colunas genéricas (usada em heros e blocos "texto + imagem") */
.split{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
/* hero colorido do produto (--pc = cor do produto) */
.prod-hero{background:var(--pc);color:#fff;padding:52px 0 46px}
.prod-hero .ph-kick{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-bottom:10px}
.prod-hero h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:1.05;letter-spacing:-.01em}
.prod-hero .ph-sub{font-size:17px;color:rgba(255,255,255,.92);max-width:660px;margin-top:16px}
.prod-hero .ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn-prod{background:#fff;color:var(--pc);font-weight:800;font-size:14px;border-radius:9px;padding:12px 22px;display:inline-block}
.btn-prod:hover{text-decoration:none;filter:brightness(.95);color:var(--pc)}
.btn-ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
  font-weight:800;font-size:14px;border-radius:9px;padding:12px 22px;display:inline-block}
.btn-ghost:hover{text-decoration:none;background:rgba(255,255,255,.24);color:#fff}
@media(max-width:640px){.prod-hero h1{font-size:34px}}
/* 6 categorias coloridas */
.cats6{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:720px){.cats6{grid-template-columns:repeat(3,1fr)}}
.cat6{border-radius:16px;padding:26px 22px;color:#fff;display:block;box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s}
.cat6:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-hover);color:#fff}
.cat6 svg{width:34px;height:34px;margin-bottom:14px}
.cat6 .t{display:block;font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.1}
.cat6 .c{display:block;font-size:12.5px;font-weight:700;opacity:.85;margin-top:7px}
.k1{background:#2E97E6}.k2{background:#F5B301;color:#3A2E00}.k3{background:#37B24D}
.k4{background:#7A5AF5}.k5{background:#E8478B}.k6{background:#F2711C}
.k2:hover{color:#3A2E00}
/* encarte da edição */
.encarte{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;background:var(--card);
  border:1px solid var(--line-card);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
@media(min-width:760px){.encarte{grid-template-columns:220px 1fr}}
.encarte .cap{aspect-ratio:3/4;border-radius:10px}
.encarte h3{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--ink)}
.encarte p{font-size:14.5px;color:var(--body);margin-top:8px}
.encarte .ed{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
/* cards de anúncio */
.ads-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.ads-grid{grid-template-columns:repeat(4,1fr)}}
.ad-card{background:var(--card);border:1px solid var(--line-card);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:block;transition:box-shadow .18s,transform .18s}
.ad-card:hover{text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.ad-card .fig{aspect-ratio:4/3}
.ad-card .b{padding:14px 16px 16px}
.ad-card .cat{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--meta);border-radius:4px;padding:2px 8px;display:inline-block}
.ad-card h4{font-size:14.5px;font-weight:700;color:var(--link);line-height:1.35;margin:9px 0 6px}
.ad-card .preco{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--link)}
.ad-card .loc{font-size:12px;color:var(--meta);margin-top:3px}
/* CTA colorido de produto */
.cta-prod{background:var(--pc);color:#fff;border-radius:18px;padding:34px 30px;margin-top:8px;
  display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media(min-width:820px){.cta-prod{grid-template-columns:1fr auto}}
.cta-prod h3{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.15}
.cta-prod p{color:rgba(255,255,255,.9);font-size:15px;margin-top:8px;max-width:560px}
/* ===== PUBLICIDADE LEGAL: selo · benefícios · editais · passos ===== */
.selo-seg{width:124px;height:124px;border-radius:50%;background:#fff;color:#7A5AF5;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.2);flex:0 0 auto}
.selo-seg .b{font-family:var(--serif);font-weight:700;font-size:30px;line-height:1}
.selo-seg .s{font-size:11px;font-weight:800;letter-spacing:.05em;margin-top:2px}
.benef{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media(min-width:700px){.benef{grid-template-columns:repeat(2,1fr)}}
.bf{background:var(--card);border:1px solid var(--line-card);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.bf svg{width:28px;height:28px;color:#7A5AF5;margin-bottom:10px}
.bf b{display:block;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink)}
.bf small{display:block;font-size:12.5px;color:var(--body);margin-top:5px;line-height:1.45}
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}
.filtros select,.filtros input{border:1px solid var(--line-card);background:var(--card);border-radius:9px;
  padding:10px 13px;font-family:var(--font);font-size:13.5px;color:var(--ink);outline:0}
.filtros input{flex:1;min-width:200px}
.filtros button{background:#7A5AF5;color:#fff;border:0;border-radius:9px;padding:0 20px;
  font-family:var(--font);font-weight:800;font-size:13.5px;cursor:pointer}
.edt{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 0;
  border-bottom:1px solid var(--line)}
.edt .tp{background:#7A5AF5;color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:5px;white-space:nowrap}
.edt h4{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35}
.edt .org{font-size:12.5px;color:var(--meta);margin-top:3px}
.edt .cert{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#2FA84F;white-space:nowrap}
.edt .cert svg{width:15px;height:15px}
@media(max-width:640px){.edt{grid-template-columns:1fr;gap:8px}.edt .cert{justify-content:flex-start}}
.passos{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:760px){.passos{grid-template-columns:repeat(3,1fr)}}
.passo{background:var(--card);border:1px solid var(--line-card);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.passo .n{width:34px;height:34px;border-radius:50%;background:#7A5AF5;color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:17px;margin-bottom:12px}
.passo b{display:block;font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink)}
.passo p{font-size:13.5px;color:var(--body);margin-top:6px;line-height:1.5}
/* ===== TV: player ao vivo · grade · programas · vídeos ===== */
.player{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-hover);background:#0C1024}
.player .fig{aspect-ratio:16/9;border-radius:0;border:0}
.player .live{position:absolute;top:14px;left:14px;background:#E42313;color:#fff;font-size:11.5px;
  font-weight:800;letter-spacing:.06em;padding:6px 12px;border-radius:6px;display:inline-flex;align-items:center;gap:7px}
.player .live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.3s ease-in-out infinite}
.player .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.player .cap .ag{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FF8A80}
.player .cap .nm{font-family:var(--serif);font-weight:700;font-size:24px;margin-top:4px}
.canais{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.canais span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);border-radius:8px;
  padding:8px 14px;font-size:13px;font-weight:700}
/* grade horária */
.grade{display:grid;gap:0;border-top:1px solid var(--line)}
.gr{display:grid;grid-template-columns:86px 1fr auto;gap:16px;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--line)}
.gr .h{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink)}
.gr .p{font-size:14.5px;font-weight:700;color:var(--body)}
.gr.now{background:linear-gradient(90deg,rgba(228,35,19,.09),transparent);border-left:3px solid #E42313;padding-left:12px}
.gr.now .h,.gr.now .p{color:#E42313}
.gr .tagnow{background:#E42313;color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:3px 9px;border-radius:5px}
/* cards de programa */
.progcards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.progcards{grid-template-columns:repeat(2,1fr)}}
.pc{display:grid;grid-template-columns:96px 1fr;gap:16px;background:var(--card);border:1px solid var(--line-card);
  border-radius:14px;padding:16px;box-shadow:var(--shadow);align-items:center}
.pc .lg{aspect-ratio:1;border-radius:12px}
.pc h4{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);line-height:1.2}
.pc .hr{font-size:12px;font-weight:800;color:#E42313;margin-top:5px;letter-spacing:.02em}
.pc p{font-size:13px;color:var(--body);margin-top:6px;line-height:1.45}
/* vídeos */
.vids{display:grid;grid-auto-flow:column;grid-auto-columns:230px;gap:14px;overflow-x:auto;padding-bottom:8px;min-width:0}
.vid{display:block}
.vid .th{position:relative;border-radius:10px;overflow:hidden}
.vid img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.vid .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;
  background:rgba(228,35,19,.92);border-radius:50%;display:flex;align-items:center;justify-content:center}
.vid .pl::after{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.vid .dur{position:absolute;right:7px;top:7px;background:rgba(0,0,0,.75);color:#fff;font-size:10px;
  font-weight:700;padding:2px 6px;border-radius:4px}
.vid p{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;margin-top:8px}
.vid:hover{text-decoration:none}
/* ===== DENÚNCIA: hero amarelo (tinta escura) + formulário ===== */
.prod-hero.ink-dark{color:#3A2E00}
.prod-hero.ink-dark .ph-kick{color:rgba(58,46,0,.6)}
.prod-hero.ink-dark .ph-sub{color:rgba(58,46,0,.85)}
.prod-hero.ink-dark .btn-prod{background:#3A2E00;color:#FFD75E}
.prod-hero.ink-dark .btn-prod:hover{color:#FFD75E}
.prod-hero.ink-dark .btn-ghost{background:rgba(58,46,0,.08);border-color:rgba(58,46,0,.35);color:#3A2E00}
.prod-hero.ink-dark .btn-ghost:hover{background:rgba(58,46,0,.16);color:#3A2E00}
.den-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
@media(min-width:920px){.den-grid{grid-template-columns:1fr 330px}}
.formcard{background:var(--card);border:1px solid var(--line-card);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.fl{display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:15px}
@media(min-width:620px){.fl.duo{grid-template-columns:1fr 1fr}.fl.trio{grid-template-columns:repeat(3,1fr)}}
.fld span{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;font-family:var(--font);font-size:14px;color:var(--ink)}
.fld textarea{min-height:140px;resize:vertical;line-height:1.5}
.drop{border:2px dashed #D8AE2E;border-radius:12px;background:rgba(245,179,1,.08);padding:24px;
  text-align:center;margin-bottom:15px}
.drop svg{width:28px;height:28px;color:#C9970B;margin-bottom:8px}
.drop b{display:block;font-size:14.5px;color:var(--ink)}
.drop small{display:block;font-size:12.5px;color:var(--body);margin-top:5px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body);line-height:1.45;margin-bottom:11px}
.chk input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:#F5B301}
.btn-send{background:#F5B301;color:#3A2E00;font-weight:800;font-size:15px;border:0;border-radius:10px;
  padding:14px 26px;cursor:pointer;font-family:var(--font);width:100%;margin-top:6px}
.btn-send:hover{filter:brightness(.94)}
.sidecard{background:var(--card);border:1px solid var(--line-card);border-radius:16px;padding:20px;
  box-shadow:var(--shadow);margin-bottom:16px}
.sidecard h4{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:14px}
.mini{display:flex;gap:12px;margin-bottom:14px}
.mini .n{width:26px;height:26px;flex:none;border-radius:50%;background:#F5B301;color:#3A2E00;font-weight:800;
  font-size:13px;display:flex;align-items:center;justify-content:center}
.mini p{font-size:13px;color:var(--body);line-height:1.45}
.mini p b{color:var(--ink)}
.sigilo{display:flex;gap:12px;align-items:center;background:rgba(47,168,79,.09);
  border:1px solid rgba(47,168,79,.3);border-radius:12px;padding:15px}
.sigilo svg{width:26px;height:26px;color:#2FA84F;flex:none}
.sigilo p{font-size:12.5px;color:var(--body);line-height:1.4}
.sigilo p b{color:var(--ink)}
.regras{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.regras{grid-template-columns:repeat(3,1fr)}}
.rg{border-left:3px solid #F5B301;padding:4px 0 4px 16px}
.rg b{display:block;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink)}
.rg p{font-size:13.5px;color:var(--body);margin-top:6px;line-height:1.5}
/* ===== RECEBA NOTÍCIAS (verde): canais + números ===== */
.canais2{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:820px){.canais2{grid-template-columns:1fr 1fr}}
.cnl{background:var(--card);border:1px solid var(--line-card);border-radius:18px;padding:28px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.cnl .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:16px}
.cnl .ic svg{width:27px;height:27px}
.cnl h3{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink);line-height:1.15}
.cnl .sb{font-size:14px;color:var(--body);margin-top:9px;line-height:1.5;flex:1}
.cnl form{margin-top:18px;display:grid;gap:11px}
.cnl .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cnl .tags span{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  font-size:11.5px;font-weight:700;color:var(--body)}
.btn-nw{background:#2FA84F;color:#fff;font-weight:800;font-size:15px;border:0;border-radius:10px;
  padding:14px 22px;cursor:pointer;font-family:var(--font);width:100%;display:block;text-align:center}
.btn-nw:hover{filter:brightness(.93);text-decoration:none;color:#fff}
.btn-wa{background:#128C4B}
.nums3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;max-width:620px}
.nm3 b{display:block;font-family:var(--serif);font-weight:700;font-size:36px;line-height:1;color:#fff}
.nm3 small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:8px;line-height:1.35}
@media(max-width:560px){.nm3 b{font-size:26px}.nm3 small{font-size:10px}}
.bul{display:grid;gap:15px}
.bu{display:flex;gap:12px;align-items:flex-start}
.bu svg{width:21px;height:21px;color:#2FA84F;flex:none;margin-top:2px}
.bu b{font-size:15px;color:var(--ink)}
.bu p{font-size:13.5px;color:var(--body);line-height:1.5;margin-top:3px}
/* ===== HORÓSCOPO (rosa): 12 signos ===== */
.signos12{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.signos12{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.signos12{grid-template-columns:repeat(6,1fr)}}
.sg{background:var(--card);border:1px solid var(--line-card);border-radius:14px;padding:18px 10px;
  text-align:center;box-shadow:var(--shadow);display:block;cursor:pointer;transition:transform .16s,box-shadow .16s}
.sg:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.sg .gl{display:block;font-size:30px;line-height:1;color:#E8478B}
.sg b{display:block;font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);margin-top:9px}
.sg small{display:block;font-size:10.5px;color:var(--meta);margin-top:3px;font-weight:700}
.sg.on{background:#E8478B;border-color:#E8478B}
.sg.on .gl,.sg.on b{color:#fff}
.sg.on small{color:rgba(255,255,255,.82)}
.hoje{display:grid;grid-template-columns:1fr;gap:26px;background:var(--card);border:1px solid var(--line-card);
  border-radius:18px;padding:28px;box-shadow:var(--shadow)}
@media(min-width:820px){.hoje{grid-template-columns:190px 1fr}}
.hoje .med{background:#E8478B;border-radius:16px;color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:28px 16px;text-align:center}
.hoje .med .gl{font-size:64px;line-height:1}
.hoje .med b{font-family:var(--serif);font-weight:700;font-size:24px;margin-top:10px}
.hoje .med small{font-size:12px;opacity:.85;margin-top:4px;font-weight:700}
.hoje .txt .dia{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#E8478B}
.hoje .txt p{font-size:15.5px;color:var(--body);line-height:1.65;margin-top:10px}
.aspectos{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
@media(min-width:600px){.aspectos{grid-template-columns:repeat(3,1fr)}}
.asp{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:15px}
.asp .t{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#E8478B}
.asp p{font-size:13.5px;color:var(--body);margin-top:6px;line-height:1.45}

/* ======================================================================
   GENINST (sobre.html)
   ====================================================================== */
/* GENINST-START */
/* placeholder de asset rotulado (mesmo das páginas de produto) */
.ph-asset{background:repeating-linear-gradient(135deg,#e6ebf1 0 12px,#dfe5ec 12px 24px);
  border:1px dashed #b3bfce;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;color:#6f7b8c;padding:14px;min-height:90px}
.ph-asset .k{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#94a0af;margin-bottom:5px}
.ph-asset .d{font-size:12px;font-weight:700;color:#59677a;max-width:260px;line-height:1.3}
[data-theme="dark"] .ph-asset{background:repeating-linear-gradient(135deg,#232a36 0 12px,#1e242f 12px 24px);
  border-color:#3a4150;color:#8b93a0}
[data-theme="dark"] .ph-asset .d{color:#aab1bd}
/* seletor de variação — CONTROLE DE PROTÓTIPO (remover no tema) */
.vswitch{background:#F5C518;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--font);position:sticky;top:0;z-index:80}
.vswitch b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5a4a00;margin-right:4px}
.vswitch button{background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.15);color:#3a3000;font-family:var(--font);
  font-size:12.5px;font-weight:700;border-radius:6px;padding:6px 13px;cursor:pointer}
.vswitch button.on{background:#1A1A1A;border-color:#1A1A1A;color:#fff}
.vswitch .nota{font-size:11px;color:#6b5900;margin-left:auto}
/* ---- componentes compartilhados com as páginas de produto ---- */
.split{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
.ads-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.ads-grid{grid-template-columns:repeat(4,1fr)}}
.ad-card{background:var(--card);border:1px solid var(--line-card);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);display:block;transition:box-shadow .18s,transform .18s}
.ad-card:hover{text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.ad-card .b{padding:14px 16px 16px}
.ad-card .cat{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--meta);border-radius:4px;padding:2px 8px;display:inline-block}
.ad-card h4{font-size:14.5px;font-weight:700;color:var(--link);line-height:1.35;margin:9px 0 6px}
.cta-prod{background:var(--pc);color:#fff;border-radius:18px;padding:34px 30px;margin-top:8px;
  display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
@media(min-width:820px){.cta-prod{grid-template-columns:1fr auto}}
.cta-prod h3{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.15}
.cta-prod p{color:rgba(255,255,255,.9);font-size:15px;margin-top:8px;max-width:560px}
.btn-prod{background:#fff;color:var(--pc);font-weight:800;font-size:14px;border-radius:9px;
  padding:12px 22px;display:inline-block;white-space:nowrap}
.btn-prod:hover{text-decoration:none;filter:brightness(.95);color:var(--pc)}
.formcard{background:var(--card);border:1px solid var(--line-card);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.fl{display:grid;grid-template-columns:1fr;gap:15px;margin-bottom:15px}
@media(min-width:620px){.fl.duo{grid-template-columns:1fr 1fr}.fl.trio{grid-template-columns:repeat(3,1fr)}}
.fld span{display:block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:9px;
  padding:11px 12px;font-family:var(--font);font-size:14px;color:var(--ink)}
.fld textarea{min-height:140px;resize:vertical;line-height:1.5}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--body);line-height:1.45;margin-bottom:11px}
.chk input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--link)}
.btn-send{font-weight:800;font-size:15px;border:0;border-radius:10px;padding:14px 26px;cursor:pointer;
  font-family:var(--font);width:100%;margin-top:6px}
.btn-send:hover{filter:brightness(.94)}
.sidecard{background:var(--card);border:1px solid var(--line-card);border-radius:16px;padding:20px;
  box-shadow:var(--shadow);margin-bottom:16px}
/* ===== cabeçalho institucional (navy — conteúdo sóbrio) ===== */
.inst-hero{background:var(--brand);color:#fff;padding:40px 0 36px}
.inst-hero .bc{font-size:12px;color:rgba(255,255,255,.6);margin-bottom:11px}
.inst-hero .bc a{color:rgba(255,255,255,.8)}
.inst-hero .bc a:hover{color:#fff}
/* ⛔ A COR TEM DE SER EXPLÍCITA AQUI. O `.inst-hero` declara `color:#fff`, mas
   isso é HERANÇA — e o `h1` global (linha ~978) traz `color:var(--ink)`, que
   vence. No modo CLARO o `--ink` é #1A1A1A: título quase preto sobre o navy
   #0D1E52, contraste medido de **1,10:1**. O mínimo legível é 3:1.
   🔑 SOBREVIVEU PORQUE SÓ QUEBRA NO CLARO: no escuro o `--ink` vira #F2F3F5 e
   dá 14,28:1, então quem testou no escuro viu tudo certo. Todo o resto da
   faixa (migalha, subtítulo, data) já era branco explícito — só o título
   dependia de herança, e por isso só ele caiu.
   Afetava as CINCO páginas institucionais: sobre, contato, expediente,
   privacidade e princípios editoriais. */
.inst-hero h1{font-family:var(--serif);font-weight:700;font-size:40px;line-height:1.06;letter-spacing:-.01em;color:#fff}
.inst-hero .sub{font-size:16px;color:rgba(255,255,255,.86);max-width:660px;margin-top:13px;line-height:1.55}
.inst-hero .upd{font-size:11px;color:rgba(255,255,255,.5);margin-top:16px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}
@media(max-width:640px){.inst-hero h1{font-size:30px}}
/* ===== página de texto: prosa + índice fixo ===== */
.pg-grid{display:grid;grid-template-columns:1fr;gap:36px;padding:32px 0 8px;align-items:start}
@media(min-width:920px){.pg-grid{grid-template-columns:1fr 250px}}
.toc{background:var(--card);border:1px solid var(--line-card);border-radius:14px;padding:18px 20px;
  box-shadow:var(--shadow)}
@media(min-width:920px){.toc{position:sticky;top:16px}}
.toc b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);margin-bottom:10px}
.toc a{display:block;font-size:13px;color:var(--body);padding:7px 0;border-bottom:1px solid var(--line);line-height:1.35}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--link)}
.prose h2{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--ink);line-height:1.2;
  margin:34px 0 12px;scroll-margin-top:64px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;font-weight:800;color:var(--ink);margin:20px 0 8px}
.prose p{font-size:16px;line-height:1.72;color:var(--body);margin-bottom:14px}
.prose ul{margin:0 0 16px 22px}
.prose li{font-size:15.5px;line-height:1.66;color:var(--body);margin-bottom:9px}
.prose li b{color:var(--ink)}
.prose a{color:var(--link)}
.prose .lead{font-size:17.5px;line-height:1.65;color:var(--ink);font-weight:500}
.ficha{width:100%;border-collapse:collapse;margin:4px 0 20px}
.ficha th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);padding:11px 14px 11px 0;width:200px;vertical-align:top;border-bottom:1px solid var(--line)}
.ficha td{font-size:15px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line);line-height:1.5}
@media(max-width:600px){.ficha th,.ficha td{display:block;width:auto;border-bottom:0;padding:2px 0}
  .ficha td{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px}}
.falta{background:#FFF4CC;border:1px dashed #D8AE2E;color:#7a5f00;font-size:11px;font-weight:800;
  border-radius:5px;padding:2px 8px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
[data-theme="dark"] .falta{background:rgba(216,174,46,.16);color:#E6C56A;border-color:#8a6f1c}
.aviso{background:var(--card);border:1px solid var(--line-card);border-left:4px solid var(--link);
  border-radius:0 12px 12px 0;padding:18px 20px;margin:20px 0}
.aviso p{font-size:14.5px;margin:0;line-height:1.6}
.aviso p b{color:var(--ink)}
/* ===== SOBRE: ecossistema colorido, linha do tempo, cobertura ===== */
.eco4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:900px){.eco4{grid-template-columns:repeat(4,1fr)}}
.ec{border-radius:16px;padding:24px 20px;color:#fff;box-shadow:var(--shadow)}
.ec svg{width:26px;height:26px;opacity:.85;margin-bottom:12px}
.ec .n{display:block;font-family:var(--serif);font-weight:700;font-size:32px;line-height:1}
.ec .t{display:block;font-size:14.5px;font-weight:800;margin-top:9px}
.ec .d{display:block;font-size:12.5px;opacity:.86;margin-top:6px;line-height:1.45}
.cit{border-left:4px solid var(--link);padding:4px 0 4px 22px;margin:10px 0 26px}
.cit p{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink);font-style:italic}
.cit small{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--meta);margin-top:12px}
.linha{position:relative;padding-left:28px;margin-top:10px}
.linha::before{content:"";position:absolute;left:5px;top:8px;bottom:14px;width:2px;background:var(--line)}
.mk{position:relative;padding-bottom:24px}
.mk::before{content:"";position:absolute;left:-28px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--link);box-shadow:0 0 0 4px var(--bg)}
.mk .ano{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
.mk b{display:block;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);margin-top:3px}
.mk p{font-size:14.5px;color:var(--body);margin-top:6px;line-height:1.6}
.chips-cid{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.chips-cid span{background:var(--card);border:1px solid var(--line-card);border-radius:16px;
  padding:5px 12px;font-size:12.5px;color:var(--body)}
.chips-cid span.forte{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
/* ===== CONTATO: departamentos coloridos ===== */
.deps{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:780px){.deps{grid-template-columns:repeat(2,1fr)}}
.dep{border-radius:16px;padding:24px;color:#fff;box-shadow:var(--shadow)}
.dep svg{width:26px;height:26px;margin-bottom:12px;opacity:.9}
.dep h3{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.15}
.dep p{font-size:13.5px;opacity:.9;margin-top:8px;line-height:1.5}
.dep .via{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.dep .via a{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;
  border-radius:8px;padding:8px 14px;font-size:13px;font-weight:800}
.dep .via a:hover{background:rgba(255,255,255,.3);text-decoration:none;color:#fff}
.ct-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:920px){.ct-grid{grid-template-columns:1fr 340px}}
/* ===== 404 ===== */
.e404{text-align:center;padding:64px 0 20px;max-width:640px;margin:0 auto}
.e404 .cod{font-family:var(--serif);font-weight:700;font-size:112px;line-height:1;color:var(--link);
  letter-spacing:-.04em}
.e404 h1{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--ink);margin-top:6px}
.e404 p{font-size:16px;color:var(--body);margin-top:12px;line-height:1.6}
.e404 .busca{display:flex;gap:9px;margin:26px auto 0;max-width:460px}
.e404 .busca input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;font-family:var(--font);font-size:14.5px;color:var(--ink)}
.e404 .busca button{background:var(--link);color:#fff;border:0;border-radius:9px;padding:13px 22px;
  font-family:var(--font);font-weight:800;font-size:14px;cursor:pointer}
@media(max-width:560px){.e404 .cod{font-size:74px}.e404 h1{font-size:24px}}

/* ======================================================================
   GENLST (listagem.html)
   ====================================================================== */
/* GENLST-START */
/* seletor de variação — CONTROLE DE PROTÓTIPO (remover no tema) */
.vswitch{background:#F5C518;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-family:var(--font);position:sticky;top:0;z-index:80}
.vswitch b{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#5a4a00;margin-right:4px}
.vswitch button{background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.15);color:#3a3000;font-family:var(--font);
  font-size:12.5px;font-weight:700;border-radius:6px;padding:6px 13px;cursor:pointer}
.vswitch button.on{background:#1A1A1A;border-color:#1A1A1A;color:#fff}
.vswitch .nota{font-size:11px;color:#6b5900;margin-left:auto}
/* cabeçalho da listagem */
.lst-head{padding:26px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.lh-kick{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--link);margin-bottom:6px}
.lst-head h1{font-family:var(--serif);font-weight:700;font-size:42px;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
.lh-sub{font-size:15.5px;color:var(--body);margin-top:10px;max-width:640px}
.lh-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:13px;color:var(--meta);font-weight:600}
.lh-tempo b{font-size:18px;color:var(--ink)}
.lh-link{font-weight:700}
.lh-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.lh-chips-l{font-size:12px;color:var(--meta);font-weight:700;margin-right:2px}
.lh-chips .chip{font-size:12.5px;padding:5px 13px}
.lh-autor{display:flex;gap:18px;align-items:flex-start}
.lh-av{width:76px;height:76px;border-radius:50%;background:var(--brand);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;font-weight:700;flex:0 0 auto}
.lh-search{display:flex;gap:8px;max-width:520px;margin-top:4px}
.lh-search input{flex:1;border:1px solid var(--line-card);background:var(--card);border-radius:10px;
  padding:13px 16px;font-family:var(--font);font-size:15px;color:var(--ink);outline:0}
.lh-search button{background:var(--link);color:#fff;border:0;border-radius:10px;padding:0 22px;
  font-family:var(--font);font-weight:800;font-size:14px;cursor:pointer}
/* itens da listagem */
.lst-dest{margin-bottom:4px}
.lst-itens{display:grid;gap:2px}
.lst-item{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--line);align-items:start}
.lst-item:hover{text-decoration:none}
.lst-item img{width:190px;height:120px;object-fit:cover;border-radius:10px}
.lst-item h3{font-family:var(--font);font-size:18px;font-weight:700;line-height:1.32;color:var(--link);margin-top:2px}
.lst-item p{font-size:14px;color:var(--body);margin-top:7px;line-height:1.55}
@media(max-width:640px){.lst-item{grid-template-columns:110px 1fr;gap:12px}
  .lst-item img{width:110px;height:78px}.lst-item h3{font-size:15.5px}.lst-item p{display:none}}
/* paginação */
.pag{display:flex;gap:8px;align-items:center;justify-content:center;margin:34px 0 8px;flex-wrap:wrap}
.pag .pg{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-card);border-radius:8px;font-size:14px;font-weight:700;color:var(--ink);padding:0 12px}
.pag a.pg:hover{border-color:var(--link);color:var(--link);text-decoration:none}
.pag .pg.on{background:var(--link);border-color:var(--link);color:#fff}
.pag .pg.dots{border:0}
.pag .next{font-weight:800;color:var(--link)}

/* ======================================================================
   MATÉRIA (materia.html)
   ====================================================================== */
/* ⛔ AQUI HAVIA CSS QUEBRADO, e não era pouco (removido em 26/08).
   Sete linhas de tokens (`--bg`, `--card`, `--zapverde`…) estavam SOLTAS, sem
   `:root {` e sem `}` — cópia da abertura do arquivo que perdeu o invólucro.
   O navegador, ao achar declaração no lugar de seletor, sai procurando a chave
   de abertura, encontra só a do `body{...}` da linha seguinte e DESCARTA TUDO,
   os tokens e a regra do body junto. Sem um erro sequer.
   Estrago medido: `--zapverde` nunca chegava a existir, e como `var()` inválido
   faz a propriedade cair no valor INICIAL (e não voltar para a cascata), o
   botão do WhatsApp ficava com fundo TRANSPARENTE — texto branco sobre o creme
   da página. Foi o que o Vinicius viu.
   A regra do `body` sobreviveu por sorte: existe idêntica na linha 64. E os
   tokens duplicavam os do `:root` do topo, exceto `--zapverde`, que só existia
   aqui e por isso foi para o lugar certo. */
/* header / cidades / ao vivo (idêntico à home) */
.topbar{position:sticky;top:0;z-index:60;background:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.topbar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:0 16px;height:56px}
.icon-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:8px;
  height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;padding:0 10px;font-family:var(--font)}
.btn-entrar{background:#fff;color:var(--brand);font-weight:700;font-size:13px;border:0;border-radius:8px;padding:8px 16px;cursor:pointer}
.nav-in{max-width:1120px;margin:0 auto;display:flex;gap:2px;overflow-x:auto;padding:0 16px;
  align-items:center;scrollbar-width:none}
.mi.on{color:var(--link);border-bottom-color:var(--link)}
.dd-panel{position:absolute;top:100%;left:16px;background:var(--card);border:1px solid var(--line-card);
  border-top:0;border-radius:0 0 14px 14px;box-shadow:var(--shadow-hover);padding:12px;display:none;
  border:1px solid var(--line-card);border-radius:20px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--link);border-color:var(--link);color:#fff}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hot);vertical-align:middle;
  margin:-2px 8px 0 0;animation:blink 1.3s ease-in-out infinite}
.ad-slot .tag-ad{font-size:9px;font-weight:700;letter-spacing:.22em;color:var(--meta);text-transform:uppercase;margin-bottom:8px}
.ad-regua{display:flex;align-items:center;gap:14px;color:var(--meta);font-size:9px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;margin:26px 0 12px}
/* layout do single */
.grid{display:grid;grid-template-columns:1fr;gap:28px;padding:20px 0 40px}
/* sem isso o min-content do breadcrumb estica a coluna e estoura a página no celular */
.grid>*{min-width:0}
@media(min-width:980px){.grid{grid-template-columns:1fr 320px;gap:40px}}
.breadcrumb{font-size:12px;color:var(--meta);padding-top:18px}
.breadcrumb a{color:var(--meta)}
.breadcrumb a:hover{color:var(--link)}
.art-head{padding:10px 0 0}
.chapeu{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.chapeu .ed{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--hot);text-transform:uppercase}
/* Chapéu da matéria paga (Fase 2, 12/09/2026). Abaixo de 320px a tarja quebrava em
   duas linhas; com o wrap fica numa e o link desce inteiro. SÓ no chapéu pago
   (.chapeu.bc, posto pelo single.php): com o wrap geral, notícia com editoria e
   cidade de nome longo mudava de altura no celular (2ª revisão de 12/09).
   ⛔ O link "O que é Branded Content?" CONTINUA CINZA, como nos 2 cards: o azul
   (5,43:1 contra 2,73:1) foi proposto e o Vinicius decidiu manter cinza em
   13/09/2026. Não repropor sem ele. */
.chapeu.bc{flex-wrap:wrap;row-gap:4px}
.chapeu.bc .badge-ad{white-space:nowrap}
h1{font-size:31px;line-height:1.22;font-weight:800;color:var(--ink);letter-spacing:-.018em;margin-bottom:12px}
@media(min-width:700px){h1{font-size:38px}}
.olho{font-size:17.5px;line-height:1.55;color:var(--body);font-weight:400;margin-bottom:18px}
.byline{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.byline .who{flex:1;min-width:180px}
/* nome e foto do autor levam à página do repórter (08/10/2026): o visual não
   muda — o nome segue a cor do texto e só sublinha no mouse */
/* ⛔ o prefixo .byline/.autorbox é obrigatório: `.autorbox a` (mais abaixo) é o
   estilo do "ver matérias" e venceria um a.autor-nome solto */
.byline a.autor-nome,.autorbox a.autor-nome{color:inherit;font-size:inherit;font-weight:inherit;text-decoration:none}
a.autor-nome:hover,a.autor-nome:focus-visible{text-decoration:underline}
a.autor-foto{display:block;flex:0 0 auto;line-height:0;border-radius:50%}
.byline .who span{display:block;font-size:11.5px;color:var(--meta)}
.leitura{font-size:11.5px;color:var(--meta);white-space:nowrap}
/* barra de ações */
.acoes{display:flex;gap:10px;margin:16px 0 18px;flex-wrap:wrap;align-items:center}
/* "COMPARTILHAR" empurra a si mesmo e aos dois botões para a direita, deixando
   o Curtir sozinho à esquerda: uma ação é do leitor sobre a matéria, a outra
   leva a matéria para fora. São coisas diferentes e ficam separadas. */
.compart{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--meta)}
/* ⛔ `flex:none` no ícone: sem isso o flex encolhe o SVG quando o botão aperta
   no celular, e o glifo vira um borrão de 6px em vez de simplesmente quebrar
   a linha. */
.acao svg{width:16px;height:16px;flex:none}
/* ---- NO CELULAR OS BOTÕES DE COMPARTILHAR FICAM SÓ COM O ÍCONE ----
   Decisão do Vinicius, 26/08: em 390px a linha quebrava e o Facebook descia
   sozinho. O ícone da marca já identifica o destino, e o "COMPARTILHAR" ao lado
   diz o que a dupla faz — a palavra dentro do botão era a parte descartável.
   ⛔ O texto some com `display:none`, e não por largura zero, PORQUE O `<a>` JÁ
      TEM `aria-label`: quem usa leitor de tela continua ouvindo "Compartilhar no
      WhatsApp". Sem o aria-label isso deixaria um botão mudo.
   ⚠️ O `gap` do `.acao` tem de ir a zero junto: com o texto fora, ele viraria
      8px de vazio à direita do ícone e o botão sairia torto. */
@media (max-width:559.98px){
  .acao.zap span,.acao.fb span{display:none}
  .acao.zap,.acao.fb{gap:0;padding:9px 12px}
  .acao svg{width:18px;height:18px}
}
.acao{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-card);background:var(--card);
  color:var(--body);border-radius:24px;padding:9px 16px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}
.acao:hover{border-color:var(--link);color:var(--link);text-decoration:none}
.acao.zap{background:var(--zapverde);border-color:var(--zapverde);color:#fff}
/* ⛔ Era #3b5998, o azul que o Facebook APOSENTOU em 2019 — e que não bate com
   o botão do bloco "Siga o Todo Dia" (`.rs-fb`), que já usa o atual. Dois azuis
   de Facebook na mesma página é erro que só o olho treinado vê, mas vê.
   ⚠️ O #1877F2 puro dá 3,1:1 com texto branco. Escurecido o suficiente para
   passar de 4,5:1 mantendo o tom reconhecível. */
.acao.fb{background:#0B5FCE;border-color:#0B5FCE;color:#fff}
.acao.zap:hover,.acao.fb:hover{color:#fff;filter:brightness(1.1)}
/* CURTIR (08/10/2026): coração vazado; curtido = coração VERMELHO cheio, com uma
   "batida" — como no Instagram. ⛔ Era `.acao.liked`, mas o JS sempre marcou `on`:
   o botão nunca mudou de cor (achado de 14/09). */
.acao.curtir .cora{fill:none;stroke:currentColor;stroke-width:2;transition:fill .15s,stroke .15s}
.acao.curtir.on{color:var(--ink);border-color:#E0245E}
.acao.curtir.on .cora{fill:#E0245E;stroke:#E0245E}
.acao.curtir.bate .cora{animation:td-bate .45s ease}
@keyframes td-bate{0%{transform:scale(1)}30%{transform:scale(1.35)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.acao.curtir.bate .cora{animation:none}}
/* player TTS */
.tts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line-card);
  border-radius:12px;padding:12px 16px;margin-bottom:20px;box-shadow:var(--shadow)}
.tts button{width:38px;height:38px;border-radius:50%;border:0;background:var(--link);color:#fff;font-size:14px;cursor:pointer;flex:0 0 auto}
.tts .bar{flex:1;height:5px;background:var(--surface);border-radius:4px;overflow:hidden}
.tts .fill{height:100%;width:0%;background:var(--link);transition:width .4s linear}
.tts .t{font-size:11px;color:var(--meta);white-space:nowrap}
.tts .lbl{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.tts-voz{display:flex;align-items:center;gap:4px}
.tts-voz .voz-lbl{font-size:11px;color:var(--meta);font-weight:700;margin-right:2px}
.tts-voz .voz{width:auto;height:auto;border-radius:6px;background:var(--surface);color:var(--body);border:1px solid var(--line-card);font-size:11px;font-weight:700;padding:5px 10px;cursor:pointer}
.tts-voz .voz.on{background:var(--link);color:#fff;border-color:var(--link)}
figure{margin:0 0 22px}
figure img{border-radius:12px;width:100%}
figcaption{font-size:12px;color:var(--meta);margin-top:8px}
/* corpo do texto */
.artigo p{font-size:16.5px;line-height:1.75;color:var(--body);margin-bottom:20px}
.artigo h2{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:30px 0 14px}
.destaques{background:var(--card);border:1px solid var(--line-card);border-left:4px solid var(--link);
  border-radius:10px;padding:16px 20px;margin-bottom:22px}
.destaques li{font-size:14.5px;margin:6px 0 6px 18px;line-height:1.5}
.destaques b{color:var(--ink)}
.pull{margin:28px 0;padding:22px 8px;text-align:center;border-top:2px solid var(--hot);border-bottom:2px solid var(--hot)}
.pull p{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.45;color:var(--ink);margin-bottom:10px}
.pull cite{font-size:12px;font-weight:700;color:var(--meta);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
blockquote{border-left:3px solid var(--link);padding:4px 0 4px 18px;margin:0 0 20px;font-size:15.5px;color:var(--body);font-style:italic}
blockquote b{display:block;font-style:normal;font-size:12px;color:var(--meta);margin-top:6px}
/* CTA whatsapp */
.cta-zap{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line-card);
  border-left:4px solid var(--zapverde);border-radius:12px;padding:16px 20px;margin:26px 0;box-shadow:var(--shadow)}
.cta-zap .ic{font-size:26px}
.cta-zap p{font-size:14px;margin:0;line-height:1.45}
.cta-zap b{color:var(--ink)}
.cta-zap a{background:var(--zapverde);color:#fff;font-weight:800;font-size:12.5px;border-radius:8px;
  padding:10px 16px;white-space:nowrap;margin-left:auto}
.cta-zap a:hover{text-decoration:none;filter:brightness(1.1)}
/* fim da matéria */
.tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:26px 0 8px}   /* 13/10: sem o wrap, 12 tags ficavam numa linha só e invadiam a lateral */
.tagrow .lbl{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--meta);text-transform:uppercase}
/* ⛔ NUNCA `.tag` sozinho: o WordPress põe class="tag" no <body> das páginas /tag/… — a regra pegava a página
   inteira (13/10: com o nowrap, a /tag/ ficou com 1.990 px de largura). Só as etiquetas do bloco Tema. */
.tagrow .tag{border:1px solid var(--line-card);background:var(--card);color:var(--link);font-size:12px;font-weight:700;border-radius:16px;padding:5px 14px;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}   /* cada tag inteira numa linha; a gigante corta com … em vez de vazar */
.likebox{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);
  border:1px solid var(--line-card);border-radius:12px;padding:16px 20px;margin:18px 0;flex-wrap:wrap}
.likebox p{font-size:14.5px;font-weight:700;color:var(--ink)}
.autorbox{display:flex;gap:14px;background:var(--card);border:1px solid var(--line-card);border-radius:12px;
  padding:18px 20px;margin:18px 0;align-items:center}
.autorbox .avatar{width:52px;height:52px;font-size:17px}
.autorbox b{color:var(--ink);font-size:15px}
.autorbox span{display:block;font-size:12.5px;color:var(--meta)}
.autorbox a{font-size:12.5px;font-weight:700}
/* newsletter / veja também */
.news-box{background:var(--brand);border-radius:12px;padding:20px;margin:22px 0}
.news-box h3{color:rgba(255,255,255,.7);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.news-box p{color:#fff;font-size:14.5px;font-weight:700;margin-bottom:12px;line-height:1.45}
.news-box .row{display:flex;gap:8px}
.news-box input{flex:1;border:0;border-radius:8px;padding:11px 12px;font-family:var(--font);font-size:13px;outline:0}
.news-box button{background:#2FA84F;color:#fff;border:0;border-radius:8px;padding:11px 16px;font-weight:800;font-size:12.5px;cursor:pointer;font-family:var(--font)}
.veja{margin-top:30px}
/* ⛔ O `>` NÃO É ENFEITE. Esta regra é do TÍTULO DO BLOCO ("Veja também") e o
   desenha em serifa itálica escura. Sem o `>`, ela casa com QUALQUER h3 dentro
   do bloco — e desde 26/08 o card da listagem, que usa h3 no título da matéria,
   mora aqui dentro. Os títulos saíam em serifa itálica escura em vez do azul sem
   serifa da página de categoria; mesma especificidade do `.lst-item h3`, e esta
   vencia só por vir depois no arquivo.
   🔑 O título do bloco é filho DIRETO; o dos cards está dois níveis abaixo. */
.veja > h3{font-family:var(--serif);font-style:italic;font-weight:700;font-size:23px;color:var(--ink);margin-bottom:14px}
/* ⛔ `.veja-grid` e `.vcard` SAÍRAM (26/08). Eram o desenho antigo do bloco — foto
   em cima, sem data, sem autor, sem resumo. O bloco passou a usar `.lst-itens` /
   `.lst-item`, os MESMOS da página de categoria, e reaproveitar a regra é o que
   garante que os dois não voltem a divergir: mudou o card da listagem, mudou aqui.
   Removidas e não comentadas de propósito — regra órfã no arquivo engana quem lê
   depois, como aconteceu com `.tvgrid`/`.tv-item`, que sobreviveram meses sem
   nenhum PHP usando. */
/* sidebar */
.widget{background:var(--card);border:1px solid var(--line-card);border-radius:12px;padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow)}
.widget h3{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--meta);text-transform:uppercase;margin-bottom:12px}
.ml .n{font-family:var(--serif);font-style:italic;font-weight:700;font-size:30px;color:var(--link);line-height:1;min-width:26px}
.denuncia .btn{display:inline-block;background:var(--link);color:#fff;font-weight:700;font-size:12.5px;border-radius:8px;padding:9px 14px}
/* footer / drawer */
.foot-svc a{display:flex;align-items:center;gap:9px;border-radius:10px;padding:11px 13px;color:#fff;font-size:12.5px;font-weight:700;line-height:1.2}
.s-nw{background:#2FA84F}.s-dn{background:#F5B301}.s-ho{background:#E8478B}
.ad-ph{background:repeating-linear-gradient(135deg,#dcdcdc 0 10px,#d5d5d5 10px 20px);border:1px dashed #a6a6a6;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#555;padding:12px;width:100%}
.widget .rel{display:block;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}
.widget .rel:first-of-type{padding-top:2px}
.widget .rel:last-of-type{border-bottom:0}
.widget .rel:hover{color:var(--link);text-decoration:none}
.overlay{position:fixed;inset:0;background:rgba(10,15,30,.55);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-head button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.drawer-sec h5{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--meta);text-transform:uppercase;margin-bottom:10px}
.drawer-list a{display:block;padding:7px 0;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}


/* ── ajustes 28/07: bolinha AO VIVO, linha do rodapé, texto muted ── */
.aovivo .bolinha{display:inline-block;width:7px;height:7px;border-radius:50%;background:#F12F28;vertical-align:middle;margin:-2px 8px 0 0;animation:blink 1.3s ease-in-out infinite}
.foot-fim{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.55)}
.muted{color:var(--meta)}


/* ── menu lateral: acento azul e CTAs ricos (28/07) ── */
.drawer .drill .seta{color:#1560A5}
.dr-cta{display:flex;align-items:center;gap:12px;margin:9px 20px;padding:12px 15px;border-radius:13px;background:#F12F28;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.12)}
.dr-cta:hover{text-decoration:none;filter:brightness(1.07)}
.dr-cta .ic{flex:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border-radius:10px}
.dr-cta .ic svg{width:20px;height:20px;color:#fff}
.dr-cta .tx{display:flex;flex-direction:column;line-height:1.18}
.dr-cta .tx b{font-family:'Playfair Display',serif;font-size:16px;font-weight:800;color:#17181A}
.dr-cta .tx small{font-size:11.5px;opacity:.92;font-weight:600;margin-top:1px}
.dr-cta.verde{background:#2FA84F;margin-top:18px}
.dr-cta:last-of-type{margin-bottom:24px}


/* ── rodapé: ícones nos tiles de serviço (28/07) ── */
.foot-svc a{display:flex;align-items:center;justify-content:center;gap:8px}
.foot-svc a svg{width:18px;height:18px;flex:none}

/* Anuncie no rodape = vermelho (regra: vermelho=comercial) */
.foot-anuncie{background:#F12F28}

/* ===================================================================
   CABEÇALHO v2 (pente-fino 28/07) — topo minimalista + AO VIVO herói
   Bloco AUTORITATIVO no fim do arquivo (vence os blocos de topo duplicados acima).
   =================================================================== */
.logo-lnk{display:inline-flex;align-items:center}

/* utilidades do topo = ícones sem moldura (busca, tema, entrar) */
.toputil{display:flex;align-items:center;gap:2px}
.hicon{background:none;border:0;color:#dfe4f1;width:40px;height:40px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hicon:hover{background:rgba(255,255,255,.12);color:#fff}
.hicon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hicon .ic-moon,.hicon .ic-sun{align-items:center;justify-content:center}
.hicon .ic-moon{display:inline-flex}
.hicon .ic-sun{display:none}
[data-theme="dark"] .hicon .ic-moon{display:none}
[data-theme="dark"] .hicon .ic-sun{display:inline-flex}

/* Entrar = ícone + rótulo pequeno (minimalista) */
.entrar{background:none;border:0;color:#dfe4f1;cursor:pointer;text-decoration:none;
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px;border-radius:9px}
.entrar:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.entrar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.entrar small{font-size:9.5px;font-weight:700;letter-spacing:.03em;line-height:1}

/* busca = campo que ABRE pelo ícone (antes sumia no celular) */
.searchbar{display:none;background:var(--brand);border-top:1px solid rgba(255,255,255,.08)}
.searchbar.open{display:block}
.searchbar-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 16px}
.searchbar-in svg{width:19px;height:19px;fill:none;stroke:#aab4d4;stroke-width:2;stroke-linecap:round;flex:none}
.searchbar-in input{flex:1;background:#fff;border:0;border-radius:8px;padding:11px 13px;
  font-family:var(--font);font-size:14px;color:#1A1A1A;outline:0;min-width:0}
.searchbar-in button{background:var(--link);color:#fff;border:0;border-radius:8px;
  padding:11px 18px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font);white-space:nowrap}

/* ---- FAIXA AO VIVO = herói (vermelho sólido) + Anuncie discreto ---- */
/* ---- A PÍLULA DO AO VIVO ----
   16/08: o cabeçalho tinha DUAS faixas — a `.topbar` (56px) e uma `.live` (44px)
   logo abaixo, que carregava a pílula, a frase "TV Todo Dia — assista agora" e o
   "Anuncie no Todo Dia". Por decisão do Vinicius virou UMA faixa só: a pílula
   passou para dentro do `.toputil`, à esquerda da busca, e a faixa `.live` deixou
   de existir. O cabeçalho perdeu 44px de altura.

   ⛔ Saíram junto: a frase da TV e o link do Anuncie. O Anuncie continua no rodapé
   e no menu lateral — o caminho comercial não sumiu do site, só saiu do topo.

   ⚠️ A pílula agora convive com botões de 40px de altura, não mais com uma faixa
   de 44px só dela. O `padding` vertical foi de 6px para 7px para ela encostar na
   mesma altura visual dos ícones ao lado. */
.livepill{display:inline-flex;align-items:center;gap:7px;background:var(--hot);color:#fff;
  font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:7px 11px;border-radius:7px;
  text-decoration:none;white-space:nowrap;flex:none;margin-right:6px}
.livepill:hover{text-decoration:none;color:#fff;filter:brightness(1.06)}
.livepill .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;
  margin:0;animation:blink 1.1s ease-in-out infinite}
/* O televisor entre a bolinha e o rótulo (16/08). 13px e não os 12px da faixa
   do celular: a pílula tem 32px de altura contra os 21px da faixa, e o ícone
   precisa acompanhar o texto de 11,5px que convive com ele. */
.livepill .tvico{width:13px;height:13px;flex:none;margin:0 -1px 0 1px}

/* ---- A FAIXA DO AO VIVO, SÓ NO CELULAR (16/08) ----
   Marcação em header.php, PRIMEIRO elemento do <body>. No desktop não existe.

   Antes desta faixa a pílula sobrevivia no celular sem rótulo (`font-size:0`),
   virando uma bolinha vermelha que não dizia o que era. Aquela regra foi
   RETIRADA junto — não ficou desligada, ficou fora: regra morta que casa por
   coincidência com o valor certo é a que engana na próxima alteração.

   A altura saiu de 28px para 21px (−25%) a pedido do Vinicius: a TV tem de
   ficar visível, mas 28px pesavam mais que a manchete.

   ⛔ 21px aparece DUAS VEZES aqui — no `height` da faixa e no `top` da .topbar.
      Os dois têm de bater, senão o cabeçalho cobre a faixa ao rolar. */
.tvbar{display:none}
@media(max-width:560px){
  .tvbar{display:flex;align-items:center;justify-content:center;gap:6px;
    background:var(--hot);color:#fff;height:21px;font-size:10px;font-weight:800;
    letter-spacing:.085em;text-decoration:none;
    position:sticky;top:0;z-index:61}   /* 61: um acima da .topbar, que é 60 */
  .tvbar:hover,.tvbar:focus{color:#fff;text-decoration:none}
  .tvbar .dot{width:6px;height:6px;border-radius:50%;background:#fff;
    animation:blink 1.1s ease-in-out infinite}
  .tvbar .tvico{width:12px;height:12px;flex:none;margin-right:-1px}

  .topbar{top:21px}                     /* ← tem de bater com o height acima */
  .livepill{display:none}               /* a pílula dá lugar à faixa */
}
@media(max-width:440px){
  .toputil{gap:0}
  .entrar{padding:4px 5px}
}

/* Barra de admin do WP (só aparece p/ quem está LOGADO: 32px no desktop, 46px no
   mobile, fixa no topo). Ela cobria o topo do cabeçalho sticky e do menu lateral
   (logo/topo cortados ao rolar). Empurra os dois p/ baixo dela. Visitante não tem
   a classe .admin-bar, então nada muda no site público. */
.admin-bar .topbar{top:32px}
.admin-bar .drawer{top:32px}
@media screen and (max-width:782px){
  .admin-bar .topbar{top:46px}
  .admin-bar .drawer{top:46px}
}
/* ⛔ ESTE BLOCO TEM DE VIR DEPOIS DO DE 782px, NÃO ANTES. Os dois casam em
   `.admin-bar .topbar` — mesma especificidade — então quem vence é o último
   escrito. Junto com a faixa da TV o cabeçalho desce mais 21px: 46 + 21 = 67.
   Só vale para quem está logado no WP; visitante não tem a classe .admin-bar. */
@media screen and (max-width:560px){
  .admin-bar .tvbar{top:46px}
  .admin-bar .topbar{top:67px}
}

/* ---- O BLOCO DA TV AO VIVO NA HOME (16/08) ----
   Marcação em sidebar.php, dentro do is_front_page(). Desktop: abre a lateral,
   antes da primeira publicidade. Celular: sobe para depois das três notícias de
   destaque (o script no fim do sidebar.php faz a mudança de pai).

   Veste a mesma pele do `.tvblock` lá de cima (linha 202) — fundo #0C1024,
   borda #1B2342 — para o bloco novo não parecer corpo estranho na mesma página.
   A régua vermelha tem 10px porque essa é a ESPESSURA ÚNICA DE ACENTO travada
   em 07/08: vale deitada ou em pé, no site inteiro.

   ⚠️ O seletor é `.widget.tv-bloco` (0,2,0) e não `.tv-bloco` (0,1,0) DE
   PROPÓSITO. O `.widget` está declarado DUAS vezes no arquivo (linhas 219 e
   1064) e a segunda vem depois daqui: com especificidade igual, quem vence é a
   última escrita, e o padding de 18px voltaria calado. */
.widget.tv-bloco{background:#0C1024;border:1px solid #1B2342;border-top:10px solid var(--hot);
  border-radius:14px;overflow:hidden;
  padding:0;                          /* ⛔ 40px de moldura comiam a largura do vídeo */
  box-shadow:none}                    /* a régua vermelha já destaca o bloco */

/* cabeçalho enxuto: só o selo e o nome. A linha inteira é o link para a TV */
.tv-bloco .tvb-topo{display:flex;align-items:center;gap:9px;padding:12px 14px;text-decoration:none}
.tv-bloco .tvb-topo:hover{text-decoration:none}
.tv-bloco .tvb-topo:hover .tvb-nome{color:#fff}
.tv-bloco .tvb-pill{display:inline-flex;align-items:center;gap:5px;background:var(--hot);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:4px 8px;border-radius:5px;flex:none}
.tv-bloco .tvb-pill .dot{width:5px;height:5px;border-radius:50%;background:#fff;
  animation:blink 1.1s ease-in-out infinite}
.tv-bloco .tvb-nome{font-weight:800;font-size:14px;color:#E8EAF2;letter-spacing:-.01em}

/* O palco do player: 16:9, sangrando de borda a borda. A proporção fixa é o que
   segura o layout — quando o HTML da TV entrar no lugar do rótulo, a altura da
   página não muda e a publicidade de baixo não pula. */
.tv-bloco .tvb-palco{position:relative;aspect-ratio:16/9;background:#05060D;border-top:1px solid #1B2342;
  display:flex;align-items:center;justify-content:center}
.tv-bloco .tvb-palco>iframe,.tv-bloco .tvb-palco>video,
.tv-bloco .tvb-palco>embed,.tv-bloco .tvb-palco>object,.tv-bloco .tvb-palco>.video-js{
  position:absolute;inset:0;width:100%;height:100%;border:0}
.tv-bloco .tvb-k{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#39406A}

/* no celular ele vive dentro do rio, entre as notícias: precisa do respiro que
   os cards vizinhos têm (na lateral quem dá o respiro é o margin do .widget) */
@media(max-width:979.98px){
  .widget.tv-bloco{margin:22px 0}
}

/* ======================================================================
   BLOCOS DA HOME v3 — desenhos escolhidos no catálogo (06/08)
   Portados do <style> de site-tododia/catalogo/index.html, que é a fonte
   do desenho. O desenho 02 (Lista com foto) não aparece aqui de propósito:
   ele reusa o .card > .sat que o Giro Policial já usa.
   ====================================================================== */

/* Os dois cards novos são <a>. Sem estas duas linhas a regra global
   a:hover{text-decoration:underline} (linha 68) sublinharia o card inteiro no
   hover — título, resumo e linha de meta. Sombra e elevação são as mesmas de
   .card e .ad-card, senão os blocos novos ficam chapados ao lado dos antigos. */
.nb-sum,.nb-wide{box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.nb-sum:hover,.nb-wide:hover{text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}

/* ---- 16 · Card com resumo — bloco Cidades ---- */
.nb-sums{display:grid;gap:14px}
.nb-sum{display:grid;grid-template-columns:1fr;background:var(--card);
  border:1px solid var(--line-card);border-radius:12px;overflow:hidden}
@media(min-width:600px){.nb-sum{grid-template-columns:220px 1fr}}
.nb-sum img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* O 4:3 existe para preencher a coluna de 220px do desktop. Empilhada no
   celular, a mesma foto ficaria com 292px de altura — quatro delas viram
   rolagem à toa. Lá ela volta a ser 16:9. O .98 evita a fresta entre 599 e
   600 (acontece com zoom de navegador e escala de tela). */
@media(max-width:599.98px){.nb-sum img{aspect-ratio:16/9}}
.nb-sum .b{padding:18px 20px}
.nb-sum .k{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}

/* ---- 12 · Chamada com tarja — bloco Esporte e Cultura ----
   A tarja é a única cor do bloco: leva a cor da editoria (paleta do
   DESIGN-SYSTEM §2.1), impressa pelo PHP. Vermelho segue reservado a
   urgência e comercial. */
.nb-wides{display:grid;gap:14px}
.nb-wide{display:grid;grid-template-columns:1fr;background:var(--card);
  border:1px solid var(--line-card);border-radius:12px;overflow:hidden}
/* ⚠️ DUAS COLUNAS SÓ A PARTIR DE 1000px — e a foto tem 325px. Medido em
   14/08 no Chrome, na home ao vivo, contra o corte real da imagem:

     janela   antes            depois
      640px   corta 42%    ->  corta 0%   (empilha, como no celular)
      768px   corta 30%    ->  corta 0%
     1000px+  corta 11%    ->  corta 0%

   A causa NÃO era a proporção declarada: era o layout de duas colunas
   entrar em 640px, onde não cabe. A coluna de texto ficava estreita, o
   título quebrava em 4 linhas, o texto empurrava a linha para ~300px de
   altura e a foto de 290px de largura virava quase um quadrado.

   ⚠️ Alargar a coluna sem mexer no ponto de virada PIORA embaixo (42% -> 52%):
   foto mais larga = texto mais espremido = título mais alto = mais corte.

   🔑 325px não é gosto: é o que faz a foto 16/9 medir exatamente os 183px
   de altura do bloco de texto (325 x 9/16 = 183). Foto e texto terminam na
   mesma linha — sem corte e sem sobra.

   ⛔ O `aspect-ratio` abaixo é só o PISO. Quem manda de verdade é o
   `height:100%`: quando o texto é mais alto que a foto, ele estica a foto e
   o aspect-ratio é ignorado. Por isso trocar 16/10 por 16/9 sozinho não
   mudava NADA — o valor antigo já estava morto e só parecia estar mandando.
   Coincidência de valor esconde regra morta. */
@media(min-width:1000px){.nb-wide{grid-template-columns:325px 1fr}}
.nb-wide .fig{aspect-ratio:16/9;object-fit:cover;width:100%;height:100%}
.nb-wide .b{padding:20px 22px}
/* O padrão é AZUL, não vermelho: o PHP sempre manda a cor da editoria por
   inline, mas se alguém reusar a tarja sem inline o vermelho entraria por
   omissão e quebraria a regra (vermelho = urgência e comercial). */
.nb-tarja{display:inline-block;background:var(--link);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:10px}
/* dentro da linha de data e autor (Esportes e Cultura, 08/10/2026) a margem fica com a linha */
.meta-row .nb-tarja{margin-bottom:0}
.nb-wide .meta-row{margin-bottom:10px}

/* ---- 08 · Manchete dupla — bloco Viralizou nas redes ----
   auto-fit em vez de duas colunas fixas: com uma matéria só (categoria nova,
   dia magro) o card ocupa a linha inteira em vez de deixar meia linha vazia. */
.nb-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* Matéria sem foto destacada não pode deixar a coluna da imagem vazia e
   espremer o texto — nesse caso o card vira uma coluna só. */
.nb-sum.sem-foto,.nb-wide.sem-foto{grid-template-columns:1fr}
.sat.sem-foto{grid-template-columns:1fr}

/* ======================================================================
   ACENTO DE EDITORIA NA HOME (06/08)
   Veio do bloco 19 do catálogo ("temático"), mas SÓ o acento: o Vinicius
   quis a régua colorida do topo e descartou o fundo tingido. A cor é
   navegação — cada bloco carrega a cor da sua editoria (DESIGN-SYSTEM §2.1).
   Blocos sem régua, por decisão: Serviços (os 6 tiles já são um arco-íris),
   Esporte e Cultura (junta duas editorias — ver .spine abaixo) e Destaques.
   A capa chegou a ter régua navy e foi retirada: ela era a única que caía
   direto no topo da foto, e não sobre um cabeçalho no fundo creme — contra
   uma manchete de foto escura o contraste era quase nulo (#0D1E52 sobre
   #110D0A) e a linha lia como borda da imagem, não como acento.
   ====================================================================== */
/* O acento é a borda DE CIMA DE UMA CAIXA — nunca uma linha solta. Uma linha
   sem caixa lê como separador entre seções, não como acento do bloco (foi o
   que subiu por engano em 06/08 e o Vinicius reprovou).

   Onde a caixa vem, depende do bloco:

   (a) .acc-card — o conteúdo do bloco JÁ é um card branco (Polícia,
       Especiais). O acento vai na borda de cima DESSE card. Sem moldura nova:
       seria caixa dentro de caixa. */
.acc-card > .card{border-top:10px solid var(--acc)}

/* (b) .acc-box — o bloco tem cards soltos (Cidades, Opinião, Horóscopo,
       Viralizou).

   07/08: A MOLDURA SAIU DESSES QUATRO BLOCOS, a pedido do Vinicius ("retirar a
   borda que envolve o bloco como um todo"). Com ela vai junto a régua colorida
   do topo, que era a borda de cima DESSA caixa. O que marca cada bloco agora:
     Cidades   → as espinhas azuis ao lado das fotos
     Viralizou → uma régua por card, na cor da categoria daquele card
     Opinião   → nada, de propósito: é o bloco mais sóbrio da home
     Horóscopo → o rosa dos próprios cards de signo

   A borda some por COR, não por `border:0`. Zerar a borda tira junto o recuo
   que ela sustentava: os cards saltavam para fora do alinhamento dos blocos
   vizinhos (x=80 contra x=101 no desktop) e no celular encostavam na borda da
   tela (x=0 contra x=21). Com `transparent` a geometria fica intacta.
   O padding e o raio ficam porque são eles que seguram esse alinhamento. */
.acc-box{border:1px solid transparent;border-top-width:3px;
  border-radius:12px;padding:4px 20px 20px;background:transparent}
.acc-box > .secao{margin-top:16px;margin-bottom:14px}

/* (c) o painel da TV já é uma caixa com corpo próprio: mantém o navy dele e
       só troca a borda de cima. É o único .acc-box que conserva a moldura,
       porque nele ela não é moldura — é o corpo do bloco. */
.tvblock.acc-box{background:#0C1024;border:1px solid #1B2342;
  border-top:10px solid var(--acc);border-radius:14px;padding:22px}
.tvblock.acc-box > .secao{margin-top:0}

/* Espinha à esquerda, encostada na foto (ideia do Vinicius; o catálogo tem o
   conceito no bloco 35). Em Esporte e Cultura cada card leva a cor da SUA
   editoria — o bloco junta duas e uma régua única mentiria sobre metade das
   matérias. Em Cidades a cor vem do bloco, porque as dez cidades não têm cor
   própria na paleta. */
.nb-sum.spine,.nb-wide.spine{border-left:10px solid var(--acc)}

/* (d) .acc-itens — o acento vai em CADA card, na cor da categoria dele, e não
       no bloco (Viralizou nas redes, 07/08).

   Por quê: o bloco agrupa por COMPORTAMENTO (o que viralizou), não por
   editoria, então as matérias vêm de qualquer lugar. Uma régua única sobre o
   bloco dizia "isto é uma editoria" e mentia sobre o conteúdo. É o mesmo
   raciocínio do Esporte e Cultura, onde a cor foi para o card porque o bloco
   junta duas editorias — lá em pé (espinha), aqui deitada (régua).

   Cada card recebe o --acc do PHP, via tododia_cor_editoria().

   COLADA na foto, sem respiro. Cheguei a pôr 4px de folga com medo de a régua
   virar borda da imagem, como aconteceu com a régua da capa em 06/08, e foi
   reprovado. Aos 10px o problema não existe: nessa espessura a faixa lê como
   tarja de categoria, não como contorno da foto. */
.acc-itens > .card{border-top:10px solid var(--acc,transparent)}

/* 10px é a MEDIDA ÚNICA do acento de editoria (decisão do Vinicius, 07/08).
   Deitado (régua no topo) ou em pé (espinha na lateral), é o mesmo componente
   virado de lado — duas espessuras para a mesma ideia seriam arbitrárias. */

/* Branded Content — as medidas saíram do `style=` inline e viraram classe.
   Inline vence folha externa, então enquanto elas estavam no PHP a versão de
   celular só se impunha com !important. Duas peças, dois produtos:
     .bc-corpo         Posição 2 — coluna do rio, 728px, arte 150x110
     .bc-corpo.largo   Posição 6 — faixa cheia, 1088px, arte 300x170
   Ver docs/DESIGN-SYSTEM.md §9. */
.bc-corpo{display:grid;grid-template-columns:1fr 150px;gap:16px;
  align-items:start;padding-top:10px}
.bc-corpo.largo{grid-template-columns:1fr 300px;gap:28px}
.bc-corpo.sem-arte,.bc-corpo.largo.sem-arte{grid-template-columns:1fr}  /* card sem arte (09/10/2026): o texto ocupa a largura */
img.bc-arte{width:100%;object-fit:cover}  /* 09/10/2026: a arte é a FOTO da matéria paga, de qualquer proporção — corta, não deforma */
.bc-arte{max-width:150px;height:110px;margin:0 auto;border-radius:8px}
.bc-corpo.largo .bc-arte{max-width:300px;height:170px}

/* ==========================================================================
   HOME NO CELULAR  (07/08/2026)   —  detalhe canônico em docs/DESIGN-SYSTEM §2.3

   ⛔ A REGRA QUE ORGANIZA TUDO AQUI: portal não é feed.
   A primeira tentativa empilhou TODAS as matérias com foto cheia. O diretor de
   redação reagiu — *"isso aí não é rede social, é jornalismo"* — e tinha razão.
   Dá para medir, num iPhone 390x844:

     thumb lateral          3,0 manchetes por tela
     foto cheia em todas    2,1   ← um terço da oferta editorial a menos
     foto 3:1 (bem fina)    2,6
     híbrida (o que ficou)  2,7

   A diferença entre portal e feed é DENSIDADE DE MANCHETES: no jornal o leitor
   escaneia seis, sete títulos e escolhe; no feed consome uma peça por vez.
   Afinar a foto não resolvia — recupera pouco e MUTILA a fotografia (numa lista
   policial são rostos, fachadas, apreensões; 3:1 corta o contexto, e a foto
   jornalística informa, não decora).

   🔑 O dado que decidiu: thumb de 88px e de 118px dão a MESMA altura por item,
   porque quem manda na altura é o TEXTO. O título espremido nunca foi culpa de
   a foto ser lateral; era a foto ser LARGA demais.

   ═══ DUAS FAMÍLIAS DE BLOCO, e a diferença é editorial ═══

   LISTA (Giro Policial, Especiais, Giro da Região) — 4 matérias, serve para
   escanear. Hierarquia: a primeira é a chamada da editoria, com foto cheia; as
   outras ficam compactas, com thumb à direita. É o que g1, Folha e Estadão
   fazem no celular. No Giro da Região o resumo sai dos itens e fica só na
   chamada — sozinho ele custava 608px, 29% do bloco. Não é corte de
   informação, é divisão de papéis: a chamada explica, as outras listam.

   CHAMADA (Esporte e Cultura, Viralizou) — 2 matérias de MESMO PESO, com tarja
   colorida e espinha por card. Aqui não há hierarquia e não há thumb: as duas
   levam foto cheia e resumo. Hierarquia em bloco de dois renderia quase nada e
   AFIRMARIA ALGO FALSO — Esporte e Cultura junta duas editorias de propósito, e
   pôr esporte grande e cultura pequena diz que uma vale mais; Viralizou é
   manchete dupla por conceito. É a mesma razão que deu a esses dois blocos
   espinha por card em vez de uma régua só.
   ⚠️ Eu já escondi o resumo deles por engano, estendendo a blocos SEM chamada
   uma decisão que valia só para "itens de lista". Não repetir.

   ═══ ALINHAMENTO: TUDO COMEÇA EM 37px ═══

   Texto e foto, em todos os blocos. O celular tinha QUATRO margens de texto
   (37, 42, 48, 51) e duas de foto (17 e 37) — problema anterior a esta rodada,
   acumulado conforme cada bloco nasceu; no desktop não aparece porque sobra
   largura. 37px é o valor do Giro Policial e do Especiais: o aprovado.

   Onde a foto fica DENTRO da caixa de texto (.sat) ela herda o padding e já
   estava certa. Onde é IRMÃ do texto (.nb-sum, .nb-wide, .acc-itens) a margem
   tem de vir do container, e aí o .b perde a lateral — senão o texto recua
   duas vezes. Os valores mudam por bloco porque cada um tem um estorvo
   diferente à esquerda: espinha de 10px no Cidades e no Esporte e Cultura, só
   a borda de 1px no Viralizou.

   ⛔ Não resolver aperto de título raspando padding. Cheguei a baixar o padding
   para 12px em três blocos: criou uma QUINTA margem e foi reprovado. 20px é
   medida aprovada; título espremido resolve-se alinhando.
   ========================================================================== */
@media (max-width: 599.98px) {

  /* ── LISTA ──────────────────────────────────────────────────────────────
     .sat (Policial, Especiais): foto DENTRO da caixa de texto, já em 37px */
  .sat{grid-template-columns:1fr 96px;gap:12px}
  .sat img{width:96px;height:64px}          /* proporção 3:2, a do desktop */
  .sat:first-child{grid-template-columns:1fr;gap:10px}
  .sat:first-child img{width:100%;height:auto;aspect-ratio:16/9;border-radius:8px}

  /* .nb-sum (Giro da Região): foto IRMÃ do texto, e o HTML é `img → texto`.
     Sem `order` a thumb cairia à ESQUERDA e a home teria dois padrões de lista. */
  .nb-sum{display:grid;grid-template-columns:1fr 84px;gap:10px;align-items:start}
  .nb-sum > img{order:2;width:84px;height:56px;aspect-ratio:auto;object-fit:cover;
    border-radius:8px;align-self:start}
  .nb-sum > .b,.nb-sum > div:not(.b){order:1}

  /* itens: a margem direita vem do container, porque a foto é irmã do .b
     (card 16→374 · espinha 10 e borda 1 → conteúdo 26→373 · +20 = 353 = 37 ✓) */
  .nb-sums > .nb-sum:not(:first-child){padding:18px 20px 18px 0}
  .nb-sums > .nb-sum:not(:first-child) .b{padding:0 0 0 11px}

  /* chamada: foto cheia 16:9, com a mesma margem do texto */
  .nb-sums > .nb-sum:first-child{grid-template-columns:1fr;gap:0;
    padding:0 20px 0 11px}
  .nb-sums > .nb-sum:first-child > img{order:0;width:100%;height:auto;
    aspect-ratio:16/9;border-radius:8px}
  .nb-sums > .nb-sum:first-child > .b{padding:18px 0}

  /* resumo só na chamada — vale para o Giro da Região e mais nenhum bloco */
  .nb-sums > .nb-sum:not(:first-child) .linhafina{display:none}

  /* ── CHAMADA ────────────────────────────────────────────────────────────
     duas matérias de mesmo peso: foto cheia abaixo do título, resumo mantido */
  .nb-wide,.acc-itens > .card{grid-template-columns:1fr;gap:0}
  .nb-wide > .fig,.acc-itens > .card > img{order:2;width:100%;height:auto;
    border-radius:8px}
  .nb-wide > .b,.acc-itens > .card > .body{order:1}

  /* 16:9 em TODA foto da home, porque é o que o WordPress entrega. O Esporte e
     Cultura pedia 16:10 desde que o bloco nasceu, e era o único fora do padrão:
     a foto precisava cobrir uma caixa mais ALTA, então o navegador ampliava até
     a altura bater e cortava 10% das laterais. Ampliar e cortar as bordas é,
     literalmente, um zoom — e o Vinicius pegou de olho.

     ⚠️ Mirar a CLASSE .fig, não `> img`. A regra do tema é `.nb-wide .fig`
     (duas classes) e vence `.nb-wide > img` (uma classe + elemento), mesmo
     vindo antes. Foi assim que a primeira correção não teve efeito nenhum — e
     também por que o `.nb-wide > img{aspect-ratio:16/10}` que estava aqui
     nunca valeu: quem mandava era o .fig, com o mesmo valor. Coincidência de
     valor esconde regra morta.

     ⚠️ SÓ NO CELULAR, por decisão do Vinicius (07/08): no desktop o bloco segue
     com os mesmos 10% de corte, para ele conferir no computador. */
  .nb-wide > .fig{aspect-ratio:16/9}
  .acc-itens > .card > img{aspect-ratio:16/9}

  .nb-wides > .nb-wide{padding:0 20px 0 11px}   /* espinha 10 + 11 = 37 */
  .nb-wides > .nb-wide > .b{padding:18px 0}
  .acc-itens > .card{padding:0 20px}            /* sem espinha: só a borda */
  .acc-itens > .card > .body{padding:18px 0}

  /* ── A CAIXA DE TODO BLOCO COMEÇA EM 16px ───────────────────────────────
     o .acc-box recuava 20px e os .acc-card 16px; igualados, o cabeçalho de
     cada bloco alinha junto com os cards */
  .acc-box:not(.tvblock){border-left-width:0;border-right-width:0;
    padding-left:16px;padding-right:16px}

  /* ── BRANDED CONTENT (os dois) ──────────────────────────────────────────
     A coluna da arte é fixa (150px na Posição 2, 300px na 6): em 390px
     sobravam 150px de título no card estreito e apenas 97px no largo, que
     esticava para 774px de altura. Empilhado, a arte ganha a largura toda. */
  .bc-corpo,.bc-corpo.largo{grid-template-columns:1fr;gap:14px}
  .bc-arte,.bc-corpo.largo .bc-arte{
    max-width:100%;width:100%;height:auto;aspect-ratio:16/9}
}

/* ==========================================================================
   SUÍTE — os desdobramentos da cobertura  (07/08/2026)
   Detalhe canônico em docs/DESIGN-SYSTEM.md §2.4 e docs/18-DECISOES.md.

   "Suíte" é o termo de redação para as matérias que orbitam o MESMO FATO. É
   diferente dos relacionados que o tema já tem ("Veja também", "As mais lidas
   de X"), que são automáticos e por CATEGORIA: a suíte é CURADA pelo editor no
   editar post, e é o que mostra que o jornal cobriu de verdade em vez de
   publicar uma nota solta. Referência: a Folha usa isto na manchete.

   Decisões do Vinicius (07/08): manual, até 3 matérias, em QUALQUER bloco menos
   o de TV (card de vídeo tem 255px no desktop e 162px no celular — cada link
   quebraria em 2-3 linhas e a suíte ficaria maior que a própria matéria).
   ========================================================================== */

/* ⛔ CARD CLICÁVEL SEM LINK DENTRO DE LINK.
   Quatro cards da home eram um <a> inteiro (manchete, Cidades, Esporte e
   Cultura, Viralizou; depois o de Opinião). A suíte tem links dentro, e link
   dentro de link é HTML inválido: o navegador fecha o <a> externo antes da
   suíte e o card quebra. No mockup via JS isso NÃO aparece, porque o script
   insere no DOM já montado — só apareceria ao imprimir pelo PHP.

   A saída é o padrão "stretched link": o card vira <div>, o título vira o link
   e um ::after invisível estica a área de clique por cima do card inteiro. O
   leitor continua tocando em qualquer lugar; a suíte fica por cima, com z-index
   maior, e seus links funcionam. */
.card,.nb-sum,.nb-wide{position:relative}
.td-stretch{color:inherit;text-decoration:none}
.td-stretch::after{content:"";position:absolute;inset:0;z-index:1}
.td-stretch:hover{text-decoration:none}

.suite{
  list-style:none;
  /* fecha o card: ocupa a linha inteira quando o pai é grid, e o order alto
     garante o último lugar mesmo onde já usamos order para pôr a foto embaixo */
  grid-column:1 / -1;order:99;
  position:relative;z-index:2;      /* por cima da área de clique do card */
  margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line-card);
  display:grid;gap:9px;
}
.suite li{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:start}

/* A SETA É VERMELHA (decisão do Vinicius, 07/08).
   ⚠️ O vermelho é reservado a urgência e comercial (DESIGN-SYSTEM §2, "a regra
   de ouro"). Aqui ele marca cobertura em andamento — é um TERCEIRO uso,
   autorizado por ele e registrado em 18-DECISOES. A variável --hot já troca
   sozinha no escuro (#F12F28 → #FF5B52).

   SETA COMPLETA, não só o bico (decisão do Vinicius, 10/08, com a Folha de
   referência). Era `\25B8` (▸, triângulo isolado); virou `\21B3` (↳, haste que
   desce e aponta) — a seta diz "isto deriva do que está acima", que é o que a
   suíte é. O triângulo sozinho não dizia nada disso.

   TAMANHO 19px, ~50% maior (pedido dele, 10/08). O ↳ desenha pouca tinta dentro
   do quadro do caractere, então a 13px ele lia como um risquinho. A 19px a
   tinta fica do tamanho do ▸ que havia antes.

   E o `line-height` desceu de 1.5 para 22px, que NÃO é enfeite: o ▸ era
   centrado no meio da linha e assentava bem a 1.5; o ↳ tem a tinta embaixo do
   quadro, e a mesma regra o jogava abaixo da primeira linha do título.
   22px é a altura de linha do próprio texto da suíte (15px × 1.45), então o
   glifo passa a ocupar a mesma faixa da primeira linha — que é onde uma marca
   de lista tem de estar. Em px e não em unidade relativa de propósito: assim a
   faixa não se mexe se um dia o tamanho do glifo mudar de novo.

   ⚠️ A coluna continua em 14px, a medida aprovada em 07/08. A 19px o glifo
   ocupa ~16px e transborda 2px para dentro do respiro de 8px — sobram 6px até
   o texto. Ou seja: a seta cresce e a indentação do texto NÃO se mexe. */
.suite li::before{content:"\21B3";color:var(--hot);font-size:19px;line-height:22px}

/* O texto NÃO é azul: é a cor de texto forte (--ink), para se distinguir do
   título da matéria (azul) e da descrição (--body, mais apagada). Dá preto
   #1A1A1A no claro e #F2F3F5 no escuro — a suíte é sempre o texto mais forte
   do card, nos dois temas. */
.suite a{color:var(--ink);font-weight:600;font-size:15px;line-height:1.45;
  text-decoration:none}
.suite a:hover{text-decoration:underline}

/* ── Alinhamento: a SETA alinha com o título, e o texto indenta a partir dela.
   Ao virar irmã do texto (para fechar o card), a suíte deixou de herdar o
   padding do .b/.body — cada bloco precisa do seu recuo, espelhando o que o
   texto já usa. Conferido bloco a bloco, no desktop e no celular. */
.rio > .card > .suite,
.op-card > .suite{padding-left:20px;padding-right:20px;margin-bottom:18px}
/* ⛔ ESTE RECUO DE 11px MORREU EM 25/08. Ele existia para alinhar a suíte com o
   texto da COLUNA 2 nos cards a partir do segundo. Com a suíte atravessando o
   card, ele passou a desalinhar: ela começaria 11px à frente das outras. No
   celular o card é uma coluna só e o recuo nunca fez diferença. */

@media(min-width:600px){
  /* ⛔ A SUÍTE ATRAVESSA O CARD INTEIRO (25/08). Até aqui ela ficava presa na
     COLUNA DO TEXTO (`grid-column:2`), sob o título. Como a foto da esquerda
     costuma ser mais baixa que texto+suíte, sobrava um retângulo BRANCO
     embaixo da foto, do lado da suíte — foi o que o Vinicius apontou.
     Com `1 / -1` a foto, o título e a meta ficam exatamente onde estavam; só
     a suíte desce ocupando a largura toda.
     ⚠️ Ao atravessar, ela deixa de começar alinhada com o TEXTO e passa a
     respeitar o recuo do CARD (20px). Fica 20px à frente da foto — decidido
     assim para manter o mesmo recuo que a suíte tem em todos os outros
     blocos; encostar na foto quebraria essa coerência. */
  .nb-sum > .suite{grid-column:1 / -1}
  .nb-sums > .nb-sum > .suite,
  .acc-itens > .card > .suite{padding-left:20px;padding-right:20px;margin-bottom:20px}
  .nb-wides > .nb-wide > .suite{padding-left:22px;padding-right:22px;margin-bottom:20px}
}

/* ⚠️ A suíte do Esporte e Cultura vira coluna 2 só em 1000px, não em 600px:
   é onde o .nb-wide passa a ter duas colunas (ver bloco 12). Se ficar em
   600px, entre 600 e 999 ela é jogada numa coluna que não existe — o
   navegador cria uma coluna implícita e a foto ao lado dela some com
   largura ZERO. Foi o que aconteceu no teste de 14/08, e não dá erro
   nenhum: o card simplesmente aparece sem foto. */
@media(min-width:1000px){
  /* Mesma travessia do .nb-sum, mas o ponto de virada é 1000px: é onde o
     `.nb-wide` passa a ter duas colunas. Ver o aviso logo acima sobre por que
     este bloco NÃO pode usar 600px. */
  .nb-wide > .suite{grid-column:1 / -1}
}

@media(max-width:599.98px){
  .suite{margin-top:12px;padding-top:12px;gap:8px}
  .suite a{font-size:14px}
  /* o texto cai para 14px aqui, então a faixa da linha vira 20px (14 × 1.45).
     A seta acompanha: a regra é "o glifo ocupa a mesma faixa da primeira linha
     do título", e ela vale nos dois tamanhos — sem isto a seta assentaria 1px
     mais baixo no celular que no desktop. */
  .suite li::before{line-height:20px}
}

/* A suíte na PÁGINA DA MATÉRIA (07/08). Mesmo componente da home, sem rótulo.
   O .art-head não é grid nem card, então aqui ela não precisa de grid-column,
   order nem padding de bloco — só do respiro e dos fios que a separam do olho
   e da assinatura. */
.art-head > .suite{grid-column:auto;order:0;margin:16px 0 18px;padding:14px 0;
  border-top:1px solid var(--line-card);border-bottom:1px solid var(--line-card)}

/* ======================================================================
   VÍDEO DA MATÉRIA (10/08)

   O player abre a matéria no lugar que era da foto; a foto desce e vem
   logo abaixo. Regra NOVA, não reaproveitamento: nenhuma linha do tema
   cobria <iframe>. O reset global é `img{max-width:100%;height:auto}`
   (linha 21) e um iframe tem tamanho intrínseco de 300x150 que não
   encolhe sozinho — sem isto o embed estoura a coluna no celular.

   `figure` é seletor de ELEMENTO (linha 1009), então o respiro de 22px já
   vem de graça. O raio e a largura NÃO vêm: `figure img` só pega img.
   ====================================================================== */
.td-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.td-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Ícone de câmera ao lado do título, na home e nas listagens.

   Medido em `em`: acompanha a manchete e o card pequeno com uma regra só,
   em vez de uma por tipo de card. `currentColor` porque o vermelho da
   marca está reservado a AO VIVO e Anuncie — o ícone informa, não chama,
   e assim acompanha o modo escuro sem regra a mais.

   Vai DENTRO do <a> do título de propósito. É um <svg>, não um <a>, então
   não recria o link-dentro-de-link de 07/08; e por estar dentro do link
   ele fica acima do ::after do .td-stretch, que cobre o card com
   z-index 1 — fora do <a> o ícone apareceria, mas ficaria sob a camada
   de clique, sem hover e sem tooltip. */
.ic-video{width:1em;height:1em;vertical-align:-.13em;margin-right:.34em}

/* A capa do YouTube quando ela entra no lugar da imagem destacada do card.
   `object-fit:cover` não é enfeite: quando o vídeo não tem versão HD, a capa
   que sobra é uma tela 4/3 com tarja preta em cima e embaixo, e o recorte come
   exatamente a tarja. Regra aditiva — só alcança a imagem que nós injetamos,
   nunca as fotos que a redação subiu. */
.td-capa-video{object-fit:cover}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE TV (16/08) — redesenhada a partir do brief do cliente

   ⛔ ESTA PÁGINA É ESCURA SEMPRE. Decisão do Vinicius: "não vai ter modo claro
      nessa página, ela vai ser mais escura, pra ser diferente". A trava é o
      `data-theme-lock` no <html> (posto pelo template-tv.php no wp_head, antes
      de pintar) — o `tododia.js` respeita a trava e o botão de tema some, que
      é o certo: botão que não faz nada é defeito, não enfeite.

   A paleta é a ESCURA DO TEMA, aprofundada. O `--card` é `#0C1024`, o mesmo
   navy do bloco de TV da home: quem clica no bloco e cai aqui reconhece o
   lugar. Só isto muda; todo o resto do site continua com a paleta normal,
   porque os tokens são redefinidos no `body` e não no `:root`.
   ══════════════════════════════════════════════════════════════════════════ */
body.pagina-tv{
  --bg:#05070E;          /* mais fundo que o escuro normal (#0C0F16) */
  --surface:#0A0E1A;
  --card:#0C1024;        /* = o bloco de TV da home */
  --ink:#F2F3F5; --body:#C5CBD6; --meta:#7E869A;
  --line:#1B2342; --line-card:#1B2342;
  --link:#66A9E8; --hot:#FF3B30;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-hover:0 10px 30px rgba(0,0,0,.6);
}
/* o botão de tema não tem o que fazer numa página de uma cor só */
[data-theme-lock] #btnTheme{display:none}

/* ---- 1 · TOPO: a marca da emissora ----
   Faixa própria, mais escura que a página, com a régua vermelha de 10px em
   baixo — a mesma espessura única de acento do site inteiro. */
.tvp-topo{background:#0A0E1A;border-bottom:10px solid var(--hot)}
.tvp-topo-in{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
/* O logo real da emissora tem 768x111 (proporção 6,9:1). Fixo a ALTURA e deixo
   a largura seguir: assim ele nunca distorce, e no celular o `max-width` é que
   segura. ⚠️ É a arte AZUL — sobre este fundo ela lê apagada. Pedir a branca. */
.tvp-logo{height:46px;width:auto;max-width:100%;flex:none}
.tvp-canais{display:flex;gap:10px;flex-wrap:wrap}
.tvp-canais span{display:flex;align-items:baseline;gap:6px;background:#0C1024;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:12.5px;color:var(--meta)}
.tvp-canais b{color:var(--ink);font-size:14px;font-weight:800}

/* ---- 2 · O PALCO ----
   ⛔ COLUNA ÚNICA desde 16/08: o banner lateral saiu por decisão do Vinicius e
      o player passou a tomar a largura inteira do wrap. Em 1120px isso dá
      630px de altura em 16:9 — antes eram 429px, com a coluna de 300 ao lado.
      A `.tvp-grade` continua sendo grid (e não um div solto) porque é o ponto
      de volta: se o banner voltar, é uma linha de `grid-template-columns`. */
.tvp-palco{padding-top:26px}
.tvp-grade{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}

.tvp-tela{min-width:0}
.tvp-video{position:relative;aspect-ratio:16/9;background:#02040A;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.tvp-video>iframe,.tvp-video>video,.tvp-video>embed,.tvp-video>object,.tvp-video>.video-js{
  position:absolute;inset:0;width:100%;height:100%;border:0}
.tvp-vk{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#39406A}

/* O aviso quando o sinal da TV falha (13/09/2026): no lugar do erro em inglês do
   player, uma frase e o canal no YouTube. Vale no bloco da home e na página /tv/.
   Fica POR CIMA do player, que segue montado embaixo tentando de novo a cada minuto
   (decisão de 13/09); quando o sinal volta, o aviso some. O fundo é o do palco. */
.tv-falha{position:absolute;inset:0;z-index:10;background:inherit;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center}
.tv-falha[hidden]{display:none}
.tv-falha-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A93B8}
.tv-falha a{font-size:14px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}

/* A legenda do ao vivo fica ABAIXO do player, não por cima.
   ⛔ No desenho antigo ela era uma tarja sobreposta com gradiente: no celular
      cobria quase toda a tela do player e o texto ficava ilegível. Fora, ela
      não disputa espaço com a imagem e lê igual em qualquer largura. */
.tvp-agora{display:flex;align-items:center;gap:12px;margin-top:14px}
.tvp-pill{display:inline-flex;align-items:center;gap:6px;background:var(--hot);
  color:#fff;font-size:10px;font-weight:800;letter-spacing:.09em;
  padding:5px 10px;border-radius:6px;flex:none}
.tvp-pill .dot{width:6px;height:6px;border-radius:50%;background:#fff;
  animation:blink 1.1s ease-in-out infinite}
.tvp-agora-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tvp-k{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.tvp-agora-tx b{font-size:16px;color:var(--ink);font-weight:800}

/* A coluna é só o banner, e ele é o TD2 300x600 (16/08). Antes era o Arroba de
   250px com uma caixa de links embaixo; os links foram para uma seção própria
   depois da publicidade, e o banner cresceu para acompanhar o player.
   ⛔ 600px é o TAMANHO DA ARTE, não uma altura de enfeite: mexer aqui obriga a
      mudar o formato anunciado no `tododia_adzones()`, senão o comercial vende
      um tamanho e a página mostra outro. */

/* ---- 4 · YOUTUBE ---- */
.tvp-yt{padding-top:26px}
.tvp-insc{display:inline-flex;align-items:center;gap:8px;background:#FF0000;
  color:#fff;font-size:12.5px;font-weight:800;padding:9px 16px;border-radius:999px;
  white-space:nowrap;flex:none}
.tvp-insc:hover{text-decoration:none;color:#fff;filter:brightness(1.08)}
.tvp-insc svg{width:19px;height:19px;fill:#fff;flex:none}

/* Grade de verdade, não rolador. ⛔ O desenho antigo era `overflow-x:auto` com
   6 cards em fila: escondia 362px no desktop e 1.092px no celular, SEM nenhum
   sinal de que dava para rolar — o 5º card aparecia cortado e lia como defeito.
   Medido em 16/08. Agora quebra em linhas e não esconde nada. */
.tvp-vids{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:700px){.tvp-vids{grid-template-columns:repeat(3,1fr)}}
/* ---- O CARD DE VÍDEO (26/08) ----
   Antes eram capa solta + texto flutuando no fundo da página. Medido em 26/08:
   era o ÚNICO elemento sem casca da página de TV — o player tem moldura, a
   grade de programação tem, só o vídeo não tinha. Os tokens são os do
   `.ad-card` (linha ~540), não valores novos.
   🔑 `var(--card)` resolve sozinho para a cor certa em cada página: a página de
   TV redefine o token no `body` para o navy dela; na home vale o do tema. */
.tvp-vid{background:var(--card);border:1px solid var(--line-card);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow);display:block;
  transition:box-shadow .18s,transform .18s}
.tvp-vid:hover{text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
/* O raio passa a ser do CARD: mantê-lo também na capa deixaria quatro cantos
   arredondados dentro de outros quatro. */
.tvp-vid .th{position:relative;overflow:hidden;background:#02040A}
.tvp-vid .th img{aspect-ratio:16/9;object-fit:cover;width:100%}
.tvp-vid .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);
  color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px}
.tvp-vid .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;background:rgba(255,0,0,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.tvp-vid .pl::after{content:"";border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.tvp-vid p{color:var(--ink);font-size:14px;font-weight:700;line-height:1.4;
  padding:13px 15px 15px;margin:0}
.tvp-vid:hover p{color:var(--link)}

/* ---- 5 e 6 · AS DUAS GRADES ----
   Local primeiro, TV Brasil em seguida, como o cliente pediu. Empilhadas e
   não lado a lado: duas colunas leriam como peso igual, e a produção local é
   a estrela — a nacional é complemento. */
.tvp-prog{padding-top:26px}
.tvp-grade-h{background:var(--card);border:1px solid var(--line-card);
  border-radius:12px;overflow:hidden}
.tvp-h{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;
  padding:13px 18px;border-bottom:1px solid var(--line)}
.tvp-h:last-child{border-bottom:0}
.tvp-h .hh{font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:700}
.tvp-h .pp{font-size:14.5px;font-weight:700;color:var(--ink);min-width:0}
.tvp-h .dd{font-size:11.5px;color:var(--meta);white-space:nowrap}
/* a linha do momento — a marcação vem do relógio, não do HTML */
.tvp-h.no-ar{background:rgba(255,59,48,.10);box-shadow:inset 3px 0 0 var(--hot)}
.tvp-h.no-ar .pp,.tvp-h.no-ar .hh{color:var(--hot)}
.tvp-nota{margin-top:12px;font-size:12.5px;color:var(--meta)}

@media(max-width:560px){
  .tvp-h{grid-template-columns:62px 1fr;gap:10px;padding:11px 14px}
  .tvp-h .dd{grid-column:2;font-size:11px}
  .tvp-logo{width:100%;max-width:280px}
  .tvp-agora-tx b{font-size:15px}
}

/* ---- CTA COMERCIAL ---- */
.tvp-cta-wrap{padding-top:34px}
.tvp-cta{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  background:linear-gradient(100deg,#8E1109,var(--hot));color:#fff;
  border-radius:16px;padding:26px 28px}
@media(min-width:820px){.tvp-cta{grid-template-columns:1fr auto}}
.tvp-cta h3{font-family:var(--serif);font-size:24px;font-weight:700;color:#fff}
.tvp-cta p{color:rgba(255,255,255,.92);font-size:14px;margin-top:6px;max-width:62ch}
.tvp-btn{display:inline-flex;align-items:center;justify-content:center;background:#fff;
  color:#8E1109;font-weight:800;font-size:13.5px;padding:13px 22px;border-radius:10px;
  white-space:nowrap}
.tvp-btn:hover{text-decoration:none;color:#8E1109;filter:brightness(.96)}

/* A seção da página escura: o fio e o kicker precisam do vermelho da TV */
.tv-pag .secao{flex-wrap:wrap}
.tv-pag .secao .kicker{color:var(--hot)}
.tv-pag .secao h2{color:var(--ink)}
.tv-pag .secao .fio{background:var(--line)}


/* ══════════════════════════════════════════════════════════════════════════
   DESTAQUES DA HOME — os quatro moldes (25/08/2026)

   O editor escolhe o molde do dia em Posts → Home. A marcação sai do
   `front-page.php`; a lista e a cascata saem de `tododia_home_capa()`.

   🔑 A ORDEM DENTRO DO CARD, aprovada pelo Vinicius:
        card SOZINHO na fileira (moldes 1 e 3) → título → meta → foto → texto
        cards LADO A LADO       (moldes 2 e 4) → foto → título → meta → texto
      Não é gosto: lado a lado, cada título tem um número diferente de linhas
      e as fotos começariam em alturas diferentes. Com a foto abrindo o card,
      todas encostam no topo. Medido por fileira em 5 larguras.
   ══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
   25/08 · (B) OS QUATRO MOLDES DE DESTAQUE — em discussão

   O editor escolhe o molde do dia numa tela nova do admin. Os quatro:
     1 · Super destaque ....... 1 matéria, foto grande na largura do rio
     2 · Dois destaques ....... 2 lado a lado, peso igual
     3 · Manchete + satélites . o de hoje (1 grande + 2 em lista)
     4 · Grade 2x2 ............ 4 com o mesmo peso

   ⛔ TODOS herdam a ordem aprovada em (A): título → meta → foto → texto.
      Não são quatro desenhos independentes; são quatro ARRANJOS do mesmo
      card. Se a ordem mudar de novo, muda num lugar só.
   ───────────────────────────────────────────────────────────────────────── */

/* ⛔ A FAIXA É IRMÃ DO `.grid`, NÃO FILHA DO `.rio` (decisão do Vinicius,
   25/08). O topo da home é sempre dos destaques, na largura inteira do wrap; a
   lateral (TV, banner, mais lidas) começa DEPOIS da faixa, no `.grid` normal.
   Uma regra só, sem exceção por molde — foi isso que fechou a discussão de
   "A × C", que criava uma lateral especial só para a home.
   ⚠️ O custo, medido e aceito: em 3 dos 4 moldes a TV e a Lateral 1 ficam
   abaixo da dobra (y entre 1104 e 1194, contra 307 antes). É troca consciente
   de visibilidade da lateral por tamanho do destaque. */
.dq { display: grid; gap: 16px; align-items: start; margin: 22px 0 0; }
.dq .card > .body > img { display: block; width: 100%; border-radius: 10px; margin: 12px 0 2px; }
.dq .card > .body > .t { margin: 0; }

/* ⛔ O TÍTULO DOS MOLDES USA `.t-manchete`, A CLASSE DO TEMA — não uma classe
   `.t` inventada. Na 1ª versão os moldes 2 e 4 saíram com **peso 400** (o
   padrão do corpo de texto) enquanto 1 e 3 saíam com 800, porque `.t` não
   herdava nada. O Vinicius viu no molde 2: "me parece não estar negrito".
   O molde 4 tinha o MESMO defeito e passou despercebido só porque o texto é
   menor — inventar classe cria essa família de erro silencioso.
   Aqui embaixo cada molde ajusta SÓ o tamanho; peso, cor, entrelinha e
   espacejamento vêm do tema e acompanham qualquer mudança futura dele. */
.dq .card > .body > .meta-row { margin: 10px 0 0; }

/* ⛔ CARD COM A FOTO NO TOPO — moldes 2 e 4, os que põem cards LADO A LADO.
   Ali o título de cada card tem um número diferente de linhas e as fotos
   começavam em alturas diferentes: o bloco ficava torto. Com a foto abrindo o
   card, todas encostam no topo e o desalinhamento acaba na origem.
   🔑 A regra: card SOZINHO na linha → título primeiro (moldes 1 e 3). Cards
   LADO A LADO → foto primeiro. A alternativa seria travar a altura do título,
   mas isso corta manchete — pior para um jornal do que inverter dois blocos.
   ⚠️ `align-items:start` no `.dq` é o par disto: sem ele os cards esticariam
   para a altura do mais alto e a foto voltaria a flutuar. */
.dq .card.foto-topo > .body > img { margin: 0 0 10px; }
.dq .card.foto-topo > .body > .meta-row { margin: 0 0 8px; }
.dq .card.foto-topo > .body > .t { margin: 0; }

/* 1 · SUPER DESTAQUE — uma só. A foto é mais alta que a da manchete normal
   (16/8.5 → 16/9,5 não; aqui vai 16/9) porque ela é o assunto do dia. */
.dq-1 { grid-template-columns: 1fr; }
.dq-1 .t-manchete { font-size: 34px; line-height: 1.12; }
@media(max-width:640px){ .dq-1 .t-manchete { font-size: 25px; } }
.dq-1 .card > .body > img { aspect-ratio: 16/9; object-fit: cover; }

/* 2 · DOIS DESTAQUES — peso igual, lado a lado. Uma coluna abaixo de 760px:
   dois títulos de 22px em 380px viram duas colunas de palavra picada. */
.dq-2 { grid-template-columns: 1fr; }
@media(min-width:760px){ .dq-2 { grid-template-columns: 1fr 1fr; } }
.dq-2 .t-manchete { font-size: 22px; line-height: 1.2; }
.dq-2 .card > .body > img { aspect-ratio: 16/9; object-fit: cover; }

/* 3 · MANCHETE + 2 SATÉLITES — é o arranjo de hoje, redesenhado com a ordem
   nova. Os satélites continuam em lista com miniatura à direita. */
.dq-3 { grid-template-columns: 1fr; }
.dq-3 .t-manchete { font-size: 30px; line-height: 1.14; }
@media(max-width:640px){ .dq-3 .t-manchete { font-size: 24px; } }
/* ⛔ SEM RECORTE (01/09). Aqui havia `aspect-ratio:16/8.5` e, acima de 1000px,
   `16/6` — os dois cortando a foto com `object-fit:cover`. Medido em 01/09: a
   foto chega 1080x608 e era exibida 1046x392, ou seja, **33% dela ficava de
   fora**. Pedido do Vinicius: "não precisa fazer recorte nessa foto".
   🔑 Sem o recorte ela volta a 16:9, que é como o fotógrafo entregou — e não é
   proporção livre: as fotos do site JÁ nascem 16:9 (o tamanho `td-manchete` é
   1040x585), então não há risco de uma foto em pé esticar o card.
   ⚠️ CUSTO MEDIDO E ACEITO: a banda de destaque vai de 904px para 1100px. Foi
   exatamente por isso que o corte entrou em 25/08 — o molde 3 é o padrão e a
   foto grande empurra o resto da home para baixo. Ele decidiu de novo sabendo
   do número. */
.dq-3 .card > .body > img { aspect-ratio: auto; }

/* ⛔ CORTE MAIS LARGO NA FAIXA CHEIA — só o molde 3, e só no desktop.
   O 16/8.5 foi pensado para os 686px de largura do RIO. Em faixa cheia a foto
   vai a 1046px, e nessa largura a mesma proporção dá 556px de ALTURA — uma
   imagem que domina a página TODO DIA, porque o molde 3 é o padrão. Medido em
   25/08: a banda do molde 3 era a mais alta das quatro (978px).
   Com 16/6 a foto fica ~1046x392 e a banda cai para ~815px, trazendo o bloco
   da TV de y=1309 para ~1145. O corte mais largo também combina melhor com uma
   manchete em faixa cheia.
   ⚠️ NÃO vale para o molde 1: lá a foto grande é o ponto — é o super destaque. */
/* O corte de 16/6 acima de 1000px saiu junto — mesma decisão. */

/* 4 · GRADE 2x2 — quatro com o mesmo peso. Duas colunas a partir de 700px;
   abaixo disso vira uma pilha, senão cada card fica com 170px de largura. */
.dq-4 { grid-template-columns: 1fr; }
@media(min-width:700px){ .dq-4 { grid-template-columns: 1fr 1fr; } }
.dq-4 .t-manchete { font-size: 19px; line-height: 1.25; }
.dq-4 .card > .body > img { aspect-ratio: 16/9; object-fit: cover; }
.dq-4 .card > .body > .linhafina { display: none; }   /* 4 resumos = parede de texto */

/* ══════════════════════════════════════════════════════════════════════════
   OS BLOCOS DA HOME DENTRO DO RIO (25/08/2026)

   Decisão do Vinicius: "a lateral do site vai até o rodapé". Antes, o rio
   acabava no Giro Policial e a lateral morria no meio da página — sobrava um
   vazio branco à esquerda enquanto o resto da home virava faixa cheia.

   Cada bloco daqueles carrega `class="wrap"`, que existe para CENTRALIZAR em
   1120px com 16px de respiro. Dentro do rio isso vira estorvo: limita a
   largura de novo e empurra tudo 16px para dentro, desalinhando do resto da
   coluna. Aqui o `.wrap` é neutralizado — mas SÓ dentro do rio, para não
   afetar as mesmas seções em outras páginas.
   ⛔ Não trocar isto por remover a classe `wrap` do PHP: as mesmas seções são
   reaproveitadas fora do rio (a faixa de destaques, o banner de rodapé). */
.rio .wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* A primeira seção dentro do rio não precisa do respiro de topo que ela tinha
   quando era faixa solta entre dois banners. */
.rio > section.wrap:first-of-type { padding-top: 0 }

/* ══════════════════════════════════════════════════════════════════════════
   HORÓSCOPO — Amor/Trabalho/Saúde em uma coluna, abaixo (25/08/2026)

   Pedido do Vinicius: o card do signo e a "Previsão de hoje" lado a lado; os
   três aspectos DESCEM e ficam um embaixo do outro.

   ⛔ Depende de o `.aspectos` ser filho DIRETO do `.hoje` — foi por isso que
   ele saiu de dentro do `.txt` no front-page.php. Item de grade só atravessa
   colunas se for filho direto do container; aninhado, nenhum CSS o fazia
   descer ocupando a largura toda.
   ══════════════════════════════════════════════════════════════════════════ */
.hoje > .aspectos { grid-template-columns: 1fr; margin-top: 0 }
@media(min-width:820px){
  .hoje > .aspectos { grid-column: 1 / -1 }
}

/* ── A SUÍTE DOS CARDS DE DESTAQUE ──
   ⛔ QUEBROU EM SILÊNCIO em 25/08, quando a faixa de destaques saiu do `.rio`.
   A regra de cima é `.rio > .card > .suite` (linha ~1654) e exige que o card
   seja filho DIRETO do rio. Os cards do destaque passaram a viver em `.dq`,
   dentro do `.wrap`, então pararam de casar: a suíte ficou com padding
   horizontal ZERO, encostada na borda, enquanto o resto do card respeitava
   20px. Nenhum erro, nenhum aviso — só ficou torto.
   🔑 Este seletor olha o BLOCO (`.dq`), não o lugar dele na árvore. Se o bloco
   mudar de lugar outra vez, continua valendo. */
.dq .card > .suite {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 18px;
}


/* ══════════════════════════════════════════════════════════════════════════
   "SIGA O TODO DIA" — CTA de redes na lateral (25/08/2026)

   Marcação em `sidebar.php`, que é a MESMA em matéria, listagem, busca e
   home: um bloco escrito lá aparece nos quatro lugares de uma vez.

   🔑 AS CORES SÃO AS DAS MARCAS, não a paleta do site — é o ÚNICO lugar do
   projeto onde isso vale. O leitor reconhece a rede pela cor antes de ler o
   nome, e trocar pelo azul e vermelho do Todo Dia mataria o reconhecimento,
   que é justamente o que faz ele clicar.
   ══════════════════════════════════════════════════════════════════════════ */
.rs-bloco .rs-txt {
  font-size: 13px;
  color: var(--body);
  line-height: 1.45;
  margin: -4px 0 12px;
}

.rs-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.rs {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 10px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.rs:hover { text-decoration: none; color: #fff; filter: brightness(1.08) }
.rs svg { width: 18px; height: 18px; flex: none }

.rs-ig { background: linear-gradient(45deg,#F09433,#DC2743 45%,#BC1888) }
.rs-fb { background: #1877F2 }
.rs-yt { background: #FF0000 }
.rs-tt { background: #010101 }

/* ⚠️ Abaixo de 1000px a lateral vira largura cheia (ela desce para depois do
   rio). Aí quatro botões em duas colunas ficam largos demais e esticados —
   viram quatro faixas. Em quatro colunas eles voltam a parecer botões. */
@media(max-width:999.98px){
  .rs-links { grid-template-columns: repeat(4,1fr) }
  .rs { flex-direction: column; gap: 6px; padding: 12px 6px; font-size: 11px }
}

/* ── "O que é Branded Content?" ──────────────────────────────────────────
   Fica FORA do card, logo abaixo dele: o card inteiro é um `<a>` e link
   dentro de link é HTML inválido. Discreto de propósito — é uma saída para
   quem tem dúvida, não uma chamada disputando atenção com o anunciante. */
.bc-oque { margin: 6px 0 0; font-size: 12px }
.bc-oque a { color: var(--meta); text-decoration: underline; text-underline-offset: 2px }
.bc-oque a:hover { color: var(--link) }

/* ══════════════════════════════════════════════════════════════════════════
   BLOCO DA TV NA HOME — carrossel de vídeos do YouTube (26/08/2026)

   Pedido do Vinicius: "os blocos destaques do YouTube tem que ser os mesmos
   blocos" e "mostrar os três primeiros vídeos e vai ser um carrossel, pra
   arrastar pro lado pra ver todos os nove".
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ O PADDING LATERAL DO PAINEL PRECISA VOLTAR — e a culpa é de 25/08.
   `.rio .wrap{padding-left:0;padding-right:0}` foi criada quando os blocos
   desceram para o rio, e existe para tirar a CENTRALIZAÇÃO de um container
   neutro. Só que o painel da TV também é `.wrap`, e nele o padding não
   centraliza nada: é o CORPO do bloco. A regra genérica levou junto e os cards
   passaram a encostar na borda navy (medido: 1px de respiro). Nada de erro,
   só apertado — foi assim que o Vinicius viu.
   🔑 O seletor mira o PAINEL PINTADO, não a posição dele na árvore. */
.rio .tvblock.acc-box{padding-left:22px;padding-right:22px}

.tvp-carr{position:relative}
/* 2ª faixa do bloco: SALA POLÍTICA (08/10/2026). Cores explícitas: o painel é navy
   mesmo com o tema claro (ver `.tvblock .tvp-vid p`). */
.tvblock .tv-faixa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:24px 0 12px;padding-top:18px;border-top:1px solid #232C52}
.tvblock .tv-faixa h3{font-family:var(--serif);font-style:italic;font-weight:700;font-size:21px;color:#fff;margin:0}
.tvblock .tv-faixa a{font-size:12px;font-weight:700;white-space:nowrap}   /* = o "ver a TV TODODIA" */
/* o logo da TV no lugar do texto (08/10/2026): mesma altura do tvtododia.com.br */
.tvblock .tv-topo{align-items:center}
.tvblock .tv-marca{margin:0;line-height:0;flex:none}
.tvblock .tv-marca img{height:46px;width:auto;max-width:100%;display:block}
.tvblock .tv-faixa-1{margin-top:4px;padding-top:0;border-top:0}
@media (min-width:900px){.tvblock .tvp-carr-3 .tvp-vids{grid-auto-columns:calc((100% - 32px)/3)}}
@media (max-width:559.98px){.tvblock .tv-marca img{height:30px}}
/* ⛔ No celular o `.secao` põe o h2 POR ÚLTIMO e em linha inteira (é o título longo
   dos outros blocos): o "ver a TV TODODIA" subia para cima do logo. Aqui o h2 é o
   LOGO — vem primeiro, e o link ao lado (ou logo abaixo, se não couber). */
@media (max-width:979.98px){
  .tvblock .tv-topo .tv-marca{order:1;flex-basis:auto;width:auto}
  .tvblock .tv-topo a{order:2;margin-left:auto}
}

/* DOIS à vista (08/10/2026, pedido do Vinicius; eram três); os outros rolando de lado. */
.tvblock .tvp-vids{
  display:grid;grid-auto-flow:column;
  /* ⛔ ZERAR O `grid-template-columns` É OBRIGATÓRIO. Mais acima o
     `.tvp-vids` declara `repeat(3,1fr)` para a grade da página de TV. Num
     carrossel o conteúdo é MAIOR que o container, a folga é NEGATIVA, e `1fr`
     sem folga colapsa para min-content: os três primeiros cards viraram 2px de
     largura (medido em 26/08). Sem esta linha o carrossel nasce esmagado e
     nada acusa erro. */
  grid-template-columns:none;
  grid-auto-columns:calc((100% - 16px)/2);      /* 2 cards + 1 vão de 16px */
  gap:16px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  /* ⛔ O respiro vertical NÃO é enfeite: `overflow-x:auto` faz o eixo Y virar
     `auto` também, e sem ele o card cortaria a própria sombra e o pulo de 2px
     do hover — ainda aparecendo uma barra de rolagem vertical de 2px. */
  padding:5px 0 7px;margin:-5px 0 -7px;
}
.tvblock .tvp-vids::-webkit-scrollbar{display:none}
.tvblock .tvp-vid{scroll-snap-align:start}
@media (max-width:559.98px){
  /* 1,15 card: a fatia do próximo à direita é o que AVISA que há mais. */
  .tvblock .tvp-vids{grid-auto-columns:87%}
}

/* Dentro do painel navy o `var(--card)` do tema CLARO é branco, e um card
   branco no meio do navy quebraria a identidade da TV. Navy um passo acima do
   painel — a mesma relação que a página de TV usa entre fundo e grade. */
.tvblock .tvp-vid{background:#141A33;border-color:#242C52;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
.tvblock .tvp-vid:hover{box-shadow:0 6px 24px rgba(0,0,0,.5)}
/* ⛔ COR EXPLÍCITA. Na página de TV o `--ink` é claro porque a página inteira é
   escura. Na home o painel é escuro MAS O TEMA PODE ESTAR CLARO — aí `--ink` é
   #1A1A1A e o título sumiria no navy. É o mesmo defeito do `h1` na faixa azul
   das páginas institucionais (25/08): cor herdada perde para regra global. */
.tvblock .tvp-vid p{color:#E8EAF2}
.tvblock .tvp-vid:hover p{color:#fff}

/* As setas aparecem SEMPRE, e não só onde há mouse.
   ⛔ A 1ª versão escondia atrás de `@media(hover:hover)and(pointer:fine)` — sem
   o espaço antes do `and` a consulta é INVÁLIDA e o navegador descarta o bloco
   inteiro: as setas ficaram invisíveis até no desktop, sem um aviso sequer. O
   erro de digitação só expôs a decisão errada: mouse NÃO arrasta área rolável,
   então pôr a única forma de chegar aos vídeos 4 a 9 atrás de uma condição que
   pode não casar é esconder conteúdo. Aparecendo sempre, o dedo arrasta E a
   seta funciona. */
.tvp-seta{position:absolute;top:calc((100% - 34px)/2 - 26px);width:34px;height:34px;
  border-radius:50%;border:1px solid #2C3560;background:rgba(8,11,26,.92);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  z-index:3;padding:0}
.tvp-seta:hover{background:#141A33}
.tvp-seta[hidden]{display:none}
.tvp-seta.ant{left:-13px}
.tvp-seta.pro{right:-13px}
.tvp-seta::after{content:"";width:8px;height:8px;border-right:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg);margin-left:-3px}
.tvp-seta.ant::after{transform:rotate(135deg);margin-left:3px}

/* O `.secao` é uma linha flex (kicker · título · fio · link) e em 390px não
   cabe: o título quebrava em 2 linhas e o kicker também, JÁ NO SITE NO AR. Com
   "Destaques do YouTube" no lugar de "No ar agora" viraria 3 linhas.
   ⛔ A correção não é nova: a página de TV já resolve isto mais acima
   (`.tv-pag .secao{flex-wrap:wrap}`) — o painel da home nunca recebeu a mesma
   linha. Fica só no painel: o `.secao` do site inteiro aparece em dezenas de
   blocos que não foram medidos. */
@media (max-width:559.98px){
  .tvblock .secao{flex-wrap:wrap;gap:6px 12px}
  .tvblock .secao .fio{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   "EM BREVE" — o que ainda não existe, dito com todas as letras (26/08/2026)

   Nasceu no Todo Ofertas, no lugar do marketplace: seis categorias com
   contagens INVENTADAS ("2.417 anúncios") e um bloco de anúncios de marcador
   cinza. Decisão do Vinicius: o sistema não existe, então a página não afirma
   que existe.
   🔑 Número inventado é pior que foto de marcador — a foto o leitor entende
   como espaço a preencher; o número ele lê como fato.
   Serve para os outros "em breve" já decididos (a Praça Pública, por exemplo).
   ══════════════════════════════════════════════════════════════════════════ */
.embreve{background:var(--surface);border:1px dashed var(--line-card);border-radius:12px;
  padding:30px 32px;text-align:center}
.eb-k{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--meta);margin-bottom:8px}
.embreve h2{font-family:var(--serif);font-style:italic;font-weight:700;font-size:26px;
  color:var(--ink);margin-bottom:10px}
.eb-tx{font-size:15px;line-height:1.6;color:var(--body);max-width:56ch;margin:0 auto}
@media(max-width:559.98px){.embreve{padding:24px 20px}.embreve h2{font-size:22px}}

/* A capa do encarte quando existe de verdade: mesma caixa que o marcador
   ocupava, para a página não pular de altura quando o PDF é publicado. */
.encarte img.cap{width:100%;height:auto;border-radius:12px;display:block;
  border:1px solid var(--line-card)}
.encarte-nota{margin-top:16px;font-size:14px;font-weight:700;color:var(--meta)}

/* ══════════════════════════════════════════════════════════════════════════
   INSCRIÇÃO NA NEWSLETTER — formulário de verdade (26/08/2026)
   Os três formulários do site (página, lateral e fim da matéria) saem da mesma
   função `tododia_news_form()`, então as regras abaixo servem aos três.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⛔ A ARMADILHA DE ROBÔ NÃO PODE USAR `display:none`. Robô que lê CSS pula
   campo escondido assim, e alguns leitores de tela ainda anunciam o campo.
   Tirar da tela pela POSIÇÃO mantém o campo "real" para o robô e invisível e
   inalcançável para a pessoa. */
.td-mel{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.td-news-form{display:grid;gap:10px}
.td-news-form .fld{display:grid;gap:5px}
.td-news-form .fld span{font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta)}
.td-news-form input{width:100%;border:1px solid var(--line-card);border-radius:8px;
  padding:11px 12px;font-family:var(--font);font-size:14px;background:var(--card);
  color:var(--ink);outline:0}
.td-news-form input:focus{border-color:var(--link);box-shadow:0 0 0 3px rgba(21,96,165,.15)}
.td-news-form button{width:100%;background:#2FA84F;color:#fff;border:0;border-radius:8px;
  padding:12px 16px;font-family:var(--font);font-weight:800;font-size:13px;cursor:pointer}
.td-news-form button:hover{filter:brightness(1.08)}
.td-lgpd{font-size:11px;line-height:1.5;color:var(--meta);margin:2px 0 0}
.td-lgpd a{color:inherit;text-decoration:underline}

/* Na lateral e no fim da matéria o bloco é navy: texto claro por cima.
   ⛔ Cor explícita — no tema CLARO o `--meta` é cinza escuro e sumiria. */
.news-box .td-news-form .fld span,.news-box .td-lgpd{color:rgba(255,255,255,.62)}
.news-box .td-news-form input{background:#fff;color:#1A1A1A;border-color:transparent}

/* O recado depois de enviar. `role="status"` no PHP faz o leitor de tela
   anunciar sem roubar o foco de quem está digitando. */
.td-recado{display:grid;gap:3px;border-radius:10px;padding:14px 16px;margin-bottom:16px;
  border:1px solid}
.td-recado strong{font-size:14.5px;font-weight:800}
.td-recado span{font-size:13.5px;line-height:1.5}
.td-recado.bom{background:#E8F4ED;border-color:#B9DDC9;color:#14532D}
.td-recado.ruim{background:#FCEDEC;border-color:#F2C9C6;color:#7F1D1D}
[data-theme="dark"] .td-recado.bom{background:#0F2419;border-color:#20452F;color:#8FE0B4}
[data-theme="dark"] .td-recado.ruim{background:#2A1614;border-color:#4A2723;color:#F5A9A3}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA "OBRIGADO" da newsletter (26/08/2026)
   Uma coisa só na tela, no topo, sem formulário. Ver template-confirmado.php.
   ══════════════════════════════════════════════════════════════════════════ */
.conf-wrap{padding:56px 16px 72px}
.conf{max-width:600px;margin:0 auto;text-align:center;background:var(--card);
  border:1px solid var(--line-card);border-radius:14px;padding:44px 36px 38px;
  box-shadow:var(--shadow)}
.conf-ic{display:inline-flex;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;margin-bottom:20px}
.conf-ic svg{width:30px;height:30px}
.conf.bom .conf-ic{background:#E8F4ED;color:#15693F}
.conf.ruim .conf-ic{background:#FCEDEC;color:#C42620}
[data-theme="dark"] .conf.bom .conf-ic{background:#0F2419;color:#63C795}
[data-theme="dark"] .conf.ruim .conf-ic{background:#2A1614;color:#F0837C}
/* ⛔ Cor explícita no h1: a regra global do `h1` traz `color:var(--ink)` e o
   tamanho de 31px. Sem isto o título da página sairia com o corpo de matéria. */
.conf h1{font-size:29px;line-height:1.2;font-weight:800;color:var(--ink);
  letter-spacing:-.015em;margin:0 0 10px}
.conf-sub{font-size:16.5px;line-height:1.6;color:var(--body);margin:0 auto;max-width:44ch}
.conf-lista{list-style:none;margin:26px auto 0;padding:22px 0 0;max-width:44ch;
  text-align:left;border-top:1px solid var(--line);display:grid;gap:11px}
.conf-lista li{font-size:14.5px;line-height:1.55;color:var(--body);padding-left:18px;position:relative}
.conf-lista li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--link)}
.conf-lista strong{color:var(--ink);font-weight:700}
.conf-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:30px}
.conf-btn{display:inline-block;background:var(--link);color:#fff;border-radius:8px;
  padding:13px 26px;font-size:14px;font-weight:800}
.conf-btn:hover{text-decoration:none;filter:brightness(1.08);color:#fff}
.conf-lk{font-size:13.5px;font-weight:700;color:var(--link)}
@media(max-width:559.98px){.conf{padding:34px 22px 30px}.conf h1{font-size:24px}}

/* O céu do dia, abaixo do subtítulo da página de horóscopo (26/08/2026).
   É o que dá lastro ao texto: o leitor vê que mudou algo de verdade desde
   ontem. ⛔ Cor explícita — o hero é rosa e o `--meta` sumiria nele. */
.ph-ceu{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  margin-top:14px;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font-size:13.5px;line-height:1.4}
.ph-ceu span{font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ══════════════════════════════════════════════════════════════════════════
   HORÓSCOPO E OPINIÃO NA LATERAL (26/08/2026)
   Pedido do Vinicius. Os dois SAÍRAM do rio no mesmo dia e passaram a viver só
   aqui. Ver `sidebar.php` para o porquê de cada decisão.
   ══════════════════════════════════════════════════════════════════════════ */

/* O "ver tudo" cabe no próprio h3 do widget, que já é uma linha flex. */
.widget h3 .w-ver{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:none;color:var(--link)}

/* ---- HORÓSCOPO: 12 signos, UMA coluna ----
   ⛔ ROSA, NÃO AZUL. #E8478B é a cor da editoria de Horóscopo — é ela que está
   no bloco da home (`--acc`) e no hero da página. Eu tinha usado o azul de link
   por reflexo, e o bloco perdeu a identidade: virou "mais uma lista" na lateral.
   🔑 Cor de editoria não é enfeite; é o que faz o leitor reconhecer o assunto
   antes de ler o título.

   ⛔ Não expande. Em 300px não cabe previsão, e repetir o texto do dia aqui
   seria a TERCEIRA cópia do mesmo conteúdo (página, home e lateral). O bloco é
   atalho, não um segundo lugar de leitura.

   Uma coluna e não quatro (decisão dele): cabe o INTERVALO DE DATAS, que é o
   que o leitor precisa para saber qual é o signo dele. Em 4 colunas não cabia,
   e o nome sozinho só serve para quem já sabe. */
.hl-grade{display:grid;gap:0}
.hl-sg{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--line)}
.hl-sg:last-child{border-bottom:0;padding-bottom:0}
.hl-sg:hover{text-decoration:none}
.hl-sg .gl{font-size:18px;line-height:1;color:#E8478B;text-align:center}
.hl-sg b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.hl-sg .dt{font-size:10.5px;font-weight:600;color:var(--meta);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hl-sg:hover b{color:#E8478B}
/* O "ver tudo" do horóscopo acompanha a editoria; o dos outros blocos não. */
.horo-lat h3 .w-ver{color:#E8478B}

/* ---- OPINIÃO ---- */
.ol-item{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line)}
.ol-item:last-child{border-bottom:0;padding-bottom:0}
.ol-item:hover{text-decoration:none}
.ol-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.ol-tx{display:grid;gap:1px;min-width:0}
.ol-nome{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.2}
.ol-cargo{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--meta)}
.ol-tit{font-size:13px;font-weight:700;line-height:1.35;color:var(--link);margin-top:4px}
.ol-item:hover .ol-tit{text-decoration:underline}

/* ══════════════════════════════════════════════════════════════════════════
   BRANDED CONTENT 2 e ESPECIAIS na LATERAL (08/09/2026)
   Os dois saíram do rio por decisão do Vinicius. Ver sidebar.php para o porquê
   de cada escolha.

   ⛔ EMPILHADO E NÃO EM DUAS COLUNAS. No rio o `.bc-corpo` é uma grade de
   `1fr 300px` — texto à esquerda, arte à direita. Em 300px de lateral isso
   deixaria o texto com ~0px. Aqui vira uma coluna só, na ordem que ele pediu:
   ANÚNCIO · título · texto · foto. */
.bc-widget{padding:0;overflow:hidden}
.bc-widget .card{display:block;border:0;box-shadow:none;background:transparent}
.bc-widget .body{padding:14px 16px 0}
/* ⛔ O RESPIRO ENTRE A TARJA E O TÍTULO É OBRIGATÓRIO, não é refinamento.
   Medido em 08/09: o texto do título começava a **1px** da base da tarja
   ANÚNCIO — os dois pareciam uma coisa só. Acontece porque o bloco da tarja
   fecha com `padding-bottom:0` e o corpo abre com `padding-top:0`: ninguém
   reservava o espaço, cada um contava com o outro.
   🔑 Medido onde o TEXTO começa (Range sobre o nó), não onde a caixa começa —
   caixa não muda com padding e já me enganou antes. */
.bc-corpo.bc-lateral{grid-template-columns:1fr;gap:12px;padding:12px 16px 16px}
/* A arte ocupa a largura do bloco e mantém a proporção do criativo (300x170).
   ⛔ `max-width:none` porque a regra base trava em 150px, o tamanho da versão
   do rio — sem isto a foto fica uma tarja no meio do bloco. */
.bc-corpo.bc-lateral .bc-arte{max-width:none;width:100%;height:auto;aspect-ratio:300/170;
  object-fit:cover;border-radius:8px}
.bc-widget .bc-oque{padding:0 16px 14px;margin:0;font-size:11.5px}

/* ---- ESPECIAIS na lateral (08/09) ----
   1ª matéria = CARD, igual ao do Viralizou: régua colorida de 10px no topo e a
   foto SANGRANDO de borda a borda. As outras três = lista simples, sem régua e
   sem foto.
   ⛔ A régua fica SÓ na primeira (decisão dele em 08/09). A versão anterior
   punha em todas as quatro e virou uma escada de cards — ele viu e recusou. */

/* ── o cabeçalho, FORA da caixa branca ──
   Na lateral os outros blocos usam `h3` dentro do widget; este usa o `.secao`
   do rio porque ele NÃO tem caixa: o título fica no creme e só as matérias
   ficam em branco. Foi o que ele pediu — "coloca fora do bloco branco, como
   nos outros, exemplo de cultura". */
.esp-lat{margin-bottom:20px}
.esp-lat > .secao{margin:0 0 12px;align-items:baseline}
.esp-lat > .secao h2{font-size:21px}
.esp-lat > .secao .kicker{font-size:10px}

/* ⛔ O CABEÇALHO DO ESPECIAIS NÃO CABIA EM UMA LINHA NA LATERAL (14/09/2026).
   O bloco usa a marcação `.secao` dos blocos do rio — rótulo · título · fio · "ver todas" —,
   mas mora numa coluna de 320px em vez dos 1.088 do rio. Medido: rótulo 71px + link 63px +
   os vãos deixavam 150px para um título que precisa de 184, e ele quebrava em duas linhas.
   Apareceu no mesmo dia em que o "ver todas" entrou.
   Mesma saída do celular: o título ganha a linha inteira. O cabeçalho ainda encolhe de 67
   para 55px. Vale em todas as larguras, porque a lateral é estreita em todas.
   🔑 Seletor com `>` e DEPOIS das regras acima: com `.esp-lat .secao` o peso empatava e quem
   viesse por último no arquivo venceria. */
.esp-lat > .secao{ flex-wrap:wrap; align-items:center; row-gap:2px; }
.esp-lat > .secao .kicker{ order:1; }
.esp-lat > .secao .fio{ order:2; }
.esp-lat > .secao a{ order:3; }
.esp-lat > .secao h2{ order:4; flex-basis:100%; width:100%; }

/* ── UMA CAIXA SÓ para as quatro matérias ──
   ⛔ A régua colorida e o arredondamento saem do ITEM e vão para a CAIXA: é ela
   que é o card agora. Antes a 1ª era um card e as outras três outro, com 14px
   de vão — ele pediu bloco único.
   ⛔ `overflow:hidden` na caixa é o que faz a foto sangrar até a borda sem
   estourar o canto arredondado. */
.esp-caixa{border-top:10px solid #5D4037;border-radius:10px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}

/* ── a 1ª: foto de borda a borda, texto com recuo ── */
/* ⛔ `padding-bottom` aqui e margem ZERO no resumo, e não o contrário. A margem
   de baixo de um filho ESCAPA do pai quando o pai não tem recuo nem borda —
   é o colapso de margem do CSS. Foi o que deixou 14px de vão entre a 1ª e a 2ª
   matéria depois de eu juntar tudo numa caixa: o vão não era do item, era da
   margem do resumo vazando para fora dele. */
.esp-lat .esp-primeira{display:block;padding:0 0 14px}
.esp-lat .esp-primeira img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  display:block;margin:0;border-radius:0}
.esp-lat .esp-primeira .meta-row{margin:12px 14px 5px}
.esp-lat .esp-primeira .esp-tit{display:block;margin:0 14px;font-size:15.5px;
  font-weight:700;line-height:1.3;color:var(--link)}
.esp-lat .esp-primeira .linhafina{margin:6px 14px 0;font-size:13px;line-height:1.5}

/* ── as outras três: risco fino entre elas, dentro da mesma caixa ── */
.esp-lat .esp-item:not(.esp-primeira){display:block;padding:11px 14px;
  border-top:1px solid var(--line)}
.esp-lat .esp-item:hover{text-decoration:none}
.esp-lat .esp-item:not(.esp-primeira) .meta-row{margin-bottom:4px}
.esp-lat .esp-item:not(.esp-primeira) .esp-tit{display:block;font-size:13.5px;
  font-weight:700;line-height:1.35;color:var(--link)}
.esp-lat .esp-item:hover .esp-tit{text-decoration:underline}
/* 08/10/2026: data, hora e autor no PÉ do item (.esp-rodape) e o chapéu do 1º card
   com o mesmo recuo de 14px do título — antes encostava na borda do card. */
.esp-lat .esp-primeira .chapeu-txt{margin:2px 14px 4px}
.esp-lat .esp-primeira .meta-row.esp-rodape{margin:8px 14px 0}
.esp-lat .esp-item:not(.esp-primeira) .meta-row.esp-rodape{margin:5px 0 0}

/* ---- A cor de Especiais NÃO mora aqui ----
   Ela entrou em `tododia_cor_editoria()` no functions.php, que é o ÚNICO lugar
   do tema que decide cor de editoria — home, matéria e listagem passam por lá.
   Pôr a cor no CSS faria a mesma editoria sair de um jeito aqui e de outro na
   listagem, que é exatamente a divergência que aquela função existe para
   impedir. Aqui fica só o kicker do bloco, que não é pílula de editoria. */
.esp-lat > .secao .kicker{color:#5D4037}

/* o ícone da cotação usa a cor do próprio bloco, não o âmbar do tempo */
.cot-box .tempo-ic{color:var(--cambio)}

/* ── A FILA DOS BLOCOS NO CELULAR (14/09/2026) ───────────────────────────────
   Decisão do Vinicius (opção "serviço nas emendas"): no celular a coluna de
   notícias e a lateral deixam de ser duas caixas e viram uma fila só, e cada
   bloco entra na posição escolhida. A ORDEM mora em `tododia_ordem_mobile()`,
   no functions.php; aqui só se diz que existe fila.
   ⛔ `gap:0`: o `.grid` tem 28px entre as duas caixas. Virando fila, esses 28px
      entrariam entre TODOS os blocos e a página crescia ~600px (medido em 14/09).
      O respiro entre blocos vem do recheio de cada um.
   ⛔ `margin-left/right:0` e `width:auto` nos filhos: `.wrap` centraliza com
      margem automática, e margem automática em fila encolhe o bloco até o
      conteúdo — os anúncios caíam de 390 para 253px (medido em 14/09).
   ⛔ Só na home: a mesma lateral aparece em matéria, listagem e busca, onde não
      há nada para reordenar.
   ⛔ `.grid > aside` e NÃO `aside`: o MENU LATERAL do site também é um <aside>
      (footer.php). Publicado como `body.home aside{display:contents}` em 14/09,
      a regra ficou mais forte que a que esconde o menu e despejou o conteúdo dele
      no fim da home — 747px de sobra, medidos no ar logo depois de publicar. Na
      injeção de teste não apareceu porque lá o seletor era só `aside`, mais fraco
      que `.drawer`. Medir DEPOIS de publicar é o que pegou.
   ⚠️ Isto substituiu o <script> que movia o bloco da TV de pai no celular. Ele
      procurava `.rio > .card`, que a reforma de 25/08 tirou do rio, e falhava em
      silêncio desde então — por isso a decisão de 16/08 nunca esteve no ar. */
@media(max-width:979.98px){
  body.home .grid{display:flex;flex-direction:column;gap:0}
  body.home .grid>.rio,body.home .grid>aside{display:contents}
  body.home .grid>.rio>*,body.home .grid>aside>*{margin-left:0;margin-right:0;width:auto}
}


/* ==========================================================================
   ADZONES — os sete espaços de publicidade (14/09/2026)

   A medida de cada zona sai da RÉGUA REAL do site, medida no navegador:
   faixa cheia 1.088px · coluna 728 · lateral 300 · celular 358 úteis.
   O desenho (fundo tracejado, rótulo) é o mesmo `.ad-ph` de sempre — aqui só
   entram TAMANHO e comportamento.

   ⛔ `.ad-ph` tem `width:100%`; por isso toda regra abaixo fixa a largura e
      limita com `max-width:100%`, senão a zona estoura a coluna no celular.
   ========================================================================== */
.adz{ margin:20px auto; max-width:100%; }
.adz .sz-m{ display:none; }   /* o marcador mostra a medida da tela em que está */
.adz[data-z="1"]{ width:970px;  height:250px; }
.adz[data-z="2"]{ width:970px;  height:90px;  }
.adz[data-z="3"]{ width:728px;  height:90px;  }
.adz[data-z="4"]{ width:300px;  height:250px; }
.adz[data-z="5"]{ width:300px;  height:600px; }
.adz[data-z="6"]{ width:336px;  height:280px; }

/* Duas zonas no mesmo ponto: lado a lado no computador, empilhadas no celular.
   É o arranjo do meio da matéria, escolhido pelo Vinicius em 14/09 a partir do
   Liberal — que faz igual, com três. */
.adz-fila{ margin:24px 0; }
.adz-fila .adz-rot{ display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--meta); }
.adz-fila .adz-rot::before,.adz-fila .adz-rot::after{ content:""; flex:1; height:1px; background:var(--line); }
.adz-linha{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.adz-linha .adz{ margin:0; }

/* A âncora: presa ao pé da tela, só no celular. */
.adz-ancora{ display:none; }
@media (max-width:979.98px){
  .adz .sz-d{ display:none; }
  .adz .sz-m{ display:inline; }
  .adz[data-z="1"]{ width:320px; height:100px; }
  .adz[data-z="2"],.adz[data-z="3"]{ width:320px; height:50px; }
  .adz[data-z="5"]{ width:300px; height:250px; }   /* 600px de altura seria uma tela inteira */
  .adz-fila{ margin:20px 0; }
  /* ⛔ A FILA DO CELULAR ESTICA O QUE ESTÁ DENTRO DELA. A regra de 13/09
     `body.home .grid>.rio>*,body.home .grid>aside>*{width:auto;margin-left:0;margin-right:0}`
     tem peso (0,3,1) e apagava a medida das zonas: medido no ar, o Adzone 3 saía com 358px
     em vez de 320. Estas duas linhas devolvem a medida exata, com peso maior (0,4,1). */
  body.home .grid > .rio > .adz, body.home .grid > aside > .adz{ margin-left:auto; margin-right:auto; }
  body.home .grid > .rio > .adz[data-z="3"]{ width:320px; }
  body.home .grid > aside > .adz[data-z="4"],
  body.home .grid > aside > .adz[data-z="5"]{ width:300px; }

  .adz-ancora{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    width:auto; height:50px; margin:0; border-radius:0; border-left:0; border-right:0;
    box-shadow:0 -2px 10px rgba(0,0,0,.14); }
  body{ padding-bottom:50px; }   /* o respiro para nada morrer embaixo da âncora */
}


/* ===== PÁGINA ANUNCIE, zerada em 14/09/2026 =====
   A página perdeu o Mídia Kit inteiro e ficou só com a conversa: um bloco central
   com os dois caminhos de contato. Reaproveita `.btn-nw` e `.btn-wa`, que já vestem
   os botões da denúncia e da newsletter — nada de botão novo só para esta página. */
.anuncie-cta{ background:var(--card); border:1px solid var(--line-card); border-radius:14px;
  padding:34px 28px; margin:26px auto 40px; max-width:620px; text-align:center; }
.anuncie-cta h2{ font-size:26px; margin:0 0 8px; color:var(--ink); }
.anuncie-cta p{ color:var(--body); margin:0 0 18px; }
.anuncie-vias{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.anuncie-vias .btn-nw{ min-width:250px; }
.anuncie-end{ font-size:13px; color:var(--meta); margin:20px 0 0 !important; }
@media (max-width:520px){
  .anuncie-cta{ padding:26px 18px; }
  .anuncie-vias .btn-nw{ min-width:0; width:100%; }
}

/* ── INDICADORES (07/10/2026) — dentro do bloco de cotações ──────────────────
   Mesma linha (.cot) e mesma cor de identidade (--cambio) do câmbio, para
   parecer um bloco só; separados por um subtítulo pequeno. O valor à direita
   ganha uma segunda linha miúda (ao ano / mês de referência e 12 meses). */
.ind{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ind-tit{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cambio);margin:0 0 2px}
.ind-v{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.ind-v small{font-size:10.5px;font-weight:600;color:var(--meta);margin-top:1px}

/* ── BUSCA COM SUGESTÃO AO DIGITAR (07/10/2026) ──────────────────────────────
   A lista nasce dentro de .bs-caixa (o JS envolve o campo), então alinha com o
   campo e não com a barra inteira. Cartão claro/escuro pelas variáveis do tema;
   pílula e ícone de vídeo são os mesmos dos cards. */
.bs-caixa{position:relative;flex:1;display:flex;min-width:0}
.bs-caixa input{width:100%}
.bs-lista{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--card);border:1px solid var(--line-card);border-radius:10px;
  box-shadow:var(--shadow-hover);overflow:hidden;max-height:min(70vh,560px);overflow-y:auto}
.bs-item{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.bs-item:hover,.bs-item.on,.bs-todos:hover,.bs-todos.on,.bs-vazio.on{background:var(--surface)}
.bs-foto{width:64px;height:48px;border-radius:6px;object-fit:cover;flex:none;background:var(--line)}
.bs-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.bs-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bs-data{font-size:11px;color:var(--meta);font-weight:600}
.bs-tit{font-size:14px;font-weight:800;line-height:1.3;color:var(--link)}
.bs-todos{display:block;padding:11px 12px;font-size:13px;font-weight:800;color:var(--link);
  text-decoration:none;text-align:center}
.bs-vazio{display:flex;flex-direction:column;gap:4px;padding:14px 14px;text-decoration:none;color:var(--ink)}
.bs-vazio strong{font-size:14px}
.bs-vazio span{font-size:12.5px;color:var(--link);font-weight:700}
@media (max-width:640px){
  /* no celular o campo é estreito (ícone e botão dos lados): a lista ancora na
     BARRA inteira, com a mesma margem lateral dela */
  .searchbar-in{position:relative}
  .bs-caixa{position:static}
  .bs-lista{top:calc(100% - 4px);left:12px;right:12px}
  .bs-foto{width:56px;height:42px}
  .bs-tit{font-size:13.5px}
}

/* ── PÁGINA DE PREVISÃO DO TEMPO (07/10/2026, item 4a) ───────────────────────
   Mesma família da página de loterias (cartões em grade, tarja no topo) na cor
   de identidade do tempo (--sol, par claro/escuro). Os turnos reaproveitam o
   `.tempo-turnos` do bloco da lateral, um pouco maiores. */
.tempo-todos{display:block;text-align:center;margin-top:10px;padding:8px;
  font-size:13px;font-weight:700;color:var(--sol);text-decoration:none;
  border:1px solid var(--sol);border-radius:5px;transition:background .15s,color .15s}
.tempo-todos:hover,.tempo-todos:focus-visible{background:var(--sol);color:var(--card)}
.prev-atalhos{display:flex;flex-wrap:wrap;gap:8px}
.prev-atalhos a{font-size:13px;font-weight:700;color:var(--sol);text-decoration:none;
  border:1px solid var(--sol);border-radius:999px;padding:5px 12px}
.prev-atalhos a:hover,.prev-atalhos a:focus-visible{background:var(--sol);color:var(--card)}
.prev-grade{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.prev-cart{background:var(--card);border:1px solid var(--line-card);border-radius:8px;
  padding:16px 18px;display:flex;flex-direction:column;gap:9px;
  border-top:3px solid var(--sol);scroll-margin-top:96px}
.prev-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prev-topo h2{font-size:19px;font-weight:800;color:var(--ink)}
.prev-sua{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--card);background:var(--sol);padding:3px 8px;border-radius:3px}
.prev-temp .max{font-size:34px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
.prev-temp .min{font-size:18px;font-weight:700;color:var(--meta);margin-left:4px}
.prev-cond{font-size:14px;font-weight:600;color:var(--body)}
/* a frase da IA: destacada, mas com a mesma barra lateral do "Saiu na região"
   das loterias — é texto do jornal sobre o dado, não o dado */
.prev-texto{font-size:15px;line-height:1.5;color:var(--ink);background:var(--surface);
  border-left:3px solid var(--sol);padding:8px 11px;border-radius:0 4px 4px 0}
.prev-turnos{margin-top:2px}
.prev-turnos b{font-size:11px}
.prev-turnos span,.prev-turnos i{font-size:13px}
.prev-extra{font-size:12.5px;color:var(--meta)}
.prev-prox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.prev-prox div{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--meta)}
.prev-prox b{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--sol)}
.prev-prox i{font-style:normal;font-weight:800;color:var(--ink)}
.prev-prox small{font-size:11px;color:var(--link);font-weight:700}
@media (max-width:520px){
  .prev-grade{grid-template-columns:1fr}
}

/* nota da IA no "Saiu na região" (07/10/2026) — mesma voz da frase da previsão */
.lot-aqui-nota{font-size:15px;line-height:1.5;color:var(--ink);background:var(--surface);
  border-left:3px solid var(--loteria);padding:8px 11px;border-radius:0 4px 4px 0}
.lot-aqui-ia{font-size:11.5px;color:var(--meta);margin-top:2px}

/* ── CHAPÉU (07/10/2026) ───────────────────────────────────────────────────
   Texto livre do editor, acima do título — na matéria e nos cards. Discreto de
   propósito (ink a 72%): é contexto, não etiqueta; a cor fica com a pílula da
   editoria/cidade, que vem logo acima. */
.chapeu-txt{display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);opacity:.72;margin:2px 0 4px;line-height:1.3}
.art-head .chapeu-txt{font-size:14px;margin:12px 0 6px;opacity:.8}

/* vídeo: CAPA com play até o clique (08/10/2026) — mesmo retângulo 16:9 do player */
.td-video-capa .td-play{position:absolute;inset:0;display:block;cursor:pointer}
.td-video-capa .td-play img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.td-play-ic{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);
  transition:transform .15s;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.td-play-ic svg{width:100%;height:100%;display:block}
.td-video-capa .td-play:hover .td-play-ic,.td-video-capa .td-play:focus-visible .td-play-ic{transform:translate(-50%,-50%) scale(1.08)}
.td-video-capa .td-play:focus-visible{outline:3px solid var(--link);outline-offset:-3px}

/* ── FOTO DO PERFIL (08/10/2026) ─────────────────────────────────────────────
   No mesmo círculo das iniciais; fundo claro por trás de foto recortada (PNG
   transparente). Rosto um pouco acima do centro: é como as fotos vêm. */
.avatar.com-foto{background:var(--surface);overflow:hidden;padding:0}
.avatar.com-foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;border-radius:0}
.lst-head.com-foto{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}
.lst-head.com-foto > :not(.lh-foto){grid-column:2}
.lh-foto{grid-row:1 / span 3;width:104px;height:104px;border-radius:50%;object-fit:cover;
  object-position:center 20%;background:var(--surface)}
@media (max-width:520px){ .lh-foto{width:76px;height:76px} .lst-head.com-foto{column-gap:14px} }

/* ── OUÇA ESTA MATÉRIA (08/10/2026) ───────────────────────────────────────
   Player nativo do navegador (funciona com teclado, leitor de tela e no
   celular sem uma linha de JS); a caixa só dá o rótulo e o aviso de IA. */
.td-ouvir{background:var(--card);border:1px solid var(--line-card);border-radius:12px;padding:12px 14px;margin:0 0 18px}
.td-ouvir-cab{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.td-ouvir-cab svg{width:18px;height:18px;fill:var(--link);flex:none}
.td-ouvir-cab span{color:var(--meta);font-size:12.5px}
.td-ouvir audio{width:100%;height:40px;display:block}
.td-ouvir-ia{font-size:11px;color:var(--meta);margin:6px 0 0}


/* Folheador do site antigo -> PDF no leitor do navegador (partes/folheador.php, 11/10/2026).
   Celular: só o botão (o Chrome do Android não mostra PDF embutido). */
.td-pdf{margin:18px 0}
.td-pdf object{display:none;width:100%;height:80vh;min-height:520px;border:1px solid #ddd;border-radius:6px;background:#f4f4f4}
.td-pdf .td-pdf-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.td-pdf .td-pdf-acoes a{display:inline-block;padding:12px 18px;border-radius:6px;font-weight:700;text-decoration:none}
.td-pdf .abrir{background:#0F3090;color:#fff}
.td-pdf .baixar{border:1px solid #0F3090;color:#0F3090}
@media (min-width:768px){.td-pdf object{display:block}}

/* Publicações legais (partes/publicidade-legal.php, 11/10/2026) */
.edt h4 a{color:inherit;text-decoration:none}
.edt h4 a:hover{text-decoration:underline}
.edt-vazio{padding:18px 0;color:var(--meta)}
.pl-paginas{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.pl-paginas .page-numbers{padding:6px 11px;border:1px solid var(--line-card);border-radius:8px;text-decoration:none;color:var(--ink)}
.pl-paginas .current{background:#7A5AF5;color:#fff;border-color:#7A5AF5}
.pl-acervo{margin:14px 0 0;font-size:13.5px;color:var(--meta)}
.pl-acervo a{color:#7A5AF5;font-weight:700}

/* Acervo (acervo.inf.br) — header-acervo.php, 11/10/2026 */
.acervo-tag{margin-left:12px;padding:3px 8px;border:1px solid rgba(255,255,255,.55);border-radius:4px;color:#fff;font-size:11px;font-weight:800;letter-spacing:.14em}
.acervo-volta{color:#fff;font-size:13px;font-weight:600;text-decoration:none;margin-right:10px;white-space:nowrap}
@media(max-width:560px){.acervo-volta{display:none}}
.pl-tipo{display:inline-block;background:#7A5AF5;color:#fff;padding:4px 9px;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.acervo-hero h1,.acervo-hero .ph-kick{color:#fff}