/* =============================================================
   SE LIGA TAPIRATIBA — folha de estilo do portal
   -------------------------------------------------------------
   Tema CLARO, único. O modo escuro foi retirado a pedido do
   cliente; o cabeçalho segue verde da marca e todo o corpo da
   página é branco.

   Linguagem visual: revista. Fundo branco, muito respiro, réguas
   finas em vez de caixas, título em serifa de notícia e cards de
   lista na horizontal — texto à esquerda, foto à direita.

   Paleta tirada do próprio logo: verde #173916, creme #FDF7D3 e
   o dourado da lupa.
   ============================================================= */

/* -------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------- */

:root {
	/* Marca */
	--verde-900: #0E2610;
	--verde-800: #173916;
	--verde-700: #22521F;
	--verde-600: #2F6B29;
	--dourado-600: #8A6D0B;
	--dourado-500: #C9A227;
	--dourado-400: #E0BC4A;
	--creme: #FDF7D3;
	--urgente: #C1271D;

	/* Superfícies e texto */
	--bg: #FFFFFF;
	--bg-alt: #F7F7F3;
	--superficie: #FFFFFF;
	--superficie-2: #FBFBF7;
	--texto: #14160F;
	--texto-2: #5D6356;
	--texto-3: #868C7E;
	--borda: #E6E6DE;
	--borda-forte: #C9C9BC;
	--link: #22521F;
	--acento: #8A6D0B;
	--marca: #173916;
	--marca-texto: #FDF7D3;
	--sombra: 0 1px 2px rgba(20, 22, 15, .05), 0 10px 30px rgba(20, 22, 15, .06);

	/* Tipografia
	   Newsreader: serifa desenhada para notícia, para títulos e corpo.
	   Archivo: sem serifa, só para etiqueta, meta e botão. */
	--fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
	--fonte-texto: "Newsreader", Georgia, "Times New Roman", serif;
	--fonte-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: .75rem;
	--t-sm: .8125rem;
	--t-base: 1rem;
	--t-md: 1.0625rem;
	--t-lg: 1.25rem;
	--t-xl: clamp(1.35rem, 1.1rem + .9vw, 1.65rem);
	--t-2xl: clamp(1.6rem, 1.25rem + 1.5vw, 2.15rem);
	--t-3xl: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
	/* Manchete do carrossel. Estava em 3,1rem no teto e um título de portal
	   regional é longo: "Dois homens ficam feridos após serem baleados durante
	   evento municipal em Tambaú" ocupava seis linhas e engolia a foto e a
	   linha fina. O teto menor mantém a hierarquia sem virar cartaz. */
	--t-hero: clamp(1.3rem, .95rem + 1.5vw, 2.1rem);

	/* Ritmo em razão constante */
	--e-1: .25rem;
	--e-2: .5rem;
	--e-3: .75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4.5rem;

	--largura: 1200px;
	--largura-leitura: 43rem;
	--raio: 2px;
	--cabecalho-altura: 76px;

	color-scheme: light;
}

/* -------------------------------------------------------------
   1b. MODO ESCURO
   -------------------------------------------------------------
   Três estados, e é por isso que o mesmo bloco aparece duas vezes:

   - `@media (prefers-color-scheme: dark)` atende quem nunca clicou no
     botão e usa o aparelho no escuro. Vem guardado por
     `:not([data-tema="claro"])` para que escolher "claro" num celular
     escuro realmente deixe o site claro.
   - `[data-tema="escuro"]` atende quem clicou, e precisa existir fora do
     media query para vencer nos dois sentidos.

   Só as superfícies e o texto mudam. O verde e o dourado são a marca e
   continuam iguais — o que muda é o chão em que eles pousam. O link vira
   dourado porque verde escuro sobre fundo escuro não se lê.
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) {
		--bg: #0F1310;
		--bg-alt: #151A15;
		--superficie: #141912;
		--superficie-2: #1A2019;
		--texto: #ECEFE6;
		--texto-2: #A9B2A3;
		--texto-3: #7E877B;
		--borda: #293027;
		--borda-forte: #3D453A;
		--link: #E0BC4A;
		--acento: #E0BC4A;
		--marca: #0B1A0C;
		--marca-texto: #FDF7D3;
		--sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);

		color-scheme: dark;
	}
}

:root[data-tema="escuro"] {
	--bg: #0F1310;
	--bg-alt: #151A15;
	--superficie: #141912;
	--superficie-2: #1A2019;
	--texto: #ECEFE6;
	--texto-2: #A9B2A3;
	--texto-3: #7E877B;
	--borda: #293027;
	--borda-forte: #3D453A;
	--link: #E0BC4A;
	--acento: #E0BC4A;
	--marca: #0B1A0C;
	--marca-texto: #FDF7D3;
	--sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .45);

	color-scheme: dark;
}

/* -------------------------------------------------------------
   1c. BOTÃO DE TEMA E POPUP DE INSCRIÇÃO
   ---------------------------------------------------------- */

/* Um ícone por vez, e o que aparece é o destino, não o estado atual:
   no claro mostra a lua ("clique para escurecer"). */
.icone-btn--tema { position: relative; }
.icone-tema { display: none; line-height: 0; }
.icone-tema--lua { display: block; }

:root[data-tema="escuro"] .icone-tema--lua { display: none; }
:root[data-tema="escuro"] .icone-tema--sol { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .icone-tema--lua { display: none; }
	:root:not([data-tema="claro"]) .icone-tema--sol { display: block; }
	/* A escolha explícita tem de vencer o media query nos dois sentidos. */
	:root[data-tema="claro"] .icone-tema--lua { display: block; }
	:root[data-tema="claro"] .icone-tema--sol { display: none; }
}

.popup {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: var(--e-4);
}

.popup[hidden] { display: none; }

.popup__fundo {
	position: absolute;
	inset: 0;
	/* Escuro o bastante para o painel ser a única coisa na tela. */
	background: rgba(9, 16, 8, .82);
	opacity: 0;
	transition: opacity .25s ease;
}

.popup__caixa {
	position: relative;
	width: min(40rem, 100%);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	background: var(--superficie);
	color: var(--texto);
	border-radius: var(--raio);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
	transform: translateY(16px) scale(.98);
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
	overflow: hidden;
}

/* A faixa da marca faz o convite parecer parte do jornal, e não um banner
   de terceiro colado por cima. */
.popup__faixa {
	background: var(--marca);
	border-bottom: 3px solid var(--dourado-500);
	padding: var(--e-4) var(--e-6);
	display: flex;
	align-items: center;
	min-height: 72px;
}

.popup__logo { height: 44px; width: auto; display: block; }

.popup__marca {
	font-family: var(--fonte-titulo);
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--marca-texto);
}

.popup__miolo { padding: var(--e-6); }

.popup[data-aberto="true"] .popup__fundo { opacity: 1; }
.popup[data-aberto="true"] .popup__caixa { transform: none; opacity: 1; }

/* Celular: o painel encosta nas bordas e o miolo aperta, senão o teclado
   virtual cobre o botão de enviar. */
@media (max-width: 560px) {
	.popup { padding: 0; align-items: end; }
	.popup__caixa { width: 100%; border-radius: 0; max-height: 92dvh; }
	.popup__faixa { padding: var(--e-3) var(--e-4); min-height: 60px; }
	.popup__logo { height: 34px; }
	.popup__miolo { padding: var(--e-5) var(--e-4) var(--e-4); }
}

@media (prefers-reduced-motion: reduce) {
	.popup__fundo, .popup__caixa { transition: none; }
}

