/*
Theme Name: Birigui Notícias
Theme URI: https://biriguinoticias.com.br
Author: F7 Digitall — Comunicação & Marketing
Description: Tema editorial do portal Birigui Notícias. Rigor de jornal impresso: régua e espaço em branco no lugar de card e sombra, chapéu em mono caixa alta sobre toda manchete, zero raio de borda. Identidade da marca (vermelho factual, azul institucional, grafite) aplicada nos papéis que a estrutura já reservava.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: birigui
*/

/* ==========================================================================
   TOKENS
   Cores: manual da marca (Especificações Cromáticas, 09/2026).
   Estrutura: sistema editorial — grayscale + uma cor estrutural + um vermelho
   de exceção. O vermelho é SEMÂNTICO (urgente/plantão), nunca decorativo:
   no máximo 2 usos visíveis por tela.
   ========================================================================== */
:root{
  /* marca */
  --vermelho:#C52228;        /* urgência, plantão, destaque             */
  --azul:#083E63;            /* credibilidade: réguas, ribbons, links   */
  --tinta:#1E293B;           /* manchete e texto corrido                */

  /* superfícies */
  --papel:#FFFFFF;           /* fundo de leitura, como papel-jornal     */
  --papel-off:#F7F8FA;       /* faixa alternada, raro                   */
  --invertido:#0E1C28;       /* única região invertida: o rodapé        */

  /* apoio */
  --meta:#5C6B7A;            /* assinatura, hora, crédito de foto       */
  --apagado:#8A97A3;
  --regra:#D9DEE5;           /* fio de cabelo entre matérias            */
  --regra-forte:var(--azul); /* régua estrutural, 2px                   */

  /* tipos: 3 famílias, 3 papéis, nunca trocam de função */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;  /* manchete e UI */
  --leitura:"Source Serif 4",Georgia,"Times New Roman",serif; /* corpo     */
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace; /* chapéu   */

  /* medidas */
  --largura:1400px;          /* porte de portal, não de blog             */
  --coluna:66ch;             /* medida de leitura editorial: 60–70 car.  */
  --goteira:24px;
  --obliquo:14px;            /* o corte que ecoa o paralelogramo da logo */
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--leitura);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block;border-radius:0}

a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

/* Foco visível em tudo que recebe teclado. Remover sem substituto é falha
   tripla de WCAG (1.4.11, 2.4.7, 2.4.13). */
:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:2px;
}

.pula-para-conteudo{
  position:absolute;left:-9999px;
  background:var(--azul);color:#fff;
  padding:12px 20px;z-index:100;
  font-family:var(--display);font-weight:600;
}
.pula-para-conteudo:focus{left:8px;top:8px}

.so-leitor-de-tela{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.envelope{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding-inline:16px;
}
@media (min-width:768px){ .envelope{padding-inline:24px} }
@media (min-width:1024px){ .envelope{padding-inline:32px} }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.faixa-marca{display:flex;height:6px}
.faixa-marca i{display:block;height:100%}
.faixa-marca .v{background:var(--vermelho);flex:0 0 45%;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.faixa-marca .a{background:var(--azul);flex:1}

.topo{background:var(--papel);border-bottom:2px solid var(--regra-forte)}

.topo-interno{
  display:flex;align-items:center;gap:16px;
  padding-block:16px;
}

.marca{flex:0 0 auto;display:block;line-height:0}
.marca img{width:clamp(150px,34vw,216px);height:auto}

.topo-acoes{margin-inline-start:auto;display:flex;align-items:center;gap:4px}

/* No celular a marca fica no meio, com o menu de um lado e a busca do outro —
   é a posição que o leitor espera num portal e a que dá mais presença à
   logo. As três colunas são fixas nas laterais para a logo ficar centrada de
   verdade, não empurrada pelo que estiver ao lado. */
@media (max-width:1023px){
  .topo-interno{
    display:grid;
    grid-template-columns:52px 1fr 52px;
    gap:0;                     /* gap assimétrico desloca a coluna do meio */
    padding-block:12px;
  }
  .marca{justify-self:center}
  .marca img{width:clamp(168px,46vw,230px)}
  .topo-acoes{margin-inline-start:0;justify-content:flex-end}
}

/* Alvo de 44px: o mínimo AA é 24, mas nav de portal se toca com o polegar. */
.botao-icone{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--tinta);
  border-radius:50%;   /* único círculo do tema: botão de ícone */
}
.botao-icone:hover{color:var(--azul)}
.botao-icone svg{width:20px;height:20px}

/* Navegação de editorias: régua estrutural, mono caixa alta */
.editorias{border-top:1px solid var(--regra)}
.editorias ul{
  list-style:none;margin:0;padding:0;
  display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;
}
.editorias ul::-webkit-scrollbar{display:none}
.editorias a{
  display:block;
  padding:14px 16px;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta);
  white-space:nowrap;
}
.editorias a:hover{color:var(--azul);text-decoration:none;background:var(--papel-off)}
.editorias .atual a{color:var(--azul);box-shadow:inset 0 -3px 0 var(--azul)}
.editorias li:first-child a{padding-inline-start:0}

