/*
Theme Name: Sera Management
Theme URI: https://seramanagement.es
Author: Jesús Merchán
Description: Tema de bloques a medida para Sera Management. Agencia 360º de comunicación, diseño y booking de artistas. Paleta y tipografía de marca cargadas en theme.json; cada sección es un patrón editable desde el editor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sera-management
*/

/* ==========================================================================
   Tokens que theme.json no cubre
   ========================================================================== */

:root {
	--sera-gutter: clamp(1rem, 3vw, 2.5rem);
	--sera-radio-panel: clamp(20px, 3.5vw, 40px);
	--sera-radio-tarjeta: 20px;
	--sera-linea: 1px solid rgba(237, 235, 229, 0.14);
	--sera-linea-oscura: 1px solid rgba(20, 27, 32, 0.18);
	--sera-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	/* Curva suave para hovers: arranca sin tirón y aterriza sin freno.
	   240ms es el tope del rango recomendado para UI (150-250ms): lo más
	   suave posible sin que la interfaz se sienta perezosa. */
	--sera-ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
	--sera-t-suave: 240ms var(--sera-ease-suave);
	--sera-z-sticky: 10;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: #e09576;
	color: #141b20;
}

p {
	max-width: 68ch;
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

:focus-visible {
	outline: 2px solid #e09576;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   Aurora de fondo: degradados de marca fijos bajo todos los paneles.
   El glow del cursor (#sera-glow, creado por JS) se mueve entre ambos.
   ========================================================================== */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(52rem 40rem at 16% -4%, rgba(0, 39, 52, 0.55), transparent 62%),
		radial-gradient(46rem 36rem at 88% 30%, rgba(94, 44, 62, 0.34), transparent 64%),
		radial-gradient(50rem 42rem at 50% 110%, rgba(0, 67, 63, 0.4), transparent 66%);
}

/* Aurora viva: dos manchas de marca que recorren el fondo sin descanso.
   Van en su propia capa para no repintar los degradados base. */
body::after {
	content: "";
	position: fixed;
	inset: -25%;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(32rem 26rem at 28% 32%, rgba(224, 149, 118, 0.16), transparent 60%),
		radial-gradient(30rem 24rem at 72% 68%, rgba(158, 191, 226, 0.13), transparent 62%),
		radial-gradient(26rem 22rem at 52% 18%, rgba(153, 214, 168, 0.09), transparent 64%);
}

@media (prefers-reduced-motion: no-preference) {
	body::after {
		/* will-change solo aquí: fuera de esta consulta la capa no anima
		   y mantenerla promovida a compositor sería memoria desperdiciada. */
		will-change: transform;
		animation: sera-aurora 15s ease-in-out infinite alternate;
	}
}

@keyframes sera-aurora {
	0%   { transform: translate3d(-11%, -7%, 0) scale(1); }
	35%  { transform: translate3d(9%, 10%, 0) scale(1.16); }
	70%  { transform: translate3d(13%, -9%, 0) scale(1.06); }
	100% { transform: translate3d(-7%, 11%, 0) scale(1.22); }
}

@media (prefers-reduced-transparency: reduce) {
	body::after { display: none; }
}

#sera-glow {
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
	width: 46rem;
	height: 46rem;
	margin: -23rem 0 0 -23rem;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 149, 118, 0.16), rgba(158, 191, 226, 0.05) 45%, transparent 70%);
	will-change: transform;
}

@media (prefers-reduced-motion: reduce), (hover: none) {
	#sera-glow { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
	body::before,
	#sera-glow { display: none; }
}

/* ==========================================================================
   Paneles: cada sección es un panel de vidrio redondeado que flota
   sobre la aurora. El tinte de marca lo pone una clase modificadora.
   ========================================================================== */

.sera-panel {
	border-radius: var(--sera-radio-panel);
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	max-width: min(100% - 2 * var(--sera-gutter), 1440px);
}

