/*
 * Noche de Rock: ajustes que theme.json no cubre. Cartel de concierto.
 *
 * Los valores no se escriben aquí: salen de los tokens de theme.json (escala de espaciado de
 * 4/8 px, tamaños de texto, pesos, interlineados, márgenes por rol). Para cambiar la escala
 * se toca theme.json; este archivo solo los apoda.
 */

:root {
	color-scheme: dark;
	accent-color: var(--c-accent);

	/* Colores */
	--c-base: var(--wp--preset--color--base);
	--c-surface: var(--wp--preset--color--surface);
	--c-surface-2: var(--wp--preset--color--surface-2);
	--c-text: var(--wp--preset--color--contrast);
	--c-titulo: var(--wp--preset--color--title);
	
	--c-muted: var(--wp--preset--color--muted);
	--c-accent: var(--nr-acento, #ffc233);  /* --nr-acento: acento del disco de esta semana (inc/color-disco.php) */
	--c-ink: #1a1000;
	--c-cabecera: #070504;
	--c-live: var(--wp--preset--color--live);
	--c-boton: oklch(0.40 0.09 255);  /* botón «Escuchar»: azul apagado; con el acento se desplaza unos grados (ver abajo) */

	/* Espaciado: escala de 4/8 px */
	--s4: var(--wp--preset--spacing--4);
	--s8: var(--wp--preset--spacing--8);
	--s12: var(--wp--preset--spacing--12);
	--s16: var(--wp--preset--spacing--16);
	--s24: var(--wp--preset--spacing--24);
	--s32: var(--wp--preset--spacing--32);
	--s48: var(--wp--preset--spacing--48);
	--s-banda: var(--wp--preset--spacing--section);
	--s-arriba: 1rem; /* del menú al contenido, en todas las páginas */

	/* Texto */
	--fs-xs: var(--wp--preset--font-size--x-small);
	--fs-sm: var(--wp--preset--font-size--small);
	--fs-base: var(--wp--preset--font-size--base);
	--fs-md: var(--wp--preset--font-size--medium);
	--fs-lg: var(--wp--preset--font-size--large);
	--font-cartel: var(--wp--preset--font-family--cartel);
	--font-sistema: var(--wp--preset--font-family--system);
	--fw-regular: var(--wp--custom--weight--regular);
	--fw-medium: var(--wp--custom--weight--medium);
	--fw-semibold: var(--wp--custom--weight--semibold);
	--lh-tight: var(--wp--custom--leading--tight);
	--lh-snug: var(--wp--custom--leading--snug);

	/* Márgenes inferiores por rol (theme.json → custom.flow) */
	--mb-label: var(--wp--custom--flow--label);
	--mb-tag: var(--wp--custom--flow--tag);
	--mb-title: var(--wp--custom--flow--title);
	--mb-media: var(--wp--custom--flow--media);
	--mb-intro: var(--wp--custom--flow--intro);
	--mb-block: var(--wp--custom--flow--block);
	--mb-cta: var(--wp--custom--flow--cta);

	/* Medidas */
	--ancho: var(--wp--custom--width--wide);
	--medida: var(--wp--custom--width--measure);
	--gap-rejilla: var(--wp--custom--gap--grid);
	--gap-columnas: var(--wp--custom--gap--columns);
	--borde-tarjeta: var(--wp--custom--border--card);
	--borde-mini: var(--wp--custom--border--thumb);
	--sombra-tarjeta: var(--wp--custom--offset--card);
	--sombra-hero: var(--wp--custom--offset--hero);
	--mini: var(--wp--custom--thumb);
	--tag-rotacion: -1.5deg;
	--pared: url("/wp-content/themes/nochederock/assets/pie-fondo.svg") 0 0 / 360px 360px repeat; /* pared de entradas y carteles: cabecera y pie */

	/* Ritmo: espacio DENTRO de un bloque (compacto) y ENTRE bloques (generoso) */
	--ritmo-dentro: var(--wp--custom--rhythm--inside);
	--ritmo-compacto: var(--wp--custom--rhythm--tight);
	--ritmo-entre: var(--wp--custom--rhythm--between);

	/* Proporciones de imagen */
	--ratio-tarjeta: var(--wp--custom--ratio--card);
	--ratio-cartel: var(--wp--custom--ratio--poster);
	--ratio-cuadrada: var(--wp--custom--ratio--square);
	--ratio-ancha: var(--wp--custom--ratio--wide);
}

/*
 * Tonos derivados del acento, en OKLCH. Cada tono conserva su luminosidad y su viveza (de ahí el
 * contraste) y solo sigue el tono (hue) del acento, a la misma distancia que tenía del ámbar original
 * (h 83): con el ámbar de siempre salen exactamente los colores de theme.json. Si el acento es gris,
 * la viveza se reduce a cero y los fondos quedan neutros. El texto y el rojo de «en directo» no cambian.
 * `html:root` pesa más que el :root donde WordPress define la paleta.
 */
@supports (color: oklch(from red l c h)) {
	html:root {
		--c-ink: oklch(from var(--c-accent) 0.15 calc(c * 0.3) h);
		--c-cabecera: oklch(from var(--c-accent) 0.118 calc(0.0062 * min(1, c / 0.05)) calc(h - 31));
		--wp--preset--color--base: oklch(from var(--c-accent) 0.150 calc(0.0074 * min(1, c / 0.05)) calc(h - 48));
		--wp--preset--color--surface: oklch(from var(--c-accent) 0.192 calc(0.0140 * min(1, c / 0.05)) calc(h - 49));
		--wp--preset--color--surface-2: oklch(from var(--c-accent) 0.246 calc(0.0214 * min(1, c / 0.05)) calc(h - 50));
		--wp--preset--color--band: oklch(from var(--c-accent) 0.347 min(0.1213, calc(c * 0.76)) calc(h - 55));
		/* Azul del botón «Escuchar»: siempre azul (h 235–275), girado hacia el tono del acento; viveza algo mayor si el acento es muy vivo */
		--c-boton: oklch(from var(--c-accent) 0.40 calc(0.07 + 0.04 * min(1, c / 0.15)) calc(255 + 20 * sin((h - 83) * 1deg)));
		--c-tinte: oklch(from var(--c-accent) 0.165 calc(0.018 * min(1, c / 0.05)) h);  /* fondo de «Esta semana»: el acento, apenas */
	}
}

/* ---------- Accesibilidad ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
}
.skip-link:focus {
	background: var(--c-accent);
	color: var(--c-ink);
	padding: var(--s12) var(--s16);
	z-index: 100000;
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Objetivos táctiles de al menos 24 px (WCAG 2.2, 2.5.8) */
.wp-block-post-date a,
.etiquetas a,
.wp-block-post-terms a,
.pie-legal a,
.rejilla .wp-block-post-title a,
.banda p:not(.ver-mas) a,
.wp-block-site-title a { display: inline-block; padding-block: var(--s4); }

/* ---------- Bandas y contenedor ---------- */

.pagina { padding-top: var(--s-arriba); }
.cabecera-entrada > .wp-block-post-title { margin-top: var(--s8); }
.banda { margin-block: 0; padding-block: var(--s-banda); border-block: var(--borde-tarjeta) solid var(--c-accent); }
/* Páginas hechas de bandas (la agenda): la primera arranca igual de cerca del menú que el resto */
.wp-site-blocks > main > .banda:first-child { padding-top: var(--s-arriba); border-top: 0; }
.destacado { margin-block-start: 0; padding-top: var(--s-arriba); padding-bottom: var(--s-banda); background: var(--c-tinte, var(--c-base)); }
/* WordPress separa las piezas de la página con el blockGap; la cabecera y el contenido van pegados */
.wp-site-blocks > main { margin-block-start: 0; }
.banda.has-band-background-color :where(a) { color: var(--c-text); }

/*
 * Ritmo. Un bloque es una unidad con su propio espaciado interno, definido una sola vez aquí:
 *   .bloque            contenido separado por --ritmo-dentro
 *   .bloque--compacto  igual pero más junto (listas laterales)
 *   .bloque--amplio    más aire (título + columnas)
 *   .bloques           varios bloques seguidos, separados por --ritmo-entre
 * Los márgenes automáticos de WordPress (blockGap) se anulan dentro de ellos.
 */
.bloque,
.bloques { display: flex; flex-direction: column; }
.bloque { gap: var(--dentro, var(--ritmo-dentro)); }
.bloque--compacto { --dentro: var(--ritmo-compacto); }
.bloque--amplio { --dentro: var(--s24); }
.bloques { gap: var(--ritmo-entre); }
.bloque > *,
.bloques > * { margin-block: 0; }
.bloque > .titulo-seccion { align-self: flex-start; }

/* Columnas 2/3 + 1/3 sin estilos en línea */
.portada-superior,
.portada-resenas,
.pagina-agenda,
.puertas { gap: var(--gap-columnas); margin-bottom: 0; }
.wp-block-columns:not(.is-not-stacked-on-mobile) > .col-2-3 { flex: 2 1 0; }
.wp-block-columns:not(.is-not-stacked-on-mobile) > .col-1-3 { flex: 1 1 0; }

/* ---------- Etiquetas y títulos de sección ---------- */

.etiqueta {
	margin: 0 0 var(--mb-label);
	color: var(--c-accent);
	font-family: var(--font-cartel);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	letter-spacing: var(--wp--custom--tracking--cartel);
}
.etiqueta a { text-decoration: none; }
/* Barra bajo la portada, a todo su ancho */
.carta { box-shadow: var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent); }
.etiqueta--barra { margin: 0; padding: var(--s4) var(--s12); background: #ffffff; color: var(--c-ink); text-align: center; }

/* Título de sección: cartel amarillo ladeado. Es un bloque ajustado a su texto. */
.titulo-seccion {
	display: block;
	width: fit-content;
	margin: 0;
	font-family: var(--font-cartel);
	font-weight: var(--fw-regular);
	letter-spacing: var(--wp--custom--tracking--cartel);
}
.banda .titulo-seccion {
	padding: 0.15em 0.5em;
	background: var(--c-accent);
	color: var(--c-ink);
	transform: rotate(var(--tag-rotacion));
}
@media (prefers-reduced-motion: no-preference) {
	.banda .titulo-seccion { transition: transform 0.15s; }
	.banda:hover .titulo-seccion { transform: rotate(0); }
}
/* Explicación bajo el título de una sección */
.explica {
	margin: 0;
	color: var(--c-muted);
	text-wrap: pretty;
}
.historicos .explica,
.puerta .explica { font-size: var(--fs-sm); }

/* ---------- Tarjetas: rejilla y destacados ---------- */

/* Los bloques de tarjeta no llevan márgenes propios: se los dan los tokens de más abajo */
:where(.rejilla, .puerta-ultima, .portada-destacado, .historico) .wp-block-post-template > li > * { margin-block: 0; }
.wp-block-post-featured-image a { display: block; height: 100%; }
.rejilla .wp-block-post-featured-image { aspect-ratio: var(--ratio-tarjeta); }
.img-vertical { aspect-ratio: var(--ratio-cartel); }
/* Discos: la portada del disco es cuadrada, entera y sin recortar */
.category-disco-de-la-semana .rejilla .wp-block-post-featured-image,
.rejilla--discos .wp-block-post-featured-image { aspect-ratio: var(--ratio-cuadrada); }
.img-cuadrada { aspect-ratio: var(--ratio-cuadrada); }
.img-ancha { aspect-ratio: var(--ratio-ancha); }
.historico-item .wp-block-post-featured-image { aspect-ratio: var(--ratio-cuadrada); }

.wp-block-post-title { overflow-wrap: anywhere; }
.wp-block-post-date { font-variant-numeric: tabular-nums; }

.rejilla .wp-block-post-template,
.puerta-ultima .wp-block-post-template { padding: 0 var(--s12) var(--s12) 0; } /* hueco para la sombra dura */
.rejilla .wp-block-post-template { gap: var(--gap-rejilla); }
@media (max-width: 781px) {
	.rejilla .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.rejilla .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; }
}