.busca-topo{padding:16px 0;border-top:1px solid var(--regra)}
.busca-topo[hidden]{display:none}

/* ==========================================================================
   FORMULÁRIO DE BUSCA — borda dura de 2px, canto reto, sem glow
   ========================================================================== */
.forma-busca{display:flex;gap:0;max-width:520px}
.forma-busca input[type=search]{
  flex:1;
  font-family:var(--display);font-size:1rem;
  padding:11px 14px;
  border:2px solid var(--azul);border-inline-end:0;
  border-radius:0;background:var(--papel);color:var(--tinta);
  min-height:44px;
}
.forma-busca input::placeholder{color:var(--apagado)}
.forma-busca button{
  font-family:var(--display);font-weight:700;font-size:.875rem;
  letter-spacing:.04em;text-transform:uppercase;
  padding:0 20px;min-height:44px;
  background:var(--azul);color:#fff;
  border:2px solid var(--azul);border-radius:0;cursor:pointer;
  transition:background 150ms,color 150ms;
}
.forma-busca button:hover{background:var(--papel);color:var(--azul)}

/* ==========================================================================
   CHAPÉU (kicker) — mono caixa alta sobre TODA manchete.
   É o que separa um portal de um blog genérico.
   ========================================================================== */
.chapeu{
  display:inline-block;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--azul);
  line-height:1.2;
  /* O chapéu é um link para a editoria. Com 14px de altura ele fica abaixo do
     alvo mínimo de 24px (WCAG 2.5.8): o padding cria a área de toque e a
     margem menor devolve o espaçamento visual de ~8px que a composição pede. */
  padding:5px 0;
  margin:0 0 3px;
}
.chapeu.urgente{
  background:var(--vermelho);color:#fff;
  padding:5px 8px;
}

.hora{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
}

/* ==========================================================================
   MANCHETE PRINCIPAL
   Escala agressiva: o salto entre display e corpo é a assinatura editorial.
   Peso 600 (não 800): a marca é robusta, mas manchete em peso máximo lê
   como anúncio, não como jornal.
   ========================================================================== */
.abertura{padding-block:32px 40px;border-bottom:2px solid var(--regra-forte)}

@media (min-width:1024px){
  .abertura{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:start}
  .abertura-secundarias{border-inline-start:1px solid var(--regra);padding-inline-start:32px}
}

.abertura-figura{margin:0 0 16px}
.abertura-figura img{width:100%;aspect-ratio:16/9;object-fit:cover}

.manchete{
  font-family:var(--display);
  font-weight:600;
  /* 44px no teto, não 52: acima disso a manchete sozinha ocupa a dobra
     inteira e engole as chamadas de apoio, que é o que dá porte de portal. */
  font-size:clamp(1.75rem,4.1vw,2.75rem);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0;
  color:var(--tinta);
  text-wrap:balance;
}
.manchete a{color:inherit}
.manchete a:hover{color:var(--azul);text-decoration:none}

.olho{
  font-family:var(--leitura);
  font-size:clamp(1.0625rem,2.1vw,1.1875rem);
  line-height:1.5;
  color:var(--meta);
  margin:14px 0 0;
  max-width:54ch;
  text-wrap:pretty;
}

.assinatura{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
}
.assinatura span+span::before,
.assinatura span+time::before{content:" · ";color:var(--apagado)}
/* O nome do autor é link para a página dele: precisa de área de toque. */
.assinatura a{color:var(--meta);display:inline-block;padding:5px 0}
.assinatura a:hover{color:var(--azul)}

/* ==========================================================================
   CHAMADAS — sem card, sem sombra: fio de cabelo e espaço.
   ========================================================================== */
.lista-secundaria{display:grid;gap:0}
.lista-secundaria .chamada{padding-block:18px;border-top:1px solid var(--regra)}
.lista-secundaria .chamada:first-child{border-top:0;padding-top:0}

.chamada{margin:0}
.chamada-figura{margin:0 0 10px}
.chamada-figura img{width:100%;aspect-ratio:4/3;object-fit:cover}

.chamada-titulo{
  font-family:var(--display);
  font-weight:600;
  font-size:1.25rem;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0;
  color:var(--tinta);
}
.chamada-titulo a{color:inherit}
.chamada-titulo a:hover{color:var(--azul);text-decoration:none}

.chamada-olho{
  font-family:var(--leitura);
  font-size:.9375rem;line-height:1.5;
  color:var(--meta);margin:8px 0 0;
}
.chamada .hora{display:block;margin-top:8px}