/* Sobre a faixa verde, então o X é creme — não o cinza do texto. */
.popup__fechar {
	position: absolute;
	top: var(--e-2);
	right: var(--e-3);
	z-index: 2;
	background: none;
	border: 0;
	color: rgba(253, 247, 211, .7);
	font-size: 2rem;
	line-height: 1;
	padding: var(--e-1) var(--e-2);
	cursor: pointer;
}

.popup__fechar:hover { color: var(--marca-texto); }

.popup__chapeu {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--acento);
	margin: 0 0 var(--e-3);
}

/* O tamanho de manchete é o que faz o convite ter peso de jornal em vez de
   cara de anúncio. */
.popup__titulo {
	font-size: var(--t-3xl);
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 var(--e-4);
	text-wrap: balance;
}

.popup__texto {
	font-size: var(--t-md);
	line-height: 1.55;
	color: var(--texto-2);
	margin: 0 0 var(--e-5);
	max-width: 40ch;
}

/* Campos empilhados e largos, e botão da largura toda: no popup não há
   coluna vizinha disputando espaço, e alvo grande converte mais. */
.popup .conversao__form { margin: 0; }

.popup .conversao__campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-3);
	margin-bottom: var(--e-3);
}

.popup .conversao__form .campo {
	width: 100%;
	padding: 15px 16px;
	font-size: var(--t-md);
}

.popup .conversao__form .btn {
	width: 100%;
	justify-content: center;
	padding: 15px 20px;
	font-size: var(--t-md);
	font-weight: 700;
	letter-spacing: .02em;
}

.popup__depois {
	display: block;
	margin: var(--e-4) auto 0;
	background: none;
	border: 0;
	color: var(--texto-3);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	text-decoration: underline;
	cursor: pointer;
}

.popup__depois:hover { color: var(--texto-2); }

/* Bloco de newsletter sem a coluna de WhatsApp: uma coluna só. */
.conversao--simples { grid-template-columns: minmax(0, 1fr); }

.rodape__assinar {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* -------------------------------------------------------------
   2. BASE
   ---------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--texto);
	font-family: var(--fonte-texto);
	font-size: var(--t-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
img { min-width: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--dourado-500); }

h1, h2, h3, h4, h5 {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.012em;
	margin: 0 0 var(--e-3);
	color: var(--texto);
	text-wrap: balance;
}

p { margin: 0 0 var(--e-4); }

:focus-visible {
	outline: 3px solid var(--dourado-600);
	outline-offset: 2px;
	border-radius: 2px;
}

button { font: inherit; cursor: pointer; }

.pular {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--marca);
	color: var(--marca-texto);
	padding: var(--e-3) var(--e-4);
	font-family: var(--fonte-ui);
}
.pular:focus { left: var(--e-4); top: var(--e-4); }

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

.container {
	width: 100%;
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: var(--e-4);
}

@media (min-width: 768px) {
	.container { padding-inline: var(--e-5); }
}

/* -------------------------------------------------------------
   3. FAIXA DE URGENTE
   ---------------------------------------------------------- */

.urgente {
	background: var(--urgente);
	color: #fff;
	font-family: var(--fonte-ui);
}

.urgente__link {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) 0;
	color: #fff;
	text-decoration: none;
	font-size: var(--t-sm);
	min-height: 40px;
}

.urgente__rotulo {
	font-weight: 800;
	letter-spacing: .09em;
	font-size: var(--t-xs);
	text-transform: uppercase;
	padding: 2px 7px;
	background: rgba(255, 255, 255, .18);
	border-radius: var(--raio);
	flex: none;
}

.urgente__titulo {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.urgente a.urgente__link:hover .urgente__titulo { text-decoration: underline; }

/* -------------------------------------------------------------
   4. CABEÇALHO — verde da marca sobre o corpo branco
   ---------------------------------------------------------- */

.cabecalho {
	background: var(--marca);
	color: var(--marca-texto);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 3px solid var(--dourado-500);
}

/* As duas colunas de fora têm a MESMA fração e o menu fica na do meio, que
   se ajusta ao conteúdo. É o que põe o menu no centro do cabeçalho — com
   `auto 1fr auto` ele ficava centrado no espaço que sobrava, ou seja, torto
   sempre que o logo e o bloco de ações tinham larguras diferentes. */
.cabecalho__topo {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--e-4);
	min-height: var(--cabecalho-altura);
}

.cabecalho__esquerda {
	display: flex;
	align-items: center;
	gap: .25rem;
	justify-self: start;
	min-width: 0;
}

.cabecalho__topo > .acoes { justify-self: end; }

/* Enquanto o menu está escondido (gaveta), não existe coluna do meio:
   volta a ser logo à esquerda e ações à direita. */
@media (max-width: 1023px) {
	.cabecalho__topo { grid-template-columns: auto 1fr; }
	.cabecalho__topo > .acoes { grid-column: 2; }
}

.marca {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	text-decoration: none;
	color: var(--marca-texto);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
}

/* O círculo do símbolo é do mesmo verde do cabeçalho e se funde ao fundo —
   o que sobra é o mascote em creme, que é justamente a leitura desejada. */
.marca img { height: 54px; width: auto; }

@media (max-width: 480px) {
	.marca img { height: 44px; }
}

.marca__texto { display: flex; flex-direction: column; gap: 3px; }
.marca__nome { font-size: 1.35rem; }
.marca__uf {
	font-family: var(--fonte-ui);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--dourado-400);
}

/* Menu principal */
.menu { display: none; }

/* Menu centrado entre o logo e as ações. As duas colunas laterais têm a
   mesma fração para o centro cair no meio do cabeçalho, e não no meio do
   espaço que sobrou. */
.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-4);
}

.menu a {
	color: var(--marca-texto);
	text-decoration: none;
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 600;
	padding: var(--e-2) 0;
	display: block;
	position: relative;
}

.menu a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--dourado-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}

.menu a:hover::after,
.menu .current-menu-item > a::after { transform: scaleX(1); }

@media (min-width: 1024px) {
	.menu { display: block; }
}

.acoes {
	display: flex;
	align-items: center;
	gap: var(--e-1);
}

.icone-btn {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--raio);
	color: var(--marca-texto);
	transition: background .15s ease;
}

.icone-btn:hover { background: rgba(253, 247, 211, .14); }
.icone-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (min-width: 1024px) {
	.icone-btn--menu { display: none; }
}

/* Busca */
.busca {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: var(--marca);
	padding: 0 0 var(--e-4);
	display: none;
	border-bottom: 3px solid var(--dourado-500);
}
.busca[data-aberta="true"] { display: block; }

.busca form {
	display: flex;
	gap: var(--e-2);
	max-width: var(--largura);
	margin-inline: auto;
	padding-inline: var(--e-4);
}

.busca input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: var(--e-3);
	border: 1px solid rgba(253, 247, 211, .3);
	background: rgba(0, 0, 0, .22);
	color: var(--marca-texto);
	border-radius: var(--raio);
	font: inherit;
	font-family: var(--fonte-ui);
}
.busca input[type="search"]::placeholder { color: rgba(253, 247, 211, .55); }

/* Menu do celular */
.gaveta {
	position: fixed;
	inset: 0;
	background: var(--bg);
	z-index: 200;
	transform: translateX(-100%);
	transition: transform .22s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
}

.gaveta[data-aberta="true"] { transform: none; visibility: visible; }

.gaveta__topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--e-3) var(--e-4);
	background: var(--marca);
	color: var(--marca-texto);
	min-height: var(--cabecalho-altura);
	font-family: var(--fonte-titulo);
}

.gaveta__marca {
	font-family: var(--fonte-titulo);
	font-weight: 700;
	font-size: 1.15rem;
}

.gaveta__corpo { padding-bottom: var(--e-8); }

