/*
Theme Name: POST TV — Home Modular
Theme URI: https://post.tv.br
Author: POST TV
Description: Variante do tema POST TV com home modular — a redação escolhe e reordena blocos da home pelo Personalizador. Baseado no tema posttv; use este só quando quiser a home configurável.
Version: 1.0.0-modular
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: posttv
Tags: news, magazine, dark, custom-menu, featured-images
*/

/* ============================================================
   Fontes — Roboto (fonte de apoio da marca, licença Apache 2.0),
   auto-hospedada: sem CDN externo, melhor performance e LGPD.
   A Milligram (fonte principal da marca) é comercial e exigiria
   licença de webfont — usar só em peças gráficas, não no site.
   ============================================================ */
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Roboto";src:url("assets/fonts/Roboto-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap;}

:root{
  /* paleta oficial POST TV */
  --void:#000000;
  --panel:#141414;
  --panel-raised:#1C1C1C;
  --panel-2:#202020;
  --line:rgba(255,255,255,.10);
  --ink:#F0F0F0;
  --ink-soft:#9A9A9A;
  --ink-mute:#6E6E6E;
  --blue:#4541E0;
  --blue-deep:#332FB0;
  --orange:#FF7834;
  --orange-deep:#E85F1C;
  --lime:#B1DB4B;

  --sans:"Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Site inteiro em Roboto (pedido do cliente): --mono e --serif viram
     apelidos de --sans, sem precisar trocar os usos um a um. */
  --mono:var(--sans);
  --serif:var(--sans);

  color-scheme: dark;
}

*{box-sizing:border-box;}
body{margin:0; background:var(--void); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
h1,h2,h3,h4{margin:0; font-weight:900; letter-spacing:-.02em; text-wrap:balance;}
p{margin:0;}
ul{margin:0; padding:0;}
:focus-visible{outline:2px solid var(--lime); outline-offset:2px;}
.wrap{max-width:1220px; margin:0 auto; padding:0 24px;}
.screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;}
.skip-link:focus{position:fixed; top:10px; left:10px; z-index:100; background:var(--orange); color:#1A0D04; padding:10px 16px; border-radius:6px; font-weight:700;}

/* ---------- cabeçalho ---------- */
.masthead{position:sticky; top:0; z-index:40; background:rgba(0,0,0,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.masthead__brandrow{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px;}
.site-logo img{height:44px; width:auto;}
.site-logo .site-title{font-size:1.4rem; font-weight:900; text-decoration:none;}

/* Banco de canais em destaque (estilo mesa de transmissão) */
.channels{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.chbtn{--ch:var(--orange); display:flex; align-items:center; gap:9px; background:var(--panel-raised); border:1px solid var(--line); border-radius:10px; padding:6px 13px 6px 6px; text-decoration:none; color:var(--ink); transition:border-color .18s ease, background .18s ease, transform .18s ease;}
.chbtn:hover{border-color:var(--ch); background:var(--panel-2);}
.chbtn__ic{position:relative; width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ch); transition:transform .18s ease;}
.chbtn:hover .chbtn__ic{transform:translateY(-1px);}
.chbtn__ic svg{width:16px; height:16px; fill:#1A0D04;}
.chbtn__tx{display:flex; flex-direction:column; line-height:1.05;}
.chbtn__tx b{font-size:.82rem; font-weight:800; letter-spacing:-.01em;}
.chbtn__tx i{font-family:var(--mono); font-style:normal; font-size:.58rem; color:var(--ink-soft); letter-spacing:.03em; margin-top:2px; text-transform:uppercase;}
.chbtn--live{--ch:var(--orange);}
.chbtn--news{--ch:var(--blue);}
.chbtn--news .chbtn__ic svg{fill:#fff;}
.chbtn--pod{--ch:var(--lime);}
.chbtn--ig{--ch:#C13584;}
.chbtn--ig .chbtn__ic{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF);}
.chbtn--ig .chbtn__ic svg{fill:#fff;}
.chbtn--live .chbtn__pulse{position:absolute; inset:-3px; border-radius:11px; border:2px solid var(--orange); opacity:0; animation:chpulse 1.8s ease-out infinite;}
@keyframes chpulse{0%{transform:scale(.9); opacity:.7} 100%{transform:scale(1.28); opacity:0}}
@media (prefers-reduced-motion:reduce){ .chbtn--live .chbtn__pulse{animation:none;} }
@media (max-width:1120px){ .chbtn__tx i{display:none;} }
@media (max-width:860px){ .chbtn__tx{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);} .chbtn{padding:6px;} }

.mainnav{border-top:1px solid var(--line); display:flex; align-items:stretch; max-width:1220px; margin:0 auto;}
.mainnav ul{display:flex; gap:26px; padding:12px 24px; overflow-x:auto; list-style:none; font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; flex:1; min-width:0; scrollbar-width:none;}
/* Barra de rolagem escondida, como na faixa de cidades: o desvanecimento à
   direita (abaixo, no mobile) é que avisa que a lista continua. */
.mainnav ul::-webkit-scrollbar{display:none;}
.mainnav a{white-space:nowrap; text-decoration:none; color:var(--ink-soft);}
.mainnav a:hover, .mainnav .current-menu-item > a{color:var(--orange);}

/* Ícone de busca: fixo à direita do menu de editorias, não rola com a lista.
   É um link para /?s=, não um botão: abria um modal até 13/08/2026. */
.mainnav__busca{flex-shrink:0; display:flex; align-items:center; justify-content:center; width:44px; border:none; border-left:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;}
.mainnav__busca:hover{color:var(--orange);}
.mainnav__busca svg{width:17px; height:17px; fill:currentColor;}

/* ---------- formulário de busca (página de resultados) ---------- */
/* Faixa de cima: o texto de busca com "onde procurar" ao lado, mesma
   pergunta ("o que" + "onde"). */
.ptv-busca-form__topo{display:flex; flex-wrap:wrap; gap:10px;}
.ptv-busca-form__campo{flex:1; min-width:220px; padding:13px 16px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-size:1rem;}
.ptv-busca-form__campo:focus{outline:2px solid var(--orange); outline-offset:1px;}
.ptv-busca-form__escopo{flex:0 1 200px;}
/* Segunda faixa: editoria, localidade, colunista, datas, ordem e por fim o
   botão — sem filete separando, as duas faixas são um formulário só. */
.ptv-busca-form__filtros{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px;}
.ptv-busca-form__select{flex:1; min-width:140px; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font-size:.84rem;}
.ptv-busca-form__botao{flex-shrink:0; padding:9px 22px; border-radius:8px; border:none; background:var(--orange); color:#1A0D04; font-weight:700; font-size:.86rem; cursor:pointer;}
.ptv-busca-form__botao:hover{background:var(--orange-deep);}
.ptv-busca-form__data{flex:1; min-width:150px; display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--ink-soft);}
.ptv-busca-form__data span{flex-shrink:0;}
.ptv-busca-form__data .ptv-busca-form__select{min-width:0;}
/* Contagem de resultados: o número é a informação, o resto é moldura. */
.ptv-busca-conta{margin:0 0 18px; font-size:.86rem; color:var(--ink-soft);}
.ptv-busca-conta strong{color:var(--ink); font-variant-numeric:tabular-nums;}
.ptv-busca-conta--dica{max-width:70ch;}

/* Filtros ativos. Cada um é um link que REMOVE aquele filtro — sem isso, um
   filtro esquecido de uma busca anterior parece "não achou nada", e buscar de
   novo não resolve porque o filtro continua na URL. */
.ptv-busca-ativos{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px;}
.ptv-busca-ativos__rotulo{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute);}
.ptv-busca-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); font-size:.78rem; color:var(--ink); text-decoration:none;}
.ptv-busca-chip:hover{border-color:var(--orange);}
.ptv-busca-chip__rotulo{color:var(--ink-mute); font-size:.7rem;}
.ptv-busca-chip__valor{font-weight:700;}
.ptv-busca-chip__x{color:var(--ink-mute); font-size:1rem; line-height:1;}
.ptv-busca-chip:hover .ptv-busca-chip__x{color:var(--orange);}
.ptv-busca-ativos__limpar{font-size:.76rem; color:var(--ink-soft); text-decoration:underline;}

/* Distribuição por editoria: mostra onde os resultados estão e leva até lá. */
.ptv-busca-facetas{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px;}
.ptv-busca-facetas__rotulo{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute);}
.ptv-busca-faceta{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:8px; border:1px solid var(--line); font-size:.78rem; color:var(--ink-soft); text-decoration:none;}
.ptv-busca-faceta:hover{border-color:var(--orange); color:var(--ink);}
.ptv-busca-faceta b{color:var(--ink); font-variant-numeric:tabular-nums;}

/* O formulário ocupa toda a largura do conteúdo. Já teve um teto de 760px,
   herdado de quando ele morava num modal estreito; na página de resultados
   aquilo deixava o campo de busca menor que a grade de matérias logo abaixo. */
.wrap > .ptv-busca-form{margin:0 0 28px;}

.citystrip{background:var(--panel); border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none;}
.citystrip::-webkit-scrollbar{display:none;}
.citystrip ul{display:flex; gap:8px; padding:9px 24px; list-style:none; width:max-content; margin:0 auto; max-width:1220px;}
.citystrip a{font-family:var(--mono); font-size:.7rem; white-space:nowrap; padding:5px 11px; border-radius:5px; border:1px solid var(--line); color:var(--ink-soft); text-decoration:none; display:block;}
.citystrip a:hover{border-color:var(--lime); color:var(--lime);}
.citystrip .current-menu-item a{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700;}

/* Cabeçalho no celular: compacto, e os 4 canais numa linha só.
   Sem isto o Instagram quebra para uma segunda linha e o cabeçalho come
   180px de altura antes da primeira manchete. */
@media (max-width:700px){
  .masthead__brandrow{gap:10px; padding:10px 14px;}
  .channels{flex-wrap:nowrap; gap:6px;}
  .chbtn{padding:5px;}
  .chbtn__ic{width:26px; height:26px; border-radius:7px;}
  .chbtn__ic svg{width:14px; height:14px;}
  .mainnav ul{gap:20px; padding:11px 14px;}
  /* Desvanece a borda direita: é o que avisa que o menu continua para o lado,
     já que a barra de rolagem está escondida. */
  .mainnav ul{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
              mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .citystrip ul{padding:9px 14px;}
}

/* ---------- publicidade ----------
   Classes com prefixo neutro "ptv-" (não "ad-"): nomes com "ad" são
   escondidos por filtros cosméticos de ad-block (EasyList), o que fazia
   os banners de patrocinadores diretos sumirem para quem usa bloqueador. */
.ptv-slot{display:block; margin:20px auto; max-width:970px; position:relative;}
.ptv-slot img{margin:0 auto; border-radius:8px;}
.ptv-slot--mid{margin:36px auto;}
.ptv-slot--article{margin:28px auto; max-width:640px;}
.ptv-slot .widget{margin:0;}
.ptv-slot .widget-title{display:none;}

/* Dois formatos-padrão de criativo. O tamanho em px é a arte enviada;
   o espaço mantém a proporção e escala para caber (inclusive no mobile). */
.ptv-slot--banner{aspect-ratio:1080/300; overflow:hidden;}                 /* 1080 × 300 */
.ptv-slot--square{aspect-ratio:1/1; max-width:400px; margin-left:auto; margin-right:auto;} /* 1080 × 1080 */
.ptv-slot--wide{aspect-ratio:2/1; max-width:500px; margin-left:auto; margin-right:auto;} /* 500 × 250 */
.ptv-slot--wide > a{display:block; width:100%; height:100%;}
.ptv-slot--wide img{width:100%; height:100%; object-fit:cover; border-radius:8px; margin:0;}
.ptv-slot--wide .ptv-slot__code{width:100%; height:100%;}
.ptv-slot--wide .ptv-slot__empty{height:100%; min-height:0; flex-direction:row; gap:12px; padding:12px;}
.ptv-slot--banner > a,
.ptv-slot--square > a{display:block; width:100%; height:100%;}
.ptv-slot--banner img,
.ptv-slot--square img{width:100%; height:100%; object-fit:cover; border-radius:8px; margin:0;}
/* Código de ad server / agência: centraliza e limita ao espaço. */
.ptv-slot__code{max-width:100%; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.ptv-slot__code img,.ptv-slot__code iframe{max-width:100%; height:auto; border-radius:8px;}

/* Banner da casa cadastrado no Personalizador: peça de verdade, ocupa o espaço
   inteiro como um anúncio pago ocuparia. */
.ptv-slot__casa{display:block; width:100%; height:100%;}
.ptv-slot__casa img{width:100%; height:100%; object-fit:cover; border-radius:8px; margin:0; display:block;}

/* Convite montado pelo tema, quando não há banner da casa.
   Borda contínua e não tracejada de propósito: tracejado lê como "faltou
   alguma coisa aqui", e este espaço é uma oferta, não um buraco. */
/* Empilhado e centrado nos dois eixos, em todos os formatos.
   Já foi `flex-direction:row` com `flex-wrap` no deitado, e não funcionava:
   `flex-shrink` vale 1 por padrão, então em vez de quebrar a linha o navegador
   encolhia os itens até tudo caber numa linha só, encostado à esquerda. Coluna
   não tem esse modo de falhar. */
.ptv-slot__empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; height:100%; min-height:100px; border:1px solid var(--line); border-radius:8px; background:var(--panel); text-align:center; padding:24px; text-decoration:none;}
.ptv-slot__empty:hover{border-color:var(--orange);}
/* `flex:0 0 auto` explícito: nenhum dos três encolhe nem cresce, cada um ocupa
   a própria linha com o tamanho que o conteúdo pede. */
.ptv-slot__eyebrow{flex:0 0 auto; font-family:var(--mono); font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute);}
.ptv-slot__chamada{flex:0 0 auto; font-family:var(--sans); font-weight:700; line-height:1.2; color:var(--ink); text-wrap:balance; max-width:40ch;}
.ptv-slot__botao{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--orange); color:#fff; font-family:var(--sans); font-size:.8rem; font-weight:700; padding:10px 20px; border-radius:999px; white-space:nowrap;}
.ptv-slot__empty:hover .ptv-slot__botao{background:var(--orange-deep);}
.ptv-slot__empty:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}

