/*
Theme Name: Antena de los Andes
Theme URI: https://antenadelosandes.com
Author: Antena de los Andes 1520 AM
Author URI: https://antenadelosandes.com
Description: Theme editorial propio de Antena de los Andes 1520 AM (Santa Rosa de Cabal), inspirado en portales de noticias modulares. Colores de marca personalizables desde el Customizer, integración de Google Analytics 4 y Meta Pixel, portada con jerarquía editorial (nota principal, secundarias, tendencias, carrusel de últimas noticias) y reproductor de radio en vivo.
Version: 2.2.2
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: antena-de-los-andes
*/

:root {
	--ink: #0b1220;
	--muted: #6b7280;
	--line: #e5e7eb;
	--soft: #f7f7f8;
	--card: #fff;
	--color-primary: #001b5a;   /* navy de marca */
	--color-primary-dark: #00113a;
	--color-accent: #f7941d;    /* naranja del anillo del logo — solo para fondos/bordes, no texto */
	--color-accent-text: #b45f0e; /* mismo naranja oscurecido: cumple contraste AA como texto sobre blanco */
	--color-gold: #b7791f;
	--color-green: #0f766e;
	--font-heading: "Libre Baskerville", Georgia, serif;
	--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--container-width: 1220px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
p { margin: 0 0 .6em; }
p:last-child { margin-bottom: 0; }
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; margin: 0; }

.wrap { max-width: var(--container-width); margin: 0 auto; padding: 0 18px; }

/* ---------- Topbar: ticker de última hora ---------- */
.topbar { background: #0b0f19; color: #fff; font-size: 12px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 34px; }
.ticker { display: flex; gap: 10px; align-items: center; white-space: nowrap; overflow: hidden; min-width: 0; }
.ticker .headline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { background: var(--color-accent); color: #1a1a1a; padding: 4px 8px; border-radius: 999px; font-weight: 800; font-size: 11px; flex-shrink: 0; }
.pill .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #d0021b; margin-right: 4px; animation: pulse 1.4s infinite; }
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(208,2,27,.6); }
	70% { box-shadow: 0 0 0 6px rgba(208,2,27,0); }
	100% { box-shadow: 0 0 0 0 rgba(208,2,27,0); }
}
.topbar .date { flex-shrink: 0; }

/* ---------- Brandbar ---------- */
.brandbar { border-bottom: 1px solid var(--line); }
.brandbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 92px; }
.site-branding { display: flex; align-items: center; gap: 14px; }
.site-branding img.custom-logo { max-height: 64px; width: auto; }
.logo-text { font-family: var(--font-heading); font-size: 40px; letter-spacing: -1.5px; color: var(--color-primary); }
.logo-text a { color: var(--color-primary); }
.tagline { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }

