@charset "UTF-8";
/* ==========================================================================
   EnParaguay — hoja de estilo principal (v110)
   Diario digital. Denso, ordenado, sobrio. Sin frameworks.

   Criterios de esta version, tomados de como resuelven los diarios serios:
   - La densidad es informacion. Un portal de noticias tiene que mostrar
     muchos titulares antes del pliegue, no tres tarjetas grandes.
   - El color no organiza: organiza la retícula. Filetes, reglas verticales
     y jerarquia tipografica. El rojo aparece poco y por eso se ve.
   - Titulares en una grotesca compacta, textos de servicio en Inter.

   Indice
   01 Tokens
   02 Reset y base
   03 Tipografia
   04 Reticula
   05 Utilidades
   06 Cabecera
   07 Navegacion
   08 Buscador
   09 Ultimo momento
   10 Piezas de nota
   11 Portada
   12 Archivos y paginacion
   13 Nota individual
   14 Barra lateral
   15 Pie
   16 Formularios y comentarios
   17 Contenido embebido
   18 Integraciones
   19 Accesibilidad e impresion
   ========================================================================== */

/* ==========================================================================
   00 Fuentes
   Alojadas en el propio tema, no en Google Fonts.

   Motivo concreto: LiteSpeed elimina del HTML el <link> a fonts.googleapis
   —comprobado en produccion—, asi que el sitio venia renderizando siempre
   con la fuente del sistema aunque el encolado fuera correcto. Alojarlas
   ademas ahorra un DNS + TLS a un tercero en el camino critico.

   Ambas son fuentes variables: un archivo cubre todos los pesos.
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   01 Tokens
   ========================================================================== */

:root {
	/* --- Marca. Rojo de acento, no de relleno. --- */
	--enpy-brand: #c8102e;
	/* Banda de secciones: el rojo de marca como fondo pide SU par de tintas —
	   el acento del modo oscuro (#ff5470) como fondo seria un cartel de neon. */
	--enpy-nav-bg: var(--enpy-brand);
	--enpy-nav-ink: #ffffff;
	--enpy-brand-strong: #96051f;
	--enpy-brand-soft: #fdf0f2;
	--enpy-live: #d81f26;
	--enpy-accent: var(--enpy-brand);

	/* --- Tinta. Negro de diario, no azulado. --- */
	--enpy-ink: #16181c;
	--enpy-ink-2: #40464e;
	--enpy-ink-3: #6b7280;
	--enpy-ink-4: #949aa3;

	/* --- Superficies y reglas --- */
	--enpy-bg: #ffffff;
	--enpy-bg-2: #f6f7f8;
	--enpy-bg-3: #ebedef;
	--enpy-bg-invert: #16181c;
	--enpy-line: #e3e5e8;	/* filete fino, separa piezas */
	--enpy-line-2: #c9ced4;	/* filete medio */
	--enpy-rule: #16181c;	/* regla fuerte, encabeza secciones */

	--enpy-link: var(--enpy-brand);
	--enpy-link-hover: var(--enpy-brand-strong);

	/* --- Tipografia ---
	   Archivo para titulares: grotesca compacta, entra mas texto por linea.
	   Inter para metadatos, navegacion y cuerpo. */
	--enpy-font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--enpy-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--enpy-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Escala mas cerrada que la anterior: mas titulares en la misma altura. */
	--enpy-fs-3xs: 0.6875rem;	/* 11 volantes, horas */
	--enpy-fs-2xs: 0.75rem;		/* 12 metadatos */
	--enpy-fs-xs: 0.8125rem;	/* 13 listas densas */
	--enpy-fs-sm: 0.875rem;		/* 14 titular de lista */
	--enpy-fs-base: 0.9375rem;	/* 15 titular de tarjeta */
	--enpy-fs-md: 1.0625rem;	/* 17 titular destacado */
	--enpy-fs-lg: 1.25rem;		/* 20 titular de bloque */
	--enpy-fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem);
	--enpy-fs-2xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
	--enpy-fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);

	--enpy-lh-tight: 1.14;
	--enpy-lh-snug: 1.26;
	--enpy-lh-normal: 1.5;
	--enpy-lh-relaxed: 1.7;

	/* --- Espaciado --- */
	--enpy-s1: 0.25rem;
	--enpy-s2: 0.5rem;
	--enpy-s3: 0.75rem;
	--enpy-s4: 1rem;
	--enpy-s5: 1.25rem;
	--enpy-s6: 1.5rem;
	--enpy-s8: 2rem;
	--enpy-s10: 2.5rem;
	--enpy-s12: 3rem;

	/* --- Reticula --- */
	--enpy-container: 1320px;
	--enpy-gutter: clamp(0.875rem, 0.5rem + 1.4vw, 1.5rem);
	--enpy-gap: clamp(0.875rem, 0.6rem + 0.8vw, 1.375rem);
	--enpy-col-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);

	/* --- Formas. Casi sin redondeo: un diario no tiene esquinas blandas. --- */
	--enpy-radius-sm: 2px;
	--enpy-radius: 3px;
	--enpy-radius-lg: 4px;
	--enpy-radius-pill: 999px;

	--enpy-shadow-sm: 0 1px 2px rgba(22, 24, 28, 0.05);
	--enpy-shadow: 0 2px 8px rgba(22, 24, 28, 0.08);
	--enpy-shadow-lg: 0 12px 30px -8px rgba(22, 24, 28, 0.2);

	--enpy-ease: cubic-bezier(0.4, 0, 0.2, 1);

	--enpy-scrim: linear-gradient(
		to top,
		rgba(10, 12, 15, 0.94) 0%,
		rgba(10, 12, 15, 0.78) 34%,
		rgba(10, 12, 15, 0.3) 66%,
		rgba(10, 12, 15, 0) 100%
	);

	color-scheme: light;
}

/* --- Modo oscuro --- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--enpy-brand: #ff5470;
	--enpy-nav-bg: #8f1424;
	--enpy-nav-ink: #ffffff;
		--enpy-brand-strong: #ff7c91;
		--enpy-brand-soft: #2b1016;
		--enpy-live: #ff5f52;

		--enpy-ink: #e8eaed;
		--enpy-ink-2: #b0b6bd;
		--enpy-ink-3: #868d96;
		--enpy-ink-4: #6a7179;

		--enpy-bg: #101216;
		--enpy-bg-2: #171a1f;
		--enpy-bg-3: #1f242a;
		--enpy-bg-invert: #e8eaed;
		--enpy-line: #262b31;
		--enpy-line-2: #353b43;
		--enpy-rule: #e8eaed;

		--enpy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--enpy-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
		--enpy-shadow-lg: 0 14px 36px -10px rgba(0, 0, 0, 0.65);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--enpy-brand: #ff5470;
	--enpy-nav-bg: #8f1424;
	--enpy-nav-ink: #ffffff;
	--enpy-brand-strong: #ff7c91;
	--enpy-brand-soft: #2b1016;
	--enpy-live: #ff5f52;

	--enpy-ink: #e8eaed;
	--enpy-ink-2: #b0b6bd;
	--enpy-ink-3: #868d96;
	--enpy-ink-4: #6a7179;

	--enpy-bg: #101216;
	--enpy-bg-2: #171a1f;
	--enpy-bg-3: #1f242a;
	--enpy-bg-invert: #e8eaed;
	--enpy-line: #262b31;
	--enpy-line-2: #353b43;
	--enpy-rule: #e8eaed;

	--enpy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--enpy-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
	--enpy-shadow-lg: 0 14px 36px -10px rgba(0, 0, 0, 0.65);

	color-scheme: dark;
}

:root[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   02 Reset y base
   ========================================================================== */

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

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

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

body {
	margin: 0;
	background: var(--enpy-bg);
	color: var(--enpy-ink);
	font-family: var(--enpy-font);
	font-size: var(--enpy-fs-base);
	line-height: var(--enpy-lh-normal);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

body.enpy-has-player { padding-bottom: 88px; }
body.enpy-nav-open { overflow: hidden; }

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

a {
	color: var(--enpy-link);
	text-decoration: none;
	transition: color 0.14s var(--enpy-ease);
}

a:hover { color: var(--enpy-link-hover); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--enpy-line); margin: var(--enpy-s8) 0; }

::selection { background: var(--enpy-brand); color: #fff; }

:focus-visible {
	outline: 2px solid var(--enpy-brand);
	outline-offset: 2px;
	border-radius: var(--enpy-radius-sm);
}

:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   03 Tipografia
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--enpy-s3);
	font-family: var(--enpy-font-head);
	font-weight: 700;
	line-height: var(--enpy-lh-tight);
	letter-spacing: -0.014em;
	color: var(--enpy-ink);
	text-wrap: balance;
}

h1 { font-size: var(--enpy-fs-3xl); }
h2 { font-size: var(--enpy-fs-2xl); }
h3 { font-size: var(--enpy-fs-xl); }
h4 { font-size: var(--enpy-fs-lg); }
h5 { font-size: var(--enpy-fs-md); }
h6 { font-size: var(--enpy-fs-base); }

p { margin: 0 0 var(--enpy-s4); }
strong, b { font-weight: 700; }
small { font-size: var(--enpy-fs-2xs); }

blockquote {
	margin: var(--enpy-s6) 0;
	padding: var(--enpy-s1) 0 var(--enpy-s1) var(--enpy-s5);
	border-left: 3px solid var(--enpy-accent);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-lg);
	line-height: 1.35;
	font-weight: 600;
	color: var(--enpy-ink);
}

blockquote p:last-child { margin-bottom: 0; }

code, kbd, pre, samp { font-family: var(--enpy-font-mono); font-size: 0.9em; }
code { background: var(--enpy-bg-2); padding: 0.15em 0.4em; border-radius: var(--enpy-radius-sm); }

pre {
	background: var(--enpy-bg-2);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	padding: var(--enpy-s4);
	overflow-x: auto;
}

pre code { background: none; padding: 0; }

/* ==========================================================================
   04 Reticula
   ========================================================================== */

.enpy-container {
	width: 100%;
	max-width: var(--enpy-container);
	margin-inline: auto;
	padding-inline: var(--enpy-gutter);
}

.enpy-container--narrow { max-width: 760px; }

.enpy-site { display: flex; flex-direction: column; min-height: 100vh; }
.enpy-main { flex: 1 0 auto; padding-block: var(--enpy-s6) var(--enpy-s10); }

.enpy-shell {
	display: grid;
	gap: var(--enpy-s8);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1060px) {
	.enpy-shell--sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--enpy-col-gap);
	}

	/* Filete que separa el cuerpo de la barra lateral. */
	.enpy-shell--sidebar > .enpy-sidebar {
		padding-left: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
	}
}

.enpy-grid {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: repeat(var(--enpy-cols, 1), minmax(0, 1fr));
}

@media (min-width: 540px) {
	.enpy-grid--2, .enpy-grid--3, .enpy-grid--4, .enpy-grid--5 { --enpy-cols: 2; }
}

@media (min-width: 820px) {
	.enpy-grid--3 { --enpy-cols: 3; }
	.enpy-grid--4 { --enpy-cols: 3; }
	.enpy-grid--5 { --enpy-cols: 3; }
}

@media (min-width: 1060px) {
	.enpy-grid--4 { --enpy-cols: 4; }
	.enpy-grid--5 { --enpy-cols: 4; }
}

@media (min-width: 1240px) {
	.enpy-grid--5 { --enpy-cols: 5; }
}

/* Rejilla con reglas verticales entre columnas — el recurso mas
   "diario" que hay y el que mas ordena la lectura. */
.enpy-grid--ruled {
	column-gap: 0;
}

.enpy-grid--ruled > * {
	padding-inline: var(--enpy-col-gap);
	border-left: 1px solid var(--enpy-line);
}

.enpy-grid--ruled > *:first-child {
	padding-left: 0;
	border-left: 0;
}

@media (max-width: 539px) {
	.enpy-grid--ruled > * {
		padding-inline: 0;
		border-left: 0;
	}
}

/* En cada corte de columnas, la primera de cada fila pierde el filete. */
@media (min-width: 540px) and (max-width: 819px) {
	.enpy-grid--ruled > *:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
}

@media (min-width: 820px) and (max-width: 1059px) {
	.enpy-grid--ruled > *:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

@media (min-width: 1060px) {
	.enpy-grid--ruled.enpy-grid--4 > *:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
	.enpy-grid--ruled.enpy-grid--3 > *:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   05 Utilidades
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: var(--enpy-s3) var(--enpy-s5);
	top: var(--enpy-s2);
	left: var(--enpy-s2);
	z-index: 9999;
	background: var(--enpy-bg);
	border: 2px solid var(--enpy-brand);
	border-radius: var(--enpy-radius);
	font-weight: 600;
}

.enpy-clamp-1, .enpy-clamp-2, .enpy-clamp-3, .enpy-clamp-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.enpy-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.enpy-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.enpy-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.enpy-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

.enpy-hide-sm { display: none; }

@media (min-width: 768px) {
	.enpy-hide-sm { display: revert; }
	.enpy-only-sm { display: none !important; }
}

.enpy-hide-md { display: none; }

@media (min-width: 1060px) {
	.enpy-hide-md { display: revert; }
}

.enpy-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.enpy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--enpy-s2);
	padding: 0.6rem var(--enpy-s5);
	border: 1px solid transparent;
	border-radius: var(--enpy-radius);
	background: var(--enpy-accent);
	color: #fff;
	font-size: var(--enpy-fs-sm);
	font-weight: 650;
	line-height: 1;
	transition: background-color 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease);
}

.enpy-btn:hover { background: var(--enpy-brand-strong); color: #fff; }

.enpy-btn--ghost {
	background: transparent;
	border-color: var(--enpy-line-2);
	color: var(--enpy-ink);
}

.enpy-btn--ghost:hover { background: var(--enpy-bg-2); border-color: var(--enpy-ink-4); color: var(--enpy-ink); }
.enpy-btn--block { width: 100%; }

/* ==========================================================================
   06 Cabecera
   ========================================================================== */

.enpy-header {
	position: relative;
	z-index: 100;
	background: var(--enpy-bg);
	border-bottom: 3px solid var(--enpy-rule);
}

/* --- Barra superior --- */
.enpy-topbar {
	background: var(--enpy-bg-2);
	border-bottom: 1px solid var(--enpy-line);
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
}

.enpy-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s4);
	min-height: 32px;
}

.enpy-topbar__date {
	text-transform: capitalize;
	white-space: nowrap;
	letter-spacing: 0.005em;
}

.enpy-topbar__links {
	display: flex;
	align-items: center;
	gap: var(--enpy-s4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enpy-topbar__links a {
	color: var(--enpy-ink-3);
	font-weight: 600;
	font-size: var(--enpy-fs-3xs);
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.enpy-topbar__links a:hover { color: var(--enpy-accent); }

/* Punto separador entre servicios: convierte una hilera de mayusculas
   pegadas en items contables de un vistazo. */
.enpy-topbar__links li { display: inline-flex; align-items: center; }

.enpy-topbar__links li + li::before {
	content: "·";
	color: var(--enpy-ink-4);
	margin-right: var(--enpy-s4);
}

/* --- Cabezal --- */
.enpy-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s5);
	padding-block: var(--enpy-s4);
}

.enpy-brand { display: flex; align-items: center; gap: var(--enpy-s3); min-width: 0; }
.enpy-brand__logo img { max-height: 58px; width: auto; }

.enpy-brand__title {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.enpy-brand__title a { color: var(--enpy-ink); }
.enpy-brand__title a:hover { color: var(--enpy-ink); }
.enpy-brand__title .enpy-brand__accent { color: var(--enpy-brand); }

.enpy-masthead__actions {
	display: flex;
	align-items: center;
	gap: var(--enpy-s2);
	flex-shrink: 0;
}

.enpy-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	background: transparent;
	color: var(--enpy-ink-2);
	transition: background-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease);
}

.enpy-iconbtn:hover { background: var(--enpy-bg-2); color: var(--enpy-ink); border-color: var(--enpy-line-2); }

