/* =========================================================
   YGARÁ NEWS — folha de estilo única do tema
   Mobile-first. Sem Bootstrap, sem jQuery, sem fonte externa.
   As cores vêm do Personalizador (variáveis --cor-*).
   ========================================================= */

/* ---------------------------------------------------------
   FONTES LOCAIS (opcional)
   Coloque os arquivos .woff2 em /assets/fonts/ e descomente
   os blocos abaixo. Sem eles, o site usa fontes do sistema —
   que carregam instantaneamente e não custam nenhuma requisição.
--------------------------------------------------------- */
/*
@font-face{font-family:'Ygara Display';src:url('../fonts/playfair.woff2') format('woff2');font-weight:400 900;font-display:swap;}
@font-face{font-family:'Ygara Sans';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap;}
*/

/* ---------------------------------------------------------
   1. BASE E VARIÁVEIS
--------------------------------------------------------- */
:root{
	--fonte-titulo:'Ygara Display',Georgia,'Times New Roman',serif;
	--fonte-corpo:'Ygara Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

	/* Cores semânticas (recebem os valores do Personalizador). */
	--fundo:var(--cor-fundo,#fff);
	--texto:var(--cor-texto,#1a1a1a);
	--bloco:var(--cor-bloco,#f7f7f5);
	--linha:var(--cor-linha,#e5e5e5);
	--principal:var(--cor-principal,#0f4a2f);
	--destaque:var(--cor-destaque,#c8912b);

	/* Duas cores existem SÓ para texto. O verde e o dourado da marca
	   funcionam como fundo, mas como letra não têm contraste suficiente:
	   o dourado sobre branco dá 2,78:1 (o mínimo legível é 4,5:1) e o
	   verde sobre o fundo escuro dá 1,78:1 — o link some.
	   Fundo, borda e detalhe continuam usando --principal e --destaque. */
	--link:var(--cor-principal,#0f4a2f);
	--destaque-texto:#8a6114;
	--cor-editoria:var(--cor-principal,#0f4a2f);

	--suave:rgba(0,0,0,.55);
	--largura:1200px;
	--leitura:680px;
	--raio:8px;
	--sombra:0 1px 3px rgba(0,0,0,.08);
	--transicao:.2s ease;
}

/* Modo escuro manual */
html[data-tema="escuro"]{
	--link:#6fcf97;          /* verde claro: 9,6:1 no fundo escuro */
	--destaque-texto:#e0b252; /* dourado clareado: 6,6:1 no fundo escuro */
	--fundo:#12151a;
	--texto:#e9eaec;
	--bloco:#1a1f26;
	--linha:#2a313a;
	--suave:rgba(255,255,255,.62);
	--sombra:0 1px 3px rgba(0,0,0,.5);
}

/* Modo escuro automático (só quando o leitor não escolheu nada) */
@media (prefers-color-scheme: dark){
	html:not([data-tema="claro"]){
	--link:#6fcf97;          /* verde claro: 9,6:1 no fundo escuro */
	--destaque-texto:#e0b252; /* dourado clareado: 6,6:1 no fundo escuro */
		--fundo:#12151a;
		--texto:#e9eaec;
		--bloco:#1a1f26;
		--linha:#2a313a;
		--suave:rgba(255,255,255,.62);
		--sombra:0 1px 3px rgba(0,0,0,.5);
	}
}

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

/* O atributo hidden precisa vencer os display:flex definidos abaixo. */
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px;}

body{
	margin:0;
	background:var(--fundo);
	color:var(--texto);
	font-family:var(--fonte-corpo);
	font-size:17px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}

img,video,iframe,embed,object,canvas,svg{max-width:100%;}
img{height:auto;display:block;}

/* -------- Trava geral contra rolagem lateral --------
   O que mais quebra layout de portal é conteúdo colado dentro da matéria:
   vídeo do YouTube, tabela larga, foto com largura fixa, código, anúncio.
   As regras abaixo prendem tudo isso dentro da largura da tela. */

/* Vídeo colado no editor: ocupa a largura disponível e mantém 16:9. */
iframe,
.materia-texto iframe,
.wp-block-embed iframe,
.wp-embed-responsive iframe,
.materia-texto embed,
.materia-texto object{
	width:100%;
	max-width:100%;
	height:auto;
	aspect-ratio:16/9;
	border:0;
}
/* Alguns embeds não são vídeo (mapa, post de rede social): deixe a altura deles. */
iframe[height]:not([src*="youtu"]):not([src*="vimeo"]):not([src*="dailymotion"]){aspect-ratio:auto;}

/* Tabela larga rola dentro do próprio bloco, sem empurrar a página. */
.materia-texto table{width:100%;border-collapse:collapse;}
.materia-texto .wp-block-table,
.materia-texto figure.wp-block-table,
.materia-texto .tabela-rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}

/* Blocos "largura total" do editor não podem passar da tela. */
.materia-texto .alignfull,
.materia-texto .alignwide{max-width:100%;margin-left:0;margin-right:0;}

/* Foto com largura fixa vinda de plugin antigo. */
.materia-texto img[width],
.materia-texto img[style*="width"]{max-width:100% !important;height:auto !important;}

/* A CAUSA MAIS COMUM de "site não responsivo": numa grade (grid) ou
   num flex, a coluna se recusa a ficar menor que o conteúdo mais largo
   dentro dela. Basta um vídeo ou uma tabela para a coluna inteira
   esticar e empurrar a página. min-width:0 libera a coluna a encolher —
   aí o vídeo se ajusta e a tabela rola dentro do próprio bloco. */
.duas-colunas>*,
.coluna-conteudo,
.coluna-lateral,
.materia,
.materia-texto,
.grade-secao>*,
.topo-destaques>*,
.card-texto,
.fixo-texto{min-width:0;}

/* Última linha de defesa: nada rola para o lado.
   Usamos "clip" e não "hidden" de propósito — hidden quebraria o
   cabeçalho que gruda no topo ao rolar. */
html,body{overflow-x:clip;}

/* Nada pode estourar a largura da tela do celular. */
h1,h2,h3,h4,p,li,a,figcaption,td,th{overflow-wrap:break-word;}
pre,code{overflow-x:auto;max-width:100%;}

a{color:var(--link);text-decoration:none;}
a:hover{color:var(--destaque-texto);}

h1,h2,h3,h4{font-family:var(--fonte-titulo);line-height:1.25;margin:0 0 .4em;font-weight:700;}

button{font-family:inherit;cursor:pointer;}

:focus-visible{outline:3px solid var(--destaque);outline-offset:2px;}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 16px;}

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

.pular-para-conteudo{
	position:absolute;left:-9999px;top:0;z-index:9999;
	background:var(--principal);color:#fff;padding:10px 16px;
}
.pular-para-conteudo:focus{left:0;}

@media (prefers-reduced-motion: reduce){
	*{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* ---------------------------------------------------------
   2. PUBLICIDADE
--------------------------------------------------------- */
.anuncio{margin:20px 0;text-align:center;}
.rotulo-anuncio{
	display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--suave);margin-bottom:4px;
}
.anuncio-conteudo{display:flex;justify-content:center;overflow:hidden;}
.anuncio-topo{margin:12px auto;max-width:var(--largura);padding:0 16px;}

.anuncio-fixo-mobile{
	position:fixed;left:0;right:0;bottom:0;z-index:900;
	background:var(--bloco);border-top:1px solid var(--linha);
	text-align:center;
	/* env(safe-area-inset-bottom) = a faixa do "queixo" do iPhone.
	   Sem isso, a barrinha do aparelho cobre parte do anúncio. */
	padding:4px 0 calc(6px + env(safe-area-inset-bottom,0px));
}
.anuncio-fixo-mobile .fechar-anuncio{
	position:absolute;top:-13px;right:8px;width:26px;height:26px;border-radius:50%;
	border:1px solid var(--linha);background:var(--fundo);color:var(--texto);
	font-size:16px;line-height:1;
}
@media (min-width:769px){ .anuncio-fixo-mobile{display:none;} }

/* ---------------------------------------------------------
   3. FAIXA URGENTE
--------------------------------------------------------- */
.faixa-urgente{background:#b32d2e;color:#fff;}
.faixa-urgente a{
	display:flex;gap:10px;align-items:center;color:#fff;
	max-width:var(--largura);margin:0 auto;padding:8px 16px;font-size:15px;
}
.faixa-urgente strong{
	background:#fff;color:#b32d2e;padding:2px 8px;border-radius:3px;
	font-size:12px;letter-spacing:.1em;flex-shrink:0;
}
.pisca{animation:pisca 1.4s infinite;}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------------------------------------------------------
   4. BARRA DE PROGRESSO DE LEITURA
--------------------------------------------------------- */
.barra-progresso{
	position:fixed;top:0;left:0;height:3px;width:0;
	background:var(--destaque);z-index:1000;transition:width .1s linear;
}

/* ---------------------------------------------------------
   5. CABEÇALHO
--------------------------------------------------------- */
.cabecalho{position:sticky;top:0;z-index:800;box-shadow:var(--sombra);}

.linha-fina{background:var(--bloco);border-bottom:1px solid var(--linha);font-size:12.5px;color:var(--suave);}
.linha-fina .container{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:5px;padding-bottom:5px;}
/* O PHP já entrega "Sábado, 22 de agosto de 2026" — capitalizar de novo
   virava "22 De Agosto De 2026". */
.data-hoje{text-transform:none;}
.clima-topo{display:flex;gap:5px;align-items:center;white-space:nowrap;}
.clima-topo-desc{display:none;}
@media (min-width:600px){ .clima-topo-desc{display:inline;} }
@media (max-width:480px){ .data-hoje{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} }

.barra-principal{background:var(--principal);color:#fff;}
.barra-principal .container{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px;transition:padding .22s ease;}

.botao-menu,.botao-icone{
	background:none;border:0;color:#fff;padding:6px;display:flex;align-items:center;
	border-radius:4px;transition:background var(--transicao);
}
.botao-menu:hover,.botao-icone:hover{background:rgba(255,255,255,.14);}

.marca{flex:1;display:flex;justify-content:center;}
.marca img,.marca .custom-logo{height:var(--altura-logo-mob,42px);width:auto;transition:height .22s ease;}
@media (min-width:769px){ .marca img,.marca .custom-logo{height:var(--altura-logo,52px);} }

.acoes-topo{display:flex;align-items:center;gap:2px;}
.redes-sociais{display:none;gap:2px;}
@media (min-width:769px){ .redes-sociais{display:flex;} }
.rede-social{color:#fff;padding:6px;display:flex;border-radius:4px;}
.rede-social:hover{background:rgba(255,255,255,.14);color:#fff;}

#alternar-tema .ico-sol{display:none;}
html[data-tema="escuro"] #alternar-tema .ico-sol{display:block;}
html[data-tema="escuro"] #alternar-tema .ico-lua{display:none;}

/* Cabeçalho compacto ao rolar.
   IMPORTANTE: a linha fina NÃO usa display:none. Se ela sumisse de uma vez,
   a página inteira subiria uns 25px, o navegador cruzaria o limite de rolagem
   de novo e o cabeçalho ficaria crescendo e encolhendo em loop — o famoso
   "tremor". Com max-height + transição, o encolhimento é suave e controlado. */
.linha-fina{
	max-height:34px;
	overflow:hidden;
	transition:max-height .22s ease;
}
.cabecalho.compacto .linha-fina{max-height:0;}
.cabecalho.compacto .barra-principal .container{padding-top:5px;padding-bottom:5px;}
.cabecalho.compacto .marca img,
.cabecalho.compacto .marca .custom-logo{height:var(--altura-logo-compacto,34px);}

/* O sentinela fica ACIMA do cabeçalho e nunca se move quando ele encolhe.
   É por ele que o JavaScript decide a hora de compactar — nunca pela altura
   da página, que é justamente o que causava o loop. */
.topo-sentinela{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;}

/* Quem preferir cabeçalho parado desliga no Personalizador. */
body.cabecalho-solto .cabecalho{position:static;}

/* Barra de editorias */
.barra-editorias{background:var(--fundo);border-bottom:2px solid var(--linha);position:relative;}
/* No celular a barra rola para o lado: um degradê na borda avisa que tem mais. */
@media (max-width:900px){
	.barra-editorias::after{
		content:"";position:absolute;top:0;right:0;bottom:2px;width:34px;pointer-events:none;
		background:linear-gradient(to right,transparent,var(--fundo));
	}
}
.barra-editorias .container{padding:0 16px;}
.lista-editorias{
	list-style:none;margin:0;padding:0;display:flex;gap:20px;
	overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.lista-editorias::-webkit-scrollbar{display:none;}
.lista-editorias li{flex:0 0 auto;}
.lista-editorias a{
	display:block;padding:11px 0;font-size:13px;font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;color:var(--texto);
	border-bottom:3px solid transparent;white-space:nowrap;
}
.lista-editorias a:hover,
.lista-editorias .current-cat a,
.lista-editorias .current-menu-item a,
.lista-editorias .current-menu-parent a{
	color:var(--cor-editoria,var(--principal));
	border-bottom-color:var(--cor-editoria,var(--destaque));
}

/* ---------------------------------------------------------
   6. BUSCA E MENU LATERAL
--------------------------------------------------------- */
/* Busca: barra fina que desce colada no cabeçalho, sem escurecer a tela */
.barra-busca{
	background:var(--bloco);
	border-bottom:1px solid var(--linha);
	animation:descer .18s ease;
}
.barra-busca form{display:flex;gap:8px;align-items:center;padding:10px 0;}
.barra-busca input{
	flex:1;min-width:0;padding:11px 14px;font-size:16px;
	border:1px solid var(--linha);border-radius:var(--raio);
	background:var(--fundo);color:var(--texto);
}
.barra-busca input:focus{border-color:var(--principal);}
.barra-busca button[type=submit]{
	padding:11px 20px;border:0;border-radius:var(--raio);
	background:var(--principal);color:#fff;font-weight:700;font-size:15px;
	white-space:nowrap;
}
.barra-busca button[type=submit]:hover{background:var(--cor-principal-escura,#0b3823);}
.fechar-busca{
	background:none;border:0;color:var(--suave);font-size:26px;line-height:1;
	padding:0 4px;
}
.fechar-busca:hover{color:var(--texto);}
@keyframes descer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.fundo-escuro{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:900;}

.menu-lateral{
	position:fixed;top:0;left:0;bottom:0;width:86%;max-width:330px;z-index:920;
	background:var(--fundo);border-right:1px solid var(--linha);
	transform:translateX(-105%);transition:transform .25s ease;
	overflow-y:auto;padding-bottom:30px;
}
.menu-lateral.aberto{transform:translateX(0);}
.menu-lateral-topo{
	display:flex;justify-content:space-between;align-items:center;gap:10px;
	background:var(--principal);color:#fff;padding:14px 16px;font-weight:700;
}
.menu-lateral-topo button{background:none;border:0;color:#fff;font-size:28px;line-height:1;}
.lista-lateral{list-style:none;margin:0;padding:8px 0;}
.lista-lateral li{border-bottom:1px solid var(--linha);}
.lista-lateral a{display:block;padding:13px 18px;color:var(--texto);font-weight:600;}
.lista-lateral a:hover{background:var(--bloco);color:var(--link);}
.menu-lateral-redes{padding:16px 18px;}
.menu-lateral-redes .redes-sociais{display:flex;gap:8px;}
.menu-lateral-redes .rede-social{color:var(--principal);background:var(--bloco);}

/* ---------------------------------------------------------
   7. HOME — MANCHETE E DESTAQUES
--------------------------------------------------------- */
.conteudo-principal{display:block;}

.bloco-manchete{padding:26px 0 18px;text-align:center;border-bottom:1px solid var(--linha);}
.chapeu{
	display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;
	text-transform:uppercase;color:var(--cor-editoria);margin-bottom:8px;
}
.titulo-manchete{font-size:30px;margin:0 auto;max-width:900px;}
.titulo-manchete a{color:var(--texto);}
.titulo-manchete a:hover{color:var(--link);}
.linha-fina-manchete{
	max-width:760px;margin:10px auto 0;color:var(--suave);
	font-size:17px;line-height:1.55;
}
@media (min-width:769px){ .titulo-manchete{font-size:44px;} .linha-fina-manchete{font-size:19px;} }

.grade-destaques{padding:20px 0 6px;}
.grade{display:grid;gap:16px;grid-template-columns:1fr;}
@media (min-width:900px){ .grade{grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto;} .destaque-grande{grid-row:span 2;} }

.destaque-grande{position:relative;border-radius:var(--raio);overflow:hidden;}
.destaque-grande img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease;}
.destaque-grande:hover img{transform:scale(1.03);}
.destaque-texto{
	position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;
	background:linear-gradient(to top,rgba(0,0,0,.93),rgba(0,0,0,.15) 70%,rgba(0,0,0,0));
}
.destaque-texto h1,.destaque-texto h2{color:#fff;font-size:22px;margin:6px 0 0;}
@media (min-width:769px){ .destaque-texto h1,.destaque-texto h2{font-size:28px;} }
.destaque-texto .tag-editoria{background:var(--cor-editoria);color:#fff;}

.destaque-pequeno{display:flex;gap:12px;align-items:flex-start;}
.destaque-pequeno .mini-foto{flex:0 0 110px;border-radius:6px;overflow:hidden;}
.destaque-pequeno img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.destaque-pequeno h2{font-size:17px;margin:5px 0 4px;}
.destaque-pequeno h2 a{color:var(--texto);}
.destaque-pequeno h2 a:hover{color:var(--link);}
.mini-resumo{margin:0;font-size:14px;color:var(--suave);line-height:1.5;}

/* ---------------------------------------------------------
   7.1 CARROSSEL DE DESTAQUES (as primeiras matérias em slide)
   Feito com rolagem + scroll-snap: sem biblioteca, sem jQuery.
   Já funciona arrastando com o dedo, mesmo sem JavaScript.
--------------------------------------------------------- */
.carrossel-destaques{padding:20px 0 6px;}

/* Slide à esquerda e matérias fixas à direita */
.topo-destaques{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:880px){
	.topo-destaques{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px;align-items:stretch;}
	.topo-destaques.sem-fixos{grid-template-columns:1fr;}
}

.carrossel{position:relative;min-width:0;}

.carrossel-trilho{
	display:flex;
	gap:0;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	border-radius:var(--raio);
}
.carrossel-trilho::-webkit-scrollbar{display:none;}

.slide{
	position:relative;
	flex:0 0 100%;
	scroll-snap-align:start;
	overflow:hidden;
	background:var(--bloco);
}
.slide img{width:100%;aspect-ratio:16/9;object-fit:cover;}

.slide-texto{
	position:absolute;left:0;right:0;bottom:0;
	padding:60px 20px 20px;
	background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.35) 55%,rgba(0,0,0,0));
}
.slide-texto .tag-editoria{
	background:var(--cor-editoria);color:#fff;
	padding:3px 9px;border-radius:3px;
}
/* O primeiro slide sai como H1 na home (ver inc/home.php). O estilo é o
   mesmo do H2 para o tamanho não mudar por causa da tag. */
.slide-texto h1,
.slide-texto h2{
	color:#fff;font-size:22px;margin:8px 0 0;
	text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.slide-resumo{
	color:rgba(255,255,255,.86);margin:6px 0 0;font-size:15px;
	line-height:1.5;display:none;
}
@media (min-width:769px){
	.slide-texto{padding:80px 26px 24px;}
	.slide-texto h1,
	.slide-texto h2{font-size:29px;max-width:820px;}
	.slide-resumo{display:block;max-width:700px;}
}

/* Setas */
.carrossel-nav{
	position:absolute;top:50%;transform:translateY(-50%);
	width:42px;height:42px;border-radius:50%;border:0;
	background:rgba(0,0,0,.45);color:#fff;
	display:none;align-items:center;justify-content:center;
	transition:background var(--transicao);
}
.carrossel-nav:hover{background:var(--principal);}
.carrossel-nav.anterior{left:10px;}
.carrossel-nav.proxima{right:10px;}
@media (min-width:769px){ .carrossel-nav{display:flex;} }

/* No computador as bolinhas ficam por cima do slide, no canto de baixo.
   Assim a coluna do slide tem exatamente a altura da foto, e as matérias
   do lado fecham na mesma linha, sem sobrar um dedo de diferença. */
@media (min-width:880px){
	.carrossel{display:flex;flex-direction:column;}
	.carrossel-trilho{flex:1;}
	.carrossel-pontos{
		position:absolute;right:16px;bottom:14px;z-index:3;
		padding:0;gap:7px;
	}
	.carrossel-pontos button{background:rgba(255,255,255,.45);}
	.carrossel-pontos button.ativo{background:var(--destaque);}
}

/* Bolinhas */
.carrossel-pontos{display:flex;justify-content:center;gap:8px;padding:12px 0 0;}
.carrossel-pontos button{
	width:9px;height:9px;padding:0;border:0;border-radius:50%;
	background:var(--linha);transition:all var(--transicao);
}
.carrossel-pontos button.ativo{background:var(--destaque);width:24px;border-radius:5px;}

/* Matérias fixas ao lado do slide: cards com foto e título por cima,
   dividindo a altura do slide em partes iguais. */
.destaques-fixos{
	display:grid;
	grid-template-columns:1fr;
	grid-auto-rows:1fr;
	gap:14px;
	min-width:0;
}
@media (min-width:880px){ .destaques-fixos{height:100%;} }

.fixo{
	position:relative;
	aspect-ratio:16/9;
	border-radius:var(--raio);
	overflow:hidden;
	background:var(--bloco);
	margin:0;padding:0;border:0;
}
@media (min-width:880px){
	/* No computador quem manda na altura é o slide; a proporção sai de cena. */
	.fixo{aspect-ratio:auto;}
}
.fixo>a{display:block;height:100%;color:#fff;}
.fixo img{
	position:absolute;inset:0;
	width:100%;height:100%;object-fit:cover;
	transition:transform .4s ease;
}
.fixo:hover img{transform:scale(1.04);}

.fixo-texto{
	position:absolute;left:0;right:0;bottom:0;
	padding:44px 16px 14px;
	background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5) 60%,rgba(0,0,0,0));
	min-width:0;
}
.fixo-meta{
	display:flex;flex-wrap:wrap;gap:8px;align-items:center;
	font-size:11px;color:rgba(255,255,255,.82);margin-bottom:4px;
}
.fixo-meta .tag-editoria{
	background:var(--cor-editoria);color:#fff;padding:2px 8px;border-radius:3px;
}
.fixo h3{
	color:#fff;font-size:16px;line-height:1.34;margin:0;
	text-shadow:0 1px 3px rgba(0,0,0,.45);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:1100px){ .fixo h3{font-size:18px;} }

/* No celular os cards ficam um debaixo do outro, logo abaixo do slide. */
@media (max-width:879px){
	.destaques-fixos{padding-top:0;}
}
/* Telas médias: dois lado a lado, para não esticar a página. */
@media (min-width:520px) and (max-width:879px){
	.destaques-fixos{grid-template-columns:1fr 1fr;}
}

/* ---------------------------------------------------------
   7.2 BLOCOS DA HOME POR EDITORIA
--------------------------------------------------------- */
.secao-editoria{padding:40px 0 10px;border-top:1px solid var(--linha);margin-top:14px;}
.secao-editoria:first-of-type{border-top:0;}

.secao-topo{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	border-bottom:3px solid var(--cor-editoria);padding-bottom:6px;margin-bottom:18px;
}
.secao-titulo{
	font-size:16px;text-transform:uppercase;letter-spacing:.1em;
	color:var(--cor-editoria);margin:0;
}
@media (min-width:769px){ .secao-titulo{font-size:19px;} }
.ver-todas{
	font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	color:var(--suave);white-space:nowrap;
}
.ver-todas:hover{color:var(--cor-editoria);text-decoration:underline;}

.grade-secao{display:grid;grid-template-columns:1fr;gap:14px;}

/* ---------- Formato MOSAICO (o padrão) ----------
   1 matéria grande à esquerda e as outras empilhadas à direita,
   todas do mesmo tamanho, com foto e título por cima. */
@media (min-width:760px){
	.grade-secao.layout-mosaico,
	.grade-secao.layout-duplo{
		grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
		gap:14px;
		align-items:stretch;
	}
}

.layout-mosaico .secao-destaque,
.layout-mosaico .secao-item{
	position:relative;
	border-radius:var(--raio);
	overflow:hidden;
	background:var(--bloco);
	margin:0;padding:0;border:0;
}
.layout-mosaico .secao-destaque a,
.layout-mosaico .secao-item a{display:block;height:100%;color:#fff;}

/* A foto sai do fluxo e preenche o card. Sem isso, a altura natural da
   imagem manda na altura do bloco e a coluna da direita estica sozinha,
   deixando o bloco alto demais no computador. */
.layout-mosaico .secao-destaque img,
.layout-mosaico .secao-item img{
	position:absolute;inset:0;
	width:100%;height:100%;object-fit:cover;
	transition:transform .4s ease;
}
.layout-mosaico .secao-destaque:hover img,
.layout-mosaico .secao-item:hover img{transform:scale(1.04);}

/* A altura de todo o bloco vem do card grande, que é sempre 16:9.
   Os quatro do lado se esticam para fechar exatamente a mesma altura. */
/* No celular o card grande fica mais alto que os outros, para continuar
   sendo o destaque. No computador ele volta ao 16:9. */
.layout-mosaico .secao-destaque{aspect-ratio:4/3;}
@media (min-width:760px){ .layout-mosaico .secao-destaque{aspect-ratio:16/9;} }

/* Os empilhados da direita dividem a altura em partes iguais. */
.layout-mosaico .secao-lista{
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	min-width:0;
}
@media (min-width:480px) and (max-width:759px){
	.layout-mosaico .secao-lista{grid-template-columns:1fr 1fr;}
}
@media (min-width:760px){
	.layout-mosaico .secao-lista{grid-auto-rows:1fr;height:100%;}
}
/* Os quatro do lado viram faixas mais baixas no celular: cabem mais
   matérias na tela e a rolagem não fica interminável. */
.layout-mosaico .secao-item{aspect-ratio:21/9;}
@media (min-width:760px){
	/* No computador eles dividem a altura do card grande em partes iguais,
	   então a proporção deixa de mandar. */
	.layout-mosaico .secao-item{aspect-ratio:auto;min-height:0;}
}

/* O texto por cima da foto, com degradê para continuar legível. */
.layout-mosaico .secao-destaque-texto,
.layout-mosaico .secao-item-texto{
	position:absolute;left:0;right:0;bottom:0;
	padding:38px 14px 12px;
	background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5) 60%,rgba(0,0,0,0));
}
.layout-mosaico .secao-destaque-texto{padding:60px 20px 18px;}
.layout-mosaico .secao-destaque-texto .tag-editoria{
	background:var(--cor-editoria);color:#fff;padding:3px 9px;border-radius:3px;
}
.layout-mosaico .secao-destaque-texto h3{
	color:#fff;font-size:19px;margin:8px 0 0;
	text-shadow:0 1px 3px rgba(0,0,0,.45);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:760px){ .layout-mosaico .secao-destaque-texto h3{font-size:25px;} }
.layout-mosaico .secao-resumo{
	color:rgba(255,255,255,.85);margin:6px 0 0;font-size:14px;line-height:1.5;
	display:none;
}
@media (min-width:900px){
	.layout-mosaico .secao-resumo{
		display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	}
}

.layout-mosaico .secao-item-texto time{
	display:block;font-size:10.5px;color:rgba(255,255,255,.8);margin-bottom:2px;
}
.layout-mosaico .secao-item-texto h3{
	color:#fff;font-size:16px;line-height:1.32;margin:0;
	text-shadow:0 1px 3px rgba(0,0,0,.45);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (min-width:1100px){ .layout-mosaico .secao-item-texto h3{font-size:15px;} }

/* Editoria com uma matéria só: o bloco grande ocupa a largura toda, mas
   mais baixo — senão uma foto sozinha viraria um paredão na home. */
.grade-secao>.secao-destaque:only-child{grid-column:1/-1;}
@media (min-width:760px){
	.layout-mosaico>.secao-destaque:only-child{aspect-ratio:24/9;max-height:400px;}
}

/* ---------- Formato DUPLO ----------
   É o mosaico com duas matérias do lado; todo o visual é o mesmo,
   por isso só repetimos os seletores. */
.layout-duplo .secao-destaque,
.layout-duplo .secao-item{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--bloco);margin:0;padding:0;border:0;}
.layout-duplo .secao-destaque a,
.layout-duplo .secao-item a{display:block;height:100%;color:#fff;}
.layout-duplo .secao-destaque img,
.layout-duplo .secao-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.layout-duplo .secao-destaque:hover img,
.layout-duplo .secao-item:hover img{transform:scale(1.04);}
.layout-duplo .secao-destaque{aspect-ratio:4/3;}
@media (min-width:760px){ .layout-duplo .secao-destaque{aspect-ratio:16/9;} }
.layout-duplo .secao-lista{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px;min-width:0;}
@media (min-width:520px) and (max-width:759px){ .layout-duplo .secao-lista{grid-template-columns:1fr 1fr;} }
@media (min-width:760px){ .layout-duplo .secao-lista{height:100%;} }
.layout-duplo .secao-item{aspect-ratio:16/9;}
@media (min-width:760px){ .layout-duplo .secao-item{aspect-ratio:auto;} }
.layout-duplo .secao-destaque-texto,
.layout-duplo .secao-item-texto{
	position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;
	background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5) 60%,rgba(0,0,0,0));
}
.layout-duplo .secao-destaque-texto{padding:60px 20px 18px;}
.layout-duplo .secao-destaque-texto .tag-editoria{background:var(--cor-editoria);color:#fff;padding:3px 9px;border-radius:3px;}
.layout-duplo .secao-destaque-texto h3{color:#fff;font-size:19px;margin:8px 0 0;text-shadow:0 1px 3px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (min-width:760px){ .layout-duplo .secao-destaque-texto h3{font-size:25px;} }
.layout-duplo .secao-resumo{color:rgba(255,255,255,.85);margin:6px 0 0;font-size:14px;line-height:1.5;display:none;}
@media (min-width:900px){ .layout-duplo .secao-resumo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} }
.layout-duplo .secao-item-texto time{display:block;font-size:10.5px;color:rgba(255,255,255,.8);margin-bottom:2px;}
.layout-duplo .secao-item-texto h3{color:#fff;font-size:16px;line-height:1.32;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Formato VERTICAL + GRADE ----------
   Uma matéria em pé à esquerda e seis em grade de 2 colunas à direita. */
@media (min-width:760px){
	.grade-secao.layout-vertical{
		grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
		gap:14px;align-items:stretch;
	}
}
.layout-vertical .secao-destaque,
.layout-vertical .secao-item{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--bloco);margin:0;padding:0;border:0;}
.layout-vertical .secao-destaque a,
.layout-vertical .secao-item a{display:block;height:100%;color:#fff;}
.layout-vertical .secao-destaque img,
.layout-vertical .secao-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.layout-vertical .secao-destaque:hover img,
.layout-vertical .secao-item:hover img{transform:scale(1.04);}

/* A da esquerda é em pé (retrato) e define a altura do bloco. */
.layout-vertical .secao-destaque{aspect-ratio:4/3;}
@media (min-width:760px){ .layout-vertical .secao-destaque{aspect-ratio:3/4;} }

.layout-vertical .secao-lista{display:grid;grid-template-columns:1fr;gap:12px;min-width:0;}
@media (min-width:520px){ .layout-vertical .secao-lista{grid-template-columns:1fr 1fr;} }
@media (min-width:760px){ .layout-vertical .secao-lista{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;height:100%;} }
.layout-vertical .secao-item{aspect-ratio:16/9;}
@media (min-width:760px){ .layout-vertical .secao-item{aspect-ratio:auto;} }

.layout-vertical .secao-destaque-texto,
.layout-vertical .secao-item-texto{
	position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;
	background:linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.5) 60%,rgba(0,0,0,0));
}
.layout-vertical .secao-destaque-texto{padding:60px 18px 16px;}
.layout-vertical .secao-destaque-texto .tag-editoria{background:var(--cor-editoria);color:#fff;padding:3px 9px;border-radius:3px;}
.layout-vertical .secao-destaque-texto h3{color:#fff;font-size:19px;margin:8px 0 0;text-shadow:0 1px 3px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
@media (min-width:900px){ .layout-vertical .secao-destaque-texto h3{font-size:22px;} }
.layout-vertical .secao-resumo{display:none;}
.layout-vertical .secao-item-texto time{display:block;font-size:10.5px;color:rgba(255,255,255,.8);margin-bottom:2px;}
.layout-vertical .secao-item-texto h3{color:#fff;font-size:16px;line-height:1.3;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.45);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- Formato GRADE ----------
   Seis matérias do mesmo tamanho, três por linha, em card CLARO:
   foto em cima e o título embaixo, em preto sobre branco.
   Este é o bloco que dá respiro entre os blocos escuros — sem ele a
   home vira uma parede de foto com letra branca por cima. */
.grade-secao.layout-grade{grid-template-columns:1fr;gap:20px;}
@media (min-width:520px){ .grade-secao.layout-grade{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .grade-secao.layout-grade{grid-template-columns:repeat(3,1fr);gap:22px;} }

.layout-grade .secao-item{position:static;aspect-ratio:auto;background:none;border-radius:0;overflow:visible;margin:0;padding:0;border:0;min-width:0;}
.layout-grade .secao-item a{display:block;height:auto;color:var(--texto);}
.layout-grade .secao-item img{
	position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
	border-radius:var(--raio);margin-bottom:9px;transition:transform .35s ease;
}
.layout-grade .secao-item{overflow:hidden;border-radius:var(--raio);}
.layout-grade .secao-item:hover img{transform:scale(1.04);}
.layout-grade .secao-item-texto{position:static;padding:0;background:none;}
.layout-grade .secao-item-texto time{display:block;font-size:11.5px;color:var(--suave);margin-bottom:4px;}
.layout-grade .secao-item-texto h3{
	color:var(--texto);font-size:17px;line-height:1.34;margin:0;text-shadow:none;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.layout-grade .secao-item a:hover h3{color:var(--cor-editoria);}

/* ---------- Formato CLÁSSICO (foto com o título embaixo) ---------- */
@media (min-width:660px){
	.grade-secao.layout-classico{grid-template-columns:1.15fr 1fr;gap:24px;}
}
.layout-classico .secao-destaque a{display:block;overflow:hidden;border-radius:var(--raio);}
.layout-classico .secao-destaque img{
	width:100%;aspect-ratio:16/9;object-fit:cover;
	border-radius:var(--raio);margin-bottom:9px;transition:transform .35s ease;
}
.layout-classico .secao-destaque:hover img{transform:scale(1.03);}
.layout-classico .secao-destaque-texto{position:static;padding:0;background:none;}
.layout-classico .secao-destaque-texto .tag-editoria{background:none;padding:0;color:var(--cor-editoria);}
.layout-classico .secao-destaque-texto h3{font-size:20px;margin:4px 0 0;color:var(--texto);text-shadow:none;}
@media (min-width:769px){ .layout-classico .secao-destaque-texto h3{font-size:23px;} }
.layout-classico .secao-destaque a:hover h3{color:var(--cor-editoria);}
.layout-classico .secao-resumo{margin:7px 0 0;font-size:15px;color:var(--suave);line-height:1.55;display:block;}

.layout-classico .secao-item{
	display:block;padding:0 0 14px;border-bottom:1px solid var(--linha);margin-bottom:14px;
}
.layout-classico .secao-item:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.layout-classico .secao-item a{display:flex;gap:12px;align-items:flex-start;color:var(--texto);}
.layout-classico .secao-item img{
	flex:0 0 96px;width:96px;aspect-ratio:4/3;object-fit:cover;border-radius:6px;
}
.layout-classico .secao-item-texto{position:static;padding:0;background:none;min-width:0;}
.layout-classico .secao-item-texto time{display:block;font-size:11.5px;color:var(--suave);margin-bottom:3px;}
.layout-classico .secao-item-texto h3{
	font-size:16px;margin:0;line-height:1.4;color:var(--texto);text-shadow:none;
}
.layout-classico .secao-item a:hover h3{color:var(--cor-editoria);}

/* Tag colorida da editoria */
.tag-editoria{
	display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;
	text-transform:uppercase;color:var(--cor-editoria);
}
a.tag-editoria:hover{color:var(--destaque-texto);}

/* ---------------------------------------------------------
   8. DUAS COLUNAS
--------------------------------------------------------- */
.duas-colunas{display:grid;grid-template-columns:1fr;gap:28px;padding-top:22px;padding-bottom:36px;}
/* Com a coluna lateral desligada, o conteúdo ocupa a largura toda. */
.duas-colunas>.coluna-conteudo:only-child{grid-column:1/-1;max-width:900px;margin:0 auto;width:100%;}
@media (min-width:1000px){ .duas-colunas{grid-template-columns:minmax(0,65%) minmax(0,35%);gap:34px;} }

.titulo-secao{
	font-size:15px;text-transform:uppercase;letter-spacing:.1em;
	border-bottom:3px solid var(--principal);padding-bottom:6px;margin:0 0 16px;
}

/* Lista de notícias */
.card-lista{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--linha);}
.card-lista:first-child{padding-top:0;}
.card-foto{flex:0 0 118px;border-radius:6px;overflow:hidden;}
@media (min-width:600px){ .card-foto{flex:0 0 190px;} }
.card-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease;}
.card-lista:hover .card-foto img{transform:scale(1.04);}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px;color:var(--suave);margin-bottom:5px;}
/* Separador que some quando a linha quebra, para não sobrar um "·" solto. */
.card-meta>*+*::before{content:"·";margin-right:7px;color:var(--linha);}
.card-titulo{font-size:18px;margin:0 0 6px;}
@media (min-width:600px){ .card-titulo{font-size:21px;} }
.card-titulo a{color:var(--texto);}
.card-titulo a:hover{color:var(--link);}
.card-resumo{margin:0;font-size:15px;color:var(--suave);line-height:1.55;display:none;}
@media (min-width:600px){ .card-resumo{display:block;} }

/* ---------- "Últimas notícias" em grade ----------
   Cards com foto em cima e o texto embaixo, 3 por linha. */
.lista-grade{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:520px){ .lista-grade{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .lista-grade{grid-template-columns:repeat(3,1fr);gap:22px;} }

/* O anúncio ocupa a linha inteira, em vez de virar mais um card. */
.lista-grade .anuncio{grid-column:1/-1;}

.card-grade{min-width:0;}
.card-grade>a{display:block;color:var(--texto);}
.card-grade-foto{display:block;border-radius:var(--raio);overflow:hidden;margin-bottom:9px;}
.card-grade-foto img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease;}
.card-grade:hover .card-grade-foto img{transform:scale(1.04);}
.card-grade-texto{display:block;}
.card-grade .card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:var(--suave);margin-bottom:5px;}
.card-grade .card-meta .tag-editoria{color:var(--cor-editoria);}
.card-grade .card-titulo{
	display:block;font-family:var(--fonte-titulo);font-weight:700;
	font-size:17px;line-height:1.34;color:var(--texto);
}
.card-grade>a:hover .card-titulo{color:var(--cor-editoria,var(--principal));}

.area-carregar{text-align:center;margin:26px 0;}
.botao-carregar{
	display:inline-block;background:var(--principal);color:#fff;border:0;
	padding:13px 30px;border-radius:var(--raio);font-weight:700;font-size:15px;
	transition:background var(--transicao);
}
.botao-carregar:hover{background:var(--cor-principal-escura,#0b3823);color:#fff;}
.botao-carregar[disabled]{opacity:.55;cursor:default;}

/* ---------------------------------------------------------
   9. BARRA LATERAL E WIDGETS
--------------------------------------------------------- */
.coluna-lateral{min-width:0;}
@media (min-width:1000px){
	/* A lateral acompanha a rolagem: em vez de acabar no meio e deixar
	   um vazio à direita, ela sobe junto com o leitor. */
	.lateral-sticky{position:sticky;top:120px;}
}

.bloco-lateral{
	background:var(--bloco);border:1px solid var(--linha);
	border-radius:var(--raio);padding:16px;margin-bottom:20px;
}
.titulo-bloco{
	font-size:14px;text-transform:uppercase;letter-spacing:.1em;
	margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--destaque);
}

/* Clima */
.clima-agora{display:flex;gap:12px;align-items:center;}
.clima-icone{font-size:38px;line-height:1;}
.clima-temp{display:block;font-size:26px;font-family:var(--fonte-titulo);}
.clima-desc{display:block;font-size:14px;}
.clima-umidade{display:block;font-size:12px;color:var(--suave);}
.clima-semana{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--linha);}
.clima-semana li{display:grid;grid-template-columns:44px 30px 1fr auto;gap:6px;align-items:center;font-size:14px;padding:3px 0;}
.clima-semana .min{color:var(--suave);}
.clima-semana .max{text-align:right;font-weight:700;}

/* Economia */
.lista-cambio{list-style:none;margin:0;padding:0;}
.lista-cambio li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--linha);font-size:14px;}
.lista-cambio li:last-child{border-bottom:0;}
.lista-cambio .valor{font-weight:700;}
.variacao{font-size:12px;font-weight:700;}
.variacao.sobe{color:#1a7f37;}
.variacao.cai{color:#c62828;}
.fonte-dado{margin:8px 0 0;font-size:11px;color:var(--suave);}

/* Mega-Sena */
.concurso{margin:0 0 8px;font-size:13px;color:var(--suave);}
.dezenas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
.dezenas li{
	width:38px;height:38px;border-radius:50%;background:var(--principal);color:#fff;
	display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.proximo{margin:10px 0 0;font-size:13px;}

/* Horóscopo */
.grade-signos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0;padding:0;}
.signo{
	width:100%;background:var(--fundo);border:1px solid var(--linha);border-radius:6px;
	padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:2px;
	color:var(--texto);transition:border-color var(--transicao),color var(--transicao);
}
.signo:hover{border-color:var(--destaque);color:var(--link);}
.signo .simbolo{font-size:19px;line-height:1;}
.signo .nome{font-size:10px;text-align:center;line-height:1.2;}

/* Mais lidas */
.lista-mais-lidas{list-style:none;margin:0;padding:0;counter-reset:mais;}
.lista-mais-lidas li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linha);}
.lista-mais-lidas li:last-child{border-bottom:0;}
.lista-mais-lidas .numero{
	font-family:var(--fonte-titulo);font-size:28px;line-height:1;font-weight:900;
	color:var(--destaque-texto);min-width:26px;
}
.lista-mais-lidas a{color:var(--texto);font-size:15px;font-weight:600;line-height:1.4;}
.lista-mais-lidas a:hover{color:var(--link);}

/* Últimas notícias */
.lista-ultimas{list-style:none;margin:0;padding:0;}
.lista-ultimas li{padding:10px 0;border-bottom:1px solid var(--linha);}
.lista-ultimas li:last-child{border-bottom:0;}
.linha-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--suave);margin-bottom:2px;}
.lista-ultimas a{color:var(--texto);font-size:15px;font-weight:600;line-height:1.4;}
.lista-ultimas a:hover{color:var(--link);}

/* ---------------------------------------------------------
   10. CAMINHO (BREADCRUMBS)
--------------------------------------------------------- */
.caminho{font-size:12.5px;color:var(--suave);padding:14px 0 0;}
.caminho a{color:var(--suave);}
.caminho a:hover{color:var(--link);}
.caminho .sep{margin:0 6px;}

/* ---------------------------------------------------------
   11. PÁGINA DA MATÉRIA
--------------------------------------------------------- */
.materia{position:relative;}
.materia-topo{margin-bottom:18px;}
.materia-titulo{font-size:28px;margin:6px 0 10px;}
@media (min-width:769px){ .materia-titulo{font-size:40px;} }
.materia-linha-fina{
	font-size:19px;line-height:1.5;color:var(--suave);margin:0 0 16px;
	max-width:var(--leitura);
}
@media (min-width:769px){ .materia-linha-fina{font-size:21px;} }

.materia-credito{display:flex;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);}
.materia-credito .foto-autor{border-radius:50%;}
.credito-texto .autor{display:block;font-weight:700;font-size:14px;}
.credito-texto .detalhes{display:block;font-size:12.5px;color:var(--suave);}
.credito-texto .ponto{margin:0 5px;}

/* Compartilhamento */
.compartilhar{display:flex;gap:8px;align-items:center;padding:14px 0;}
.compartilhar-titulo{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);}
.cp{
	width:38px;height:38px;border-radius:50%;border:1px solid var(--linha);
	background:var(--fundo);color:var(--principal);
	display:flex;align-items:center;justify-content:center;
	transition:background var(--transicao),color var(--transicao);
}
.cp:hover{background:var(--principal);color:#fff;border-color:var(--principal);}

@media (min-width:1200px){
	.compartilhar{
		position:absolute;left:-72px;top:170px;flex-direction:column;
		padding:0;gap:10px;
	}
	.compartilhar-titulo{writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:4px;}
}
@media (max-width:768px){
	.compartilhar{
		position:fixed;left:0;right:0;z-index:880;
		/* Fica acima da faixa de anúncio do celular, quando ela existe.
		   O valor de --altura-anuncio é medido pelo JavaScript. */
		bottom:var(--altura-anuncio,0px);
		background:var(--fundo);border-top:1px solid var(--linha);
		justify-content:center;
		padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
	}
	.compartilhar-titulo{display:none;}
	body.single .rodape{padding-bottom:60px;}
	body.com-anuncio-fixo .rodape{padding-bottom:calc(60px + var(--altura-anuncio,0px));}
	/* Sobe acima da barra de compartilhar (55px) e da faixa de anúncio. */
	body.single .botao-whatsapp{bottom:calc(67px + var(--altura-anuncio,0px));}
}

/* Capa */
.materia-capa{margin:0 0 22px;}
.materia-capa img{width:100%;border-radius:var(--raio);}
.materia-capa figcaption{
	background:var(--bloco);padding:9px 12px;font-size:13px;color:var(--suave);
	border-radius:0 0 var(--raio) var(--raio);line-height:1.45;
}
.credito-foto{display:block;font-size:11.5px;opacity:.85;}

/* Texto */
.materia-texto{max-width:var(--leitura);font-size:var(--texto-materia-mob,17px);line-height:1.75;}
@media (min-width:769px){ .materia-texto{font-size:var(--texto-materia,18px);} }
.materia-texto p{margin:0 0 1.25em;}
.materia-texto h2,.materia-texto h3{
	text-transform:uppercase;font-weight:800;color:var(--link);
	font-size:19px;letter-spacing:.03em;margin:1.8em 0 .6em;
}
.materia-texto a{color:var(--link);text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px;}
.materia-texto a:hover{color:var(--destaque-texto);text-decoration-color:var(--destaque-texto);}
.materia-texto blockquote{
	margin:1.6em 0;padding:4px 0 4px 18px;border-left:4px solid var(--destaque);
	font-family:var(--fonte-titulo);font-size:21px;line-height:1.5;font-style:italic;
}
.materia-texto blockquote p:last-child{margin-bottom:0;}
.materia-texto ul,.materia-texto ol{margin:0 0 1.25em;padding-left:1.3em;}
.materia-texto li{margin-bottom:.45em;}
.materia-texto img{border-radius:var(--raio);margin:1.4em 0;}
.materia-texto figcaption{font-size:13px;color:var(--suave);background:var(--bloco);padding:8px 12px;}
.materia-texto iframe{max-width:100%;}
.materia-texto .anuncio{max-width:100%;}

/* Galeria */
.galeria-materia{margin:26px 0;}
.grade-galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media (min-width:600px){ .grade-galeria{grid-template-columns:repeat(3,1fr);} }
.item-galeria{padding:0;border:0;background:none;border-radius:6px;overflow:hidden;}
.item-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .3s ease;}
.item-galeria:hover img{transform:scale(1.05);}

/* Banner do grupo de WhatsApp */
.banner-cta{
	display:block;background:var(--principal);color:#fff;text-align:center;
	padding:16px 18px;border-radius:var(--raio);font-weight:700;font-size:16px;
	margin:26px 0;border:2px solid transparent;transition:all var(--transicao);
}
.banner-cta:hover{background:var(--destaque);color:#111;}

/* Tags */
.tags-materia{margin:22px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.rotulo-tags{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--suave);}
.tags-materia a{
	background:var(--bloco);border:1px solid var(--linha);border-radius:999px;
	padding:5px 13px;font-size:13px;color:var(--texto);
}
.tags-materia a:hover{background:var(--principal);color:#fff;border-color:var(--principal);}

/* Leia também */
.leia-tambem{margin:34px 0;}
.grade-relacionadas{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (min-width:769px){ .grade-relacionadas{grid-template-columns:repeat(4,1fr);} }
.card-relacionada img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin-bottom:7px;}
.card-relacionada h3{font-size:15px;margin:4px 0 0;color:var(--texto);}
.card-relacionada a:hover h3{color:var(--link);}

/* ---------------------------------------------------------
   12. COMENTÁRIOS
--------------------------------------------------------- */
.area-comentarios{margin:34px 0;max-width:var(--leitura);}
.lista-comentarios{list-style:none;margin:0 0 24px;padding:0;}
.lista-comentarios .children{list-style:none;padding-left:20px;border-left:2px solid var(--linha);}
.comentario{padding:14px 0;border-bottom:1px solid var(--linha);}
.comentario-topo{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.comentario-topo img{border-radius:50%;}
.comentario-topo time{display:block;font-size:12px;color:var(--suave);}
.comentario-texto{font-size:16px;}
.comentario-acoes{font-size:13px;}
.aviso-comentario{font-size:13px;color:var(--suave);}
.campo-comentario label{display:block;font-weight:600;margin-bottom:5px;}
.area-comentarios textarea,.area-comentarios input[type=text],.area-comentarios input[type=email],.area-comentarios input[type=url]{
	width:100%;padding:11px 13px;border:1px solid var(--linha);border-radius:6px;
	background:var(--fundo);color:var(--texto);font-family:inherit;font-size:16px;
}
.comentarios-fechados{font-size:14px;color:var(--suave);}

/* ---------------------------------------------------------
   13. EDITORIA, BUSCA E 404
--------------------------------------------------------- */
.topo-editoria{border-bottom:1px solid var(--linha);padding:18px 0;margin-bottom:4px;}
.titulo-editoria{font-size:28px;margin:0;color:var(--cor-editoria);}
@media (min-width:769px){ .titulo-editoria{font-size:36px;} }
.descricao-editoria{color:var(--suave);font-size:15px;margin:6px 0 0;}

.vazio{text-align:center;padding:40px 16px;background:var(--bloco);border-radius:var(--raio);}
.vazio h1,.vazio h2{margin-bottom:8px;}
.vazio p{color:var(--suave);margin:0 auto 18px;max-width:460px;}
.numero-404{font-family:var(--fonte-titulo);font-size:74px;font-weight:900;color:var(--destaque-texto);line-height:1;display:block;}
.busca-vazio{display:flex;gap:8px;justify-content:center;margin:0 auto 18px;max-width:420px;}
.busca-vazio input{flex:1;padding:11px 13px;border:1px solid var(--linha);border-radius:6px;background:var(--fundo);color:var(--texto);font-size:16px;}
.busca-vazio button{border:0;border-radius:6px;padding:11px 18px;background:var(--principal);color:#fff;font-weight:700;}

/* ---------------------------------------------------------
   14. RODAPÉ
--------------------------------------------------------- */
.rodape{background:var(--principal);color:rgba(255,255,255,.9);margin-top:20px;}
.colunas-rodape{display:grid;grid-template-columns:1fr;gap:26px;padding-top:34px;padding-bottom:30px;}
@media (min-width:769px){ .colunas-rodape{grid-template-columns:repeat(3,1fr);} }
.titulo-rodape{
	font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:#fff;
	margin:0 0 12px;padding-bottom:7px;border-bottom:2px solid var(--destaque);
}
.links-rodape{list-style:none;margin:0;padding:0;}
.links-rodape li{margin-bottom:8px;}
.links-rodape a{color:rgba(255,255,255,.88);font-size:14.5px;}
.links-rodape a:hover{color:var(--destaque);}
.texto-rodape{font-size:14px;color:rgba(255,255,255,.75);margin:14px 0;}
.rodape .redes-sociais{display:flex;gap:8px;margin-bottom:6px;}
.rodape .rede-social{background:rgba(255,255,255,.12);}

.newsletter{display:flex;gap:8px;flex-wrap:wrap;}
.newsletter input{flex:1;min-width:150px;padding:11px 13px;border:0;border-radius:6px;font-size:15px;}
.newsletter button{border:0;border-radius:6px;padding:11px 18px;background:var(--destaque);color:#111;font-weight:700;}

.bloco-rodape{margin-bottom:16px;}
.copyright{border-top:1px solid rgba(255,255,255,.18);font-size:13px;}
.copyright p{margin:0;padding:14px 0;color:rgba(255,255,255,.72);}

/* ---------------------------------------------------------
   15. BOTÃO FLUTUANTE DO WHATSAPP
--------------------------------------------------------- */
.botao-whatsapp{
	position:fixed;right:16px;bottom:16px;z-index:870;
	width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform var(--transicao);
}
.botao-whatsapp:hover{transform:scale(1.07);color:#fff;}
/* Fora da matéria não há barra de compartilhar: o botão só precisa
   passar por cima da faixa de anúncio. */
@media (max-width:768px){
	body.com-anuncio-fixo:not(.single) .botao-whatsapp{bottom:calc(16px + var(--altura-anuncio,0px));}
}

/* ---------------------------------------------------------
   16. JANELAS (HORÓSCOPO E GALERIA)
--------------------------------------------------------- */
.modal-signo{position:fixed;inset:0;z-index:960;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-caixa{position:relative;max-height:calc(var(--altura-tela,100vh) * 0.85);overflow-y:auto;background:var(--fundo);color:var(--texto);border-radius:var(--raio);padding:24px;max-width:420px;width:100%;}
.modal-caixa h2{margin:0 0 4px;color:var(--principal);}
.modal-periodo{margin:0 0 12px;font-size:13px;color:var(--suave);}
.modal-texto{margin:0;font-size:16px;line-height:1.65;}
.modal-fechar{position:absolute;top:8px;right:12px;background:none;border:0;font-size:28px;line-height:1;color:var(--texto);}

.lightbox{position:fixed;inset:0;z-index:970;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;}
.lightbox img{max-width:94vw;max-height:calc(var(--altura-tela,100vh) * 0.86);object-fit:contain;border-radius:4px;}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:44px;line-height:1;padding:10px 16px;}
.lb-fechar{top:6px;right:10px;font-size:38px;}
.lb-anterior{left:4px;}
.lb-proxima{right:4px;}

/* Avisinho "Link copiado" */
.toast{
	position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:990;
	background:var(--principal);color:#fff;padding:11px 20px;border-radius:999px;
	font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.3);
}

/* ---------------------------------------------------------
   17. AJUSTES FINOS PARA CELULAR
   O tema é mobile-first (o padrão já é a versão pequena).
   Aqui ficam só os detalhes que só aparecem em tela estreita.
--------------------------------------------------------- */
@media (max-width:768px){

	/* Alvo de toque: nada abaixo de 40px, para não errar o dedo. */
	.botao-menu,.botao-icone,.rede-social,.fechar-busca,.carrossel-pontos button{
		min-width:40px;min-height:40px;
		display:inline-flex;align-items:center;justify-content:center;
	}
	/* O alvo do dedo cresce, mas a bolinha desenhada continua pequena:
	   quem aparece é o ::after, não o fundo do botão. */
	.carrossel-pontos button,
	.carrossel-pontos button.ativo{
		min-width:22px;min-height:22px;width:22px;
		background:transparent;border-radius:0;position:relative;
	}
	.carrossel-pontos button::after{
		content:"";width:9px;height:9px;border-radius:50%;
		background:var(--linha);transition:all var(--transicao);
	}
	.carrossel-pontos button.ativo::after{background:var(--destaque);width:22px;border-radius:5px;}

	/* Campos com 16px: abaixo disso o iPhone dá zoom sozinho ao tocar. */
	input,select,textarea{font-size:16px !important;}

	/* Título sobre a foto do slide: não pode passar da imagem. */
	.slide-texto{padding:46px 16px 16px;}
	.slide-texto h1,
	.slide-texto h2{
		font-size:19px;line-height:1.28;
		display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	}

	/* Títulos grandes ficam proporcionais à tela estreita. */
	.titulo-manchete{font-size:26px;}
	.materia-titulo{font-size:25px;}
	.destaque-texto h1,.destaque-texto h2{font-size:19px;}
	.secao-destaque h3{font-size:19px;}

	/* Barra de busca: o botão não empurra o campo para fora. */
	.barra-busca button[type=submit]{padding:11px 14px;font-size:14px;}

	/* Rodapé: campo e botão da newsletter dividem a linha. */
	.newsletter input{min-width:0;flex:1 1 58%;}
	.newsletter button{flex:1 1 38%;padding:11px 10px;font-size:14px;white-space:nowrap;}

	/* Anúncio nunca empurra a página para o lado. */
	.anuncio,.anuncio-conteudo{max-width:100%;overflow-x:hidden;}

	/* Na tela pequena a tabela usa letra menor antes de precisar rolar. */
	.materia-texto table{font-size:14px;}

	/* Galeria e relacionadas com respiro maior entre os toques. */
	.grade-galeria{gap:10px;}
	.grade-relacionadas{gap:14px;}

}

/* Telas bem estreitas (360px e menos). */
@media (max-width:400px){
	.container{padding-left:12px;padding-right:12px;}
	.card-foto{flex:0 0 104px;}
	.fixo .mini-foto,.secao-item .mini-foto{flex:0 0 84px;}
	.card-titulo{font-size:17px;}
	.fixo h3,.secao-item h3{font-size:15px;}
	.dezenas li{width:34px;height:34px;font-size:14px;}
	.grade-signos{gap:5px;}
	.marca img,.marca .custom-logo{height:36px;}
	.linha-fina{font-size:11.5px;}
}

/* Celular deitado: o slide não pode ocupar a tela inteira. */
@media (max-width:900px) and (orientation:landscape){
	.slide img{aspect-ratio:2/1;max-height:70vh;object-fit:cover;}
}

/* ---------------------------------------------------------
   18. AJUSTES DE IMPRESSÃO
--------------------------------------------------------- */
@media print{
	.cabecalho,.rodape,.compartilhar,.coluna-lateral,.anuncio,.botao-whatsapp,
	.barra-progresso,.area-carregar,.leia-tambem,.area-comentarios{display:none !important;}
	body{font-size:12pt;color:#000;background:#fff;}
	.materia-texto{max-width:100%;}
}