/* chamada na horizontal, para listas densas */
.chamada.deitada{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.chamada.deitada .chamada-figura{margin:0}
.chamada.deitada .chamada-figura img{aspect-ratio:1/1}
.chamada.deitada .chamada-titulo{font-size:1rem;line-height:1.25}

/* ==========================================================================
   RIBBON DE EDITORIA — barra sólida, mono branco, canto reto
   ========================================================================== */
/* O corte oblíquo do lado direito ecoa o paralelogramo da logo. É o único
   ornamento do tema, e ele carrega a marca — não é decoração solta. */
.ribbon{
  background:var(--azul);
  color:#fff;
  font-family:var(--mono);
  font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:11px 26px 11px 14px;
  margin:0 0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  clip-path:polygon(0 0,100% 0,calc(100% - var(--obliquo)) 100%,0 100%);
}
.ribbon a{color:#fff;font-size:.6875rem}
.ribbon a:hover{text-decoration:underline}
.ribbon .ver-tudo{
  font-family:var(--mono);letter-spacing:.09em;white-space:nowrap;
  padding:4px 0;
}

.bloco{padding-block:36px;border-bottom:1px solid var(--regra)}
.bloco:last-of-type{border-bottom:0}
.bloco-cabeca{padding-bottom:0;border-bottom:0}
.bloco-cabeca .olho{max-width:60ch;margin-top:16px}
.bloco-final{border-bottom:0}

.grade{display:grid;gap:28px}
@media (min-width:600px){ .grade{--vao:56px;grid-template-columns:repeat(2,1fr);gap:24px var(--vao)} }
@media (min-width:1024px){ .grade{--vao:60px;grid-template-columns:repeat(3,1fr);gap:28px var(--vao)} }

/* Fio vertical entre colunas, como dobra de página. Desenhado no MEIO do vão,
   não como borda + recuo da chamada: com borda, a última coluna ficava sem
   recuo, saía mais larga que as outras e a foto dela, mais alta. */
@media (min-width:600px){
  .grade .chamada{position:relative}
  .grade .chamada::after{
    content:"";position:absolute;top:0;bottom:0;
    inset-inline-end:calc(var(--vao) / -2);
    border-inline-end:1px solid var(--regra);
  }
  .grade .chamada:nth-child(2n)::after{display:none}
}
@media (min-width:1024px){
  .grade .chamada:nth-child(2n)::after{display:block}
  .grade .chamada:nth-child(3n)::after{display:none}
}

/* ==========================================================================
   MAIS LIDAS — numeral grande colado no título
   ========================================================================== */
.mais-lidas ol{list-style:none;margin:0;padding:0;counter-reset:n}
.mais-lidas li{
  counter-increment:n;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding-block:14px;border-top:1px solid var(--regra);
}
.mais-lidas li:first-child{border-top:0;padding-top:0}
.mais-lidas li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--display);font-weight:700;
  font-size:1.75rem;line-height:1;
  color:var(--regra);
  letter-spacing:-.03em;
}
.mais-lidas a{
  font-family:var(--display);font-weight:600;
  font-size:1rem;line-height:1.25;color:var(--tinta);
}
.mais-lidas a:hover{color:var(--azul);text-decoration:none}

/* ==========================================================================
   MATÉRIA
   ========================================================================== */
.materia{padding-block:28px 48px}

.materia-cabeca{max-width:var(--coluna);margin-inline:auto}

.materia-titulo{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2rem,6.2vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

.materia-olho{
  font-family:var(--leitura);
  font-size:clamp(1.125rem,2.4vw,1.3125rem);
  line-height:1.5;
  color:var(--meta);
  margin:18px 0 0;
  text-wrap:pretty;
}

.materia-meta{
  margin:22px 0 0;padding:14px 0;
  border-top:1px solid var(--regra);
  border-bottom:1px solid var(--regra);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--meta);
  display:flex;flex-wrap:wrap;gap:6px 14px;
}

/* A foto da matéria é mais larga que a coluna de leitura — é o que dá
   hierarquia entre imagem e texto — mas não ocupa a página inteira: foto de
   1280px sobre uma coluna de 66ch faz a imagem engolir a reportagem. */
.materia-figura{margin:28px auto 0;max-width:920px}
.materia-figura img{width:100%}
.materia-figura figcaption{
  max-width:var(--coluna);
  margin-inline:auto;
  font-family:var(--leitura);
  font-size:.8125rem;line-height:1.5;
  color:var(--meta);
  padding-top:10px;
  border-bottom:1px solid var(--regra);
  padding-bottom:14px;
}

/* corpo: medida curta, entrelinha generosa, nunca justificado */
.materia-corpo{
  max-width:var(--coluna);
  margin:28px auto 0;
  font-family:var(--leitura);
  font-size:1.125rem;
  line-height:1.68;
  text-align:start;
}
.materia-corpo p{margin:0 0 1.35em}
.materia-corpo h2{
  font-family:var(--display);font-weight:600;
  font-size:1.5rem;line-height:1.25;letter-spacing:-.015em;
  margin:2em 0 .6em;
}
.materia-corpo h3{
  font-family:var(--display);font-weight:600;
  font-size:1.1875rem;line-height:1.3;
  margin:1.8em 0 .5em;
}
.materia-corpo a{text-decoration:underline;text-underline-offset:2px}
.materia-corpo ul,.materia-corpo ol{margin:0 0 1.35em;padding-inline-start:1.3em}
.materia-corpo li{margin-bottom:.5em}
.materia-corpo img{margin-block:1.6em}

