/*
 * Radio Estação — CSS extraído do design de referência (novo-site-design/).
 * Reset + classes de hover (.h0–.h10) são fiéis ao bloco <style> repetido
 * nos 6 arquivos HTML. As classes semânticas (.site-header, .site-footer
 * etc.) traduzem os padrões de `style="..."` inline do header/footer para
 * classes reais, preservando cores/espaçamentos/tipografia exatos.
 */

/* ---------------------------------------------------------------------
 * Reset base (idêntico ao bloco <style> do design)
 * ------------------------------------------------------------------- */
body {
	margin: 0;
	background: #FFF8EF;
	font-family: Figtree, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a {
	color: #2E7C9E;
	text-decoration: none;
}
a:hover {
	color: #1F3A4D;
}
::selection {
	background: #E8A93A;
}

/* ---------------------------------------------------------------------
 * Classes de hover utilitárias (.h0–.h10) — usadas em vários componentes
 * do design, não só header/footer. Mantidas como no original.
 * ------------------------------------------------------------------- */
.h0:hover { background: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; }
.h1:hover { background: #F4C264 !important; }
.h2:hover { border-color: #FFFFFF !important; background: rgba(255, 255, 255, 0.12) !important; }
.h3:hover { background: #1F3A4D !important; }
.h4:hover { border-color: #10222B !important; }
.h5:hover { background: #E8A93A !important; color: #10222B !important; }
.h6:hover { color: #FFFFFF !important; }
.h7:hover { background: rgba(255, 255, 255, 0.22) !important; }
.h8:hover { color: #10222B !important; }
.h9:hover { background: #F0B94A !important; }
.h10:hover { border-color: #2E7C9E !important; color: #2E7C9E !important; }

/* ---------------------------------------------------------------------
 * Wrapper geral da página (abre em header.php, fecha em footer.php)
 * ------------------------------------------------------------------- */
.site-wrapper {
	min-height: 100vh;
	background: #FFF8EF;
	color: #10222B;
}

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #1F3A4D;
	border-bottom: 3px solid #E8A93A;
}
.site-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
	height: 76px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 13px;
}
.site-logo__image-link,
.site-logo__text-link {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.site-logo__image {
	width: 56px;
	height: 56px;
	display: block;
	background: #FFFFFF;
	border-radius: 999px;
	object-fit: contain;
}
/* Logo via Customizer/Elementor Site Identity (the_custom_logo()) — sem isso
   ela renderiza no tamanho nativo do arquivo (ex: 512x512) e estoura o header. */
.site-logo .custom-logo-link {
	display: flex;
	align-items: center;
}
.site-logo .custom-logo-link img.custom-logo {
	width: 56px;
	height: 56px;
	max-width: 56px;
	max-height: 56px;
	display: block;
	background: #FFFFFF;
	border-radius: 999px;
	object-fit: contain;
}
.site-logo__text {
	line-height: 1;
}
.site-logo__title {
	display: block;
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 15px;
	color: #FFFFFF;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.site-logo__subtitle {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #E8A93A;
	letter-spacing: 2px;
	margin-top: 4px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-menu li {
	list-style: none;
}
.nav-menu a {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #E4F0F5;
	cursor: pointer;
}
.nav-menu a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #FFFFFF;
}
.nav-menu li.current-menu-item a {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
}

.live-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #E8A93A;
	color: #1F3A4D;
	padding: 10px 18px 10px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.4px;
}
.live-badge:hover {
	background: #F4C264;
}
.live-badge__icon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #1F3A4D;
	color: #E8A93A;
	display: grid;
	place-items: center;
	font-size: 10px;
}

/* ---------------------------------------------------------------------
 * Menu mobile (hambúrguer + drawer) — escondido no desktop, ligado via
 * @media (max-width: 900px) mais abaixo. Toggle em assets/js/main.js.
 * ------------------------------------------------------------------- */
.nav-burger {
	display: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	margin-left: auto;
	place-items: center;
	align-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}
.nav-burger__line {
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: #FFFFFF;
	display: block;
}

.nav-drawer {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding: 10px 18px 18px;
}
.nav-drawer[data-open="1"] {
	display: block;
}
.nav-drawer__menu {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-drawer__menu li {
	list-style: none;
}
.nav-drawer__menu a {
	display: block;
	padding: 14px 12px;
	border-radius: 12px;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
}
.nav-drawer__menu a:hover {
	background: rgba(255, 255, 255, 0.1);
}
.nav-drawer__menu li.current-menu-item a {
	background: rgba(255, 255, 255, 0.14);
}
.nav-drawer__live {
	margin-top: 8px;
	background: #E8A93A;
	color: #1F3A4D;
	text-align: center;
	padding: 15px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}
.nav-drawer__live:hover {
	background: #F4C264;
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */
.site-footer {
	background: #10222B;
	padding: 56px 32px 40px;
}
.footer-grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
}

.footer-brand__logo-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.footer-logo {
	width: 62px;
	height: 62px;
	display: block;
	background: #FFFFFF;
	border-radius: 999px;
}
.footer-brand__title {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 15px;
	color: #FFFFFF;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.footer-brand__tagline {
	font-size: 13px;
	color: #8A9AA6;
	margin-top: 16px;
	max-width: 260px;
}
.footer-social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.footer-social__link {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 1px solid #33454F;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: #E4F0F5;
	cursor: pointer;
}
.footer-social__link:hover {
	background: #E8A93A;
	color: #10222B;
}

.footer-col__title {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.footer-col__links {
	display: grid;
	gap: 10px;
	margin-top: 16px;
	font-size: 14px;
	color: #B6C4CD;
}
.footer-col__link {
	cursor: pointer;
	/* Reset — permite usar esta classe também num <button> (ex: "Contato
	   comercial", que abre o modal em vez de navegar); não afeta o <a>. */
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	display: block;
	width: 100%;
}
.footer-col__link:hover,
a.footer-col__link:hover {
	color: #FFFFFF;
}

.footer-bottom {
	max-width: 1240px;
	margin: 36px auto 0;
	padding-top: 20px;
	border-top: 1px solid #24363F;
	display: flex;
	justify-content: space-between;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #6B8494;
}

/* ---------------------------------------------------------------------
 * Modal "Contato comercial" (footer.php) — aberto/fechado via
 * [data-abrir-modal]/[data-fechar-modal] (assets/js/main.js).
 * ------------------------------------------------------------------- */
.modal-contato {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 22px;
}
.modal-contato[hidden] {
	display: none;
}
.modal-contato__overlay {
	position: absolute;
	inset: 0;
	background: rgba(16, 34, 43, 0.6);
}
.modal-contato__painel {
	position: relative;
	background: #FFF8EF;
	border-radius: 22px;
	padding: 30px;
	max-width: 420px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 24px 60px -12px rgba(6, 20, 27, 0.5);
}
.modal-contato__fechar {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 0;
	background: #F0E4D5;
	color: #52697A;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.modal-contato__fechar:hover {
	background: #E8DACA;
	color: #10222B;
}
.modal-contato__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8663C;
}
.modal-contato__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -0.8px;
	color: #10222B;
	margin: 8px 0 0;
}
.modal-contato__endereco {
	margin-top: 20px;
}
.modal-contato__endereco-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.modal-contato__endereco-texto {
	font-size: 15px;
	color: #24363F;
	margin-top: 6px;
	text-wrap: pretty;
}
.modal-contato__mapa {
	margin-top: 16px;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
}
.modal-contato__acoes {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}
.modal-contato__botao {
	display: block;
	text-align: center;
	padding: 14px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}
.modal-contato__botao--whatsapp {
	background: #2E7C9E;
	color: #FFFFFF;
}
.modal-contato__botao--whatsapp:hover {
	background: #1F3A4D;
	color: #FFFFFF;
}
.modal-contato__botao--instagram {
	background: #E8A93A;
	color: #1F3A4D;
}
.modal-contato__botao--instagram:hover {
	background: #F0B94A;
	color: #1F3A4D;
}
.modal-contato__painel--termos {
	max-width: 640px;
	padding-top: 34px;
}
.modal-contato__corpo {
	margin-top: 18px;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #3C4F5A;
}
.modal-contato__corpo h3 {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #10222B;
	margin: 22px 0 8px;
}
.modal-contato__corpo h3:first-child {
	margin-top: 0;
}
.modal-contato__corpo p {
	margin: 0 0 10px;
	text-wrap: pretty;
}
.modal-contato__corpo ul,
.modal-contato__corpo ol {
	margin: 0 0 10px;
	padding-left: 20px;
}
.modal-contato__corpo li {
	margin-bottom: 4px;
}
.modal-contato__corpo strong {
	color: #10222B;
}
.modal-contato__corpo hr {
	border: 0;
	border-top: 1px solid #E8DACA;
	margin: 20px 0 12px;
}

/* ---------------------------------------------------------------------
 * Checkbox de aceite dos Termos de Uso — compartilhado pelos 4
 * formulários públicos (newsletter, "Avise-me da próxima promoção",
 * "Quero participar", "Fale com o comercial"). Substitui a antiga
 * .promo-detalhe__form-aceite específica de single-promocao.php (mesmas
 * regras, nome genérico pra poder ser reaproveitada nos outros 3).
 * ------------------------------------------------------------------- */
.form-aceite-termos {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 4px;
	cursor: pointer;
}
.form-aceite-termos input {
	margin-top: 2px;
	flex-shrink: 0;
}
.form-aceite-termos span {
	font-size: 13px;
	color: #52697A;
	text-wrap: pretty;
}
.form-aceite-termos__link {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: #2E7C9E;
	text-decoration: underline;
	cursor: pointer;
}
.form-aceite-termos__link:hover {
	/*
	 * Não usar #1F3A4D aqui: é o fundo sólido de dois dos 4 cards desse
	 * checkbox (newsletter e "Avise-me da próxima promoção",
	 * .secao-newsletter/.card-cadastro-unico) — o link ficava invisível no
	 * hover, mesma cor do fundo. Laranja de destaque (já usado em
	 * .modal-contato__eyebrow) contrasta bem nos 4 fundos (2 claros, 2
	 * escuros), então funciona em qualquer um dos formulários.
	 */
	color: #E8663C;
}

/* ---------------------------------------------------------------------
 * Hero (home) — sistema de estados via [data-weather]/[data-day]
 * (sunny/few/cloudy/rain/storm × day/night, com sol, lua, estrelas, nuvens,
 * chuva, raio) portado por completo em 2026-09-07: os atributos são
 * escritos no servidor por front-page.php, a partir de dado real da
 * Open-Meteo (functions/clima-hero.php, cache de 6h) — antes só o estado
 * padrão "dia ensolarado" existia (ver histórico no CONTEXT.md), porque
 * não havia integração nenhuma ainda decidindo os outros estados.
 * ------------------------------------------------------------------- */
.hero {
	position: relative;
	background: linear-gradient(#2E7C9E 0%, #4E97B2 52%, #7FB6C9 74%);
}
/* Camada só com os elementos decorativos (sol, nuvens, mar, ondas, areia) —
   isolada num wrapper próprio com overflow:hidden pra não vazar pros lados
   (vários desses elementos usam left/right negativos de propósito), sem
   cortar o conteúdo real em .hero__inner. Antes o overflow:hidden estava
   direto em .hero e cortava o painel flutuante do widget de surf
   (.sw-detail, position:absolute) quando ele abria perto do fim do hero. */
.hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.hero__sun {
	position: absolute;
	top: 14px;
	left: 40%;
	width: 210px;
	height: 210px;
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, #F0B94A 0 62%, rgba(240, 185, 74, 0.35) 63%, rgba(240, 185, 74, 0) 72%);
	pointer-events: none;
}
.hero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.8px, transparent 0.9px);
	background-size: 5px 5px;
	opacity: 0.5;
	pointer-events: none;
}
.hero__clouds {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero__cloud {
	position: absolute;
	border-radius: 999px;
}
.hero__cloud--a {
	top: 58px;
	left: 6%;
	width: 240px;
	height: 62px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 62px -22px 0 -6px rgba(255, 255, 255, 0.5), 130px 6px 0 -12px rgba(255, 255, 255, 0.42);
	animation: om-cloud-a 46s linear infinite;
}
.hero__cloud--b {
	top: 120px;
	left: 38%;
	width: 300px;
	height: 74px;
	background: rgba(255, 255, 255, 0.38);
	box-shadow: 84px -26px 0 -8px rgba(255, 255, 255, 0.34), 168px 8px 0 -14px rgba(255, 255, 255, 0.3);
	animation: om-cloud-b 62s linear infinite;
}
.hero__cloud--c {
	top: 30px;
	right: 4%;
	width: 200px;
	height: 54px;
	background: rgba(255, 255, 255, 0.32);
	box-shadow: -56px 16px 0 -10px rgba(255, 255, 255, 0.28);
	animation: om-cloud-c 54s linear infinite;
}
@keyframes om-cloud-a {
	from { transform: translateX(-14%); }
	to { transform: translateX(118%); }
}
@keyframes om-cloud-b {
	from { transform: translateX(-40%); }
	to { transform: translateX(110%); }
}
@keyframes om-cloud-c {
	from { transform: translateX(12%); }
	to { transform: translateX(-130%); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__cloud,
	.hero__rain,
	.hero__flash,
	.logos-parceiros__track {
		animation: none !important;
	}
}

/* Lua (visível só à noite — regra de opacidade mais abaixo) — glow + disco
   + 3 crateras, mesmas coordenadas do design de referência (mesma posição
   do sol: os dois nunca aparecem juntos, opacidade cuida da troca). */
.hero__moon {
	position: absolute;
	top: 14px;
	left: 40%;
	width: 210px;
	height: 210px;
	pointer-events: none;
}
.hero__moon-glow {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, rgba(226, 238, 247, 0.55) 0 62%, rgba(226, 238, 247, 0.16) 63%, rgba(226, 238, 247, 0) 74%);
}
.hero__moon-disco {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 146px;
	height: 146px;
	border-radius: 999px;
	background: radial-gradient(circle at 38% 34%, #F4F1E4 0%, #DCD9C8 70%, #C6C4B4 100%);
	box-shadow: inset -10px -8px 18px rgba(120, 124, 120, 0.35);
}
.hero__moon-cratera--a {
	position: absolute;
	left: 68px;
	top: 74px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba(150, 150, 136, 0.28);
}
.hero__moon-cratera--b {
	position: absolute;
	left: 116px;
	top: 60px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: rgba(150, 150, 136, 0.22);
}
.hero__moon-cratera--c {
	position: absolute;
	left: 100px;
	top: 116px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(150, 150, 136, 0.2);
}

/* Estrelas (só à noite) — textura de 2 camadas de pontos, mesmo padrão do
   design de referência; inset com 45% embaixo pra não invadir a faixa do
   mar/areia. */
.hero__stars {
	position: absolute;
	inset: 0 0 45% 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.85) 1.1px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1.3px);
	background-size: 118px 92px, 67px 61px;
	background-position: 12px 8px, 40px 30px;
}

/* Chuva/raio — escondidos por padrão ([data-weather] [data-w="rain/flash"]
   abaixo), só aparecem nos estados "rain"/"storm". */
.hero__rain {
	position: absolute;
	inset: -20% 0 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(76deg, rgba(255, 255, 255, 0.34) 0 1.5px, rgba(255, 255, 255, 0) 1.5px 9px);
	animation: om-rain 0.55s linear infinite;
}
@keyframes om-rain {
	from { transform: translate3d(0, -9px, 0); }
	to { transform: translate3d(-2px, 9px, 0); }
}
.hero__flash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 46%);
	opacity: 0;
	animation: om-flash 7s linear infinite;
}
@keyframes om-flash {
	0%, 6%, 100% { opacity: 0; }
	1.2% { opacity: 0.9; }
	2% { opacity: 0.12; }
	2.8% { opacity: 0.75; }
	4% { opacity: 0; }
}

/* Véu — escurece a cena à noite (regra de opacidade mais abaixo); último
   elemento decorativo do .hero__bg, por cima de sol/lua/nuvens/mar/areia,
   mas ainda embaixo de .hero__inner (conteúdo real, z-index:1). */
.hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(rgba(8, 22, 36, 0.18), rgba(8, 22, 36, 0.42));
}

/* ---------------------------------------------------------------------
 * Estados de [data-weather]/[data-day], escritos em .hero por
 * front-page.php (radio_clima_hero_obter_dados(), functions/clima-hero.php)
 * — mesmas regras do design de referência (novo-site-design/home.html).
 * ------------------------------------------------------------------- */
[data-weather] [data-w="rain"],
[data-weather] [data-w="flash"] {
	display: none;
}
[data-w="sun"],
[data-w="moon"],
[data-w="stars"],
[data-w="veil"] {
	transition: opacity 0.7s ease;
}
[data-w="moon"],
[data-w="stars"],
[data-w="veil"] {
	opacity: 0;
}
[data-day="night"] [data-w="sun"] {
	opacity: 0;
}
[data-day="night"] [data-w="moon"],
[data-day="night"] [data-w="stars"] {
	opacity: 1;
}
[data-day="night"] [data-w="veil"] {
	opacity: 1;
}
[data-weather="cloudy"] [data-w="sun"],
[data-weather="rain"] [data-w="sun"],
[data-weather="storm"] [data-w="sun"],
[data-weather="cloudy"] [data-w="moon"],
[data-weather="rain"] [data-w="moon"],
[data-weather="storm"] [data-w="moon"],
[data-weather="cloudy"] [data-w="stars"],
[data-weather="rain"] [data-w="stars"],
[data-weather="storm"] [data-w="stars"] {
	opacity: 0 !important;
}
[data-day="night"] {
	background: linear-gradient(#0F2436 0%, #1B3B54 52%, #2E5771 74%) !important;
}
[data-day="night"][data-weather="cloudy"] {
	background: linear-gradient(#152A3A 0%, #26455A 52%, #3B5D74 74%) !important;
}
[data-day="night"][data-weather="rain"] {
	background: linear-gradient(#0E2130 0%, #1D3949 52%, #2F5162 74%) !important;
}
[data-day="night"][data-weather="storm"] {
	background: linear-gradient(#091620 0%, #152834 52%, #24404E 74%) !important;
}
[data-weather="sunny"] [data-w="clouds"] {
	opacity: 0.18;
}
[data-weather="few"] [data-w="clouds"] {
	opacity: 0.6;
}
[data-weather="cloudy"] {
	background: linear-gradient(#5B7E93 0%, #7B98A8 52%, #9CB2BE 74%) !important;
}
[data-weather="cloudy"] [data-w="clouds"] {
	opacity: 1;
}
[data-weather="cloudy"] [data-w="sun"] {
	opacity: 0.25;
}
[data-weather="rain"] {
	background: linear-gradient(#3D5A6B 0%, #567585 52%, #7A93A0 74%) !important;
}
[data-weather="rain"] [data-w="clouds"] {
	opacity: 0.9;
	filter: brightness(0.86);
}
[data-weather="rain"] [data-w="sun"] {
	opacity: 0;
}
[data-weather="rain"] [data-w="rain"] {
	display: block;
}
[data-weather="storm"] {
	background: linear-gradient(#22333F 0%, #35505F 52%, #587584 74%) !important;
}
[data-weather="storm"] [data-w="clouds"] {
	opacity: 0.85;
	filter: brightness(0.7);
}
[data-weather="storm"] [data-w="sun"] {
	opacity: 0;
}
[data-weather="storm"] [data-w="rain"] {
	display: block;
	opacity: 0.85;
}
[data-weather="storm"] [data-w="flash"] {
	display: block;
}

.hero__sea {
	position: absolute;
	left: -4%;
	right: -4%;
	bottom: 84px;
	height: 300px;
	border-radius: 50% 50% 0 0 / 90px 90px 0 0;
	background-color: #276F8F;
	background-image: repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.10) 0 3px, rgba(255, 255, 255, 0) 3px 15px), linear-gradient(rgba(31, 95, 124, 0.9), rgba(46, 124, 158, 0));
	pointer-events: none;
}
.hero__wave-arc {
	position: absolute;
	border: 3px solid rgba(255, 255, 255, 0.55);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	pointer-events: none;
}
.hero__wave-arc--1 {
	left: 8%;
	bottom: 176px;
	width: 240px;
	height: 60px;
	border-radius: 50% 50% 0 0 / 60px 60px 0 0;
}
.hero__wave-arc--2 {
	left: 26%;
	bottom: 146px;
	width: 320px;
	height: 66px;
	border-color: rgba(255, 255, 255, 0.4);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 50% 50% 0 0 / 66px 66px 0 0;
}
.hero__wave-arc--3 {
	right: 10%;
	bottom: 168px;
	width: 200px;
	height: 52px;
	border-color: rgba(255, 255, 255, 0.45);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-radius: 50% 50% 0 0 / 52px 52px 0 0;
}
.hero__foam {
	position: absolute;
	left: -4%;
	right: -4%;
	bottom: 62px;
	height: 46px;
	border-radius: 50% 50% 0 0 / 46px 46px 0 0;
	background: rgba(255, 255, 255, 0.7);
	background-image: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.9) 0 12px, rgba(255, 255, 255, 0.35) 12px 26px);
	pointer-events: none;
}
.hero__sand {
	position: absolute;
	left: -4%;
	right: -4%;
	bottom: 0;
	height: 108px;
	border-radius: 46% 54% 0 0 / 44px 44px 0 0;
	background-color: #E7D4B4;
	background-image: radial-gradient(rgba(150, 112, 62, 0.22) 1px, transparent 1.3px), radial-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1.2px);
	background-size: 8px 8px, 11px 11px;
	background-position: 0 0, 4px 5px;
	pointer-events: none;
}
.hero__sand-gradient {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 108px;
	background: linear-gradient(rgba(214, 183, 138, 0.45), rgba(214, 183, 138, 0));
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 32px 172px;
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 40px;
	align-items: start;
}
.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(6, 58, 87, 0.35);
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 22px;
}
.hero__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #E8663C;
}
.hero__badge-text {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #FFFFFF;
	letter-spacing: 2px;
}
.hero__title {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 68px;
	line-height: 0.92;
	color: #FFFFFF;
	letter-spacing: -2.5px;
	text-wrap: pretty;
	margin: 0;
}
.hero__subtitle {
	font-size: 19px;
	color: #E4F0F5;
	margin-top: 20px;
	max-width: 460px;
	text-wrap: pretty;
}

.hero-cta {
	display: flex;
	gap: 14px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.hero-cta__primary {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #E8A93A;
	color: #1F3A4D;
	padding: 16px 26px;
	border-radius: 999px;
	cursor: pointer;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 16px;
	border: none;
}
.hero-cta__primary:hover {
	background: #F4C264;
}
.hero-cta__primary-icon {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #1F3A4D;
	color: #E8A93A;
	display: grid;
	place-items: center;
	font-size: 12px;
}
.hero-cta__secondary {
	display: flex;
	align-items: center;
	padding: 16px 26px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	cursor: pointer;
	font-weight: 700;
	font-size: 16px;
}
.hero-cta__secondary:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
}

.card-tocando-agora {
	margin-top: 40px;
	display: flex;
	align-items: center;
	gap: 18px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 16px 20px;
	border-radius: 18px;
	max-width: 520px;
}
.card-tocando-agora__art {
	width: 62px;
	height: 62px;
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, #E8A93A 0 6px, #D89A2E 6px 12px);
	flex-shrink: 0;
}
.card-tocando-agora__body {
	min-width: 0;
}
.card-tocando-agora__tag {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #1F3A4D;
	background: #E8A93A;
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
}
.card-tocando-agora__title {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: #FFFFFF;
	margin-top: 8px;
}
.card-tocando-agora__meta {
	font-size: 13px;
	color: #E4F0F5;
	margin-top: 3px;
}

/* ---------------------------------------------------------------------
 * Widget Mar hoje — estático/placeholder (ver comentário TODO no PHP:
 * integrar API de dados marítimos no futuro).
 * ------------------------------------------------------------------- */
.widget-mar {
	background: #FFF8EF;
	border-radius: 22px;
	padding: 22px;
	box-shadow: 0 20px 40px rgba(6, 58, 87, 0.25);
}
.widget-mar__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.widget-mar__title {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 17px;
	letter-spacing: -0.3px;
}
.widget-mar__updated {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #6B8494;
}
.widget-mar__now {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin-top: 18px;
}
.widget-mar__now-value {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 56px;
	line-height: 0.85;
	letter-spacing: -3px;
	color: #2E7C9E;
}
.widget-mar__now-unit {
	font-size: 22px;
	letter-spacing: 0;
}
.widget-mar__now-info {
	padding-bottom: 6px;
}
.widget-mar__now-direction {
	font-weight: 700;
	font-size: 14px;
}
.widget-mar__now-wind {
	font-size: 13px;
	color: #6B8494;
}
.widget-mar__hours {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 20px;
}
.widget-mar__hour {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 12px 10px;
	text-align: center;
}
.widget-mar__hour-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	color: #6B8494;
	letter-spacing: 1px;
}
.widget-mar__hour-value {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
	margin-top: 6px;
}
.widget-mar__hour-bar {
	height: 4px;
	border-radius: 4px;
	margin-top: 8px;
}
.widget-mar__footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #D8C9B6;
}
.widget-mar__temp {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: #E8A93A;
	display: grid;
	place-items: center;
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 15px;
	color: #1F3A4D;
}
.widget-mar__conditions {
	font-size: 13px;
	color: #10222B;
}

/* ---------------------------------------------------------------------
 * Banner patrocinador + logos parceiros — estático (TODO: sistema de
 * gestão de patrocinadores).
 * ------------------------------------------------------------------- */
.banner-patrocinador-wrap {
	background: #1F3A4D;
	padding: 34px 32px 30px;
}
.banner-patrocinador-wrap__inner {
	max-width: 1240px;
	margin: 0 auto;
}
.banner-patrocinador {
	/* aspect-ratio em vez de height fixo — mantém o MESMO enquadramento
	   (2,5:1, menos extremo que o 4:1 original) em qualquer largura de
	   tela, só escalando; antes a altura era fixa (300px desktop, 190px
	   mobile) mas a largura mudava muito mais entre as duas telas, e isso
	   fazia o corte (background-size:cover) enquadrar a imagem de um
	   jeito bem diferente em cada uma — cortando as laterais no mobile. */
	aspect-ratio: 5 / 2;
	border-radius: 22px;
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0 13px, rgba(255, 255, 255, 0.06) 13px 26px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	display: grid;
	place-items: center;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}
.banner-patrocinador + .banner-patrocinador {
	margin-top: 16px;
}
.banner-patrocinador__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	letter-spacing: 2px;
	color: #FFFFFF;
}
.banner-patrocinador__hint {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8FC2D6;
	margin-top: 8px;
}
.logos-parceiros {
	margin-top: 18px;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logos-parceiros__track {
	display: flex;
	gap: 12px;
	width: max-content;
	animation: om-marquee 34s linear infinite;
}
/* Quando os patrocinadores cabem sem precisar rolar (classe alternada via
   JS, assets/js/main.js, medindo a largura real), a faixa vira uma linha
   estática centralizada — sem animação e sem a cópia duplicada que só
   existe pra fazer o loop do marquee não "saltar". */
.logos-parceiros--sem-scroll .logos-parceiros__track {
	width: 100%;
	justify-content: center;
	animation: none;
}
.logos-parceiros--sem-scroll .logos-parceiros__item--duplicata {
	display: none;
}
.logos-parceiros__item {
	/* Logo do patrocinador (sempre 1:1, ver hint no admin) como
	   background-image do próprio link — preenche os 100×100px inteiros e
	   fica recortada no formato arredondado do elemento (border-radius +
	   background sempre respeita a caixa, sem precisar de overflow:hidden
	   nem <img> separado). */
	width: 100px;
	height: 100px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.09);
	background-size: cover;
	background-position: center;
	display: block;
	flex-shrink: 0;
}
@keyframes om-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
 * Notícias da praia (home)
 * ------------------------------------------------------------------- */