.enpy-iconbtn svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.enpy-themetoggle__moon { display: none; }
:root[data-theme="dark"] .enpy-themetoggle__sun { display: none; }
:root[data-theme="dark"] .enpy-themetoggle__moon { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .enpy-themetoggle__sun { display: none; }
	:root:not([data-theme="light"]) .enpy-themetoggle__moon { display: block; }
	:root[data-theme="dark"] .enpy-themetoggle__sun { display: none; }
	:root[data-theme="dark"] .enpy-themetoggle__moon { display: block; }
}

.enpy-live-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem var(--enpy-s4);
	border-radius: var(--enpy-radius);
	background: var(--enpy-live);
	color: #fff;
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.enpy-live-btn:hover { background: var(--enpy-brand-strong); color: #fff; }

.enpy-live-btn__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: enpy-pulse 1.8s var(--enpy-ease) infinite;
}

@keyframes enpy-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(0.7); }
}

/* ==========================================================================
   07 Navegacion
   ========================================================================== */

/* Banda de secciones en rojo de marca: la franja de identidad clasica de un
   diario (la referencia del dueño fue siempre ABC). Ademas separa de un
   golpe de vista la navegacion editorial (banda) de los servicios (barra
   superior gris) — antes eran tres tiras blancas iguales. */
.enpy-nav { background: var(--enpy-nav-bg); }

.enpy-nav__inner { display: flex; align-items: center; gap: var(--enpy-s4); }

.enpy-nav__menu {
	display: flex;
	align-items: stretch;
	margin: 0; padding: 0;
	list-style: none;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.enpy-nav__menu::-webkit-scrollbar { display: none; }
.enpy-nav__menu > li { position: relative; flex-shrink: 0; }

.enpy-nav__menu > li > a {
	display: flex;
	align-items: center;
	padding: 0.8rem var(--enpy-s4) 0.8rem 0;
	margin-right: var(--enpy-s2);
	color: var(--enpy-nav-ink);
	font-family: var(--enpy-font-head);
	font-size: 0.9375rem;
	font-weight: 650;
	letter-spacing: -0.005em;
	white-space: nowrap;
	position: relative;
}

.enpy-nav__menu > li > a:focus-visible {
	outline: 2px solid var(--enpy-nav-ink);
	outline-offset: -6px;
	border-radius: 2px;
}

.enpy-nav__menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: var(--enpy-s4);
	bottom: 0;
	height: 3px;
	background: var(--enpy-nav-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.16s var(--enpy-ease);
}

.enpy-nav__menu > li > a:hover { color: var(--enpy-nav-ink); }

.enpy-nav__menu > li > a:hover::after,
.enpy-nav__menu > li.current-menu-item > a::after,
.enpy-nav__menu > li.current-menu-ancestor > a::after,
.enpy-nav__menu > li.current-menu-parent > a::after { transform: scaleX(1); }

.enpy-nav__menu > li.current-menu-item > a,
.enpy-nav__menu > li.current-menu-ancestor > a { color: var(--enpy-nav-ink); }

/* --- Desplegable "Más" --- */
.enpy-nav__menu > li.menu-item-has-children > a { padding-right: calc(var(--enpy-s4) + 0.95rem); }

.enpy-nav__menu > li.menu-item-has-children > a::before {
	content: "";
	position: absolute;
	right: var(--enpy-s4);
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.85;
	transition: transform 0.16s var(--enpy-ease);
}

.enpy-nav__menu > li.menu-item-has-children:hover > a::before,
.enpy-nav__menu > li.is-open > a::before { transform: translateY(-30%) rotate(225deg); }

.enpy-nav__menu ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: var(--enpy-s2) 0;
	list-style: none;
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-top: 2px solid var(--enpy-accent);
	box-shadow: var(--enpy-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s var(--enpy-ease), transform 0.15s var(--enpy-ease), visibility 0.15s;
	z-index: 60;
}

.enpy-nav__menu li:hover > ul,
.enpy-nav__menu li:focus-within > ul,
.enpy-nav__menu li.is-open > ul { opacity: 1; visibility: visible; transform: translateY(0); }

.enpy-nav__menu ul ul { top: 0; left: 100%; }

.enpy-nav__menu ul a {
	display: block;
	padding: 0.4rem var(--enpy-s4);
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-sm);
	font-weight: 550;
	white-space: nowrap;
}

.enpy-nav__menu ul a:hover { background: var(--enpy-bg-2); color: var(--enpy-accent); }

/* Barra pegajosa */
.enpy-header--sticky .enpy-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 90;
	background: var(--enpy-nav-bg);
	border-top: 0;
	border-bottom: 2px solid #6d0e1c; /* fallback sin color-mix (Safari <=16.1) */
	border-bottom: 2px solid color-mix(in srgb, #000 25%, var(--enpy-nav-bg));
	box-shadow: var(--enpy-shadow);
	animation: enpy-slidedown 0.2s var(--enpy-ease);
}

@keyframes enpy-slidedown {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

.enpy-header--sticky .enpy-nav__sticky-brand { display: flex; }

.enpy-nav__sticky-brand {
	display: none;
	align-items: center;
	font-family: var(--enpy-font-head);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--enpy-ink);
	padding-right: var(--enpy-s4);
	margin-right: var(--enpy-s2);
	border-right: 1px solid var(--enpy-line);
	flex-shrink: 0;
	align-self: stretch;
}

.enpy-navtoggle { display: inline-flex; }

@media (min-width: 1060px) {
	.enpy-navtoggle { display: none; }
}

@media (max-width: 1059px) {
	.enpy-nav__menu { display: none; }
	.enpy-nav { display: none; }
	.enpy-header--sticky .enpy-nav { display: none; }

	/* En movil el topbar queda solo con la fecha: los cinco servicios en
	   mayusculas diminutas se envolvian en dos lineas apretadas arriba de
	   todo, y ya estan en el cajon y en el pie. */
	.enpy-topbar__links { display: none; }
}

/* 2) El desplegable "Más" se recortaba: el menu era un contenedor de scroll
   (overflow-x: auto) y un submenu absoluto adentro de un scroll-container
   se recorta a la altura de la banda — se abria y solo se veia una astilla.
   La banda solo existe de 1060px para arriba, donde los nueve items entran
   sobrados, asi que ahi el overflow pasa a visible y el submenu respira. */
@media (min-width: 1060px) {
	.enpy-nav__menu { overflow: visible; }
}

/* 3) En el cajon, "Más" era una fila muerta: sus hijas ya se listan siempre
   debajo (el cajon no pliega submenus), asi que tocarla no hacia nada. Se
   oculta el padre y las hijas quedan como secciones comunes, sin sangria de
   hijas de nadie. */
.enpy-drawer__menu li.menu-item-has-children > a[href="#"] { display: none; }
.enpy-drawer__menu ul a { padding-left: var(--enpy-s5); }

/* --- Cajon movil --- */
.enpy-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.enpy-drawer[data-open="true"] { visibility: visible; pointer-events: auto; }

.enpy-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 15, 0.6);
	opacity: 0;
	transition: opacity 0.2s var(--enpy-ease);
}

.enpy-drawer[data-open="true"] .enpy-drawer__scrim { opacity: 1; }

.enpy-drawer__panel {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: min(86vw, 330px);
	display: flex;
	flex-direction: column;
	background: var(--enpy-bg);
	box-shadow: var(--enpy-shadow-lg);
	transform: translateX(-100%);
	transition: transform 0.24s var(--enpy-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.enpy-drawer[data-open="true"] .enpy-drawer__panel { transform: translateX(0); }

.enpy-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s3);
	padding: var(--enpy-s4) var(--enpy-s5);
	border-bottom: 2px solid var(--enpy-rule);
	position: sticky;
	top: 0;
	background: var(--enpy-bg);
	z-index: 2;
}

.enpy-drawer__title {
	font-family: var(--enpy-font-head);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0;
}

.enpy-drawer__body { padding: 0 0 var(--enpy-s8); }
.enpy-drawer__menu, .enpy-drawer__menu ul { margin: 0; padding: 0; list-style: none; }

.enpy-drawer__menu a {
	display: block;
	padding: 0.7rem var(--enpy-s5);
	color: var(--enpy-ink);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-md);
	font-weight: 650;
	border-bottom: 1px solid var(--enpy-line);
}

.enpy-drawer__menu a:hover { background: var(--enpy-bg-2); color: var(--enpy-accent); }

.enpy-drawer__menu ul a {
	padding-left: var(--enpy-s8);
	font-family: var(--enpy-font);
	font-size: var(--enpy-fs-sm);
	font-weight: 550;
	color: var(--enpy-ink-2);
}

.enpy-drawer__foot { padding: var(--enpy-s5); }

/* ==========================================================================
   08 Buscador
   ========================================================================== */

.enpy-searchform { display: flex; align-items: stretch; gap: var(--enpy-s2); width: 100%; }

.enpy-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.6rem var(--enpy-s4);
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius);
	background: var(--enpy-bg);
	color: var(--enpy-ink);
	font-size: var(--enpy-fs-sm);
}

.enpy-searchform__field::placeholder { color: var(--enpy-ink-4); }

.enpy-searchform__field:focus {
	border-color: var(--enpy-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--enpy-brand-soft);
}

.enpy-searchform__submit { flex-shrink: 0; padding-inline: var(--enpy-s5); }

.enpy-searchpanel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.22s var(--enpy-ease);
	background: var(--enpy-bg-2);
	border-top: 1px solid transparent;
}

.enpy-searchpanel[data-open="true"] { grid-template-rows: 1fr; border-top-color: var(--enpy-line); }
.enpy-searchpanel__inner { overflow: hidden; }
.enpy-searchpanel .enpy-container { padding-block: 0; }
.enpy-searchpanel[data-open="true"] .enpy-container { padding-block: var(--enpy-s4); }

/* ==========================================================================
   09 Ultimo momento
   ========================================================================== */

.enpy-ticker {
	border-bottom: 1px solid var(--enpy-line);
	background: var(--enpy-bg);
	overflow: hidden;
}

.enpy-ticker__inner { display: flex; align-items: center; gap: var(--enpy-s4); min-height: 40px; }

.enpy-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
	padding: 0.28rem var(--enpy-s3);
	background: var(--enpy-live);
	color: #fff;
	font-size: var(--enpy-fs-3xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.enpy-ticker__label .enpy-live-btn__dot { width: 5px; height: 5px; }

.enpy-ticker__viewport { position: relative; flex: 1 1 auto; min-width: 0; height: 1.4rem; overflow: hidden; }

.enpy-ticker__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: var(--enpy-s3);
	opacity: 0;
	transform: translateY(60%);
	transition: opacity 0.32s var(--enpy-ease), transform 0.32s var(--enpy-ease);
	pointer-events: none;
}

.enpy-ticker__item[data-active="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }

.enpy-ticker__time {
	flex-shrink: 0;
	font-size: var(--enpy-fs-2xs);
	font-weight: 700;
	color: var(--enpy-accent);
	font-variant-numeric: tabular-nums;
}

.enpy-ticker__item a {
	color: var(--enpy-ink);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.enpy-ticker__item a:hover { color: var(--enpy-accent); }

.enpy-ticker__nav { display: flex; gap: 2px; flex-shrink: 0; }

.enpy-ticker__nav button {
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-sm);
	background: var(--enpy-bg);
	color: var(--enpy-ink-3);
}

.enpy-ticker__nav button:hover { color: var(--enpy-ink); border-color: var(--enpy-line-2); }

.enpy-ticker__nav svg {
	width: 13px; height: 13px;
	fill: none; stroke: currentColor;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   10 Piezas de nota
   ========================================================================== */

.enpy-kicker {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enpy-accent);
	line-height: 1;
	/* Queda por encima del enlace que cubre la tarjeta (.enpy-stretch),
	   para que llevar a la seccion siga siendo posible. */
	position: relative;
	z-index: 2;
}

a.enpy-kicker:hover { color: var(--enpy-brand-strong); }

.enpy-kicker--chip {
	padding: 0.28rem 0.45rem;
	background: var(--enpy-accent);
	color: #fff;
	border-radius: var(--enpy-radius-sm);
}

.enpy-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem var(--enpy-s3);
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	line-height: 1.35;
}

.enpy-meta__item { display: inline-flex; align-items: center; gap: 0.28rem; }
.enpy-meta a { color: var(--enpy-ink-3); font-weight: 600; }
.enpy-meta a:hover { color: var(--enpy-accent); }

.enpy-meta svg {
	width: 12px; height: 12px;
	fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	opacity: 0.7;
}

/* --- Marco de imagen ---
   La proporcion por defecto es 3:2 y no 16:9 por una razon medida, no
   estetica: las fotos que entran al sitio son fotos de prensa. Una muestra
   de lo que sirve abc.com.py da 3500x2333, 1280x853 y 743x495 — todas 3:2
   clavado — y algunas 4:3. Con marcos 16:9 cada foto perdia un 16% de alto,
   las 4:3 un 25%, y las verticales (1440x1920) un 58%: literalmente les
   cortaba la cabeza a las personas.

   Con 3:2 la mayoria entra sin recorte alguno.
   ------------------------------------------------------------------------ */
.enpy-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--enpy-bg-3);
	aspect-ratio: var(--enpy-ar, 3 / 2);
}

.enpy-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Encuadre sesgado hacia arriba: cuando hay que recortar (verticales,
	   4:3), las caras y la accion casi siempre estan por encima del centro.
	   Centrar de verdad es lo que decapita a la gente. */
	object-position: center 34%;
	transition: transform 0.4s var(--enpy-ease);
}

.enpy-card:hover .enpy-thumb img { transform: scale(1.035); }

.enpy-thumb--square { --enpy-ar: 1 / 1; }
.enpy-thumb--wide { --enpy-ar: 2 / 1; }

.enpy-thumb--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--enpy-bg-3) 0%, var(--enpy-bg-2) 100%);
}

.enpy-thumb--empty::after {
	content: "";
	width: 32%;
	max-width: 56px;
	aspect-ratio: 1;
	background: currentColor;
	color: var(--enpy-ink-4);
	opacity: 0.25;
	-webkit-mask: var(--enpy-logo-mask) center / contain no-repeat;
	mask: var(--enpy-logo-mask) center / contain no-repeat;
}

:root {
	--enpy-logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h13a3 3 0 0 1 3 3v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4Zm3 4h7v4H7V8Zm0 6h7v1.5H7V14Zm9-6h1v4h-1V8Z'/%3E%3C/svg%3E");
}

.enpy-thumb__badge { position: absolute; left: var(--enpy-s2); top: var(--enpy-s2); z-index: 2; }

/* --- Tarjeta base --- */
.enpy-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--enpy-s2);
	min-width: 0;
}

.enpy-card__title {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-base);
	font-weight: 650;
	line-height: var(--enpy-lh-snug);
	letter-spacing: -0.011em;
	text-wrap: pretty;
}

.enpy-card__title a { color: var(--enpy-ink); }
.enpy-card:hover .enpy-card__title a,
.enpy-card__title a:hover { color: var(--enpy-accent); }

.enpy-card__excerpt {
	margin: 0;
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-xs);
	line-height: 1.45;
}

.enpy-card__body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

/* --- Alineacion de las tarjetas en grilla ---------------------------------
   Las fotos ya comparten proporcion, asi que lo que descuadraba las filas
   eran los titulares: en la portada van de 2 a 4 lineas, y cada tarjeta
   terminaba con un alto distinto. El resultado era una grilla con el pie
   dentado y, en los bloques de seccion, la lista arrancando a distinta
   altura en cada columna.

   La receta es la de cualquier diario: foto arriba alineada, titular
   acotado a un maximo de lineas, y metadatos empujados al fondo para que
   corten parejo. Un renglon en blanco bajo un titular corto es preferible
   a una fila dentada.
   ------------------------------------------------------------------------ */

.enpy-grid > .enpy-card,
.enpy-lead__strip > .enpy-card,
.enpy-feature__rest > .enpy-card {
	height: 100%;
}

.enpy-grid > .enpy-card > .enpy-card__body,
.enpy-lead__strip > .enpy-card > .enpy-card__body,
.enpy-feature__rest > .enpy-card > .enpy-card__body {
	flex: 1 1 auto;
}