/* Busca no topo da gaveta: é o atalho mais pedido no celular. */
.gaveta__busca {
	display: flex;
	gap: var(--e-2);
	padding: var(--e-4);
	border-bottom: 1px solid var(--borda);
	background: var(--bg-alt);
}

.gaveta__busca .btn { padding-inline: var(--e-4); flex: none; }

.gaveta__nav ul { list-style: none; margin: 0; padding: 0; }

.gaveta__nav a {
	display: block;
	padding: var(--e-4);
	border-bottom: 1px solid var(--borda);
	color: var(--texto);
	text-decoration: none;
	font-family: var(--fonte-ui);
	font-weight: 600;
	font-size: var(--t-md);
}

.gaveta__nav a:active,
.gaveta__nav a:hover { background: var(--bg-alt); }
.gaveta__nav .sub-menu a { padding-left: var(--e-6); font-weight: 400; color: var(--texto-2); }

/* Blocos que no desktop moram na barra lateral. */
.gaveta__bloco {
	padding: var(--e-5) var(--e-4);
	border-bottom: 8px solid var(--bg-alt);
}

.gaveta__titulo {
	font-size: var(--t-base);
	font-weight: 600;
	margin: 0 0 var(--e-3);
	padding-bottom: var(--e-2);
	border-bottom: 2px solid var(--marca);
}

.gaveta__contato { border-bottom: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.gaveta__contato .gaveta__titulo { margin-bottom: var(--e-3); }

.gaveta__email {
	margin: var(--e-1) 0 0;
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	color: var(--texto-2);
}

.gaveta__redes { display: flex; gap: var(--e-2); margin-top: var(--e-2); }

.gaveta__redes a {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border: 1px solid var(--borda-forte);
	border-radius: 50%;
	color: var(--texto-2);
}

.gaveta__redes a:hover { border-color: var(--marca); color: var(--marca); }

/* Dentro da gaveta as cidades quebram linha em vez de rolar de lado:
   há espaço vertical de sobra e rolagem dentro de rolagem confunde. */
.gaveta .cidades {
	flex-wrap: wrap;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
	padding-bottom: 0;
}

/* -------------------------------------------------------------
   5. ESTRUTURA DA PÁGINA
   ---------------------------------------------------------- */

.principal { padding-block: var(--e-6) var(--e-8); }

.secao { margin-block: var(--e-8); }
.secao:first-child { margin-top: 0; }

.secao__cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-4);
	margin-bottom: var(--e-5);
	padding-bottom: var(--e-2);
	border-bottom: 1px solid var(--texto);
}

.secao__titulo {
	font-size: var(--t-xl);
	margin: 0;
	font-weight: 600;
	letter-spacing: -.015em;
}

.secao__mais {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--texto-2);
	white-space: nowrap;
}
.secao__mais:hover { color: var(--link); }

.colunas { display: grid; gap: var(--e-7); }

/* Item de grid nasce com min-width:auto, que vale min-content: um filho
   largo puxa a coluna inteira e a página rola de lado no celular. */
.colunas > *,
.grade > *,
.cartao-linha > *,
.mais-lidas__item > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.colunas {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--e-8);
		align-items: start;
	}
	.lateral { position: sticky; top: calc(var(--cabecalho-altura) + var(--e-4)); }
}

/* -------------------------------------------------------------
   6. ETIQUETAS E METADADOS
   ---------------------------------------------------------- */

.etiqueta {
	display: inline-flex;
	align-items: center;
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--acento);
	text-decoration: none;
}
.etiqueta:hover { text-decoration: underline; }

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-1) var(--e-2);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	color: var(--texto-3);
	margin: 0;
}

.meta a { color: inherit; text-decoration: none; }
.meta a:hover { color: var(--link); text-decoration: underline; }
.meta__sep { opacity: .45; }

/* -------------------------------------------------------------
   7. CARD HORIZONTAL — o formato das listas
   Texto à esquerda, foto à direita, régua fina embaixo.
   ---------------------------------------------------------- */

.lista-materias {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cartao-linha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 104px;
	gap: var(--e-4);
	align-items: start;
	padding-block: var(--e-5);
	border-bottom: 1px solid var(--borda);
}

.lista-materias > li:first-child .cartao-linha { padding-top: 0; }
.lista-materias > li:last-child .cartao-linha { border-bottom: 0; }

@media (min-width: 560px) {
	.cartao-linha { grid-template-columns: minmax(0, 1fr) 168px; gap: var(--e-5); }
}

.cartao-linha--sem-foto { grid-template-columns: minmax(0, 1fr); }

/* Na coluna da direita do post o mesmo card fica apertado: sobram ~200px para
   o texto depois da miniatura, e o título quebra em torre. Aqui a foto sai e o
   texto ocupa a largura toda. Vale só na lateral — na home, onde a coluna é
   larga, a miniatura continua sendo o que faz a lista ser escaneável. */
.destaque-lateral .cartao-linha {
	grid-template-columns: minmax(0, 1fr);
}

.destaque-lateral .cartao-linha__figura {
	display: none;
}

.cartao-linha__texto { display: flex; flex-direction: column; gap: var(--e-2); }

.cartao-linha__titulo {
	font-size: var(--t-lg);
	line-height: 1.22;
	margin: 0;
	font-weight: 600;
}

@media (min-width: 560px) {
	.cartao-linha__titulo { font-size: 1.4rem; }
}

.cartao-linha__titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--dourado-500), var(--dourado-500));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease;
}

.cartao-linha__titulo a:hover { background-size: 100% 2px; }

.cartao-linha__resumo {
	font-size: var(--t-base);
	color: var(--texto-2);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cartao-linha__figura {
	margin: 0;
	background: var(--bg-alt);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--raio);
}

.cartao-linha__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.cartao-linha:hover .cartao-linha__figura img { transform: scale(1.04); }

/* Hora à esquerda, para a lista cronológica das últimas */
.cartao-linha__hora {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--acento);
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   8. CARD VERTICAL — usado nas grades de editoria
   ---------------------------------------------------------- */

.cartao {
	display: flex;
	flex-direction: column;
	background: transparent;
	height: 100%;
}

.cartao__figura {
	margin: 0 0 var(--e-3);
	background: var(--bg-alt);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--raio);
}

.cartao__figura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}

.cartao:hover .cartao__figura img { transform: scale(1.04); }

.cartao__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	flex: 1;
}

.cartao__titulo {
	font-size: var(--t-md);
	line-height: 1.25;
	margin: 0;
	font-weight: 600;
}

@media (min-width: 900px) {
	.cartao__titulo { font-size: 1.2rem; }
}

.cartao__titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--dourado-500), var(--dourado-500));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .25s ease;
}
.cartao__titulo a:hover { background-size: 100% 2px; }

.cartao__resumo {
	font-size: var(--t-sm);
	color: var(--texto-2);
	margin: 0;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cartao__rodape { margin-top: auto; padding-top: var(--e-2); }

/* Grades */
.grade {
	display: grid;
	gap: var(--e-6) var(--e-5);
	grid-template-columns: 1fr;
}

@media (min-width: 560px) {
	.grade--2, .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------
   9. CARROSSEL DE MANCHETES
   ---------------------------------------------------------- */

.hero { position: relative; margin-bottom: var(--e-7); }

.hero__trilho {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--raio);
	background: var(--bg-alt);
}

.hero__trilho::-webkit-scrollbar { display: none; }

.hero__slide { scroll-snap-align: start; position: relative; min-width: 0; }

.hero__link {
	display: block;
	position: relative;
	text-decoration: none;
	color: #fff;
	aspect-ratio: 4 / 3;
	background: var(--verde-900);
}

@media (min-width: 700px) {
	.hero__link { aspect-ratio: 21 / 9; }
}

.hero__figura { margin: 0; width: 100%; height: 100%; }
.hero__figura img { width: 100%; height: 100%; object-fit: cover; }

/* Véu que sobe da base e da esquerda, para o título ter contraste
   sobre qualquer foto sem escurecer a imagem inteira. */
.hero__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(10, 20, 9, .92) 0%, rgba(10, 20, 9, .55) 42%, rgba(10, 20, 9, 0) 78%),
		linear-gradient(to right, rgba(10, 20, 9, .6) 0%, rgba(10, 20, 9, 0) 55%);
}