.secao-noticias {
	max-width: 1240px;
	margin: 0 auto;
	/* padding-bottom próprio (56px) em vez de 0: antes essa seção
	   dependia do padding-top da seção seguinte (secao-producoes, 72px)
	   pra abrir espaço embaixo — mas agora o próximo vizinho pode ser
	   .banner-patrocinador-wrap (seção 14.17), que tem padding-top bem
	   menor (34px), e o card de notícia (cantos arredondados + sombra)
	   ficava colado/sobrepondo o fundo escuro. */
	padding: 72px 32px 56px;
}
.secao-noticias__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.secao-noticias__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}
.secao-noticias__title {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 42px;
	letter-spacing: -1.6px;
	margin: 8px 0 0;
}
.secao-noticias__link {
	font-weight: 700;
	font-size: 14px;
	color: #2E7C9E;
	cursor: pointer;
	white-space: nowrap;
}
.secao-noticias__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
	margin-top: 32px;
}
.secao-noticias__lista {
	display: grid;
	gap: 16px;
	align-content: start;
}

.card-noticia-destaque {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	display: block;
}
.card-noticia-destaque__imagem {
	height: 340px;
	background-size: cover;
	background-position: center;
	background-color: #8FC2D6;
}
.card-noticia-destaque__body {
	padding: 26px 28px 30px;
}
.card-noticia-destaque__categoria {
	display: inline-block;
	background: #E8A93A;
	padding: 4px 10px;
	border-radius: 5px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #1F3A4D;
}
.card-noticia-destaque__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.12;
	letter-spacing: -0.8px;
	margin: 14px 0 0;
}
.card-noticia-destaque__resumo {
	font-size: 15px;
	color: #52697A;
	margin-top: 12px;
}
.card-noticia-destaque__meta {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	margin-top: 16px;
}