/* citação: interrompe o ritmo, não é card */
.materia-corpo blockquote{
  margin:2em 0;padding:0;
  border:0;border-block:2px solid var(--azul);
  padding-block:1.1em;
}
.materia-corpo blockquote p{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.375rem,3.4vw,1.75rem);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--tinta);
  margin:0;
}
.materia-corpo blockquote cite{
  display:block;margin-top:.7em;
  font-family:var(--mono);font-style:normal;
  font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--meta);
}

.materia-rodape{max-width:var(--coluna);margin:36px auto 0;padding-top:20px;border-top:2px solid var(--regra-forte)}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.etiquetas a{
  display:inline-block;
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;
  padding:7px 11px;min-height:24px;
  border:1px solid var(--regra);color:var(--meta);
}
.etiquetas a:hover{border-color:var(--azul);color:var(--azul);text-decoration:none}

/* ==========================================================================
   ESTADOS — vazio, sem resultado, erro.
   Toda superfície que busca dado precisa dos cinco estados; entregar só o
   populado é a falha mais comum.
   ========================================================================== */
.estado{
  max-width:60ch;margin:56px auto;padding:0 0 8px;text-align:start;
}
.estado-marca{
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho);
  display:block;margin-bottom:12px;
}
.estado h1,.estado h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,4.2vw,2rem);line-height:1.15;
  letter-spacing:-.018em;margin:0;
}
.estado p{
  font-family:var(--leitura);font-size:1.0625rem;line-height:1.6;
  color:var(--meta);margin:14px 0 0;
}
.estado .forma-busca{margin-top:24px}
.estado-saidas{margin:26px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px}
.estado-saidas a{
  display:inline-block;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:10px 14px;min-height:44px;
  border:2px solid var(--azul);color:var(--azul);
  display:inline-flex;align-items:center;
  transition:background 150ms,color 150ms;
}
.estado-saidas a:hover{background:var(--azul);color:#fff;text-decoration:none}

/* ==========================================================================
   PAGINAÇÃO
   ========================================================================== */
.paginacao{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--regra)}
.paginacao .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.paginacao .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  font-family:var(--mono);font-size:.8125rem;
  border:1px solid var(--regra);color:var(--tinta);
}
.paginacao .page-numbers:hover{border-color:var(--azul);color:var(--azul);text-decoration:none}
.paginacao .page-numbers.current{background:var(--azul);border-color:var(--azul);color:#fff}

/* ==========================================================================
   RODAPÉ — única região invertida
   ========================================================================== */
.rodape{background:var(--invertido);color:#E6EAEE;margin-top:48px}
.rodape-interno{padding-block:40px 32px}
.rodape-marca img{width:180px;margin-bottom:20px}
.rodape h2{
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  margin:0 0 12px;
}
.rodape-colunas{display:grid;gap:32px}
@media (min-width:768px){ .rodape-colunas{grid-template-columns:1.4fr 1fr 1fr} }
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:2px}
.rodape a{
  color:#E6EAEE;font-family:var(--display);font-size:.9375rem;
  display:inline-block;padding:6px 0;min-height:24px;
}
.rodape a:hover{color:#fff}
.rodape p{font-family:var(--leitura);font-size:.9375rem;line-height:1.6;color:#AEBAC6;margin:0}
.rodape-fim{
  margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:#93A3B1;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
}
.rodape-fim a{font-family:var(--mono);font-size:.6875rem;color:#93A3B1}

/* ==========================================================================
   BARRA DO TOPO — letreiro "Agora" à esquerda, redes sociais à direita.
   O letreiro herdou o papel do antigo plantão: hora em mono, fio entre itens
   e a tarja vermelha de "agora" como o único uso do vermelho fora da logo.
   ========================================================================== */
.barra-topo{background:var(--papel-off);border-bottom:1px solid var(--regra)}
.barra-topo-interno{display:flex;align-items:stretch;gap:16px;min-height:40px}

.letreiro{flex:1 1 auto;min-width:0;display:flex;align-items:stretch}
.letreiro-marca{
  margin:0;background:var(--vermelho);color:#fff;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;
  padding:0 22px 0 12px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
  white-space:nowrap;
}
/* As pontas esmaecem: o texto entra e sai da janela em vez de ser cortado seco. */
.letreiro-janela{
  flex:1 1 auto;min-width:0;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.letreiro-trilho{display:flex;width:max-content;animation:letreiro var(--letreiro-duracao,60s) linear infinite}
.letreiro-faixa{list-style:none;margin:0;padding:0;display:flex}
.letreiro-faixa li{
  display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  padding:0 22px;border-inline-start:1px solid var(--regra);
}
.letreiro .hora{font-size:.625rem}
.letreiro a{
  font-family:var(--display);font-weight:500;font-size:.8125rem;
  color:var(--tinta);display:inline-block;padding:10px 0;
}
.letreiro a:hover{color:var(--azul);text-decoration:none}

@keyframes letreiro{to{transform:translateX(-50%)}}

/* WCAG 2.2.2: o que se move sozinho precisa de pausa — ao passar o mouse e
   no botão, que o JavaScript revela (sem JS não há como alternar). */
.letreiro:hover .letreiro-trilho,
.letreiro.pausado .letreiro-trilho{animation-play-state:paused}
/* Com foco de teclado o letreiro para e volta ao início, e a janela rola:
   o link focado precisa estar à vista, não fora da faixa. */
.letreiro:focus-within .letreiro-trilho{animation:none}
.letreiro:focus-within .letreiro-janela{overflow-x:auto;scrollbar-width:none}

.letreiro-pausa{
  flex:0 0 auto;width:36px;padding:0;border:0;background:transparent;cursor:pointer;
  color:var(--meta);border-inline-start:1px solid var(--regra);
  display:inline-flex;align-items:center;justify-content:center;
}
.letreiro-pausa[hidden]{display:none}
.letreiro-pausa:hover{color:var(--azul)}
.letreiro-pausa svg{width:14px;height:14px}
.letreiro-pausa .icone-tocar,
.letreiro.pausado .letreiro-pausa .icone-pausa{display:none}
.letreiro.pausado .letreiro-pausa .icone-tocar{display:block}

@media (prefers-reduced-motion:reduce){
  .letreiro-trilho{animation:none}
  .letreiro-faixa[aria-hidden]{display:none}
  .letreiro-janela{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
  .letreiro-pausa{display:none}
}

.redes{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex:0 0 auto}
.redes a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;color:var(--azul);
}
.redes a:hover{color:var(--tinta);background:var(--papel)}
.redes svg{width:19px;height:19px}

@media (max-width:767px){
  .barra-topo-interno{gap:6px}
  .letreiro-marca{padding:0 18px 0 10px}
  .letreiro-faixa li{padding:0 16px}
}

/* ==========================================================================
   BANNER DO TOPO — 728 × 90 ao lado da logo, sempre rotulado.
   Publicidade sem rótulo se confunde com notícia; em jornal isso é quebra de
   confiança, não detalhe de layout.
   ========================================================================== */
.banner-topo{
  flex:0 1 728px;min-width:0;margin-inline-start:auto;
  display:flex;flex-direction:column;gap:3px;
}
.banner-topo + .topo-acoes{margin-inline-start:0}
.banner-rotulo{
  align-self:flex-end;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--apagado);
}
.banner-espaco{display:block;width:100%;aspect-ratio:728/90;overflow:hidden;line-height:0}
.banner-espaco .banner-peca,
.banner-espaco figure{margin:0;height:100%}
.banner-espaco a{display:block;height:100%}
.banner-espaco img{width:100%;height:100%;object-fit:cover;display:block}
.banner-vazio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  line-height:1.2;text-align:center;
  border:1px dashed #B9C3CE;background:var(--papel-off);color:var(--meta);
}
.banner-vazio strong{
  font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--azul);
}
.banner-vazio span{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase}
.banner-vazio:hover{border-color:var(--azul);text-decoration:none}

@media (max-width:1199px){ .data-de-hoje{display:none} }

/* No celular o banner desce para uma linha própria, sob a logo. */
@media (max-width:1023px){
  .banner-topo{grid-column:1 / -1;order:10;width:100%;max-width:728px;justify-self:center;margin:8px 0 0}
}

/* ==========================================================================
   ABERTURA em três colunas: manchete | apoio | mais lidas
   ========================================================================== */
@media (min-width:1100px){
  .abertura{grid-template-columns:1.75fr 1fr 0.86fr;gap:32px}
  .abertura-lateral{
    border-inline-start:1px solid var(--regra);
    padding-inline-start:28px;
  }
}
@media (min-width:1100px){
  .abertura-secundarias{padding-inline-start:28px}
}

.abertura-lateral .ribbon{margin-bottom:14px}

/* ==========================================================================
   GRADE DE 4 — mais chamada visível acima da dobra
   ========================================================================== */
@media (min-width:900px){
  .grade.grade-4{grid-template-columns:repeat(4,1fr)}
  .grade.grade-4 .chamada::after{display:block}
  .grade.grade-4 .chamada:nth-child(4n)::after{display:none}
}

/* ==========================================================================
   BLOCO DE EDITORIA — 1 destaque + lista deitada.
   É o módulo que dá volume à capa sem repetir a mesma grade quatro vezes.
   ========================================================================== */
/* Abertura da página de editoria: um destaque largo antes da grade */
.editoria-abertura{
  padding-bottom:28px;
  margin-bottom:28px;
  border-bottom:2px solid var(--regra-forte);
}
@media (min-width:860px){
  .editoria-abertura .chamada{
    display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start;
  }
  .editoria-abertura .chamada-figura{margin:0}
  .editoria-abertura .chamada-figura img{aspect-ratio:16/9}
  .editoria-abertura .chamada-titulo{
    font-size:clamp(1.5rem,2.9vw,2rem);line-height:1.13;letter-spacing:-.02em;
  }
  .editoria-abertura .chamada-olho{font-size:1.0625rem;margin-top:12px}
}

.editoria-bloco{padding-block:36px;border-bottom:1px solid var(--regra)}

.editoria-corpo{display:grid;gap:26px}
@media (min-width:860px){
  .editoria-corpo{grid-template-columns:1.4fr 1fr;gap:32px}
  .editoria-lista{border-inline-start:1px solid var(--regra);padding-inline-start:26px}
}

/* A foto do destaque de editoria é uma faixa, não um painel. Em 3/2 numa
   coluna de 680px ela empurrava o título 492px para baixo e fazia o bloco
   ficar quase o dobro da altura do vizinho. */
.editoria-destaque .chamada-figura img{
  aspect-ratio:16/9;
  max-height:320px;
  object-fit:cover;
}
.editoria-destaque .chamada-titulo{
  font-size:clamp(1.375rem,2.6vw,1.75rem);
  line-height:1.15;letter-spacing:-.018em;
}
.editoria-destaque .chamada-olho{font-size:1rem}

.editoria-lista .chamada{
  padding-block:14px;border-top:1px solid var(--regra);
}
.editoria-lista .chamada:first-child{border-top:0;padding-top:0}

/* duas editorias lado a lado, para a capa não virar uma coluna infinita.
   `align-items:start` de propósito: igualar a altura de dois blocos com
   conteúdo desigual cria um vão morto num deles — simetria vazia é tell de
   tela montada sem autoria. */
.editorias-par{display:grid;gap:0;align-items:start}
@media (min-width:1100px){
  .editorias-par{grid-template-columns:1fr 1fr;gap:40px}
  .editorias-par .editoria-bloco{border-bottom:0}
  .editorias-par .editoria-corpo{grid-template-columns:1fr;gap:20px}
  .editorias-par .editoria-lista{border-inline-start:0;padding-inline-start:0}
  /* na metade da largura, 16:9 deixa a foto alta demais e empurra o texto
     para fora da primeira dobra do bloco */
  .editorias-par .editoria-destaque .chamada-figura img{aspect-ratio:2/1;max-height:270px}
  /* Lista de texto puro no par: com a coluna pela metade, a miniatura de 96px
     espremia o título em cinco ou seis linhas. Texto sozinho lê melhor — é o
     que os portais fazem na lista lateral. */
  .editorias-par .editoria-lista .chamada.deitada{grid-template-columns:1fr}
  .editorias-par .editoria-lista .chamada.deitada .chamada-figura{display:none}
}

/* ==========================================================================
   BLOCOS DO EDITOR
   Uma matéria real vem com galeria, legenda, lista, citação e vídeo
   embutido. Sem isto, o corpo quebra no primeiro post que não é só texto.
   ========================================================================== */
.materia-corpo .alignwide{
  max-width:920px;
  margin-inline:calc(50% - 460px);
  width:920px;
}
.materia-corpo .alignfull{
  max-width:none;width:auto;
  margin-inline:calc(50% - 50vw);
}
@media (max-width:1000px){
  .materia-corpo .alignwide{
    width:auto;max-width:none;margin-inline:0;
  }
}

.materia-corpo .alignleft{float:left;margin:.4em 1.6em 1em 0;max-width:46%}
.materia-corpo .alignright{float:right;margin:.4em 0 1em 1.6em;max-width:46%}
.materia-corpo .aligncenter{margin-inline:auto;text-align:center}
.materia-corpo figure{margin:1.8em 0}

.materia-corpo figcaption,
.materia-corpo .wp-caption-text{
  font-family:var(--leitura);
  font-size:.8125rem;line-height:1.5;
  color:var(--meta);
  padding-top:9px;
  text-align:start;
}

.materia-corpo .wp-block-gallery,
.materia-corpo .wp-block-image{margin-block:1.8em}
.materia-corpo .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.materia-corpo .wp-block-separator{
  border:0;border-top:2px solid var(--regra-forte);
  max-width:80px;margin:2.4em 0;
}
.materia-corpo .wp-block-table table{
  width:100%;border-collapse:collapse;
  font-family:var(--display);font-size:.9375rem;
}
.materia-corpo .wp-block-table th,
.materia-corpo .wp-block-table td{
  border:1px solid var(--regra);
  padding:9px 12px;text-align:start;
}
.materia-corpo .wp-block-table th{
  background:var(--papel-off);
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--azul);
}
.materia-corpo .wp-block-pullquote{
  border-block:2px solid var(--azul);
  padding-block:1.1em;margin-block:2em;
}
.materia-corpo .wp-block-pullquote p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.375rem,3.4vw,1.75rem);line-height:1.28;
}