/* O código de terceiros também preenche a proporção do formato. */
.ptv-slot--banner .ptv-slot__code,
.ptv-slot--square .ptv-slot__code{width:100%; height:100%;}

/* ⚠️ O `display` precisa ser reafirmado aqui, com seletor mais forte.
   `.ptv-slot--banner > a` é (0,1,1) e define `display:block` para o link do
   anúncio pago ocupar o espaço; `.ptv-slot__empty` é (0,1,0) e perde. Como o
   convite também é um `<a>`, ele virava bloco: as propriedades de flex ficavam
   inertes e os três itens saíam numa linha só, encostados no topo.
   Diagnosticado em 13/08/2026 lendo o `getComputedStyle` no navegador — pelo
   HTML e pelo CSS-fonte o problema é invisível, porque as duas regras estão
   corretas isoladamente. */
.ptv-slot--banner .ptv-slot__empty,
.ptv-slot--square .ptv-slot__empty,
.ptv-slot--wide .ptv-slot__empty{display:flex;}

/* Cada formato tem altura própria, então a chamada e os respiros mudam de
   escala — é o que faz o conteúdo ocupar a caixa em vez de boiar nela.
   Deitado: 1080×300, sobra altura; a chamada pode ser grande. */
.ptv-slot--banner .ptv-slot__empty{gap:18px;}
.ptv-slot--banner .ptv-slot__chamada{font-size:1.75rem; max-width:26ch;}
/* Quadrado: 1080×1080, e na grade de quatro fica estreito. */
.ptv-slot--square .ptv-slot__empty{gap:14px;}
.ptv-slot--square .ptv-slot__chamada{font-size:1.15rem; max-width:18ch;}
/* Espaço curto (banner de matéria, 300×100): só o essencial, sem apertar. */
.ptv-slot--article .ptv-slot__empty{gap:8px; padding:12px;}
.ptv-slot--article .ptv-slot__eyebrow{display:none;}
.ptv-slot--article .ptv-slot__chamada{font-size:.95rem;}
/* Mobile: banners e quadrados ocupam a largura disponível, sem estourar. */
@media (max-width:700px){
  .ptv-slot{max-width:100%;}
  .ptv-slot--square{max-width:320px;}
  /* O deitado mantém a proporção 1080×300, então numa tela de 360px ele tem
     100px de altura — não cabem três linhas. A palavrinha de cima sai e a
     chamada encolhe; o botão continua, que é o que importa clicar. */
  .ptv-slot--banner .ptv-slot__empty{gap:8px; padding:12px;}
  .ptv-slot--banner .ptv-slot__eyebrow{display:none;}
  .ptv-slot--banner .ptv-slot__chamada{font-size:1rem; max-width:30ch;}
  .ptv-slot__botao{padding:8px 15px; font-size:.74rem;}
}