.card-noticia {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 16px;
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 16px;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
}
.card-noticia__imagem {
	height: 92px;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	background-color: #C9E9C4;
}
.card-noticia__categoria {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #E8663C;
}
.card-noticia__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	margin-top: 7px;
}

.cta-viu-algo {
	background: #1F3A4D;
	border-radius: 18px;
	padding: 20px 22px;
	color: #FFFFFF;
}
.cta-viu-algo__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
}
.cta-viu-algo__texto {
	font-size: 14px;
	color: #BBD8E3;
	margin-top: 6px;
}
.cta-viu-algo__botao {
	margin-top: 14px;
	display: inline-block;
	background: #E8A93A;
	color: #1F3A4D;
	padding: 10px 16px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Produções audiovisuais (home)
 * ------------------------------------------------------------------- */
.secao-producoes {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 32px 0;
}
.secao-producoes__card {
	background: #E8A93A;
	border-radius: 28px;
	padding: 40px;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 40px;
	align-items: center;
}
.secao-producoes__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #7A5410;
}
.secao-producoes__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 38px;
	line-height: 1.02;
	letter-spacing: -1.4px;
	margin: 10px 0 0;
	color: #10222B;
}
.secao-producoes__texto {
	font-size: 15px;
	color: #6B4A10;
	margin-top: 14px;
}
.secao-producoes__acoes {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}
.secao-producoes__assistir {
	background: #10222B;
	color: #E8A93A;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}
.secao-producoes__todos {
	border: 2px solid rgba(16, 34, 43, 0.3);
	color: #10222B;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.secao-producoes__thumb {
	border-radius: 20px;
	height: 300px;
	background-size: cover;
	background-position: center;
	background-color: rgba(16, 34, 43, 0.16);
	display: grid;
	place-items: center;
}
.secao-producoes__play {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #10222B;
	color: #E8A93A;
	display: grid;
	place-items: center;
	font-size: 20px;
}

/* ---------------------------------------------------------------------
 * Promoções (home)
 * ------------------------------------------------------------------- */
.secao-promocoes {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 32px 0;
}
.secao-promocoes__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.secao-promocoes__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 42px;
	letter-spacing: -1.6px;
	margin: 0;
}
.secao-promocoes__link {
	font-weight: 700;
	font-size: 14px;
	color: #2E7C9E;
	cursor: pointer;
	white-space: nowrap;
}
.grid-promocoes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.card-promocao {
	background: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	display: block;
}
.card-promocao__imagem {
	height: 150px;
	background-size: cover;
	background-position: center;
	background-color: #F0D6C0;
}
.card-promocao__body {
	padding: 16px 18px 20px;
}
.card-promocao__prazo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	color: #E8663C;
	letter-spacing: 1.5px;
}
.card-promocao__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 17px;
	margin-top: 8px;
}
.card-promocao__resumo {
	font-size: 13px;
	color: #6B8494;
	margin-top: 6px;
}

/* ---------------------------------------------------------------------
 * Três colunas (colunistas / agora na grade / espaço do parceiro)
 * ------------------------------------------------------------------- */
.colunas-tres {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 32px 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
}
.colunas-tres__card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
}
.colunas-tres__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}

.card-colunista-lista {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}
.card-colunista {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.card-colunista__foto {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}
.card-colunista__nome {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: #10222B;
}
.card-colunista:hover .card-colunista__nome {
	color: #2E7C9E;
}
.card-colunista__tema {
	font-size: 12px;
	color: #6B8494;
}

.grid-programacao-mini {
	background: #2E7C9E;
	border-radius: 22px;
	padding: 26px;
	color: #FFFFFF;
}
.grid-programacao-mini__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #BBD8E3;
}
.grid-programacao-mini__lista {
	display: grid;
	gap: 12px;
	margin-top: 18px;
}
.grid-programacao-mini__item {
	display: flex;
	gap: 12px;
	align-items: baseline;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 12px;
}
.grid-programacao-mini__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.grid-programacao-mini__hora {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #E8A93A;
}
.grid-programacao-mini__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 16px;
}
.grid-programacao-mini__desc {
	font-size: 12px;
	color: #E4F0F5;
}
.grid-programacao-mini__vazio {
	font-size: 13px;
	color: #E4F0F5;
	margin-top: 18px;
}

.card-parceiro__imagem {
	/* aspect-ratio em vez de height fixo: a largura da caixa muda bastante
	   entre desktop (3 colunas) e mobile (1 coluna empilhada), então uma
	   altura fixa fazia o corte (background-size:cover) enquadrar a
	   imagem de um jeito bem diferente em cada tamanho de tela — cortando
	   as laterais no mobile. Com aspect-ratio, a proporção do recorte fica
	   igual em qualquer largura, só escalando. */
	aspect-ratio: 5 / 3;
	border-radius: 16px;
	margin-top: 18px;
	background: repeating-linear-gradient(135deg, #EFE2D2 0 10px, #E4D3BF 10px 20px);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #6B4A10;
	text-align: center;
	text-decoration: none;
}
.card-parceiro__link {
	margin-top: 16px;
	font-size: 13px;
	font-weight: 700;
	color: #2E7C9E;
	cursor: pointer;
	display: block;
}

/* ---------------------------------------------------------------------
 * Newsletter / WhatsApp opt-in (home) — form real, sem handler ainda
 * (TODO Fase 2: admin-post.php?action=radio_newsletter_signup).
 * ------------------------------------------------------------------- */
.secao-newsletter {
	margin-top: 80px;
	background: #1F3A4D;
	padding: 64px 32px;
}
.secao-newsletter__inner {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}
.secao-newsletter__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 38px;
	line-height: 1.02;
	letter-spacing: -1.4px;
	color: #FFFFFF;
	margin: 0;
}
.secao-newsletter__texto {
	font-size: 16px;
	color: #BBD8E3;
	margin-top: 14px;
}
.secao-newsletter__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.secao-newsletter__tag {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, color .15s ease;
}
.secao-newsletter__tag:hover {
	background: rgba(255, 255, 255, 0.2);
}
.secao-newsletter__tag--ativa {
	background: #E8A93A;
	color: #1F3A4D;
}
.secao-newsletter__tag--ativa:hover {
	background: #F4C264;
}
.secao-newsletter__tag-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.secao-newsletter__tag-input:focus-visible + .secao-newsletter__tag-texto {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
	border-radius: 4px;
}

.form-newsletter {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	padding: 24px;
	display: grid;
	gap: 14px;
	margin: 0;
}
.form-newsletter__label {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #BBD8E3;
}
.form-newsletter__input {
	width: 100%;
	box-sizing: border-box;
	margin-top: 7px;
	background: #FFFFFF;
	border: none;
	border-radius: 10px;
	padding: 13px 14px;
	font-size: 14px;
	font-family: Figtree, sans-serif;
	color: #10222B;
}
.form-newsletter__input::placeholder {
	color: #8A9AA6;
}
.form-newsletter__submit {
	background: #E8A93A;
	color: #1F3A4D;
	text-align: center;
	padding: 15px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	border: none;
	width: 100%;
}
.form-newsletter__submit:hover {
	background: #F4C264;
}
.form-newsletter__submit:disabled {
	opacity: .6;
	cursor: default;
}
.form-newsletter__feedback {
	font-size: 13px;
	font-weight: 600;
	border-radius: 10px;
	padding: 10px 12px;
}
.form-newsletter__feedback:empty {
	display: none;
}
.form-newsletter__feedback--sucesso {
	background: rgba(232, 169, 58, .16);
	color: #E8A93A;
}
.form-newsletter__feedback--erro {
	background: rgba(232, 102, 60, .16);
	color: #F2A98F;
}

/* ---------------------------------------------------------------------
 * Página de patrocinador (single-patrocinador.php)
 * ------------------------------------------------------------------- */
.patrocinador-breadcrumb {
	background: #1F3A4D;
	padding: 20px 32px 0;
}
.patrocinador-breadcrumb__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: #8FC2D6;
}
.patrocinador-breadcrumb__home {
	color: #E8A93A;
	cursor: pointer;
}

.patrocinador-hero {
	background: #1F3A4D;
	padding: 34px 32px 56px;
}
.patrocinador-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 34px;
	align-items: center;
}
.patrocinador-hero__logo-box {
	border-radius: 14px;
	border: 1px solid #FFFFFF;
	height: 220px;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 18px;
	box-sizing: border-box;
	overflow: hidden;
}
/* Com imagem de logo: sem padding, a foto preenche a caixa de ponta a
   ponta (o overflow:hidden + border-radius acima já recortam ela no
   formato arredondado, como se fosse o background da própria div). Sem
   imagem (fallback de texto), mantém o padding — texto colado na borda
   ficaria apertado. */
.patrocinador-hero__logo-box--com-imagem {
	padding: 0;
}
.patrocinador-hero__logo-box img {
	/* .patrocinador-hero__logo-box usa place-items:center (não "stretch"),
	   então o item de grid não ganha um tamanho definido pra herdar —
	   width/height em % ficam sem base pra resolver e a imagem pode
	   transbordar a caixa. align-self/justify-self:stretch força este
	   item específico a preencher a célula, aí width/height:100% +
	   object-fit:cover funcionam (cover = preenche a caixa inteira,
	   cortando o excesso, em vez de sobrar espaço vazio como no contain). */
	align-self: stretch;
	justify-self: stretch;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.patrocinador-hero__logo-fallback {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 0.95;
	letter-spacing: -1.2px;
	color: #FFFFFF;
}
.patrocinador-hero__logo-legenda {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8663C;
	margin-top: 12px;
}
.patrocinador-hero__selo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #E8A93A;
	color: #1F3A4D;
	padding: 8px 16px;
	border-radius: 999px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 700;
}
.patrocinador-hero__title {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 56px;
	line-height: 0.94;
	letter-spacing: -2.4px;
	color: #FFFFFF;
	margin: 16px 0 0;
	text-wrap: pretty;
}
.patrocinador-hero__subtitulo {
	font-size: 18px;
	color: #DCEEF4;
	margin-top: 16px;
	max-width: 620px;
	text-wrap: pretty;
}
.patrocinador-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 24px;
}
.patrocinador-hero__badge {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.patrocinador-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}
.patrocinador-hero__cta-principal {
	background: #E8A93A;
	color: #1F3A4D;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}
.patrocinador-hero__cta-principal:hover {
	background: #F4C264;
}
.patrocinador-hero__cta-secundario {
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #FFFFFF;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}
.patrocinador-hero__cta-secundario:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
}

.patrocinador-promo {
	background: #E8A93A;
	padding: 40px 32px;
}
.patrocinador-promo__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: center;
}
.patrocinador-promo__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #6B4A10;
}
.patrocinador-promo__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -1.8px;
	color: #10222B;
	margin: 12px 0 0;
	text-wrap: pretty;
}
.patrocinador-promo__descricao {
	font-size: 16px;
	color: #6B4A10;
	margin-top: 12px;
	max-width: 560px;
	text-wrap: pretty;
}
.patrocinador-promo__validade {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	letter-spacing: 1px;
	color: #7A5410;
	margin-top: 10px;
}
.patrocinador-promo__senha-card {
	background: #10222B;
	border-radius: 22px;
	padding: 28px;
	text-align: center;
}
.patrocinador-promo__senha-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.patrocinador-promo__senha-valor {
	font-family: "JetBrains Mono", monospace;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 3px;
	color: #FFFFFF;
	margin-top: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	padding: 14px 10px;
}
.patrocinador-promo__senha-nota {
	font-size: 13px;
	color: #BBD8E3;
	margin-top: 14px;
	text-wrap: pretty;
}

.patrocinador-sobre {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 32px 20px;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 34px;
	align-items: start;
}
.patrocinador-sobre__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}
.patrocinador-sobre__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -1.4px;
	color: #10222B;
	margin: 12px 0 0;
}
.patrocinador-sobre__paragrafo {
	font-size: 17px;
	line-height: 1.6;
	color: #3A4E5A;
	margin-top: 16px;
	text-wrap: pretty;
}

.patrocinador-destaques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 30px;
}
.patrocinador-destaque {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
}
.patrocinador-destaque__rotulo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.patrocinador-destaque__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
	margin-top: 10px;
	color: #10222B;
}
.patrocinador-destaque__descricao {
	font-size: 14px;
	color: #52697A;
	margin-top: 8px;
	text-wrap: pretty;
}