.enpy-grid > .enpy-card .enpy-card__title,
.enpy-lead__strip > .enpy-card .enpy-card__title,
.enpy-feature__rest > .enpy-card .enpy-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Los metadatos, siempre pegados abajo. */
.enpy-grid > .enpy-card .enpy-card__body > .enpy-meta:last-child,
.enpy-lead__strip > .enpy-card .enpy-card__body > .enpy-meta:last-child,
.enpy-feature__rest > .enpy-card .enpy-card__body > .enpy-meta:last-child {
	margin-top: auto;
	padding-top: 0.15rem;
}

/* Renglon de volante + hora, arriba del titular. */
.enpy-card__topline {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem var(--enpy-s2);
	min-width: 0;
}

/* La hora pelada: sin icono, tabular, en el rojo de marca. */
.enpy-meta__stamp {
	font-size: var(--enpy-fs-3xs);
	font-weight: 700;
	color: var(--enpy-accent);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Cuando la nota no trae seccion editorial no hay volante, y la hora queda
   sola: se le saca el color para que no parezca una etiqueta. */
.enpy-card__topline > .enpy-meta:only-child .enpy-meta__stamp { color: var(--enpy-ink-3); }

/* --- Apertura --- */
.enpy-card--hero .enpy-thumb { --enpy-ar: 3 / 2; }

.enpy-card--hero .enpy-card__title {
	font-size: var(--enpy-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.026em;
	line-height: 1.1;
}

.enpy-card--hero .enpy-card__excerpt { font-size: var(--enpy-fs-base); line-height: 1.5; }

.enpy-card--overlay { overflow: hidden; isolation: isolate; }
.enpy-card--overlay .enpy-thumb { --enpy-ar: 4 / 3; }

@media (min-width: 700px) {
	.enpy-card--overlay .enpy-thumb { --enpy-ar: 16 / 10; }
}

.enpy-card--overlay .enpy-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	padding: var(--enpy-s8) var(--enpy-s5) var(--enpy-s5);
	background: var(--enpy-scrim);
	color: #fff;
	gap: var(--enpy-s2);
}

.enpy-card--overlay .enpy-card__title a { color: #fff; }

/* La bajada sobre la foto va a dos lineas y con ancho de lectura acotado:
   a todo el ancho de la apertura serian renglones de 100 caracteres. */
.enpy-card--overlay .enpy-card__excerpt {
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--enpy-fs-sm);
	line-height: 1.45;
	max-width: 54ch;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.enpy-card--overlay .enpy-card__title {
	font-size: var(--enpy-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.026em;
	line-height: 1.1;
}

.enpy-card--overlay .enpy-meta, .enpy-card--overlay .enpy-meta a { color: rgba(255, 255, 255, 0.8); }
.enpy-card--overlay .enpy-kicker { color: #fff; }
.enpy-card--overlay .enpy-kicker--chip { background: var(--enpy-live); }
.enpy-card--overlay:hover .enpy-thumb img { transform: scale(1.04); }

/* --- Lista con miniatura chica (110x70 como los diarios) --- */
.enpy-card--list {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--enpy-s3);
}

.enpy-card--list .enpy-thumb {
	flex: 0 0 var(--enpy-list-thumb, 96px);
	width: var(--enpy-list-thumb, 96px);
	--enpy-ar: 3 / 2;
}

.enpy-card--list .enpy-card__title { font-size: var(--enpy-fs-sm); font-weight: 620; }

@media (min-width: 540px) {
	.enpy-card--list { --enpy-list-thumb: 110px; }
}

.enpy-card--list-lg { --enpy-list-thumb: 168px; gap: var(--enpy-s4); }
.enpy-card--list-lg .enpy-card__title { font-size: var(--enpy-fs-md); font-weight: 700; }

/* --- Solo texto --- */
.enpy-card--text .enpy-card__title { font-size: var(--enpy-fs-sm); font-weight: 620; }

/* --- Ranking --- */
.enpy-card--rank { flex-direction: row; align-items: flex-start; gap: var(--enpy-s3); }

.enpy-card--rank .enpy-card__rank {
	flex-shrink: 0;
	font-family: var(--enpy-font-head);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.05;
	color: var(--enpy-accent);
	font-variant-numeric: tabular-nums;
	min-width: 1.3ch;
	letter-spacing: -0.04em;
}

.enpy-card--rank .enpy-card__title { font-size: var(--enpy-fs-sm); font-weight: 620; }

/* --- Titular pelado, para las columnas densas --- */
.enpy-card--headline { gap: 0.25rem; }

.enpy-card--headline .enpy-card__title {
	font-size: var(--enpy-fs-sm);
	font-weight: 620;
	line-height: 1.3;
}

.enpy-card--headline .enpy-kicker { font-size: 0.625rem; letter-spacing: 0.075em; }

/* --- Alto fijo por item en las columnas de texto ---------------------------
   Titulares de dos lineas exactas: se cortan a la segunda y se reserva ese
   alto aunque el titular ocupe una sola.

   Es la condicion para que las columnas empaten. Con titulares libres, un
   item medía 1, 2 o 3 lineas y el alto de la columna dependia de que notas
   tocaran ese dia: la apertura cerraba distinto en cada recarga. Con items
   de alto fijo, el alto de una columna es cantidad x constante, y elegir
   la cantidad alcanza para que las tres cierren juntas.
   ------------------------------------------------------------------------ */
.enpy-card--headline .enpy-card__title,
.enpy-card--rank .enpy-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
}

/* --- Pilas separadas por filete --- */
.enpy-stack { display: flex; flex-direction: column; }

.enpy-stack > * + * {
	margin-top: var(--enpy-s3);
	padding-top: var(--enpy-s3);
	border-top: 1px solid var(--enpy-line);
}

.enpy-stack--tight > * + * { margin-top: 0.6rem; padding-top: 0.6rem; }
.enpy-stack--loose > * + * { margin-top: var(--enpy-s4); padding-top: var(--enpy-s4); }

/* ==========================================================================
   11 Portada
   ========================================================================== */

.enpy-section { margin-block: var(--enpy-s10); }
.enpy-section:first-child { margin-top: 0; }
.enpy-section--tight { margin-block: var(--enpy-s8); }

.enpy-section--tinted {
	background: var(--enpy-bg-2);
	border-block: 1px solid var(--enpy-line);
	padding-block: var(--enpy-s8);
	margin-block: var(--enpy-s10);
}

/* --- Encabezado de seccion: regla gruesa + nombre --- */
.enpy-sechead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s4);
	margin-bottom: var(--enpy-s4);
	position: relative;
	border-top: 1px solid var(--enpy-line);
	padding-top: 0.55rem;
}

/* El tick de acento sobre el filete fino reemplaza a la regla gruesa
   negra: misma funcion de apertura de seccion, la marca presente, y la
   pagina deja de estar rayada de punta a punta. */
.enpy-sechead::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.75rem;
	height: 3px;
	background: var(--enpy-accent);
}

.enpy-sechead__title {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	line-height: 1.1;
	text-transform: uppercase;
}

.enpy-sechead__title a { color: var(--enpy-ink); }
.enpy-sechead__title a:hover { color: var(--enpy-accent); }

.enpy-sechead__more {
	flex-shrink: 0;
	font-size: var(--enpy-fs-3xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.enpy-sechead__more:hover { color: var(--enpy-accent); }

.enpy-sechead__more::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.3rem;
	transition: transform 0.16s var(--enpy-ease);
}

.enpy-sechead__more:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.enpy-sechead__more::after { transition: none; }
}

.enpy-sechead__more svg {
	width: 12px; height: 12px;
	fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform 0.15s var(--enpy-ease);
}

.enpy-sechead__more:hover svg { transform: translateX(2px); }

/* Variante fina, para columnas internas */
.enpy-sechead--sub { border-top-width: 2px; margin-bottom: var(--enpy-s3); }
.enpy-sechead--sub .enpy-sechead__title { font-size: 0.875rem; }

/* Variante con el nombre en rojo */
.enpy-sechead--accent { border-top-color: var(--enpy-accent); }
.enpy-sechead--accent .enpy-sechead__title { color: var(--enpy-accent); }
.enpy-sechead--accent .enpy-sechead__title a { color: var(--enpy-accent); }

/* --- Apertura de portada ---
   Tres columnas: la principal (apertura + fila de tres secundarias) y dos
   columnas de texto a la derecha.

   El reparto de anchos importa: la columna principal pesa mas del doble que
   cada columna de texto. Con la reticula anterior, de cuatro columnas mas
   parejas, la apertura medía la mitad de alto que "Al minuto" y la portada
   abria con un hueco enorme abajo a la izquierda. */
.enpy-lead {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.enpy-lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0;
	}

	.enpy-lead__main { grid-column: 1 / -1; }

	.enpy-lead__headlines,
	.enpy-lead__rail {
		padding-inline: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
	}

	.enpy-lead__headlines { padding-left: 0; border-left: 0; }
}

@media (min-width: 1060px) {
	.enpy-lead {
		grid-template-columns:
			minmax(0, 2.15fr)	/* apertura + tres secundarias */
			minmax(0, 0.78fr)	/* al minuto */
			minmax(0, 0.72fr);	/* lo mas leido */
		/* stretch, no start: las tres columnas miden lo mismo y sus filetes
		   bajan hasta la misma linea. Con "start" cada una terminaba donde
		   se le acababa el contenido y el pie de la apertura quedaba en
		   escalera. */
		align-items: stretch;
		row-gap: 0;
	}

	/* El sobrante se reparte en partes iguales entre los items, asi los
	   filetes quedan equidistantes en vez de amontonarse arriba dejando un
	   hueco al pie. */
	.enpy-lead__headlines,
	.enpy-lead__rail {
		display: flex;
		flex-direction: column;
	}

	.enpy-lead__headlines > .enpy-stack,
	.enpy-lead__rail > .enpy-stack { flex: 1 1 auto; }

	.enpy-lead__headlines > .enpy-stack > *,
	.enpy-lead__rail > .enpy-stack > * { flex: 1 1 auto; }

	.enpy-lead__main {
		grid-column: auto;
		padding-right: var(--enpy-col-gap);
	}

	.enpy-lead__headlines {
		padding-inline: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
	}

	.enpy-lead__rail { padding-left: var(--enpy-col-gap); padding-right: 0; }
}

/* Fila de tres secundarias debajo de la apertura. */
.enpy-lead__strip {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
	margin-top: var(--enpy-s4);
	padding-top: var(--enpy-s4);
	border-top: 1px solid var(--enpy-line);
}

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

.enpy-lead__rail-title,
.enpy-lead__col-title {
	position: relative;
	margin: 0 0 var(--enpy-s3);
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--enpy-line);
	font-family: var(--enpy-font-head);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink);
}

.enpy-lead__col-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.25rem;
	height: 2px;
	background: var(--enpy-accent);
}

.enpy-lead__rail-title { border-bottom-color: var(--enpy-accent); color: var(--enpy-accent); }

/* --- Franja destacada: una nota grande + tres al costado ---
   Rompe el ritmo despues de "Ultimas noticias". Sin esto, la mitad
   inferior de la portada son bloques identicos apilados. */
.enpy-feature {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1060px) {
	.enpy-feature {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: 0;
		align-items: stretch;
	}

	.enpy-feature__main { padding-right: var(--enpy-col-gap); }

	.enpy-feature__rest {
		padding-left: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
		display: flex;
		flex-direction: column;
	}

	/* La lista se estira hasta el pie de la foto y reparte el sobrante. */
	.enpy-feature__rest > .enpy-stack { flex: 1 1 auto; }
	.enpy-feature__rest > .enpy-stack > * { flex: 1 1 auto; }
}

.enpy-feature__main .enpy-card__title {
	font-size: var(--enpy-fs-xl);
	font-weight: 800;
	letter-spacing: -0.024em;
}

/* Columna de titulares al costado de la foto. No es una grilla de tarjetas:
   la franja tiene una sola imagen y el resto se lee como lista. */
.enpy-feature__rest .enpy-card__title { font-size: var(--enpy-fs-base); }

/* --- Bloque de seccion: una destacada + lista --- */
.enpy-catblock__lead { margin-bottom: var(--enpy-s4); }

.enpy-catblock__lead .enpy-card__title {
	font-size: var(--enpy-fs-md);
	font-weight: 700;
	line-height: 1.22;

	/* Alto reservado de dos lineas y corte a la tercera.
	   Es lo que hace que las listas de las tres columnas arranquen a la
	   misma altura: si el titular de una seccion ocupa dos lineas y el de
	   la de al lado tres, los bloques quedan corridos entre si y la grilla
	   se lee desordenada. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(2 * 1.22em);
}

/* --- Rejilla de bloques de seccion ---
   Columnas separadas por regla vertical y filas por regla horizontal, como
   la pagina de un diario. Con seis bloques son dos filas exactas de tres. */
.enpy-catgrid {
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
}

.enpy-catgrid > * { padding-block: var(--enpy-s6); }

/* Los seis bloques comparten estructura (una foto de apertura + cuatro
   titulares de dos lineas), asi que su alto natural ya casi coincide. Esto
   absorbe la diferencia que queda y hace que todos cierren a la misma
   altura dentro de su fila. */
.enpy-catgrid > section { display: flex; flex-direction: column; }
.enpy-catgrid > section > .enpy-stack { flex: 1 1 auto; }
.enpy-catgrid > section > .enpy-stack > * { flex: 1 1 auto; }

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

	.enpy-catgrid > * {
		padding-inline: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
	}

	.enpy-catgrid > *:nth-child(2n + 1) { padding-left: 0; border-left: 0; }

	/* Regla horizontal a partir de la segunda fila. */
	.enpy-catgrid > *:nth-child(n + 3) { border-top: 1px solid var(--enpy-line); }
}

@media (min-width: 1060px) {
	.enpy-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.enpy-catgrid > *:nth-child(2n + 1) { padding-left: var(--enpy-col-gap); border-left: 1px solid var(--enpy-line); }
	.enpy-catgrid > *:nth-child(3n + 1) { padding-left: 0; border-left: 0; }

	/* A tres columnas la segunda fila arranca en el cuarto bloque. */
	.enpy-catgrid > *:nth-child(n + 3) { border-top: 0; }
	.enpy-catgrid > *:nth-child(n + 4) { border-top: 1px solid var(--enpy-line); }
}

/* --- Franja de servicios --- */
.enpy-services {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	overflow: hidden;
}

.enpy-service {
	display: flex;
	align-items: center;
	gap: var(--enpy-s3);
	padding: 0.7rem var(--enpy-s4);
	border-left: 1px solid var(--enpy-line);
	color: var(--enpy-ink);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-xs);
	font-weight: 650;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	transition: background-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease);
}

.enpy-service:first-child { border-left: 0; }
.enpy-service:hover { background: var(--enpy-bg-2); color: var(--enpy-accent); }

.enpy-service__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 26px; height: 26px;
	color: var(--enpy-accent);
}

.enpy-service__icon svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   12 Archivos y paginacion
   ========================================================================== */

.enpy-archive-head {
	margin-bottom: var(--enpy-s6);
	border-top: 4px solid var(--enpy-rule);
	padding-top: var(--enpy-s3);
}

.enpy-archive-head__eyebrow {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--enpy-accent);
}

.enpy-archive-head__title {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xl);
	font-weight: 800;
	letter-spacing: -0.026em;
}

.enpy-archive-head__desc {
	margin: var(--enpy-s3) 0 0;
	max-width: 68ch;
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-sm);
	line-height: 1.55;
}

.enpy-archive-head__count { margin-top: 0.35rem; font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); }

.enpy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enpy-s2);
	margin: 0 0 var(--enpy-s6);
	padding: 0 0 var(--enpy-s4);
	border-bottom: 1px solid var(--enpy-line);
	list-style: none;
}

.enpy-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem var(--enpy-s3);
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius-pill);
	background: var(--enpy-bg);
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-2xs);
	font-weight: 650;
	white-space: nowrap;
}

.enpy-chip:hover, .enpy-chip[aria-current="page"] {
	background: var(--enpy-accent);
	border-color: var(--enpy-accent);
	color: #fff;
}

