/*
Theme Name: Strategycomm - Duros a 4 Pesetas
Theme URI: https://durosa4pesetas.com
Description: Tema hijo de GeneratePress para el diario digital Duros a 4 Pesetas. Portada y secciones se componen con módulos (CPT d4p_modulo): cada módulo define lienzo + posición + maquetación + fuente, con de-duplicación global por página. Catálogo de maquetaciones (destacadas, rejillas, mosaicos, listas y compuestas), zonas de widgets nativos para raíles y banners, archivos unificados (categoría, búsqueda, autor, etiqueta y fechas con la misma rejilla), URLs de sección sin /category/, cabecera fija que encoge, artículo con noticias relacionadas y reproductor de podcast. Filosofía: estructura por plantilla, presentación por interruptor.
Author: Strategycomm (Senén)
Template: generatepress
Version: 2.8.0
Text Domain: d4p
*/

/* ==========================================================================
   1. TOKENS  (:root)
   --------------------------------------------------------------------------
   El acento se conecta al Global Color de GeneratePress; aquí solo lo
   reexponemos como token para poder derivar variantes con color-mix().
   Las tipografías las gobierna el panel Typography de GeneratePress: estas
   plantillas HEREDAN, no cargan fuentes por su cuenta.
   ========================================================================== */
:root {
	/* Color de acento. Si defines un Global Color en GeneratePress llamado
	   "accent", puedes mapearlo aquí con var(--gp-accent, #b8121a). */
	--d4p-accent: #b8121a;
	--d4p-accent-dark: color-mix(in srgb, var(--d4p-accent) 82%, #000);

	--d4p-ink: #1a1a1a;      /* texto principal / titulares */
	--d4p-ink-soft: #555;    /* metadatos, fechas */
	--d4p-line: #e2e2e2;     /* filetes y separadores suaves */
	--d4p-line-strong: #c9c9c9; /* filetes de periódico (regla superior de tarjeta) */
	--d4p-bg-soft: #f5f5f5;  /* fondos suaves ocasionales */

	/* Alto del reproductor de podcast (player.rss.com). 150px es el SUELO: por
	   debajo, el iframe de RSS.com recorta sus controles (no refluye). Por eso
	   en escritorio adelgazamos el FOOTPRINT (tarjeta en esquina, no banda a
	   todo el ancho) en lugar de bajar el alto. */
	--d4p-player-h: 150px;

	/* Medidas */
	--d4p-maxw: 1280px;      /* ancho máximo de la columna de contenido */
	--d4p-gutter: clamp(16px, 4vw, 48px); /* gutter lateral fluido (ajustado: menos aire muerto en pantallas anchas) */
	--d4p-gap: 28px;         /* separación entre columnas dentro de un módulo */
	--d4p-block-gap: 44px;   /* separación vertical entre módulos */
	--d4p-radius: 4px;

	/* Tipografía: heredada de GeneratePress. Estas variables solo ajustan
	   escala relativa de los titulares del diario. */
	--d4p-h-lead: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); /* titular destacado grande */
	--d4p-h-1: 1.35rem;   /* titular destacada media */
	--d4p-h-2: 1.05rem;   /* titular de tarjeta */
	--d4p-h-3: 0.95rem;   /* titular de lista */
}

/* ==========================================================================
   2. WRAPPER  (.d4p)
   Todo el HTML propio cuelga de .d4p para no colisionar con GP ni plugins.
   ========================================================================== */
.d4p {
	color: var(--d4p-ink);
}
.d4p a { text-decoration: none; color: inherit; }
.d4p img { display: block; max-width: 100%; height: auto; }

/* Columna de contenido: la línea de alineación ÚNICA de todo el diario.
   Todos los módulos alinean su contenido a esta medida, lleven fondo a
   sangre o no. Lo que cambia entre secciones es el fondo, nunca dónde
   empieza el contenido. */
.d4p-inner {
	max-width: var(--d4p-maxw);
	margin-inline: auto;
	padding-inline: var(--d4p-gutter);
}

/* El lienzo rompe el contenedor (topado) de GeneratePress y ocupa el ancho
   real de la ventana. Así el "fondo a sangre" llega de verdad a los bordes;
   el contenido se recentra a 1280 con .d4p-inner y todo queda alineado. */