.rejilla .wp-block-post-featured-image,
.puerta-ultima .wp-block-post-featured-image,
.portada-destacado .wp-block-post-featured-image {
	border: var(--borde-tarjeta) solid var(--c-text);
	box-shadow: var(--sombra-tarjeta) var(--sombra-tarjeta) 0 var(--c-accent);
	margin-block-end: calc(var(--sombra-tarjeta) + var(--mb-media)); /* la sombra dura no debe pisar el título */
}
.portada-destacado .wp-block-post-featured-image { box-shadow: var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent); margin-block-end: calc(var(--sombra-hero) + var(--mb-media)); }
.portada-destacado .carta { margin-block-end: calc(var(--sombra-hero) + var(--mb-media)); }
.carta .wp-block-post-featured-image { margin-block-end: 0; box-shadow: none; } /* el borde blanco va en la foto; la barra queda pegada debajo */
.portada-destacado .wp-block-post-template { padding: 0 var(--s12) var(--s12) 0; }
.rejilla .wp-block-post-featured-image img,
.puerta-ultima .wp-block-post-featured-image img,
.portada-destacado .wp-block-post-featured-image img,
.historico-item .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }

/* Disco clásico: al pasar por encima, la funda se inclina hacia delante y el vinilo asoma por detrás.
   Solo transform (compositor); con movimiento reducido el vinilo ni se pinta. */