/* ==========================================================================
   COMENTÁRIOS — existem e estão vestidos; ligar é decisão da redação.
   ========================================================================== */
.area-comentarios{max-width:var(--coluna);margin:44px auto 0}
.comentarios .ribbon{margin-bottom:18px}

.lista-comentarios,
.lista-comentarios ol{list-style:none;margin:0;padding:0}
.lista-comentarios ol{padding-inline-start:20px;border-inline-start:2px solid var(--regra)}
.lista-comentarios li{padding-block:16px;border-top:1px solid var(--regra)}
.lista-comentarios > li:first-child{border-top:0;padding-top:0}
.lista-comentarios .comment-author{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:.9375rem;
}
.lista-comentarios .comment-author img{border-radius:50%}
.lista-comentarios .comment-metadata{
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--meta);
  margin-top:4px;
}
.lista-comentarios .comment-content{
  font-family:var(--leitura);font-size:1rem;line-height:1.6;margin-top:10px;
}
.lista-comentarios .reply a{
  display:inline-block;margin-top:8px;padding:6px 0;
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;
}

.aviso-comentarios{
  font-family:var(--leitura);font-size:.9375rem;
  color:var(--meta);margin:0 0 16px;
}

.comment-form{margin-top:28px}
.comment-form label{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--azul);
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;
  font-family:var(--display);font-size:1rem;
  padding:11px 13px;min-height:44px;
  border:2px solid var(--regra);border-radius:0;
  background:var(--papel);color:var(--tinta);
}
.comment-form input:focus,
.comment-form textarea:focus{border-color:var(--azul);outline:none}
.comment-form input:focus-visible,
.comment-form textarea:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.comment-form p{margin:0 0 16px}
.comment-form .botao-enviar,
.comment-form input[type=submit]{
  font-family:var(--display);font-weight:700;font-size:.875rem;
  letter-spacing:.04em;text-transform:uppercase;
  padding:13px 26px;min-height:44px;
  background:var(--azul);color:#fff;
  border:2px solid var(--azul);border-radius:0;cursor:pointer;
  transition:background 150ms,color 150ms;
}
.comment-form .botao-enviar:hover,
.comment-form input[type=submit]:hover{background:var(--papel);color:var(--azul)}