.d4p-lienzo {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Separación entre módulos apilados */
.d4p-modulo { margin-bottom: var(--d4p-block-gap); }
.d4p-modulo:last-child { margin-bottom: 0; }

/* Dos bandas de fondo por módulo: CABECERA y CONTENIDO, cada una con su
   color. La columna .d4p-inner mantiene la alineación; lo que cambia es
   hasta dónde llega el fondo:
   - a sangre (bleed): el color se pinta en la banda -> llega a los bordes.
   - sin sangre: el color se pinta en la columna .d4p-inner -> queda contenido.
   El contraste (texto claro sobre fondo oscuro) lo decide el motor. */
.d4p-modulo--bleed .d4p-modulo__headband { background: var(--d4p-head-bg); }
.d4p-modulo--bleed .d4p-modulo__contentband { background: var(--d4p-content-bg); }
.d4p-modulo:not(.d4p-modulo--bleed) .d4p-modulo__headband .d4p-inner { background: var(--d4p-head-bg); }
.d4p-modulo:not(.d4p-modulo--bleed) .d4p-modulo__contentband .d4p-inner { background: var(--d4p-content-bg); }

/* Relleno de la cabecera cuando tiene color */
.d4p-modulo--hasheadbg .d4p-modulo__headband .d4p-inner { padding-block: 12px; }

/* Separación cabecera -> contenido: la aporta el padding-top del CONTENIDO,
   no un margen de la cabecera. Así, con las dos bandas de color, se tocan
   sin dejar hueco blanco entre ellas; y transparentes, el aire es el mismo. */
.d4p-modulo__contentband .d4p-inner { padding-top: 18px; }
.d4p-modulo--hascontentbg .d4p-modulo__contentband .d4p-inner { padding-top: 22px; padding-bottom: 24px; }
.d4p-modulo--hascontentbg:not(.d4p-modulo--bleed) .d4p-modulo__contentband .d4p-inner { border-radius: var(--d4p-radius); }

.d4p-modulo__headband .d4p-modulo__head { margin-bottom: 0; }

/* Contraste: texto claro sobre fondos oscuros */
.d4p-modulo--headdark .d4p-modulo__title,
.d4p-modulo--headdark .d4p-more { color: #fff; }
.d4p-modulo--contentdark .d4p-title,
.d4p-modulo--contentdark .d4p-title:hover { color: #fff; }
.d4p-modulo--contentdark .d4p-excerpt,
.d4p-modulo--contentdark .d4p-meta { color: rgba(255, 255, 255, .82); }
.d4p-modulo--contentdark .d4p-kicker,
.d4p-modulo--contentdark .d4p-t2__link { color: #fff; }
.d4p-modulo--contentdark .d4p-t1__item,
.d4p-modulo--contentdark .d4p-t4__item,
.d4p-modulo--contentdark .d4p-t5__item,
.d4p-modulo--contentdark .d4p-comp__subgrid,
.d4p-modulo--contentdark .d4p-comp__side,
.d4p-modulo--contentdark .d4p-t2__links,
.d4p-modulo--contentdark .d4p-t2__link,
.d4p-modulo--contentdark .d4p-mA__minirow,
.d4p-modulo--contentdark .d4p-mB__row,
.d4p-modulo--contentdark .d4p-mB__sec + .d4p-mB__sec { border-color: rgba(255, 255, 255, .22); }

/* Cabecera de color en las COMPUESTAS: como llevan una cabecera dentro de
   cada columna (lado A y lado B), el color se aplica a cada .d4p-modulo__head
   en lugar de a una banda superior. El contraste lo cubre --headdark. */
.d4p-modulo--compuesta.d4p-modulo--hasheadbg .d4p-modulo__head {
	background: var(--d4p-head-bg);
	padding: 8px 14px;
}

/* Full-bleed opcional: rompe el contenedor de GeneratePress.
   GP pone .site-content en flex; por eso se fuerza block en las plantillas
   del diario (ver body.d4p-diario en la sección 6). */
.d4p-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ==========================================================================
   3. PIEZAS COMPARTIDAS  (kicker, titular, meta, tarjeta)
   Cada noticia se prepara una sola vez en PHP; aquí solo se estiliza.
   ========================================================================== */

/* Kicker / etiqueta de sección sobre el titular */
.d4p-kicker {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--d4p-accent);
	margin-bottom: 6px;
}
/* Marca de cintillo (de serie): pequeño cuadrado de acento antes del texto,
   estilo El País / Vozpópuli. No aplica al cintillo-cinta sobre la foto. */
.d4p-kicker::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	margin-right: 7px;
	background: var(--d4p-accent);
	vertical-align: baseline;
}
.d4p-t3__card--overlay .d4p-kicker::before { display: none; }

/* Titulares */
.d4p-title { line-height: 1.2; font-weight: 700; color: var(--d4p-ink); margin: 0; }
.d4p-title:hover { color: var(--d4p-accent); }
.d4p-title--lead { font-size: var(--d4p-h-lead); }
.d4p-title--1 { font-size: var(--d4p-h-1); }
.d4p-title--2 { font-size: var(--d4p-h-2); }
.d4p-title--3 { font-size: var(--d4p-h-3); }

/* Entradilla / extracto */
.d4p-excerpt {
	margin: 8px 0 0;
	color: var(--d4p-ink-soft);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Metadatos (fecha · sección) */
.d4p-meta {
	margin-top: 8px;
	font-size: 0.78rem;
	color: var(--d4p-ink-soft);
}
.d4p-meta span + span::before { content: "·"; margin: 0 6px; }

/* Miniatura con proporción estable (evita saltos de layout) */
.d4p-thumb { position: relative; overflow: hidden; background: var(--d4p-bg-soft); border-radius: var(--d4p-radius); }
.d4p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d4p-thumb--21x9 { aspect-ratio: 21 / 9; }
.d4p-thumb--16x9 { aspect-ratio: 16 / 9; }
.d4p-thumb--4x3 { aspect-ratio: 4 / 3; }
.d4p-thumb--1x1 { aspect-ratio: 1 / 1; }

/* Icono play sobre la foto (rasgo: vídeo) */
.d4p-thumb--video::after {
	content: "";
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* Enlace "MÁS NOTICIAS →" al pie de un módulo */
.d4p-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--d4p-accent);
}
.d4p-more:hover { color: var(--d4p-accent-dark); }

/* Título de la sección/módulo (cabecera del bloque): texto en limpio. El
   color de la barra lo da el "Color de fondo de la cabecera" del módulo. */
.d4p-modulo__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.d4p-modulo__title {
	font-size: 1.05rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.04em; margin: 0; color: var(--d4p-ink);
}

/* ==========================================================================
   4. MAQUETACIONES
   Cada tipo es su propio bloque de CSS, legible de arriba abajo, igual que
   su plantilla PHP. Añadir un tipo = replicar el parcial y añadir su CSS.
   ========================================================================== */

/* ---- Tipo 1 — Destacada + lista lateral -------------------------------- */
.d4p-t1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--d4p-gap); align-items: start; }
.d4p-t1--invert .d4p-t1__lead { order: 2; }