.hero__conteudo {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--e-4);
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}

@media (min-width: 700px) {
	.hero__conteudo { padding: var(--e-6) 14rem var(--e-6) var(--e-6); max-width: 54rem; }
}

.hero__etiqueta {
	align-self: flex-start;
	background: var(--dourado-500);
	color: var(--verde-900);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--raio);
}

.hero__titulo {
	font-size: var(--t-hero);
	color: #fff;
	margin: 0;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}

.hero__linhafina {
	font-size: var(--t-md);
	color: rgba(255, 255, 255, .92);
	margin: 0;
	display: none;
	max-width: 46ch;
}

@media (min-width: 700px) { .hero__linhafina { display: block; } }

.hero__meta {
	font-family: var(--fonte-ui);
	color: rgba(255, 255, 255, .82);
	font-size: var(--t-xs);
	display: flex;
	gap: var(--e-2);
	flex-wrap: wrap;
	margin: 0;
}

.hero__controles {
	position: absolute;
	right: var(--e-3);
	bottom: var(--e-3);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--e-2);
	padding: 6px 8px;
	background: rgba(10, 20, 9, .55);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 100px;
	backdrop-filter: blur(4px);
}

@media (min-width: 700px) {
	.hero__controles { right: var(--e-6); bottom: var(--e-6); }
}

.hero__seta {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: transparent;
	color: #fff;
	border: 0;
	border-radius: 50%;
	padding: 0;
	flex: none;
}

.hero__seta:hover { background: rgba(255, 255, 255, .18); }
.hero__seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.hero__pontos { display: flex; gap: 5px; align-items: center; }

.hero__ponto {
	width: 22px;
	height: 4px;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .42);
	border-radius: 2px;
	transition: background .2s ease;
}

.hero__ponto[aria-current="true"] { background: var(--dourado-400); }

/* -------------------------------------------------------------
   10. MAIS LIDAS
   ---------------------------------------------------------- */

.mais-lidas { list-style: none; margin: 0; padding: 0; counter-reset: ml; }

.mais-lidas__item {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: var(--e-3);
	padding-block: var(--e-4);
	border-bottom: 1px solid var(--borda);
}

.mais-lidas__item:first-child { padding-top: 0; }
.mais-lidas__item:last-child { border-bottom: 0; }

.mais-lidas__item::before {
	counter-increment: ml;
	content: counter(ml);
	font-family: var(--fonte-titulo);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: .9;
	color: var(--borda-forte);
}

.mais-lidas__item:nth-child(-n+3)::before { color: var(--dourado-500); }

.mais-lidas__titulo {
	font-size: var(--t-base);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--e-1);
}
.mais-lidas__titulo a { color: inherit; text-decoration: none; }
.mais-lidas__titulo a:hover { text-decoration: underline; text-decoration-color: var(--dourado-500); }

/* Abas de período */
.abas { display: flex; gap: var(--e-1); margin-bottom: var(--e-4); flex-wrap: wrap; }

.aba {
	border: 1px solid var(--borda);
	background: var(--superficie);
	color: var(--texto-2);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: var(--e-1) var(--e-3);
	border-radius: 100px;
	min-height: 32px;
}

.aba[aria-selected="true"] {
	background: var(--marca);
	border-color: var(--marca);
	color: var(--marca-texto);
}

/* -------------------------------------------------------------
   11. NAVEGAÇÃO POR CIDADE
   ---------------------------------------------------------- */

.cidades {
	display: flex;
	gap: var(--e-2);
	overflow-x: auto;
	padding-bottom: var(--e-2);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
}

@media (min-width: 1400px) {
	.cidades { -webkit-mask-image: none; mask-image: none; }
}

.cidades__item {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	border: 1px solid var(--borda-forte);
	background: var(--superficie);
	color: var(--texto);
	text-decoration: none;
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 600;
	padding: var(--e-2) var(--e-4);
	border-radius: 100px;
	min-height: 40px;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}

.cidades__item:hover { border-color: var(--marca); background: var(--bg-alt); }

.cidades__item[aria-current="page"] {
	background: var(--marca);
	border-color: var(--marca);
	color: var(--marca-texto);
}

.cidades__conta { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.cidades__item[aria-current="page"] .cidades__conta { color: rgba(253, 247, 211, .7); }

/* -------------------------------------------------------------
   12. MATÉRIA
   ---------------------------------------------------------- */

.materia { max-width: var(--largura-leitura); }

.migalhas {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	color: var(--texto-3);
	margin-bottom: var(--e-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-1);
}
.migalhas a { color: inherit; text-decoration: none; }
.migalhas a:hover { color: var(--link); text-decoration: underline; }
.migalhas span[aria-hidden] { opacity: .5; }

.materia__etiqueta {
	display: inline-block;
	background: var(--marca);
	color: var(--marca-texto);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: var(--raio);
	text-decoration: none;
	margin-bottom: var(--e-4);
}

.materia__titulo {
	font-size: var(--t-3xl);
	margin: 0 0 var(--e-4);
	letter-spacing: -.022em;
	font-weight: 600;
}

.materia__linhafina {
	font-size: var(--t-lg);
	line-height: 1.45;
	color: var(--texto-2);
	margin: 0 0 var(--e-5);
}

.materia__assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2) var(--e-5);
	padding: var(--e-3) 0;
	border-block: 1px solid var(--borda);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	color: var(--texto-2);
	margin-bottom: var(--e-5);
}

.materia__autor { font-weight: 700; color: var(--texto); text-decoration: none; }
.materia__autor:hover { color: var(--link); }

.materia__datas { display: flex; flex-direction: column; gap: 2px; }
.materia__atualizado { color: var(--acento); font-weight: 600; }

.materia__capa { margin: 0 0 var(--e-6); }
.materia__capa img { width: 100%; border-radius: var(--raio); }

.materia__legenda {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	color: var(--texto-3);
	padding-top: var(--e-2);
	line-height: 1.45;
}
.materia__credito { opacity: .85; }

/* Corpo do texto */
.materia__corpo {
	font-size: 1.1875rem;
	line-height: 1.75;
	color: var(--texto);
}

.materia__corpo p { margin: 0 0 var(--e-5); }

.materia__corpo > p:first-of-type::first-letter {
	float: left;
	font-size: 3.4em;
	line-height: .82;
	padding-right: .08em;
	padding-top: .04em;
	font-weight: 600;
	color: var(--marca);
}

.materia__corpo h2 { font-size: var(--t-xl); margin: var(--e-7) 0 var(--e-3); }
.materia__corpo h3 { font-size: var(--t-lg); margin: var(--e-6) 0 var(--e-2); }

.materia__corpo a { color: var(--link); text-decoration: underline; text-decoration-color: var(--dourado-500); }

.materia__corpo ul, .materia__corpo ol { margin: 0 0 var(--e-5); padding-left: var(--e-5); }
.materia__corpo li { margin-bottom: var(--e-2); }