/* ==========================================================================
   DATA DE HOJE — todo jornal carrega a data. Diz, sem legenda, que alguém
   está cuidando daquilo hoje.
   ========================================================================== */
.data-de-hoje{
  margin:0 0 0 20px;white-space:nowrap;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
  align-self:center;
  padding-inline-start:20px;
  border-inline-start:1px solid var(--regra);
}
@media (max-width:1023px){ .data-de-hoje{display:none} }

/* ==========================================================================
   MENU DO CELULAR
   Sem ele as editorias ficam numa faixa que rola de lado sem avisar que há
   mais — o leitor só descobre por acidente.
   ========================================================================== */
.abre-menu{display:none}

@media (max-width:1023px){
  /* O hambúrguer é o único caminho para as editorias no celular: ele tem que
     ser o alvo mais confortável do cabeçalho, não o menor. */
  /* Sem margem negativa: ela deslocava a coluna e tirava a logo do centro. */
  .abre-menu{
    display:inline-flex;
    width:52px;height:52px;
    justify-self:start;
  }
  .abre-menu svg{width:30px;height:30px}

  .editorias{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows 200ms cubic-bezier(.23,1,.32,1);
    border-top:0;
  }
  .editorias > .envelope{overflow:hidden;min-height:0}
  .editorias.aberto{
    grid-template-rows:1fr;
    border-top:1px solid var(--regra);
  }
  .editorias ul{
    display:block;
    overflow:visible;
    padding-block:4px 10px;
  }
  .editorias a{
    padding:13px 0;
    border-bottom:1px solid var(--regra);
    font-size:.8125rem;
  }
  .editorias li:last-child a{border-bottom:0}
  .editorias li:first-child a{padding-inline-start:0}
  .editorias .atual a{box-shadow:none;border-inline-start:3px solid var(--azul);padding-inline-start:12px}
}