/* ---------- grade de 4 anúncios quadrados (home e matérias) ---------- */
.ptv-quad{max-width:1220px; margin:28px auto;}
.ptv-quad__grade{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.ptv-quad__grade .ptv-slot--square{max-width:none; margin:0;}
@media (max-width:860px){ .ptv-quad__grade{grid-template-columns:repeat(2,1fr);} }
/* Continua em DUAS colunas no celular estreito, só que menores (pedido do
   cliente, 2026-07-30). Empilhar em coluna única fazia cada anúncio ocupar
   uma tela inteira e empurrava a matéria para baixo. */
@media (max-width:460px){ .ptv-quad__grade{gap:10px;} }

/* Grade genérica para posttv_ad() com por_grupo > 1 (unificação Task 9).
   O número de colunas vem de --ptv-por-grupo, que posttv_ad() grava com a
   quantidade escolhida na caixa (Caixas de anúncio). É o mesmo em qualquer
   largura: o conjunto vendido (ex.: 4 quadrados) não pode quebrar em linhas
   no celular, só encolher (issue #86). */
.ptv-slot-wrap{max-width:1220px; margin:28px auto;}
.ptv-slot-grade{display:grid; grid-template-columns:repeat(var(--ptv-por-grupo,4),minmax(0,1fr)); gap:16px;}
.ptv-slot-grade .ptv-slot--square,
.ptv-slot-grade .ptv-slot--wide,
.ptv-slot-grade .ptv-slot--banner{max-width:none; margin:0;}
@media (max-width:700px){
  .ptv-slot-grade{gap:6px;}
  /* Cada quadrado fica com ~80px no celular: o convite desenhado (quando a
     caixa está vaga e não há banner da casa) fica só com o botão. */
  .ptv-slot-grade .ptv-slot__empty{gap:0; padding:4px;}
  .ptv-slot-grade .ptv-slot__eyebrow,
  .ptv-slot-grade .ptv-slot__chamada{display:none;}
  .ptv-slot-grade .ptv-slot__botao{padding:5px 7px; font-size:.58rem; white-space:normal; text-align:center; line-height:1.2;}
  .ptv-slot-grade img{border-radius:4px;}
}

/* Carrossel genérico: alterna grupos de conteúdo (hoje só a grade de
   quadrados usa isto, quando há mais de 4 anunciantes no ar ao mesmo
   tempo — ver posttv_ad_grade_quadrados()). Troca discreta (display),
   sem depender de altura fixa do item, então funciona com qualquer
   conteúdo dentro — não só banner 1080×300 como antes. */
.ptv-carrossel{position:relative;}
.ptv-carrossel__trilha{position:relative;}
/* Esconde os grupos fora de foco. O seletor precisa de 3 classes de
   especificidade: a grade de alguns blocos (ex.: .ptv-adcar--quad
   .ptv-adcar__grade) tem 2 classes e, empatando, venceria por carregar depois
   — deixando todos os grupos empilhados em vez de só o ativo. */
.ptv-carrossel .ptv-carrossel__item:not(.is-ativo){display:none;}
/* Sem "display:block" aqui pro item ativo — ele volta a valer o display da
   própria classe de conteúdo (ex.: .ptv-quad__grade{display:grid}). Um
   display:block genérico tem mais especificidade que .ptv-quad__grade
   sozinho e vencia, derrubando a grade de 4 colunas pra bloco empilhado
   (100% de largura) sempre que virava carrossel (>4 anúncios). */
.ptv-carrossel__pontos{display:flex; justify-content:center; gap:6px; margin-top:12px;}
.ptv-carrossel__ponto{width:6px; height:6px; padding:0; border:none; border-radius:50%; background:var(--ink-mute); cursor:pointer;}
.ptv-carrossel__ponto.is-ativo{background:var(--orange);}

/* ---------- cartões / mídia ---------- */
.photo{position:relative; border-radius:6px; overflow:hidden; background:var(--panel-raised); aspect-ratio:16/9;}
.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.photo--placeholder{background:linear-gradient(150deg,var(--blue),#0B0A2E);}

.tag{display:inline-block; font-size:.62rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; padding:4px 8px; border-radius:3px; color:#fff; background:var(--orange-deep); text-decoration:none;}

.byline{font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- hero da home ---------- */
.hero{padding:28px 0 0;}
.hero__grid{display:grid; grid-template-columns:1.6fr 1fr; gap:22px;}
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr;} }
.lead{display:block; position:relative; text-decoration:none; color:inherit;}
.lead .photo{aspect-ratio:16/9;}
/* Ancorada no .lead (e não mais dentro da .photo, que corta o que transborda):
   no desktop segue sobreposta à imagem, exatamente como antes. */
.lead__cap{position:absolute; inset:auto 0 0 0; padding:20px 22px 18px; background:linear-gradient(to top, rgba(0,0,0,.9) 10%, transparent 90%); z-index:1;}
.lead__cap h2{font-size:1.7rem; line-height:1.15; color:#fff; margin-top:10px;}
.lead__cap .byline{color:#D8D8D6;}

/* 4 secundárias distribuídas ao longo da altura da matéria grande (a coluna
   estica no grid até a altura da .lead; o space-between espalha as 4). */
.side-stack{display:flex; flex-direction:column; justify-content:space-between; gap:12px;}
.mini{display:flex; gap:12px; text-decoration:none; color:inherit; align-items:flex-start;}
.mini .photo{width:104px; flex-shrink:0; aspect-ratio:4/3; border-radius:6px;}
.mini h3{font-size:.88rem; line-height:1.26; font-weight:700; margin-top:6px;}
/* No mobile o hero vira 1 coluna; sem altura pra distribuir, as 4 só empilham. */
@media (max-width:900px){ .side-stack{justify-content:flex-start; gap:14px;} }

/* ---------- grades ---------- */
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin:36px 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.section-head h2{font-size:.86rem; text-transform:uppercase; letter-spacing:.1em;}
.section-head h2 .mk{color:var(--orange);}
.section-head a{font-family:var(--mono); font-size:.7rem; color:var(--lime); text-decoration:none;}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:860px){ .grid3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid3{grid-template-columns:1fr;} }
.card{text-decoration:none; color:inherit; display:flex; flex-direction:column;}
.card h3{font-size:.98rem; margin-top:11px; line-height:1.32; font-weight:700;}
.card .tag{margin-top:11px; width:fit-content;}
.card__excerpt{color:var(--ink-soft); font-size:.82rem; margin-top:6px; line-height:1.5;}

/* ---------- avatar de colunista (componente único, 3 tamanhos) ---------- */
/* Mesma forma, mesmo recorte (posttv-colunista, ver functions.php) e mesmo
   monograma nos 4 lugares onde a foto de um colunista aparece — home,
   vitrine, barra lateral da matéria, página dele — só o tamanho muda,
   conforme o espaço disponível. Desenho de 09/09/2026: antes disso os 4
   lugares divergiam em forma, recorte, ajuste da imagem e até em quantas
   letras o monograma mostrava. Fica em style.css (não em colunistas.css)
   porque é o único dos dois carregado em toda página, e este componente
   aparece fora das páginas de colunista também (home, matéria). */
.ptv-avatar{
  --ptv-avatar-d:120px;
  width:var(--ptv-avatar-d);
  height:var(--ptv-avatar-d);
  border-radius:50%;
  object-fit:cover;
  /* Colunista costuma ser foto de meio-corpo — cortar pelo centro corta a
     testa. O recorte de origem já ancora no topo (functions.php); isto é
     o mesmo ajuste para quando o navegador reamostra o cover. */
  object-position:50% 20%;
  background:var(--panel-raised);
  display:block;
  flex-shrink:0;
}
.ptv-avatar--s{--ptv-avatar-d:76px;}
.ptv-avatar--m{--ptv-avatar-d:120px;}
.ptv-avatar--l{--ptv-avatar-d:160px;}

/* Sem foto: duas iniciais (posttv_colunista_iniciais()) sobre o degradê da
   marca. A fonte deriva do diâmetro em vez de um número por lugar. */
.ptv-avatar--ini{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(150deg,var(--blue),#0B0A2E);
  color:#fff;
  font-weight:700;
  letter-spacing:-.02em;
  font-size:calc(var(--ptv-avatar-d) * .3);
}

/* ---------- colunistas (bloco da home) ---------- */
.columnists{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:860px){ .columnists{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .columnists{grid-template-columns:1fr;} }
.columnist{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px;}
.columnist:hover{border-color:var(--orange);}
.columnist .ptv-avatar{margin-bottom:6px;}
.columnist__name{font-weight:700; font-size:.94rem;}
.columnist__beat{font-family:var(--mono); font-size:.64rem; color:var(--orange); text-transform:uppercase; letter-spacing:.06em;}
.columnist__latest{font-size:.82rem; color:var(--ink-soft); line-height:1.4; margin-top:2px;}

/* ---------- matéria (single) ---------- */
.breadcrumb{font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); margin:24px 0 18px;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb .sep{margin:0 6px; opacity:.5;}

.article-layout{display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:start; padding-bottom:40px;}
/* Item de grid tem min-width:auto por padrão: sem isto o <article> não encolhe
   abaixo do max-width:66ch do .entry-content e estoura a viewport no mobile —
   um parágrafo comprido "empurra" a coluna inteira para fora da tela. */
.article-layout > article{min-width:0;}
@media (max-width:900px){ .article-layout{grid-template-columns:1fr;} }

.entry-header h1{font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.14; margin-top:12px;}
.entry-dek{color:var(--ink-soft); font-size:1rem; margin-top:12px; line-height:1.55;}
.entry-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); margin-top:16px;}
.entry-meta .author{display:flex; align-items:center; gap:8px; font-family:var(--sans);}
.entry-meta .author img{width:26px; height:26px; border-radius:50%;}

.share{display:flex; gap:8px; margin-top:16px;}
.share a{width:34px; height:34px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft);}
.share a:hover{border-color:var(--orange); color:var(--orange);}
.share a.whatsapp:hover{border-color:#25D366; color:#25D366;}

.entry-hero{margin:22px 0;}
.entry-hero img{border-radius:10px; width:100%;}
.entry-hero figcaption{font-size:.74rem; color:var(--ink-soft); padding-top:8px;}

.entry-content{font-size:1.02rem; line-height:1.75; max-width:66ch;}
.entry-content p{margin:0 0 1.1em;}
/* Aviso de imagem faltando: só quem pode editar a matéria enxerga (ver
   inc/imagem-faltando.php). Barra à esquerda em vez de caixa colorida — é um
   recado para a redação, não um alarme para o leitor. */
.entry-content .ptv-aviso-imagem{border-left:3px solid var(--orange); padding:8px 0 8px 12px; margin:0 0 1.4em; font-size:.86rem; color:var(--ink-soft);}
.entry-content .ptv-aviso-imagem strong{color:var(--ink);}
.entry-content h2, .entry-content h3{margin:1.6em 0 .6em;}
.entry-content a{color:var(--lime);}
.entry-content img{border-radius:8px; margin:1.4em 0; max-width:100%; height:auto;}
/* Legenda do editor clássico grava `style="width:683px"` inline no <figure> —
   max-width (não width) é o que vence sem precisar de !important. */
.entry-content .wp-caption{max-width:100%;}
.entry-content .wp-caption img{margin:0;}
.entry-content .wp-caption-text{font-size:.85rem; color:var(--ink-soft); padding:8px 4px 0;}
.entry-content blockquote{font-family:var(--serif); font-style:italic; font-size:1.3rem; line-height:1.4; border-left:3px solid var(--orange); padding-left:18px; margin:1.6em 0;}
.entry-content ul, .entry-content ol{padding-left:1.3em; margin:0 0 1.1em;}
.entry-content li{margin-bottom:.4em;}

/* Texto colado do Word/Google Docs/WhatsApp: quase toda matéria (512 de 513
   na importação do site antigo, 15/09/2026 — e já acontecia em matérias
   escritas direto no portal) traz
   `<span style="font-family:helvetica,arial,sans-serif; font-size:14pt;
   color:#424242">` por cima do texto. Inline style só perde para !important,
   então cada matéria ficava com a fonte, o tamanho e a cor de quem colou —
   nunca os do tema. Pior: cinza/preto colado (#424242, #000, #333) fica quase
   invisível no fundo escuro. O seletor `[style]` pega só quem carrega
   formatação colada, sem tocar em link, blockquote ou qualquer elemento
   nativo do editor de blocos (que não grava `style=`). */
.entry-content [style]{
	font-family: var(--sans) !important;
	font-size: 1.02rem !important;
	line-height: 1.75 !important;
	color: inherit !important;
}
/* Um link que sobreviveu à colagem (35 matérias) não pode virar cor de texto
   comum — mais específico que a regra acima, então vence sem depender de
   ordem no arquivo. */
.entry-content a[style]{color: var(--lime) !important;}

.entry-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:28px;}
.entry-tags a{font-family:var(--mono); font-size:.72rem; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); text-decoration:none;}
.entry-tags a:hover{border-color:var(--orange); color:var(--orange);}

/* ---------- sidebar ---------- */
.sidebar{display:flex; flex-direction:column; gap:24px;}
.sidebar .widget{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px;}
.sidebar .widget-title{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:12px;}
.sidebar .widget ul{list-style:none;}
.sidebar .widget li{padding:9px 0; border-bottom:1px solid var(--line); font-size:.86rem;}
.sidebar .widget li:last-child{border-bottom:none; padding-bottom:0;}
.sidebar .widget a{text-decoration:none;}
.sidebar .widget a:hover{color:var(--orange);}

/* ---------- barra lateral da matéria (template-parts/sidebar-artigo.php) ---------- */
.ptv-sb{display:flex; flex-direction:column; gap:24px;}
.ptv-sb__box{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px;}
.ptv-sb__titulo{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:12px;}
.ptv-sb__lista{list-style:none; display:flex; flex-direction:column; gap:14px;}

/* Card de notícia da sidebar: foto + etiqueta + título curto (ver
   posttv_sb_item() em functions.php — o corte por caractere já vem
   pronto do PHP, sem precisar de -webkit-line-clamp aqui). */
.ptv-sb__card{display:block; text-decoration:none; color:inherit;}
.ptv-sb__card-photo{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:var(--panel-raised);}
.ptv-sb__card-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ptv-sb__card-photo--placeholder{background:linear-gradient(150deg,var(--blue),#0B0A2E);}
.ptv-sb__card-corpo{display:flex; flex-direction:column; gap:6px; margin-top:9px;}
.ptv-sb__card-titulo{font-size:.86rem; font-weight:700; line-height:1.35;}
.ptv-sb__card:hover .ptv-sb__card-titulo{color:var(--orange);}

/* Colunista: avatar centralizado no topo do cartão, nome e bio abaixo — o
   próprio link vira o cartão inteiro. */
.ptv-sb__colunista{display:block; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.ptv-sb__colunista:hover{border-color:var(--orange);}
.ptv-sb__colunista-pic{margin:20px auto 0;}
.ptv-sb__colunista-corpo{display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; text-align:center;}
.ptv-sb__colunista-kicker{font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}
.ptv-sb__colunista-nome{font-weight:900; font-size:1.15rem; letter-spacing:-.01em;}
.ptv-sb__colunista-bio{font-size:.84rem; line-height:1.55; color:var(--ink-soft);}
.ptv-sb__colunista-cta{font-size:.8rem; color:var(--orange); font-weight:700; margin-top:4px;}
.ptv-sb__colunista:hover .ptv-sb__colunista-cta{text-decoration:underline;}

/* O cartão é montado duas vezes na matéria (issue #87): na lateral, que vale
   no computador, e no corpo depois das tags, que vale no celular — onde a
   lateral cai para o fim da página. Só um aparece por vez. No corpo ele é
   bem mais largo, então fica deitado: foto à esquerda, texto à direita. */
.ptv-sb__colunista--corpo{display:none;}
@media (max-width:900px){
  .ptv-sb__colunista--lateral{display:none;}
  .ptv-sb__colunista--corpo{display:flex; align-items:center; gap:16px; margin-top:28px; padding:16px 18px;}
  .ptv-sb__colunista--corpo .ptv-sb__colunista-pic{--ptv-avatar-d:88px; margin:0; flex:0 0 auto;}
  .ptv-sb__colunista--corpo .ptv-sb__colunista-corpo{padding:0; text-align:left; gap:4px; min-width:0;}
  /* Bio inteira (várias linhas) empurrava o anúncio e o "Leia também" para
     longe; no corpo ela fica em 3 linhas — a completa está na página dele. */
  .ptv-sb__colunista--corpo .ptv-sb__colunista-bio{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;}
}
@media (max-width:460px){
  .ptv-sb__colunista--corpo{gap:12px; padding:14px;}
  .ptv-sb__colunista--corpo .ptv-sb__colunista-pic{--ptv-avatar-d:64px;}
  .ptv-sb__colunista--corpo .ptv-sb__colunista-nome{font-size:1.02rem;}
  .ptv-sb__colunista--corpo .ptv-sb__colunista-bio{font-size:.8rem;}
}

.ptv-sb__tempo{display:flex; flex-direction:column; gap:14px;}
.ptv-sb__tempo-item{display:flex; align-items:center; gap:10px;}
.ptv-sb__tempo-item .ptv-ce__ic{width:28px; height:28px; flex-shrink:0; color:var(--orange);}
.ptv-sb__tempo-tx{display:flex; flex-direction:column;}
.ptv-sb__tempo-local{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}
.ptv-sb__tempo-val{font-size:1.05rem; font-weight:800; font-variant-numeric:tabular-nums;}

/* ---------- rodapé ---------- */
.site-footer{background:#000; padding:52px 0 0; margin-top:20px; border-top:1px solid var(--line);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--line);}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.site-footer h4, .site-footer .widget-title{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--orange); margin-bottom:14px; font-weight:900;}
.site-footer ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.site-footer a{text-decoration:none; color:var(--ink-soft); font-size:.84rem;}
.site-footer a:hover{color:#fff;}
.footer-brand img{height:34px; margin-bottom:12px;}
.footer-brand p{font-size:.82rem; color:var(--ink-soft); line-height:1.6; max-width:34ch; margin:10px 0 16px;}
.footer-socials{display:flex; gap:10px;}
.footer-socials a{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:18px 0; font-family:var(--mono); font-size:.68rem; color:#5C6066; flex-wrap:wrap; gap:10px;}

/* ---------- paginação ---------- */
.pagination{display:flex; gap:8px; justify-content:center; margin:40px 0; flex-wrap:wrap;}
/* the_posts_pagination() embrulha os números num .nav-links que não é flex —
   sem isto os números empilham um sobre o outro em vez de ficar lado a lado. */
.pagination .nav-links{display:contents;}
.pagination .page-numbers{display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; text-decoration:none; font-size:.84rem; color:var(--ink-soft);}
.pagination .page-numbers:hover{border-color:var(--orange); color:var(--orange);}
.pagination .page-numbers.current{background:var(--orange); border-color:var(--orange); color:#1A0D04; font-weight:700;}

/* ---------- página de arquivo ---------- */
.archive-header{padding:32px 0 8px;}
.archive-header h1{font-size:1.8rem;}
.archive-header p{color:var(--ink-soft); margin-top:8px; font-size:.9rem;}

/* ============================================================
   Jornal Enfoque Popular — leitor fluido
   ============================================================ */
.jornal__filtro-limpar{align-self:center; font-size:.78rem; color:var(--ink-soft); text-decoration:underline;}
.jornal__filtro-limpar:hover{color:var(--orange);}
.jornal__filtro-limpar:hover{color:var(--orange);}

.jornal__editions{display:flex; gap:12px; overflow-x:auto; padding-bottom:16px; margin-bottom:24px;}
.jornal__edition{flex-shrink:0; width:100px; text-decoration:none; color:inherit; opacity:.55; transition:opacity .25s;}
.jornal__edition:hover, .jornal__edition.is-active{opacity:1;}
.jornal__edition-cover{display:block; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:var(--panel-2); border:2px solid transparent;}
.jornal__edition.is-active .jornal__edition-cover{border-color:var(--orange);}
.jornal__edition-cover img{width:100%; height:100%; object-fit:cover;}
.jornal__edition-label{display:block; font-size:.74rem; font-weight:700; text-align:center; margin-top:6px;}
.jornal__edition-date{display:block; font-family:var(--mono); font-size:.66rem; color:var(--ink-soft); text-align:center;}

.jornal{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:40px;}
.jornal__warning{background:var(--panel); border:1px dashed var(--line); border-radius:10px; padding:20px; color:var(--ink-soft); font-size:.9rem;}

.jornal__toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.jornal__counter{font-family:var(--mono); font-size:.8rem; color:var(--ink-soft);}
.jornal__download{font-size:.78rem; font-weight:700; text-decoration:none; border:1px solid var(--line); padding:8px 14px; border-radius:8px; color:var(--ink);}
.jornal__download:hover{border-color:var(--orange); color:var(--orange);}

/* Grupo de zoom e "Baixar PDF" lado a lado: sem isto o contêiner é bloco, o
   .jornal__zoom (flex, nível de bloco) ocupa a linha inteira e o link cai
   para a linha de baixo. */
.jornal__toolbar-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.jornal__zoom{display:flex; align-items:center; flex-shrink:0;}
.jornal__zoom-menos,
.jornal__zoom-mais{width:30px; height:30px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:1.05rem; line-height:1; cursor:pointer;}
.jornal__zoom-menos{border-radius:8px 0 0 8px;}
.jornal__zoom-mais{border-radius:0 8px 8px 0;}
.jornal__zoom-menos:disabled,
.jornal__zoom-mais:disabled{opacity:.35; cursor:default;}
.jornal__zoom-nivel{min-width:54px; height:30px; padding:0 4px; border:1px solid var(--line); border-left:none; border-right:none; background:transparent; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); cursor:pointer; font-variant-numeric:tabular-nums;}

.jornal__fullscreen{flex-shrink:0; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer;}
.jornal__fullscreen:hover{border-color:var(--orange); color:var(--orange);}
.jornal__fullscreen .ic-encolher{display:none;}
.jornal__fullscreen[aria-pressed="true"] .ic-expandir{display:none;}
.jornal__fullscreen[aria-pressed="true"] .ic-encolher{display:block;}

.jornal__stage-wrap{position:relative;}
.jornal__stage{overflow:hidden; border-radius:10px; background:#0a0a0a; height:78vh; min-height:420px; touch-action:pan-y;}

/* Tela cheia: o .jornal inteiro (barra de ações + palco + filmstrip) ocupa a
   janela do sistema; o palco cresce pra ocupar o espaço que sobra em vez da
   altura fixa de 78vh, pensada pro layout normal da página. Classe via JS
   (jornal.js, no fullscreenchange) e não :fullscreen puro — Safari mais
   antigo só reconhece o seletor prefixado, e a classe cobre os dois. */
.jornal.is-fullscreen{display:flex; flex-direction:column; height:100vh; max-height:100vh; border-radius:0; background:#0a0a0a;}
.jornal.is-fullscreen .jornal__stage-wrap{flex:1; min-height:0;}
.jornal.is-fullscreen .jornal__stage{height:100%;}
.jornal.is-fullscreen .jornal__filmstrip{flex-shrink:0;}
.jornal__status{padding:60px 20px; text-align:center; color:var(--ink-soft); font-family:var(--mono); font-size:.8rem;}
/* A altura é o que faz o slide (e o canvas dentro dele) ficar centrado no
   palco: sem ela o height:100% de .jornal__page vira "auto", a página
   encosta no topo e o clampPan/ancoragem do zoom — que medem a partir do
   centro do PALCO — erram por dezenas de pixels no celular em retrato. */
.jornal__track{display:flex; width:100%; height:100%; cursor:grab;}
.jornal__track:active{cursor:grabbing;}
.jornal__page{flex:0 0 100%; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.jornal__page canvas{display:block; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,.5);}

.jornal__nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.22); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; backdrop-filter:blur(4px);}
.jornal__nav:hover{background:var(--orange); border-color:var(--orange); color:#1A0D04;}
.jornal__nav:disabled{opacity:.25; pointer-events:none;}
.jornal__nav--prev{left:12px;}
.jornal__nav--next{right:12px;}
.jornal:not(.is-ready) .jornal__nav{display:none;}

.jornal__filmstrip{display:flex; gap:8px; overflow-x:auto; margin-top:16px; padding-top:4px;}
.jornal__thumb{flex-shrink:0; width:38px; height:50px; border-radius:5px; background:var(--panel-2); border:2px solid transparent; color:var(--ink-soft); font-family:var(--mono); font-size:.72rem; cursor:pointer; opacity:.6; transition:opacity .2s, border-color .2s;}
.jornal__thumb:hover{opacity:1;}
.jornal__thumb.is-active{opacity:1; border-color:var(--orange); color:var(--orange); font-weight:700;}

.jornal__hint{text-align:center; font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); margin-top:14px;}
.jornal__hint-zoom{display:none;}
@media (pointer:coarse){.jornal__hint-zoom--touch{display:inline;}}
@media (pointer:fine){.jornal__hint-zoom--mouse{display:inline;}}

/* ============================================================
   Podcast Ponto Sem Nó
   ============================================================ */
.pod-hero{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; margin:32px 0 40px;}
@media (max-width:700px){ .pod-hero{grid-template-columns:1fr; text-align:center;} }
.pod-hero__cover{width:200px; height:200px; border-radius:20px; background:linear-gradient(155deg,#1a1a1a,#000); border:1px solid var(--line); overflow:hidden;}
@media (max-width:700px){ .pod-hero__cover{margin:0 auto;} }
.pod-hero__cover svg{width:100%; height:100%;}
.pod-hero__eyebrow{font-family:var(--mono); font-size:.72rem; color:var(--lime); letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
.pod-hero__info h1{font-size:2.1rem; margin-bottom:10px;}
.pod-hero__desc{color:var(--ink-soft); font-size:.92rem; line-height:1.6; max-width:56ch; margin-bottom:18px;}
.pod-hero__btns{display:flex; gap:10px; flex-wrap:wrap;}
@media (max-width:700px){ .pod-hero__btns{justify-content:center;} }

.btn-spotify, .btn-youtube{display:inline-flex; align-items:center; gap:9px; font-size:.84rem; font-weight:700; padding:11px 18px; border-radius:999px; text-decoration:none;}
.btn-spotify{background:#1DB954; color:#04220F;}
.btn-youtube{background:var(--orange); color:#1A0D04;}

/* ---------- Podcast: aviso "em construção" com equalizador animado ---------- */
.pod-obra{max-width:560px; margin:14px auto 10px; padding:44px 22px 60px; text-align:center;}
.pod-obra__eq{display:flex; align-items:flex-end; justify-content:center; gap:6px; height:84px; margin-bottom:30px;}
.pod-obra__eq span{
  width:8px; height:16px; border-radius:4px; background:var(--orange);
  animation:pod-eq 1.05s ease-in-out infinite;
}
/* Cores da marca alternadas + tempos diferentes = barras dançam fora de sincronia. */
.pod-obra__eq span:nth-child(3n+2){background:var(--lime);}
.pod-obra__eq span:nth-child(3n+3){background:var(--blue);}
.pod-obra__eq span:nth-child(1){animation-delay:-.9s;}
.pod-obra__eq span:nth-child(2){animation-delay:-.2s;}
.pod-obra__eq span:nth-child(3){animation-delay:-.6s;}
.pod-obra__eq span:nth-child(4){animation-delay:-.35s;}
.pod-obra__eq span:nth-child(5){animation-delay:-.75s;}
.pod-obra__eq span:nth-child(6){animation-delay:-.1s;}
.pod-obra__eq span:nth-child(7){animation-delay:-.5s;}
.pod-obra__eq span:nth-child(8){animation-delay:-.85s;}
.pod-obra__eq span:nth-child(9){animation-delay:-.25s;}
.pod-obra__eq span:nth-child(10){animation-delay:-.65s;}
.pod-obra__eq span:nth-child(11){animation-delay:-.4s;}
.pod-obra__eq span:nth-child(12){animation-delay:-.8s;}
@keyframes pod-eq{0%,100%{height:14px;}50%{height:80px;}}
@media (prefers-reduced-motion:reduce){
  .pod-obra__eq span{animation:none; height:40px;}
}
.pod-obra__tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
  border:1px solid var(--orange); border-radius:999px; padding:5px 13px; margin:0 0 16px;
}
.pod-obra__tit{margin:0 0 12px; font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.15;}
.pod-obra__txt{margin:0 auto; max-width:44ch; color:var(--ink-soft); line-height:1.6;}
.pod-obra__btns{justify-content:center; margin-top:26px;}

/* Capa do programa com imagem real (sem imagem, fica o SVG genérico da marca). */
.pod-hero__cover img{width:100%; height:100%; object-fit:cover;}
.pod-hero__cover--ph{background:linear-gradient(155deg,#1a1a1a,#000);}

/* Voltar para a vitrine e título de seção de episódios. */
.pod-back{margin:20px 0 4px;}
.pod-back a{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); text-decoration:none;}
.pod-back a:hover{color:var(--ink);}
.pod-sec-tit{font-size:1.3rem; margin:34px 0 18px;}

/* Vitrine dos programas de podcast. */
.pod-progs{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:18px; margin:8px 0 40px;}
.pod-prog{display:flex; gap:16px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:inherit; text-decoration:none; transition:border-color .18s ease, transform .18s ease;}
.pod-prog:hover{border-color:var(--orange); transform:translateY(-2px);}
.pod-prog__cover{width:96px; height:96px; flex-shrink:0; border-radius:12px; overflow:hidden; background:linear-gradient(155deg,#1a1a1a,#000); border:1px solid var(--line);}
.pod-prog__cover img{width:100%; height:100%; object-fit:cover;}
.pod-prog__cover svg{width:100%; height:100%;}
.pod-prog__body{min-width:0; display:flex; flex-direction:column; justify-content:center;}
.pod-prog__nome{font-size:1.05rem; font-weight:800; line-height:1.2; letter-spacing:-.01em;}
.pod-prog__desc{margin-top:6px; font-size:.84rem; line-height:1.5; color:var(--ink-soft);}
.pod-prog__count{margin-top:9px; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--lime);}

.ep-list{display:flex; flex-direction:column;}
.ep{display:flex; align-items:center; gap:16px; padding:16px 6px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;}
.ep:hover{background:var(--panel);}
.ep__play{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink-soft);}
.ep:hover .ep__play{background:var(--orange); border-color:var(--orange); color:#1A0D04;}
.ep__info{flex:1; min-width:0;}
.ep__title{display:block; font-size:.94rem; font-weight:700; margin-bottom:3px;}
.ep__excerpt{display:block; font-size:.8rem; color:var(--ink-soft); line-height:1.4;}
.ep__meta{font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); flex-shrink:0; text-align:right; display:flex; flex-direction:column; gap:2px;}

/* ============================================================
   Vídeos ao vivo
   ============================================================ */
.video__play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; z-index:2;}
.card:hover .video__play{opacity:1;}
.video__play span{width:44px; height:44px; border-radius:50%; background:rgba(255,120,52,.94); display:flex; align-items:center; justify-content:center;}
.video__duration{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.78); color:#fff; font-family:var(--mono); font-size:.68rem; padding:2px 6px; border-radius:4px; z-index:2;}
.archive-cta{text-align:center; margin:36px 0;}

/* Banner de transmissão ao vivo real (posttv_yt_ao_vivo) — só existe no DOM
   quando há transmissão de verdade no ar, nunca fica escondido por CSS. */
.ptv-yt-live{display:block; text-decoration:none; color:inherit; margin-bottom:28px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel);}
/* Player embutido: ocupa toda a área da miniatura que foi clicada (os alvos
   .photo/.ptv-yt-live__thumb/.ptv-yt-destaque__midia já são relative + 16/9). */
.ptv-yt-frame{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit;}
[data-yt-embed]{cursor:pointer;}
.ptv-yt-live__thumb{position:relative; aspect-ratio:16/9; background:var(--panel-2);}
.ptv-yt-live__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.ptv-yt-live__badge{position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; background:var(--orange); color:#1A0D04; font-family:var(--mono); font-size:.74rem; font-weight:700; letter-spacing:.05em; padding:6px 12px; border-radius:999px;}
.ptv-yt-live__dot{width:8px; height:8px; border-radius:50%; background:#1A0D04; animation:ptvlivedot 1.4s ease-in-out infinite;}
@keyframes ptvlivedot{0%,100%{opacity:1;} 50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){ .ptv-yt-live__dot{animation:none;} }
.ptv-yt-live .video__play{opacity:1;}
.ptv-yt-live__titulo{padding:16px 20px 20px; font-size:1.15rem;}

/* Cabeçalho de /ao-vivo/ com banner e estatísticas do canal
   (posttv_yt_canal) — só existe quando o cron já cacheou os dados; sem
   isso, o template cai para o .archive-header simples de sempre. */
.ptv-yt-canal{position:relative; background-size:cover; background-position:center 42%; background-color:var(--panel); color:#F0F0F0;}
.ptv-yt-canal__scrim{position:absolute; inset:0; background:linear-gradient(175deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.80) 62%, rgba(0,0,0,.94) 100%);}
.ptv-yt-canal__inner{position:relative; padding:40px 24px 30px;}
.ptv-yt-canal h1{font-size:clamp(1.9rem,4vw,2.5rem); color:#fff;}
.ptv-yt-canal__lede{margin-top:10px; max-width:52ch; font-size:.95rem; line-height:1.55; color:rgba(240,240,240,.78);}
.ptv-yt-canal__stats{display:flex; gap:0; margin-top:28px; border-top:1px solid rgba(240,240,240,.16); padding-top:20px; flex-wrap:wrap;}
.ptv-yt-canal__stat{flex:1 1 160px; padding-right:28px;}
.ptv-yt-canal__stat dt{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:rgba(240,240,240,.55); margin-bottom:6px;}
.ptv-yt-canal__stat dd{margin:0; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:900; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:#fff;}

/* Vídeo mais recente em destaque quando não há transmissão ao vivo agora
   (o estado normal). Reaproveita .video__duration e .video__play — não
   duplica esses estilos. */
.ptv-yt-destaque{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); margin-bottom:28px;}
.ptv-yt-destaque__midia{position:relative; aspect-ratio:16/9; background:var(--panel-2);}
.ptv-yt-destaque__midia img{width:100%; height:100%; object-fit:cover; display:block;}
.ptv-yt-destaque .video__duration{right:12px; bottom:12px; font-size:.74rem; padding:3px 8px;}
.ptv-yt-destaque__tag{position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; background:var(--blue); color:#fff; font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.05em; padding:6px 12px; border-radius:999px;}
.ptv-yt-destaque .video__play{opacity:1;}
.ptv-yt-destaque__corpo{padding:22px 24px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
.ptv-yt-destaque__corpo h2{font-size:1.28rem; line-height:1.25;}
.ptv-yt-destaque__meta{display:flex; flex-wrap:wrap; gap:8px 14px; font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.ptv-yt-destaque__meta strong{color:var(--ink); font-weight:700;}
@media (max-width:760px){ .ptv-yt-destaque{grid-template-columns:1fr;} }

/* Linha de visualizações/curtidas nos cartões da grade de vídeos. */
.card__stats{margin-top:6px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.card__stats .dot-sep{color:var(--ink-mute);}

/* ============================================================
   Alternância de tema (botão) + logo do tema claro
   ============================================================ */
.theme-toggle{flex-shrink:0; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--panel-raised); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .18s ease, color .18s ease;}
.theme-toggle:hover{border-color:var(--lime); color:var(--lime);}
.theme-toggle svg{width:18px; height:18px; fill:currentColor;}
.theme-toggle .ic-moon{display:none;}
.site-logo__light{display:none;}
.site-logo__light img{height:44px; width:auto;}

/* ============================================================
   Tema claro — o padrão do site é escuro; o leitor alterna pelo botão.
   O rodapé permanece escuro (âncora da marca): reafirmamos os tokens
   escuros dentro dele para o texto continuar legível.
   ============================================================ */
[data-theme="light"]{
  --void:#F5F5F7;
  --panel:#ECECEF;
  --panel-raised:#FFFFFF;
  --panel-2:#E4E4E8;
  --line:rgba(0,0,0,.12);
  --ink:#16161A;
  --ink-soft:#585863;
  --ink-mute:#8A8A93;
  color-scheme: light;
}
[data-theme="light"] .masthead{background:rgba(255,255,255,.92);}
/* Mesma troca do cabeçalho, pra barra de navegação inferior do celular
   (.ptv-tabbar): sem isto ela ficava com o fundo escuro fixo mesmo com o
   tema claro ativado. */
[data-theme="light"] .ptv-tabbar{background:rgba(255,255,255,.92);}
[data-theme="light"] .chbtn{border-color:rgba(0,0,0,.14);}
[data-theme="light"] .site-logo .custom-logo-link,
[data-theme="light"] .site-logo .site-title{display:none;}
[data-theme="light"] .site-logo__light{display:block;}
[data-theme="light"] .theme-toggle .ic-sun{display:none;}
[data-theme="light"] .theme-toggle .ic-moon{display:block;}
[data-theme="light"] .site-footer{ --ink:#F0F0F0; --ink-soft:#9A9A9A; --line:rgba(255,255,255,.10); }
/* Acentos em lima viram ilegíveis sobre fundo claro → azul da marca. */
[data-theme="light"] .entry-content a,
[data-theme="light"] .section-head a{color:var(--blue);}

/* Botão do convite de anúncio: o laranja da marca sobre fundo claro não
   alcança contraste suficiente com texto branco (fica em ~2,6:1, e o rótulo é
   pequeno e em negrito). O azul da marca resolve sem inventar cor nova — é a
   mesma troca que os links acima já fazem. */
[data-theme="light"] .ptv-slot__botao{background:var(--blue);}
[data-theme="light"] .ptv-slot__empty:hover .ptv-slot__botao{background:var(--blue-deep);}
[data-theme="light"] .ptv-slot__empty:hover{border-color:var(--blue);}
[data-theme="light"] .ptv-slot__empty:focus-visible{outline-color:var(--blue);}

/* ============================================================
   Home modular — espaçamento entre blocos.
   Cada bloco é uma <section class="ptv-home-bloco ptv-home-bloco--{tipo}">.
   O ritmo vertical mora aqui, num lugar só, pra que blocos novos (inclusive
   os montados por outros) não precisem cuidar da própria margem externa.
   ============================================================ */
#ptv-home-modular > .ptv-home-bloco{margin:28px 0;}
#ptv-home-modular > .ptv-home-bloco:first-child{margin-top:0;}
#ptv-home-modular > .ptv-home-bloco:last-child{margin-bottom:0;}
/* Anúncio colado no topo não deve empurrar demais o conteúdo abaixo. */
#ptv-home-modular > .ptv-home-bloco--anuncio{margin:18px 0;}

/* ---------- navegação inferior fixa (só no celular) ----------
   Cinco destinos ao alcance do polegar. Escondida por padrão: só existe abaixo
   de 700px, o mesmo ponto em que o resto do tema vira mobile.
   Ver template-parts/nav-inferior.php e
   docs/superpowers/specs/2026-07-23-nav-inferior-mobile-design.md */
.ptv-tabbar{display:none;}

@media (max-width:700px){
  .ptv-tabbar{
    display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:rgba(14,14,16,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    /* env(): sem isso a barra fica sob a faixa de gestos do iPhone. */
    padding:8px 6px calc(8px + env(safe-area-inset-bottom, 10px));
  }

  .ptv-tab{
    appearance:none; border:0; background:transparent; cursor:pointer; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 2px;
    color:var(--ink-mute); font-family:var(--sans); font-size:.6rem; font-weight:600;
    transition:color .18s;
  }
  .ptv-tab svg{width:23px; height:23px;}
  .ptv-tab.is-ativo{color:var(--orange);}
  .ptv-tab.is-ativo .ptv-tab__ind{opacity:1; transform:scaleX(1);}
  .ptv-tab__ind{
    width:20px; height:3px; border-radius:3px; background:var(--orange);
    opacity:0; transform:scaleX(.2); transition:.2s; margin-top:1px;
  }

  /* Aba "Buscar": <details>/<summary> nativo em vez de link direto — o
     wrapper fica sem estilo próprio (só a âncora do painel); o visual de aba
     mora no <summary>, que recebe as mesmas classes .ptv-tab de sempre. */
  .ptv-tab-busca{position:relative;}
  .ptv-tab-busca summary{list-style:none; cursor:pointer;}
  .ptv-tab-busca summary::-webkit-details-marker{display:none;}
  .ptv-tab-busca summary::marker{content:"";}

  .ptv-tab__painel{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
    width:168px; padding:6px; border-radius:12px;
    background:var(--panel-raised); border:1px solid var(--line);
    box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  }
  .ptv-tab__painel a{
    padding:9px 12px; border-radius:8px; text-decoration:none;
    font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--ink);
  }
  .ptv-tab__painel a:hover, .ptv-tab__painel a:focus-visible{background:var(--panel-2); color:var(--orange);}
  /* Última opção ("Busca geral") separada visualmente das três de categoria:
     é uma saída diferente das outras, não mais uma da lista. */
  .ptv-tab__painel a:last-child{margin-top:4px; border-top:1px solid var(--line); border-radius:0; padding-top:12px; color:var(--ink-soft);}

  /* Botão central elevado: o diferencial da marca fica no ponto mais fácil do
     polegar. O anel da mesma cor do fundo o recorta da barra. */
  .ptv-tab--live{position:relative;}
  .ptv-tab--live .ptv-tab__fab{
    width:54px; height:54px; margin-top:-24px; border-radius:50%;
    background:linear-gradient(150deg,var(--orange),var(--orange-deep));
    display:flex; align-items:center; justify-content:center; color:#1A0D04;
    box-shadow:0 8px 20px -6px rgba(255,120,52,.7), 0 0 0 4px var(--void);
  }
  .ptv-tab--live .ptv-tab__fab svg{width:26px; height:26px;}
  .ptv-tab__flag{
    position:absolute; top:-30px; right:calc(50% - 34px);
    display:inline-flex; align-items:center; gap:4px;
    background:var(--lime); color:#14210a;
    font-size:.52rem; font-weight:800; letter-spacing:.04em;
    padding:3px 7px; border-radius:999px;
  }
  .ptv-tab__dot{width:7px; height:7px; border-radius:50%; background:#14210a; animation:ptv-tab-pulse 1.5s infinite;}
  @keyframes ptv-tab-pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

  /* A barra é fixa: sem esta folga ela cobre o fim do rodapé, onde estão os
     links institucionais e as redes sociais. */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom, 10px));}

  /* O banco de canais do topo cobre os mesmos destinos da barra (Ao vivo,
     Enfoque, Podcast). No celular, quem fica é a barra — mais perto do polegar
     e sem gastar altura de tela. Decisão do cliente, 2026-07-23. */
  .channels{display:none;}

  /* Faixa de editorias também sai no celular (mesma decisão): com a barra de
     baixo, o topo fica só com a marca. As editorias continuam alcançáveis pela
     coluna "Editorias" do rodapé e pelos filtros da busca.
     Atenção: o ícone de busca do cabeçalho vive dentro do .mainnav e some
     junto — no celular quem leva à busca é a aba "Buscar" da barra de baixo.
     As duas apontam para a mesma página, /?s=. */
  .mainnav{display:none;}

  /* Sobrando só a marca, ela vai para o centro; o alternador de tema fica
     ancorado à direita para não puxar a logo de volta para o lado. */
  .masthead__brandrow{position:relative; justify-content:center;}
  .masthead__brandrow .theme-toggle{position:absolute; right:14px; top:50%; transform:translateY(-50%);}

  /* Manchete do Destaque sai de cima da foto: na largura do celular um título
     longo cobria a imagem inteira, com o texto chegando ao topo do recorte.
     Fora dela, a foto aparece completa e o título tem o espaço que precisar.
     Pedido do cliente, 2026-07-23. */
  .lead__cap{position:static; background:none; padding:12px 2px 0;}
  .lead__cap h2{font-size:1.25rem; color:var(--ink); margin-top:8px;}
}

@media (prefers-reduced-motion:reduce){
  .ptv-tab__dot{animation:none;}
}

/* ---------- comentários da matéria ----------
   Ver comments.php. Reaproveita .section-head, .ptv-field e .ptv-btn, que já
   existem; aqui só o que é próprio da lista. */
.ptv-coment{margin:38px 0 10px; padding-top:8px; border-top:1px solid var(--line);}
.ptv-coment__lista{list-style:none; margin:0 0 24px; padding:0;}
.ptv-coment__lista .children{list-style:none; margin:14px 0 0 0; padding-left:22px; border-left:2px solid var(--line);}
.ptv-coment__lista li.comment{margin-bottom:18px;}
.ptv-coment__lista .comment-body{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.ptv-coment__lista .comment-author{display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:700;}
.ptv-coment__lista .comment-author img{border-radius:50%;}
.ptv-coment__lista .comment-author .says{display:none;}
.ptv-coment__lista .comment-metadata{margin:2px 0 10px 54px; font-size:.72rem; color:var(--ink-mute);}
.ptv-coment__lista .comment-metadata a{color:inherit; text-decoration:none;}
.ptv-coment__lista .comment-content{margin-left:54px; font-size:.95rem; line-height:1.6; color:var(--ink);}
.ptv-coment__lista .comment-content p{margin:0 0 10px;}
.ptv-coment__lista .reply{margin-left:54px; font-size:.8rem;}
.ptv-coment__lista .reply a{color:var(--orange); text-decoration:none; font-weight:700;}
.ptv-coment__lista .comment-awaiting-moderation{display:inline-block; margin-bottom:8px; font-size:.75rem; color:var(--lime);}
.ptv-coment__fechado{color:var(--ink-soft); font-size:.9rem; margin-bottom:18px;}

/* Formulário: mesmos campos do resto do site. */
.ptv-coment .comment-form{display:grid; gap:14px;}
.ptv-coment .comment-form p{margin:0;}
.ptv-coment .comment-form label{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px;}
.ptv-coment .comment-form input[type=text],
.ptv-coment .comment-form input[type=email],
.ptv-coment .comment-form input[type=url],
.ptv-coment .comment-form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); font-family:var(--sans); font-size:.95rem;
}
.ptv-coment .comment-form textarea{resize:vertical; min-height:120px;}
.ptv-coment .comment-form input:focus, .ptv-coment .comment-form textarea:focus{outline:2px solid var(--orange); outline-offset:1px;}
.ptv-coment .comment-form-cookies-consent{display:flex; align-items:flex-start; gap:9px;}
/* .ptv-btn é definido em institucional.css, que só carrega nas páginas
   institucionais — em matéria o botão ficaria com o estilo cru do navegador.
   Por isso o visual do botão de comentar é declarado aqui. */
.ptv-coment .comment-form [type=submit]{
  background:var(--orange); color:#1A0D04; border:0; border-radius:999px;
  padding:12px 22px; font-family:var(--sans); font-size:.9rem; font-weight:800;
  cursor:pointer; transition:background .18s ease;
}
.ptv-coment .comment-form [type=submit]:hover{background:var(--orange-deep);}
.ptv-coment .comment-form-cookies-consent label{text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--ink-soft); margin:0;}
@media (min-width:700px){
  .ptv-coment .comment-form-author, .ptv-coment .comment-form-email{display:inline-block; width:calc(50% - 7px);}
  .ptv-coment .comment-form-author{margin-right:10px;}
}

/* ---------- convite de push (faixa + botão) ---------- */
.ptv-push-convite{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0)); z-index:60;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:0 10px 30px -10px rgba(0,0,0,.6);}
.ptv-push-convite span{flex:1; min-width:180px; font-size:.9rem;}
.ptv-push-convite button{border:0; border-radius:999px; padding:8px 16px; font-weight:700; cursor:pointer; font-size:.85rem;}
.ptv-push-sim{background:var(--orange); color:#1A0D04;}
.ptv-push-nao{background:transparent; color:var(--ink-soft); border:1px solid var(--line)!important;}
.ptv-push-botao{background:transparent; border:1px solid var(--line); color:var(--ink-soft); border-radius:999px; padding:7px 14px; font-size:.8rem; cursor:pointer;}
.ptv-push-botao:hover{border-color:var(--orange); color:var(--orange);}
/* No celular a pergunta ocupa a linha inteira: sem isso só o "Sim" cabe ao lado
   dela e o "Agora não" desce sozinho, com os dois botões desalinhados. */
@media (max-width:700px){
  .ptv-push-convite{bottom:calc(74px + env(safe-area-inset-bottom,0));} /* acima da barra inferior */
  .ptv-push-convite span{flex-basis:100%;}
}

/* ---------- pop-up de anúncio ---------- */
.ptv-popup{position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.72);}
.ptv-popup__painel{position:relative; max-width:480px; width:100%;}
.ptv-popup__arte{line-height:0;}
/* A arte manda no tamanho, mas nunca passa da tela: 1080×1080 num celular
   deitado estouraria a altura. */
.ptv-popup__arte img{display:block; width:100%; height:auto; max-height:80vh; object-fit:contain; border-radius:8px;}
.ptv-popup__fechar{position:absolute; top:-14px; right:-10px; z-index:1; width:36px; height:36px;
  border:0; border-radius:999px; background:var(--panel); color:var(--ink); font-size:22px; line-height:1;
  cursor:pointer; box-shadow:0 4px 14px -4px rgba(0,0,0,.7);}
.ptv-popup__fechar:hover{background:var(--orange); color:#1A0D04;}
.ptv-popup__fechar:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}
/* Trava a rolagem do fundo enquanto o modal está aberto. */
body.ptv-popup-aberto{overflow:hidden;}
/* O × fica dentro do painel no celular, senão encosta na borda da tela. */
@media (max-width:520px){ .ptv-popup__fechar{top:6px; right:6px;} }