.materia__corpo blockquote {
	margin: var(--e-6) 0;
	padding: 0 0 0 var(--e-5);
	border-left: 3px solid var(--dourado-500);
	font-size: 1.35rem;
	line-height: 1.4;
	font-style: italic;
	color: var(--texto);
}
.materia__corpo blockquote p:last-child { margin-bottom: 0; }

.materia__corpo figure { margin: var(--e-6) 0; }
.materia__corpo figcaption {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	color: var(--texto-3);
	padding-top: var(--e-2);
}

.materia__corpo img { border-radius: var(--raio); }

/* Nota de correção */
.materia-correcao {
	background: #FCF8E6;
	border-left: 4px solid var(--dourado-500);
	padding: var(--e-4);
	margin: var(--e-6) 0;
	border-radius: 0 var(--raio) var(--raio) 0;
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
}

.materia-correcao__rotulo {
	display: block;
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--acento);
	margin-bottom: var(--e-1);
	font-weight: 800;
}
.materia-correcao__texto p:last-child { margin-bottom: 0; }

/* Bloco de fonte — requisito editorial central do projeto */
.materia-fonte {
	margin: var(--e-7) 0 0;
	padding: var(--e-4) var(--e-5);
	border-left: 4px solid var(--marca);
	background: var(--superficie-2);
	border-radius: 0 var(--raio) var(--raio) 0;
	font-family: var(--fonte-ui);
}

.materia-fonte__texto { margin: 0; font-size: var(--t-base); }

.materia-fonte__rotulo {
	font-weight: 800;
	text-transform: uppercase;
	font-size: var(--t-xs);
	letter-spacing: .12em;
	color: var(--texto-3);
	margin-right: var(--e-1);
}

.materia-fonte__link, .materia-fonte__nome { font-weight: 700; color: var(--link); }

.materia-fonte__aviso {
	margin: var(--e-2) 0 0;
	font-size: var(--t-xs);
	color: var(--texto-3);
	line-height: 1.5;
}

/* Player de áudio */
.audio {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	flex-wrap: wrap;
	background: var(--superficie-2);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	padding: var(--e-3);
	margin-bottom: var(--e-5);
}

.audio__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	background: var(--marca);
	color: var(--marca-texto);
	border: 0;
	border-radius: var(--raio);
	padding: var(--e-2) var(--e-4);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 700;
	min-height: 40px;
}

.audio__btn:hover { background: var(--verde-700); }
.audio__btn svg { width: 16px; height: 16px; fill: currentColor; }
.audio__btn[hidden] { display: none; }

.audio__estado { font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }

.audio__barra {
	flex: 1;
	min-width: 100px;
	max-width: 220px;
	height: 4px;
	background: var(--borda);
	border-radius: 2px;
	overflow: hidden;
}

.audio__progresso { height: 100%; width: 0; background: var(--dourado-500); transition: width .25s linear; }

/* Compartilhamento */
.compartilhar {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	flex-wrap: wrap;
	margin-bottom: var(--e-5);
}

.compartilhar__rotulo {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 700;
	color: var(--texto-3);
}

.compartilhar__btn {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--borda-forte);
	background: var(--superficie);
	border-radius: 50%;
	color: var(--texto-2);
	text-decoration: none;
}

.compartilhar__btn:hover { border-color: var(--marca); color: var(--marca); background: var(--bg-alt); }
.compartilhar__btn svg { width: 17px; height: 17px; fill: currentColor; }

.relacionadas { margin-top: var(--e-8); }

/* -------------------------------------------------------------
   13. VÍDEOS
   ---------------------------------------------------------- */

.video-capa {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--verde-900);
	overflow: hidden;
	border-radius: var(--raio);
	margin-bottom: var(--e-3);
}

.video-capa img { width: 100%; height: 100%; object-fit: cover; }
.video-capa::after { content: ""; position: absolute; inset: 0; background: rgba(10, 20, 9, .18); }

.video-capa__play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 54px; height: 54px;
	background: var(--dourado-500);
	border-radius: 50%;
	display: grid;
	place-items: center;
	z-index: 1;
}

.video-capa__play svg { width: 20px; height: 20px; fill: var(--verde-900); margin-left: 3px; }

.incorporado {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: var(--e-6) 0;
	background: #000;
	border-radius: var(--raio);
	overflow: hidden;
}
.incorporado iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------
   14. NEWSLETTER E WHATSAPP
   ---------------------------------------------------------- */

.conversao {
	display: grid;
	gap: var(--e-5);
	background: var(--marca);
	color: var(--marca-texto);
	padding: var(--e-6) var(--e-5);
	border-radius: var(--raio);
}

@media (min-width: 860px) {
	.conversao { grid-template-columns: 1fr 1fr; gap: var(--e-8); padding: var(--e-7); }
}

.conversao h2 { color: var(--marca-texto); font-size: var(--t-xl); margin-bottom: var(--e-2); }
.conversao p { color: rgba(253, 247, 211, .84); font-size: var(--t-sm); margin-bottom: var(--e-4); font-family: var(--fonte-ui); }

.conversao__form { display: flex; flex-direction: column; gap: var(--e-2); }

@media (min-width: 480px) {
	.conversao__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
}

.campo {
	width: 100%;
	padding: var(--e-3);
	border: 1px solid var(--borda-forte);
	background: var(--superficie);
	color: var(--texto);
	border-radius: var(--raio);
	font-family: var(--fonte-ui);
	font-size: var(--t-base);
	min-height: 46px;
}

.campo:focus { border-color: var(--acento); }
.conversao .campo { border-color: transparent; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-5);
	border: 1px solid transparent;
	border-radius: var(--raio);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 700;
	text-decoration: none;
	min-height: 46px;
	transition: background .15s ease;
}

.btn--primario { background: var(--dourado-500); color: var(--verde-900); }
.btn--primario:hover { background: var(--dourado-400); }