.d4p-t1__lead .d4p-thumb { margin-bottom: 12px; }

.d4p-t1__list { display: flex; flex-direction: column; }
.d4p-t1__item {
	display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
	padding: 14px 0; border-top: 1px solid var(--d4p-line);
}
.d4p-t1__item:first-child { padding-top: 0; border-top: 0; }
.d4p-t1__item--thumbright { grid-template-columns: 1fr 96px; }
.d4p-t1__item--thumbright .d4p-t1__itemthumb { order: 2; }

@media (max-width: 782px) {
	.d4p-t1 { grid-template-columns: 1fr; }
	.d4p-t1--invert .d4p-t1__lead { order: 0; } /* en móvil, destacada siempre primero */
}

/* ---- Tipo 3 — Rejilla (2/3/4 columnas) --------------------------------- */
.d4p-t3 { display: grid; gap: var(--d4p-gap); }
.d4p-t3--c2 { grid-template-columns: repeat(2, 1fr); }
.d4p-t3--c3 { grid-template-columns: repeat(3, 1fr); }
.d4p-t3--c4 { grid-template-columns: repeat(4, 1fr); }

.d4p-t3__card .d4p-thumb { margin-bottom: 10px; }
/* Kicker sobre la foto (cinta), cuando el rasgo está activo */
.d4p-t3__card--overlay .d4p-thumb { position: relative; }
.d4p-t3__card--overlay .d4p-kicker {
	position: absolute; left: 0; bottom: 0; margin: 0;
	background: var(--d4p-accent); color: #fff;
	padding: 5px 10px; letter-spacing: 0.05em;
}