.patrocinador-programacao {
	background: #1F3A4D;
	border-radius: 22px;
	padding: 30px;
	margin-top: 30px;
}
.patrocinador-programacao__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.patrocinador-programacao__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -1px;
	color: #FFFFFF;
	margin: 10px 0 0;
}
.patrocinador-programacao__lista {
	display: grid;
	gap: 1px;
	margin-top: 20px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	overflow: hidden;
}
.patrocinador-programacao__item {
	background: #1F3A4D;
	padding: 15px 18px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.patrocinador-programacao__nome {
	color: #FFFFFF;
	font-weight: 700;
	font-size: 15px;
}
.patrocinador-programacao__horario {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #8FC2D6;
	white-space: nowrap;
}

.patrocinador-sobre__sidebar {
	display: grid;
	gap: 18px;
}
.patrocinador-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
}
.patrocinador-card__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}
.patrocinador-contato-lista {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}
.patrocinador-contato-item__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #8A9AA6;
}
.patrocinador-contato-item__valor {
	font-size: 15px;
	color: #3A4E5A;
	margin-top: 5px;
	text-wrap: pretty;
}
.patrocinador-contato-item__valor--destaque {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
	color: #10222B;
}
.patrocinador-contato-links {
	display: grid;
	gap: 7px;
	margin-top: 7px;
	font-size: 15px;
	font-weight: 600;
	color: #2E7C9E;
}
.patrocinador-contato-divisor {
	height: 1px;
	background: #F0E4D5;
}
.patrocinador-mapa-placeholder {
	height: 240px;
	border-radius: 16px;
	margin-top: 18px;
	background: repeating-linear-gradient(135deg, #EFE2D2 0 10px, #E4D3BF 10px 20px);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A7A66;
	text-align: center;
	padding: 12px;
	box-sizing: border-box;
}
.patrocinador-card__texto {
	font-size: 14px;
	color: #52697A;
	margin-top: 14px;
	text-wrap: pretty;
}

.patrocinador-cta-final {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px 32px 56px;
}
.patrocinador-cta-final__card {
	background: #FFF1D8;
	border: 1px solid #F0DCB4;
	border-radius: 22px;
	padding: 30px 34px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.patrocinador-cta-final__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -1.1px;
	color: #10222B;
	margin: 0;
}
.patrocinador-cta-final__texto {
	font-size: 15px;
	color: #6B4A10;
	margin-top: 6px;
	text-wrap: pretty;
}
.patrocinador-cta-final__botao {
	background: #10222B;
	color: #E8A93A;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
}
.patrocinador-cta-final__botao:hover {
	background: #1F3A4D;
}

/* ---------------------------------------------------------------------
 * Página de Locutor/Colunista (single-pessoa-radio.php)
 * ------------------------------------------------------------------- */
.pessoa-breadcrumb {
	background: #1F3A4D;
	padding: 20px 32px 0;
}
.pessoa-breadcrumb__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: #8FC2D6;
}
.pessoa-breadcrumb__link {
	color: #E8A93A;
}

.pessoa-hero {
	background: #1F3A4D;
	padding: 34px 32px 56px;
}
.pessoa-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: center;
}
.pessoa-hero__foto {
	width: 300px;
	height: 340px;
	border-radius: 26px;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #2B4C61;
	background-image: repeating-linear-gradient(135deg, #2B4C61 0 10px, #244252 10px 20px);
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 14px;
}
.pessoa-hero__foto-fallback {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: #8FC2D6;
}
.pessoa-hero__selo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: #E8A93A;
	color: #1F3A4D;
	padding: 8px 16px;
	border-radius: 999px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2px;
	font-weight: 700;
}
.pessoa-hero__nome {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 62px;
	line-height: 0.92;
	letter-spacing: -2.8px;
	color: #FFFFFF;
	margin: 16px 0 0;
	text-wrap: pretty;
}
.pessoa-hero__nome-coluna {
	font-size: 15px;
	font-family: "JetBrains Mono", monospace;
	letter-spacing: 1.5px;
	color: #E8A93A;
	margin-top: 14px;
}
.pessoa-hero__apresentacao {
	font-size: 18px;
	color: #DCEEF4;
	margin-top: 14px;
	max-width: 620px;
	text-wrap: pretty;
}
.pessoa-hero__apresentacao strong {
	color: #FFFFFF;
}
.pessoa-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 24px;
}
.pessoa-hero__badge {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #FFFFFF;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.pessoa-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}
.pessoa-hero__cta-principal {
	background: #E8A93A;
	color: #1F3A4D;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}
.pessoa-hero__cta-principal:hover {
	background: #F4C264;
}
.pessoa-hero__rede {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #FFFFFF;
	cursor: pointer;
}
.pessoa-hero__rede:hover {
	border-color: #FFFFFF;
}

.pessoa-destaque {
	background: #E8A93A;
	padding: 40px 32px;
}
.pessoa-destaque__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: center;
}
.pessoa-destaque__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #6B4A10;
}
.pessoa-destaque__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 42px;
	line-height: 1;
	letter-spacing: -1.8px;
	color: #10222B;
	margin: 12px 0 0;
	text-wrap: pretty;
}
.pessoa-destaque__descricao {
	font-size: 16px;
	color: #6B4A10;
	margin-top: 12px;
	max-width: 560px;
	text-wrap: pretty;
}
.pessoa-destaque__contato {
	background: #10222B;
	border-radius: 22px;
	padding: 28px;
	text-align: center;
	/* Item de grid (.pessoa-destaque__inner) — sem isso, um texto sem
	   espaço (link/URL colado no campo "apoio" no admin) força a coluna a
	   crescer além da largura disponível em vez de quebrar linha. */
	min-width: 0;
}
.pessoa-destaque__contato-rotulo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.pessoa-destaque__contato-valor {
	font-family: "JetBrains Mono", monospace;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.5px;
	color: #FFFFFF;
	margin-top: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	padding: 14px 10px;
	word-break: break-word;
}
.pessoa-destaque__contato-apoio {
	font-size: 13px;
	color: #BBD8E3;
	margin-top: 14px;
	text-wrap: pretty;
	/* text-wrap:pretty só melhora a quebra ENTRE palavras — uma URL/link
	   colado sem espaço (caso real: link do YouTube num campo de "apoio")
	   não tem onde quebrar e estoura a largura da caixa. overflow-wrap
	   força a quebra mesmo dentro de uma palavra/token único, só quando
	   não há alternativa (não quebra palavras normais no meio à toa). */
	overflow-wrap: anywhere;
}

.pessoa-corpo {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 32px 56px;
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 34px;
	align-items: start;
}
.pessoa-bio__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}
.pessoa-bio__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -1.4px;
	color: #10222B;
	margin: 12px 0 0;
}
.pessoa-bio__paragrafo {
	font-size: 17px;
	line-height: 1.6;
	color: #3A4E5A;
	margin-top: 16px;
	text-wrap: pretty;
}
.pessoa-bio__citacao {
	border-left: 3px solid #E8A93A;
	padding-left: 20px;
	margin-top: 26px;
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -0.8px;
	color: #10222B;
	text-wrap: pretty;
}

.pessoa-bio__destaques {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 30px;
}
.pessoa-bio-destaque {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
}
.pessoa-bio-destaque__rotulo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.pessoa-bio-destaque__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
	margin-top: 10px;
	color: #10222B;
}
.pessoa-bio-destaque__descricao {
	font-size: 14px;
	color: #52697A;
	margin-top: 8px;
	text-wrap: pretty;
}

.pessoa-programacao {
	background: #1F3A4D;
	border-radius: 22px;
	padding: 30px;
	margin-top: 30px;
}
.pessoa-programacao__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.pessoa-programacao__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -1px;
	color: #FFFFFF;
	margin: 10px 0 0;
}
.pessoa-programacao__lista {
	display: grid;
	gap: 1px;
	margin-top: 20px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	overflow: hidden;
}
.pessoa-programacao__item {
	background: #1F3A4D;
	padding: 15px 18px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.pessoa-programacao__nome {
	color: #FFFFFF;
	font-weight: 700;
	font-size: 15px;
}
.pessoa-programacao__horario {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #8FC2D6;
	white-space: nowrap;
}
.pessoa-programacao__botao {
	display: inline-block;
	margin-top: 22px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #FFFFFF;
	padding: 13px 22px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}
.pessoa-programacao__botao:hover {
	border-color: #FFFFFF;
}

.pessoa-sidebar {
	display: grid;
	gap: 18px;
}
.pessoa-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
}
.pessoa-card__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 2.5px;
	color: #E8663C;
}
.pessoa-card__lista {
	display: grid;
	gap: 16px;
	margin-top: 18px;
}
.pessoa-card__divisor {
	height: 1px;
	background: #F0E4D5;
}
.pessoa-item__rotulo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #8A9AA6;
}
.pessoa-item__valor {
	font-size: 15px;
	font-weight: 600;
	color: #10222B;
	margin-top: 5px;
	text-wrap: pretty;
	/* Mesmo risco do "PRESS & CONTATO" (pessoa-destaque__contato-apoio) —
	   este campo também é preenchido livremente no admin e pode receber
	   um link/URL sem espaço, que sem isso estoura a largura do card. */
	overflow-wrap: anywhere;
}
.pessoa-item__valor--link {
	color: #2E7C9E;
	cursor: pointer;
}

.pessoa-toca-sempre__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.pessoa-toca-sempre__indice {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #C0A985;
	flex-shrink: 0;
}
.pessoa-toca-sempre__musica {
	font-weight: 700;
	font-size: 15px;
	color: #10222B;
}
.pessoa-toca-sempre__artista {
	font-size: 13px;
	color: #8A9AA6;
	margin-top: 2px;
}

.pessoa-coluna-item {
	display: grid;
	gap: 6px;
	cursor: pointer;
}
.pessoa-coluna-item__meta {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #C0A985;
}
.pessoa-coluna-item__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	color: #10222B;
	text-wrap: pretty;
	display: block;
}

/* ---------------------------------------------------------------------
 * Página de Programação (page-programacao.php)
 * Hero "TOCANDO AGORA" e sidebar (TOCOU AGORA / ESPAÇO DO PARCEIRO)
 * reproduzidos como no design de referência (novo-site-design/
 * programacao.html), estáticos — só as abas de dia + grade de horários
 * (.programacao-dias / .item-programa) são dinâmicas nesta fase. Valores
 * abaixo (hex/px/grid-template-columns) copiados literalmente do HTML
 * original, sem aproximação.
 * ------------------------------------------------------------------- */
.programacao-hero {
	background: #1F3A4D;
	padding: 48px 32px 56px;
}
.programacao-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}
.programacao-hero__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 3px;
	color: #E8A93A;
}
.programacao-hero__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 52px;
	line-height: 0.95;
	letter-spacing: -2px;
	color: #FFFFFF;
	margin: 14px 0 0;
}
.programacao-hero__meta {
	font-size: 17px;
	color: #BBD8E3;
	margin-top: 12px;
}
.programacao-hero__player {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 32px;
}
.programacao-hero__play {
	width: 84px;
	height: 84px;
	border-radius: 999px;
	background: #E8A93A;
	color: #1F3A4D;
	display: grid;
	place-items: center;
	font-size: 28px;
	cursor: pointer;
	flex-shrink: 0;
}
.programacao-hero__eq {
	flex: 1;
	height: 44px;
	display: flex;
	align-items: flex-end;
	gap: 3px;
}
.programacao-hero__eq i {
	width: 5px;
	border-radius: 2px;
	background: #8FC2D6;
	display: block;
	transform-origin: bottom;
	animation: programacao-om-eq 0.9s ease-in-out infinite;
}
.programacao-hero__eq i.acento {
	background: #E8A93A;
}
.programacao-hero__eq i.acento2 {
	background: #E8663C;
}
/* Duração/atraso de cada barra — valores literais do design de
   referência (novo-site-design/, bloco [data-eq] > div:nth-child(n)),
   pra rodar de forma "orgânica" (bpm ligeiramente diferente por barra)
   em vez de todas subindo/descendo em sincronia perfeita. */
.programacao-hero__eq i:nth-child(1) { animation-duration: 1.1s; animation-delay: -0.2s; }
.programacao-hero__eq i:nth-child(2) { animation-duration: 0.72s; animation-delay: -0.5s; }
.programacao-hero__eq i:nth-child(3) { animation-duration: 0.95s; animation-delay: -0.1s; }
.programacao-hero__eq i:nth-child(4) { animation-duration: 0.62s; animation-delay: -0.35s; }
.programacao-hero__eq i:nth-child(5) { animation-duration: 1.25s; animation-delay: -0.6s; }
.programacao-hero__eq i:nth-child(6) { animation-duration: 0.82s; animation-delay: -0.15s; }
.programacao-hero__eq i:nth-child(7) { animation-duration: 0.68s; animation-delay: -0.45s; }
.programacao-hero__eq i:nth-child(8) { animation-duration: 1.05s; animation-delay: -0.25s; }
.programacao-hero__eq i:nth-child(9) { animation-duration: 0.78s; animation-delay: -0.55s; }
.programacao-hero__eq i:nth-child(10) { animation-duration: 1.15s; animation-delay: -0.05s; }
.programacao-hero__eq i:nth-child(11) { animation-duration: 0.66s; animation-delay: -0.4s; }
.programacao-hero__eq i:nth-child(12) { animation-duration: 0.92s; animation-delay: -0.3s; }
@keyframes programacao-om-eq {
	0%, 100% { transform: scaleY(0.35); }
	50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.programacao-hero__eq i {
		animation: none;
	}
}
.programacao-hero__stream {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8FC2D6;
	margin-top: 12px;
	letter-spacing: 1px;
}
.programacao-hero__acoes {
	display: flex;
	gap: 10px;
	margin-top: 28px;
	flex-wrap: wrap;
}
.programacao-hero__acao {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	padding: 11px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.programacao-hero__foto {
	/* background-image em longhand (não o shorthand "background") de
	   propósito: quando há foto real (do programa no ar ou a padrão da
	   config), o PHP só sobrescreve style="background-image:url(...)"
	   inline — precisa sobrar exatamente esse valor sozinho pra herdar
	   size/position daqui, mesmo truque já usado em .banner-patrocinador
	   e .card-colunista__foto. */
	border-radius: 24px;
	height: 380px;
	background-color: transparent;
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 12px, rgba(255, 255, 255, 0.07) 12px 24px);
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #E4F0F5;
	text-align: center;
}

.programacao-corpo {
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 32px 80px;
}
.programacao-corpo__inner {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 32px;
	align-items: start;
}

.programacao-grade-head {
	/* Sempre empilhado (título em cima, dias embaixo) em qualquer largura de
	   tela — antes era lado a lado no desktop e só empilhava com
	   flex-wrap natural (imprevisível: dependendo da largura exata, os
	   dias quebravam pra uma 2ª "linha" mal alinhada em vez de ficarem
	   sempre organizados logo abaixo do título). */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.programacao-grade-head__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 36px;
	letter-spacing: -1.4px;
	margin: 0;
}
.programacao-dias {
	display: flex;
	gap: 6px;
}
.programacao-dias__item {
	background: #FFFFFF;
	color: #52697A;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.programacao-dias__item:hover {
	background: #F0E4D5;
}
.programacao-dias__item--ativo,
.programacao-dias__item--ativo:hover {
	background: #1F3A4D;
	color: #FFFFFF;
}

.programacao-grade {
	display: grid;
	gap: 10px;
	margin-top: 24px;
}

/* Efeito de entrada dos itens da grade — existia no CSS do design de
   referência (novo-site-design/programacao.html) mas nunca tinha sido
   portado pro tema; agora é reaproveitado pra troca de dia via AJAX
   (assets/js/programacao.js), que alterna data-grade entre "a"/"b" a
   cada troca pra garantir o replay. Valores (duração, easing, atrasos
   por item) copiados literais do design original. */