/* ==========================================================================
   TRILHA — onde o leitor está e como volta
   ========================================================================== */
.trilha{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
  margin-bottom:12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.trilha a{color:var(--meta);padding:5px 0;display:inline-block}
.trilha a:hover{color:var(--azul)}
.trilha span{color:var(--apagado)}

/* ==========================================================================
   COMPARTILHAR — WhatsApp primeiro, que é por onde notícia de cidade circula
   ========================================================================== */
.compartilhar{
  max-width:var(--coluna);
  margin:34px auto 0;
  padding-top:18px;
  border-top:1px solid var(--regra);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;
}
.compartilhar-rotulo{
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--meta);
}
.compartilhar ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.compartilhar a,
.compartilhar button{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 15px;
  font-family:var(--display);font-weight:600;font-size:.8125rem;
  color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--regra);
  border-radius:0;cursor:pointer;
  transition:border-color 150ms,color 150ms,background 150ms;
}
.compartilhar a:hover,
.compartilhar button:hover{
  border-color:var(--azul);color:var(--azul);text-decoration:none;
}
.compartilhar svg{width:17px;height:17px;flex:0 0 auto}

/* O WhatsApp ganha peso: é o canal que importa para notícia local. Não usa o
   vermelho da marca — o vermelho aqui significaria urgência, e não é disso
   que se trata. */
.compartilhar .compartilhar-zap{
  background:var(--azul);color:#fff;border-color:var(--azul);
}
.compartilhar .compartilhar-zap:hover{
  background:var(--papel);color:var(--azul);
}

.copiar-aviso{
  font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--azul);
}

@media (max-width:520px){
  .compartilhar a span,
  .compartilhar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compartilhar a,
  .compartilhar button{padding:0;width:44px;justify-content:center}
  .compartilhar svg{width:19px;height:19px}
}