@media (prefers-reduced-motion: no-preference) {
	.destacado { overflow-x: clip; } /* el vinilo y la funda inclinada se salen un poco de la columna: sin esto aparece scroll horizontal */
	.disco-vinilo .carta { position: relative; z-index: 6; isolation: isolate; perspective: 900px; }
	.disco-vinilo .carta::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset: 0 4% auto;
		aspect-ratio: 1;
		border-radius: 50%;
		box-shadow: 0 0 0 2px var(--c-accent); /* el vinilo es negro: el aro lo despega del fondo oscuro */
		background: url("/wp-content/themes/nochederock/assets/vinilo.svg") center / 108% no-repeat; /* el disco ocupa el 92,5 % del dibujo */
		pointer-events: none;
		transform: translate3d(0, 0, 0) rotate(0);
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}
	.disco-vinilo .carta .wp-block-post-featured-image {
		position: relative;
		z-index: 1;
		transform-origin: 50% 100%;
		transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
		will-change: transform;
	}
	/* Al entrar: expo-out (arranca rápido y asienta); al salir: la animación contraria, más corta y suave */
	.disco-vinilo .carta:focus-within::before { transform: translate3d(0, -26%, 0) rotate(100deg); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
	.disco-vinilo .carta:focus-within .wp-block-post-featured-image { transform: rotateX(-8deg); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
	@media (hover: hover) {
		.disco-vinilo .carta:hover::before { transform: translate3d(0, -26%, 0) rotate(100deg); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
		.disco-vinilo .carta:hover .wp-block-post-featured-image { transform: rotateX(-8deg); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
	}
}

/* Títulos de tarjeta: texto de sistema en semibold; el cartel se reserva para etiquetas y títulos grandes */
.rejilla .wp-block-post-title,
.puerta-ultima .wp-block-post-title {
	margin: 0 0 var(--mb-title);
	font-family: var(--font-sistema);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}
.portada-destacado .wp-block-post-title { margin: 0 0 var(--mb-title); color: var(--c-titulo); }
.portada-destacado .wp-block-post-excerpt { margin-top: var(--s12); }
/* Último programa: la presentación y, al lado, lo que sonó */
.programa-cuerpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s24); align-items: start; margin-top: var(--s12); }
.programa-cuerpo .wp-block-post-excerpt { margin-top: 0; font-size: var(--fs-base); }
.playlist { padding-inline-start: var(--s16); border-inline-start: 3px solid var(--c-accent); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.playlist > * { margin: 0; }
.playlist__titulo { margin-block-end: var(--s8); font-family: var(--font-cartel); font-size: var(--fs-sm); letter-spacing: var(--wp--custom--tracking--cartel); color: var(--c-accent); }
.playlist ol { list-style: none; padding: 0; display: grid; gap: var(--s4); }
.playlist__banda { font-weight: var(--fw-semibold); color: var(--c-titulo); }
.playlist__cancion { color: var(--c-muted); }
.playlist__mas { margin-block-start: var(--s8); }
.playlist__mas a { color: var(--c-text); }
.playlist__mas a:hover { color: var(--c-accent); }
@media (max-width: 781px) {
	.programa-cuerpo { grid-template-columns: 1fr; }
}
.rejilla .wp-block-post-title a,
.puerta-ultima .wp-block-post-title a,
.portada-destacado .wp-block-post-title a,
.historico-item .wp-block-post-title a { color: var(--c-titulo); text-decoration: none; }
.rejilla .wp-block-post-title a:hover,
.puerta-ultima .wp-block-post-title a:hover,
.portada-destacado .wp-block-post-title a:hover,
.historico-item .wp-block-post-title a:hover { color: var(--c-accent); }

/* ---------- Históricos: tarjetas invisibles hasta el hover, enteras clicables ---------- */

.bloque--compacto .titulo-seccion { font-size: var(--fs-md); }
.historico .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.historico .wp-block-post-template > li { margin: 0; }
.historico-item {
	position: relative;
	margin: 0;
	padding: var(--s8);
	gap: var(--s12);
	transition: background-color 0.15s, transform 0.15s;
}
.historico-item:hover,
.historico-item:focus-within { background: var(--c-surface-2); transform: translateY(-2px); }
.historico-item .wp-block-post-featured-image { flex: 0 0 var(--mini); width: var(--mini); margin: 0; border: var(--borde-mini) solid var(--c-text); box-shadow: none; }
.historico-texto { display: flex; flex-direction: column; }
.historico-texto > * { margin: 0; }
.historico-item .wp-block-post-title {
	margin: 0;
	font-family: var(--font-sistema);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}
.historico-item .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.historico-item .tipo { margin: 0; font-size: var(--fs-xs); color: var(--c-accent); }
/* Fila de miniaturas bajo una rejilla (Daily Bugle): tres por fila, fecha en su propia línea */
.historico--fila { margin-block-start: var(--s8); }
.historico--fila .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s8); }
@media (max-width: 781px) {
	.historico--fila .wp-block-post-template { grid-template-columns: 1fr; }
}
.historico--fila .wp-block-post-date { margin: 0; }

/* ---------- Habitación 101: cuatro columnas alineadas arriba ---------- */

.puertas { align-items: flex-start; }
/* Una fila de rejilla por elemento (subgrid): títulos, imágenes y enlaces quedan alineados entre las cuatro */
@media (min-width: 782px) {
	.wp-block-columns.puertas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columnas); row-gap: var(--ritmo-compacto); }
	.wp-block-columns.puertas > .puerta { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
}
.puerta .titulo-seccion { font-size: var(--fs-lg); }

/* ---------- Enlace de cierre de sección ---------- */

.ver-mas { margin: var(--mb-cta) 0 0; width: 100%; }
.bloque > .ver-mas { margin-top: var(--s8); }
.ver-mas a {
	display: block;
	padding: var(--s12);
	color: var(--c-muted);
	text-decoration: none;
	border-top: 1px solid var(--c-surface-2);
	transition: background-color 0.15s, color 0.15s, padding-left 0.15s;
}
.ver-mas a::after { content: " →"; }
.ver-mas a:hover,
.ver-mas a:focus-visible { background: var(--c-surface-2); color: var(--c-accent); padding-left: var(--s16); }
.banda.has-surface-background-color .ver-mas a:hover { background: var(--c-base); }

/* ---------- Agenda (patterns/agenda.php): cada evento es una tarjeta invisible hasta el hover, entera clicable ---------- */