.enpy-pagination { margin-top: var(--enpy-s8); padding-top: var(--enpy-s5); border-top: 1px solid var(--enpy-line); }

.enpy-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--enpy-s2);
}

.enpy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding-inline: var(--enpy-s3);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	background: var(--enpy-bg);
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-sm);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease);
}

.enpy-pagination .page-numbers:hover { border-color: var(--enpy-ink-4); color: var(--enpy-ink); }

.enpy-pagination .page-numbers.current {
	background: var(--enpy-accent);
	border-color: var(--enpy-accent);
	color: #fff;
}

.enpy-pagination .page-numbers.dots { border-color: transparent; background: none; }

.enpy-empty {
	padding: var(--enpy-s12) var(--enpy-s5);
	text-align: center;
	border: 1px solid var(--enpy-line);
	background: var(--enpy-bg-2);
}

.enpy-empty__title { margin: 0 0 var(--enpy-s3); font-size: var(--enpy-fs-xl); }
.enpy-empty__text { margin: 0 auto var(--enpy-s5); max-width: 46ch; color: var(--enpy-ink-2); font-size: var(--enpy-fs-sm); }
.enpy-empty .enpy-searchform { max-width: 440px; margin-inline: auto; }

/* ==========================================================================
   13 Nota individual
   ========================================================================== */

/* La nota va sin sidebar: sin tope, todo (titulo, figura, filetes) se
   estira a los ~1140px del contenedor y la foto sale enorme. 56rem es la
   columna de lectura; el cuerpo adentro sigue acotado a 66ch. */
.enpy-main-col--article { width: 100%; max-width: 56rem; margin-inline: auto; }

.enpy-breadcrumb { margin-bottom: var(--enpy-s4); font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); }

.enpy-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0; padding: 0;
	list-style: none;
}

.enpy-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.3rem; color: var(--enpy-ink-4); }
.enpy-breadcrumb a { color: var(--enpy-ink-3); font-weight: 600; }
.enpy-breadcrumb a:hover { color: var(--enpy-accent); }
.enpy-breadcrumb [aria-current="page"] { color: var(--enpy-ink-2); }

.enpy-article__header { margin-bottom: var(--enpy-s5); }
.enpy-article__kicker { margin-bottom: var(--enpy-s3); }

.enpy-article__title {
	margin: 0 0 var(--enpy-s4);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-3xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;

	/* Sin tope propio: la columna de lectura (56rem) ya acota el renglon.
	   Antes habia un `max-width: 22ch` que, con Archivo a 44px, daba unos
	   530px de los 896 disponibles — un titular de 97 caracteres caia en
	   CINCO lineas apiladas contra el margen izquierdo, con un tercio de la
	   columna vacio a la derecha. Sin el tope, ese mismo titular entra en
	   tres. */
	max-width: none;

	/* Reparte las palabras para que las lineas queden parejas en vez de
	   dejar una ultima linea de una sola palabra. Solo actua en titulares
	   cortos, que es donde se nota; los navegadores que no lo soportan
	   simplemente cortan como siempre. */
	text-wrap: balance;
}

.enpy-article__standfirst {
	margin: 0 0 var(--enpy-s5);
	max-width: 60ch;
	font-size: var(--enpy-fs-md);
	line-height: 1.5;
	color: var(--enpy-ink-2);
	font-weight: 400;
}

.enpy-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s4);
	padding-block: var(--enpy-s3);
	border-block: 1px solid var(--enpy-line);
	font-size: var(--enpy-fs-xs);
}

.enpy-byline { display: flex; align-items: center; gap: var(--enpy-s3); }
/* Monograma: show_avatars esta apagado y get_avatar devolvia un hueco. */
.enpy-byline__avatar {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	font-family: var(--enpy-font-head);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}
.enpy-byline__name { font-weight: 700; color: var(--enpy-ink); }
.enpy-byline__name a { color: var(--enpy-ink); }
.enpy-byline__name a:hover { color: var(--enpy-accent); }
.enpy-byline__dates { color: var(--enpy-ink-3); font-size: var(--enpy-fs-2xs); margin-top: 0.05rem; }

.enpy-article__figure { margin: 0 0 var(--enpy-s6); }

/* Marco fijo 16:9 con tope de 480px: FIFU declara 1200x800 para cualquier
   foto (las dimensiones reales no se conocen), asi que la geometria la
   dicta el marco, no la imagen — una vertical ya no ocupa la pantalla. */
.enpy-article__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-height: 480px;
	border-radius: var(--enpy-radius-lg);
	background: var(--enpy-bg-3);
}

.enpy-article__media img,
.enpy-article__media iframe,
.enpy-article__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 34%;
	border: 0;
}

.enpy-article__figure figcaption {
	margin-top: var(--enpy-s2);
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	line-height: 1.5;
	border-left: 2px solid var(--enpy-accent);
	padding-left: var(--enpy-s3);
}

.enpy-share { display: flex; align-items: center; gap: var(--enpy-s2); flex-wrap: wrap; }

.enpy-share__label {
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
	margin-right: 0.15rem;
}

.enpy-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	background: transparent;
	color: var(--enpy-ink-2);
	transition: background-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease);
}

.enpy-share__btn:hover { background: var(--enpy-accent); border-color: var(--enpy-accent); color: #fff; }
.enpy-share__btn svg { width: 15px; height: 15px; fill: currentColor; }
.enpy-share__btn[data-copied="true"] { background: #17794a; border-color: #17794a; color: #fff; }

/* --- Cuerpo --- */
.enpy-content { font-size: 1.0625rem; line-height: var(--enpy-lh-relaxed); color: var(--enpy-ink); }

@media (min-width: 768px) {
	.enpy-content { font-size: 1.125rem; }
}

.enpy-content > * { max-width: 66ch; }

.enpy-content > .alignwide,
.enpy-content > .alignfull,
.enpy-content > figure,
.enpy-content > .wp-block-image,
.enpy-content > .wp-block-embed,
.enpy-content > .wp-block-table,
.enpy-content > .wp-block-gallery,
.enpy-content > pre,
.enpy-content > .enpy-scroll-x { max-width: none; }

.enpy-content p { margin: 0 0 var(--enpy-s5); }

.enpy-content h2, .enpy-content h3, .enpy-content h4 {
	margin: var(--enpy-s8) 0 var(--enpy-s3);
	letter-spacing: -0.02em;
}

.enpy-content h2 { font-size: var(--enpy-fs-xl); }
.enpy-content h3 { font-size: var(--enpy-fs-lg); }
.enpy-content h4 { font-size: var(--enpy-fs-md); }

.enpy-content a {
	color: var(--enpy-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	text-decoration-color: color-mix(in srgb, var(--enpy-link) 38%, transparent);
}

.enpy-content a:hover { text-decoration-color: currentColor; }

.enpy-content ul, .enpy-content ol { margin: 0 0 var(--enpy-s5); padding-left: 1.35em; }
.enpy-content li { margin-bottom: 0.4rem; }
.enpy-content li::marker { color: var(--enpy-accent); font-weight: 700; }

.enpy-content img { height: auto; }
.enpy-content figure { margin: var(--enpy-s8) 0; }

.enpy-content figcaption {
	margin-top: var(--enpy-s2);
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	line-height: 1.5;
}

.enpy-content table { width: 100%; border-collapse: collapse; font-size: var(--enpy-fs-sm); margin-bottom: var(--enpy-s6); }
.enpy-content th, .enpy-content td { padding: var(--enpy-s3); border: 1px solid var(--enpy-line); text-align: left; }
.enpy-content th { background: var(--enpy-bg-2); font-weight: 700; }

.enpy-content .wp-block-table,
.enpy-content .enpy-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Publicidad dentro del cuerpo (bloques de wp-automatic) ---
   min-height reserva el alto tipico de la unidad responsiva: sin eso el
   anuncio llega tarde (LiteSpeed difiere el JS) y empuja todo el texto
   hacia abajo — el peor CLS de la nota. Si AdSense no llena la unidad, el
   propio script la marca data-ad-status="unfilled" y aca se colapsa
   (mecanismo documentado por Google, permitido). */
.enpy-content ins.adsbygoogle {
	display: block;
	margin: var(--enpy-s6) auto;
	min-height: 250px;
	background: var(--enpy-bg-2);
	border-radius: var(--enpy-radius-lg);
}

.enpy-content ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none;
	min-height: 0;
}

.enpy-tags--bare { border-top: 0; padding-top: 0; }

.enpy-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--enpy-s2);
	margin-top: var(--enpy-s6);
	padding-top: var(--enpy-s4);
	border-top: 1px solid var(--enpy-line);
}

.enpy-tags__label {
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
}

.enpy-tags a {
	display: inline-flex;
	padding: 0.28rem var(--enpy-s3);
	border-radius: var(--enpy-radius-pill);
	background: var(--enpy-bg-2);
	border: 1px solid var(--enpy-line);
	color: var(--enpy-ink-2);
	font-size: var(--enpy-fs-2xs);
	font-weight: 600;
}

.enpy-tags a:hover { background: var(--enpy-accent); border-color: var(--enpy-accent); color: #fff; }

.enpy-postnav { display: grid; gap: var(--enpy-s3); margin-top: var(--enpy-s6); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
	.enpy-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.enpy-postnav__link {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: var(--enpy-s4);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	transition: border-color 0.14s var(--enpy-ease), background-color 0.14s var(--enpy-ease);
}

.enpy-postnav__link:hover { border-color: var(--enpy-accent); background: var(--enpy-bg-2); }

.enpy-postnav__dir {
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
}

.enpy-postnav__title {
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 650;
	line-height: 1.3;
	color: var(--enpy-ink);
}

.enpy-postnav__link--next { text-align: right; }

.enpy-related { margin-top: var(--enpy-s10); }

.enpy-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; pointer-events: none; }
.enpy-progress__bar { height: 100%; width: 0; background: var(--enpy-accent); transition: width 0.08s linear; }

/* ==========================================================================
   14 Barra lateral
   ========================================================================== */

.enpy-sidebar { min-width: 0; }

@media (min-width: 1060px) {
	.enpy-sidebar__sticky { position: sticky; top: var(--enpy-s5); }
}

.enpy-widget { margin-bottom: var(--enpy-s8); }
.enpy-widget:last-child { margin-bottom: 0; }

.enpy-widget__title,
.enpy-sidebar .widget-title,
.enpy-sidebar .wp-block-heading {
	margin: 0 0 var(--enpy-s3);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--enpy-rule);
	font-family: var(--enpy-font-head);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink);
}

.enpy-sidebar ul { margin: 0; padding: 0; list-style: none; }
.enpy-sidebar li { padding: 0.45rem 0; border-bottom: 1px solid var(--enpy-line); font-size: var(--enpy-fs-sm); }
.enpy-sidebar li a { color: var(--enpy-ink-2); font-weight: 600; }
.enpy-sidebar li a:hover { color: var(--enpy-accent); }

.enpy-promo {
	padding: var(--enpy-s5);
	background: var(--enpy-bg-invert);
	color: var(--enpy-bg);
	text-align: center;
}

.enpy-promo__title { margin: 0 0 var(--enpy-s2); font-size: var(--enpy-fs-lg); color: inherit; }
.enpy-promo__text { margin: 0 0 var(--enpy-s4); font-size: var(--enpy-fs-sm); opacity: 0.78; }

.enpy-ad {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: var(--enpy-s6);
	min-height: var(--enpy-ad-h, 90px);
	background: var(--enpy-bg-2);
	border: 1px solid var(--enpy-line);
	overflow: hidden;
}

.enpy-ad::before {
	content: "Publicidad";
	position: absolute;
	font-size: var(--enpy-fs-3xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--enpy-ink-4);
	pointer-events: none;
}

.enpy-ad--rect { --enpy-ad-h: 250px; }
.enpy-ad--tall { --enpy-ad-h: 600px; }

/* ==========================================================================
   15 Pie
   ========================================================================== */

.enpy-footer {
	margin-top: var(--enpy-s12);
	background: var(--enpy-bg-invert);
	color: color-mix(in srgb, var(--enpy-bg) 74%, transparent);
	font-size: var(--enpy-fs-sm);
}

.enpy-footer a { color: color-mix(in srgb, var(--enpy-bg) 74%, transparent); }
.enpy-footer a:hover { color: var(--enpy-bg); }

.enpy-footer__main {
	display: grid;
	gap: var(--enpy-s8);
	padding-block: var(--enpy-s10);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.enpy-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.enpy-footer__main {
		grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
		gap: var(--enpy-s10);
	}
}

.enpy-footer__brand-title {
	margin: 0 0 var(--enpy-s3);
	font-family: var(--enpy-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--enpy-bg);
}

.enpy-footer__brand-title .enpy-brand__accent { color: var(--enpy-brand); }

.enpy-footer__about {
	margin: 0 0 var(--enpy-s5);
	max-width: 44ch;
	line-height: 1.6;
	font-size: var(--enpy-fs-xs);
}

.enpy-footer__coltitle {
	margin: 0 0 var(--enpy-s3);
	padding-bottom: 0.4rem;
	border-bottom: 1px solid color-mix(in srgb, var(--enpy-bg) 18%, transparent);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--enpy-bg);
}

.enpy-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.enpy-footer__list a { font-size: var(--enpy-fs-xs); font-weight: 550; }

.enpy-social { display: flex; gap: var(--enpy-s2); margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }

.enpy-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: var(--enpy-radius);
	background: color-mix(in srgb, var(--enpy-bg) 10%, transparent);
	transition: background-color 0.14s var(--enpy-ease);
}

.enpy-social a:hover { background: var(--enpy-brand); color: #fff; }
.enpy-social svg { width: 16px; height: 16px; fill: currentColor; }

.enpy-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--enpy-bg) 12%, transparent);
	padding-block: var(--enpy-s4);
}

.enpy-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s3);
	font-size: var(--enpy-fs-2xs);
}

.enpy-footer__legal { display: flex; flex-wrap: wrap; gap: var(--enpy-s4); margin: 0; padding: 0; list-style: none; }

.enpy-totop {
	position: fixed;
	right: var(--enpy-s5);
	bottom: var(--enpy-s5);
	z-index: 80;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--enpy-line);
	background: var(--enpy-bg);
	color: var(--enpy-ink-2);
	box-shadow: var(--enpy-shadow);
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.18s var(--enpy-ease), transform 0.18s var(--enpy-ease), visibility 0.18s;
}

body.enpy-has-player .enpy-totop { bottom: calc(88px + var(--enpy-s4)); }
.enpy-totop[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.enpy-totop:hover { color: var(--enpy-accent); border-color: var(--enpy-accent); }

.enpy-totop svg {
	width: 17px; height: 17px;
	fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   16 Formularios y comentarios
   ========================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	width: 100%;
	padding: 0.6rem var(--enpy-s4);
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius);
	background: var(--enpy-bg);
	color: var(--enpy-ink);
	font-size: var(--enpy-fs-sm);
	transition: border-color 0.14s var(--enpy-ease), box-shadow 0.14s var(--enpy-ease);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--enpy-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--enpy-brand-soft);
}

textarea { min-height: 150px; resize: vertical; }
label { display: inline-block; margin-bottom: 0.35rem; font-size: var(--enpy-fs-sm); font-weight: 650; }

input[type="submit"], button[type="submit"], .submit input {
	width: auto;
	padding: 0.6rem var(--enpy-s6);
	border: 0;
	border-radius: var(--enpy-radius);
	background: var(--enpy-accent);
	color: #fff;
	font-size: var(--enpy-fs-sm);
	font-weight: 650;
	cursor: pointer;
}

input[type="submit"]:hover, button[type="submit"]:hover { background: var(--enpy-brand-strong); }

.enpy-comments { margin-top: var(--enpy-s10); padding-top: var(--enpy-s6); border-top: 3px solid var(--enpy-rule); }
.enpy-comments__title { font-size: var(--enpy-fs-lg); margin-bottom: var(--enpy-s5); }

.comment-list, .comment-list .children { margin: 0; padding: 0; list-style: none; }
.comment-list .children { margin-left: var(--enpy-s5); padding-left: var(--enpy-s4); border-left: 2px solid var(--enpy-line); }
.comment-body { padding: var(--enpy-s4) 0; border-bottom: 1px solid var(--enpy-line); }