.sera-panel + .sera-panel {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.sera-panel--dark       { background: linear-gradient(135deg, rgba(237, 235, 229, 0.05), transparent 50%), rgba(20, 27, 32, 0.55); }
.sera-panel--superficie { background: linear-gradient(135deg, rgba(237, 235, 229, 0.05), transparent 50%), rgba(27, 36, 41, 0.52); }
.sera-panel--melon      { background: linear-gradient(135deg, rgba(153, 214, 168, 0.07), transparent 55%), rgba(0, 67, 63, 0.42); }
.sera-panel--cielo      { background: linear-gradient(135deg, rgba(158, 191, 226, 0.08), transparent 55%), rgba(0, 39, 52, 0.5); }

.sera-panel--dark,
.sera-panel--superficie,
.sera-panel--melon,
.sera-panel--cielo {
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	        backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(237, 235, 229, 0.09);
	box-shadow: inset 0 1px 0 rgba(237, 235, 229, 0.1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sera-panel--dark       { background: #141b20; }
	.sera-panel--superficie { background: #1b2429; }
	.sera-panel--melon      { background: #00433f; }
	.sera-panel--cielo      { background: #002734; }
}

@media (prefers-reduced-transparency: reduce) {
	.sera-panel--dark,
	.sera-panel--superficie,
	.sera-panel--melon,
	.sera-panel--cielo {
		-webkit-backdrop-filter: none;
		        backdrop-filter: none;
	}
	.sera-panel--dark       { background: #141b20; }
	.sera-panel--superficie { background: #1b2429; }
	.sera-panel--melon      { background: #00433f; }
	.sera-panel--cielo      { background: #002734; }
}

/* En pantallas pequeñas el blur grande castiga la GPU: se reduce */
@media (max-width: 700px) {
	.sera-panel--dark,
	.sera-panel--superficie,
	.sera-panel--melon,
	.sera-panel--cielo {
		-webkit-backdrop-filter: blur(12px) saturate(150%);
		        backdrop-filter: blur(12px) saturate(150%);
	}
}

/* ==========================================================================
   Titulares: acento de color a mitad de frase (color sólido, sin degradados)
   ========================================================================== */

.sera-acento {
	color: #e09576;
}

.sera-acento--cielo   { color: #9ebfe2; }
.sera-acento--melon   { color: #99d6a8; }

/* ==========================================================================
   Píldoras de etiqueta (máx. dos en toda la portada)
   ========================================================================== */

.sera-pildora {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 1rem;
	border: 1px solid rgba(237, 235, 229, 0.16);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: #aebcb9;
	background: linear-gradient(135deg, rgba(237, 235, 229, 0.09), rgba(237, 235, 229, 0.02));
	box-shadow: inset 0 1px 0 rgba(237, 235, 229, 0.14);
}

.sera-pildora .sera-pildora__icono {
	width: 0.85em;
	height: 0.85em;
	color: #e09576;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.wp-block-button__link,
.sera-boton {
	transition: transform var(--sera-t-suave), background-color var(--sera-t-suave), color var(--sera-t-suave);
	will-change: transform;
}

.wp-block-button__link:hover {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
	}
}

.wp-block-button__link:active,
.sera-boton:active {
	/* La pulsación sí es inmediata: si el press es lento, parece que no responde */
	transition-duration: 110ms;
	transform: scale(0.97);
}

/* Botón flecha: texto + círculo con flecha que se rellena al pasar */
.sera-boton-flecha .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding-right: 0.5rem;
}

.sera-boton-flecha .wp-block-button__link::after {
	content: "";
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: #141b20;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M7 17L17 7M17 7H9M17 7v8"/></svg>') center / 55% no-repeat;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M7 17L17 7M17 7H9M17 7v8"/></svg>') center / 55% no-repeat;
	background-color: currentColor;
	transition: transform var(--sera-t-suave);
}

@media (hover: hover) and (pointer: fine) {
	.sera-boton-flecha .wp-block-button__link:hover::after {
		transform: translate(2px, -2px);
	}
}

/* Variante fantasma: vidrio sobre panel oscuro */
.is-style-sera-fantasma .wp-block-button__link {
	background: linear-gradient(135deg, rgba(237, 235, 229, 0.1), rgba(237, 235, 229, 0.03));
	color: #edebe5;
	border: 1px solid rgba(237, 235, 229, 0.22);
	box-shadow: inset 0 1px 0 rgba(237, 235, 229, 0.16);
}

.is-style-sera-fantasma .wp-block-button__link:hover {
	background: linear-gradient(135deg, rgba(237, 235, 229, 0.16), rgba(237, 235, 229, 0.06));
}

/* Brillo que barre el botón primario al pasar el cursor */
.sera-boton-flecha .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.sera-boton-flecha .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-101%);
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.sera-boton-flecha .wp-block-button__link:hover::before {
		transition: transform 700ms var(--sera-ease-out);
		transform: translateX(101%);
	}
}

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

/* En WordPress la cabecera va envuelta en <header class="wp-block-template-part">,
   que mide exactamente lo mismo que ella. Un elemento pegajoso solo se desplaza
   DENTRO de su padre, así que ahí el sticky no tenía recorrido y se iba con el
   scroll. Quien debe pegarse es el envoltorio. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--sera-z-sticky);
	padding-top: clamp(0.5rem, 1.5vw, 1rem);
}

.wp-block-template-part > .sera-cabecera {
	position: relative;
	top: auto;
	margin-top: 0;
}

.sera-cabecera {
	/* Por defecto se pega ella misma (previsualización, sin envoltorio). */
	position: sticky;
	top: clamp(0.5rem, 1.5vw, 1rem);
	z-index: var(--sera-z-sticky);
	margin: clamp(0.5rem, 1.5vw, 1rem) auto 0;
	max-width: min(100% - 2 * var(--sera-gutter), 1200px);
	border-radius: 999px;
	background:
		linear-gradient(135deg, rgba(237, 235, 229, 0.09), rgba(237, 235, 229, 0.02) 60%),
		rgba(11, 17, 20, 0.68);
	-webkit-backdrop-filter: blur(22px) saturate(170%);
	        backdrop-filter: blur(22px) saturate(170%);
	border: 1px solid rgba(237, 235, 229, 0.12);
	box-shadow:
		inset 0 1px 0 rgba(237, 235, 229, 0.16),
		0 12px 40px rgba(0, 0, 0, 0.35);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sera-cabecera { background: rgba(11, 17, 20, 0.96); }
}

@media (prefers-reduced-transparency: reduce) {
	.sera-cabecera {
		background: rgba(11, 17, 20, 0.97);
		-webkit-backdrop-filter: none;
		        backdrop-filter: none;
	}
}

/* Interior de la píldora: logo pegado a la izquierda, botón casi al borde */
.sera-cabecera > .wp-block-group,
.sera-cabecera .inner {
	padding: 0.6rem 0.65rem 0.6rem 1.5rem;
}

.sera-cabecera .wp-block-button__link {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	white-space: nowrap;
}

/* En pantallas estrechas la píldora se queda con logo y navegación;
   el CTA ya vive en el hero, a un scroll de distancia. */
@media (max-width: 640px) {
	.sera-cabecera .wp-block-buttons { display: none; }
}

.sera-cabecera .wp-block-navigation a,
.sera-cabecera nav a {
	position: relative;
	color: #edebe5;
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.01em;
	transition: color var(--sera-t-suave);
}

.sera-cabecera .wp-block-navigation a:hover,
.sera-cabecera nav a:hover {
	color: #e09576;
	text-decoration: none;
}

/* Subrayado que barre de izquierda a derecha */
.sera-cabecera .wp-block-navigation a::after,
.sera-cabecera nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 1px;
	background: #e09576;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--sera-t-suave);
}

@media (hover: hover) and (pointer: fine) {
	.sera-cabecera .wp-block-navigation a:hover::after,
	.sera-cabecera nav a:hover::after {
		transform: scaleX(1);
	}
}

.sera-logo-svg {
	display: block;
	height: 1.05rem;
	width: auto;
	color: #aebcb9;
	transition: color var(--sera-t-suave);
}

.sera-logo-svg:hover { color: #edebe5; }

/* ==========================================================================
   Hero
   ========================================================================== */

.sera-hero {
	position: relative;
	min-height: min(88svh, 56rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	isolation: isolate;
}

/* El contenido va por delante del isotipo de vidrio: el cristal
   refracta la aurora y el glow, nunca las palabras. */
.sera-hero > :not(.sera-hero__marca) {
	position: relative;
	z-index: 1;
}

/* Isotipo de vidrio: un div enmascarado con la forma del asterisco cuyo
   backdrop-filter refracta la aurora y el glow que pasan por detrás.
   Gira con el scroll. */
.sera-hero__marca {
	--sera-mascara: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="341.55 0 1292.22 1292.22"><rect x="341.55" y="536.09" width="1292.22" height="220.04"/><rect x="341.55" y="536.09" width="1292.22" height="220.04" transform="translate(341.55 1633.77) rotate(-90)"/><rect x="341.55" y="536.09" width="1292.22" height="220.04" transform="translate(-167.59 887.62) rotate(-45)"/><rect x="341.54" y="536.09" width="1292.22" height="220.04" transform="translate(746.14 -509.13) rotate(45)"/></svg>');
	position: absolute;
	z-index: 0;
	right: clamp(-7rem, -3vw, 0rem);
	top: 50%;
	translate: 0 -58%;
	width: clamp(14rem, 34vw, 28rem);
	aspect-ratio: 1;
	pointer-events: none;
	-webkit-mask: var(--sera-mascara) center / contain no-repeat;
	        mask: var(--sera-mascara) center / contain no-repeat;
	background:
		linear-gradient(135deg, rgba(237, 235, 229, 0.16), rgba(237, 235, 229, 0.03) 55%),
		linear-gradient(310deg, rgba(224, 149, 118, 0.14), transparent 60%),
		rgba(237, 235, 229, 0.05);
	-webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.25);
	        backdrop-filter: blur(10px) saturate(180%) brightness(1.25);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sera-hero__marca { background: #1b2429; }
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.sera-hero__marca {
			animation: sera-girar linear both;
			animation-timeline: scroll(root);
			animation-range: 0 220svh;
		}
	}
}

@keyframes sera-girar {
	to { rotate: 135deg; scale: 1.08; }
}

.sera-hero h1 {
	max-width: 17ch;
}

/* Ancho de línea del subtítulo. Se controla con max-width, nunca con un tamaño
   flex fijo: en la columna flex del hero, un flex-basis se convertiría en ALTO
   y estiraría el párrafo (y con él, todo el hero). */
.sera-hero p.sera-revelar {
	max-width: 48ch;
}

/* ==========================================================================
   Filas de servicio: lista con regla superior, no tarjetas
   ========================================================================== */

.sera-filas > * {
	border-top: var(--sera-linea);
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	transition: padding-left var(--sera-t-suave), border-top-color var(--sera-t-suave);
}

@media (hover: hover) and (pointer: fine) {
	.sera-filas > *:hover {
		padding-left: 0.75rem;
		border-top-color: rgba(224, 149, 118, 0.45);
	}
	.sera-filas > *:hover :is(h2, h3) {
		color: #e09576;
	}
	.sera-filas > *:hover .sera-proceso__numero {
		transform: translateX(0.4rem);
	}
}

.sera-filas :is(h2, h3) {
	transition: color var(--sera-t-suave);
	margin: 0;
}

.sera-proceso__numero {
	transition: transform var(--sera-t-suave);
}

/* ==========================================================================
   Proceso: la única secuencia numerada de la página (es un proceso real)
   ========================================================================== */

.sera-proceso__numero {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1;
	color: #e09576;
}

/* ==========================================================================
   Roster y proyectos
   ========================================================================== */

.sera-tarjeta-artista {
	border-radius: var(--sera-radio-tarjeta);
	overflow: hidden;
	background:
		linear-gradient(160deg, rgba(237, 235, 229, 0.08), rgba(237, 235, 229, 0.02) 45%),
		rgba(20, 27, 32, 0.5);
	border: 1px solid rgba(237, 235, 229, 0.12);
	box-shadow: inset 0 1px 0 rgba(237, 235, 229, 0.14);
	transition: transform var(--sera-t-suave), border-color var(--sera-t-suave);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sera-tarjeta-artista { background: #1b2429; }
}

@media (hover: hover) and (pointer: fine) {
	.sera-tarjeta-artista:hover {
		border-color: rgba(224, 149, 118, 0.35);
	}
}

@media (hover: hover) and (pointer: fine) {
	.sera-tarjeta-artista:hover {
		transform: translateY(-4px);
	}
}

/* Las fotos de artista van tal cual las entrega cada uno: sin tratamiento
   de color. La unidad la dan el encuadre 4:5, el marco de la tarjeta y el
   sistema tipográfico. */
.sera-tarjeta-artista .wp-block-post-featured-image,
.sera-tarjeta-artista .sera-foto {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.sera-tarjeta-artista img {
	transition: transform 700ms var(--sera-ease-suave);
}

@media (hover: hover) and (pointer: fine) {
	.sera-tarjeta-artista:hover img {
		transform: scale(1.04);
	}
}

/* Línea de booking del roster: el correo se lee como enlace, no como adorno */
.sera-booking {
	color: #aebcb9;
}

.sera-booking a {
	color: #edebe5;
	border-bottom: 1px solid rgba(224, 149, 118, 0.55);
	padding-bottom: 0.08em;
	transition: color var(--sera-t-suave), border-color var(--sera-t-suave);
}

.sera-booking a:hover {
	color: #e09576;
	border-bottom-color: #e09576;
	text-decoration: none;
}

/* Las negritas de la bio destacan sobre el gris del cuerpo */
.sera-tarjeta-artista strong {
	color: #edebe5;
	font-weight: 500;
}

/* Acciones de artista: contratar por WhatsApp e Instagram */
.sera-acciones {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.sera-accion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: transform var(--sera-t-suave), background-color var(--sera-t-suave),
		border-color var(--sera-t-suave), color var(--sera-t-suave);
}

.sera-accion:hover {
	text-decoration: none;
}

.sera-accion:active {
	transition-duration: 110ms;
	transform: scale(0.97);
}

.sera-accion--principal {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1.1rem;
	background: linear-gradient(135deg, rgba(237, 235, 229, 0.12), rgba(237, 235, 229, 0.04));
	border: 1px solid rgba(237, 235, 229, 0.22);
	box-shadow: inset 0 1px 0 rgba(237, 235, 229, 0.16);
	color: #edebe5;
	text-align: center;
	display: block;
	line-height: 1.25;
	/* Un nombre propio nunca se trunca: si la tarjeta es estrecha, el botón
	   pasa a dos líneas antes que cortar el nombre del artista. */
	text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
	.sera-accion--principal:hover {
		background: #e09576;
		border-color: #e09576;
		color: #141b20;
		transform: translateY(-2px);
	}
}

.sera-accion--red {
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid rgba(237, 235, 229, 0.22);
	color: #aebcb9;
}

.sera-accion--red svg {
	width: 1.15rem;
	height: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
	.sera-accion--red:hover {
		color: #e09576;
		border-color: rgba(224, 149, 118, 0.5);
		transform: translateY(-2px);
	}
}

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

/* Ficha sin foto: el asterisco en tono noche ocupa el hueco con dignidad */
.sera-tarjeta-artista .wp-block-post-featured-image:empty {
	display: none;
}

/* ==========================================================================
   Panel crema: el único cambio de tema de la página, deliberado
   ========================================================================== */

.sera-panel--crema {
	background: #edebe5;
	color: #141b20;
}

.sera-panel--crema :is(h1, h2, h3, h4, p) {
	color: #141b20;
}

.sera-panel--crema .sera-pildora {
	border: var(--sera-linea-oscura);
	color: #3a3131;
}

/* Los botones de contacto quedan fuera: llevan su propio color de texto y
   esta regla les ganaba por especificidad, dejando vino sobre casi negro. */
.sera-panel--crema a:not(.wp-block-button__link):not(.sera-contacto-boton) {
	color: #5e2c3e;
}

/* Botones de contacto del panel crema. Aquí el vidrio no sirve: sobre fondo
   claro necesitan relleno sólido para cumplir contraste. */
.sera-contacto-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--40);
}

.sera-contacto-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.6rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--sera-t-suave), background-color var(--sera-t-suave),
		color var(--sera-t-suave), border-color var(--sera-t-suave);
}

.sera-contacto-boton svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

.sera-contacto-boton:hover {
	text-decoration: none;
}

.sera-contacto-boton:active {
	transition-duration: 110ms;
	transform: scale(0.97);
}

/* WhatsApp: mismo lenguaje que el botón principal de toda la web,
   píldora Melocotón con texto oscuro. Contraste 7.2:1. */
.sera-panel--crema .sera-contacto-boton--wa {
	background: #e09576;
	color: #141b20;
	border: 1px solid #e09576;
}

/* Teléfono: contorno oscuro sobre crema. Contraste 14.6:1. */
.sera-panel--crema .sera-contacto-boton--tel {
	background: transparent;
	color: #141b20;
	border: 1px solid rgba(20, 27, 32, 0.35);
}

@media (hover: hover) and (pointer: fine) {
	.sera-panel--crema .sera-contacto-boton--wa:hover {
		background: #141b20;
		border-color: #141b20;
		color: #edebe5;
		transform: translateY(-2px);
	}
	.sera-panel--crema .sera-contacto-boton--tel:hover {
		background: #141b20;
		border-color: #141b20;
		color: #edebe5;
		transform: translateY(-2px);
	}
}

/* Correo-titular: se encoge con el viewport y nunca desborda el panel.
   Compite con la clase de tamaño que genera theme.json, así que se iguala
   su especificidad en lugar de recurrir a !important. */
.sera-panel--crema .sera-correo.sera-correo {
	font-size: clamp(1.4rem, 5.6vw, 3.75rem);
	overflow-wrap: anywhere;
	line-height: 1.05;
}

.sera-panel--crema .sera-filas > * {
	border-top: var(--sera-linea-oscura);
}

/* ==========================================================================
   Pie: wordmark gigante en crema sólido
   ========================================================================== */

.sera-pie {
	position: relative;
}

.sera-pie__wordmark {
	display: block;
	width: min(100%, 30rem);
	height: auto;
	color: #edebe5;
	margin: clamp(2rem, 6vw, 4rem) auto 0;
}

.sera-pie .wp-block-navigation a {
	color: #aebcb9;
	font-size: 0.8125rem;
	transition: color var(--sera-t-suave);
}

.sera-pie .wp-block-navigation a:hover {
	color: #edebe5;
	text-decoration: none;
}

/* ==========================================================================
   Marquesina 360º: la única banda en movimiento continuo de la página.
   Dos mitades idénticas; la pista se desplaza media anchura en bucle.
   ========================================================================== */

.sera-banda {
	overflow: hidden;
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sera-banda__pista {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
	width: max-content;
}

.sera-banda__pista > * {
	flex: none;
}

.sera-banda__texto {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: #edebe5;
	white-space: nowrap;
}

.sera-banda__texto--contorno {
	color: transparent;
	-webkit-text-stroke: 1px rgba(237, 235, 229, 0.45);
}

.sera-banda__icono {
	width: clamp(1.5rem, 2.5vw, 2.25rem);
	height: auto;
	color: #e09576;
}

@media (prefers-reduced-motion: no-preference) {
	.sera-banda__pista {
		animation: sera-desfile 30s linear infinite;
	}
	.sera-banda:hover .sera-banda__pista {
		animation-play-state: paused;
	}
}

@keyframes sera-desfile {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   Revelado al hacer scroll.
   El contenido es visible por defecto; solo se oculta cuando hay JS
   y el usuario no pide movimiento reducido. Nunca se queda en blanco.
   El desenfoque de entrada funde la aparición con el vidrio.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html.js .sera-revelar {
		opacity: 0;
		transform: translateY(26px);
		filter: blur(10px);
		transition:
			opacity 650ms var(--sera-ease-out),
			transform 650ms var(--sera-ease-out),
			filter 650ms var(--sera-ease-out);
		transition-delay: calc(var(--sera-i, 0) * 70ms);
	}

	html.js .sera-revelar.sera-en-vista {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   Banner del Kit Digital (obligatorio por la subvención).
   Base clara para que la bandera y el texto se lean sobre el pie oscuro.
   ========================================================================== */

.sera-kitdigital {
	text-align: center;
}

.sera-kitdigital__img {
	display: inline-block;
	margin: 0;
	padding: 0.75rem 1rem;
	background: #edebe5;
	border-radius: 10px;
}

.sera-kitdigital__img img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
}

/* Bio dentro de la tarjeta de artista: gris, compacta, bajo el título */
.sera-tarjeta-artista .sera-bio-tarjeta {
	color: #aebcb9;
	margin-top: 0.15rem;
}

.sera-tarjeta-artista .sera-bio-tarjeta p {
	margin: 0;
}

/* ==========================================================================
   Rejilla de tarjetas: se impone por CSS, no solo por el atributo del bloque.

   Si la plantilla guardada en la base de datos es anterior (WordPress da
   prioridad a lo guardado sobre los archivos del tema), el bucle sale como
   «is-layout-flow» y las tarjetas se apilan a ancho completo: con la foto en
   4:5, una tarjeta de 1100px de ancho pasa a medir 1380px de alto. Esta regla
   garantiza la rejilla venga de donde venga el marcado.
   ========================================================================== */

.wp-block-post-template:has(.sera-tarjeta-artista) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Tope de seguridad: la foto nunca puede desbordar la altura de la pantalla,
   pase lo que pase con el ancho de la tarjeta. */
.sera-tarjeta-artista .wp-block-post-featured-image {
	max-height: 70svh;
}

.sera-tarjeta-artista .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Navegación: plegado a hamburguesa por debajo de 1024px.

   WordPress pliega su bloque de navegación a los 600px. Con el logo, seis
   enlaces y el botón de acción dentro de la píldora, entre 600 y ~1050px no
   caben y la navegación saltaba a dos líneas (la cabecera pasaba de 81 a 93px).
   ========================================================================== */

@media (max-width: 1023px) {
	.sera-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sera-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* La fila de la cabecera nunca envuelve: logo · navegación · acción */
.sera-cabecera > .wp-block-group {
	flex-wrap: nowrap;
}

/* Menú desplegado a pantalla completa: fondo de marca, no el del navegador */
.wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(11, 17, 20, 0.97);
	padding-top: clamp(4rem, 12vw, 7rem);
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: #edebe5;
	font-size: 1.25rem;
}