.agenda-lista,
.agenda-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.agenda-lista li,
.agenda-mini li {
	position: relative;
	padding: var(--s8);
	transition: background-color 0.15s, transform 0.15s;
}
.agenda-lista li:hover,
.agenda-lista li:focus-within,
.agenda-mini li:hover,
.agenda-mini li:focus-within { background: var(--c-surface-2); transform: translateY(-2px); }
.agenda-lista li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s12); }
.agenda-lista .dia { color: var(--c-accent); }
.agenda-lista .donde,
.donde-hoy { color: var(--c-muted); font-size: var(--fs-sm); }
.agenda-lista .donde { display: block; }
@media (max-width: 480px) { .agenda-lista li { grid-template-columns: 1fr; gap: 0; } }
.agenda-lista a,
.agenda-mini a { color: var(--c-titulo); font-weight: var(--fw-semibold); text-decoration: none; }
.agenda-lista a:hover,
.agenda-mini a:hover { color: var(--c-accent); }
.agenda-lista a::after,
.agenda-mini a::after { content: ""; position: absolute; inset: 0; }
.agenda-mini .donde-hoy { display: block; }
/* Carteles: miniatura a la derecha de cada fila; el de hoy, grande y encima */
.agenda-lista li.con-cartel { grid-template-columns: 10rem 1fr auto; align-items: center; }
.agenda-mini li.con-cartel { display: grid; grid-template-columns: 1fr auto; gap: var(--s12); align-items: center; }
.agenda-cartel { display: block; line-height: 0; }
.agenda-cartel img { width: 3.5rem; aspect-ratio: var(--ratio-cartel); object-fit: cover; border: var(--borde-mini) solid var(--c-text); }
.agenda-cartel--grande { width: fit-content; margin-bottom: var(--s12); }
.agenda-cartel--grande img { width: auto; max-width: 100%; max-height: 28rem; aspect-ratio: auto; box-shadow: var(--sombra-tarjeta) var(--sombra-tarjeta) 0 var(--c-accent); }
@media (max-width: 480px) {
	.agenda-lista li.con-cartel { grid-template-columns: 1fr auto; column-gap: var(--s12); }
	.agenda-lista li.con-cartel .dia { grid-column: 1; }
	.agenda-lista li.con-cartel .agenda-cartel { grid-column: 2; grid-row: 1 / span 2; }
}
.agenda-vacia { margin: 0; padding: var(--s24); border: 2px dashed var(--c-surface-2); color: var(--c-muted); }

/* «Se buscan chivatos»: una entrada de concierto con su talón troquelado, que invita a apuntar eventos */
.chivato {
	--muesca: 0.75rem;
	position: relative;
	display: grid;
	gap: var(--s12);
	padding: var(--s32) var(--s24) var(--s16);
	background: var(--c-surface);
	border: var(--borde-tarjeta) solid var(--c-text);
	box-shadow: var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent);
}
.chivato > * { margin: 0; }
/* Asoma por la esquina superior derecha, por fuera del borde */
.chivato__kicker {
	position: absolute;
	top: -0.9em;
	right: calc(-1 * var(--s16));
	padding: var(--s4) var(--s12);
	background: var(--c-live);
	color: #fff;
	font-family: var(--font-cartel);
	letter-spacing: var(--wp--custom--tracking--cartel);
	transform: rotate(var(--tag-rotacion));
}
.chivato__titulo { font-family: var(--font-cartel); font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--wp--custom--tracking--cartel); color: var(--c-titulo); }
.chivato p { color: var(--c-muted); text-wrap: pretty; }
.chivato__pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--s8); font-size: var(--fs-sm); }
.chivato__pasos li { counter-increment: paso; display: grid; grid-template-columns: 1.75rem 1fr; align-items: center; gap: var(--s8); }
.chivato__pasos li::before {
	content: counter(paso);
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var(--c-accent);
	border-radius: 50%;
	color: var(--c-accent);
	font-weight: var(--fw-semibold);
}
.chivato__boton {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--s16);
	margin-block: var(--s8);
	padding: var(--s16) var(--s24);
	background: var(--c-accent);
	color: var(--c-ink);
	border: var(--borde-tarjeta) solid var(--c-text);
	box-shadow: var(--sombra-tarjeta) var(--sombra-tarjeta) 0 var(--c-text);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}
.chivato__boton:hover,
.chivato__boton:focus-visible { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-text); }
.chivato__mas { font-family: var(--font-cartel); font-size: 3.5rem; line-height: 0.8; }
@media (prefers-reduced-motion: no-preference) {
	.chivato__mas { transition: transform 0.3s; }
	.chivato__boton:hover .chivato__mas { transform: rotate(90deg); }
}
.chivato__texto { display: grid; font-family: var(--font-cartel); font-size: var(--fs-lg); line-height: var(--lh-tight); letter-spacing: var(--wp--custom--tracking--cartel); }
.chivato__sub { font-family: var(--font-sistema); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: 0; }
/* El talón: línea de puntos con dos muescas, como el trozo que se queda el portero */
.chivato__cuenta {
	position: relative;
	margin-inline: calc(-1 * var(--s24)) !important;
	padding: var(--s16) var(--s24) 0;
	border-top: 2px dashed var(--c-muted);
	font-size: var(--fs-sm);
	text-align: center;
}
.chivato__cuenta::before,
.chivato__cuenta::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--muesca) - 1px);
	width: calc(2 * var(--muesca));
	height: calc(2 * var(--muesca));
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: var(--borde-tarjeta) solid var(--c-text);
}
.chivato__cuenta::before { left: calc(-1 * var(--muesca) - var(--borde-tarjeta)); clip-path: inset(0 0 0 50%); }
.chivato__cuenta::after { right: calc(-1 * var(--muesca) - var(--borde-tarjeta)); clip-path: inset(0 50% 0 0); }

/* ---------- Cabecera: dos líneas, oscura, pegada al hacer scroll ---------- */

/* Al hacerse compacta, la cabecera pierde altura y el navegador, para mantener lo que se ve,
   corrige el scroll y lo devuelve por debajo del umbral: parpadeo en bucle. Sin anclaje.
   Chrome lo mira en body, no en html. */
html, body { overflow-anchor: none; }

.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}
.site-header { position: relative; isolation: isolate; background: var(--c-cabecera); border-bottom: 3px solid var(--c-accent); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-accent); opacity: 0.07; -webkit-mask: var(--pared); mask: var(--pared); pointer-events: none; }
.cab-linea { box-sizing: border-box; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--s16); }
.cab-linea--1 { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); padding-block: var(--s16); }
.site-logo { display: block; line-height: 0; }
.site-logo img { height: 3.4rem; width: auto; transition: height 0.2s; }
/* Cuño «est. 1996» en la esquina del logo: solo con la cabecera grande */
.site-logo { position: relative; margin-inline-end: 2.4rem; transition: margin 0.2s; }
.sello {
	position: absolute;
	top: -0.7rem;
	right: -2.6rem;
	width: 3.3rem;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--c-accent);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px var(--c-cabecera), inset 0 0 0 3px var(--c-accent); /* doble aro de tampón */
	color: var(--c-accent);
	font-family: var(--font-cartel);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--cartel);
	transform: rotate(-14deg);
	opacity: 0.92;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}
.sello__est { font-size: 0.6rem; }
.sello__ano { font-size: 0.95rem; }
/* A la derecha, dos pisos: redes arriba y enlaces debajo */
.cab-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s16); }
/* «Redes» es un botón; al pulsarlo se desvanece y los iconos entran desde la derecha. visibility
   saca del tabulador lo que está oculto. */