@media (max-width: 960px) { .d4p-t3--c4 { grid-template-columns: repeat(2, 1fr); } .d4p-t3--c3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 782px) {
	.d4p-t3--c2, .d4p-t3--c3, .d4p-t3--c4 { grid-template-columns: 1fr; }
}

/* ---- Tipo 5 — Lista compacta (solo titulares) -------------------------- */
.d4p-t5 { display: flex; flex-direction: column; counter-reset: d4p-num; }
.d4p-t5__item {
	padding: 11px 0; border-top: 1px solid var(--d4p-line);
	display: flex; gap: 12px; align-items: baseline;
}
.d4p-t5__item:first-child { border-top: 0; padding-top: 0; }
.d4p-t5--numbered .d4p-t5__item::before {
	counter-increment: d4p-num; content: counter(d4p-num);
	font-weight: 800; color: var(--d4p-accent); font-size: 1.05rem;
	min-width: 1.2em; text-align: center;
}

/* ---- Tipo 2 — Destacada con foto grande + enlaces secundarios ---------- */
.d4p-t2__lead { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--d4p-gap); align-items: center; }
.d4p-t2__leadbody .d4p-kicker { margin-bottom: 8px; }
.d4p-t2__links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--d4p-line); }
.d4p-t2__link { display: block; color: var(--d4p-accent); font-weight: 600; line-height: 1.35; padding: 9px 0; border-bottom: 1px solid var(--d4p-line); }
.d4p-t2__link:hover { color: var(--d4p-accent-dark); }
@media (max-width: 782px) {
	.d4p-t2__lead { grid-template-columns: 1fr; }
	.d4p-t2__lead .d4p-thumb { margin-bottom: 12px; }
	.d4p-t2__links { grid-template-columns: 1fr; }
}

/* ---- Tipo 4 — Lista con cintillo (kicker arriba, foto bajo el titular) - */
.d4p-t4 { display: flex; flex-direction: column; }
.d4p-t4__item { padding: 18px 0; border-top: 1px solid var(--d4p-line); }
.d4p-t4__item:first-child { border-top: 0; padding-top: 0; }
.d4p-t4__item .d4p-thumb { margin-top: 10px; }

/* ---- Mosaico A — Central + satélites (cascada de tamaños) --------------- */
.d4p-mA { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--d4p-gap); align-items: start; }
.d4p-mA__lead .d4p-thumb { margin-bottom: 12px; }
.d4p-mA__side { display: flex; flex-direction: column; }
.d4p-mA__sec { padding-bottom: 18px; }
.d4p-mA__sec .d4p-thumb { margin-bottom: 8px; }
/* Satélites pequeños: en FILA (foto izquierda, titular derecha), apilados y
   con filete entre ellos. */
.d4p-mA__minirow { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--d4p-line); }
.d4p-mA__mini { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--d4p-line); }
.d4p-mA__mini:first-child { border-top: 0; padding-top: 0; }
.d4p-mA__mini .d4p-thumb { margin-bottom: 0; }
@media (max-width: 782px) {
	.d4p-mA { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- Mosaico B — Destacada + fila graduada (filetes verticales) --------- */
/* Destacada a dos columnas: foto izquierda, titular derecha (menos dominante
   que la versión apilada). */
.d4p-mB__lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--d4p-gap); align-items: center; margin-bottom: 22px; }
@media (max-width: 782px) { .d4p-mB__lead { grid-template-columns: 1fr; gap: 12px; } }
.d4p-mB__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d4p-gap); padding-top: 20px; border-top: 1px solid var(--d4p-line); }
.d4p-mB__sec .d4p-thumb { margin-bottom: 8px; }
.d4p-mB__sec + .d4p-mB__sec { border-left: 1px solid var(--d4p-line); padding-left: var(--d4p-gap); }
@media (max-width: 782px) {
	.d4p-mB__row { grid-template-columns: 1fr; gap: 0; }
	.d4p-mB__sec + .d4p-mB__sec { border-left: 0; border-top: 1px solid var(--d4p-line); padding-left: 0; padding-top: 16px; margin-top: 16px; }
}