@keyframes programacao-om-grade-a {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to { opacity: 1; transform: none; }
}
@keyframes programacao-om-grade-b {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to { opacity: 1; transform: none; }
}
[data-grade] > div {
	animation-duration: 0.44s;
	animation-timing-function: cubic-bezier(0.22, 0.9, 0.28, 1);
	animation-fill-mode: both;
}
[data-grade="a"] > div { animation-name: programacao-om-grade-a; }
[data-grade="b"] > div { animation-name: programacao-om-grade-b; }
[data-grade] > div:nth-child(1) { animation-delay: 0s; }
[data-grade] > div:nth-child(2) { animation-delay: 0.05s; }
[data-grade] > div:nth-child(3) { animation-delay: 0.1s; }
[data-grade] > div:nth-child(4) { animation-delay: 0.15s; }
[data-grade] > div:nth-child(5) { animation-delay: 0.2s; }
[data-grade] > div:nth-child(6) { animation-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
	[data-grade] > div { animation: none !important; }
}

.item-programa {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 18px 22px;
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 18px;
	align-items: center;
	box-shadow: 0 2px 0 #E8DACA;
}
.item-programa__horario {
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	color: #8A9AA6;
}
.item-programa__nome {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
	color: #10222B;
}
.item-programa__descricao {
	font-size: 13px;
	color: #6B8494;
	margin-top: 3px;
}
.item-programa__badge {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	background: #10222B;
	color: #E8A93A;
	padding: 6px 10px;
	border-radius: 5px;
}

/* Item "no ar" — mesmas classes acima, só sobrescrevendo o que muda
   (background, cor do horário/descrição, terceira coluna pro badge, sem
   box-shadow) — valores exatos do bloco ativo em programacao.html. */
.item-programa--ativo {
	background: #E8A93A;
	grid-template-columns: 76px 1fr auto;
	box-shadow: none;
}
.item-programa--ativo .item-programa__horario {
	color: #6B4A10;
	font-weight: 500;
}
.item-programa--ativo .item-programa__descricao {
	color: #6B4A10;
}

.programacao-vazio {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 32px 22px;
	text-align: center;
	box-shadow: 0 2px 0 #E8DACA;
}
.programacao-vazio__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.programacao-vazio__texto {
	font-size: 15px;
	color: #52697A;
	margin-top: 10px;
}

.programacao-sidebar {
	display: grid;
	gap: 16px;
}
.programacao-sidebar-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
}
.programacao-sidebar-card__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8663C;
}
.programacao-sidebar-card__eyebrow--neutro {
	color: #8A9AA6;
}
.programacao-tocou-lista {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}
.programacao-tocou-item {
	display: flex;
	gap: 12px;
	align-items: center;
}
.programacao-tocou-item__capa {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	flex-shrink: 0;
}
.programacao-tocou-item__nome {
	font-weight: 700;
	font-size: 14px;
}
.programacao-tocou-item__hora {
	font-size: 12px;
	color: #8A9AA6;
}
.programacao-anuncio {
	/* aspect-ratio em vez de height fixo, mesmo tratamento do banner
	   small da home (seção 14.13) — agora que pode ser o banner real de
	   um patrocinador, não só o placeholder estático original. */
	aspect-ratio: 5 / 3;
	border-radius: 14px;
	margin-top: 14px;
	background: repeating-linear-gradient(135deg, #EFE2D2 0 10px, #E4D3BF 10px 20px);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #6B4A10;
	text-align: center;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Página de Notícias (page-noticias.php). Design de referência:
 * novo-site-design/noticias.html. Filtro/busca/paginação funcionam sem
 * JS (links reais) e via AJAX (assets/js/noticias.js) — mesmas classes
 * pros dois casos, já que o HTML vem da mesma função PHP.
 * ------------------------------------------------------------------- */
.noticias-hero {
	background: #1F3A4D;
	padding: 40px 32px 44px;
}
.noticias-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
}
.noticias-hero__breadcrumb {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 1px;
	color: #6E8B9B;
}
.noticias-hero__breadcrumb a {
	color: #E8A93A;
}
.noticias-hero__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: 16px;
}
.noticias-hero__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 56px;
	line-height: 0.94;
	letter-spacing: -2.4px;
	color: #FFFFFF;
	margin: 0;
}
.noticias-hero__subtitulo {
	font-size: 16px;
	color: #8FC2D6;
	margin-top: 12px;
	max-width: 520px;
	text-wrap: pretty;
}

.noticias-busca {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 12px 18px;
	flex-shrink: 0;
}
.noticias-busca__botao {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 14px;
	color: #8FC2D6;
	cursor: pointer;
	line-height: 1;
}
.noticias-busca__botao:hover {
	color: #E4F0F5;
}
.noticias-busca__input {
	background: transparent;
	border: 0;
	outline: 0;
	font-family: Figtree, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	width: 220px;
}
.noticias-busca__input::placeholder {
	color: #8FC2D6;
}

.filtro-categorias {
	background: #FFFFFF;
	border-bottom: 1px solid #EFE3D2;
	position: sticky;
	top: 76px;
	z-index: 20;
}
.filtro-categorias__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pill-categoria {
	background: #FBF3E7;
	color: #52697A;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: 0;
	text-decoration: none;
	font-family: Figtree, sans-serif;
}
.pill-categoria:hover {
	/* Sem isso, o botão herdava a cor do "a:hover" global (#1F3A4D) — no
	   pill normal isso não fazia diferença visual, mas no pill ativo
	   (fundo #1F3A4D) deixava o texto invisível: cor do texto = cor do
	   fundo. */
	color: #52697A;
}
.pill-categoria--ativa {
	background: #1F3A4D;
	color: #FFFFFF;
	/* Borda transparente reservada aqui (em vez de só no :hover) pra trocar
	   só a cor no hover, sem crescer a caixa 2px e "pular" o layout — o
	   padding já compensa a largura extra da borda em relação ao pill
	   normal (que não tem borda nenhuma). */
	padding: 8px 15px;
	border: 1px solid transparent;
}
.pill-categoria--ativa:hover {
	/* Pedido explícito: no hover do pill ativo, mantém o MESMO fundo (não
	   escurece/clareia) e só acrescenta uma borda como indicação de hover. */
	background: #1F3A4D;
	color: #FFFFFF;
	border-color: #E8A93A;
}
.filtro-categorias__contador {
	margin-left: auto;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
}

.noticias-corpo {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 32px 80px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 36px;
	align-items: start;
}
.noticias-conteudo {
	min-width: 0;
}

.card-manchete {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
	color: inherit;
}
.card-manchete__imagem {
	min-height: 340px;
	background-color: #7FB6C9;
	background-image: repeating-linear-gradient(135deg, #7FB6C9 0 12px, #A9CFDC 12px 24px);
	background-size: cover;
	background-position: center;
}
.card-manchete__body {
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.card-manchete__topo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.card-manchete__badge {
	background: #E8663C;
	color: #FFFFFF;
	padding: 4px 10px;
	border-radius: 5px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
}
.card-manchete__meta {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
}
.card-manchete__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 34px;
	line-height: 1.08;
	letter-spacing: -1.3px;
	margin: 16px 0 0;
	text-wrap: pretty;
	color: #10222B;
}
.card-manchete__resumo {
	font-size: 16px;
	color: #52697A;
	margin-top: 14px;
	text-wrap: pretty;
}
.card-manchete__link {
	font-weight: 800;
	font-size: 14px;
	color: #2E7C9E;
	margin-top: 20px;
}

.lista-noticias {
	display: grid;
	gap: 14px;
	margin-top: 24px;
}
.card-noticia-lista {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 18px;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 22px;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
	color: inherit;
}
.card-noticia-lista__imagem {
	height: 132px;
	border-radius: 14px;
	background-color: #EFE0CB;
	background-image: repeating-linear-gradient(135deg, #EFE0CB 0 10px, #E2CFB3 10px 20px);
	background-size: cover;
	background-position: center;
}
.card-noticia-lista__body {
	padding: 4px 6px 4px 0;
}
.card-noticia-lista__meta {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #E8663C;
}
.card-noticia-lista__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.14;
	letter-spacing: -0.6px;
	margin: 9px 0 0;
	text-wrap: pretty;
	color: #10222B;
}
.card-noticia-lista__resumo {
	font-size: 14px;
	color: #6B8494;
	margin-top: 8px;
	text-wrap: pretty;
}

.card-boletim-mar {
	background: #1F3A4D;
	border-radius: 20px;
	padding: 24px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: #FFFFFF;
}
.card-boletim-mar__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.card-boletim-mar__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 21px;
	margin-top: 8px;
}
.card-boletim-mar__meta {
	font-size: 13px;
	color: #8FC2D6;
	margin-top: 4px;
}
.card-boletim-mar__play {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #E8A93A;
	color: #1F3A4D;
	display: grid;
	place-items: center;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
	/* Virou <button> de verdade (era <div>) — reseta o visual padrão de
	   botão do navegador, mantendo a mesma aparência de antes. */
	border: 0;
	padding: 0;
	font-family: inherit;
	transition: transform 0.18s, background 0.18s, color 0.18s;
}
.card-boletim-mar__play:hover {
	transform: scale(1.06);
	background: #1F3A4D;
	color: #FFFFFF;
}

.noticias-vazio {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 40px 22px;
	text-align: center;
	box-shadow: 0 2px 0 #E8DACA;
}
.noticias-vazio__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.noticias-vazio__texto {
	font-size: 15px;
	color: #52697A;
	margin-top: 10px;
}

.paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 32px 0 0;
}
.paginacao__item {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: #FFFFFF;
	color: #52697A;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
}
.paginacao__item--ativo {
	background: #1F3A4D;
	color: #FFFFFF;
	box-shadow: none;
}
.paginacao__reticencias {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #8A9AA6;
	margin: 0 6px;
}
.paginacao__proxima {
	background: #FFFFFF;
	color: #2E7C9E;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
}

.sidebar-noticias {
	display: grid;
	gap: 16px;
	position: sticky;
	/* --noticias-sidebar-top é calculado em JS (assets/js/noticias.js),
	   medindo a altura real do header + da barra de pills (que muda de 1
	   pra 2 linhas dependendo da largura da tela) — o valor fixo aqui é só
	   o fallback pra quando o JS ainda não rodou. */
	top: var(--noticias-sidebar-top, 200px);
}
.widget-mar-agora {
	background: #2E7C9E;
	border-radius: 20px;
	padding: 22px;
	color: #FFFFFF;
}
.widget-mar-agora__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #DCEEF4;
}
.widget-mar-agora__valor {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 40px;
	letter-spacing: -2px;
	margin-top: 8px;
}
.widget-mar-agora__meta {
	font-size: 13px;
	color: #DCEEF4;
}

/* ---------------------------------------------------------------------
 * "Boletim do Mar" em ÁUDIO (page-noticias.php, sidebar, logo abaixo de
 * "MAR AGORA") — diferente do widget acima, que é só dado numérico
 * automático. O play (.widget-boletim-audio__play, [data-boletim-play])
 * aciona o player flutuante da rádio (assets/js/player.js), não um áudio
 * isolado.
 * ------------------------------------------------------------------- */
.widget-boletim-audio {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
	/*
	 * Achado real (2026-09-08, confirmado medindo a página de verdade num
	 * Edge headless — layout de CSS não dava pra confirmar só lendo o
	 * código): item direto de um CSS grid (.sidebar-noticias, o pai) tem
	 * min-width:auto por padrão — igual ao mesmo problema em flex items,
	 * só que um nível acima aqui. Sem isso, o texto sem quebra
	 * (white-space:nowrap, mais embaixo) empurrava este card pra ~413px
	 * de largura mínima, e como .sidebar-noticias é um grid de coluna
	 * única, TODOS os widgets da coluna (MAR AGORA, Espaço do parceiro
	 * etc.) eram esticados junto — estourando a largura da página inteira
	 * (documentElement.scrollWidth > innerWidth). min-width:0 nos
	 * elementos de texto lá dentro (.widget-boletim-audio__titulo/__meta)
	 * sozinho NÃO bastou — precisa também aqui, no próprio item do grid.
	 */
	min-width: 0;
}
.widget-boletim-audio__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8663C;
}
.widget-boletim-audio__play {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin-top: 14px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.widget-boletim-audio__icone {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #E8A93A;
	color: #10222B;
	display: grid;
	place-items: center;
	font-size: 14px;
	transition: transform 0.18s, background 0.18s, color 0.18s;
}
.widget-boletim-audio__play:hover .widget-boletim-audio__icone {
	transform: scale(1.06);
	background: #1F3A4D;
	color: #FFFFFF;
}
.widget-boletim-audio__texto {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.widget-boletim-audio__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: #10222B;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Achado real (2026-09-08): sem isso, um título/descrição sem espaço
	   nenhum pra quebrar (por causa do white-space:nowrap acima) força o
	   próprio elemento a crescer até o tamanho do texto inteiro — e como
	   ele é filho de um flex column (.widget-boletim-audio__texto), isso
	   empurra a coluna INTEIRA da sidebar mais larga que os 300px
	   previstos (grid-template-columns do .noticias-corpo), arrastando
	   TODOS os widgets da sidebar junto (mesma faixa/coluna do grid) e
	   estourando a largura da página inteira. min-width:0 no pai
	   (.widget-boletim-audio__texto) não é suficiente sozinho — cada
	   elemento com white-space:nowrap precisa do próprio min-width:0 pra
	   realmente poder encolher abaixo do tamanho do seu texto.
	*/
	min-width: 0;
}
.widget-boletim-audio__meta {
	font-size: 12px;
	color: #52697A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.widget-mais-lidas {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
}
.widget-mais-lidas__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.widget-mais-lidas__lista {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}
.widget-mais-lidas__item {
	display: flex;
	gap: 12px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.widget-mais-lidas__numero {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 22px;
	color: #E8A93A;
	line-height: 1;
}
.widget-mais-lidas__titulo {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.25;
}

.widget-espaco-parceiro {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 22px;
	box-shadow: 0 2px 0 #E8DACA;
}
.widget-espaco-parceiro__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.widget-espaco-parceiro__anuncio {
	/* aspect-ratio (5:3, mesma proporção recomendada do banner small — ver
	   CONTEXT.md seção 16) em vez de height fixo — mesmo ajuste já feito no
	   banner small da home (.card-parceiro__imagem) e da Programação
	   (.programacao-anuncio): altura fixa cortava a imagem quando a
	   proporção real do banner não batia com a caixa. */
	aspect-ratio: 5 / 3;
	border-radius: 14px;
	margin-top: 14px;
	background: repeating-linear-gradient(135deg, #EFE0CB 0 10px, #E2CFB3 10px 20px);
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #7A5410;
	text-align: center;
	text-decoration: none;
}

.widget-viu-algo {
	background: #10222B;
	border-radius: 20px;
	padding: 22px;
	color: #FFFFFF;
}
.widget-viu-algo__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
}
.widget-viu-algo__texto {
	font-size: 13px;
	color: #8A9AA6;
	margin-top: 6px;
}
.widget-viu-algo__botao {
	margin-top: 14px;
	background: #E8A93A;
	color: #10222B;
	text-align: center;
	padding: 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
	display: block;
	text-decoration: none;
}

/* Skeleton loading (shimmer/pulso) — mostrado por assets/js/noticias.js
   enquanto o fetch AJAX não responde, nas dimensões dos cards reais que
   serão substituídos. */
@keyframes noticias-skeleton-pulso {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 1; }
}
.skeleton-bloco {
	background: #EFE3D2;
	border-radius: 8px;
	animation: noticias-skeleton-pulso 1.2s ease-in-out infinite;
}
.skeleton-manchete {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	box-shadow: 0 2px 0 #E8DACA;
}
.skeleton-manchete .skeleton-bloco--imagem {
	min-height: 340px;
	border-radius: 0;
}
.skeleton-manchete__body {
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.skeleton-card-noticia {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 18px;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 22px;
	box-shadow: 0 2px 0 #E8DACA;
	margin-top: 14px;
}
.skeleton-card-noticia .skeleton-bloco--imagem {
	height: 132px;
}
.skeleton-card-noticia__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
	.skeleton-bloco {
		animation: none;
		opacity: 0.8;
	}
}

/* ---------------------------------------------------------------------
 * Página de notícia individual (single.php). Design de referência:
 * novo-site-design/noticia.html. Template único pra TODOS os posts
 * nativos publicados — nada aqui presume conteúdo específico do post de
 * exemplo do design.
 * ------------------------------------------------------------------- */
.noticia-breadcrumb-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 32px 0;
}
.noticia-breadcrumb {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	letter-spacing: 1px;
}
.noticia-breadcrumb a {
	color: #2E7C9E;
}