.cab-redes-caja { display: grid; justify-items: end; align-items: center; }
.cab-redes-caja > * { grid-area: 1 / 1; }
.cab-redes-boton { padding: var(--s4); background: none; border: 0; color: var(--c-muted); font: inherit; font-size: var(--fs-base); font-weight: var(--fw-regular); cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s, color 0.15s; }
.cab-redes-boton:hover { color: var(--c-accent); }
.cab-redes-caja.is-abierta .cab-redes-boton { opacity: 0; visibility: hidden; transform: translateX(-0.75rem); transition-delay: 0s, 0s, 0.25s, 0s; }
.cab-redes { visibility: hidden; opacity: 0; transform: translateX(2rem); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.cab-redes-caja.is-abierta .cab-redes { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
	.cab-redes-boton, .cab-redes { transition-duration: 0s, 0s, 0s, 0s; transition-delay: 0s; }
}
.cab-redes { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s12); }
.cab-redes a { display: block; line-height: 0; }
.cab-redes img { height: 22px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.15s, opacity 0.15s; }
.cab-redes a:hover img,
.cab-redes a:focus-visible img { filter: none; opacity: 1; }
.cab-redes-texto { display: none; }
.cab-util { display: flex; align-items: center; gap: var(--s4) var(--s24); }
.cab-util a { color: var(--c-text); text-decoration: none; font-weight: var(--fw-medium); }
.cab-util .cab-enlace { padding: var(--s8) var(--s4); border-bottom: 3px solid transparent; }
.cab-util .cab-enlace.es-actual { border-bottom-color: var(--c-accent); }
.cab-util .cab-enlace:hover { color: var(--c-accent); }
/* El cartel del Disco de la Semana: el título en dos líneas como mucho */
.cab-util .cab-disco {
	max-width: 17rem;
	padding: var(--s4) var(--s16);
	background: var(--c-accent);
	color: var(--c-ink);
	font-family: var(--font-cartel);
	font-size: var(--fs-sm);
	font-weight: var(--fw-regular);
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking--cartel);
	transform: rotate(var(--tag-rotacion));
	transition: transform 0.15s;
}
.cab-util .cab-disco:hover { transform: rotate(0); }
.cab-disco__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cab-disco__corto { display: none; }
.cab-util .cab-buscar { display: inline-flex; padding: var(--s8); }
.cab-util .cab-buscar:hover { color: var(--c-accent); }