.comment-author { display: flex; align-items: center; gap: var(--enpy-s3); margin-bottom: var(--enpy-s2); font-size: var(--enpy-fs-sm); font-weight: 700; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); margin-bottom: var(--enpy-s2); }
.comment-form p { margin-bottom: var(--enpy-s4); }

/* ==========================================================================
   17 Contenido embebido
   ========================================================================== */

.wp-block-embed__wrapper, .enpy-embed { position: relative; }

.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.enpy-embed--video { aspect-ratio: 16 / 9; }

.wp-block-embed.is-type-video .wp-block-embed__wrapper > iframe,
.enpy-embed--video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.alignleft { float: left; margin: 0 var(--enpy-s5) var(--enpy-s4) 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 var(--enpy-s4) var(--enpy-s5); max-width: 50%; }
.aligncenter { margin-inline: auto; }
.alignwide { width: min(100%, 1000px); margin-inline: auto; }
.alignfull { width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); margin-top: var(--enpy-s2); }

.sticky .enpy-card__title::before { content: "★ "; color: var(--enpy-accent); }

/* ==========================================================================
   18 Integraciones
   ========================================================================== */

.enpy-player-bar, #enpy-player-bar, .wp-radio-player-bar { z-index: 190; }

/* El listado de emisoras lo renderiza y estila el tema en la seccion 20.
   Aca vivia un bloque que estilaba el markup del plugin, de cuando el
   listado lo generaba el. Se elimino porque competia con el nuevo: sus
   selectores (.wp-radio-listing .listing-thumbnail img) tienen mas
   especificidad que los propios (.enpy-station__logo img), asi que le
   ganaban aunque fueran antes en el archivo — la especificidad manda sobre
   el orden. El logo terminaba a 50px en vez de los 56 definidos.

   Si alguna vez se vuelve al markup del plugin, hay que reescribirlo, no
   restaurarlo tal cual. */

.frequency-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem var(--enpy-s3);
	border-radius: var(--enpy-radius-pill);
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	font-size: var(--enpy-fs-2xs);
	font-weight: 700;
}

.enpy-service-page .enpy-content > * { max-width: none; }

/* ==========================================================================
   19 Accesibilidad e impresion
   ========================================================================== */

.enpy-skiplink { position: absolute; left: -9999px; top: 0; z-index: 999; }

.enpy-skiplink:focus {
	left: var(--enpy-s3);
	top: var(--enpy-s3);
	padding: var(--enpy-s3) var(--enpy-s5);
	background: var(--enpy-bg);
	border: 2px solid var(--enpy-brand);
	border-radius: var(--enpy-radius);
	font-weight: 700;
}

body.admin-bar .enpy-header--sticky .enpy-nav { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .enpy-header--sticky .enpy-nav { top: 46px; }
}

@media print {
	.enpy-header, .enpy-footer, .enpy-sidebar, .enpy-share, .enpy-related,
	.enpy-postnav, .enpy-totop, .enpy-progress, .enpy-ticker, .enpy-ad { display: none !important; }

	body { background: #fff; color: #000; }
	.enpy-content { font-size: 11pt; }
	.enpy-content a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   20 Página de radios en vivo
   El activo fuerte de esta página son los logos: las 49 emisoras tienen uno.
   Por eso la tarjeta se construye alrededor del logo y no del texto — los
   nombres ("Radio Uno", "Radio Amor", "Radio Libre") se parecen mucho entre
   sí, pero los logos se reconocen de un vistazo.
   ========================================================================== */

.enpy-radio { margin-block: var(--enpy-s6); }

/* --- Barra de busqueda y filtros --- */
.enpy-radio__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enpy-s3) var(--enpy-s4);
	margin-bottom: var(--enpy-s5);
	padding-bottom: var(--enpy-s4);
	border-bottom: 2px solid var(--enpy-rule);
}

.enpy-radio__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 260px;
	min-width: 0;
}

.enpy-radio__search svg {
	position: absolute;
	left: 12px;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: var(--enpy-ink-3);
	stroke-width: 1.9;
	stroke-linecap: round;
	pointer-events: none;
}

.enpy-radio__search input {
	width: 100%;
	padding: 0.62rem var(--enpy-s4) 0.62rem 2.35rem;
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius);
	background: var(--enpy-bg);
	font-size: var(--enpy-fs-sm);
}

.enpy-radio__search input::-webkit-search-cancel-button { cursor: pointer; }

.enpy-radio__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius);
	overflow: hidden;
}

.enpy-radio__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem var(--enpy-s4);
	border: 0;
	border-left: 1px solid var(--enpy-line-2);
	background: var(--enpy-bg);
	color: var(--enpy-ink-2);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-xs);
	font-weight: 650;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease);
}

.enpy-radio__tab:first-child { border-left: 0; }
.enpy-radio__tab:hover { background: var(--enpy-bg-2); color: var(--enpy-ink); }

.enpy-radio__tab[aria-selected="true"] {
	background: var(--enpy-accent);
	color: #fff;
}

.enpy-radio__count {
	font-size: var(--enpy-fs-3xs);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

.enpy-radio__tab[aria-selected="true"] .enpy-radio__count { opacity: 0.85; }

.enpy-radio__empty {
	padding: var(--enpy-s10) var(--enpy-s5);
	text-align: center;
	color: var(--enpy-ink-3);
	font-size: var(--enpy-fs-sm);
	border: 1px dashed var(--enpy-line-2);
	border-radius: var(--enpy-radius);
}

/* --- Lista: una emisora por fila ---
   En fila y no en grilla, que es como estaba y como se lee un dial: de
   arriba hacia abajo. El orden es el original del plugin (las emisoras mas
   nuevas primero), no alfabetico. */
.enpy-radio__wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius);
	overflow: hidden;
}

/* --- Fila de emisora --- */
.enpy-station {
	position: relative;
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--enpy-s4);
	padding: var(--enpy-s4);
	border-top: 1px solid var(--enpy-line);
	background: var(--enpy-bg);
	transition: background-color 0.14s var(--enpy-ease);
}

/* La primera fila no lleva filete: ya lo pone el borde del contenedor. */
.enpy-station:first-child { border-top: 0; }

.enpy-station:hover { background: var(--enpy-bg-2); }

.enpy-station[hidden] { display: none; }

/* El logo es el ancla visual. Fondo neutro propio porque muchos logos son
   PNG con transparencia pensados para fondo claro. */
/* Los 49 logos son cuadrados (medido: ratio 1.00, ninguno apaisado), así
   que el marco va cuadrado y con cover: llenan de borde a borde y no queda
   aire alrededor. Varios son chicos (92px, 120px), por eso el marco se
   mantiene en 56px — agrandarlo los pixelaría. */
.enpy-station__logo {
	width: 72px;
	height: 72px;
	aspect-ratio: 1;
	border-radius: var(--enpy-radius);
	overflow: hidden;
	background: var(--enpy-bg-3);
	display: block;
}

.enpy-station__logo a { display: block; width: 100%; height: 100%; }

.enpy-station__logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.enpy-station__body { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }

/* Renglon de datos: dial, sitio propio y ficha. El sitio esta cargado en 42
   de las 49 emisoras, asi que casi todas muestran algo aca. */
.enpy-station__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem var(--enpy-s3);
	margin-top: 0.1rem;
}

.enpy-station__web,
.enpy-station__more {
	font-size: var(--enpy-fs-3xs);
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--enpy-ink-3);
	position: relative;
	padding-left: var(--enpy-s3);
}

/* Separador entre datos, sin meter markup de mas. */
.enpy-station__web::before,
.enpy-station__more::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 50%;
	background: var(--enpy-line-2);
}

.enpy-station__web:hover,
.enpy-station__more:hover { color: var(--enpy-accent); }

.enpy-station__name {
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-md);
	font-weight: 700;
	line-height: 1.22;
	color: var(--enpy-ink);
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.enpy-station__name:hover { color: var(--enpy-accent); }

.enpy-station__slogan {
	display: block;
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dial: la banda en versalitas y el número en tabular, como se lee un dial */
.enpy-station__dial {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.2rem 0.42rem;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-sm);
	background: var(--enpy-bg-2);
	font-family: var(--enpy-font-head);
	line-height: 1;
}

.enpy-station__band {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--enpy-ink-4);
}

.enpy-station__freq {
	font-size: var(--enpy-fs-2xs);
	font-weight: 700;
	color: var(--enpy-ink-2);
	font-variant-numeric: tabular-nums;
}

/* --- Botón de reproducción --- */
.enpy-station .play-btn {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	/* Tinte de marca en reposo: 49 botones grises leian como decoracion;
	   con el tinte se entiende de un vistazo que toda fila es reproducible. */
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	display: grid;
	place-items: center;
	transition: background-color 0.15s var(--enpy-ease), color 0.15s var(--enpy-ease), transform 0.15s var(--enpy-ease);
}

.enpy-station:hover .play-btn { background: var(--enpy-accent); color: #fff; }
.enpy-station .play-btn:hover { transform: scale(1.06); }

.enpy-station .play-btn .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	line-height: 1;
}

/* --- Estados: el contrato del JS del reproductor (enpy-radio-305.js) ---

   El JS maneja DOS clases distintas y no significan lo mismo:

     .play-btn.active          REPRODUCIENDO — se pone en vPlaying() y se
                               quita en vPaused()/clearListing().
     .play-btn.buffering       CARGANDO el stream.
     .wp-radio-listing.active  emisora SELECCIONADA — persiste al pausar y
                               se pone incluso al restaurar la sesion sin
                               reproducir (markRow no se limpia en vPaused).

   Los indicadores de reproduccion (icono de pausa, boton rojo, barras "al
   aire") deben colgarse del ESTADO DEL BOTON, nunca de la fila. Se hizo al
   reves una vez y el sintoma fue exactamente una desincronizacion: al
   pausar —o al volver a la pagina con una emisora recordada— la fila seguia
   mostrando pausa y las barras latiendo sin sonar nada.

   La fila .active queda como estado "seleccionada": resaltado suave. */

/* Iconos: play por defecto; pause solo mientras REPRODUCE. */
.enpy-station .play-btn .dashicons-controls-pause { display: none; }
.enpy-station .play-btn.active .dashicons-controls-play { display: none; }
.enpy-station .play-btn.active .dashicons-controls-pause { display: block; }

/* Emisora seleccionada (sonando o en pausa): resaltado suave. */
.enpy-station.active {
	background: var(--enpy-bg-2);
	box-shadow: inset 3px 0 0 var(--enpy-line-2);
}

/* Reproduciendo de verdad: estado fuerte, colgado del boton. */
.enpy-station .play-btn.active { background: var(--enpy-live); color: #fff; }

.enpy-station:has(.play-btn.active) {
	background: var(--enpy-brand-soft);
	box-shadow: inset 3px 0 0 var(--enpy-live);
}

.enpy-station:has(.play-btn.active) .enpy-station__band { color: var(--enpy-live); }

/* Cargando: el borde late en ambar mientras el stream conecta. */
.enpy-station .play-btn.buffering { background: var(--enpy-ink-3); color: #fff; }

/* --- Equalizador ---------------------------------------------------------
   Cuatro barras que bailan SOLO mientras la emisora reproduce de verdad
   (colgado de :has(.play-btn.active), el estado que el JS quita al pausar).

   Es animacion sincronizada con el ESTADO de reproduccion, no un analisis
   FFT del audio. La version FFT se descarto con datos: 3 de 14 streams
   muestreados no envian CORS, y pasar el audio por Web Audio API los
   silenciaria por completo (createMediaElementSource es irreversible).
   Romper radios por unas barras no es un intercambio aceptable.

   Cada barra tiene duracion y retardo propios, primos entre si, para que el
   patron no se repita de forma visible. transform: scaleY es barato (GPU) y
   con 1 sola emisora sonando hay 4 animaciones activas en total. */
.enpy-eq {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 13px;
	align-self: center;
}

.enpy-eq i {
	width: 3px;
	height: 100%;
	border-radius: 1.5px;
	background: var(--enpy-live);
	transform-origin: bottom;
	transform: scaleY(0.3);
}

.enpy-station:has(.play-btn.active) .enpy-eq { display: inline-flex; }

.enpy-station:has(.play-btn.active) .enpy-eq i { animation: enpy-eq-dance 0.9s ease-in-out infinite alternate; }
.enpy-station:has(.play-btn.active) .enpy-eq i:nth-child(1) { animation-duration: 0.73s; }
.enpy-station:has(.play-btn.active) .enpy-eq i:nth-child(2) { animation-duration: 1.01s; animation-delay: -0.35s; }
.enpy-station:has(.play-btn.active) .enpy-eq i:nth-child(3) { animation-duration: 0.61s; animation-delay: -0.15s; }
.enpy-station:has(.play-btn.active) .enpy-eq i:nth-child(4) { animation-duration: 0.89s; animation-delay: -0.55s; }

@keyframes enpy-eq-dance {
	0%   { transform: scaleY(0.25); }
	35%  { transform: scaleY(0.85); }
	60%  { transform: scaleY(0.45); }
	100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.enpy-station:has(.play-btn.active) .enpy-eq i { animation: none; transform: scaleY(0.6); }
}

/* La barra inferior del reproductor: mismas barras junto a "EN VIVO",
   colgadas del estado is-playing que maneja el JS del plugin. */
.enpy-player .enpy-badge-txt { position: relative; padding-left: 16px; }

.enpy-player .enpy-badge-txt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -5.5px;
	background: currentColor;
	-webkit-mask: var(--enpy-onair-mask) center / contain no-repeat;
	mask: var(--enpy-onair-mask) center / contain no-repeat;
	opacity: 0.4;
}

.enpy-player.is-playing .enpy-badge-txt::before {
	opacity: 1;
	animation: enpy-onair 0.8s ease-in-out infinite alternate;
}

:root {
	--enpy-onair-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='0' y='3' width='3' height='9' rx='1'/%3E%3Crect x='4.5' y='0' width='3' height='12' rx='1'/%3E%3Crect x='9' y='5' width='3' height='7' rx='1'/%3E%3C/svg%3E");
}

@keyframes enpy-onair {
	from { transform: scaleY(0.55); }
	to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.enpy-player.is-playing .enpy-badge-txt::before { animation: none; }
}

/* --- Spinner de carga del stream ---
   Portado de wpradio-frontend.css del plugin, que se dejo de cargar porque
   le ganaba al CSS del tema y rompia el listado. Es lo unico que se usaba
   de ese archivo. */
.enpy-station .wp-radio-spinner {
	display: none;
	position: absolute;
	inset: 0;
	color: currentColor;
}

.enpy-station .play-btn.buffering .wp-radio-spinner { display: block; }
.enpy-station .play-btn.buffering .dashicons { visibility: hidden; }

.enpy-station .wp-radio-spinner div {
	position: absolute;
	inset: 0;
	transform-origin: 22px 22px;
	animation: enpy-spin 0.7s linear infinite;
}

.enpy-station .wp-radio-spinner div::after {
	content: "";
	display: block;
	position: absolute;
	top: 5px;
	left: 20.5px;
	width: 3px;
	height: 7px;
	border-radius: 20%;
	background: currentColor;
}

.enpy-station .wp-radio-spinner div:nth-child(1) { transform: rotate(0deg);   animation-delay: -0.61s; }
.enpy-station .wp-radio-spinner div:nth-child(2) { transform: rotate(51deg);  animation-delay: -0.51s; }
.enpy-station .wp-radio-spinner div:nth-child(3) { transform: rotate(102deg); animation-delay: -0.41s; }
.enpy-station .wp-radio-spinner div:nth-child(4) { transform: rotate(153deg); animation-delay: -0.31s; }
.enpy-station .wp-radio-spinner div:nth-child(5) { transform: rotate(204deg); animation-delay: -0.21s; }
.enpy-station .wp-radio-spinner div:nth-child(6) { transform: rotate(255deg); animation-delay: -0.11s; }
.enpy-station .wp-radio-spinner div:nth-child(7) { transform: rotate(306deg); animation-delay: -0.01s; }

@keyframes enpy-spin {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.2; }
}