.noticia-layout {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 32px 80px;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 40px;
	align-items: start;
}
.noticia-coluna {
	min-width: 0;
}

.noticia-badges-topo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.noticia-badge-categoria {
	display: inline-block;
	background: #E8A93A;
	padding: 5px 12px;
	border-radius: 6px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #1F3A4D;
	text-decoration: none;
}
.noticia-badge-manchete {
	display: inline-block;
	background: #E8663C;
	color: #FFFFFF;
	padding: 5px 12px;
	border-radius: 6px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
}
.noticia-titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 54px;
	line-height: 0.98;
	letter-spacing: -2.2px;
	margin: 18px 0 0;
	max-width: 820px;
	text-wrap: pretty;
	color: #10222B;
}
.noticia-lead {
	font-size: 21px;
	color: #52697A;
	margin-top: 20px;
	max-width: 760px;
	line-height: 1.45;
	text-wrap: pretty;
}

.noticia-meta-autor {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	padding: 16px 0;
	border-top: 1px solid #E8DACA;
	border-bottom: 1px solid #E8DACA;
	flex-wrap: wrap;
}
.noticia-meta-autor__avatar {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background-color: #CFE2EA;
	background-image: repeating-linear-gradient(135deg, #CFE2EA 0 8px, #B4D2DE 8px 16px);
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	display: block;
}
.noticia-meta-autor__info {
	flex: 1;
	min-width: 160px;
}
.noticia-meta-autor__nome {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #10222B;
	text-decoration: none;
}
.noticia-meta-autor__dados {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	margin-top: 2px;
}

.noticia-share {
	display: flex;
	gap: 8px;
}
.noticia-share__botao {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid #DCCDBB;
	display: grid;
	place-items: center;
	font-size: 11px;
	color: #52697A;
	cursor: pointer;
	background: none;
	padding: 0;
	font-family: "JetBrains Mono", monospace;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.noticia-share__botao:hover {
	border-color: #52697A;
	color: #1F3A4D;
}
.noticia-share__botao--copiado {
	color: #2E7C9E;
	border-color: #2E7C9E;
}

.noticia-imagem-principal {
	height: 440px;
	border-radius: 22px;
	margin-top: 28px;
	background-color: #8FC2D6;
	background-image: repeating-linear-gradient(135deg, #8FC2D6 0 12px, #BBD8E3 12px 24px);
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #1F3A4D;
}
.noticia-credito-foto {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	margin-top: 10px;
}

.noticia-corpo {
	max-width: 700px;
	margin-top: 36px;
	font-family: Figtree, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	color: #24363F;
}

/* ---------------------------------------------------------------------
 * Normalização do HTML gerado pelo editor do WordPress dentro de
 * .noticia-corpo. the_content() vem "cru" — sem nenhuma das classes que
 * o resto do tema usa — e posts reais têm anos de conteúdo variado, então
 * as regras cobrem elementos que nem aparecem no mock do design (tabela,
 * embed de vídeo, citação nativa do editor etc.), não só o que o design
 * mostrava.
 * ------------------------------------------------------------------- */

/* Espaçamento vertical uniforme (22px, mesmo "gap" do design) pra todo
   bloco de nível superior — cada elemento também entra na lista de
   "reset de margem" abaixo pra não somar com as regras mais específicas
   que vêm depois no arquivo (h2/h3/h4, blockquote, figure). */
.noticia-corpo p,
.noticia-corpo ul,
.noticia-corpo ol,
.noticia-corpo h2,
.noticia-corpo h3,
.noticia-corpo h4,
.noticia-corpo blockquote,
.noticia-corpo figure,
.noticia-corpo img,
.noticia-corpo table,
.noticia-corpo hr,
.noticia-corpo .wp-block-embed,
.noticia-corpo .noticia-citacao-destaque {
	margin: 0 0 22px;
}
.noticia-corpo > *:last-child {
	margin-bottom: 0;
}
.noticia-corpo > *:first-child {
	margin-top: 0;
}

.noticia-corpo p {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-wrap: pretty;
}

.noticia-corpo a {
	color: #2E7C9E;
	text-decoration: underline;
}
.noticia-corpo a:hover {
	color: #1F3A4D;
}

.noticia-corpo strong,
.noticia-corpo b {
	font-weight: 700;
}
.noticia-corpo em,
.noticia-corpo i {
	font-style: italic;
}

/* Subtítulos que o autor pode inserir dentro do texto — Archivo (mesma
   fonte dos títulos do resto do site), hierarquia menor que o
   .noticia-titulo principal (54px). margin-top pisa na regra genérica de
   cima de propósito (vem depois no arquivo = maior especificidade
   igual + ordem vence), pra dar respiro real acima de um subtítulo no
   meio do texto corrido. */
.noticia-corpo h2,
.noticia-corpo h3,
.noticia-corpo h4 {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	color: #10222B;
	margin-top: 40px;
	text-wrap: pretty;
}
.noticia-corpo h2 {
	font-size: 28px;
	letter-spacing: -0.6px;
}
.noticia-corpo h3 {
	font-size: 22px;
	letter-spacing: -0.4px;
}
.noticia-corpo h4 {
	font-size: 18px;
	letter-spacing: -0.2px;
}

.noticia-corpo ul,
.noticia-corpo ol {
	padding-left: 22px;
}
.noticia-corpo li {
	margin-bottom: 10px;
}
.noticia-corpo li:last-child {
	margin-bottom: 0;
}
.noticia-corpo ul {
	list-style: disc;
}
.noticia-corpo ol {
	list-style: decimal;
}
.noticia-corpo li::marker {
	color: #2E7C9E;
}

/* Citação NATIVA do editor (<blockquote>, o bloco "Citação" do Gutenberg)
   — discreta e claramente diferente do bloco .noticia-citacao-destaque
   (fundo dourado, o campo customizado citacao_destaque), pra não confundir
   as duas visualmente: aqui é só um recuo com borda lateral + itálico. */
.noticia-corpo blockquote {
	border-left: 4px solid #E8DACA;
	padding: 4px 0 4px 20px;
	font-style: italic;
	color: #52697A;
}
.noticia-corpo blockquote p {
	margin-bottom: 10px;
}
.noticia-corpo blockquote p:last-child {
	margin-bottom: 0;
}
/* O bloco "Citação" do Gutenberg tem uma variação nativa "grande"
   (is-large/is-style-large — escolhida pelo autor no editor, ícone de
   "aspas grandes") cujo CSS do WordPress (wp-block-library) usa 2 classes
   + tag no parágrafo (font-size:1.5em) — mais específico que a regra
   acima (1 classe + tag) e por isso vencia, deixando a citação bem maior
   e "pesada" do que o discreto pretendido aqui. Reforçando com a mesma
   combinação de classes pra sempre ganhar, independente da variação que
   o autor escolher no editor. */
.noticia-corpo blockquote.is-large p,
.noticia-corpo blockquote.is-style-large p {
	font-size: inherit;
	font-style: italic;
	line-height: inherit;
}

.noticia-corpo img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	display: block;
}
.noticia-corpo figure img {
	margin-bottom: 0;
}
.noticia-corpo figcaption {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	margin-top: 10px;
}

/* Embed de vídeo (YouTube, Instagram etc.) — cobre tanto um <iframe> cru
   colado direto (posts antigos, sem o wrapper do Gutenberg) quanto um
   iframe dentro do bloco de embed do editor: aspect-ratio já resolve os
   dois casos sem precisar de wrapper/padding-trick. */
.noticia-corpo iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 14px;
}

.noticia-corpo table {
	display: block;
	overflow-x: auto;
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	-webkit-overflow-scrolling: touch;
}
.noticia-corpo th,
.noticia-corpo td {
	padding: 10px 14px;
	border: 1px solid #E8DACA;
	text-align: left;
}
.noticia-corpo th {
	font-family: Archivo, sans-serif;
	font-weight: 700;
	color: #10222B;
	background: #FBF3E7;
}

.noticia-corpo hr {
	border: 0;
	border-top: 1px solid #E8DACA;
}

.noticia-corpo__vazio {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 2px 0 #E8DACA;
	color: #52697A;
	font-size: 15px;
}
.noticia-citacao-destaque {
	background: #E8A93A;
	border-radius: 18px;
	padding: 26px 28px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.24;
	letter-spacing: -0.6px;
	color: #10222B;
}

.noticia-audio-relacionado {
	max-width: 700px;
	margin-top: 32px;
	background: #1F3A4D;
	border-radius: 20px;
	padding: 26px 28px;
	color: #FFFFFF;
}
.noticia-audio-relacionado__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.noticia-audio-relacionado__linha {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
}
.noticia-audio-relacionado__play {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: #E8A93A;
	color: #1F3A4D;
	display: grid;
	place-items: center;
	font-size: 17px;
	cursor: pointer;
	flex-shrink: 0;
}
.noticia-audio-relacionado__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
}
.noticia-audio-relacionado__meta {
	font-size: 13px;
	color: #BBD8E3;
	margin-top: 3px;
}

.noticia-relacionadas {
	margin-top: 56px;
	max-width: 700px;
}
.noticia-relacionadas__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -1.2px;
	color: #10222B;
}
.noticia-relacionadas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 20px;
}
.card-relacionada {
	background: #FFFFFF;
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
	color: inherit;
	display: block;
}
.card-relacionada__imagem {
	height: 130px;
	background-color: #CFE2EA;
	background-image: repeating-linear-gradient(135deg, #CFE2EA 0 9px, #B4D2DE 9px 18px);
	background-size: cover;
	background-position: center;
}
.card-relacionada__titulo {
	padding: 16px 18px 20px;
	font-family: Archivo, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: #10222B;
}

.sidebar-noticia {
	display: grid;
	gap: 16px;
	position: sticky;
	top: 96px;
}

.widget-whatsapp-cta {
	background: #10222B;
	border-radius: 20px;
	padding: 22px;
	color: #FFFFFF;
}
.widget-whatsapp-cta__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
}
.widget-whatsapp-cta__texto {
	font-size: 13px;
	color: #8A9AA6;
	margin-top: 6px;
}
.widget-whatsapp-cta__botao {
	margin-top: 14px;
	background: #E8A93A;
	color: #10222B;
	text-align: center;
	padding: 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
	display: block;
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Página de Promoções (page-promocoes.php). Design de referência:
 * novo-site-design/promocoes.html. Abas Abertos/Encerrados/Ganhadores
 * trocam via AJAX (assets/js/promocoes.js) — mesmo padrão de skeleton de
 * page-noticias.php, mas com classes próprias (.skeleton-promocao-*):
 * os cards daqui têm proporções diferentes dos de Notícias (destaque
 * empilhado imagem-em-cima/corpo-embaixo, não lado a lado; mini-card
 * 96px de coluna de imagem, não 200px) — reaproveitar as classes de lá
 * exigiria overrides quase do tamanho de escrever classes novas, então
 * optei por classes dedicadas, só a animação de pulso (.skeleton-bloco)
 * é literalmente a mesma, reaproveitada direto.
 * ------------------------------------------------------------------- */
.promocoes-hero {
	background: #E8A93A;
	padding: 48px 32px;
}
.promocoes-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.promocoes-hero__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 60px;
	line-height: 0.92;
	letter-spacing: -2.6px;
	color: #10222B;
	margin: 0;
}
.promocoes-hero__subtitulo {
	font-size: 17px;
	color: #6B4A10;
	margin-top: 14px;
	max-width: 520px;
	text-wrap: pretty;
}

.widget-proximo-sorteio {
	background: #10222B;
	border-radius: 18px;
	padding: 20px 24px;
	color: #FFFFFF;
	flex-shrink: 0;
}
.widget-proximo-sorteio__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.widget-proximo-sorteio__data {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 34px;
	letter-spacing: -1.4px;
	margin-top: 6px;
}
.widget-proximo-sorteio__meta {
	font-size: 13px;
	color: #8A9AA6;
}

.promocoes-corpo {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 32px 80px;
}

.tabs-promocao {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.tab-promocao {
	background: #FFFFFF;
	color: #52697A;
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	font-family: Figtree, sans-serif;
}
.tab-promocao:hover {
	/* Mesmo cuidado de .pill-categoria (page-noticias.php, seção 19.6): sem
	   isso, o "a:hover" global deixava o texto ilegível quando a aba
	   ativa (fundo escuro) recebia hover. */
	color: #1F3A4D;
}
.tab-promocao--ativa {
	background: #1F3A4D;
	color: #FFFFFF;
	padding: 8px 15px;
	border: 1px solid transparent;
}
.tab-promocao--ativa:hover {
	background: #1F3A4D;
	color: #FFFFFF;
	border-color: #E8A93A;
}

.promocoes-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 24px;
	margin-top: 28px;
	align-items: start;
}