.btn--whats { background: #1FA855; color: #fff; }
.btn--whats:hover { background: #1a8f48; }

.btn--fantasma { background: transparent; border-color: currentColor; color: inherit; }

.btn svg { width: 18px; height: 18px; fill: currentColor; }

.aviso {
	padding: var(--e-3);
	border-radius: var(--raio);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	margin-bottom: var(--e-4);
	border: 1px solid;
}

.aviso--ok { background: #EDF7F0; border-color: #1FA855; color: var(--texto); }
.aviso--erro { background: #FBEDEC; border-color: var(--urgente); color: var(--texto); }

/* -------------------------------------------------------------
   15. PUBLICIDADE
   ---------------------------------------------------------- */

.ad {
	display: block;
	margin: var(--e-6) auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}

.ad__rotulo {
	display: block;
	font-family: var(--fonte-ui);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--texto-3);
	margin-bottom: var(--e-2);
}

.ad__area { display: flex; justify-content: center; }
.ad img { margin-inline: auto; }
.ad--ad-sidebar { margin-top: 0; }

.patrocinado { border: 2px solid var(--dourado-500); position: relative; }

.patrocinado::before {
	content: "Publicidade";
	position: absolute;
	top: 0; right: 0;
	background: var(--dourado-500);
	color: var(--verde-900);
	font-family: var(--fonte-ui);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 3px 8px;
	z-index: 2;
}

/* -------------------------------------------------------------
   16. RODAPÉ
   ---------------------------------------------------------- */

.rodape {
	background: var(--verde-900);
	color: rgba(253, 247, 211, .8);
	padding-block: var(--e-8) var(--e-5);
	margin-top: var(--e-8);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
}

.rodape__grade {
	display: grid;
	gap: var(--e-6);
	grid-template-columns: 1fr;
	padding-bottom: var(--e-6);
	border-bottom: 1px solid rgba(253, 247, 211, .14);
}

@media (min-width: 700px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.rodape h3 {
	font-family: var(--fonte-ui);
	color: var(--creme);
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: .12em;
	margin-bottom: var(--e-3);
	font-weight: 700;
}

.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.rodape a { color: rgba(253, 247, 211, .8); text-decoration: none; }
.rodape a:hover { color: var(--dourado-400); text-decoration: underline; }

.rodape__sobre p { line-height: 1.6; margin-bottom: var(--e-3); }
.rodape__logo { max-height: 64px; width: auto; margin-bottom: var(--e-3); }

.rodape__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--e-3);
	padding-top: var(--e-4);
	font-size: var(--t-xs);
	color: rgba(253, 247, 211, .55);
}

/* Assinatura da agência: presente, nunca competindo com a marca do portal.
   Fica um degrau abaixo em opacidade e só acende no hover. A altura é fixa e
   a largura livre — o arquivo é 926x214, e travar a largura amassaria o
   logo. */
/* A assinatura é o último filho da base do rodapé, que é um flex com
   `space-between` — então ela encosta na borda direita sozinha, e continua
   encostada se o cliente não configurar rede social nenhuma e o bloco do meio
   sumir. `margin-left:auto` faria o mesmo com dois filhos, mas não com três. */
.rodape__autoria {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	color: rgba(253, 247, 211, .5);
	text-decoration: none;
	opacity: .75;
	transition: opacity .2s ease;
}

.rodape__autoria:hover,
.rodape__autoria:focus-visible { opacity: 1; color: rgba(253, 247, 211, .8); }

.rodape__autoria img {
	height: 20px;
	width: auto;
	display: block;
}

.rodape__redes { display: flex; gap: var(--e-2); }
.rodape__redes a {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 1px solid rgba(253, 247, 211, .22);
	border-radius: 50%;
}
.rodape__redes svg { width: 17px; height: 17px; fill: currentColor; }

/* -------------------------------------------------------------
   17. PAGINAÇÃO, ARQUIVO E 404
   ---------------------------------------------------------- */

.paginacao {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-1);
	justify-content: center;
	margin-top: var(--e-7);
}

.paginacao .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--e-2);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	text-decoration: none;
	color: var(--texto);
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 600;
}

.paginacao .page-numbers:hover { border-color: var(--marca); }
.paginacao .current { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

.cabeca-arquivo {
	padding-bottom: var(--e-5);
	margin-bottom: var(--e-6);
	border-bottom: 1px solid var(--texto);
}

.cabeca-arquivo h1 { font-size: var(--t-2xl); margin-bottom: var(--e-2); }
.cabeca-arquivo p { color: var(--texto-2); margin: 0; max-width: 62ch; }

.vazio {
	padding: var(--e-8) var(--e-4);
	text-align: center;
	color: var(--texto-2);
	border: 1px dashed var(--borda-forte);
	border-radius: var(--raio);
	background: var(--superficie-2);
}

.erro-404 { text-align: center; padding-block: var(--e-8); }

.erro-404__numero {
	font-family: var(--fonte-titulo);
	font-size: clamp(4rem, 2rem + 10vw, 7rem);
	font-weight: 600;
	line-height: 1;
	color: var(--dourado-500);
	margin: 0 0 var(--e-3);
}

.erro-404__busca { max-width: 28rem; margin: var(--e-5) auto 0; display: flex; gap: var(--e-2); }

/* -------------------------------------------------------------
   18. AVISO DE COOKIES
   ---------------------------------------------------------- */

.cookies {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 300;
	padding: var(--e-3);
}

.cookies[hidden] { display: none; }

.cookies__caixa {
	max-width: var(--largura);
	margin-inline: auto;
	background: var(--superficie);
	border: 1px solid var(--borda-forte);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: var(--e-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
}

.cookies__texto { margin: 0; font-family: var(--fonte-ui); font-size: var(--t-sm); flex: 1; min-width: 260px; }
.cookies__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cookies .btn { padding-inline: var(--e-4); }
.cookies .btn--fantasma { color: var(--texto-2); border-color: var(--borda-forte); }

/* -------------------------------------------------------------
   19. FORMULÁRIO DE PAUTA
   ---------------------------------------------------------- */

.form-pauta { max-width: var(--largura-leitura); }

.form-pauta__linha { display: grid; gap: var(--e-4); margin-bottom: var(--e-4); }

@media (min-width: 620px) {
	.form-pauta__linha--2 { grid-template-columns: 1fr 1fr; }
}

.form-pauta label {
	display: block;
	font-family: var(--fonte-ui);
	font-size: var(--t-sm);
	font-weight: 700;
	margin-bottom: var(--e-1);
}

.form-pauta .obrigatorio { color: var(--urgente); }
.form-pauta textarea { min-height: 180px; resize: vertical; font-family: var(--fonte-texto); font-size: 1.05rem; }

.form-pauta__dica {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	color: var(--texto-3);
	margin: var(--e-1) 0 0;
	line-height: 1.5;
}

/* Campo-armadilha: invisível para gente, preenchido por robô. */
.armadilha {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------
   20. UTILIDADES
   ---------------------------------------------------------- */

.destaque-lateral { margin-bottom: var(--e-7); }
.destaque-lateral:last-child { margin-bottom: 0; }

/* A lateral não usa caixa: usa um fio à esquerda, como o miolo. */
.caixa {
	border-top: 3px solid var(--marca);
	padding-top: var(--e-4);
}

.fio { height: 1px; background: var(--borda); border: 0; margin-block: var(--e-7); }

.tags-materia { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-6); }

.tag-item {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--borda-forte);
	border-radius: 100px;
	padding: var(--e-1) var(--e-3);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--texto-2);
	text-decoration: none;
}
.tag-item:hover { border-color: var(--marca); color: var(--marca); }

/* -------------------------------------------------------------
   22. MENU DE DOIS NÍVEIS E BOTÃO DE DESTAQUE
   -------------------------------------------------------------
   "Notícias" passou a abrir as editorias. O submenu abre no hover E no
   `:focus-within` — sem o segundo, quem navega por teclado alcança o pai,
   o painel abre por um instante e some assim que o foco entra no filho.
   ---------------------------------------------------------- */

.menu li { position: relative; }

/* A seta fica no ::before porque o ::after já é a régua dourada do item. */
.menu .menu-item-has-children > a { padding-right: 15px; }
.menu .menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: 1px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	opacity: .65;
}

.menu .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(var(--e-3) * -1);
	min-width: 200px;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0;
	padding: var(--e-2) 0;
	background: var(--verde-900);
	border: 1px solid rgba(253, 247, 211, .16);
	border-radius: var(--raio);
	box-shadow: 0 14px 34px rgba(14, 38, 16, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
	z-index: 120;
}

.menu li:hover > .sub-menu,
.menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.menu .sub-menu a {
	padding: var(--e-2) var(--e-4);
	font-size: var(--t-xs);
	font-weight: 500;
	white-space: nowrap;
}

.menu .sub-menu a::after { display: none; }
.menu .sub-menu a:hover,
.menu .sub-menu a:focus-visible { background: var(--verde-700); }

@media (prefers-reduced-motion: reduce) {
	.menu .sub-menu { transition: none; }
}

/* Botão de destaque do cabeçalho: a única peça dourada em cima. */
.btn-destaque {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: .48rem var(--e-3);
	border-radius: var(--raio);
	background: var(--dourado-500);
	color: var(--verde-900);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease;
}

.btn-destaque:hover,
.btn-destaque:focus-visible { background: var(--dourado-400); color: var(--verde-900); }
.btn-destaque svg { flex: none; }