/* ---- Compuesta — Destacada + lista (dos orígenes) ---------------------- */
.d4p-comp { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--d4p-gap) * 1.4); align-items: start; }
.d4p-comp__lead .d4p-thumb { margin-bottom: 12px; }
.d4p-comp__subgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d4p-gap); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--d4p-line); }
.d4p-comp__sub .d4p-thumb { margin-bottom: 8px; }
.d4p-comp__side { padding-left: var(--d4p-gap); border-left: 1px solid var(--d4p-line); }

@media (max-width: 960px) {
	.d4p-comp { grid-template-columns: 1fr; }
	.d4p-comp__side { padding-left: 0; border-left: 0; border-top: 1px solid var(--d4p-line); padding-top: 22px; }
}
@media (max-width: 782px) {
	.d4p-comp__subgrid { grid-template-columns: 1fr; }
}

/* ---- Archivo clásico (red de seguridad) + paginación ------------------- */
/* padding-bottom generoso: da aire entre la paginación y el footer. */
.d4p-archive { padding-top: 8px; padding-bottom: 56px; }
.d4p-pagination { margin-top: var(--d4p-block-gap); text-align: center; }
.d4p-pagination .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 2px; border: 1px solid var(--d4p-line); border-radius: var(--d4p-radius); }
.d4p-pagination .page-numbers.current { background: var(--d4p-accent); color: #fff; border-color: var(--d4p-accent); }

/* Filetes grises del archivo (aire de periódico): un filete superior por
   tarjeta (regla horizontal bajo la que cuelga el titular) + separadores
   verticales entre columnas en escritorio. Robusto a cualquier nº de columnas
   porque la regla horizontal no depende de la posición en la fila. */
.d4p-t3--filetes .d4p-t3__card { border-top: 2px solid var(--d4p-line-strong); padding-top: 12px; }
@media (min-width: 961px) {
	.d4p-t3--filetes .d4p-t3__card:not(:nth-child(4n+1)) { border-left: 1px solid var(--d4p-line); padding-left: var(--d4p-gap); }
}
@media (max-width: 960px) and (min-width: 783px) {
	.d4p-t3--filetes .d4p-t3__card:not(:nth-child(2n+1)) { border-left: 1px solid var(--d4p-line); padding-left: var(--d4p-gap); }
}

/* ==========================================================================
   5. CABECERA DE SECCIÓN  (archivo de categoría)
   Título + fondo por categoría (campos ACF atados a la taxonomía).
   ========================================================================== */
.d4p-sechead {
	padding: 46px 20px;
	margin-bottom: var(--d4p-block-gap);
	background: var(--d4p-accent);
	color: #fff;
	text-align: center;
}
.d4p-sechead--image { position: relative; background-size: cover; background-position: center; }
.d4p-sechead--image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.d4p-sechead__inner { position: relative; max-width: var(--d4p-maxw); margin-inline: auto; padding-inline: var(--d4p-gutter); }
.d4p-sechead__title { margin: 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 800; }
.d4p-sechead__desc { margin: 10px auto 0; max-width: 60ch; opacity: .92; }

/* ==========================================================================
   6. INTEGRACIÓN CON GENERATEPRESS
   Variantes de cabecera por body_class + destrabar el ancho full-bleed.
   ========================================================================== */
/* En las plantillas del diario, GP pone .site-content en flex y eso rompe
   el full-bleed; lo forzamos a block. */
/* Recorta el sobreancho del truco de sangre (el 100vw incluye la barra de
   scroll y sobra unos px). "clip" no rompe el sticky ni corta la sangre. */
body.d4p-diario { overflow-x: clip; }
body.d4p-diario .site-content { display: block; }

/* ==========================================================================
   6b. ARTÍCULO INDIVIDUAL (single.php)
   ========================================================================== */
.d4p-single { padding-block: 32px; }
.d4p-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: calc(var(--d4p-gap) * 1.6);
	align-items: start;
}
.d4p-single__title {
	font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
	line-height: 1.15; margin: 0.15em 0 0.35em; color: var(--d4p-ink);
}
.d4p-single__thumb { margin: 18px 0; border-radius: var(--d4p-radius); }
.d4p-single__content { font-size: 1.05rem; line-height: 1.7; color: var(--d4p-ink); }
.d4p-single__content p { margin: 0 0 1.1em; }
.d4p-single__content img { height: auto; border-radius: var(--d4p-radius); }
.d4p-single__content h2, .d4p-single__content h3 { margin: 1.4em 0 0.5em; line-height: 1.25; }