.actions { display: flex; gap: 10px; align-items: center; }
.btn {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	padding: 10px 14px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.btn.primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn.primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #1a1a1a; }

/* El reproductor persistente lo dibuja el plugin adla-reproductor-flotante (ya
   reserva su propio espacio con body{padding-bottom} inline) — el theme no define
   estilos propios de reproductor para no tener dos fuentes de verdad. */

.search-form { display: flex; gap: 6px; }
.search-form input {
	border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 13px; min-width: 160px;
}

/* ---------- Nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.site-nav .wrap { height: 48px; display: flex; align-items: center; gap: 22px; overflow-x: auto; }
.site-nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.site-nav a { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.site-nav a:hover, .site-nav .current-menu-item > a { color: var(--color-accent-text); }
.menu-toggle { display: none; background: none; border: 2px solid var(--color-primary); color: var(--color-primary); padding: 6px 10px; border-radius: 4px; font-weight: 700; }

/* ---------- Kicker / meta compartidos ---------- */
.kicker { color: var(--color-accent-text); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.meta, .summary { color: var(--muted); line-height: 1.55; font-size: .92rem; }

/* ---------- Hero (portada) ---------- */
.hero-grid {
	display: grid;
	grid-template-columns: 1.3fr .78fr .55fr;
	gap: 24px;
	border-top: 3px solid var(--ink);
	padding-top: 18px;
	margin-top: 18px;
}
.hero-grid--two { grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); }
.lead h1 { font-size: 44px; margin: 12px 0 10px; }
.lead .heroimg {
	display: block; /* era <a>, inline por defecto: aspect-ratio no aplicaba y la imagen se rendía sin control de tamaño */
	aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	position: relative;
}
.lead .heroimg img { width: 100%; height: 100%; object-fit: cover; }

.sidecard { border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 16px; }
.sidecard h2 { font-size: 19px; margin: 6px 0; }
.sidecard:last-child { border-bottom: none; }

.trending { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.trending h3 { font-family: var(--font-body); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.trendrow { display: grid; grid-template-columns: 30px 1fr; gap: 10px; margin: 12px 0; }
.trendrow .rank { font-size: 26px; font-weight: 900; color: #cbd5e1; font-family: var(--font-heading); }
.trendrow b { font-size: 14px; line-height: 1.3; }

/* ---------- Secciones con título ---------- */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 40px 0 16px; border-top: 3px solid var(--ink); padding-top: 12px; }
.section-title h2 { font-size: 24px; }

/* ---------- Carrusel de últimas noticias ---------- */
.carousel { position: relative; }
.carousel-track {
	display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 4px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track .section-card { flex: 0 0 260px; scroll-snap-align: start; }
.carousel-nav { display: flex; gap: 8px; }
.carousel-nav button {
	width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
	background: #fff; cursor: pointer; font-size: 16px; font-weight: 700;
}
.carousel-nav button:hover { background: var(--soft); }

.section-card .thumb { aspect-ratio: 16/10; border-radius: 9px; margin-bottom: 10px; background: var(--soft); overflow: hidden; }
.section-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.section-card .thumb.c1 { background: linear-gradient(135deg, var(--color-primary), #2563eb); }
.section-card .thumb.c2 { background: linear-gradient(135deg, #7f1d1d, #ef4444); }
.section-card .thumb.c3 { background: linear-gradient(135deg, #064e3b, var(--color-green)); }
.section-card .thumb.c4 { background: linear-gradient(135deg, #78350f, var(--color-gold)); }
.section-card h3 { font-size: 16px; margin: 6px 0; }

/* Variante "list": fila compacta sin miniatura, para no repetir el mismo mosaico
   de tarjetas en cada carrusel de categoría. */
.carousel-variant-list .carousel-track { flex-wrap: wrap; overflow-x: visible; }
.carousel-variant-list .list-row {
	flex: 1 1 100%;
	display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 14px;
	padding: 12px 0; border-bottom: 1px solid var(--line); scroll-snap-align: none;
}
.carousel-variant-list .list-row .kicker { font-size: 11px; }
.carousel-variant-list .list-row h3 { font-size: 16px; margin: 0; grid-column: 2; }
.carousel-variant-list .list-row .meta { grid-column: 2; margin-top: 2px; }
.carousel-variant-list .list-row .kicker { grid-column: 1; grid-row: 1 / 3; align-self: start; }
.carousel-variant-list .carousel-nav { display: none; }

/* ---------- Split: profundidad + opinión + newsletter ---------- */
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; }
.split.split-full { grid-template-columns: 1fr; max-width: 760px; }
.listitem { border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 16px; }
.listitem h3 { font-size: 20px; margin: 6px 0; }

.opinion { display: grid; grid-template-columns: 56px 1fr; gap: 12px; margin-bottom: 20px; }
.opinion .avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.opinion .avatar img { width: 100%; height: 100%; object-fit: cover; }
.opinion h3 { font-size: 17px; margin: 4px 0; }

.newsletter { background: #0b1220; color: #fff; border-radius: 14px; padding: 22px; }
.newsletter h3 { color: #fff; font-family: var(--font-body); font-size: 17px; margin-bottom: 6px; }
.newsletter p { color: #cbd5e1; font-size: .9rem; }
.newsletter .input { display: flex; gap: 8px; margin-top: 10px; }
.newsletter input { flex: 1; padding: 12px; border-radius: 8px; border: 0; font-size: .9rem; }
.newsletter button { padding: 12px 14px; border-radius: 8px; border: 0; font-weight: 900; background: var(--color-accent); color: #1a1a1a; cursor: pointer; }

/* ---------- Ad slot ---------- */
.ad-slot {
	min-height: 88px; margin: 18px 0; background: linear-gradient(135deg, #f3f4f6, #fff);
	border: 1px dashed #cbd5e1; display: grid; place-items: center; color: var(--muted);
	font-size: 13px; font-weight: 700; border-radius: 8px;
}
.ad-slot--economia {
	position: relative;
	display: block;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: #008f39;
	color: #fff;
}
.ad-slot--economia .ad-label {
	position: absolute;
	top: 6px;
	left: 8px;
	z-index: 1;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.ad-economia-link {
	display: grid;
	grid-template-columns: minmax(210px, 1fr) minmax(230px, 1.2fr) auto;
	align-items: center;
	gap: 28px;
	min-height: 118px;
	padding: 20px 28px;
	background: linear-gradient(110deg, #007d32 0%, #00a341 62%, #08752f 100%);
}
.ad-economia-logo {
	width: min(100%, 330px);
	height: auto;
}
.ad-economia-copy strong,
.ad-economia-copy small { display: block; }
.ad-economia-copy strong { color: #fff; font: 800 1.25rem var(--font-body); }
.ad-economia-copy small { margin-top: 4px; color: #ecfccb; font-size: .9rem; }
.ad-economia-cta {
	padding: 10px 16px;
	border-radius: 999px;
	background: #ffed00;
	color: #1c1917;
	font-size: .82rem;
	font-weight: 900;
	white-space: nowrap;
}

/* ---------- Navegación AJAX: feedback sutil de carga ---------- */
#content { transition: opacity .15s ease; }
body.is-ajax-loading #content { opacity: .5; }

/* ---------- Contenido con sidebar (index/archive/search/single/page) ---------- */
.site-main { padding: 32px 0 50px; }
.content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
@media (max-width: 782px) {
	.content-grid { grid-template-columns: 1fr; }
}
.archive-header { border-top: 3px solid var(--ink); padding-top: 14px; margin-bottom: 20px; }
.archive-header h1 { font-size: 30px; }

/* ---------- Listados genéricos (archive/index/search) ---------- */
.entry-card { border-bottom: 1px solid var(--line); padding: 0 0 24px; margin-bottom: 24px; display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
.entry-card:not(:has(.entry-thumbnail)) { grid-template-columns: 1fr; }
.entry-card .entry-thumbnail { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--soft); }
.entry-card .entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.entry-card h2 { font-size: 22px; margin: 6px 0; }
.entry-card .read-more { color: var(--color-accent-text); font-weight: 800; font-size: .9rem; }
@media (max-width: 600px) {
	.entry-card { grid-template-columns: 1fr; }
}

/* ---------- Entrada individual ---------- */
.single-entry .entry-header { margin: 18px 0 20px; border-top: 3px solid var(--ink); padding-top: 16px; }
.single-entry .entry-title { font-size: 2.2rem; margin: 10px 0; }
.single-entry .entry-meta { margin-bottom: 20px; }
.single-entry .entry-content { font-size: 1.08rem; }
.single-entry .entry-content img { border-radius: 8px; margin: 20px 0; }
.single-entry .entry-thumbnail { border-radius: 10px; overflow: hidden; margin-bottom: 20px; }

/* ---------- Widgets / sidebar genérica ---------- */
.widget { margin-bottom: 32px; }
.widget-title { font-family: var(--font-body); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 3px solid var(--color-accent); padding-bottom: 8px; margin-bottom: 16px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 50px; background: #0b0f19; color: #fff; padding: 34px 0; }
.footgrid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 24px; }
.footgrid .logo-text { color: #fff; font-size: 28px; }
.footgrid p { color: #cbd5e1; font-size: .9rem; }
.footgrid b { display: block; margin-bottom: 6px; }
.footgrid a, .footer-widgets a { display: block; color: #cbd5e1; text-decoration: none; margin: 8px 0; font-size: 14px; }
.footgrid a:hover, .footer-widgets a:hover { color: var(--color-accent); }
.footer-social { display: flex; gap: 8px; margin-top: 14px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-size: 11px; font-weight: 800; }
.site-info { text-align: center; padding-top: 20px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.15); color: #9aa4b2; font-size: .8rem; }
.site-info a { color: #cbd5e1; text-decoration: underline; }
.adla-consent-open { border: 0; padding: 0; background: transparent; color: #cbd5e1; text-decoration: underline; cursor: pointer; font: inherit; }
.adla-consent[hidden] { display: none; }
.adla-consent { position: fixed; inset: 0; z-index: 1000000; display: flex; align-items: flex-end; justify-content: center; padding: 18px; background: rgba(3,7,18,.46); }
.adla-consent__panel { width: min(760px, 100%); padding: 22px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.adla-consent__panel h2 { font: 800 1.25rem var(--font-body); margin-bottom: 8px; }
.adla-consent__choices { display: grid; gap: 8px; margin: 14px 0; }
.adla-consent__links a { color: var(--color-primary); text-decoration: underline; }
.adla-consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.adla-consent__actions button { border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; background: #fff; cursor: pointer; font-weight: 700; }
.adla-consent__actions button.primary { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

@media (max-width: 900px) {
	.brandbar .wrap { height: auto; padding: 16px 0; flex-direction: column; align-items: flex-start; gap: 12px; }
	.logo-text { font-size: 30px; }
	.actions { display: none; }
	.menu-toggle { display: inline-block; }
	.site-nav .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
	#primary-menu { display: none; width: 100%; }
	#primary-menu.is-open { display: block; }
	#primary-menu ul { flex-direction: column; gap: 4px; }
	.hero-grid, .split, .footgrid { grid-template-columns: 1fr; }
	.lead h1 { font-size: 32px; }
	.carousel-track .section-card { flex-basis: 220px; }
	.ad-economia-link { grid-template-columns: 1fr; gap: 10px; padding: 28px 18px 18px; text-align: center; }
	.ad-economia-logo { width: min(100%, 300px); margin: 0 auto; }
	.ad-economia-cta { justify-self: center; }
}