.card-promocao-destaque {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 2px 0 #E8DACA;
	display: block;
	text-decoration: none;
	color: inherit;
}
.card-promocao-destaque__imagem {
	height: 300px;
	background-color: #F0D6C0;
	background-image: repeating-linear-gradient(135deg, #F0D6C0 0 11px, #E3C3A8 11px 22px);
	background-size: cover;
	background-position: center;
}
.card-promocao-destaque__body {
	padding: 26px 28px 30px;
}
.card-promocao-destaque__topo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.card-promocao-destaque__badge {
	background: #E8663C;
	color: #FFFFFF;
	padding: 4px 10px;
	border-radius: 5px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
}
.card-promocao-destaque__prazo {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
}
.card-promocao-destaque__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 32px;
	letter-spacing: -1.2px;
	margin-top: 14px;
	text-wrap: pretty;
	color: #10222B;
}
.card-promocao-destaque__resumo {
	font-size: 16px;
	color: #52697A;
	margin-top: 10px;
	text-wrap: pretty;
}
.card-promocao-destaque__ganhadores {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: #10222B;
	margin-top: 14px;
	line-height: 1.6;
}
.card-promocao-destaque__acoes {
	display: flex;
	gap: 12px;
	margin-top: 22px;
	align-items: center;
	flex-wrap: wrap;
}
.card-promocao-destaque__cta {
	background: #2E7C9E;
	color: #FFFFFF;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	display: inline-block;
}
.card-promocao-destaque__cta:hover {
	background: #1F3A4D;
	color: #FFFFFF;
}
.card-promocao-destaque__inscritos {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
}
.card-promocao-destaque__parceiro {
	font-size: 13px;
	color: #6B4A10;
	margin-top: 10px;
}
.card-promocao-mini__parceiro {
	font-size: 12px;
	color: #6B4A10;
	margin-top: 4px;
}

/* ---------------------------------------------------------------------
 * single-promocao.php — promoção individual. Reaproveita .noticia-
 * breadcrumb-wrap/.noticia-breadcrumb (single.php) e .card-promocao-
 * destaque__badge/__prazo (topo com badge + "OFERECIMENTO ·") em vez de
 * duplicar essas regras.
 * ------------------------------------------------------------------- */

.promo-detalhe {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 32px 80px;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 36px;
	align-items: start;
}
.promo-detalhe__coluna {
	min-width: 0;
}
.promo-detalhe__topo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.promo-detalhe__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 48px;
	line-height: 0.98;
	letter-spacing: -2px;
	margin: 16px 0 0;
	text-wrap: pretty;
	color: #10222B;
}
.promo-detalhe__oferecimento {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}
.promo-detalhe__oferecimento-foto {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #F0E4D5;
}
.promo-detalhe__oferecimento-foto--generico {
	display: grid;
	place-items: center;
	color: #8A9AA6;
}
.promo-detalhe__oferecimento-texto {
	font-size: 13px;
	font-weight: 700;
	color: #6B4A10;
}
.promo-detalhe__oferecimento-texto a {
	color: #6B4A10;
	text-decoration: underline;
}
.promo-detalhe__oferecimento-texto a:hover {
	color: #10222B;
}
.promo-detalhe__subtitulo {
	font-size: 19px;
	color: #52697A;
	margin-top: 14px;
	max-width: 640px;
	text-wrap: pretty;
}
.promo-detalhe__imagem {
	height: 420px;
	border-radius: 22px;
	margin-top: 26px;
	background-color: #F0D6C0;
	background-image: repeating-linear-gradient(135deg, #F0D6C0 0 12px, #E3C3A8 12px 24px);
	background-size: cover;
	background-position: center;
	display: grid;
	place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: #7A5410;
}
.promo-detalhe__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 20px;
}
.promo-detalhe__stat {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 0 2px 0 #E8DACA;
	min-width: 0;
}
.promo-detalhe__stat-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.promo-detalhe__stat-valor {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
	margin-top: 8px;
	color: #10222B;
}

.promo-detalhe__secao {
	margin-top: 34px;
	max-width: 720px;
}
.promo-detalhe__secao-titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -1px;
	color: #10222B;
}
.promo-detalhe__passos {
	display: grid;
	gap: 14px;
	margin-top: 18px;
}
.promo-detalhe__passo {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.promo-detalhe__passo-num {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: #E8A93A;
	color: #1F3A4D;
	display: grid;
	place-items: center;
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 14px;
	flex-shrink: 0;
}
.promo-detalhe__passo-texto {
	font-size: 16px;
	color: #24363F;
	padding-top: 4px;
	text-wrap: pretty;
}

.promo-detalhe__resultado-lista {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: #10222B;
	margin-top: 16px;
	line-height: 1.7;
}

.promo-detalhe__sidebar {
	display: grid;
	gap: 16px;
	position: sticky;
	top: 96px;
}

.promo-detalhe__countdown {
	background: #1F3A4D;
	border-radius: 22px;
	padding: 26px;
	color: #FFFFFF;
	text-align: center;
}
.promo-detalhe__countdown-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8A93A;
}
.promo-detalhe__countdown-data {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 48px;
	line-height: 0.9;
	letter-spacing: -2px;
	margin-top: 10px;
}
.promo-detalhe__countdown-meta {
	font-size: 15px;
	color: #8FC2D6;
	margin-top: 8px;
}
.promo-detalhe__countdown-timer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 20px;
}
.promo-detalhe__countdown-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 10px 6px;
}
.promo-detalhe__countdown-valor {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 22px;
}
.promo-detalhe__countdown-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 9px;
	color: #8FC2D6;
	letter-spacing: 1px;
}

.promo-detalhe__form-card {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
}
.promo-detalhe__form-titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 24px;
	letter-spacing: -0.8px;
	color: #10222B;
}
.promo-detalhe__form-subtitulo {
	font-size: 14px;
	color: #6B8494;
	margin-top: 6px;
}
.promo-detalhe__form-campos {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}
.promo-detalhe__form-label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
	display: block;
	margin-bottom: 6px;
}
.promo-detalhe__form-input {
	width: 100%;
	box-sizing: border-box;
	background: #FBF3E7;
	border: 1px solid #E8DACA;
	border-radius: 10px;
	padding: 13px 14px;
	font-size: 14px;
	font-family: Figtree, sans-serif;
	color: #1F3A4D;
	outline: none;
}
.promo-detalhe__form-linha-dupla {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 12px;
}
/* ---------------------------------------------------------------------
 * Combobox buscável de cidade ("Quero participar", single-promocao.php +
 * assets/js/promocao-single.js) — substitui o <select> nativo (ruim pra
 * procurar entre ~5571 municípios) por um <input> de texto com uma lista
 * de sugestões flutuante, filtrada conforme o visitante digita.
 * ------------------------------------------------------------------- */
.combobox-cidade {
	position: relative;
}
.combobox-cidade__lista {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #FFFFFF;
	border: 1px solid #E8DACA;
	border-radius: 10px;
	box-shadow: 0 12px 28px -8px rgba(6, 20, 27, 0.25);
	max-height: 220px;
	overflow-y: auto;
}
.combobox-cidade__lista[hidden] {
	display: none;
}
.combobox-cidade__item {
	padding: 9px 14px;
	font-size: 14px;
	color: #1F3A4D;
	cursor: pointer;
}
.combobox-cidade__item:hover,
.combobox-cidade__item--ativo {
	background: #FBF3E7;
}
.promo-detalhe__form-feedback {
	font-size: 13px;
	min-height: 18px;
}
.promo-detalhe__form-feedback--sucesso {
	color: #2E7C4E;
}
.promo-detalhe__form-feedback--erro {
	color: #C0392B;
}
.promo-detalhe__form-submit {
	background: #E8A93A;
	color: #1F3A4D;
	text-align: center;
	padding: 16px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	border: 0;
	width: 100%;
}
.promo-detalhe__form-submit:hover {
	background: #F0B94A;
}
.promo-detalhe__form-submit:disabled {
	opacity: 0.6;
	cursor: default;
}
.promo-detalhe__form-footnote {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	color: #8A9AA6;
	text-align: center;
	letter-spacing: 0.5px;
}

.promo-detalhe__encerrada {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
	text-align: center;
}
.promo-detalhe__encerrada-titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 20px;
	margin-top: 14px;
	color: #10222B;
}
.promo-detalhe__encerrada-texto {
	font-size: 14px;
	color: #52697A;
	margin-top: 8px;
}
.promo-detalhe__encerrada-cta {
	display: inline-block;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 800;
	color: #2E7C9E;
	text-decoration: none;
}
.promo-detalhe__encerrada-cta:hover {
	color: #1F3A4D;
}

.promo-detalhe__ouca {
	background: #2E7C9E;
	border-radius: 22px;
	padding: 22px;
	color: #FFFFFF;
}
.promo-detalhe__ouca-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #DCEEF4;
}
.promo-detalhe__ouca-linha {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	text-decoration: none;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
.promo-detalhe__ouca-play {
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background: #E8A93A;
	color: #1F3A4D;
	display: grid;
	place-items: center;
	font-size: 17px;
	flex-shrink: 0;
}
.promo-detalhe__ouca-texto {
	font-size: 14px;
	color: #DCEEF4;
	text-wrap: pretty;
}

.promocoes-coluna-mini {
	display: grid;
	gap: 16px;
	align-content: start;
}
#promocoes-mini-lista {
	display: grid;
	gap: 16px;
}
.card-promocao-mini {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 16px;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	box-shadow: 0 2px 0 #E8DACA;
	text-decoration: none;
	color: inherit;
}
.card-promocao-mini__imagem {
	height: 96px;
	border-radius: 12px;
	background-color: #CFE2EA;
	background-image: repeating-linear-gradient(135deg, #CFE2EA 0 9px, #B4D2DE 9px 18px);
	background-size: cover;
	background-position: center;
}
.card-promocao-mini__prazo {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	color: #E8663C;
	letter-spacing: 1.5px;
}
.card-promocao-mini__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 18px;
	margin-top: 6px;
	color: #10222B;
}
.card-promocao-mini__resumo {
	font-size: 13px;
	color: #6B8494;
	margin-top: 4px;
}
.card-promocao-mini__ganhadores {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: #10222B;
	margin-top: 6px;
	line-height: 1.5;
}

.promocoes-vazio {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 40px 22px;
	text-align: center;
	box-shadow: 0 2px 0 #E8DACA;
}
.promocoes-vazio__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
}
.promocoes-vazio__texto {
	font-size: 15px;
	color: #52697A;
	margin-top: 10px;
}

.card-cadastro-unico {
	background: #1F3A4D;
	border-radius: 20px;
	padding: 22px;
	color: #FFFFFF;
}
.card-cadastro-unico__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 19px;
}
.card-cadastro-unico__texto {
	font-size: 13px;
	color: #BBD8E3;
	margin-top: 6px;
	text-wrap: pretty;
}
.promocoes-cadastro-form {
	margin-top: 16px;
	display: grid;
	gap: 12px;
}
.promocoes-cadastro-form__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: #8FC2D6;
	display: block;
	margin-bottom: 6px;
}
.promocoes-cadastro-form__input {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	padding: 11px 14px;
	color: #FFFFFF;
	font-family: Figtree, sans-serif;
	font-size: 14px;
}
.promocoes-cadastro-form__input::placeholder {
	color: #6B8494;
}
.promocoes-cadastro-form__interesses {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.chip-interesse {
	position: relative;
	cursor: pointer;
}
.chip-interesse__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.chip-interesse__texto {
	display: inline-block;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12px;
	color: #DCEEF4;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.chip-interesse__input:checked + .chip-interesse__texto {
	background: #E8A93A;
	border-color: #E8A93A;
	color: #1F3A4D;
	font-weight: 700;
}
.chip-interesse__input:focus-visible + .chip-interesse__texto {
	outline: 2px solid #E8A93A;
	outline-offset: 2px;
}
.promocoes-cadastro-form__feedback {
	font-size: 13px;
	min-height: 18px;
}
.promocoes-cadastro-form__feedback--sucesso {
	color: #8FE0B0;
}
.promocoes-cadastro-form__feedback--erro {
	color: #F2A0A0;
}
.promocoes-cadastro-form__submit {
	background: #2E7C9E;
	color: #FFFFFF;
	border: 0;
	padding: 13px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
	font-family: Figtree, sans-serif;
}
.promocoes-cadastro-form__submit:hover {
	background: #256A89;
}
.promocoes-cadastro-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Skeleton loading das abas — mesma animação de pulso de page-noticias.php
   (.skeleton-bloco), formas próprias (ver comentário no topo desta seção). */
.skeleton-promocao-destaque {
	background: #FFFFFF;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 2px 0 #E8DACA;
}
.skeleton-promocao-destaque .skeleton-bloco--imagem {
	height: 300px;
	border-radius: 0;
}
.skeleton-promocao-destaque__body {
	padding: 26px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.skeleton-promocao-mini {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 16px;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	box-shadow: 0 2px 0 #E8DACA;
}
.skeleton-promocao-mini .skeleton-bloco--imagem {
	height: 96px;
}
.skeleton-promocao-mini__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

/* ---------------------------------------------------------------------
 * page-anuncie.php — convertida de novo-site-design/anuncie.html.
 * ------------------------------------------------------------------- */

.anuncie-hero {
	background: #2E7C9E;
	padding: 56px 32px;
}
.anuncie-hero__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}
.anuncie-hero__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 3px;
	color: #E8A93A;
}
.anuncie-hero__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 58px;
	line-height: 0.94;
	letter-spacing: -2.6px;
	color: #FFFFFF;
	margin: 14px 0 0;
	text-wrap: pretty;
}
.anuncie-hero__subtitulo {
	font-size: 18px;
	color: #E4F0F5;
	margin-top: 18px;
	max-width: 520px;
	text-wrap: pretty;
}

.anuncie-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 32px;
	max-width: 560px;
}
.anuncie-stat {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	padding: 18px;
	min-width: 0;
}
.anuncie-stat__valor {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 30px;
	color: #E8A93A;
	letter-spacing: -1.2px;
}
.anuncie-stat__label {
	font-size: 13px;
	color: #FFFFFF;
	margin-top: 4px;
}