/* El plugin ya no aporta reglas para estos contenedores: se neutralizan
   por si alguna capa de cache sirviera su CSS viejo. */
.enpy-radio .wp-radio-listings,
.enpy-radio .wp-radio-listing-wrap {
	padding: 0;
	margin: 0;
	justify-self: auto;
	align-items: stretch;
}

/* --- Ajustes al contenedor de WPBakery de esta página --- */
.enpy-service-page .wpb_column .enpy-radio { margin-top: 0; }


/* ==========================================================================
   21 Bloque "Lo más leído" (columna lateral)
   ========================================================================== */

/* Sin sticky: con ocho tarjetas el bloque mide mas que la ventana, asi que
   position:sticky no tendria ningun efecto. */
.enpy-leidas { position: static; }

.enpy-leidas__title {
	margin: 0 0 var(--enpy-s4);
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--enpy-accent);
	font-family: var(--enpy-font-head);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--enpy-accent);
}

.enpy-leidas__list { margin: 0; padding: 0; list-style: none; }

/* Miniatura a la izquierda y texto al lado.
   El ancho es el recurso escaso: la columna mide ~340px. Con miniatura de
   124px MAS el numero en la fila, al titular le quedaban unos 200px y se
   cortaba a mitad de palabra. Con 88px y el numero encima de la foto, el
   texto se queda con ~240px.

   ORDEN — las tres reglas que hacen que las filas se vean parejas:
   1. El titular reserva SIEMPRE tres lineas de alto, ocupe una o tres. Sin
      eso cada fila medía distinto segun el titular que tocara.
   2. La fecha y las vistas van en un solo renglon, sin envolver.
   3. La miniatura se estira hasta el alto de la fila. Antes media 59px
      contra un bloque de texto de 90px, y quedaba un vacio a la izquierda
      de cada nota. */
.enpy-leidas__item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	/* stretch: las dos celdas de la fila miden SIEMPRE lo mismo. */
	align-items: stretch;
	gap: var(--enpy-s3);
	padding: var(--enpy-s4) 0;
	border-top: 1px solid var(--enpy-line);
}

.enpy-leidas__item:first-child { border-top: 0; padding-top: 0; }

/* La celda de la imagen: alta exactamente como la fila, nunca menos de 82px.
   La foto la llena por posicionamiento absoluto, asi que SIEMPRE termina
   donde termina el texto — el hueco debajo de la miniatura que se veia
   antes es geometricamente imposible con esta construccion.

   Venia de intentarlo al reves (que el texto midiera lo que la imagen, con
   alturas reservadas) y nunca cerraba exacto, porque el texto varia entre
   2 y 3 lineas. El recorte resultante de la foto es suave: la fila mide
   82-100px contra 110px de ancho, o sea un ratio 1.1-1.35 partiendo de
   fotos 3:2 — nada que ver con la version vieja de 88x170 que recortaba
   vertical. object-position 34% mantiene las caras en cuadro. */
.enpy-leidas__media {
	position: relative;
	min-height: 82px;
}

.enpy-leidas__thumb {
	position: absolute;
	inset: 0;
	border-radius: var(--enpy-radius);
	overflow: hidden;
	background: var(--enpy-bg-3);
	/* Anula el aspect-ratio de .enpy-thumb: con inset 0 manda la celda. */
	aspect-ratio: auto;
}

.enpy-leidas__thumb img { width: 100%; height: 100%; object-fit: cover; }

.enpy-leidas__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* El numero va sobre la foto para no robarle ancho al titular. */
.enpy-leidas__rank {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	min-width: 20px;
	height: 20px;
	padding-inline: 0.28rem;
	display: grid;
	place-items: center;
	background: var(--enpy-accent);
	color: #fff;
	border-radius: var(--enpy-radius) 0 var(--enpy-radius-sm) 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-3xs);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.enpy-leidas__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	align-items: flex-start;
	justify-content: flex-start;
}

.enpy-leidas__headline {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 650;
	line-height: 1.28;
	letter-spacing: -0.008em;
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	/* Sin min-height a proposito. Reservar 3 lineas siempre dejaba un hueco
	   vacio en las notas de titular corto (2 lineas), porque el texto
	   quedaba mas alto que la miniatura de 82px y no llegaban a coincidir.
	   Las filas de una lista de noticias no tienen por que medir todas
	   igual: alcanza con que la miniatura y su propio texto queden
	   proporcionados entre si. line-clamp:3 sigue actuando como techo para
	   los titulares largos. */
}

.enpy-leidas__headline a { color: var(--enpy-ink); }
.enpy-leidas__headline a:hover { color: var(--enpy-accent); }

.enpy-leidas .enpy-kicker { font-size: 0.625rem; letter-spacing: 0.085em; }

/* Fecha y vistas en un solo renglon.
   Se resuelve SIN flex a proposito: con display:flex y flex-wrap:nowrap
   seguian apareciendo apilados. Como bloque con hijos en linea no hay forma
   de que se separen en dos renglones. */
.enpy-leidas .enpy-meta {
	display: block;
	white-space: nowrap;
	/* Al fondo del cuerpo flex: la fecha queda alineada con el borde
	   inferior de la foto y la fila cierra pareja. */
	margin-top: auto;
	padding-top: 0.25rem;
}

.enpy-leidas .enpy-meta > * { display: inline-flex; vertical-align: middle; }
.enpy-leidas .enpy-meta > * + * { margin-left: var(--enpy-s3); }

@media (max-width: 1059px) {
	.enpy-leidas { margin-top: var(--enpy-s8); }
}


/* ==========================================================================
   22 Modulos del tema dentro del cuerpo de pagina
   CAUSA RAIZ de una tanda de defectos visuales en /radio-en-vivo-en-paraguay:
   los shortcodes [enpy_mas_leidas] y [wp_radio_listing] se renderizan DENTRO
   de .enpy-content, y la tipografia de articulo (pensada para texto corrido)
   les gana por especificidad — .enpy-content h3 (0,1,1) supera a
   .enpy-leidas__headline (0,1,0). Consecuencias que se veian en pantalla:
   margin de 2rem sobre cada titular (el "espacio" señalado con flechas),
   titulares inflados a 20px, subrayado en todos los enlaces, el titulo del
   bloque agrandado y la lista indentada con margenes de <li>.

   Este bloque re-declara esas propiedades CON el prefijo .enpy-content para
   empatar la especificidad y ganar por orden. Si se agrega un modulo nuevo
   que pueda vivir dentro del cuerpo de una pagina, necesita su entrada aca.
   ========================================================================== */

.enpy-content .enpy-leidas__title {
	margin: 0 0 var(--enpy-s4);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

.enpy-content .enpy-leidas__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enpy-content .enpy-leidas__item {
	margin: 0;
	max-width: none;
}

.enpy-content .enpy-leidas__headline {
	margin: 0;
	font-size: var(--enpy-fs-sm);
	letter-spacing: -0.008em;
	line-height: 1.28;
}

.enpy-content .enpy-leidas a,
.enpy-content .enpy-radio a {
	text-decoration: none;
}

.enpy-content .enpy-leidas .enpy-kicker { color: var(--enpy-accent); }
.enpy-content .enpy-leidas__headline a { color: var(--enpy-ink); }
.enpy-content .enpy-leidas__headline a:hover { color: var(--enpy-accent); }
.enpy-content .enpy-radio .station-name { color: var(--enpy-ink); }
.enpy-content .enpy-radio .station-name:hover { color: var(--enpy-accent); }


/* En movil la fila se queda con lo esencial: logo, nombre, dial, eq y play.
   Los enlaces al sitio propio y a la ficha son ruido a ese ancho. */
@media (max-width: 600px) {
	.enpy-station__web,
	.enpy-station__more { display: none; }

	.enpy-station { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.enpy-station__logo { width: 56px; height: 56px; }
}


/* ==========================================================================
   23 Apertura de pagina de categoria
   Una nota grande + dos secundarias, antes de la grilla cronologica. Los
   tres posts salen de la MISMA consulta principal que la grilla: cero
   consultas extra y la paginacion barata intacta.
   ========================================================================== */

.enpy-cathero {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: var(--enpy-s8);
}

@media (min-width: 820px) {
	.enpy-cathero {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		column-gap: 0;
		align-items: stretch;
	}

	.enpy-cathero__main { padding-right: var(--enpy-col-gap); }

	.enpy-cathero__side {
		padding-left: var(--enpy-col-gap);
		border-left: 1px solid var(--enpy-line);
		display: flex;
		flex-direction: column;
	}

	/* Las dos secundarias reparten el alto de la columna y quedan a ras
	   del pie de la apertura. */
	.enpy-cathero__side > * { flex: 1 1 auto; }

	.enpy-cathero__side > * + * {
		margin-top: var(--enpy-s4);
		padding-top: var(--enpy-s4);
		border-top: 1px solid var(--enpy-line);
	}
}

@media (max-width: 819px) {
	.enpy-cathero__side {
		display: flex;
		flex-direction: column;
		gap: var(--enpy-s4);
	}
}

.enpy-cathero__main .enpy-card__title {
	font-size: var(--enpy-fs-xl);
	font-weight: 800;
	letter-spacing: -0.024em;
}

/* El conteo de notas, integrado al renglon del volante del encabezado. */
.enpy-archive-head__tally {
	margin-left: 0.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--enpy-ink-4);
}


/* ==========================================================================
   24 Cartelera de cine
   El tema estila el markup .cc-* del plugin cartelera-cine con los tokens
   de la casa: la paleta sigue al tema claro/oscuro, el rojo queda para
   "Estreno" y las acciones. El plugin ya no encola su CSS (paleta Netflix
   hardcodeada) — ver enpy_cine_drop_plugin_css().

   Todo selector con h2/h3/a/ul/p lleva el prefijo .enpy-content ademas del
   pelado: el shortcode vive dentro del cuerpo de pagina y sin eso la
   tipografia de articulo gana (seccion 22, mismo problema ya documentado).
   ========================================================================== */

/* El heroe del plugin duplica el titulo de la pagina: fuera. */
.cc-hero { display: none; }

.cc-container { max-width: none; }
.cc-section { margin-block: var(--enpy-s8); }
.cc-section:first-child { margin-top: var(--enpy-s4); }

.cc-section-title h2,
.enpy-content .cc-section-title h2 {
	margin: 0 0 var(--enpy-s4);
	padding-top: 0.55rem;
	border-top: 3px solid var(--enpy-rule);
	font-family: var(--enpy-font-head);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

/* --- Grilla de peliculas --- */
/* Columnas EXPLICITAS por corte, no auto-fill: con auto-fill el ancho de
   columna variaba entre recargas segun el viewport y las filas no alineaban
   entre secciones. Fijas: todas las tarjetas miden lo mismo siempre. */
.cc-cartelera-grid {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 560px)  { .cc-cartelera-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 820px)  { .cc-cartelera-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .cc-cartelera-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.pelicula-card,
.estreno-card {
	display: flex;
	flex-direction: column;
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	overflow: hidden;
	transition: transform 0.16s var(--enpy-ease), box-shadow 0.16s var(--enpy-ease), border-color 0.16s var(--enpy-ease);
}

.pelicula-card:hover {
	transform: translateY(-3px);
	border-color: var(--enpy-line-2);
	box-shadow: var(--enpy-shadow-lg);
}

/* Poster 2:3, la proporcion universal del afiche de cine. */
.cc-poster {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--enpy-bg-3);
	overflow: hidden;
}

.cc-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cc-badge {
	position: absolute;
	top: var(--enpy-s2);
	left: var(--enpy-s2);
	z-index: 2;
	padding: 0.25rem 0.5rem;
	background: var(--enpy-live);
	color: #fff;
	border-radius: var(--enpy-radius-sm);
	font-family: var(--enpy-font-head);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cc-card-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--enpy-s3);
	min-width: 0;
}

.cc-card-content h3,
.enpy-content .cc-card-content h3 {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.008em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * 1.25em);
}

/* Meta en UNA linea siempre: el titulo ya reserva dos; con la meta variando
   entre 1 y 2 lineas las tarjetas median distinto y las filas dentaban. El
   genero (variable) cede con puntos suspensivos; la duracion no se corta. */
.cc-card-meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: var(--enpy-fs-3xs);
	color: var(--enpy-ink-3);
	overflow: hidden;
	white-space: nowrap;
	min-height: 1.2em;
}

.cc-card-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-card-meta span + span { flex-shrink: 0; }

.pelicula-card { cursor: pointer; }

.cc-card-actions { margin-top: auto; padding-top: 0.35rem; }

.cc-btn,
.enpy-content .cc-btn {
	display: block;
	padding: 0.5rem;
	border-radius: var(--enpy-radius);
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xs);
	font-weight: 750;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: background-color 0.15s var(--enpy-ease), color 0.15s var(--enpy-ease);
}

.cc-btn:hover,
.enpy-content .cc-btn:hover { background: var(--enpy-accent); color: #fff; }

/* --- Slider de estrenos (slick) --- */
.estrenos-slider { position: relative; margin-inline: calc(-1 * var(--enpy-s2)); }

/* Antes de que slick inicialice, los estrenos serian una pila vertical de
   posters gigantes y la pagina saltaria al armarse el carrusel. Esta guarda
   los deja ya en fila, con el mismo ancho que tendran despues. */
.estrenos-slider:not(.slick-initialized) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 50%;
	overflow: hidden;
}

@media (min-width: 560px)  { .estrenos-slider:not(.slick-initialized) { grid-auto-columns: 33.333%; } }
@media (min-width: 820px)  { .estrenos-slider:not(.slick-initialized) { grid-auto-columns: 25%; } }
.estrenos-slider .estreno-card { margin-inline: var(--enpy-s2); }

/* slick.css solo posiciona; las flechas las viste el tema. */
.estrenos-slider .slick-prev,
.estrenos-slider .slick-next {
	position: absolute;
	top: 34%;
	z-index: 5;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--enpy-line-2);
	border-radius: 50%;
	background: var(--enpy-bg);
	box-shadow: var(--enpy-shadow);
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.estrenos-slider .slick-prev { left: -8px; }
.estrenos-slider .slick-next { right: -8px; }

.estrenos-slider .slick-prev::before,
.estrenos-slider .slick-next::before {
	content: "";
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--enpy-ink);
	border-bottom: 2px solid var(--enpy-ink);
}

.estrenos-slider .slick-prev::before { transform: rotate(45deg) translate(1px, -1px); }
.estrenos-slider .slick-next::before { transform: rotate(-135deg) translate(1px, -1px); }

.estrenos-slider .slick-prev:hover,
.estrenos-slider .slick-next:hover { border-color: var(--enpy-accent); }

/* --- Atribucion --- */
.cc-attribution {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--enpy-s3);
	margin-top: var(--enpy-s10);
	padding-top: var(--enpy-s5);
	border-top: 1px solid var(--enpy-line);
	font-size: var(--enpy-fs-sm);
	color: var(--enpy-ink-3);
}

.cc-attribution p,
.enpy-content .cc-attribution p { margin: 0; }
.cc-attribution img { height: 40px; width: auto; border-radius: 9px; box-shadow: var(--enpy-shadow-sm); }

/* --- Modal de pelicula --- */
.cc-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: none; /* el JS lo abre con display:flex + .is-open (doble rAF) */
	align-items: center;
	justify-content: center;
	padding: var(--enpy-s4);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.cc-modal.is-open { opacity: 1; }

.cc-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 10, 14, 0.72);
	backdrop-filter: blur(3px) saturate(0.85);
	-webkit-backdrop-filter: blur(3px) saturate(0.85);
}

/* Arquitectura anti-salto: el contenedor NO scrollea (overflow hidden) y
   es una columna flex — la cabecera con poster queda fija arriba, el
   cuerpo (.cc-modal-body) es la unica zona con scroll, y el boton de
   cierre va absoluto sobre el contenedor: nunca se mueve, sin hacks de
   sticky/float que reacomodaban al cargar el contenido. */
.cc-modal-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(88vh, 860px);
	overflow: hidden;
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	box-shadow: var(--enpy-shadow-lg);
	transform: translateY(12px) scale(0.985);
	opacity: 0;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.18s ease;
}