/* ==========================================================================
   VÍDEOS — painel escuro de sala de cinema: player | lista.
   Segunda região invertida do tema (a outra é o rodapé): vídeo se assiste no
   escuro, e o contraste separa a seção do fluxo de texto em volta.
   ========================================================================== */
.videos-painel{background:var(--invertido);color:#fff;display:grid}
@media (min-width:900px){
  .videos-painel{grid-template-columns:minmax(0,2.15fr) minmax(290px,1fr)}
}
.videos-palco{padding:18px}
@media (min-width:900px){ .videos-palco{padding:28px} }

.video-player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-capa{position:absolute;inset:0;display:block}
.video-capa img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--invertido);
  display:flex;align-items:center;justify-content:center;
  transition:transform 150ms cubic-bezier(.23,1,.32,1);
}
.video-play svg{width:30px;height:30px;margin-inline-start:4px}
.video-capa:hover .video-play,
.video-capa:focus-visible .video-play{transform:translate(-50%,-50%) scale(1.06)}
.video-capa:focus-visible{outline:3px solid #fff;outline-offset:-3px}

.video-titulo{
  font-family:var(--display);font-weight:600;color:#fff;
  font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.3;
  margin:16px 0 0;
}
.video-acoes{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.botao-ao-vivo,
.botao-canal{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;
  font-family:var(--display);font-weight:600;font-size:.8125rem;
  color:#fff;border:1px solid rgba(255,255,255,.4);
  transition:background 150ms,color 150ms,border-color 150ms;
}
.botao-ao-vivo{background:#fff;color:var(--invertido);border-color:#fff}
.botao-ao-vivo:hover{background:transparent;color:#fff;text-decoration:none}
.botao-canal:hover{border-color:#fff;text-decoration:none}
/* O ponto vermelho é o sinal universal de "ao vivo" — e vai sempre com a palavra. */
.ponto-ao-vivo{width:9px;height:9px;border-radius:50%;background:var(--vermelho);flex:0 0 auto}

.videos-lista{
  list-style:none;margin:0;padding:10px 12px 14px;
  background:#16283A;display:flex;flex-direction:column;gap:2px;
}
@media (min-width:900px){ .videos-lista{padding:22px 18px} }
.video-item{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:start;
  padding:8px;color:#fff;
}
.video-item:hover{background:rgba(255,255,255,.07);text-decoration:none}
.video-item:focus-visible{outline:2px solid #fff;outline-offset:0}
.video-item-capa{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.video-item-capa img{width:100%;height:100%;object-fit:cover;display:block}
.video-item-selo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.selo-play{
  width:30px;height:30px;padding:7px 6px 7px 8px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--invertido);
}
.selo-assistindo{display:none;font-family:var(--display);font-weight:700;font-size:.8125rem;color:#fff}
.video-item.assistindo .video-item-capa{outline:2px solid #fff;outline-offset:-2px}
.video-item.assistindo .video-item-selo{background:rgba(14,28,40,.64)}
.video-item.assistindo .selo-assistindo{display:block}
.video-item.assistindo .selo-play{display:none}
.video-item-texto{display:flex;flex-direction:column;gap:6px;min-width:0}
.video-item-titulo{
  font-family:var(--display);font-weight:600;font-size:.875rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* A hora das matérias é cinza-meta sobre branco; no escuro ela sumiria. */
.videos-painel .hora{color:#A9B7C4}

.videos-sem-lista{padding:28px}
.videos-aviso{margin:0;font-family:var(--display);font-size:1.0625rem;line-height:1.45;max-width:60ch}

@media (max-width:520px){
  .video-item{grid-template-columns:112px minmax(0,1fr);gap:12px}
  .video-play{width:60px;height:60px}
}

/* ==========================================================================
   ARTIGOS — em opinião quem assina é o assunto.
   ========================================================================== */
.chamada-autor{
  margin:8px 0 0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--meta);
}
.chamada-autor a{color:var(--azul);display:inline-block;padding:5px 0}
.chamada-autor a:hover{text-decoration:underline}

/* ==========================================================================
   MOVIMENTO — só transição de cor, 150ms. Nada de scroll-reveal.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   IMPRESSÃO
   ========================================================================== */
@media print{
  .topo-acoes,.editorias,.busca-topo,.rodape,.paginacao{display:none}
  body{font-size:11pt}
  .materia-corpo{max-width:none}
}

/* ==========================================================================
   LEIA TAMBÉM no meio do texto
   Interrompe a leitura de propósito, então precisa ser curto e claramente
   outra coisa: régua nos dois lados, rótulo em mono, uma linha só.
   ========================================================================== */
.leia-tambem{
  margin:2em 0;
  padding:16px 0;
  border-block:1px solid var(--regra);
  display:grid;
  gap:6px;
}
.leia-tambem-rotulo{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--vermelho);
}
.leia-tambem a{
  font-family:var(--display);
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.3;
  color:var(--azul);
  padding:4px 0;
}
.leia-tambem a:hover{text-decoration:underline;text-underline-offset:2px}