.cab-linea--2 { max-width: none; padding-inline: 0; border-top: 1px solid var(--c-surface-2); }
/* Secciones a la izquierda (se desplazan en el móvil); la agenda, fija a la derecha */
.cab-linea--2__dentro { display: flex; align-items: stretch; gap: var(--s8); box-sizing: border-box; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--s16); }
.cab-linea--2 ul { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s4) var(--s8); overflow-x: auto; scrollbar-width: none; }
.cab-linea--2 .cab-agenda { flex: none; display: flex; align-items: center; gap: var(--s8); padding-inline: var(--s12) var(--s8); border-left: 1px solid var(--c-surface-2); font-weight: var(--fw-semibold); }
.cab-agenda svg { flex: none; color: var(--c-accent); }
.cab-linea--2 a {
	display: block;
	white-space: nowrap;
	padding: var(--s12) var(--s8);
	color: var(--c-text);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	border-bottom: 3px solid transparent;
}
.cab-linea--2 a:hover,
.cab-linea--2 a.es-actual { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.cab-secciones { display: none; }
/* Si la lista de secciones se desborda, un degradado en el borde avisa de que hay más (clases que pone cabecera.js) */
.cab-linea--2 ul.hay-mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.cab-linea--2 ul.hay-mas-izq { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem); mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
.cab-linea--2 ul.hay-mas-izq.hay-mas-der { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
/* En el móvil las secciones se recogen tras el botón «Secciones» y se abren como un panel vertical */
@media (max-width: 800px) {
	.cab-linea--2__dentro { position: relative; justify-content: space-between; }
	.cab-secciones { display: flex; align-items: center; gap: var(--s8); padding: var(--s12) var(--s8); background: none; border: 0; color: var(--c-text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
	.cab-secciones svg { color: var(--c-accent); }
	.cab-linea--2 ul { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1; flex-direction: column; gap: 0; padding: var(--s8) var(--s16); background: var(--c-cabecera); border-bottom: 3px solid var(--c-accent); overflow: visible; }
	.cab-linea--2.is-abierta ul { display: flex; }
	.cab-linea--2 ul a { padding: var(--s12) var(--s8); border-bottom: 1px solid var(--c-surface-2); border-left: 3px solid transparent; }
	.cab-linea--2 ul a.es-actual { border-bottom-color: var(--c-surface-2); border-left-color: var(--c-accent); }
}

.cab-buscador { background: var(--c-surface-2); border-top: 1px solid var(--c-accent); }
.cab-buscador[hidden] { display: none; }
.cab-buscador form { display: flex; gap: var(--s8); max-width: var(--ancho); margin-inline: auto; padding: var(--s12) var(--s16); }
.cab-buscador input { flex: 1; min-width: 0; padding: var(--s8) var(--s12); font: inherit; background: var(--c-base); color: var(--c-text); border: 2px solid var(--c-muted); }
.cab-buscador button { padding: var(--s8) var(--s16); font: inherit; font-weight: var(--fw-semibold); background: var(--c-accent); color: var(--c-ink); border: 0; cursor: pointer; }

/* Pegada: solo la primera línea, pequeña */
.site-header.is-compacta .cab-linea--1 { padding-block: var(--s4); }
.site-header.is-compacta .site-logo img { height: 1.75rem; }
.site-header.is-compacta .site-logo { margin-inline-end: 0; }
.site-header.is-compacta .sello { opacity: 0; transform: rotate(-14deg) scale(0.6); }
.site-header.is-compacta .cab-redes-caja,
.site-header.is-compacta .cab-redes-texto { display: none; }
@media (max-width: 800px) {
	.site-header.is-compacta .cab-util { grid-column: 2; grid-row: 1; }
}
.site-header.is-compacta .cab-linea--2 { display: none; }
.site-header.is-compacta .cab-disco__titulo { display: none; }
.site-header.is-compacta .cab-disco__corto { display: inline; }
@media (max-width: 800px) {
	.cab-linea--1 { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); padding-block: var(--s12); }
	.site-logo img { height: 2.1rem; }
	.site-logo { margin-inline-end: 0; }
	.sello { display: none; }
	/* Dos filas: el logo y las redes arriba; debajo el Disco de la Semana y Contacto, Foro y la lupa */
	.cab-derecha { display: contents; }
	.cab-redes-caja { grid-column: 2; grid-row: 1; }
	.cab-redes { justify-content: flex-end; gap: var(--s12); }
	.cab-util { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: var(--s4) var(--s8); }
	.cab-util .cab-enlace:nth-last-child(3) { margin-inline-start: auto; }
	.cab-redes img { height: 22px; }
	/* En el móvil no cabe el título: siempre el texto corto */
	.cab-util .cab-disco { white-space: nowrap; }
	.cab-disco__titulo { display: none; }
	.cab-disco__corto { display: inline; }
	.cab-util .cab-enlace { padding-inline: var(--s4); }
}

/* Muy estrecha: «Redes» como texto que baja al pie */
@media (max-width: 500px) {
	.cab-redes-caja { display: none; }
	.cab-redes-texto { display: block; grid-column: 2; grid-row: 1; justify-self: end; padding: var(--s4); color: var(--c-muted); text-decoration: none; font-size: var(--fs-base); font-weight: var(--fw-regular); }
	.cab-redes-texto:hover { color: var(--c-accent); }
}

/* ---------- Paginación, subsecciones, índice, búsqueda ---------- */

.wp-block-query-pagination { margin-top: var(--s48); gap: var(--s12); }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers { padding: var(--s4) var(--s12); }
.wp-block-query-pagination .current { background: var(--c-accent); color: var(--c-ink); font-weight: var(--fw-semibold); }

.subsecciones ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s8); padding: 0; margin: var(--s16) 0 0; }
.subsecciones a { display: inline-block; padding: var(--s8) var(--s16); border: var(--borde-mini) solid var(--c-accent); text-decoration: none; font-weight: var(--fw-medium); }
.subsecciones a:hover { background: var(--c-accent); color: var(--c-ink); }

.indice-secciones { list-style: none; padding: 0; font-size: var(--fs-md); }
.indice-secciones ul { list-style: none; padding-left: var(--s24); font-size: var(--fs-base); }
.indice-secciones li { margin-block: var(--s8); }

.wp-block-search__input { padding: var(--s12); background: var(--c-surface-2); color: var(--c-text); border: 2px solid var(--c-muted); }
.wp-block-search__button { padding: var(--s12) var(--s24); background: var(--c-accent); color: var(--c-ink); border: 0; font-weight: var(--fw-semibold); }

/* ---------- Contenido de la entrada (estilo «prose»): márgenes en em, escalan con el texto ---------- */

.contenido { --wp--style--block-gap: 1.25em; }
.contenido > h2 { margin-block: 2em 0.75em; }
.contenido > h3 { margin-block: 1.6em 0.6em; }
.contenido > h4 { margin-block: 1.5em 0.5em; }
.contenido > :is(blockquote, pre) { margin-block: 1.6em; }
.contenido > :is(figure, .wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video) { margin-block: 2em; }
.contenido > hr { margin-block: 3em; }
.contenido :is(ul, ol) { padding-inline-start: 1.625em; }
.contenido li + li { margin-top: 0.5em; }
.contenido .wp-block-image figcaption,
.contenido .wp-block-gallery figcaption { font-size: var(--fs-sm); }
.contenido a.ampliar { cursor: zoom-in; }
.visor { border: 0; padding: 0; margin: 0; max-width: none; max-height: none; width: 100%; height: 100dvh; background: transparent; color: #fff; overflow: hidden; }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: rgb(0 0 0 / 0.92); }
.visor__figura { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100%; max-height: 100dvh; padding: 3.5rem 0 1rem; box-sizing: border-box; }
.visor__img { display: block; max-width: 100vw; max-height: calc(100dvh - 8rem); width: auto; height: auto; object-fit: contain; }
.visor__pie { margin-top: 0.75rem; padding-inline: 1rem; max-width: 60rem; text-align: center; font-size: var(--fs-sm); }
.visor__contador { position: absolute; top: 1rem; left: 1rem; margin: 0; font-size: var(--fs-sm); }
.visor__btn { position: absolute; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.visor__btn:hover, .visor__btn:focus-visible { background: var(--c-accent, #c00); }
.visor__cerrar { top: 0.5rem; right: 0.5rem; }
.visor__ant, .visor__sig { top: 50%; transform: translateY(-50%); }
.visor__ant { left: 0.5rem; }
.visor__sig { right: 0.5rem; }
.visor--solo :is(.visor__ant, .visor__sig, .visor__contador) { display: none; }
@media (prefers-reduced-motion: reduce) { .visor, .visor * { transition: none !important; animation: none !important; } }
.contenido .wp-block-audio audio { width: 100%; min-height: 3.25rem; }
.contenido .wp-block-video video,
.contenido .wp-block-embed iframe { max-width: 100%; }
.etiquetas { color: var(--c-muted); }

/* ---------- Comentarios del foro (inc/comentarios-foro.php) ---------- */

.comentarios-foro { margin-top: var(--ritmo-entre); padding-top: var(--s32); border-top: var(--borde-tarjeta) solid var(--c-accent); }
.comentarios-foro__titulo { margin-bottom: var(--s24); font-size: var(--fs-lg); }
.comentarios-foro p { margin: var(--s16) 0 0; }
.comentarios-foro__mas:empty { display: none; }
.comentarios-foro__mas,
.comentarios-foro__cuenta,
.comentarios-foro__aviso { color: var(--c-muted); font-size: var(--fs-sm); }
.comentarios-foro__participar a { display: inline-block; padding: var(--s12) var(--s24); background: var(--c-accent); color: var(--c-ink); font-weight: var(--fw-semibold); text-decoration: none; }
.comentarios-foro__participar a:hover { filter: brightness(1.12); }
.comentarios-foro__cuenta a { display: inline-block; padding-block: var(--s4); }

.comentarios-foro__lista { display: flex; flex-direction: column; gap: var(--s16); margin: 0; padding: 0; list-style: none; }
.comentario__cuerpo { padding: var(--s16); background: var(--c-surface); border-left: var(--borde-tarjeta) solid var(--c-surface-2); }
.comentario__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s12); margin-bottom: var(--s12); font-size: var(--fs-sm); }
.comentario__avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.comentario__autor { font-weight: var(--fw-semibold); color: var(--c-text); text-decoration: none; }
.comentario__autor:hover { text-decoration: underline; }
.comentario__fecha { color: var(--c-muted); }
.comentario__meta a { display: inline-block; padding-block: var(--s4); }

/* Texto de la respuesta: HTML del foro (citas, oneboxes, imágenes, código). Nada se sale en móvil. */
.comentario__texto { overflow-wrap: anywhere; }
.comentario__texto > :first-child { margin-top: 0; }
.comentario__texto > :last-child { margin-bottom: 0; }
.comentario__texto :is(p, ul, ol, blockquote, pre, .quote, .onebox) { margin-block: 0.75em; }
.comentario__texto img:not(.emoji, .avatar) { max-width: 100%; height: auto; }
.comentario__texto img.emoji { width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
/* Sin scroll horizontal: una zona que se desplaza tendría que poder recibir el foco */
.comentario__texto pre { white-space: pre-wrap; padding: var(--s12); background: var(--c-base); }
.comentario__texto :is(blockquote, .quote, .onebox) { margin-inline: 0; padding: var(--s12) var(--s16); background: var(--c-surface-2); border-left: 4px solid var(--c-muted); }
.comentario__texto .quote .title { display: flex; align-items: center; gap: var(--s8); color: var(--c-muted); font-size: var(--fs-sm); }
.comentario__texto .quote .title img { width: 1.25rem; height: 1.25rem; border-radius: 50%; }
.comentario__texto .quote blockquote { margin: var(--s8) 0 0; padding: 0; background: none; border: 0; }
.comentario__texto .onebox { overflow: hidden; }
.comentario__texto .onebox img { max-width: 100%; height: auto; }
.comentario__texto .onebox .onebox-body img:not(.site-icon) { float: none; display: block; max-height: 10rem; width: auto; }
.comentario__texto .onebox .site-icon { width: 1rem; height: 1rem; vertical-align: middle; }
.comentario__texto iframe { max-width: 100%; }

/* ---------- Vídeo de YouTube con clic ---------- */

.yt-lite { aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s12); padding: var(--s16); background: var(--c-surface-2); border: 2px solid var(--c-muted); text-align: center; }
.yt-lite__texto { margin: 0; font-weight: var(--fw-semibold); }
.yt-lite__enlace { cursor: pointer; border: 0; padding: var(--s12) var(--s24); font: inherit; font-weight: var(--fw-semibold); background: var(--c-accent); color: var(--c-ink); text-decoration: none; }
.yt-lite--activo { padding: 0; border: 0; display: block; }
.yt-lite iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Tarjetas de la rejilla: invisibles hasta el hover, enteras clicables (como los históricos) */
.rejilla .wp-block-post-template { gap: var(--s8); }
.rejilla .wp-block-post-template > li {
	position: relative;
	padding: var(--s8);
	transition: background-color 0.15s, transform 0.15s;
}
.rejilla .wp-block-post-template > li:hover,
.rejilla .wp-block-post-template > li:focus-within { background: var(--c-surface-2); transform: translateY(-2px); }
.rejilla .wp-block-post-title a::after,
.puerta-ultima .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }

/* Última entrada de cada puerta de la Habitación 101: mismo hover que las tarjetas de la rejilla */
.puerta-ultima .wp-block-post-template { list-style: none; margin: 0; }
.puerta-ultima .wp-block-post-template > li {
	position: relative;
	padding: var(--s8);
	transition: background-color 0.15s, transform 0.15s;
}
.puerta-ultima .wp-block-post-template > li:hover,
.puerta-ultima .wp-block-post-template > li:focus-within { background: var(--c-surface-2); transform: translateY(-2px); }

/* Última celda de «más de esta sección»: botón grande a toda la sección */
.rejilla .wp-block-post-template > li.ver-todas { display: flex; align-self: start; padding: var(--s8); }
.rejilla .wp-block-post-template > li.ver-todas:hover { background: transparent; }
.ver-todas a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--ratio-tarjeta);
	padding: var(--s16);
	background: var(--c-accent);
	color: var(--c-ink);
	font-family: var(--font-cartel);
	font-size: var(--fs-lg);
	letter-spacing: var(--wp--custom--tracking--cartel);
	text-align: center;
	text-decoration: none;
	box-shadow: var(--sombra-tarjeta) var(--sombra-tarjeta) 0 var(--c-text);
	transition: transform 0.15s, box-shadow 0.15s;
}
.ver-todas a:hover,
.ver-todas a:focus-visible { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-text); }