.cc-modal.is-open .cc-modal-content { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.cc-modal, .cc-modal-content { transition: none; transform: none; }
}

/* Cabecera-poster (solo peliculas sin trailer): altura RESERVADA, para que
   el modal no salte cuando la imagen termina de cargar. */
#modal-header { flex: 0 0 auto; }

#modal-header img {
	width: 100%;
	height: clamp(160px, 26vh, 280px);
	object-fit: cover;
	display: block;
}

/* Absoluto sobre el contenedor, que ya no scrollea (el scroll vive en
   .cc-modal-body): siempre a la vista y sin reacomodos. El sticky+float
   con margen negativo que hubo antes producia micro-movimientos cuando el
   contenido terminaba de cargar. */
.cc-modal-close {
	position: absolute;
	top: var(--enpy-s3);
	right: var(--enpy-s3);
	z-index: 5;
	width: 38px;
	height: 38px;
	border: 1px solid var(--enpy-line-2);
	border-radius: 50%;
	background: var(--enpy-bg);
	color: var(--enpy-ink);
	font-size: 22px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--enpy-shadow);
	transition: transform 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease);
}

.cc-modal-close:hover { transform: scale(1.08); border-color: var(--enpy-accent); }

.cc-modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--enpy-s5);
	scrollbar-width: thin;
	scrollbar-color: var(--enpy-line-2) transparent;
}

.cc-modal-title,
.enpy-content .cc-modal-title {
	margin: 0 0 0.2rem;
	padding-right: var(--enpy-s8);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--enpy-ink);
}

.cc-modal-subtitle { font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); }

.cc-modal-video { margin-block: var(--enpy-s4); }

/* El area del trailer es un marco 16:9 y TODO lo que va adentro (la imagen
   de espera, el iframe de YouTube, el div del player) lo llena en absoluto.
   Antes el alto era fijo de 340px: a ~660px de ancho eso es 1.94:1, o sea
   que la imagen se recortaba y el video de YouTube salia con franjas — el
   "no muestra todo el video". Con 16:9 el cuadro coincide con el del video
   y entra completo. Los !important pisan los estilos inline que el JS del
   plugin inyecta en el div del player. */
.cc-trailer-placeholder,
#modal-trailer-player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--enpy-radius);
	overflow: hidden;
	background: #000;
}

#modal-trailer-poster-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

#modal-trailer-player > div,
#modal-trailer-player iframe,
.cc-trailer-iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

.cc-trailer-play-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 64px;
	border: 0;
	border-radius: 50%;
	background: var(--enpy-live);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--enpy-shadow-lg);
	transition: transform 0.15s var(--enpy-ease);
}

.cc-trailer-play-btn:hover { transform: scale(1.08); }

.cc-trailer-youtube-link { position: absolute; right: var(--enpy-s3); bottom: var(--enpy-s3); }

.cc-youtube-btn,
.enpy-content .cc-youtube-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	border-radius: var(--enpy-radius);
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: var(--enpy-fs-2xs);
	font-weight: 700;
	text-decoration: none;
}

.cc-modal-video-placeholder { display: none; color: var(--enpy-ink-3); font-size: var(--enpy-fs-sm); }

.cc-modal-section { margin-top: var(--enpy-s5); }

.cc-modal-section h2,
.enpy-content .cc-modal-section h2 {
	margin: 0 0 var(--enpy-s2);
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--enpy-rule);
	font-family: var(--enpy-font-head);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.cc-modal-section p,
.enpy-content .cc-modal-section p {
	margin: 0;
	font-size: var(--enpy-fs-sm);
	line-height: 1.6;
	color: var(--enpy-ink-2);
	max-width: none;
}

.cc-modal-text { font-size: var(--enpy-fs-sm); color: var(--enpy-ink-2); }

.cc-cines-list,
.enpy-content .cc-cines-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-cines-list li,
.enpy-content .cc-cines-list li {
	margin: 0;
	padding: var(--enpy-s2) 0;
	border-top: 1px solid var(--enpy-line);
	font-size: var(--enpy-fs-sm);
	color: var(--enpy-ink-2);
}

.cc-cines-list li:first-child { border-top: 0; }


/* --- Modal: detalles y cines (v300) -------------------------------------- */

/* La API entrega "detalles" como lineas ETIQUETA: valor separadas por
   saltos de linea, y el JS lo inserta con .text(): sin esto los saltos
   colapsan y sale un parrafo ilegible de 300 caracteres. */
#modal-detalles,
.enpy-content #modal-detalles {
	white-space: pre-line;
	font-size: var(--enpy-fs-sm);
	line-height: 1.75;
	color: var(--enpy-ink-2);
}

/* Cada cine: avatar con inicial + nombre + horarios. Estructura que arma
   el JS: li > .cc-cine-logo-wrap > .cc-cine-initial / .cc-cine-info. */
.cc-cines-list li,
.enpy-content .cc-cines-list li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--enpy-s3);
	align-items: start;
	padding: var(--enpy-s3) 0;
}

.cc-cine-logo-wrap {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--enpy-brand-soft);
	display: grid;
	place-items: center;
}

.cc-cine-initial {
	font-family: var(--enpy-font-head);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--enpy-accent);
	line-height: 1;
}

.cc-cine-info { min-width: 0; }

.cc-cine-info strong {
	display: block;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 700;
	margin-bottom: 0.15rem;
}

.cc-cine-horario,
.cc-cine-sub,
.enpy-content .cc-cine-horario,
.enpy-content .cc-cine-sub {
	margin: 0.1rem 0 0;
	font-size: var(--enpy-fs-2xs);
	line-height: 1.55;
	color: var(--enpy-ink-2);
	/* Los horarios son tiras de numeros: tabulares para que alineen. */
	font-variant-numeric: tabular-nums;
	max-width: none;
}

.cc-label {
	font-weight: 750;
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
	margin-right: 0.25rem;
}

.cc-cines-empty { color: var(--enpy-ink-3); font-size: var(--enpy-fs-sm); }

/* La cabecera del modal (poster sin trailer) ya no lleva radios inline. */
#modal-header img { border-radius: 0; }

/* Cinturon anti-poster-duplicado: el JS v7 ya no llena la cabecera cuando
   hay trailer, pero un navegador con el JS viejo cacheado si. El wrap del
   trailer visible lleva display:block inline (jQuery .show()). */
.cc-modal-content:has(#modal-trailer-wrap[style*="block"]) #modal-header { display: none; }


/* ==========================================================================
   25 Horoscopo
   Doce tarjetas de largo casi identico (el detalle mide 167-171 caracteres,
   medido), asi que la grilla cierra pareja sin trucos. La barra de anclas
   responde al uso real: la gente entra a buscar SU signo, no a leer doce.
   Prefijos .enpy-content donde hay h2/p/a — leccion de la seccion 22.
   ========================================================================== */

/* --- Barra de anclas --- */
.hm-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enpy-s2);
	margin: 0 0 var(--enpy-s6);
	padding-bottom: var(--enpy-s4);
	border-bottom: 1px solid var(--enpy-line);
}

.hm-nav a,
.enpy-content .hm-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem 0.35rem 0.45rem;
	border: 1px solid var(--enpy-line-2);
	border-radius: var(--enpy-radius-pill);
	background: var(--enpy-bg);
	color: var(--enpy-ink-2);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xs);
	font-weight: 650;
	text-decoration: none;
	transition: background-color 0.14s var(--enpy-ease), color 0.14s var(--enpy-ease), border-color 0.14s var(--enpy-ease);
}

.hm-nav a:hover {
	background: var(--enpy-accent);
	border-color: var(--enpy-accent);
	color: #fff;
}

.hm-nav img {
	width: 22px;
	height: 22px;
	display: block;
	border-radius: 50%;
	background: #eef1f6;
	object-fit: cover;
}

/* --- Grilla: columnas explicitas, filas parejas --- */
.hm-container {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
}

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

/* --- Tarjeta de signo --- */
.hm-card {
	display: flex;
	flex-direction: column;
	gap: var(--enpy-s3);
	padding: var(--enpy-s5);
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	transition: border-color 0.16s var(--enpy-ease), box-shadow 0.16s var(--enpy-ease);
}

.hm-card:hover { border-color: var(--enpy-line-2); box-shadow: var(--enpy-shadow); }

/* Al llegar por un ancla, la tarjeta destino se anuncia: el sistema
   confirma a donde salto (visibilidad del estado, Nielsen #1). */
/* Halo derivado del acento por color-mix: visible en claro Y en oscuro.
   Con var(--enpy-brand-soft) el anillo era #2b1016 en oscuro — invisible. */
.hm-card:target {
	border-color: var(--enpy-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--enpy-accent) 30%, transparent);
}

.hm-card-head { display: flex; align-items: center; gap: var(--enpy-s3); }

/* El arte de los signos es casi negro (luminancia medida 0-10/255) y viene
   en dos formatos inconsistentes: unos con transparencia (Acuario, Piscis)
   y otros con fondo azul-marino horneado SIN transparencia (Aries, Leo).
   Sobre el fondo oscuro del tema, el dibujo desaparecia.

   Tratamiento que normaliza ambos: la imagen LLENA el circulo (cover +
   radio 50%) — los cuadrados con fondo horneado quedan recortados en disco
   — sobre un fondo claro FIJO en los dos temas, porque el arte se dibujo
   para fondo claro. El aro fino separa el disco de la tarjeta en oscuro. */
.hm-glyph {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #eef1f6;
	border: 1px solid var(--enpy-line-2);
	overflow: hidden;
}

.hm-glyph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.hm-card-id { min-width: 0; }

.hm-card h2,
.enpy-content .hm-card h2 {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-lg);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* La API manda el rango del signo EN VERSALES ("20 DE MARZO AL 19 DE
   ABRIL"): se baja a minusculas — en castellano los meses van asi. */
.hm-fecha,
.enpy-content .hm-card .hm-fecha {
	margin: 0.15rem 0 0;
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	text-transform: lowercase;
}

.hm-detalle,
.enpy-content .hm-card .hm-detalle {
	margin: 0;
	font-size: var(--enpy-fs-sm);
	line-height: 1.6;
	color: var(--enpy-ink-2);
	max-width: none;
}

/* Numero de la suerte: el dato distintivo de cada tarjeta, anclado al pie
   para que las doce cierren a ras (los textos ya miden casi lo mismo). */
.hm-numero,
.enpy-content .hm-card .hm-numero {
	margin: auto 0 0;
	padding-top: var(--enpy-s3);
	border-top: 1px solid var(--enpy-line);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--enpy-s3);
}

.hm-numero span {
	font-size: 0.625rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
}

.hm-numero strong {
	font-family: var(--enpy-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--enpy-accent);
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   26 Clima
   Render 100% servidor del plugin enpy-clima (datos MET Norway). Sin JS.
   Los iconos llevan color literal fijo en ambos temas — el sol es ambar y
   la lluvia azul en cualquier modo; codificarlos con tokens de marca los
   volveria ilegibles como simbolos meteorologicos.
   Prefijos .enpy-content donde hay h2/h3/p/ol — leccion de la seccion 22.
   ========================================================================== */

.enpy-clima { display: flex; flex-direction: column; gap: var(--enpy-s6); }

/* --- Iconos --- */
.enpy-wico {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	fill: none;
	stroke: var(--enpy-ink-3);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.enpy-wico .w-sun  { stroke: #e8a13c; }
.enpy-wico .w-moon { stroke: #8fa3c4; }
.enpy-wico .w-rain { stroke: #4f8fd4; }
.enpy-wico .w-bolt { stroke: #e8a13c; }
.enpy-wico .w-fog  { stroke: var(--enpy-ink-4); }

/* --- Destacada: Asuncion --- */
.enpy-clima__hero {
	padding: var(--enpy-s5);
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
}

.enpy-clima__now { display: flex; align-items: center; gap: var(--enpy-s4); }
.enpy-clima__now > .enpy-wico { width: 64px; height: 64px; }
.enpy-clima__now-main { min-width: 0; flex: 1 1 auto; }

.enpy-clima__city,
.enpy-content .enpy-clima__city {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.enpy-clima__desc,
.enpy-content .enpy-clima__desc { margin: 0.15rem 0 0; font-size: var(--enpy-fs-sm); color: var(--enpy-ink-3); max-width: none; }

/* La temperatura es EL dato: el numero mas grande de la pagina. */
.enpy-clima__temp {
	font-family: var(--enpy-font-head);
	font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.enpy-clima__stats,
.enpy-content .enpy-clima__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enpy-s2) var(--enpy-s6);
	margin: var(--enpy-s4) 0 0;
	padding: var(--enpy-s3) 0 0;
	border-top: 1px solid var(--enpy-line);
	list-style: none;
}

.enpy-clima__stats li { display: flex; align-items: baseline; gap: var(--enpy-s2); margin: 0; }

.enpy-clima__stats span {
	font-size: 0.625rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
}

.enpy-clima__stats strong {
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-md);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Semana: 6 columnas iguales --- */
.enpy-clima__week,
.enpy-content .enpy-clima__week {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin: var(--enpy-s5) 0 0;
	padding: var(--enpy-s4) 0 0;
	border-top: 1px solid var(--enpy-line);
	list-style: none;
}

.enpy-clima__week li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0 var(--enpy-s2);
	border-left: 1px solid var(--enpy-line);
	text-align: center;
}

.enpy-clima__week li:first-child { border-left: 0; }
.enpy-clima__week .enpy-wico { width: 34px; height: 34px; }

.enpy-clima__wday {
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xs);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--enpy-ink-2);
}

.enpy-clima__week li:first-child .enpy-clima__wday { color: var(--enpy-accent); }

.enpy-clima__minmax { font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); font-variant-numeric: tabular-nums; }
.enpy-clima__minmax strong { color: var(--enpy-ink); font-weight: 700; }

@media (max-width: 560px) {
	.enpy-clima__week { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--enpy-s4); }
	.enpy-clima__week li:nth-child(4) { border-left: 0; }
}

/* --- Grilla de ciudades --- */
.enpy-clima__grid {
	display: grid;
	gap: var(--enpy-s3);
	grid-template-columns: minmax(0, 1fr);
}

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

.enpy-clima__card {
	display: flex;
	align-items: center;
	gap: var(--enpy-s3);
	padding: var(--enpy-s4);
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	transition: border-color 0.16s var(--enpy-ease), box-shadow 0.16s var(--enpy-ease);
}

.enpy-clima__card:hover { border-color: var(--enpy-line-2); box-shadow: var(--enpy-shadow); }

.enpy-clima__card-body { min-width: 0; flex: 1 1 auto; }

.enpy-clima__card h3,
.enpy-content .enpy-clima__card h3 {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-base);
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.enpy-clima__card-desc,
.enpy-content .enpy-clima__card-desc { margin: 0.1rem 0 0; font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); max-width: none; }

.enpy-clima__card-minmax,
.enpy-content .enpy-clima__card-minmax { margin: 0.1rem 0 0; font-size: var(--enpy-fs-2xs); color: var(--enpy-ink-3); font-variant-numeric: tabular-nums; max-width: none; }
.enpy-clima__card-minmax strong { color: var(--enpy-ink); }

.enpy-clima__card-temp {
	font-family: var(--enpy-font-head);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.enpy-clima__meta,
.enpy-content .enpy-clima__meta {
	margin: 0;
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-4);
	text-align: center;
	max-width: none;
}

.enpy-clima__error { color: var(--enpy-ink-3); }


/* ==========================================================================
   27 Esqueletos de carga (todo el proyecto)
   Un solo sistema de shimmer, HONESTO: se enciende mientras algo carga de
   verdad y se apaga cuando termino. Dos usos:
   1. Modulo del clima: el shortcode responde con esqueleto que replica la
      geometria del modulo real y el JS lo reemplaza al llegar el REST.
   2. Marcos de imagen de todo el sitio (portada, radio, cine, horoscopo):
      shimmer hasta que la imagen dispara load — el JS marca .is-loaded.
      Sin esa marca, los logos PNG transparentes (radio) dejarian el brillo
      latiendo debajo para siempre.
   ========================================================================== */

