/*
 * Portal de Notícias PRO — estilos do tema (porta o protótipo validado para
 * o tema em blocos nativos do WordPress). As cores não ficam fixas aqui:
 * usamos as variáveis geradas pelo theme.json (--wp--preset--color--*),
 * então trocar a variação de estilo (G1 ↔ Esportes/GE) no Editor do Site
 * já atualiza essas cores automaticamente, sem editar este arquivo.
 */

:root{
	--cor-primaria: var(--wp--preset--color--primaria, #C5A059);
	--cor-primaria-escura: var(--wp--preset--color--primaria-escura, #9a7a3f);
	--cor-secundaria-esportes: var(--wp--preset--color--esportes, #0b8a3d);
	--cor-texto: var(--wp--preset--color--texto, #1A1A1A);
	--cor-texto-claro: var(--wp--preset--color--texto-claro, #A0A0A0);
	--cor-fundo: var(--wp--preset--color--fundo, #F8F8F8);
	--cor-fundo-secao: var(--wp--preset--color--fundo-secao, #F0EAD8);
	--cor-borda: var(--wp--preset--color--borda, #E8D8A0);
	--radius: var(--wp--custom--raio-card, 6px);
}
/* Mesmo reset usado no protótipo aprovado — sem isso, padding em elementos
   como o ticker e as bolinhas dos stories soma por fora da largura definida,
   deixando esses componentes maiores/mais "espaçados" do que no layout
   aprovado, mesmo com os mesmos valores de padding no CSS. */
*{box-sizing:border-box;}
a{color:inherit; text-decoration:none;}
img,.ph{display:block;}
.wrap{max-width:1380px; margin:0 auto; padding:0 16px;}

/* Placeholder de imagem (post sem imagem destacada) */
.ph{
	background:linear-gradient(135deg,#dcdcdc,#ececec);
	display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
	color:#9a9a9a; font-size:11px; letter-spacing:.5px; text-transform:uppercase;
	border-radius:var(--radius);
	flex-shrink:0;
}
.ph::before{content:"\1F5BC"; font-size:26px; opacity:.45;}

/* Foto real — object-fit:cover, nunca distorce, só recorta para a proporção
   do container. Usa seletor descendente (não filho direto) porque o bloco
   nativo "Imagem destacada" do WordPress às vezes envolve o <img> num <a>. */
.ph.foto-box, .wp-block-post-featured-image.ph{position:relative; overflow:hidden;}
.ph.foto-box::before, .wp-block-post-featured-image.ph::before{display:none;}
.ph.foto-box img, .wp-block-post-featured-image.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.card-overlay .ph.foto-box{position:absolute; inset:0;}

/* Topo utilitário — links institucionais à esquerda, redes sociais à
   direita (mesmo layout do modelo aprovado). Os itens ficam dentro do
   mesmo container centralizado (.wrap, 1225px) usado na seção da logo —
   só o FUNDO preto que estica de ponta a ponta da tela. */
.topbar{background:#1a1a1a; color:#cfcfcf; font-size:12px; height:30px;}
.topbar a{color:#cfcfcf;}
.topbar a:hover{color:#fff;}
.topbar-wrap{height:100%; align-items:center;}
.topbar-links{display:flex; align-items:center; gap:18px; height:100%;}
.topbar-links a{font-size:12px;}
@media (max-width:780px){ .topbar-links{display:none;} }

/* Cabeçalho — fixo de verdade (não "sticky"). Sticky quebra aqui porque o
   cabeçalho fica dentro do mesmo <header> (parte de modelo) que o menu, o
   ticker e os stories; ao rolar além da altura desse <header>, o elemento
   sticky não tem mais "pai" visível pra travar e desaparece. Com fixed ele
   trava na janela o tempo todo. A barra superior (topbar) trava junto, bem
   em cima, pra não sobrepor/deixar vão vazio; o JS soma um respiro do
   tamanho exato dos dois pra o resto do conteúdo não ficar embaixo deles. */
.topbar{position:fixed; top:0; left:0; right:0; width:100%; z-index:51;}
.pnp-header-principal{
	border-bottom:1px solid var(--cor-borda); background:var(--cor-fundo);
	position:fixed; top:30px; left:0; right:0; width:100%; z-index:50;
}
.header-row{padding:14px 16px;}
/* Cabeçalho em 3 zonas: esquerda (relógio+bolinhas) | centro (logo) | direita (busca).
   Esquerda e direita têm o MESMO peso (flex:1); o centro é automático — assim
   a logo fica perfeitamente centralizada, independentemente do que houver dos
   lados. */
/* Zona esquerda (estrutura nova): bolinhas roláveis sem empurrar a logo. */
.header-esq{ min-width:0; display:flex; align-items:center; gap:0; justify-content:flex-start; }
.header-centro{ justify-content:center; }
.header-esq .pnp-header-stories{ min-width:0; overflow:hidden; }

/* ---------------------------------------------------------------
   CENTRALIZAÇÃO DA LOGO — dois modos, escolhidos automaticamente pelo :has().

   • ESTRUTURA NOVA (header.html do tema): existe .header-esq. Usa 3 zonas de
     peso igual — a logo fica no centro naturalmente, sem posição absoluta.

   • ESTRUTURA ANTIGA (cabeçalho salvo no banco, quando o cliente edita pelo
     "Editar site"): NÃO existe .header-esq. O tema não consegue trocar o HTML,
     então centraliza a logo por CSS: ela é o 1º grupo do header-row e é
     posicionada de forma absoluta no centro; relógio + bolinhas ficam à
     esquerda e a BUSCA fica na largura natural, encostada à direita (sem
     esticar — senão o campo corre por baixo da logo).
   --------------------------------------------------------------- */
@media (min-width:781px){
	/* min-height acomoda a logo centralizada + o padding de 10px em cima/embaixo. */
	.header-row{ position:relative; min-height:92px; }

	/* --- LOGO no centro (absoluta, robusta pros dois HTMLs) ---
	   Estrutura nova: a logo é a .header-centro.
	   Estrutura antiga (salva no banco): a logo é o 1º grupo do header-row.
	   padding 10px em cima/embaixo = respiro pedido pelo cliente. */
	.header-centro,
	.header-row > .wp-block-group:first-child{
		position:absolute; left:50%; top:50%;
		transform:translate(-50%,-50%);
		margin:0; padding:10px 0; z-index:2;
	}

	/* --- BOLINHAS sozinhas à esquerda ---
	   (.header-esq na estrutura nova; .pnp-header-stories direto na antiga).
	   Trilho rolável com barra escondida e leve esmaecimento na borda direita,
	   pra o corte parecer intencional quando há mais categorias do que cabe.
	   NÃO usam margin-right:auto: nas páginas internas as bolinhas ficam vazias
	   (só aparecem na home), e um item vazio de largura zero não empurrava o
	   relógio — por isso quem empurra pra direita agora é o próprio relógio
	   (margin-left:auto), que funciona com ou sem bolinhas. */
	.header-esq,
	.header-row > .pnp-header-stories{
		/* Param ANTES da logo centralizada: a logo fica no meio (50%), então
		   limitamos as bolinhas a "metade menos uma folga" pra nunca correrem
		   por baixo dela. 210px de folga cobrem logos de até ~420px de largura.
		   O que passar disso vira rolagem (com o esmaecimento na borda). */
		order:1; max-width:calc(50% - 210px); z-index:1;
		overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
		-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
		        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
	}
	.header-esq::-webkit-scrollbar,
	.header-row > .pnp-header-stories::-webkit-scrollbar{ display:none; }
	.header-esq .stories-bar,
	.header-row > .pnp-header-stories .stories-bar{ overflow:visible; max-width:none; }
	/* Estrutura nova: o contêiner de rolagem é a .header-esq — o
	   .pnp-header-stories interno não deve clipar de novo. */
	.header-esq .pnp-header-stories{ overflow:visible; max-width:none; flex:0 0 auto; }

	/* --- RELÓGIO + BUSCA juntos à direita ---
	   margin-left:auto no relógio empurra ele E a busca pro canto direito,
	   independentemente de ter bolinhas ou não (resolve o relógio em cima da
	   logo nas páginas internas). */
	.header-row > .pnp-relogio-header{ order:2; margin-left:auto; z-index:1; }
	.header-row > .pnp-busca{
		order:3; flex:0 0 auto; width:280px; max-width:30%; z-index:1;
		margin-left:0;
	}
	.header-row > .pnp-busca .wp-block-search__inside-wrapper{ width:100%; }
	.header-row > .pnp-busca .wp-block-search__input{ width:100%; }
}
/* Logo do cliente: altura máxima definida aqui, largura controlável de duas formas:
   1. Via Aparência → Configurações PNP (recomendado — mais fácil)
   2. Via Editor de Site → bloco "Logo do site" → Largura da imagem
   A transição suave encolhe a logo quando o visitante rolar a página. */
.wp-block-site-logo{flex-shrink:0;}
.wp-block-site-logo img{max-height:120px; max-width:100%; width:auto; height:auto; transition:max-height .3s ease, width .3s ease;}
/* Quando o cabeçalho fica sticky (classe pnp-scrolled adicionada pelo JS ao <header>), a logo encolhe */
.pnp-scrolled .wp-block-site-logo img{max-height:56px;}
.wp-block-site-title a{color:var(--cor-texto);}

/* Relógio com data/hora no cabeçalho — usado em prints de comprovação de
   veiculação de mídia paga (ex.: cotas de publicidade do governo), que
   normalmente exigem logo + data/hora visíveis na mesma captura de tela. */
.pnp-relogio-header{
	display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;
	line-height:1.2; padding:0 22px 0 0; margin-right:22px;
	border-right:1px solid var(--cor-borda);
}
.pnp-relogio-hora{font-size:20px; font-weight:800; color:var(--cor-texto); font-variant-numeric:tabular-nums; letter-spacing:.5px;}
/* Data em minúsculas ("28 de agosto de 2026"): o pt-BR já devolve tudo
   minúsculo — só não forçamos "Capitalize" (que deixava "28 De Agosto De"). */
.pnp-relogio-data{font-size:12px; color:var(--cor-texto-claro); text-transform:none; white-space:nowrap;}
@media (max-width:900px){ .pnp-relogio-header{display:none;} }

/* =========================================================
   Mobile: cabeçalho compacto
   - Oculta nome do portal (logo já identifica o site)
   - Linha única: logo | busca + menu
   - Stories ficam no fluxo da página (o JS só move pro cabeçalho
     em telas de desktop) — ver moverStoriesDesktop() em tema.js
   ========================================================= */
.pnp-stories-mobile{display:none !important;}

@media (max-width:780px){
	/* Oculta site title (logo já identifica o portal) */
	.pnp-header-principal .wp-block-site-title{display:none !important;}
	/* Logo menor no mobile */
	.pnp-header-principal .wp-block-site-logo img{max-height:56px;}

	/* Linha única: logo à esquerda, ícones à direita.
	   No mobile a divisão em 3 zonas não se aplica — a zona esquerda
	   (relógio + bolinhas) some, a logo vai pra esquerda e a busca/menu
	   ficam à direita, como antes. */
	.header-row{
		flex-wrap:nowrap !important;
		align-items:center;
		padding:5px 14px;
	}
	.header-esq{ display:none !important; }
	.header-centro{ flex:1 1 auto !important; justify-content:flex-start !important; }

	/* No mobile o JS devolve as bolinhas pro corpo da página, então o
	   container do cabeçalho fica vazio — esconde pra não sobrar
	   uma borda/faixa solta no meio do header. */
	.pnp-header-stories{ display:none !important; }

	/* Bolinhas no fluxo da página — roláveis na horizontal */
	.stories-bar{
		overflow-x:auto;
		overflow-y:hidden;
		padding:5px 14px;
		gap:10px;
		scrollbar-width:none;
		-webkit-overflow-scrolling:touch;
		align-items:center;
	}
	.stories-bar::-webkit-scrollbar{ display:none; }
	.stories-bar .story-item{ width:56px; flex-shrink:0; }
	.stories-bar .story-ring{ width:48px; height:48px; }

	/* === Espaçamentos mínimos para a notícia aparecer na 1ª dobra === */
	header.wp-block-template-part + .wrap{ margin-block-start:0 !important; }
	#banner-topo{ margin-top:5px; margin-bottom:0; }
	.banner-full{ margin:5px 0 !important; }
	.conteudo{ padding-top:5px !important; }
	.hero-slider{ margin-top:5px !important; margin-bottom:5px !important; }
}
.pnp-busca .wp-block-search__inside-wrapper{border:1px solid var(--cor-borda); border-radius:20px; overflow:hidden; height:auto;}
.pnp-busca .wp-block-search__input{border:none; padding:6px 14px; font-size:13px; height:auto; line-height:1.4;}
.pnp-busca .wp-block-search__button{background:var(--cor-primaria); border:none; color:#fff; border-radius:0; padding:6px 16px; font-size:13px; line-height:1.4; height:auto;}

/* Busca no mobile — o formulário completo não cabe numa linha só com a
   logo (quebrava linha e bagunçava o cabeçalho); em telas pequenas ele some
   e dá lugar a um botão de lupa, que abre o mesmo formulário num painel. */
.pnp-busca-toggle, .pnp-menu-toggle-espelho{display:none;}
@media (min-width:781px){ .pnp-busca-toggle, .pnp-menu-toggle-espelho{display:none !important;} }
@media (max-width:780px){
	.pnp-busca-toggle{
		display:flex; align-items:center; justify-content:center; flex-shrink:0;
		width:36px; height:36px; border:1px solid var(--cor-borda); border-radius:50%;
		background:none; color:var(--cor-texto); padding:0; cursor:pointer;
	}
	.pnp-busca-toggle svg{width:18px; height:18px;}
	.pnp-busca{
		display:none; position:fixed; left:0; right:0; top:var(--pnp-topo-altura, 80px);
		background:var(--cor-fundo); padding:12px 16px; box-shadow:0 6px 14px rgba(0,0,0,.14);
		z-index:49; border-bottom:1px solid var(--cor-borda);
	}
	body.pnp-busca-aberta .pnp-busca{display:block;}
}

/* O fundo vermelho/verde precisa ocupar 100% da largura da janela — por
   isso fica num grupo "alignfull" separado (.pnp-nav-fundo); o menu em si
   (.pnp-nav-principal) usa a classe "wrap" pra ficar centralizado e alinhado
   com o restante do conteúdo, igual ao protótipo aprovado. */
.pnp-nav-fundo{background:var(--cor-primaria);}
.pnp-nav-principal{min-height:0;}
.pnp-nav-principal .wp-block-navigation-item__content{
	padding:11px 16px; color:#fff; font-size:13px; font-weight:600;
	text-transform:uppercase; letter-spacing:.3px;
}
.pnp-nav-principal .wp-block-navigation-item:hover > .wp-block-navigation-item__content{background:var(--cor-primaria-escura); color:#fff;}
/* Esportes NO MENU fica igual aos outros itens (o cliente pediu). O destaque
   verde continua valendo só na SEÇÃO de Esportes da home (títulos, tarjas). */

/* Logo dentro do menu — só aparece no painel mobile aberto (no menu normal
   do desktop/faixa vermelha ela fica escondida, já tem a logo no cabeçalho
   ali em cima). Continua dinâmica: é o mesmo bloco "Logo do site", então
   sempre mostra a logo que o cliente cadastrar no wp-admin de cada portal. */
.pnp-nav-logo{display:none;}

/* Menu mobile — o JS (tema.js) cria um botão "espelho" dentro do cabeçalho,
   do lado da lupa, que só dispara um clique no botão de hambúrguer de
   verdade (continua escondido em .pnp-nav-fundo, sem ocupar espaço visível
   — mover o botão de verdade quebra a API de interatividade do bloco de
   Navegação, por isso o espelho). Sem JS, o botão original ainda aparece
   certinho ali, como alternativa funcional. */
@media (max-width:780px){
	.pnp-nav-fundo{min-height:0;}
	.pnp-nav-fundo.pnp-toggle-espelhado{height:0; overflow:hidden;}
	.pnp-acoes-mobile{display:flex; align-items:center; gap:8px;}
	.pnp-nav-principal{width:100%;}
	.pnp-menu-toggle-espelho{
		display:flex; align-items:center; justify-content:center; flex-shrink:0;
		width:36px; height:36px; padding:0; margin:0; border:1px solid var(--cor-borda);
		border-radius:50%; background:none; color:var(--cor-texto); cursor:pointer;
	}
	.pnp-menu-toggle-espelho svg{width:18px; height:18px; pointer-events:none;}
	.wp-block-navigation__responsive-container-open{
		display:flex !important; align-items:center; justify-content:center; flex-shrink:0;
		width:36px; height:36px; padding:0 !important; margin:0; border:1px solid var(--cor-borda);
		border-radius:50%; background:none; color:var(--cor-texto);
	}
	.wp-block-navigation__responsive-container-open svg{width:18px; height:18px;}
	/* Quando o botão está dentro da faixa vermelha (JS ainda não rodou, ou
	   desativado no navegador), usa branco pra contrastar com o fundo. */
	.pnp-nav-fundo .wp-block-navigation__responsive-container-open{
		color:#fff; border-color:rgba(255,255,255,.5);
	}
	/* Painel do menu aberto: o WordPress por padrão deixa bastante respiro
	   em cima dos itens (calc(2rem + 24px) de padding-top) — aqui fica bem
	   mais compacto, com os itens logo abaixo do "X" de fechar. */
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay){
		padding:16px !important;
	}
	/* O WordPress encaixa o conteúdo do painel dentro de um wrapper
	   (.wp-block-navigation__responsive-close) que por padrão é "display:
	   block" e só ocupa a altura do próprio conteúdo — isso deixava um vão
	   vazio enorme embaixo dos itens. Esticando esse wrapper E o conteúdo
	   pra altura toda (ambos como flex column) é o que permite o "Conecte-
	   se conosco" (ver .pnp-menu-social-movido) usar margin-top:auto pra ir
	   pro fim do espaço disponível, em vez de ficar colado nos itens ou
	   flutuando longe demais deles. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
		display:flex; flex-direction:column; height:100%; min-height:0;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
		display:flex; flex-direction:column; flex:1; min-height:0;
	}
	.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content{
		padding-top:44px !important;
		gap:2px;
		flex:1; min-height:0;
	}
	.wp-block-navigation__responsive-container-close{ top:14px !important; right:14px !important; }
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-principal{
		width:100%; align-items:stretch;
	}
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-principal .wp-block-navigation-item{
		width:100%; border-bottom:1px solid var(--cor-borda);
	}
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-principal .wp-block-navigation-item__content{
		padding:14px 4px; font-size:15px; color:#000; width:100%;
	}
	/* Itens com fundo colorido (hover, ou o item Esportes, que já fica
	   sempre verde) precisam de fonte branca — preto em cima de fundo
	   escuro/colorido fica ilegível/estranho. Estas regras precisam ser
	   tão (ou mais) específicas que a regra de cor preta acima, senão ela
	   "ganha" mesmo no hover. */
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-principal .wp-block-navigation-item:hover > .wp-block-navigation-item__content{
		color:#fff;
	}
	/* (Esportes não tem mais fundo verde no menu — segue a cor padrão dos itens.) */
	/* Logo no topo do painel mobile aberto — centralizada, como no modelo. */
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-logo{
		display:block; align-self:center; margin:0 0 24px;
	}
	.wp-block-navigation__responsive-container.is-menu-open .pnp-nav-logo img{
		max-height:36px !important; width:auto !important; height:auto !important;
	}
}
/* "Conecte-se conosco" + ícones de redes sociais no rodapé do painel mobile
   aberto. O WordPress não deixa salvar parágrafo/shortcode/ícones de redes
   dentro do bloco de Navegação (remove sozinho, por segurança) — por isso
   esse bloco vive FORA da navegação no HTML (ver header.html). Em tempo de
   execução, o JS (tema.js) MOVE esse bloco pra dentro do próprio painel do
   menu (depois dos itens) e adiciona a classe ".pnp-menu-social-movido" —
   assim ele acompanha a altura real do menu (poucos ou muitos itens),
   com "margin-top:auto" empurrando ele pro fim do espaço disponível, em
   vez de ficar numa distância fixa do rodapé da tela (que ou sobrava
   espaço vazio enorme, ou ficava perto demais dos itens, dependendo de
   quantas categorias o cliente tem). */
.pnp-menu-social-extra{display:none;}
@media (max-width:780px){
	.pnp-menu-social-extra.pnp-menu-social-movido{
		display:flex; flex-direction:column; align-items:center; align-self:center;
		width:100%; margin:auto 0; padding:24px 0; flex-shrink:0;
	}
	.pnp-menu-social-extra .pnp-nav-social-titulo{
		display:block; margin:0 0 12px; font-size:12px; font-weight:700;
		letter-spacing:.5px; text-transform:uppercase; color:var(--cor-texto-claro);
	}
	.pnp-menu-social-extra .pnp-social-links{gap:10px;}
	.pnp-menu-social-extra .pnp-social-link{
		background:var(--cor-texto); color:#fff; width:32px; height:32px;
	}
}

/* Ticker de últimas notícias */
.ticker{background:#fdf8ee; border-bottom:1px solid var(--cor-borda); overflow:hidden;}
.ticker .wrap{display:flex; align-items:center; gap:14px; height:36px;}
.ticker .tag{background:var(--cor-primaria); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:3px; flex-shrink:0; text-transform:uppercase;}
.ticker-track{white-space:nowrap; overflow:hidden; position:relative; flex:1;}
.ticker-track span{display:inline-block; font-size:13px; color:var(--cor-texto); line-height:36px; white-space:nowrap;}
.ticker-track span a{color:inherit; text-decoration:none;}
.ticker-track span a:hover{text-decoration:underline;}
.ticker-track span{animation:rolar 30s linear infinite;}
/* Pausa a rolagem ao passar o mouse — dá tempo de ler/clicar no título sem
   ele fugir da tela. */
.ticker-track:hover span{animation-play-state:paused;}
@keyframes rolar{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* Layout principal */
/* padding-top de 5px (era 26px) pra a primeira notícia subir na página */
.conteudo{display:grid; grid-template-columns:1fr 350px; gap:32px; padding:5px 16px 40px; max-width:1380px; margin:0 auto;}
/* Zera o block gap que o WP FSE injeta entre o cabeçalho, o banner e o conteúdo */
header.wp-block-template-part + .wrap{margin-block-start:0;}
.wrap + .conteudo{margin-block-start:0;}
@media (max-width:860px){ .conteudo{grid-template-columns:1fr;} }
main, .sidebar{min-width:0;}

/* Banner leaderboard no topo */
.banner-leaderboard{margin:18px 0 0;}
.banner-leaderboard .slide strong{font-size:15px;}

/* Hero slider — carrossel full-width de destaque na home. Substitui o
   hero-grid estático de duas colunas. Cada slide mostra um post com imagem
   de fundo cobrindo 100% do container, gradiente escuro no rodapé e texto
   sobreposto (categoria + título + meta). Setas e bolinhas de navegação
   controlam a rotação; o autoplay pausa ao passar o mouse.              */
.hero-slider{
	position:relative; border-radius:var(--radius); overflow:hidden;
	background:#111; height:500px; margin:22px 0 20px;
}
@media (max-width:780px){ .hero-slider{height:280px; margin:14px 0 16px;} }

.hero-slider-slide{position:absolute; inset:0; display:none;}
.hero-slider-slide.ativo{display:block;}
.hero-slider-slide .ph{position:absolute; inset:0; width:100%; height:100%; border-radius:0;}
.hero-slider-slide .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-slider-grad{
	position:absolute; inset:0; z-index:1;
	background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.04) 100%);
}
.hero-slider-conteudo{
	position:absolute; left:0; right:0; bottom:0; z-index:2;
	padding:50px 28px 52px;
}
@media (max-width:780px){ .hero-slider-conteudo{padding:24px 14px 44px;} }
.hero-slider-conteudo .tarja{
	display:inline-block; background:var(--cor-primaria); color:#fff;
	font-size:11px; font-weight:700; text-transform:uppercase;
	padding:4px 10px; border-radius:3px; letter-spacing:.4px; margin-bottom:11px;
}
.hero-slider-conteudo h2{
	font-size:30px; line-height:1.2; margin:0 0 8px; font-weight:800;
	color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.55); max-width:820px;
}
.hero-slider-conteudo h2 a{color:#fff;}
@media (max-width:780px){ .hero-slider-conteudo h2{font-size:17px;} }
.hero-slider-conteudo .meta{font-size:12px; color:rgba(255,255,255,.78);}

/* Setas prev/next */
.hero-slider-prev,.hero-slider-next{
	position:absolute; top:50%; transform:translateY(-50%); z-index:3;
	background:rgba(0,0,0,.42); color:#fff; border:none;
	width:42px; height:42px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; font-size:22px; line-height:1; transition:background .18s;
}
.hero-slider-prev{left:14px;}
.hero-slider-next{right:14px;}
.hero-slider-prev:hover,.hero-slider-next:hover{background:rgba(0,0,0,.72);}
@media (max-width:600px){
	.hero-slider-prev,.hero-slider-next{width:32px; height:32px; font-size:16px;}
}

/* Bolinhas */
.hero-slider-dots{
	position:absolute; bottom:18px; left:0; right:0;
	display:flex; justify-content:center; gap:8px; z-index:3;
}
.hero-slider-dots .dot{
	width:10px; height:10px; border-radius:50%; padding:0;
	border:2px solid rgba(255,255,255,.6); background:transparent; cursor:pointer;
	transition:background .2s, border-color .2s;
}
.hero-slider-dots .dot.ativo{background:#fff; border-color:#fff;}

/* Hero — duas colunas: manchete de destaque (esquerda) + card destaque
   secundário/esportivo (direita). Altura fixa pra nunca sobrar espaço em branco. */
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:16px; height:540px; margin:22px 0 8px;}
@media (max-width:780px){ .hero-grid{grid-template-columns:1fr; height:auto;} }

.hero-lead{display:flex; flex-direction:column; height:100%; min-height:0;}
.hero-lead .ph{flex:1; min-height:0; margin-bottom:12px;}
.hero-lead .categoria{color:var(--cor-primaria); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;}
.hero-lead .categoria a{color:inherit;}
.hero-lead h1{font-size:25px; line-height:1.22; margin:0 0 7px; font-weight:700; color:var(--cor-texto);}
.hero-lead h1 a{color:var(--cor-texto);}
.hero-lead h1 a:hover{color:var(--cor-primaria);}
.hero-lead ul{margin:0 0 6px; padding-left:18px; color:var(--cor-texto-claro); font-size:13px; line-height:1.45;}
.hero-lead .meta{font-size:12px; color:var(--cor-texto-claro);}
@media (max-width:780px){ .hero-lead{height:auto;} .hero-lead .ph{flex:none; aspect-ratio:1/0.55;} }

/* In-feed: banner publicitário inserido no meio da lista de matérias */
.banner-infeed{margin:4px 0 22px;}

/* Feed principal — lista vertical: imagem "neutra" (quase quadrada) + texto */
.feed-principal{display:flex; flex-direction:column; margin-bottom:8px;}
.materia-feed{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--cor-borda);}
.materia-feed:first-child{padding-top:0;}
.materia-feed .ph{width:260px; aspect-ratio:1/0.92; flex-shrink:0;}
.materia-feed-corpo{flex:1; min-width:0; align-self:center;}
.materia-feed .categoria{color:var(--cor-primaria); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px;}
.materia-feed .categoria a{color:inherit;}
.materia-feed h2{font-size:19px; line-height:1.3; margin:0 0 8px; font-weight:700; color:var(--cor-texto);}
.materia-feed h2 a{color:var(--cor-texto);}
.materia-feed h2 a:hover{color:var(--cor-primaria);}
.materia-feed ul{margin:0 0 9px; padding-left:16px; color:var(--cor-texto-claro); font-size:13px; line-height:1.55;}
.materia-feed .meta{font-size:12px; color:var(--cor-texto-claro);}
@media (max-width:640px){
	.materia-feed{flex-direction:column;}
	.materia-feed .ph{width:100%;}
}

/* Seção de categoria com grid de matérias */
.secao{margin-bottom:34px;}
.secao-titulo{
	display:flex; align-items:center; justify-content:space-between;
	border-bottom:3px solid var(--cor-primaria); padding-bottom:8px; margin-bottom:16px;
}
.secao-titulo h2{font-size:18px; margin:0; text-transform:uppercase; letter-spacing:.3px;}
.secao-titulo a{font-size:12px; color:var(--cor-primaria); font-weight:600;}
.secao.esportes .secao-titulo{border-bottom-color:var(--cor-secundaria-esportes);}
.secao.esportes .secao-titulo a{color:var(--cor-secundaria-esportes);}

.grid-materias{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:600px){ .grid-materias{grid-template-columns:1fr 1fr;} }
.materia{padding:0 14px 14px; box-sizing:border-box;}
.materia .ph{width:calc(100% + 28px); margin:0 -14px 10px; aspect-ratio:1/0.92;}
.materia .categoria{font-size:11px; font-weight:700; color:var(--cor-primaria); text-transform:uppercase;}
.materia h3{font-size:15px; line-height:1.35; margin:5px 0 4px; font-weight:700; color:var(--cor-primaria);}
.materia .tempo{font-size:11px; color:var(--cor-texto-claro);}
.secao.esportes .materia .categoria,
.secao.esportes .materia h3{color:var(--cor-secundaria-esportes);}

/* Destaque esportivo: imagem de fundo + texto/placar sobreposto com gradiente. */
.ge-destaque{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:26px; height:430px;}
@media (max-width:700px){ .ge-destaque{grid-template-columns:1fr; height:auto;} }
.ge-destaque-secundarias{display:flex; flex-direction:column; gap:14px; height:100%;}
.card-overlay{position:relative; border-radius:var(--radius); overflow:hidden; background:#222; height:100%; display:block;}
.card-overlay.pequeno{flex:1; min-height:0;}
@media (max-width:700px){
	.ge-destaque-secundarias{height:auto;}
	.card-overlay{height:auto; aspect-ratio:1/0.6;}
	.card-overlay.pequeno{flex:none; aspect-ratio:1/0.6;}
}
.card-overlay .ph{position:absolute; inset:0; width:100%; height:100%; border-radius:0;}
.card-overlay .tarja{position:absolute; top:0; left:0; background:var(--cor-secundaria-esportes); color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; padding:5px 10px; letter-spacing:.4px; z-index:2;}
.card-overlay .overlay-conteudo{position:absolute; left:0; right:0; bottom:0; padding:14px; background:linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); color:#fff; z-index:2;}
.card-overlay .placar{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; margin-bottom:6px; flex-wrap:wrap;}
.card-overlay .placar .vs{color:#ddd; font-weight:400; font-size:11px;}
.card-overlay h3{font-size:16px; line-height:1.3; margin:0; font-weight:700; color:#fff;}
.card-overlay.pequeno h3{font-size:13.5px;}

/* Seção "lista + mini-carrossel" — lista de manchetes (com miniatura) ao
   lado de um carrossel automático com indicadores (bolinhas). Usa o mesmo
   ".card-overlay" dos cards de Esportes pra cada slide, só trocando a cor
   da tarja pra vermelho (a verde é específica da seção de Esportes). */
.lista-carrossel-wrap{display:grid; grid-template-columns:1fr 1.5fr; gap:28px; align-items:start;}
@media (max-width:700px){ .lista-carrossel-wrap{grid-template-columns:1fr; gap:18px;} }

.lista-secao{display:flex; flex-direction:column;}
.lista-item{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--cor-borda); text-decoration:none;}
.lista-item:first-child{padding-top:0;}
.lista-item:last-child{border-bottom:none;}
.lista-item .ph{width:92px; height:70px; flex-shrink:0; border-radius:6px; overflow:hidden;}
.lista-item .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.lista-item-texto .categoria{display:block; font-size:11px; font-weight:700; color:var(--cor-primaria); text-transform:uppercase; letter-spacing:.3px; margin-bottom:4px;}
.lista-item-texto h3{font-size:14.5px; line-height:1.32; margin:0; font-weight:700; color:var(--cor-texto);}
.lista-item-texto h3 a{color:var(--cor-texto) !important;}
.lista-item-texto h3 a:hover{color:var(--cor-primaria) !important;}

.mini-carrossel{position:relative; border-radius:var(--radius); overflow:hidden; background:#222; height:430px;}
.mini-carrossel .tarja{background:var(--cor-primaria);}
.mini-carrossel .mini-carrossel-slide{position:absolute; inset:0; height:100%; display:none;}
.mini-carrossel .mini-carrossel-slide.ativo{display:block;}
.mini-carrossel-dots{position:absolute; left:0; right:0; bottom:16px; display:flex; justify-content:center; gap:7px; z-index:3;}
.mini-carrossel-dots .dot{width:9px; height:9px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer;}
.mini-carrossel-dots .dot.ativo{background:#fff;}
@media (max-width:700px){
	.lista-item .ph{width:76px; height:60px;}
	.mini-carrossel{height:280px;}
}

/* Banner publicitário (rotativo).
   O banner tem o TAMANHO DA IMAGEM: sem caixa de altura fixa, sem corte —
   a imagem aparece inteira, centralizada, e a largura acompanha a coluna
   (a altura ajusta sozinha pra manter a proporção). Quando há mais de um
   banner na mesma posição, eles trocam sozinhos com um crossfade (ver
   tema.js). A altura do container acompanha a imagem ativa (o JS mede a
   imagem e ajusta com uma transição suave). */
.banner-full{
	margin:5px 0; position:relative; text-align:center; overflow:hidden;
	transition:height .4s ease;
}
/* Os slides ficam empilhados (absolutos) pro crossfade; o 1º fica no fluxo
   pra já definir uma altura antes de o JS medir (evita "pulo" no carregar). */
.banner-full .slide{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	opacity:0; transition:opacity .6s ease;
}
.banner-full .slide:first-of-type{ position:relative; }
.banner-full .slide.ativo{opacity:1;}
/* Placeholder (nenhum banner cadastrado): mantém uma faixa tracejada
   discreta, só pra não ficar um buraco no layout. */
.banner-full:has(.slide-vazio){
	height:90px; border:1px dashed var(--cor-borda); border-radius:var(--radius);
	background:var(--cor-fundo-secao); display:flex; align-items:center; justify-content:center;
}
.banner-full .slide-vazio{ flex-direction:column; color:#9a9a9a; font-size:12px; }
.banner-full .slide-vazio strong{font-size:14px; color:#777; margin-bottom:4px;}
.banner-tag{position:absolute; top:6px; left:8px; font-size:10px; color:#aaa; letter-spacing:.5px; text-transform:uppercase; z-index:2;}

/* Banners reais (plugin Portal de Notícias PRO - Banners) — ".pnp-banner-box"
   é a marca em comum entre o banner de topo/in-feed (".banner-full", fundo
   tracejado, altura fixa) e os da lateral (".card", caixa branca igual aos
   outros widgets). */
.pnp-banner-box{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}

/* Topo/in-feed: a IMAGEM manda no tamanho. Aparece inteira, centralizada,
   nunca cortada nem esticada — no máximo reduz pra caber na largura da
   coluna, mantendo a proporção. */
.banner-full .slide-link{ display:inline-flex; width:auto; height:auto; }
.banner-full .slide-link img{
	max-width:100%; width:auto; height:auto; display:block; margin:0 auto; object-fit:contain;
}

/* Lateral: aqui NÃO travamos a altura — a imagem manda, sempre 100% da
   largura da coluna e a altura ajusta sozinha pra manter a proporção
   original (sem cortar nem distorcer nada). Por isso os slides aqui não
   usam "position:absolute" (que precisa de altura fixa no elemento pai) —
   cada slide ocupa o fluxo normal da página, e só o ativo fica visível. */
.card.pnp-banner-box{padding:0; display:flex; flex-direction:column; align-items:stretch; justify-content:center;}
.card.pnp-banner-box .slide{position:static; display:none; width:100%;}
.card.pnp-banner-box .slide.ativo{display:block;}
.card.pnp-banner-box .slide-link img{width:100%; height:auto; display:block;}
.card.pnp-banner-box .banner-tag{
	background:rgba(0,0,0,.6); color:#fff; padding:3px 8px; border-radius:3px; top:8px; left:8px;
}

.pnp-banner-box .slide{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	opacity:0; transition:opacity .6s ease;
}
.pnp-banner-box .slide.ativo{opacity:1;}
.slide-link{display:flex; width:100%; height:100%; align-items:center; justify-content:center; text-decoration:none;}
.slide-vazio{
	flex-direction:column; display:flex; align-items:center; justify-content:center;
	color:#9a9a9a; font-size:12px; text-align:center; padding:8px;
}
.slide-vazio strong{font-size:14px; color:#777; margin-bottom:4px;}
.card.pnp-banner-box .slide-vazio{padding:30px 8px;}

/* Sidebar — sticky inteligente: quando a sidebar cabe na viewport, prende
   ao topo (top positivo); quando é mais alta que a viewport, o JS calcula
   um top negativo via --pnp-sidebar-top para que a sidebar role até revelar
   o último widget (banner) e então trave — igual ao efeito do Lenium.
   align-self:start é obrigatório: sem ele o grid estica a sidebar para a
   altura total da coluna principal e o sticky perde o efeito.             */
.sidebar{
	display:flex; flex-direction:column; gap:20px;
	align-self:start;
	position:sticky;
	top:var(--pnp-sidebar-top, calc(var(--pnp-topo-altura, 84px) + 16px));
}
@media (max-width:860px){
	.sidebar{position:static;}
}
.card{
	background:var(--cor-fundo); border:1px solid var(--cor-borda); border-radius:var(--radius);
	padding:16px 18px;
}
.card-titulo{
	display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
	padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--cor-borda);
	text-transform:uppercase; letter-spacing:.2px;
}
.card-titulo .dot{width:8px; height:8px; border-radius:50%; background:var(--cor-primaria); flex-shrink:0;}
.card-titulo.esportes .dot{background:var(--cor-secundaria-esportes);}
.card-titulo.esportes{border-color:var(--cor-secundaria-esportes);}

/* Widget clima (mesma marcação do plugin Previsão do Tempo) */
.clima-cidade{font-size:14px; font-weight:700; margin:0 0 4px;}
.clima-chuva{font-size:12px; color:var(--cor-texto-claro); margin:0 0 10px;}
.clima-periodos{display:flex; justify-content:space-between; margin-bottom:10px;}
.clima-periodo{text-align:center; flex:1;}
.clima-periodo span{display:block; font-size:11px; color:var(--cor-texto-claro); margin-bottom:4px;}
.clima-periodo .icone{font-size:20px;}
.clima-temps{display:flex; gap:14px; border-top:1px solid var(--cor-borda); padding-top:8px; font-size:14px; font-weight:700;}
.clima-temps .min{color:var(--cor-texto-claro); font-weight:600;}

/* Widget cotações */
.cot-item{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid #f1f1f1;}
.cot-item:last-child{border-bottom:none;}
.cot-label{font-weight:600;}
.cot-var{font-weight:700; font-size:12px;}
.cot-var.up{color:var(--cor-secundaria-esportes);}
.cot-var.down{color:var(--cor-primaria);}

/* Widget "Meu time do coração" */
.times-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:12px;}
.time-escudo{
	width:34px; height:34px; border-radius:50%; margin:0 auto 4px; display:flex; align-items:center;
	justify-content:center; font-size:11px; font-weight:700; color:#fff; cursor:pointer;
	border:2px solid transparent; transition:transform .15s ease;
}
.time-escudo:hover{transform:scale(1.08);}
.time-opcao{text-align:center; cursor:pointer;}
.time-opcao span{display:block; font-size:9px; color:var(--cor-texto-claro); margin-top:2px;}
.time-opcao.selecionado .time-escudo{border-color:var(--cor-secundaria-esportes); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cor-secundaria-esportes);}

.tabela-mini{width:100%; font-size:12px; border-collapse:collapse;}
.tabela-mini td{padding:5px 0; border-bottom:1px solid #f1f1f1;}
.tabela-mini tr.destaque td{font-weight:700; background:#eefbf1;}
.tabela-mini .pos{color:var(--cor-texto-claro); width:18px;}
.tabela-mini .pts{text-align:right; font-weight:700;}

.jogo-item{display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:12.5px; border-bottom:1px solid #f1f1f1;}
.jogo-item:last-child{border-bottom:none;}
.jogo-hora{color:var(--cor-texto-claro); font-size:11px;}

/* Banner lateral (sidebar) */
/* Esses tamanhos só valem pro placeholder vazio (nenhum banner cadastrado
   ainda) — quando há uma imagem real, o ".pnp-banner-box" deixa a altura
   livre, proporcional à imagem (ver regras mais acima). */
.banner-lateral{min-height:250px;}
.banner-lateral.alto{min-height:480px;}
.banner-lateral.pequeno{min-height:100px;}

/* Mais lidas */
.mais-lidas{list-style:none; margin:0; padding:0;}
.mais-lidas li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #f1f1f1; font-size:13px; line-height:1.4;}
.mais-lidas li:last-child{border-bottom:none;}
.mais-lidas .num{font-size:22px; font-weight:700; color:#dcdcdc; flex-shrink:0; width:22px; line-height:1.1;}

/* Newsletter */
.newsletter-texto{font-size:12.5px; color:var(--cor-texto-claro); margin:0 0 10px; line-height:1.5;}
.newsletter-input{width:100%; padding:8px 10px; border:1px solid var(--cor-borda); border-radius:4px; font-size:13px; margin-bottom:8px; box-sizing:border-box;}
.newsletter-btn{width:100%; padding:9px; border:none; border-radius:4px; background:var(--cor-primaria); color:#fff; font-size:13px; font-weight:700; cursor:pointer; text-transform:uppercase; letter-spacing:.3px;}
.newsletter-btn:hover{background:var(--cor-primaria-escura);}

/* Vídeos (faixa horizontal) */
.videos-scroll{display:flex; gap:14px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin;}
.video-item{flex:0 0 190px;}
.video-item .ph-wrap{position:relative;}
.video-item .ph{width:100%; aspect-ratio:1/0.6; margin-bottom:8px;}
.video-item .video-duracao{position:absolute; bottom:14px; right:6px; background:rgba(0,0,0,.75); color:#fff; font-size:10px; padding:2px 5px; border-radius:3px;}
.video-item p{font-size:13px; font-weight:600; line-height:1.35; margin:0;}

/* Hover com zoom na imagem + leve elevação no card */
.ph.foto-box img, .wp-block-post-featured-image.ph img{transition:transform .45s ease;}
.materia:hover .ph.foto-box img,
.materia-feed:hover .ph.foto-box img,
.carrossel-slide:hover .ph.foto-box img,
.card-overlay:hover .ph.foto-box img,
.hero-lead:hover .ph.foto-box img,
.materia:hover .wp-block-post-featured-image.ph img{transform:scale(1.08);}
.materia, .card-overlay, .carrossel-slide{transition:box-shadow .25s ease, transform .25s ease;}
.materia:hover, .card-overlay:hover, .carrossel-slide:hover{box-shadow:0 8px 20px rgba(0,0,0,.14);}

/* Revelação suave ao rolar */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* Stories (estilo Instagram) */
.stories-bar{display:flex; gap:10px; overflow-x:auto; padding:8px 0; scrollbar-width:thin;}
.story-item{flex:0 0 auto; width:58px; text-align:center; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; margin:0;}
.story-ring{width:52px; height:52px; border-radius:50%; padding:2px; margin:0 auto 3px; background:linear-gradient(135deg, var(--cor-primaria), #ff8a4c, var(--cor-secundaria-esportes));}
.story-thumb{width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid #fff; background:#eee;}
.story-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.story-item span,.story-label{font-size:10px; color:var(--cor-texto); line-height:1.2; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58px;}
.story-item:hover .story-ring{filter:brightness(1.05);}

/* Modal de stories */
.stories-modal{position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:999; display:none; align-items:center; justify-content:center;}
.stories-modal.aberto{display:flex;}
.stories-modal-card{position:relative; width:380px; max-width:92vw; height:86vh; max-height:680px; border-radius:10px; overflow:hidden; background:#111;}
.stories-progress{position:absolute; top:10px; left:10px; right:10px; display:flex; gap:4px; z-index:6;}
.stories-progress-seg{flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:2px; overflow:hidden;}
.stories-progress-fill{display:block; height:100%; width:0%; background:#fff;}
.stories-progress-seg.feito .stories-progress-fill{width:100%;}
.stories-progress-seg.ativo .stories-progress-fill{width:100%; transition:width 4s linear;}
.stories-cabecalho{position:absolute; top:20px; left:14px; right:40px; z-index:6; color:#fff; font-size:13px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.5);}
.stories-fechar{position:absolute; top:14px; right:10px; z-index:7; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1; padding:6px;}
.stories-slide{position:absolute; inset:0; opacity:0; transition:opacity .2s ease; pointer-events:none;}
.stories-slide.ativo{opacity:1; pointer-events:auto;}
.stories-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.stories-slide-texto{position:absolute; left:0; right:0; bottom:0; padding:50px 16px 22px; background:linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0)); color:#fff; z-index:6;}
.stories-slide-texto h4{font-size:16px; line-height:1.32; margin:0 0 8px; font-weight:700; color:#fff;}
.stories-slide-texto a.stories-link{display:inline-block; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,.55); padding:5px 12px; border-radius:20px;}
.stories-nav{position:absolute; inset:0; display:flex; z-index:5;}
.stories-nav button{flex:1; background:none; border:none; cursor:pointer;}

/* ---------------------------------------------------------------
   Stories no cabeçalho (desktop) — as bolinhas ficam do lado do
   relógio. O JS (tema.js) move a barra pra cá em telas > 780px e
   devolve pro lugar de origem no mobile.
   --------------------------------------------------------------- */
.pnp-header-stories{
	display:flex; align-items:center; min-width:0; flex:1 1 auto;
	overflow:hidden;
}
.pnp-header-stories .stories-bar{
	gap:8px; padding:0; margin:0;
	overflow-x:auto; overflow-y:hidden;
	align-items:center; flex-wrap:nowrap;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	max-width:100%;
}
.pnp-header-stories .stories-bar::-webkit-scrollbar{display:none;}
.pnp-header-stories .story-item{width:46px; flex-shrink:0;}
.pnp-header-stories .story-ring{width:38px; height:38px; margin-bottom:2px;}
.pnp-header-stories .story-label,
.pnp-header-stories .story-item span{
	display:block; font-size:9px; line-height:1.15;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46px;
}
/* Oculta o bloco de stories standalone abaixo do ticker (agora está no header) */
.stories-bar-standalone{display:none;}

/* Carrossel de destaques */
.carrossel{position:relative;}
.carrossel-viewport{overflow:hidden;}
.carrossel-track{display:flex; gap:18px; transition:transform .45s ease;}
.carrossel-slide{flex:0 0 calc((100% - 36px) / 3); min-width:0; padding:0 14px 14px; box-sizing:border-box;}
@media (max-width:780px){ .carrossel-slide{flex:0 0 calc((100% - 18px) / 2);} }
@media (max-width:520px){ .carrossel-slide{flex:0 0 100%;} }
.carrossel-slide .ph{width:calc(100% + 28px); margin:0 -14px 8px; aspect-ratio:1/0.78;}
.carrossel-slide h3{font-size:14px; line-height:1.35; margin:0; font-weight:700; color:var(--cor-primaria);}
.carrossel-setas{position:absolute; top:32%; left:-14px; right:-14px; display:flex; justify-content:space-between; pointer-events:none;}
.carrossel-seta{pointer-events:auto; width:36px; height:36px; padding:0; margin:0; border-radius:50%; background:#fff; border:1px solid var(--cor-borda); box-shadow:0 2px 6px rgba(0,0,0,.14); cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center;}
.carrossel-seta:hover{background:#f5f5f5;}

/* Página de matéria (single) — título grande e bem destacado, no estilo G1 */
.materia-single .categoria{color:var(--cor-primaria); font-size:13px; font-weight:700; text-transform:uppercase; margin-bottom:8px; display:inline-block;}
.materia-single h1{
	color:var(--cor-texto); font-size:34px; line-height:1.2; font-weight:800;
	letter-spacing:-.2px; margin:0 0 10px;
}
.materia-single .subtitulo{
	font-size:18px; line-height:1.45; color:var(--cor-texto-claro); font-weight:400;
	margin:0 0 14px;
}
.materia-single .meta{
	font-size:13px; color:var(--cor-texto-claro); gap:6px 14px; align-items:center;
	flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--cor-borda); border-bottom:1px solid var(--cor-borda);
	margin-bottom:16px;
}
.materia-single .meta .wp-block-post-author{font-weight:700; color:var(--cor-texto);}
.materia-single .meta .wp-block-post-author__name{font-weight:700;}
.pnp-visualizacoes{display:inline-flex; align-items:center; gap:4px; color:var(--cor-texto-claro);}
.pnp-visualizacoes svg{flex-shrink:0; opacity:.7;}
.materia-single .ph{aspect-ratio:1/0.55; margin:14px 0;}
@media (max-width:780px){
	.materia-single h1{font-size:26px;}
	.materia-single .subtitulo{font-size:16px;}
}

/* Botões de compartilhamento da matéria — quadrados cinza arredondados, estilo G1 */
.pnp-compartilhar{display:flex; gap:8px; align-items:center; margin:0 0 18px; flex-wrap:wrap;}
.pnp-compartilhar-btn{
	width:38px; height:38px; flex-shrink:0; border-radius:8px; padding:0; margin:0;
	display:flex; align-items:center; justify-content:center;
	background:var(--cor-fundo-secao, #f2f2f2); color:var(--cor-texto); border:1px solid var(--cor-borda);
	cursor:pointer; text-decoration:none; transition:background .15s ease, color .15s ease;
	position:relative;
}
.pnp-compartilhar-btn svg{width:18px; height:18px; flex-shrink:0;}
.pnp-compartilhar-btn:hover{background:var(--cor-primaria); color:#fff; border-color:var(--cor-primaria);}
.pnp-compartilhar-btn.copiado{background:#1ca54b; color:#fff; border-color:#1ca54b;}
.pnp-compartilhar-aviso{
	position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
	background:#222; color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
	padding:4px 8px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.pnp-compartilhar-btn.copiado .pnp-compartilhar-aviso{opacity:1;}

/* Redes sociais — só aparecem os ícones das redes preenchidas pelo cliente
   em Configurações → Redes Sociais (cabeçalho e rodapé usam o mesmo
   shortcode, com tamanhos diferentes). */
.pnp-social-links{display:flex; gap:8px; align-items:center;}
.pnp-social-link{
	width:var(--pnp-social-tamanho, 32px); height:var(--pnp-social-tamanho, 32px);
	border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,.12); color:#fff; flex-shrink:0;
	transition:background .2s ease, transform .15s ease;
}
.pnp-social-link svg{width:55%; height:55%;}
.pnp-social-link:hover{background:var(--cor-primaria); transform:translateY(-1px);}
.topbar .pnp-social-links{gap:6px;}
.topbar .pnp-social-link{width:26px; height:26px; background:transparent; color:#fff;}
.topbar .pnp-social-link svg{width:62%; height:62%;}
.topbar .pnp-social-link:hover{color:#fff; background:rgba(255,255,255,.18);}
.pnp-footer .pnp-social-link{background:rgba(255,255,255,.12); color:#fff;}
.pnp-footer .pnp-social-link:hover{background:var(--cor-primaria);}

/* Rodapé */
.pnp-footer{padding:34px 0 20px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:24px;}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} }
.pnp-footer h4{font-size:13px; text-transform:uppercase; margin:0 0 12px; color:inherit;}
.pnp-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
.pnp-footer a:hover{opacity:.8;}
.footer-base{border-top:1px solid #333; padding-top:16px; text-align:center; font-size:12px; margin-top:10px;}

/* ===================================================
   Overrides de cor para os plugins PNP — garante que
   os plugins acompanhem a paleta do tema ativo.
   O CSS do tema carrega após o CSS dos plugins, então
   declarar as mesmas variáveis aqui ganha na cascata.
   =================================================== */
.pnp-tempo-widget{
	--pnp-tempo-accent:#C5A059;
	--pnp-tempo-border:#E8D8A0;
	--pnp-tempo-muted:#A0A0A0;
	--pnp-tempo-bg:#F8F8F8;
}
.pnp-cot-widget{
	--pnp-cot-accent:#C5A059;
	--pnp-cot-border:#E8D8A0;
	--pnp-cot-muted:#A0A0A0;
	--pnp-cot-bg:#F8F8F8;
}
.pnp-lot-widget{
	--pnp-lot-accent:#C5A059;
	--pnp-lot-border:#E8D8A0;
	--pnp-lot-muted:#A0A0A0;
	--pnp-lot-bg:#F8F8F8;
}
/* Botões da loterias: valores diretos com !important para garantir ouro
   mesmo se WP ou outro plugin sobrescrever a variável CSS no cascade. */
.pnp-lot-widget .pnp-lot-btn-primario{background:#C5A059 !important; border-color:#C5A059 !important; color:#fff !important;}
.pnp-lot-widget .pnp-lot-btn-primario:hover{background:#9a7a3f !important; border-color:#9a7a3f !important;}
.pnp-lot-widget .pnp-lot-btn:not(.pnp-lot-btn-primario){background:transparent !important; border-color:#C5A059 !important; color:#C5A059 !important;}
.pnp-lot-widget .pnp-lot-btn:not(.pnp-lot-btn-primario):hover{background:#C5A059 !important; color:#fff !important;}
.pnp-lot-widget .pnp-lot-bola{border-color:#C5A059 !important; color:#C5A059 !important;}