/* Cabecera de archivo: título, explicación y subsecciones con el mismo ritmo que las bandas */
.cabecera-archivo { padding-bottom: var(--s24); }
.cabecera-archivo .explica { margin-top: var(--s8); }
.explica p { margin: 0; }

/* ---------- Botón «Escuchar el programa»: una pieza en dos partes, el programa arriba y Spotify | iVoox debajo ---------- */

.escuchar-caja {
	position: relative;
	z-index: 5;
	margin: 0 var(--sombra-hero) var(--sombra-hero) 0;
	background: var(--c-boton);
	color: var(--c-text);
	box-shadow: var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent);
	border: var(--borde-tarjeta) solid var(--c-text);
}
.escuchar {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: var(--s16);
	align-items: center;
	margin: 0;
	padding: var(--s8) var(--s16);
	color: inherit;
	text-decoration: none;
	transition: filter 0.15s;
}
.escuchar:hover,
.escuchar:focus-visible { filter: brightness(1.12); }
.escuchar__kicker { grid-column: 1; display: flex; align-items: center; gap: var(--s8); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.escuchar__texto { grid-column: 1; font-family: var(--font-cartel); font-size: var(--fs-md); line-height: var(--lh-tight); letter-spacing: var(--wp--custom--tracking--cartel); }
.escuchar__nota { grid-column: 1; font-size: var(--fs-xs); opacity: 0.85; }
.escuchar__icono { grid-column: 2; grid-row: 1 / span 3; width: 32px; height: 32px; }
.escuchar__punto { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--c-text); }
@media (prefers-reduced-motion: no-preference) {
	.escuchar__punto { animation: ndr-latido 3.6s ease-in-out infinite; }
}
@keyframes ndr-latido { 50% { opacity: 0.55; } }

/* Spotify e iVoox: la segunda parte, siempre a la vista */
.escuchar-caja__fuera {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.escuchar-caja__fuera a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--s8);
	padding: var(--s4) var(--s16);
	color: inherit;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color 0.15s;
}
.escuchar-caja__fuera a + a { border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.escuchar-caja__fuera a:hover,
.escuchar-caja__fuera a:focus-visible { background: rgb(0 0 0 / 0.15); }
.escuchar-caja__fuera .logo { flex: none; width: 20px; height: 20px; }

/* ---------- Pie: una pared de entradas y carteles ---------- */

.pie {
	--pie-papel: var(--c-text);
	--pie-tinta: var(--c-ink);
	--pie-talon: 6.5rem;
	--pie-mordisco: 0.8rem;
	position: relative;
	isolation: isolate;
	margin-block-start: var(--wp--preset--spacing--section-lg);
	padding: calc(var(--s-banda) * 1.6) var(--s16) 0;
	background:
		radial-gradient(ellipse 70% 90% at 30% 40%, var(--c-tinte, transparent), transparent 70%),
		var(--c-cabecera);
	border-top: 3px solid var(--c-accent);
	color: var(--c-text);
}
/* El patrón es una máscara: toma el color del acento del disco de la semana */
.pie::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-accent);
	opacity: 0.11;
	-webkit-mask: var(--pared);
	mask: var(--pared);
}
/* Canto troquelado, como el de una entrada recién arrancada: mordiscos redondos y puntas redondeadas
   (assets/pie-canto.svg, como máscara para que tome el acento). Se apoya sobre el borde superior. */
