/*
Theme Name: OesteOn
Theme URI: https://oesteon.com.br/
Author: Crazy Diamond Soluções Digitais
Author URI: https://crazydiamond.com.br/
Description: Tema do portal OesteOn — notícias e ofertas do oeste da Bahia. Implementa a marca "A Nascente" e os tokens fechados em branding/design-tokens.md. Os tipos de conteúdo, o feed do podcast, o schema e o hardening NÃO vivem aqui: vivem no must-use plugin OesteOn Core, para que trocar de tema não leve as ofertas junto.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietário — uso exclusivo do cliente
Text Domain: oesteon
Tags: news, portal, regional
*/

/* ==========================================================================
   1. FONTES — auto-hospedadas, nunca pelo CDN do Google (LGPD e LCP)
   ==========================================================================
   Duas variáveis, subset latin: 145 KB no total. Todo o português cabe em U+00C0–00FF, então o
   latin-ext existe com unicode-range declarado e o navegador só o baixa se a página tiver um
   caractere que o exija — o que, em pt-BR, não acontece.
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("assets/fontes/archivo-latin.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	src: url("assets/fontes/archivo-latin-ext.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Literata";
	src: url("assets/fontes/literata-latin.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
		U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Literata";
	src: url("assets/fontes/literata-latin-ext.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
		U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
		U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. TOKENS — o contrato está em branding/design-tokens.md
   ==========================================================================
   O portal é claro por decisão, não por omissão: `color-scheme: light` impede o navegador de
   inverter cor de formulário e de barra de rolagem por conta própria. Tema escuro é fase 2 e
   exige uma paleta própria medida em AA, que hoje não existe.
   ========================================================================== */

:root {
	color-scheme: light;

	--oe-tinta: #0B2740;
	--oe-tinta-funda: #071A2C;
	--oe-apoio: #14456F;
	--oe-ouro: #F5B315;

	--oe-papel: #FFFFFF;
	--oe-superficie: #F4F6F9;
	--oe-areia: #F4F1EA;
	--oe-borda: #DCE3EA;

	--oe-texto: #0B2740;
	--oe-corpo: #33414F;
	--oe-suave: #61707F;

	--oe-raio: 4px;
	--oe-raio-selo: 3px;
	--oe-fio: 1px;
	--oe-fio-forte: 3px;

	--oe-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--oe-leitura: "Literata", Georgia, "Times New Roman", serif;

	--oe-largura: 1180px;
	--oe-leitura-largura: 68ch;
}

/* ==========================================================================
   3. BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--oe-papel);
	color: var(--oe-corpo);
	font-family: var(--oe-leitura);
	font-size: 19px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe { max-width: 100%; }

img,
video { height: auto; display: block; }

a { color: var(--oe-apoio); }
a:hover { text-decoration-thickness: 2px; }

/* Foco visível em tudo que recebe teclado. Nunca remover sem pôr outro no lugar. */
:focus-visible {
	outline: 3px solid var(--oe-ouro);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--oe-display);
	color: var(--oe-texto);
	line-height: 1.14;
	letter-spacing: -0.018em;
	margin: 0 0 12px;
	text-wrap: balance;
}

h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
h2 { font-size: 25px; font-weight: 700; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.008em; }

p { margin: 0 0 18px; }

@media (min-width: 760px) {
	h1 { font-size: 46px; }
	h2 { font-size: 30px; }
	h3 { font-size: 21px; }
}

.oe-env {
	width: 100%;
	max-width: var(--oe-largura);
	margin-inline: auto;
	padding-inline: 20px;
}

@media (min-width: 760px) {
	.oe-env { padding-inline: 28px; }
}

/* Visível só para leitor de tela, e visível para todo mundo quando recebe foco. */
.oe-pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--oe-tinta);
	color: var(--oe-papel);
	font-family: var(--oe-display);
	font-size: 15px;
	font-weight: 600;
	padding: 12px 18px;
}
.oe-pular:focus { left: 0; }

.oe-so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   4. PEÇAS DE TEXTO DA MARCA
   ========================================================================== */

.oe-meta {
	font-family: var(--oe-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oe-suave);
	margin: 0;
}

.oe-selo {
	display: inline-block;
	/* `justify-self` porque o selo vive dentro de contêineres em grid (cabeça do artigo, card),
	   e filho de grid estica por padrão: sem isto ele vira uma tarja da largura da coluna. */
	justify-self: start;
	font-family: var(--oe-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oe-papel);
	background: var(--oe-tinta);
	padding: 4px 9px;
	border-radius: var(--oe-raio-selo);
	text-decoration: none;
}
a.oe-selo:hover { background: var(--oe-apoio); }