.d4p-single__tags { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--d4p-line); display: flex; flex-wrap: wrap; gap: 8px; }
.d4p-single__tags a { font-size: 0.82rem; color: var(--d4p-ink-soft); background: var(--d4p-bg-soft); padding: 4px 10px; border-radius: 20px; }
.d4p-single__tags a:hover { color: #fff; background: var(--d4p-accent); }

.d4p-single__side { position: sticky; top: 20px; }
.d4p-single__sidehead {
	background: var(--d4p-accent); color: #fff;
	font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
	font-size: 0.92rem; padding: 8px 12px; margin-bottom: 14px;
}
.d4p-rel { display: flex; flex-direction: column; }
.d4p-rel__item { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--d4p-line); }
.d4p-rel__item:first-child { border-top: 0; padding-top: 0; }
.d4p-rel__item--nothumb { grid-template-columns: 1fr; } /* sin foto: el titular ocupa todo */

@media (max-width: 900px) {
	.d4p-single__grid { grid-template-columns: 1fr; }
	.d4p-single__side { position: static; margin-top: 20px; }
}

/* ==========================================================================
   7. REPRODUCTOR DE AUDIO NATIVO  ([audio] embebido en el cuerpo)
   Rasgo por presencia: si el artículo trae [audio], se pinta con estilo;
   si no, no aparece nada. No se toca el shortcode ni las entradas.
   ========================================================================== */
.wp-audio-shortcode {
	border: 1px solid var(--d4p-line);
	border-left: 4px solid var(--d4p-accent);
	border-radius: var(--d4p-radius);
	padding: 6px 10px;
	background: var(--d4p-bg-soft);
}

/* ==========================================================================
   8. MAQUETACIONES DE WIDGETS  (Lista + widgets / Banner)
   La variabilidad "de relleno" (banners, imágenes, lo más leído) se aparca
   en los widgets nativos de WordPress. La plantilla solo dibuja la rejilla;
   el contenido lo pones en Apariencia -> Widgets. Cero plantillas nuevas por
   cada capricho.
   ========================================================================== */

/* Compuesta — Lista + widgets: la lista es SECUNDARIA, ocupa un tercio; los
   widgets, el resto. La columna estrecha va primero (izquierda). */
.d4p-lax { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: calc(var(--d4p-gap) * 1.4); align-items: start; }
.d4p-lax__aside { padding-left: var(--d4p-gap); border-left: 1px solid var(--d4p-line); }
@media (max-width: 960px) {
	.d4p-lax { grid-template-columns: 1fr; }
	.d4p-lax__aside { padding-left: 0; border-left: 0; border-top: 1px solid var(--d4p-line); padding-top: 22px; margin-top: 6px; }
}

/* Raíl compacto con miniatura pequeña en fila (foto izq, titular der). Fotos
   contenidas: nunca enormes, porque es un módulo secundario. */
.d4p-laxlist { display: flex; flex-direction: column; }
.d4p-laxlist__item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--d4p-line); }
.d4p-laxlist__item:first-child { border-top: 0; padding-top: 0; }
.d4p-laxlist__thumb { display: block; }
.d4p-laxlist__item .d4p-thumb { margin: 0; }
.d4p-laxlist .d4p-kicker { margin-bottom: 3px; }
.d4p-laxlist .d4p-kicker::before { display: none; } /* sin cuadradito en tan pequeño */

/* Piezas de widget (comunes a raíl y banner). Heredan tipografía de GP. */
.d4p-widget { margin-bottom: 22px; }
.d4p-widget:last-child { margin-bottom: 0; }
.d4p-widget img { width: 100%; height: auto; border-radius: var(--d4p-radius); }
.d4p-widget__title {
	font-size: 0.92rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
	margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--d4p-accent);
}
.d4p-widget ul { list-style: none; margin: 0; padding: 0; }
.d4p-widget li { padding: 9px 0; border-top: 1px solid var(--d4p-line); line-height: 1.35; }
.d4p-widget li:first-child { border-top: 0; padding-top: 0; }
.d4p-widget a { color: inherit; }
.d4p-widget a:hover { color: var(--d4p-accent); }

/* Banner a ancho de módulo: centra la pieza (típico: una imagen enlazada). */
.d4p-widgetzone--full { text-align: center; }
.d4p-widgetzone--full .d4p-widget { margin-bottom: 0; }
.d4p-widgetzone--full .d4p-widget img { display: inline-block; width: auto; max-width: 100%; }