.enpy-skel {
	position: relative;
	display: block;
	background: var(--enpy-bg-3);
	border-radius: var(--enpy-radius-sm);
	overflow: hidden;
}

.enpy-skel::after,
.enpy-thumb:not(.enpy-thumb--empty):not(.is-loaded)::before,
.cc-poster:not(.is-loaded)::before,
.enpy-station__logo:not(.is-loaded)::before,
.hm-glyph:not(.is-loaded)::before,
.enpy-article__media:not(.is-loaded)::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--enpy-bg) 55%, transparent),
		transparent
	);
	animation: enpy-shimmer 1.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes enpy-shimmer {
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.enpy-skel::after,
	.enpy-thumb::before,
	.cc-poster::before,
	.enpy-station__logo::before,
	.hm-glyph::before,
	.enpy-article__media::before { animation: none; }
}

/* Los contenedores de imagen necesitan contexto de posicionamiento. */
.enpy-station__logo,
.hm-glyph { position: relative; }

/* Cargada: el shimmer se apaga (los PNG transparentes lo dejarian visible). */
.enpy-thumb.is-loaded::before,
.cc-poster.is-loaded::before,
.enpy-station__logo.is-loaded::before,
.hm-glyph.is-loaded::before { content: none; }

/* --- Formas del esqueleto del clima (misma geometria que el modulo) --- */
.enpy-skel--line    { height: 18px; margin-bottom: 6px; }
.enpy-skel--line-sm { height: 12px; }
.enpy-skel--w40 { width: 40%; }
.enpy-skel--w60 { width: 60%; }
.enpy-skel--w80 { width: 80%; }

.enpy-skel--icon    { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.enpy-skel--icon-lg { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.enpy-skel--temp    { width: 96px; height: 64px; border-radius: var(--enpy-radius); }
.enpy-skel--temp-sm { width: 52px; height: 34px; border-radius: var(--enpy-radius); }

.enpy-clima__week .enpy-skel { margin-inline: auto; }
.enpy-clima__week .enpy-skel--line-sm { width: 60%; }

/* Estado de error del modulo: el esqueleto se congela y aparece el aviso. */
.enpy-clima--error .enpy-skel { opacity: 0.35; }
.enpy-clima--error .enpy-skel::after { animation: none; }
.enpy-clima--error .enpy-clima__error { display: block; }

@media print {
	.enpy-skel::after { animation: none; }
}


/* ==========================================================================
   28 TV en vivo
   Un escenario unico arriba (el reproductor) y la grilla de canales debajo.
   Nada de diez iframes precargados: el embed oficial de YouTube se inyecta
   recien al elegir canal. Prefijos .enpy-content por la leccion 22.
   ========================================================================== */

.enpy-tv { display: flex; flex-direction: column; gap: var(--enpy-s6); }

/* --- Escenario --- */
.enpy-tv__stage {
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	overflow: hidden;
}

.enpy-tv__stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enpy-s3);
	padding: var(--enpy-s3) var(--enpy-s4);
	border-bottom: 1px solid var(--enpy-line);
}

.enpy-tv__stage-title,
.enpy-content .enpy-tv__stage-title {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-md);
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Punto rojo de "en vivo" junto al nombre del canal elegido. */
.enpy-tv__stage-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--enpy-live);
	animation: enpy-pulse 1.8s var(--enpy-ease) infinite;
}

.enpy-tv__close {
	width: 34px;
	height: 34px;
	border: 1px solid var(--enpy-line-2);
	border-radius: 50%;
	background: var(--enpy-bg);
	color: var(--enpy-ink);
	font-size: 20px;
	line-height: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.enpy-tv__close:hover { border-color: var(--enpy-accent); }

/* Marco 16:9 con shimmer hasta que el iframe carga (is-loaded via JS). */
.enpy-tv__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.enpy-tv__frame:not(.is-loaded)::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
	animation: enpy-shimmer 1.5s ease-in-out infinite;
}

.enpy-tv__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.enpy-tv__hint,
.enpy-content .enpy-tv__hint {
	margin: 0;
	padding: var(--enpy-s2) var(--enpy-s4);
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-3);
	max-width: none;
}

/* --- Grilla de canales --- */
.enpy-tv__grid {
	display: grid;
	gap: var(--enpy-s3);
	grid-template-columns: minmax(0, 1fr);
}

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

.enpy-tv__card {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--enpy-s3);
	padding: var(--enpy-s4);
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	transition: border-color 0.16s var(--enpy-ease), box-shadow 0.16s var(--enpy-ease);
}

.enpy-tv__card:hover { border-color: var(--enpy-line-2); box-shadow: var(--enpy-shadow); }

/* Canal sonando en el escenario. */
.enpy-tv__card.is-active {
	border-color: var(--enpy-live);
	box-shadow: inset 3px 0 0 var(--enpy-live);
}

.enpy-tv__avatar {
	width: 52px;
	height: 52px;
	border-radius: var(--enpy-radius);
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	display: grid;
	place-items: center;
	font-family: var(--enpy-font-head);
	font-size: 1.375rem;
	font-weight: 800;
}

.enpy-tv__body { min-width: 0; }

.enpy-tv__name,
.enpy-content .enpy-tv__name {
	margin: 0;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-md);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.enpy-tv__cat {
	display: inline-block;
	margin-top: 0.2rem;
	padding: 0.18rem 0.45rem;
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-sm);
	background: var(--enpy-bg-2);
	font-family: var(--enpy-font-head);
	font-size: 0.625rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
}

.enpy-tv__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }

.enpy-tv__play {
	padding: 0.5rem 0.9rem;
	border: 0;
	border-radius: var(--enpy-radius);
	background: var(--enpy-live);
	color: #fff;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-2xs);
	font-weight: 750;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background-color 0.14s var(--enpy-ease);
	white-space: nowrap;
}

.enpy-tv__play:hover { background: var(--enpy-brand-strong); }
.enpy-tv__play[aria-pressed="true"] { background: var(--enpy-ink-3); }

.enpy-tv__site,
.enpy-content .enpy-tv__site {
	font-size: var(--enpy-fs-3xs);
	font-weight: 650;
	color: var(--enpy-ink-3);
	text-align: center;
	text-decoration: none;
}

.enpy-tv__site:hover { color: var(--enpy-accent); }

.enpy-tv__legal,
.enpy-content .enpy-tv__legal {
	margin: 0;
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-4);
	text-align: center;
	max-width: none;
}


/* ==========================================================================
   29 Futbol local
   El tema estila el markup del plugin futbol-data (que ademas llevaba
   semanas sin CSS propio: su hoja dependia de un handle del tema viejo y
   WordPress no la imprimia). Prefijos .enpy-content en h2/h3/table/p — la
   tipografia de articulo estila <table> con (0,1,1), leccion 22.
   ========================================================================== */

#futbol-data-root { display: flex; flex-direction: column; gap: var(--enpy-s8); }

.futbol-section-title h2,
.enpy-content .futbol-section-title h2 {
	margin: 0 0 var(--enpy-s4);
	padding-top: 0.55rem;
	border-top: 3px solid var(--enpy-rule);
	font-family: var(--enpy-font-head);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

/* --- Tabla de posiciones --- */
.futbol-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.futbol-table,
.enpy-content .futbol-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--enpy-fs-sm);
	margin: 0;
}

.futbol-table th,
.enpy-content .futbol-table th {
	padding: var(--enpy-s3);
	border: 0;
	border-bottom: 2px solid var(--enpy-rule);
	background: transparent;
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-3xs);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--enpy-ink-3);
	text-align: left;
}

.futbol-table td,
.enpy-content .futbol-table td {
	padding: var(--enpy-s3);
	border: 0;
	border-bottom: 1px solid var(--enpy-line);
	vertical-align: middle;
}

.futbol-table tbody tr:nth-child(odd) td { background: var(--enpy-bg-2); }

/* El puntero (1°) es el dato factual destacable sin inventar reglas de
   copas que la fuente no informa. */
.futbol-table tbody tr:first-child .futbol-pos { color: var(--enpy-accent); }
.futbol-table tbody tr:first-child td { font-weight: 700; }

.futbol-pos {
	font-family: var(--enpy-font-head);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	width: 2.5rem;
	text-align: center;
}

.futbol-club { display: flex; align-items: center; gap: var(--enpy-s3); font-weight: 600; }
.futbol-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

.futbol-avatar {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--enpy-brand-soft);
	color: var(--enpy-accent);
	display: inline-grid;
	place-items: center;
	font-family: var(--enpy-font-head);
	font-size: 0.75rem;
	font-weight: 800;
}

.futbol-avatar-sm { width: 22px; height: 22px; font-size: 0.6875rem; }

.futbol-puntos {
	font-family: var(--enpy-font-head);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: center;
	width: 4rem;
}

/* --- Fixture: jornadas en tarjetas --- */
.futbol-fixture-grid {
	display: grid;
	gap: var(--enpy-gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px)  { .futbol-fixture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .futbol-fixture-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.futbol-fixture-group {
	background: var(--enpy-bg);
	border: 1px solid var(--enpy-line);
	border-radius: var(--enpy-radius-lg);
	padding: var(--enpy-s4);
}

.futbol-fixture-group h3,
.enpy-content .futbol-fixture-group h3 {
	margin: 0 0 var(--enpy-s3);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--enpy-accent);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.futbol-partido { padding: var(--enpy-s3) 0; border-top: 1px solid var(--enpy-line); }
.futbol-partido:first-of-type { border-top: 0; padding-top: 0; }

.futbol-partido-fecha {
	display: flex;
	justify-content: space-between;
	gap: var(--enpy-s3);
	margin-bottom: 0.4rem;
	font-size: var(--enpy-fs-3xs);
	color: var(--enpy-ink-4);
}

.futbol-hora { font-variant-numeric: tabular-nums; color: var(--enpy-ink-3); font-weight: 650; }

/* Local | marcador | visita: tres columnas fijas — todos los partidos de la
   tarjeta alinean su marcador en el mismo eje. */
.futbol-partido-equipos {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--enpy-s2);
}

.futbol-equipo {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	font-size: var(--enpy-fs-xs);
	font-weight: 650;
}

.futbol-equipo span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.futbol-equipo-visita { justify-content: flex-end; text-align: right; }
.futbol-logo-sm { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }

.futbol-partido-resultado {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.55rem;
	border-radius: var(--enpy-radius-sm);
	background: var(--enpy-bg-invert);
	color: var(--enpy-bg);
	font-family: var(--enpy-font-head);
	font-size: var(--enpy-fs-sm);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Pendiente: "vs" en neutro — un marcador negro con guiones mentiria. */
.futbol-partido-resultado.futbol-pendiente {
	background: var(--enpy-bg-2);
	color: var(--enpy-ink-3);
	font-size: var(--enpy-fs-3xs);
	font-weight: 750;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.futbol-error,
.enpy-content .futbol-error { color: var(--enpy-ink-3); }

.futbol-meta,
.enpy-content .futbol-meta {
	margin: 0;
	font-size: var(--enpy-fs-2xs);
	color: var(--enpy-ink-4);
	text-align: center;
	max-width: none;
}


/* ==========================================================================
   30 Movil: ergonomia tactil y rendimiento de render
   Todo lo de aca sale de medir el sitio en un telefono, no de suponer.
   ========================================================================== */

/* --- Retardo de 300 ms al tocar ---------------------------------------
   Sin touch-action los navegadores moviles esperan ~300 ms despues de cada
   toque por si viene un segundo (doble toque = zoom). Declararlo como
   'manipulation' conserva el pinch-zoom — que es accesibilidad y no se
   toca — pero renuncia al doble-toque-zoom, y con eso el toque responde al
   instante. Es la diferencia entre "anda" y "vuela" en la percepcion. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[data-enpy-drawer-open],
[data-enpy-search-toggle] {
	touch-action: manipulation;
}

/* El recuadro azul del toque en Android/iOS no combina con ningun diseño y
   ademas tapa el elemento. Se reemplaza por un destello del propio acento. */
a,
button,
[role="button"] {
	-webkit-tap-highlight-color: color-mix(in srgb, var(--enpy-accent) 18%, transparent);
}

/* Las anclas quedaban debajo de la barra pegajosa: al saltar a una seccion,
   el titulo aterrizaba tapado. */
html {
	scroll-padding-top: 5rem;
}

/* --- Objetivos tactiles (Ley de Fitts · WCAG 2.5.8) --------------------
   Se apunta con `pointer: coarse` y no con un ancho de pantalla: lo que
   define el tamaño necesario es el dedo, no el viewport. Una tablet o un
   portatil tactil tambien lo necesitan; un telefono conectado a un mouse,
   no.

   44x44 CSS px es el minimo comodo (Apple HIG); WCAG 2.5.8 exige 24 como
   piso absoluto. Medido antes de este cambio: los botones de compartir
   estaban en 32, los de icono del encabezado en 36 y las flechas del ticker
   en 24 — las tres por debajo. */
@media (pointer: coarse) {

	.enpy-iconbtn,
	.enpy-share__btn {
		width: 44px;
		height: 44px;
	}

	.enpy-totop {
		width: 48px;
		height: 48px;
	}

	/* Las flechas del ticker son chicas A PROPOSITO: agrandarlas romperia la
	   linea de ultimo momento. Se agranda solo la zona sensible con un
	   pseudo-elemento centrado — el dedo tiene 44 px, el ojo sigue viendo
	   24. Es la solucion correcta cuando el diseño y la ergonomia piden
	   cosas distintas. */
	.enpy-ticker__nav button {
		position: relative;
	}

	.enpy-ticker__nav button::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Separacion entre objetivos contiguos: dos botones pegados de 44 px
	   siguen produciendo toques equivocados. */
	.enpy-share {
		gap: var(--enpy-s3);
	}

	.enpy-ticker__nav {
		gap: var(--enpy-s2);
	}

	/* Los chips de categoria se tocan; con el padding de escritorio quedaban
	   en ~28 px de alto. */
	.enpy-chip {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	/* Enlaces de listas y titulares: area de toque completa de la fila, sin
	   cambiar como se ven. */
	.enpy-list__link,
	.enpy-card__title a {
		display: block;
	}
}

/* --- Campos de formulario ---------------------------------------------
   iOS hace ZOOM automatico sobre cualquier input con letra menor a 16 px, y
   al salir del campo no siempre vuelve: la pagina queda corrida y el lector
   tiene que despinchar a mano. El buscador usaba 14 px (--enpy-fs-sm). Se
   fija 16 px en tactiles; en escritorio se mantiene el tamaño de diseño. */
@media (pointer: coarse) {

	.enpy-searchform__field,
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	textarea,
	select {
		font-size: 16px;
	}

	/* Alto comodo para escribir con el pulgar. */
	.enpy-searchform__field {
		min-height: 46px;
	}

	.enpy-btn,
	.enpy-searchform__submit {
		min-height: 44px;
	}
}

/* --- Render: no dibujar lo que no se ve -------------------------------
   La portada trae 16 fotos y bastante DOM. content-visibility deja que el
   navegador saltee el layout y el pintado de lo que esta fuera de pantalla
   hasta que se acerca. contain-intrinsic-size le da un alto estimado para
   que la barra de scroll no salte mientras tanto — sin eso, el remedio es
   peor que la enfermedad. Solo en pantallas chicas: en escritorio entra
   casi todo de una y no hay nada que postergar. */
@media (max-width: 819px) {

	.enpy-block,
	.enpy-related,
	.enpy-comments,
	.enpy-footer__cols {
		content-visibility: auto;
		contain-intrinsic-size: auto 600px;
	}
}

/* --- Detalles de comodidad --------------------------------------------- */

/* Cortar palabras largas antes que romper la grilla: los titulares de
   prensa traen nombres propios y URLs que desbordan en pantallas angostas. */
@media (max-width: 559px) {

	.enpy-card__title,
	.enpy-article__title,
	.enpy-list__link {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Que nada obligue a mover la pagina de costado. El desborde horizontal en
   movil es de los errores mas molestos y mas dificiles de rastrear. */
@media (max-width: 819px) {

	html,
	body {
		overflow-x: hidden;
	}
}