/* A editoria NÃO tem cor própria: quatro cores brigariam com a foto e com o ouro.
   O que distingue uma da outra é a palavra. */

.oe-titulo-bloco {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding-top: 8px;
	border-top: var(--oe-fio-forte) solid var(--oe-ouro);
}
.oe-titulo-bloco h1,
.oe-titulo-bloco h2 { margin: 0; }
.oe-titulo-bloco a {
	font-family: var(--oe-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.oe-titulo-bloco a:hover { text-decoration: underline; }

/* ==========================================================================
   5. CABEÇALHO
   ========================================================================== */

.oe-topo {
	background: var(--oe-tinta);
	border-bottom: var(--oe-fio-forte) solid var(--oe-ouro);
}

.oe-topo-linha {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-block: 14px;
}

.oe-marca { display: block; flex: none; }
.oe-marca img { height: 30px; width: auto; }

@media (min-width: 760px) {
	.oe-marca img { height: 36px; }
}

.oe-topo-direita {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.oe-busca-abrir,
.oe-menu-abrir {
	background: none;
	border: var(--oe-fio) solid rgba(255, 255, 255, 0.28);
	border-radius: var(--oe-raio);
	color: var(--oe-papel);
	font-family: var(--oe-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 7px 12px;
	cursor: pointer;
}
.oe-busca-abrir:hover,
.oe-menu-abrir:hover { border-color: var(--oe-ouro); color: var(--oe-ouro); }

@media (min-width: 900px) {
	.oe-menu-abrir { display: none; }
}

/* -- no ar agora ---------------------------------------------------------- */

.oe-no-ar {
	display: none;
	align-items: center;
	gap: 8px;
	font-family: var(--oe-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oe-ouro);
	text-decoration: none;
}
.oe-no-ar[data-ativo="1"] { display: inline-flex; }
.oe-no-ar:hover { color: var(--oe-papel); }

.oe-no-ar-ponto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--oe-ouro);
	flex: none;
	animation: oe-pulsa 2s ease-in-out infinite;
}

@keyframes oe-pulsa {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.oe-no-ar-texto {
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 639px) {
	.oe-no-ar-texto { display: none; }
}

/* -- navegação ------------------------------------------------------------ */

.oe-nav {
	border-top: var(--oe-fio) solid rgba(255, 255, 255, 0.14);
}
.oe-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	padding-block: 11px;
}
.oe-nav a {
	font-family: var(--oe-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #B7CADB;
	text-decoration: none;
}
.oe-nav a:hover,
.oe-nav .current-menu-item > a,
.oe-nav .current_page_item > a { color: var(--oe-papel); }

@media (max-width: 899px) {
	.oe-nav { display: none; }
	.oe-nav[data-aberto="1"] { display: block; }
	.oe-nav ul { flex-direction: column; gap: 0; }
	.oe-nav li { border-bottom: var(--oe-fio) solid rgba(255, 255, 255, 0.1); }
	.oe-nav a { display: block; padding-block: 12px; }
}

/* -- busca ---------------------------------------------------------------- */

.oe-busca {
	display: none;
	padding-block: 14px;
	border-top: var(--oe-fio) solid rgba(255, 255, 255, 0.14);
}
.oe-busca[data-aberto="1"] { display: block; }
.oe-busca form { display: flex; gap: 8px; }
.oe-busca input[type="search"] {
	flex: 1;
	font-family: var(--oe-display);
	font-size: 16px;
	padding: 10px 14px;
	border: var(--oe-fio) solid rgba(255, 255, 255, 0.3);
	border-radius: var(--oe-raio);
	background: var(--oe-tinta-funda);
	color: var(--oe-papel);
}
.oe-busca input[type="search"]::placeholder { color: #7D97AC; }

.oe-botao {
	font-family: var(--oe-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--oe-raio);
	background: var(--oe-ouro);
	color: var(--oe-tinta);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.oe-botao:hover { background: #E0A20E; }

/* ==========================================================================
   6. CHAMADA PRINCIPAL
   ========================================================================== */

.oe-chamada {
	display: grid;
	gap: 20px;
	margin-block: 28px;
}

@media (min-width: 900px) {
	.oe-chamada {
		grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr);
		gap: 26px;
	}
	.oe-chamada-secundarias { display: grid; gap: 20px; align-content: start; }
}

.oe-destaque {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--oe-raio);
	background: var(--oe-tinta-funda);
	text-decoration: none;
	aspect-ratio: 16 / 10;
}
.oe-destaque img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A manchete não pousa na foto: pousa numa placa que sobe do pé da imagem.
   Papel sobre #071A2C dá 17.60:1, e é o par validado para manchete sobre foto. */
.oe-destaque-placa {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px;
	background: linear-gradient(
		180deg,
		rgba(7, 26, 44, 0) 0%,
		rgba(7, 26, 44, 0.92) 46%,
		rgba(7, 26, 44, 0.97) 100%
	);
}
.oe-destaque-placa h2,
.oe-destaque-placa h3 { color: var(--oe-papel); margin: 10px 0 8px; }
.oe-destaque-placa .oe-meta { color: #9FB8CC; }

.oe-destaque-sem-foto {
	aspect-ratio: auto;
	padding: 26px 22px;
}
.oe-destaque-sem-foto .oe-destaque-placa {
	position: static;
	padding: 0;
	background: none;
}

/* ==========================================================================
   7. CARDS DE MATÉRIA
   ========================================================================== */

.oe-grade {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.oe-card {
	display: grid;
	gap: 8px;
	align-content: start;
}
.oe-card-foto {
	display: block;
	border-radius: var(--oe-raio);
	overflow: hidden;
	background: var(--oe-superficie);
	aspect-ratio: 16 / 10;
}
.oe-card-foto img { width: 100%; height: 100%; object-fit: cover; }
.oe-card h3 { margin: 0; }
.oe-card h3 a { color: inherit; text-decoration: none; }
.oe-card h3 a:hover { color: var(--oe-apoio); }
.oe-card .oe-resumo {
	font-size: 16px;
	color: var(--oe-corpo);
	margin: 0;
}

/* Lista cronológica das últimas — sem foto, para caber muita coisa em pouca tela. */
.oe-lista { list-style: none; margin: 0; padding: 0; }
.oe-lista li {
	padding-block: 14px;
	border-bottom: var(--oe-fio) solid var(--oe-borda);
	display: grid;
	gap: 5px;
}
.oe-lista li:last-child { border-bottom: 0; }
.oe-lista a {
	font-family: var(--oe-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--oe-texto);
	text-decoration: none;
	line-height: 1.3;
}
.oe-lista a:hover { color: var(--oe-apoio); }
.oe-lista-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   8. OFERTAS — a diferença deste portal
   ========================================================================== */

.oe-faixa-ofertas {
	background: var(--oe-areia);
	padding-block: 30px;
	margin-block: 34px;
}

.oe-ofertas {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.oe-oferta {
	background: var(--oe-papel);
	border: var(--oe-fio) solid var(--oe-borda);
	border-radius: var(--oe-raio);
	padding: 16px;
	display: grid;
	gap: 7px;
	align-content: start;
}
.oe-oferta-foto {
	display: block;
	border-radius: var(--oe-raio-selo);
	overflow: hidden;
	background: var(--oe-superficie);
	aspect-ratio: 4 / 3;
	margin-bottom: 4px;
}
.oe-oferta-foto img { width: 100%; height: 100%; object-fit: cover; }

.oe-oferta-anunciante {
	font-family: var(--oe-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oe-suave);
	text-decoration: none;
}
.oe-oferta-anunciante:hover { color: var(--oe-apoio); }

.oe-oferta h3 {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	margin: 0;
	line-height: 1.3;
}
.oe-oferta h3 a { color: inherit; text-decoration: none; }
.oe-oferta h3 a:hover { color: var(--oe-apoio); }

.oe-preco-de {
	font-family: var(--oe-display);
	font-size: 13px;
	color: var(--oe-suave);
	text-decoration: line-through;
}

/* O preço NÃO é texto amarelo: ouro sobre branco dá 1.85:1 e reprova em qualquer critério.
   O preço é o selo — tinta sobre ouro, 8.23:1. Esta é a regra que este projeto mais vai testar. */
.oe-preco {
	justify-self: start;
	display: inline-block;
	background: var(--oe-ouro);
	color: var(--oe-tinta);
	border-radius: var(--oe-raio-selo);
	padding: 3px 10px;
	font-family: var(--oe-display);
	font-weight: 800;
	font-stretch: 112%;
	font-size: 27px;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.oe-validade {
	font-family: var(--oe-display);
	font-size: 12px;
	color: var(--oe-suave);
}

.oe-selo-encerrada {
	justify-self: start;
	font-family: var(--oe-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oe-papel);
	background: var(--oe-suave);
	padding: 3px 9px;
	border-radius: var(--oe-raio-selo);
}

/* Oferta encerrada continua no ar, de propósito: rende busca de cauda longa e mostra ao
   anunciante que o histórico existe. O que muda é o peso visual, não a presença. */
.oferta-encerrada .oe-preco { background: var(--oe-borda); color: var(--oe-suave); }
.oferta-encerrada .oe-oferta-foto img { opacity: 0.55; }

/* ==========================================================================
   9. MATÉRIA
   ==========================================================================
   Coluna única, sem barra lateral: melhora a leitura no celular, que é onde o público está,
   e melhora o Lighthouse, que é meta contratual.
   ========================================================================== */

.oe-artigo { margin-block: 30px 44px; }

.oe-artigo-cabeca {
	max-width: var(--oe-leitura-largura);
	display: grid;
	gap: 12px;
	margin-bottom: 22px;
}
.oe-artigo-cabeca h1 { margin: 0; }
.oe-apoio {
	font-family: var(--oe-leitura);
	font-size: 21px;
	color: var(--oe-corpo);
	margin: 0;
	line-height: 1.45;
}
.oe-assinatura {
	display: flex;
	gap: 8px 16px;
	flex-wrap: wrap;
	align-items: center;
	padding-top: 10px;
	border-top: var(--oe-fio) solid var(--oe-borda);
}

.oe-figura { margin: 0 0 24px; }
.oe-figura img { width: 100%; border-radius: var(--oe-raio); }
.oe-figura figcaption {
	font-family: var(--oe-display);
	font-size: 13px;
	color: var(--oe-suave);
	margin-top: 8px;
}

.oe-corpo { max-width: var(--oe-leitura-largura); }
.oe-corpo > * { max-width: 100%; }
.oe-corpo h2 { font-size: 25px; margin-top: 34px; }
.oe-corpo h3 { margin-top: 28px; }
.oe-corpo ul,
.oe-corpo ol { padding-left: 22px; margin: 0 0 18px; }
.oe-corpo li { margin-bottom: 8px; }
.oe-corpo blockquote {
	margin: 26px 0;
	padding-left: 18px;
	border-left: var(--oe-fio-forte) solid var(--oe-ouro);
	font-size: 21px;
	color: var(--oe-texto);
}
.oe-corpo blockquote p:last-child { margin-bottom: 0; }
.oe-corpo img { border-radius: var(--oe-raio); }
.oe-corpo table { width: 100%; border-collapse: collapse; font-family: var(--oe-display); font-size: 15px; }
.oe-corpo th,
.oe-corpo td { text-align: left; padding: 10px 12px; border-bottom: var(--oe-fio) solid var(--oe-borda); }
.oe-rolagem { overflow-x: auto; }

/* -- compartilhar: WhatsApp primeiro, porque em portal regional é por ali que a notícia circula */
.oe-compartilhar {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin: 32px 0;
	padding-block: 18px;
	border-block: var(--oe-fio) solid var(--oe-borda);
	max-width: var(--oe-leitura-largura);
}
.oe-compartilhar .oe-meta { margin-right: 4px; }
.oe-compartilhar a {
	font-family: var(--oe-display);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--oe-tinta);
	border: var(--oe-fio) solid var(--oe-borda);
	border-radius: var(--oe-raio);
	padding: 8px 14px;
}
.oe-compartilhar a:hover { border-color: var(--oe-tinta); }
.oe-compartilhar a:first-of-type {
	background: var(--oe-tinta);
	color: var(--oe-papel);
	border-color: var(--oe-tinta);
}
.oe-compartilhar a:first-of-type:hover { background: var(--oe-apoio); border-color: var(--oe-apoio); }

/* ==========================================================================
   9b. RÁDIO AO VIVO — player embutido da Brascast
   ==========================================================================
   O iframe é de terceiro e traz o visual próprio deles. O modelo 06 foi escolhido por ser escuro
   com acento dourado, que é a única combinação dos nove que não briga com a paleta; o bloco em
   volta é nosso e faz a costura.
   ========================================================================== */

.oe-radio {
	background: var(--oe-tinta-funda);
	padding-block: 30px 34px;
	margin-block: 34px;
}
.oe-titulo-bloco-escuro { border-top-color: var(--oe-ouro); }
.oe-titulo-bloco-escuro h2 { color: var(--oe-papel); }

/* Altura fixa e declarada: iframe sem altura reservada empurra a página quando carrega, e é
   exatamente isso que o CLS mede. 96 px é a altura real do modelo 06, medida na tela. */
.oe-radio-player {
	display: block;
	width: 100%;
	height: 96px;
	border: 0;
	border-radius: var(--oe-raio);
	background: var(--oe-tinta);
}

/* ==========================================================================
   10. PODCAST
   ========================================================================== */

.oe-podcast-capa {
	display: grid;
	gap: 26px;
	margin-block: 30px;
	align-items: start;
}
@media (min-width: 760px) {
	.oe-podcast-capa { grid-template-columns: 260px minmax(0, 1fr); }
}
.oe-podcast-capa img { border-radius: var(--oe-raio); width: 100%; }
.oe-assinar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.oe-episodio {
	padding-block: 22px;
	border-bottom: var(--oe-fio) solid var(--oe-borda);
	display: grid;
	gap: 10px;
}
.oe-episodio:last-child { border-bottom: 0; }
.oe-episodio h3 { margin: 0; }
.oe-episodio h3 a { color: inherit; text-decoration: none; }
.oe-episodio audio { width: 100%; }

/* ==========================================================================
   11. ANUNCIANTE
   ========================================================================== */

.oe-anunciante-cabeca {
	background: var(--oe-superficie);
	border: var(--oe-fio) solid var(--oe-borda);
	border-radius: var(--oe-raio);
	padding: 24px;
	margin-block: 28px;
	display: grid;
	gap: 10px;
}
.oe-anunciante-cabeca h1 { margin: 0; font-size: 30px; }

/* O estado vazio ocupa a largura do contêiner, e o TEXTO dentro dele respeita a medida de
   leitura. Travar a caixa inteira em 68ch deixava um terço da tela vazio ao lado de uma caixa que
   já diz "não há nada aqui" — o portal inteiro é estado vazio até o cliente publicar, então esta
   é a tela que ele mais vai ver. */
.oe-vazio {
	background: var(--oe-superficie);
	border: var(--oe-fio) solid var(--oe-borda);
	border-radius: var(--oe-raio);
	padding: clamp(26px, 4vw, 44px);
	margin-block: 26px 40px;
}
.oe-vazio > * { max-width: var(--oe-leitura-largura); }
.oe-vazio h1,
.oe-vazio h2 { margin-bottom: 10px; }
.oe-vazio p:last-child { margin-bottom: 0; }

/* ==========================================================================
   12. PAGINAÇÃO
   ========================================================================== */

.oe-paginacao {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-block: 34px;
	font-family: var(--oe-display);
	font-size: 15px;
	font-weight: 600;
}
.oe-paginacao .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: var(--oe-fio) solid var(--oe-borda);
	border-radius: var(--oe-raio);
	text-decoration: none;
	color: var(--oe-tinta);
}
.oe-paginacao .page-numbers:hover { border-color: var(--oe-tinta); }
.oe-paginacao .page-numbers.current {
	background: var(--oe-tinta);
	border-color: var(--oe-tinta);
	color: var(--oe-papel);
}

/* ==========================================================================
   13. RODAPÉ
   ========================================================================== */

.oe-rodape {
	background: var(--oe-tinta-funda);
	color: #9FB8CC;
	padding-block: 44px 30px;
	margin-top: 54px;
	font-family: var(--oe-display);
	font-size: 15px;
	border-top: var(--oe-fio-forte) solid var(--oe-ouro);
}
.oe-rodape a { color: #C7D8E6; text-decoration: none; }
.oe-rodape a:hover { color: var(--oe-ouro); text-decoration: underline; }

.oe-rodape-grade {
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	padding-bottom: 30px;
	border-bottom: var(--oe-fio) solid rgba(255, 255, 255, 0.12);
}
.oe-rodape h2 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--oe-ouro);
	margin: 0 0 12px;
}
.oe-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Largura, não altura: o mínimo de reprodução do manual é uma medida de LARGURA (150 px para o
   lockup horizontal), e travar pela altura deixa o mínimo depender da proporção do arquivo. */
.oe-rodape-marca img { width: 260px; max-width: 100%; height: auto; margin-bottom: 16px; }

/* A assinatura da casa: só o brasão.
   A 28 px com 75% de opacidade ele virava uma mancha escura sobre o azul do rodapé — o brasão é
   prismático e escuro, e não sobrevive a ser discreto sobre fundo escuro. A 36 px e opaco ele lê
   como assinatura; abaixo disso lê como sujeira. */
.oe-assina-cd { display: inline-flex; }
.oe-assina-cd img { width: 36px; height: 36px; }

.oe-rodape-fim {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 22px;
	font-size: 13px;
	color: #7D97AC;
	align-items: center;
}

/* ==========================================================================
   14. RESPEITO AO LEITOR
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* O ponto do "no ar" para de pulsar e fica sólido: o sinal continua, o movimento não. */
	.oe-no-ar-ponto { opacity: 1; }
}

@media print {
	.oe-topo,
	.oe-rodape,
	.oe-compartilhar,
	.oe-faixa-ofertas { display: none; }
	body { font-size: 12pt; }
	.oe-corpo { max-width: none; }
}