.pie::after {
	content: "";
	position: absolute;
	inset: auto 0 100%;
	height: 9px;
	margin-bottom: 3px;
	background: var(--c-accent);
	-webkit-mask: url("/wp-content/themes/nochederock/assets/pie-canto.svg") 0 0 / 16px 9px repeat-x;
	mask: url("/wp-content/themes/nochederock/assets/pie-canto.svg") 0 0 / 16px 9px repeat-x;
}
.pie__dentro {
	max-width: var(--ancho);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--s48) calc(var(--s48) * 2);
	align-items: center;
}

/* La entrada: papel claro, tinta oscura, talón con mordiscos a los lados del troquel */
.pie-entrada {
	transform: rotate(-1.5deg);
	filter: drop-shadow(var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent));
	transition: transform 0.25s;
}
.pie-entrada:hover { transform: rotate(-0.5deg) translateY(-2px); }
.pie-entrada__papel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--pie-talon);
	background: var(--pie-papel);
	color: var(--pie-tinta);
	--m: radial-gradient(circle var(--pie-mordisco) at calc(100% - var(--pie-talon)) 0, transparent 98%, #000);
	-webkit-mask: var(--m) top / 100% 51% no-repeat, radial-gradient(circle var(--pie-mordisco) at calc(100% - var(--pie-talon)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	mask: var(--m) top / 100% 51% no-repeat, radial-gradient(circle var(--pie-mordisco) at calc(100% - var(--pie-talon)) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.pie-entrada__cuerpo { padding: var(--s32); }
.pie-entrada__logo { display: inline-block; line-height: 0; margin-bottom: var(--s16); }
.pie-entrada__logo img { height: 2.75rem; width: auto; filter: brightness(0); opacity: 0.9; }
.pie-entrada__cuerpo p { margin: 0 0 var(--s24); font-size: var(--fs-sm); line-height: 1.6; max-width: 34rem; }
.pie-entrada__mas {
	color: var(--pie-tinta);
	font-family: var(--font-cartel);
	font-size: var(--fs-md);
	letter-spacing: var(--wp--custom--tracking--cartel);
	text-decoration: underline 3px;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, var(--pie-tinta) 40%, transparent);
	transition: text-decoration-color 0.15s;
}
.pie-entrada__mas:hover,
.pie-entrada__mas:focus-visible { text-decoration-color: var(--pie-tinta); }
.pie-entrada__talon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s12);
	border-left: 3px dashed color-mix(in srgb, var(--pie-tinta) 45%, transparent);
	font-family: var(--font-cartel);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--cartel);
	line-height: 1;
}
.pie-entrada__admite,
.pie-entrada__num { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--fs-xs); opacity: 0.75; }
.pie-entrada__ano {
	padding: var(--s8) var(--s4);
	background: var(--c-accent);
	color: var(--c-ink);
	font-size: var(--fs-md);
}

/* Contacto en grande y redes como el cartel de un festival */
.pie-lado { display: grid; gap: var(--s24); }
.pie-contacto { display: grid; gap: var(--s8); padding-bottom: var(--s32); border-bottom: 2px solid color-mix(in srgb, var(--c-text) 20%, transparent); color: inherit; text-decoration: none; }
.pie-contacto__pre { color: var(--c-muted); font-size: var(--fs-base); }
.pie-contacto__grande {
	justify-self: start;
	font-family: var(--font-cartel);
	font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--cartel);
	color: var(--c-accent);
	text-decoration: underline 4px;
	text-underline-offset: 0.18em;
	transition: color 0.15s;
}
.pie-contacto:hover .pie-contacto__grande,
.pie-contacto:focus-visible .pie-contacto__grande { color: var(--c-text); }
.pie-redes {
	list-style: none;
	/* Cada nombre lleva su estrella delante; la que queda al principio de línea se recorta */
	--sep: 1.6em;
	margin: 0 0 0 calc(var(--sep) * -1);
	padding: 0;
	clip-path: inset(-8px -8px -8px calc(var(--sep) - 6px)); /* margen para el anillo de foco */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s4) 0;
	font-family: var(--font-cartel);
	font-size: var(--fs-md);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--cartel);
	line-height: 1.2;
}
.pie-redes li::before { content: "/"; display: inline-block; width: var(--sep); color: var(--c-accent); text-align: center; }
.pie-redes a { color: var(--c-titulo); text-decoration: none; transition: color 0.15s; }
.pie-redes a:hover,
.pie-redes a:focus-visible { color: var(--c-accent); }

/* Línea legal, abajo de todo y en una fila */
.pie-legal {
	max-width: var(--ancho);
	margin: calc(var(--s-banda) * 1.4) auto 0;
	padding-block: var(--s16);
	border-top: 1px solid color-mix(in srgb, var(--c-text) 15%, transparent);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0 var(--s24);
	color: var(--c-muted);
	font-size: var(--fs-xs);
}
.pie-legal p { margin: 0; }
.copyleft { display: inline-block; transform: scaleX(-1); } /* el © al revés */
.pie-legal a { color: inherit; text-underline-offset: 0.2em; }
.pie-legal a:hover,
.pie-legal a:focus-visible { color: var(--c-accent); }

@media (max-width: 781px) {
	.pie__dentro { grid-template-columns: minmax(0, 1fr); }
	.pie-entrada { transform: rotate(-1deg); }
	.pie-legal { justify-content: flex-start; flex-direction: column; gap: var(--s4); }
}
@media (max-width: 480px) {
	.pie { --pie-talon: 4.25rem; }
	.pie-entrada__cuerpo { padding: var(--s24) var(--s16) var(--s24) var(--s24); }
}

/* ---------- Reproductor en ventana propia (/?reproductor=1579) ---------- */

.reproductor { margin: 0; min-height: 100vh; background: var(--c-base) var(--pared); color: var(--c-text); font-family: var(--font-sistema); }
.reproductor__caja { display: grid; gap: var(--s16); max-width: 30rem; margin: 0 auto; padding: var(--s16); }
.reproductor__portada { position: relative; display: block; margin: 0 var(--sombra-hero) var(--sombra-hero) 0; border: var(--borde-tarjeta) solid var(--c-text); box-shadow: var(--sombra-hero) var(--sombra-hero) 0 var(--c-accent); }
.reproductor__portada img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.reproductor__portada .etiqueta { position: absolute; inset: auto 0 0 0; }
.reproductor__datos { display: grid; gap: var(--s8); padding: var(--s12) var(--s16); background: var(--c-boton); border: var(--borde-tarjeta) solid var(--c-text); }
.reproductor__datos > * { margin: 0; }
.reproductor__kicker { display: flex; align-items: center; gap: var(--s8); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.reproductor__titulo { font-family: var(--font-cartel); font-size: var(--fs-md); line-height: var(--lh-tight); letter-spacing: var(--wp--custom--tracking--cartel); }
.reproductor audio { width: 100%; }
.reproductor__nota { font-size: var(--fs-xs); }
.reproductor__nota a { color: inherit; }
.reproductor__playlist { padding-block: var(--s4); }
.reproductor__playlist ol { font-size: var(--fs-sm); }