.anuncie-form-card {
	background: #FFF8EF;
	border-radius: 24px;
	padding: 26px;
	box-shadow: 0 20px 40px rgba(6, 58, 87, 0.22);
}
.anuncie-form-card__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 22px;
	letter-spacing: -0.6px;
	color: #10222B;
}
.anuncie-form-card__subtitulo {
	font-size: 14px;
	color: #6B8494;
	margin-top: 6px;
}

.form-comercial {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}
.form-comercial__linha-dupla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.campo-form__label {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #8A9AA6;
	display: block;
	margin-bottom: 6px;
}
.campo-form__input {
	width: 100%;
	box-sizing: border-box;
	background: #FFFFFF;
	border: 1px solid #E8DACA;
	border-radius: 10px;
	padding: 13px 14px;
	font-size: 14px;
	font-family: Figtree, sans-serif;
	color: #1F3A4D;
	outline: none;
}
.campo-form__input::placeholder {
	color: #8A9AA6;
}

.anuncie-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.chip-anuncie {
	background: #FFFFFF;
	border: 1px solid #E8DACA;
	color: #52697A;
	padding: 8px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: Figtree, sans-serif;
}
.chip-anuncie:hover {
	border-color: #8A9AA6;
}
.chip-anuncie--selecionada {
	background: #1F3A4D;
	border-color: #1F3A4D;
	color: #FFFFFF;
}
.chip-anuncie--selecionada:hover {
	border-color: #1F3A4D;
}

.form-comercial__feedback {
	font-size: 13px;
	min-height: 18px;
}
.form-comercial__feedback--sucesso {
	color: #2E7C4E;
}
.form-comercial__feedback--erro {
	color: #C0392B;
}
.form-comercial__submit {
	background: #E8A93A;
	color: #1F3A4D;
	text-align: center;
	padding: 15px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	border: 0;
	width: 100%;
}
.form-comercial__submit:hover {
	background: #F0B94A;
}
.form-comercial__submit:disabled {
	opacity: 0.6;
	cursor: default;
}
.form-comercial__contato-alt {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: #8A9AA6;
	text-align: center;
}
.form-comercial__contato-alt a {
	color: #8A9AA6;
	text-decoration: underline;
}

.anuncie-sucesso {
	text-align: center;
	padding: 20px 4px;
}
.anuncie-sucesso__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 20px;
	color: #10222B;
}
.anuncie-sucesso__texto {
	font-size: 14px;
	color: #52697A;
	margin-top: 8px;
}

.anuncie-formatos {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 32px 0;
}
.anuncie-formatos__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 38px;
	letter-spacing: -1.5px;
	color: #10222B;
	margin: 0;
}
.anuncie-formatos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 26px;
}

.card-formato {
	background: #FFFFFF;
	border-radius: 22px;
	padding: 26px;
	box-shadow: 0 2px 0 #E8DACA;
}
.card-formato__eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 2px;
	color: #E8663C;
}
.card-formato__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 22px;
	margin-top: 10px;
	color: #10222B;
}
.card-formato__texto {
	font-size: 14px;
	color: #52697A;
	margin-top: 8px;
	text-wrap: pretty;
}
.card-formato__divisor {
	height: 1px;
	background: #F0E4D5;
	margin: 18px 0;
}
.card-formato__preco {
	font-size: 13px;
	color: #6B8494;
}
.card-formato__preco-valor {
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 17px;
	color: #10222B;
}

.card-formato--destaque {
	background: #1F3A4D;
	color: #FFFFFF;
}
.card-formato--destaque .card-formato__eyebrow {
	color: #E8A93A;
}
.card-formato--destaque .card-formato__titulo {
	color: #FFFFFF;
}
.card-formato--destaque .card-formato__texto {
	color: #BBD8E3;
}
.card-formato--destaque .card-formato__divisor {
	background: rgba(255, 255, 255, 0.2);
}
.card-formato--destaque .card-formato__preco {
	color: #BBD8E3;
}
.card-formato--destaque .card-formato__preco-valor {
	color: #E8A93A;
}

.banner-midia-kit-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 32px 80px;
}
.banner-midia-kit {
	background: #E8A93A;
	border-radius: 24px;
	padding: 32px 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.banner-midia-kit__titulo {
	font-family: Archivo, sans-serif;
	font-weight: 900;
	font-size: 30px;
	letter-spacing: -1.2px;
	color: #10222B;
}
.banner-midia-kit__texto {
	font-size: 15px;
	color: #6B4A10;
	margin-top: 6px;
}
.banner-midia-kit__botao {
	display: inline-block;
	background: #10222B;
	color: #E8A93A;
	text-decoration: none;
	padding: 15px 26px;
	border-radius: 999px;
	font-family: Archivo, sans-serif;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
	flex-shrink: 0;
	border: 0;
}
.banner-midia-kit__botao:hover {
	background: #1F3A4D;
}

/* ---------------------------------------------------------------------
 * Responsivo — breakpoints do design (novo-site-design/): max-width 900px
 * e max-width 560px. Cobre as classes de home ACIMA e retrofita header/
 * footer (Fase 3.1), que ainda não tinham CSS responsivo.
 * ------------------------------------------------------------------- */
@media (max-width: 900px) {
	/* Header mobile: nav desktop vira hambúrguer + drawer; badge "AO VIVO"
	   some pra economizar espaço (o play do drawer já cobre a função). */
	.site-header__inner {
		padding: 12px 18px;
	}
	.site-nav {
		display: none;
	}
	.nav-burger {
		display: grid;
	}
	.live-badge {
		display: none;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 26px 20px;
	}
	.footer-brand {
		grid-column: 1 / -1;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 130px;
	}
	.hero__title {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.hero__wave-arc {
		display: none;
	}
	.hero__sun {
		width: 120px;
		height: 120px;
		right: 4%;
		left: auto;
	}
	/* A lua tem filhos com posição/tamanho fixos em px (disco, crateras),
	   pensados pra caber num container de 210px — encolher só o container
	   via width/height deixa esses filhos "soltos", maiores que a lua
	   (o disco/crateras não acompanham). Em vez disso, mantém o tamanho
	   original e encolhe tudo junto com transform, ancorado no canto onde
	   a lua fica no mobile (topo/direita). */
	.hero__moon {
		right: 4%;
		left: auto;
		transform: scale(0.5714);
		transform-origin: top right;
	}

	.banner-patrocinador-wrap__inner,
	.secao-noticias,
	.secao-producoes,
	.secao-promocoes,
	.colunas-tres {
		padding-left: 18px;
		padding-right: 18px;
	}

	.widget-mar__hours {
		grid-template-columns: repeat(2, 1fr);
	}
	.widget-mar__now-value {
		font-size: 38px;
		letter-spacing: -1.4px;
	}

	.secao-noticias__grid {
		grid-template-columns: 1fr;
	}
	.card-noticia-destaque__imagem {
		height: 220px;
	}
	.secao-noticias__title,
	.secao-promocoes__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.card-noticia-destaque__titulo {
		font-size: 22px;
		letter-spacing: -0.6px;
	}
	.card-noticia {
		grid-template-columns: 1fr;
	}

	.secao-producoes__card {
		grid-template-columns: 1fr;
		padding: 22px;
	}
	.secao-producoes__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.secao-producoes__thumb {
		height: 190px;
	}

	.grid-promocoes {
		grid-template-columns: repeat(2, 1fr);
	}

	.colunas-tres {
		grid-template-columns: 1fr;
	}
	.colunas-tres__card,
	.grid-programacao-mini {
		padding: 20px;
	}

	.secao-newsletter__inner {
		grid-template-columns: 1fr;
	}
	.secao-newsletter__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}

	/* Página de patrocinador */
	.patrocinador-hero__inner {
		grid-template-columns: 1fr;
	}
	.patrocinador-hero__logo-box {
		height: 160px;
	}
	.patrocinador-hero__title {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.patrocinador-promo__inner {
		grid-template-columns: 1fr;
	}
	.patrocinador-promo__titulo {
		font-size: 30px;
		letter-spacing: -1px;
	}
	.patrocinador-sobre {
		grid-template-columns: 1fr;
		padding: 32px 22px 20px;
	}
	.patrocinador-destaques {
		grid-template-columns: repeat(2, 1fr);
	}
	.patrocinador-breadcrumb,
	.patrocinador-hero,
	.patrocinador-promo,
	.patrocinador-cta-final {
		padding-left: 18px;
		padding-right: 18px;
	}
	.patrocinador-cta-final__card {
		padding: 22px;
	}

	/* Página de Locutor/Colunista */
	.pessoa-breadcrumb,
	.pessoa-hero,
	.pessoa-destaque {
		padding-left: 18px;
		padding-right: 18px;
	}
	.pessoa-hero__inner {
		grid-template-columns: 1fr;
	}
	.pessoa-hero__foto {
		width: 100%;
		height: 220px;
	}
	.pessoa-hero__nome {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.pessoa-destaque__inner {
		grid-template-columns: 1fr;
	}
	.pessoa-destaque__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.pessoa-corpo {
		grid-template-columns: 1fr;
		padding-left: 18px;
		padding-right: 18px;
	}
	.pessoa-bio__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.pessoa-programacao__titulo {
		font-size: 22px;
	}

	/* Página de Programação — mesmos buckets genéricos do design original
	   (grid-template-columns:76px 1fr → 1fr, height:380px → 220px,
	   font-size 52px/36px → 38px/28px) só que via classe em vez de
	   [style*="..."]. */
	.programacao-hero__inner {
		grid-template-columns: 1fr;
	}
	.programacao-hero__titulo {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.programacao-hero__foto {
		height: 220px;
	}
	.programacao-corpo__inner {
		grid-template-columns: 1fr;
	}
	.programacao-grade-head__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.programacao-dias {
		width: 100%;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.programacao-dias__item {
		flex-shrink: 0;
	}
	.item-programa,
	.item-programa--ativo {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	/* Página de Notícias — mesmos buckets do design original (flex-column
	   no cabeçalho, busca 100% de largura, grids de 2 colunas → 1). */
	.noticias-hero {
		padding: 22px 18px;
	}
	.noticias-hero__head {
		flex-direction: column;
		align-items: stretch;
	}
	.noticias-hero__titulo {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.filtro-categorias {
		/* No mobile os 14 pills empilham em várias linhas (ver screenshot no
		   CONTEXT.md) — fixo no topo, isso sozinho já toma boa parte da tela.
		   Sem sticky aqui, a barra rola com o resto da página normalmente. */
		position: static;
	}
	.noticias-busca {
		width: 100%;
		box-sizing: border-box;
	}
	.noticias-busca__input {
		width: 100%;
	}
	.filtro-categorias__inner {
		padding: 14px 18px;
	}
	.noticias-corpo {
		grid-template-columns: 1fr;
		padding: 22px 18px 60px;
	}
	.card-manchete,
	.skeleton-manchete {
		grid-template-columns: 1fr;
	}
	.card-manchete__imagem,
	.skeleton-manchete .skeleton-bloco--imagem {
		min-height: 220px;
	}
	.card-manchete__body {
		padding: 22px;
	}
	.card-manchete__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.card-noticia-lista,
	.skeleton-card-noticia {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.card-noticia-lista__imagem,
	.skeleton-card-noticia .skeleton-bloco--imagem {
		height: 190px;
	}
	.sidebar-noticias {
		position: static;
	}

	/* Página de notícia individual (single.php) */
	.noticia-breadcrumb-wrap {
		padding: 22px 18px 0;
	}
	.noticia-layout {
		grid-template-columns: 1fr;
		padding: 18px 18px 60px;
		gap: 26px;
	}
	.noticia-titulo {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.noticia-lead {
		font-size: 17px;
	}
	.noticia-imagem-principal {
		height: 220px;
	}
	.noticia-corpo {
		font-size: 17px;
	}
	.noticia-citacao-destaque,
	.noticia-audio-relacionado {
		padding: 20px;
	}
	.noticia-relacionadas__grid {
		grid-template-columns: 1fr;
	}
	.sidebar-noticia {
		position: static;
	}

	/* Página de Promoções */
	.promocoes-hero {
		padding: 22px 18px;
	}
	.promocoes-hero__inner {
		flex-direction: column;
		align-items: stretch;
	}
	.promocoes-hero__titulo {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.widget-proximo-sorteio {
		width: 100%;
		box-sizing: border-box;
	}
	.promocoes-corpo {
		padding: 22px 18px 60px;
	}
	.promocoes-grid {
		grid-template-columns: 1fr;
	}
	.card-promocao-destaque__imagem,
	.skeleton-promocao-destaque .skeleton-bloco--imagem {
		height: 190px;
	}
	.card-promocao-destaque__body,
	.skeleton-promocao-destaque__body {
		padding: 20px;
	}
	.card-promocao-destaque__titulo {
		font-size: 22px;
		letter-spacing: -0.6px;
	}
	.card-promocao-mini,
	.skeleton-promocao-mini {
		grid-template-columns: 1fr;
	}

	/* Página de promoção individual (single-promocao.php) */
	.promo-detalhe {
		grid-template-columns: 1fr;
		padding: 18px 18px 60px;
		gap: 26px;
	}
	.promo-detalhe__titulo {
		font-size: 34px;
		letter-spacing: -1.4px;
	}
	.promo-detalhe__imagem {
		height: 220px;
	}
	.promo-detalhe__stats {
		grid-template-columns: 1fr 1fr;
	}
	.promo-detalhe__sidebar {
		position: static;
	}
	.promo-detalhe__countdown-data {
		font-size: 38px;
	}

	/* Página "Anuncie" (page-anuncie.php) */
	.anuncie-hero {
		padding: 22px 18px;
	}
	.anuncie-hero__inner {
		grid-template-columns: 1fr;
	}
	.anuncie-hero__titulo {
		font-size: 38px;
		letter-spacing: -1.4px;
	}
	.anuncie-stats {
		max-width: none;
	}
	.anuncie-formatos {
		padding: 32px 18px 0;
	}
	.anuncie-formatos__titulo {
		font-size: 28px;
		letter-spacing: -1px;
	}
	.anuncie-formatos__grid {
		grid-template-columns: 1fr;
	}
	.banner-midia-kit-wrap {
		padding: 32px 18px 60px;
	}
	.banner-midia-kit {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}

@media (max-width: 560px) {
	/* Nesta largura as classes da home não mudam mais em relação a 900px —
	   os únicos ajustes adicionais do design nesse breakpoint (grids de
	   4/5 colunas, fonte de 84px) são usados em páginas ainda não
	   convertidas (promoção/programação), não na home. */

	.patrocinador-destaques {
		grid-template-columns: 1fr;
	}
	.patrocinador-hero__title {
		font-size: 32px;
	}
}