/* Aviso de zona vacía (solo lo ve quien puede editar el tema). */
.d4p-widget--empty {
	padding: 14px 16px; border: 1px dashed var(--d4p-line); border-radius: var(--d4p-radius);
	color: var(--d4p-ink-soft); font-size: 0.85rem; text-align: left;
}

/* Contraste sobre fondo oscuro: el filete del raíl se aclara. */
.d4p-modulo--contentdark .d4p-lax__aside,
.d4p-modulo--contentdark .d4p-widget li { border-color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   9. REPRODUCTOR DE PODCAST FIJO  (iframe de player.rss.com)
   Los audios del diario son un iframe de RSS.com incrustado en el cuerpo.
   Cuando el artículo lo trae (body.d4p-has-player, puesto en PHP), ese iframe
   se ancla fijo sobre el footer, como un reproductor persistente. El resto
   de artículos no cargan nada de esto.
   ========================================================================== */
/* Escritorio: tarjeta flotante en la esquina inferior derecha, a su alto
   natural. Ocupa poco porque es una tarjeta (~380px), no una banda a todo el
   ancho; así se siente "fino" sin recortar el reproductor. No reserva hueco
   abajo (flota sobre el contenido, como cualquier mini-player). */
body.d4p-has-player .d4p-single__content iframe[src*="player.rss.com"] {
	position: fixed; bottom: 16px; right: 16px;
	width: min(380px, calc(100vw - 32px)) !important;
	height: var(--d4p-player-h) !important;
	max-width: none; margin: 0; z-index: 9999;
	background: #fff; border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
}
/* Móvil: banda fija a todo el ancho sobre el footer (patrón Spotify), con
   hueco reservado abajo para no tapar el pie. */
@media (max-width: 600px) {
	body.d4p-has-player .d4p-single__content iframe[src*="player.rss.com"] {
		left: 0; right: 0; bottom: 0;
		width: 100% !important; border-radius: 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
	}
	body.d4p-has-player { padding-bottom: calc(var(--d4p-player-h) + 14px); }
}

/* ==========================================================================
   10. CABECERA FIJA QUE ENCOGE AL HACER SCROLL
   La cabecera de GeneratePress se queda pegada arriba y, al superar el umbral
   (clase .d4p-header--scrolled que pone assets/js/d4p.js), reduce su altura y
   el tamaño del logo. Aditivo: no forka el header de GP.
   NOTA: para que el MENÚ viaje con la cabecera, en el Personalizador conviene
   poner la navegación dentro de la barra de cabecera (Diseño -> Navegación
   principal -> Ubicación: "Flotante a la derecha"), así logo + menú son una
   sola unidad fija.
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	/* El fondo lo gobierna el Personalizador de GeneratePress (Colores ->
	   Cabecera). No lo fijamos aquí para no pisar tu elección; GP ya da a la
	   cabecera un fondo propio, así que la sticky nunca queda transparente. */
	transition: padding .2s ease, box-shadow .2s ease;
}
.site-header .site-logo img,
.site-header .header-image,
.site-header .site-branding img {
	transition: max-height .2s ease;
}
.site-header.d4p-header--scrolled {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.site-header.d4p-header--scrolled .site-logo img,
.site-header.d4p-header--scrolled .header-image,
.site-header.d4p-header--scrolled .site-branding img {
	max-height: 44px !important;
	width: auto !important;
}

/* ==========================================================================
   11. CABECERA MÓVIL  (logo pequeño a la izquierda, hamburguesa a la derecha)
   Funciona cuando la navegación vive en la barra de cabecera (ver nota de la
   sección 10). Ajusta la fila para que logo y botón queden enfrentados.
   ========================================================================== */
@media (max-width: 768px) {
	.site-header .inside-header {
		display: flex; align-items: center; justify-content: space-between;
		flex-wrap: nowrap; gap: 12px;
	}
	.site-header .site-logo,
	.site-header .site-branding { margin: 0; flex: 0 0 auto; }
	.site-header .site-logo img,
	.site-header .site-branding img { max-height: 38px; width: auto; }
	.main-navigation .menu-toggle { margin: 0; }
	/* El buscador y el menú desplegado ocupan su fila completa bajo la barra. */
	.main-navigation.toggled { width: 100%; }
}