/* Abaixo de 1100px sobra pouca largura entre o logo e os ícones: fica só
   o ícone, com o rótulo no `aria-label` da própria âncora pelo texto. */
@media (max-width: 1100px) {
	.btn-destaque__texto {
		position: absolute;
		width: 1px; height: 1px;
		margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.btn-destaque { padding: .48rem .6rem; }
}

@media (max-width: 600px) {
	.btn-destaque { display: none; }
}

.btn--destaque { background: var(--dourado-500); color: var(--verde-900); border-color: var(--dourado-500); }
.btn--destaque:hover { background: var(--dourado-400); color: var(--verde-900); }

/* Submenu na gaveta do celular: recuo e régua, sem painel flutuante. */
.gaveta__nav .sub-menu {
	list-style: none;
	margin: var(--e-1) 0 var(--e-2);
	padding: 0 0 0 var(--e-4);
	border-left: 2px solid var(--borda);
}

.gaveta__nav .sub-menu a { font-size: var(--t-sm); opacity: .85; }

/* -------------------------------------------------------------
   23. ALERTAS
   -------------------------------------------------------------
   Quatro níveis, quatro tons. O nível vira classe no elemento e a cor
   mora aqui — trocar a paleta um dia não pode exigir caçar cor escrita
   dentro do PHP.
   ---------------------------------------------------------- */

.alerta-faixa {
	--alerta-fundo: var(--verde-800);
	--alerta-texto: var(--creme);
	background: var(--alerta-fundo);
	color: var(--alerta-texto);
	font-family: var(--fonte-ui);
}

.alerta-faixa--atencao { --alerta-fundo: #8A6D0B; --alerta-texto: #FFF8E1; }
.alerta-faixa--perigo  { --alerta-fundo: #C1271D; --alerta-texto: #FFF1EF; }
.alerta-faixa--extremo { --alerta-fundo: #7A1611; --alerta-texto: #FFF1EF; }

.alerta-faixa__link {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	padding: .5rem 0;
	color: inherit;
	text-decoration: none;
	font-size: var(--t-sm);
	line-height: 1.35;
}

.alerta-faixa__icone { display: inline-flex; flex: none; }

.alerta-faixa__nivel {
	flex: none;
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.alerta-faixa__titulo { font-weight: 600; }
.alerta-faixa__orgao { opacity: .8; font-size: var(--t-xs); }
.alerta-faixa__link:hover .alerta-faixa__titulo { text-decoration: underline; }

@media (max-width: 640px) {
	.alerta-faixa__orgao { display: none; }
}

/* Lista compacta, usada no bloco da home e na lateral. */
.alerta-lista { list-style: none; margin: 0; padding: 0; }

.alerta-item + .alerta-item { border-top: 1px solid var(--borda); }

.alerta-item a {
	display: grid;
	gap: 2px;
	padding: var(--e-3) 0;
	text-decoration: none;
	color: inherit;
}

.alerta-item__nivel {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.alerta-item--atencao .alerta-item__nivel { color: var(--dourado-600); }
.alerta-item--perigo .alerta-item__nivel,
.alerta-item--extremo .alerta-item__nivel { color: var(--urgente); }

.alerta-item__titulo { font-family: var(--fonte-titulo); font-size: var(--t-md); font-weight: 600; line-height: 1.25; }
.alerta-item a:hover .alerta-item__titulo { text-decoration: underline; }
.alerta-item__meta { font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }

/* Cartões do histórico. */
.alerta-cartoes { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.alerta-cartao {
	border: 1px solid var(--borda);
	border-left: 4px solid var(--texto-3);
	border-radius: var(--raio);
	padding: var(--e-4);
	background: var(--superficie);
}

.alerta-cartao.alerta--atencao { border-left-color: var(--dourado-500); }
.alerta-cartao.alerta--perigo  { border-left-color: var(--urgente); }
.alerta-cartao.alerta--extremo { border-left-color: #7A1611; }
.alerta-cartao--encerrado { opacity: .68; }

.alerta-cartao__nivel {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 var(--e-2);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.alerta-cartao__titulo { margin: 0 0 var(--e-2); font-size: var(--t-lg); line-height: 1.22; }
.alerta-cartao__titulo a { color: inherit; text-decoration: none; }
.alerta-cartao__titulo a:hover { text-decoration: underline; }
.alerta-cartao__meta { margin: 0; font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }

/* Página de um alerta. */
.alerta-pagina__topo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }

.alerta-pagina__nivel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .2rem .55rem;
	border-radius: var(--raio);
	background: var(--verde-800);
	color: var(--creme);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.alerta-pagina.alerta--atencao .alerta-pagina__nivel { background: #8A6D0B; }
.alerta-pagina.alerta--perigo .alerta-pagina__nivel  { background: var(--urgente); }
.alerta-pagina.alerta--extremo .alerta-pagina__nivel { background: #7A1611; }

.alerta-pagina__encerrado {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-3);
	border: 1px solid var(--borda-forte);
	border-radius: var(--raio);
	padding: .18rem .5rem;
}

.alerta-pagina__dados,
.guia-ficha__dados {
	list-style: none;
	margin: var(--e-4) 0;
	padding: 0;
	border-top: 1px solid var(--borda);
}

.alerta-pagina__dados li,
.guia-ficha__dados li {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: var(--e-3);
	padding: var(--e-3) 0;
	border-bottom: 1px solid var(--borda);
	font-size: var(--t-base);
}

.alerta-pagina__dados strong,
.guia-ficha__dados strong {
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--texto-3);
	padding-top: 2px;
}

@media (max-width: 560px) {
	.alerta-pagina__dados li,
	.guia-ficha__dados li { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------------------------------------------------
   24. BLOCOS DE SERVIÇO — tempo, indicadores e horóscopo
   -------------------------------------------------------------
   Três colunas separadas por régua fina, na mesma linguagem de revista do
   resto do portal: sem caixa cinza, sem sombra, sem cartão arredondado.
   ---------------------------------------------------------- */

.faixa-servicos {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, 1fr);
	margin: var(--e-6) 0;
	border-top: 2px solid var(--texto);
	border-bottom: 1px solid var(--borda);
}

.faixa-servicos > .bloco { border-left: 1px solid var(--borda); }
.faixa-servicos > .bloco:first-child { border-left: 0; }
.faixa-servicos > .ad { grid-column: 1 / -1; border-top: 1px solid var(--borda); }

@media (max-width: 900px) {
	.faixa-servicos { grid-template-columns: 1fr 1fr; }
	.faixa-servicos > .bloco:nth-child(2n+1) { border-left: 0; }
	.faixa-servicos > .bloco:nth-child(n+3) { border-top: 1px solid var(--borda); }
}

@media (max-width: 620px) {
	.faixa-servicos { grid-template-columns: 1fr; }
	.faixa-servicos > .bloco { border-left: 0; }
	.faixa-servicos > .bloco + .bloco { border-top: 1px solid var(--borda); }
}

.bloco { padding: var(--e-4) var(--e-4) var(--e-3); min-width: 0; }
.faixa-servicos > .bloco:first-child { padding-left: 0; }
.faixa-servicos > .bloco:last-of-type { padding-right: 0; }

.bloco__titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--e-3);
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--texto-2);
}

.bloco__titulo .serv-icone { color: var(--acento); flex: none; }
.bloco__data { margin-left: auto; font-weight: 600; letter-spacing: .02em; color: var(--texto-3); }
.bloco__fonte { margin: var(--e-3) 0 0; font-family: var(--fonte-ui); font-size: 11px; color: var(--texto-3); }
.bloco__vazio { margin: 0; font-size: var(--t-sm); color: var(--texto-2); }
.bloco__rodape { margin: var(--e-3) 0 0; font-family: var(--fonte-ui); font-size: var(--t-xs); }
.bloco--compacto { padding: 0 0 var(--e-3); }

/* Tempo */
.tempo-agora { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--e-3); }
.tempo-agora__icone { color: var(--acento); display: inline-flex; }
.tempo-agora__temp { font-family: var(--fonte-titulo); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.tempo-agora__grau { font-size: 1.1rem; vertical-align: super; margin-left: 2px; color: var(--texto-2); }
.tempo-agora__local { display: flex; flex-direction: column; font-family: var(--fonte-ui); font-size: var(--t-sm); font-weight: 700; min-width: 0; }
.tempo-agora__local em { font-style: normal; font-weight: 500; font-size: var(--t-xs); color: var(--texto-2); }

.tempo-detalhes { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: 2px; }
.tempo-detalhes li { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-sm); padding: 3px 0; border-bottom: 1px dotted var(--borda); }
.tempo-rotulo { font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-2); }
.tempo-valor { font-family: var(--fonte-ui); font-weight: 700; }

.tempo-outras { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.tempo-outra { display: inline-flex; align-items: center; gap: 5px; font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-2); }
.tempo-outra__temp { font-weight: 700; color: var(--texto); }
.tempo-outra__icone { color: var(--acento); display: inline-flex; }

/* Indicadores */
.indicadores { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.indicador {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "rotulo valor" "variacao data";
	gap: 0 var(--e-3);
	padding: var(--e-2) 0;
	border-bottom: 1px solid var(--borda);
	align-items: baseline;
}

.indicador:last-child { border-bottom: 0; }
.indicador__rotulo { grid-area: rotulo; font-family: var(--fonte-ui); font-size: var(--t-sm); font-weight: 700; }
.indicador__rotulo em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--texto-3); margin-left: 4px; }
.indicador__valor { grid-area: valor; font-family: var(--fonte-ui); font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.indicador__data { grid-area: data; font-family: var(--fonte-ui); font-size: 11px; color: var(--texto-3); text-align: right; }

.indicador__variacao {
	grid-area: variacao;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--texto-3);
}

.indicador__variacao--sobe  { color: #1B7A3D; }
.indicador__variacao--desce { color: var(--urgente); }

/* Horóscopo */
.horoscopo-abas {
	display: flex;
	gap: var(--e-1);
	overflow-x: auto;
	padding-bottom: var(--e-2);
	margin-bottom: var(--e-3);
	border-bottom: 1px solid var(--borda);
	scrollbar-width: thin;
}

.horoscopo-aba {
	flex: none;
	display: grid;
	justify-items: center;
	gap: 1px;
	padding: 4px 7px;
	border: 1px solid transparent;
	border-radius: var(--raio);
	background: transparent;
	color: var(--texto-2);
	cursor: pointer;
	font-family: var(--fonte-ui);
	font-size: 10px;
	line-height: 1.1;
}

.horoscopo-aba__simbolo { font-size: 15px; line-height: 1; }
.horoscopo-aba:hover { background: var(--bg-alt); }
.horoscopo-aba[aria-selected="true"] { border-color: var(--borda-forte); background: var(--bg-alt); color: var(--texto); font-weight: 700; }

.horoscopo-painel__titulo { display: flex; align-items: baseline; gap: 6px; margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.horoscopo-painel__titulo em { font-style: normal; font-family: var(--fonte-ui); font-size: 11px; font-weight: 500; color: var(--texto-3); }
.horoscopo-texto { margin: 0 0 var(--e-2); font-size: var(--t-sm); line-height: 1.5; }
.horoscopo-linha { margin: 0 0 3px; font-size: var(--t-sm); line-height: 1.45; }
.horoscopo-linha strong { font-family: var(--fonte-ui); font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.horoscopo-rodape { margin: var(--e-2) 0 0; font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }

/* -------------------------------------------------------------
   25. GUIA DA REGIÃO
   ---------------------------------------------------------- */

.guia-cidades { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.guia-cidade a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-2);
	padding: var(--e-3);
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease;
}

.guia-cidade a:hover { border-color: var(--marca); }
.guia-cidade__nome { font-family: var(--fonte-titulo); font-size: var(--t-md); font-weight: 600; }
.guia-cidade__conta { font-family: var(--fonte-ui); font-size: 11px; color: var(--texto-3); white-space: nowrap; }
.guia-cidade--vazia a { border-style: dashed; }
.guia-cidade--vazia .guia-cidade__nome { color: var(--texto-2); }

.guia-grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

.guia-card {
	border: 1px solid var(--borda);
	border-radius: var(--raio);
	padding: var(--e-4);
	background: var(--superficie);
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}

.guia-card--patrocinado { border-color: var(--dourado-500); box-shadow: inset 3px 0 0 var(--dourado-500); }
.guia-card__titulo { margin: 0; font-size: var(--t-lg); line-height: 1.2; }
.guia-card__titulo a { color: inherit; text-decoration: none; }
.guia-card__titulo a:hover { text-decoration: underline; }
.guia-card__selos { margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1); }

.guia-selo,
.selo-patrocinio {
	display: inline-block;
	padding: .12rem .45rem;
	border-radius: var(--raio);
	font-family: var(--fonte-ui);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.guia-selo--24h { background: var(--verde-800); color: var(--creme); }
.selo-patrocinio { background: var(--dourado-500); color: var(--verde-900); cursor: help; }

.guia-card__dados { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.guia-dado { display: flex; gap: 7px; font-size: var(--t-sm); color: var(--texto-2); line-height: 1.35; }
.guia-dado .serv-icone { flex: none; margin-top: 2px; color: var(--texto-3); }
.guia-card__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); }

.guia-acao {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: .28rem .55rem;
	border: 1px solid var(--borda-forte);
	border-radius: 100px;
	font-family: var(--fonte-ui);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--texto-2);
	text-decoration: none;
}

.guia-acao:hover { border-color: var(--marca); color: var(--marca); }
.guia-acao--zap:hover { border-color: #1FA855; color: #1FA855; }

.guia-migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--e-4) 0; font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }
.guia-migalhas a { color: var(--texto-2); }
.guia-atalhos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-4) 0 var(--e-6); }
.guia-chamada { font-size: var(--t-sm); color: var(--texto-2); margin: 0 0 var(--e-3); }
.guia-vazio { padding: var(--e-5); border: 1px dashed var(--borda-forte); border-radius: var(--raio); font-size: var(--t-sm); color: var(--texto-2); }
.guia-ficha__aviso { margin-top: var(--e-5); font-family: var(--fonte-ui); font-size: var(--t-xs); color: var(--texto-3); }

/* A capitular é gesto de abertura de reportagem. Numa ficha de guia, onde o
   corpo do texto é uma observação de duas linhas sobre convênio ou
   estacionamento, ela vira letra gigante solta no meio da página. */
.guia-ficha .materia__corpo > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	color: inherit;
	font-weight: inherit;
}
.secao--guia { scroll-margin-top: calc(var(--cabecalho-altura) + 12px); }

/* -------------------------------------------------------------
   21. IMPRESSÃO
   ---------------------------------------------------------- */

@media print {
	.cabecalho, .rodape, .ad, .compartilhar, .audio, .cookies, .relacionadas, .lateral, .urgente,
	.alerta-faixa, .faixa-servicos, .guia-atalhos { display: none !important; }
	body { background: #fff; color: #000; }
	.materia { max-width: none; }
	.materia__corpo a::after { content: " (" attr(href) ")"; font-size: .8em; }
	.materia-fonte { border: 1px solid #000; }
}