@charset "utf-8";

/*
 * MALU POPS · Sitio en construcción
 * Hoja única de la portada. Autor: jbmxcode — https://josuebaloy.com
 *
 * Orden de capas: lo que va después gana, sin necesidad de subir especificidad.
 */

@layer tipografia, reinicio, base, disposicion, componentes, movimiento, adaptacion;

/* ------------------------------------------------------------------ */
/* Tipografías de marca                                                */
/* ------------------------------------------------------------------ */

@layer tipografia {
	@font-face {
		font-family: "Creatora";
		src: url("../fuentes/creatora.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Coolvetica";
		src: url("../fuentes/coolvetica.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Poppins";
		src: url("../fuentes/poppins-300.woff2") format("woff2");
		font-weight: 300;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Poppins";
		src: url("../fuentes/poppins-400.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Poppins";
		src: url("../fuentes/poppins-500.woff2") format("woff2");
		font-weight: 500;
		font-style: normal;
		font-display: swap;
	}
}

/* ------------------------------------------------------------------ */
/* Propiedades registradas: para poder interpolarlas y animarlas       */
/* ------------------------------------------------------------------ */

@property --mp-x {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --mp-y {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --mp-giro-aura {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ------------------------------------------------------------------ */
/* Reinicio                                                            */
/* ------------------------------------------------------------------ */

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

	body,
	h1,
	h2,
	h3,
	p,
	ul,
	ol,
	figure {
		margin: 0;
		padding: 0;
	}

	ul,
	ol {
		list-style: none;
	}

	img,
	svg,
	picture {
		display: block;
		max-inline-size: 100%;
	}

	input,
	button {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
	}

	:target {
		scroll-margin-block-start: 3rem;
	}
}

/* ------------------------------------------------------------------ */
/* Base: paleta Pantone de MALU POPS y ritmo tipográfico               */
/* ------------------------------------------------------------------ */

@layer base {
	:root {
		/* La marca es morada en cualquier caso: el modo oscuro solo la hunde. */
		color-scheme: light dark;

		--mp-morado: #532ad1;          /* Pantone 2090 C */
		--mp-azul: #bbceff;            /* Pantone 2708 C */
		--mp-naranja: #ea5200;         /* Pantone 166 C  */
		--mp-coral: #ff8650;           /* Pantone 2024 C */
		--mp-rosa: #ffa4cd;            /* Pantone 210 C  */
		--mp-lima: #d0d480;            /* Pantone 616 C  */
		--mp-crema: #f1e8d7;           /* Pantone 705 C  */
		--mp-tinta: #1c0b45;

		--mp-fondo: light-dark(#532ad1, #2a1170);
		--mp-fondo-hondo: light-dark(#35198c, #190a45);
		--mp-fondo-alto: light-dark(#6b3ff0, #3d1ea3);
		--mp-texto: light-dark(#f1e8d7, #ece2ce);
		--mp-suave: light-dark(#bbceff, #a9bff5);
		--mp-naranja-banda: light-dark(#ea5200, #c94500);

		--mp-tipo-titulo: "Creatora", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
		--mp-tipo-sub: "Coolvetica", "Helvetica Neue", Arial, sans-serif;
		--mp-tipo-cuerpo: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

		--mp-bulto: clamp(1.5rem, 4vw, 2.75rem);
		--mp-ancho: min(100% - 2.5rem, 58rem);

		/* Medidas que mandan en el alto de la portada. En escritorio se
		   reescriben en función de la altura de la ventana para que quepa
		   todo sin desplazarse. */
		--mp-tam-logo: clamp(9rem, 22vw, 14.5rem);
		--mp-tam-titular: clamp(2.25rem, 1.5rem + 3.9vw, 4.5rem);
		--mp-tam-elenco: clamp(5.5rem, 17vw, 11.5rem);
		--mp-hueco: clamp(1rem, 2.4vh, 1.5rem);
		--mp-margen-portada: clamp(2rem, 5vh, 3.25rem);
		--mp-radio: 999px;
		--mp-transicion: 260ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	body {
		background-color: var(--mp-fondo);
		color: var(--mp-texto);
		font-family: var(--mp-tipo-cuerpo);
		font-weight: 300;
		font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
		line-height: 1.65;
		min-block-size: 100svh;
		overflow-x: clip;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}

	a {
		color: inherit;
		text-decoration-thickness: 0.08em;
		text-underline-offset: 0.22em;
		transition: color var(--mp-transicion);
	}

	a:hover {
		color: var(--mp-coral);
	}

	:focus-visible {
		outline: 3px solid var(--mp-coral);
		outline-offset: 3px;
		border-radius: 4px;
	}

	::selection {
		background-color: var(--mp-coral);
		color: var(--mp-tinta);
	}

	/* Solo para lectores de pantalla. */
	.mp-oculto {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.mp-saltar {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 50%;
		translate: -50% -120%;
		z-index: 100;
		padding: 0.75rem 1.5rem;
		background-color: var(--mp-crema);
		color: var(--mp-morado);
		font-family: var(--mp-tipo-sub);
		border-end-start-radius: 1rem;
		border-end-end-radius: 1rem;
		text-decoration: none;
		transition: translate var(--mp-transicion);
	}

	.mp-saltar:focus-visible {
		translate: -50% 0;
	}
}

/* ------------------------------------------------------------------ */
/* Disposición general                                                 */
/* ------------------------------------------------------------------ */

@layer disposicion {
	.mp-lienzo {
		position: relative;
		display: grid;
		/* minmax(0, 1fr) impide que la marquesina, que no parte líneas,
		   estire la columna implícita más allá de la ventana. */
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		min-block-size: 100svh;
		isolation: isolate;
		/* En horizontal se recorta siempre: la marquesina no parte líneas.
		   En vertical solo mientras dura la entrada (ver .mp-animando), para
		   que la banda naranja pueda llegar desde debajo del borde sin estirar
		   el documento, pero sin arriesgarse a esconder nada después. */
		overflow-x: clip;
	}

	.mp-principal {
		position: relative;
		z-index: 2;
		min-inline-size: 0;
		inline-size: var(--mp-ancho);
		margin-inline: auto;
		padding-block: var(--mp-margen-portada) calc(var(--mp-margen-portada) * 0.75);
		display: grid;
		justify-items: center;
		align-content: center;
		gap: var(--mp-hueco);
		text-align: center;
	}

	.mp-remate {
		position: relative;
		z-index: 3;
		min-inline-size: 0;
	}

	/* Plantillas de respaldo: mismo vestido, sin escenografía. */
	.mp-lienzo--simple {
		grid-template-rows: auto 1fr;
	}

	.mp-principal--simple {
		justify-items: start;
		text-align: start;
		gap: 2rem;
	}

	.mp-cabecera-simple {
		inline-size: var(--mp-ancho);
		margin-inline: auto;
		padding-block-start: 2.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Componentes                                                         */
/* ------------------------------------------------------------------ */

@layer componentes {

	/* --- Fondo: auras de color y grano ------------------------------ */

	.mp-aura {
		/* Absoluto y no fijo: así el degradado cubre el documento entero y no
		   deja un corte visible al final de la ventana. */
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background-image:
			radial-gradient(58vmax 58vmax at 12% 8%, color-mix(in oklab, var(--mp-coral) 40%, transparent), transparent 62%),
			radial-gradient(46vmax 46vmax at 90% 4%, color-mix(in oklab, var(--mp-rosa) 34%, transparent), transparent 64%),
			radial-gradient(70vmax 70vmax at 52% 112%, color-mix(in oklab, var(--mp-fondo-alto) 70%, transparent), transparent 66%);
	}

	.mp-aura::after {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0.5;
		mix-blend-mode: soft-light;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
	}

	/* --- Pops vectoriales que flotan al fondo ------------------------ */

	.mp-escena {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		pointer-events: none;
		overflow: clip;
	}

	.mp-escena__pop {
		position: absolute;
		inline-size: clamp(4.5rem, 11vw, 9rem);
		block-size: auto;
		opacity: 0.38;
		filter: drop-shadow(0 1rem 1.5rem rgb(26 8 66 / 0.28));
		rotate: var(--mp-giro, 0deg);
		translate:
			calc(var(--mp-x, 0) * var(--mp-profundidad, 1) * 1px)
			calc(var(--mp-y, 0) * var(--mp-profundidad, 1) * 1px);
		will-change: translate;
	}

	.mp-escena__pop--1 { inset-block-start: 9%;  inset-inline-start: 4%; }
	.mp-escena__pop--2 { inset-block-start: 16%; inset-inline-end: 5%; }
	.mp-escena__pop--3 { inset-block-start: 58%; inset-inline-start: 8%; }
	.mp-escena__pop--4 { inset-block-start: 64%; inset-inline-end: 7%; }

	/* --- Logotipo ---------------------------------------------------- */

	.mp-logo {
		color: var(--mp-azul);
		inline-size: var(--mp-tam-logo);
		filter: drop-shadow(0 1.25rem 2rem rgb(26 8 66 / 0.35));
	}

	.mp-logo svg {
		inline-size: 100%;
		block-size: auto;
	}

	.mp-logo--pequeno {
		inline-size: clamp(7rem, 16vw, 10rem);
		display: block;
	}

	/* --- Etiqueta superior ------------------------------------------- */

	.mp-etiqueta {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.4rem 1.1rem;
		border: 1px solid color-mix(in oklab, var(--mp-crema) 35%, transparent);
		border-radius: var(--mp-radio);
		background-color: color-mix(in oklab, var(--mp-crema) 8%, transparent);
		backdrop-filter: blur(6px);
		font-family: var(--mp-tipo-sub);
		font-size: 0.8125rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--mp-suave);
	}

	.mp-etiqueta__punto {
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: 50%;
		background-color: var(--mp-lima);
		box-shadow: 0 0 0 0 color-mix(in oklab, var(--mp-lima) 70%, transparent);
	}

	/* --- Titular y entradilla ---------------------------------------- */

	.mp-titular {
		font-family: var(--mp-tipo-titulo);
		font-weight: 400;
		font-size: var(--mp-tam-titular);
		line-height: 0.94;
		letter-spacing: 0.005em;
		text-transform: uppercase;
		text-wrap: balance;
		color: var(--mp-crema);
		max-inline-size: 18ch;
	}

	/*
	 * Palabras enmascaradas del titular. Las crea intro.js al vuelo; el relleno
	 * y el margen negativo dejan sitio a las tildes de las mayúsculas, que si no
	 * las corta el `overflow`.
	 */
	.mp-palabra {
		display: inline-block;
		overflow: hidden;
		vertical-align: bottom;
		padding-block: 0.14em 0.04em;
		margin-block: -0.14em -0.04em;
	}

	.mp-palabra__pieza {
		display: inline-block;
		will-change: transform;
	}

	.mp-entradilla {
		max-inline-size: 46ch;
		text-wrap: pretty;
		color: color-mix(in oklab, var(--mp-texto) 88%, transparent);
	}

	.mp-entradilla p + p {
		margin-block-start: 0.75em;
	}

	/* --- Cuenta atrás ------------------------------------------------- */

	.mp-cuenta {
		display: block;
		margin-block-start: 0.5rem;
	}

	.mp-cuenta__lista {
		display: flex;
		justify-content: center;
		gap: clamp(0.5rem, 2vw, 1rem);
	}

	.mp-cuenta__casilla {
		display: grid;
		gap: 0.15rem;
		min-inline-size: clamp(4rem, 15vw, 5.75rem);
		padding: 0.75rem 0.5rem 0.6rem;
		border: 1px solid color-mix(in oklab, var(--mp-crema) 28%, transparent);
		border-radius: 1.15rem;
		background-color: color-mix(in oklab, var(--mp-crema) 9%, transparent);
		backdrop-filter: blur(8px);
	}

	.mp-cuenta__cifra {
		font-family: var(--mp-tipo-titulo);
		font-size: clamp(1.75rem, 5.5vw, 2.75rem);
		line-height: 1;
		font-variant-numeric: tabular-nums;
		color: var(--mp-crema);
	}

	.mp-cuenta__unidad {
		font-family: var(--mp-tipo-sub);
		font-size: 0.6875rem;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--mp-suave);
	}

	/* El respaldo solo se ve si el componente no llega a arrancar. */
	.mp-cuenta__respaldo {
		margin-block-start: 0.6rem;
		font-size: 0.875rem;
		color: var(--mp-suave);
	}

	malu-cuenta-atras:defined .mp-cuenta__respaldo {
		display: none;
	}

	malu-cuenta-atras[estado="agotada"] .mp-cuenta__lista {
		display: none;
	}

	/* --- Lista de espera ---------------------------------------------- */

	.mp-espera {
		display: block;
		inline-size: min(100%, 34rem);
		container-type: inline-size;
		container-name: espera;
		margin-block-start: 0.5rem;
	}

	.mp-espera__titulo {
		font-family: var(--mp-tipo-sub);
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--mp-suave);
		margin-block-end: 0.75rem;
	}

	.mp-campo {
		display: flex;
		gap: 0.4rem;
		padding: 0.4rem;
		border: 1px solid color-mix(in oklab, var(--mp-crema) 32%, transparent);
		border-radius: var(--mp-radio);
		background-color: color-mix(in oklab, var(--mp-crema) 11%, transparent);
		backdrop-filter: blur(10px);
		transition: border-color var(--mp-transicion), background-color var(--mp-transicion);
	}

	/* :has() evita tener que marcar el foco desde JavaScript. */
	.mp-campo:has(.mp-campo__entrada:focus-visible) {
		border-color: var(--mp-coral);
		background-color: color-mix(in oklab, var(--mp-crema) 16%, transparent);
	}

	.mp-campo__entrada {
		flex: 1 1 auto;
		min-inline-size: 0;
		padding-inline: 1.1rem;
		border: 0;
		background: none;
		color: var(--mp-crema);
		font-size: 1rem;
	}

	.mp-campo__entrada::placeholder {
		color: color-mix(in oklab, var(--mp-suave) 70%, transparent);
	}

	.mp-campo__entrada:focus-visible {
		outline: none;
	}

	.mp-boton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		flex: 0 0 auto;
		padding: 0.8rem 1.6rem;
		border: 0;
		border-radius: var(--mp-radio);
		background-color: var(--mp-naranja);
		color: var(--mp-crema);
		font-family: var(--mp-tipo-sub);
		font-size: 0.9375rem;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-decoration: none;
		transition:
			background-color var(--mp-transicion),
			scale var(--mp-transicion),
			box-shadow var(--mp-transicion);
	}

	.mp-boton:hover {
		background-color: var(--mp-coral);
		color: var(--mp-tinta);
		scale: 1.03;
		box-shadow: 0 0.75rem 1.5rem -0.5rem rgb(26 8 66 / 0.5);
	}

	.mp-boton:active {
		scale: 0.98;
	}

	.mp-boton[disabled] {
		opacity: 0.6;
		cursor: progress;
	}

	.mp-boton__giro {
		display: none;
		inline-size: 1rem;
		block-size: 1rem;
		border: 2px solid currentColor;
		border-block-start-color: transparent;
		border-radius: 50%;
	}

	.mp-espera[estado="enviando"] .mp-boton__giro {
		display: block;
	}

	/* Campo trampa: presente en el DOM, invisible e inalcanzable. */
	.mp-trampa {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.mp-espera__nota {
		margin-block-start: 0.7rem;
		font-size: 0.8125rem;
		color: color-mix(in oklab, var(--mp-suave) 85%, transparent);
	}

	.mp-espera__aviso {
		margin-block-start: 0.8rem;
		font-family: var(--mp-tipo-sub);
		font-size: 0.9375rem;
		letter-spacing: 0.02em;
		min-block-size: 1.5rem;
	}

	.mp-espera__aviso:empty {
		display: none;
	}

	.mp-espera[estado="exito"] .mp-espera__aviso {
		color: var(--mp-lima);
	}

	.mp-espera[estado="error"] .mp-espera__aviso {
		color: var(--mp-rosa);
	}

	/* Al acertar, el formulario deja sitio al mensaje. */
	.mp-espera[estado="exito"] .mp-formulario,
	.mp-espera[estado="exito"] .mp-espera__nota {
		display: none;
	}

	@container espera (max-width: 26rem) {
		.mp-campo {
			flex-direction: column;
			border-radius: 1.5rem;
			padding: 0.9rem;
		}

		.mp-campo__entrada {
			padding-block: 0.4rem;
			text-align: center;
		}
	}

	/* --- Redes -------------------------------------------------------- */

	.mp-redes {
		display: flex;
		gap: 0.65rem;
		margin-block-start: 0.5rem;
	}

	.mp-redes__enlace {
		display: grid;
		place-items: center;
		inline-size: 2.9rem;
		block-size: 2.9rem;
		border: 1px solid color-mix(in oklab, var(--mp-crema) 30%, transparent);
		border-radius: 50%;
		color: var(--mp-suave);
		text-decoration: none;
		transition:
			background-color var(--mp-transicion),
			color var(--mp-transicion),
			translate var(--mp-transicion);
	}

	.mp-redes__enlace:hover {
		background-color: var(--mp-crema);
		color: var(--mp-morado);
		translate: 0 -3px;
	}

	/* --- Elenco 3D sobre el festón ------------------------------------ */

	.mp-elenco {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: clamp(0.75rem, 6vw, 4.5rem);
		/* Los pops pisan la banda para que parezca que están de pie encima. */
		margin-block-end: calc(var(--mp-bulto) * -0.3);
		padding-inline: 1rem;
		pointer-events: none;
	}

	.mp-elenco__pop {
		inline-size: auto;
		block-size: var(--mp-tam-elenco);
		filter: drop-shadow(0 1.5rem 1.25rem rgb(26 8 66 / 0.3));
	}

	.mp-elenco__pop--verde {
		block-size: calc(var(--mp-tam-elenco) * 1.09);
	}

	/* --- Festón naranja ------------------------------------------------ */

	.mp-feston {
		position: relative;
		padding-block: calc(var(--mp-bulto) + 1.1rem) 1.1rem;
		background-color: var(--mp-naranja-banda);
		color: var(--mp-crema);
		overflow: clip;

		/* Los bultos son una máscara: nada de imágenes ni de SVG extra. */
		--mp-paso: calc(var(--mp-bulto) * 2);
		-webkit-mask:
			radial-gradient(circle var(--mp-bulto) at 50% var(--mp-bulto), #000 99%, #0000 100%)
				0 0 / var(--mp-paso) var(--mp-paso) repeat-x,
			linear-gradient(#000 0 0) 0 var(--mp-bulto) / 100% calc(100% - var(--mp-bulto)) no-repeat;
		mask:
			radial-gradient(circle var(--mp-bulto) at 50% var(--mp-bulto), #000 99%, #0000 100%)
				0 0 / var(--mp-paso) var(--mp-paso) repeat-x,
			linear-gradient(#000 0 0) 0 var(--mp-bulto) / 100% calc(100% - var(--mp-bulto)) no-repeat;
	}

	/* --- Marquesina ---------------------------------------------------- */

	.mp-marquesina {
		display: flex;
		inline-size: 100%;
		overflow: hidden;
		user-select: none;
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}

	.mp-marquesina__tira {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		gap: clamp(1.25rem, 4vw, 2.5rem);
		padding-inline-end: clamp(1.25rem, 4vw, 2.5rem);
	}

	.mp-marquesina__item {
		display: inline-flex;
		align-items: center;
		gap: clamp(1.25rem, 4vw, 2.5rem);
		white-space: nowrap;
		font-family: var(--mp-tipo-titulo);
		font-size: clamp(1.35rem, 3.8vw, 2.35rem);
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.mp-marquesina__sep {
		font-size: 0.5em;
		color: color-mix(in oklab, var(--mp-crema) 65%, transparent);
	}

	/* --- Pie ------------------------------------------------------------ */

	.mp-pie {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem 1.25rem;
		padding: 1.35rem 1.5rem calc(1.35rem + env(safe-area-inset-bottom));
		background-color: var(--mp-fondo-hondo);
		text-align: center;
	}

	.mp-pie__linea {
		font-size: 0.8125rem;
		color: color-mix(in oklab, var(--mp-suave) 80%, transparent);
	}

	.mp-pie__firma {
		color: var(--mp-azul);
		text-decoration-color: color-mix(in oklab, var(--mp-azul) 45%, transparent);
	}

	/* --- Respaldos ------------------------------------------------------ */

	.mp-404 {
		min-block-size: 60svh;
		align-content: center;
		justify-items: center;
		text-align: center;
	}

	.mp-404__cifra {
		font-family: var(--mp-tipo-titulo);
		font-size: clamp(5rem, 22vw, 12rem);
		line-height: 0.9;
		color: var(--mp-coral);
	}

	.mp-entrada + .mp-entrada {
		margin-block-start: 2rem;
		padding-block-start: 2rem;
		border-block-start: 1px solid color-mix(in oklab, var(--mp-crema) 20%, transparent);
	}

	.mp-entrada__titulo {
		font-family: var(--mp-tipo-titulo);
		font-size: clamp(1.5rem, 4vw, 2.25rem);
		text-transform: uppercase;
		line-height: 1;
	}
}

/* ------------------------------------------------------------------ */
/* Movimiento                                                          */
/* ------------------------------------------------------------------ */

@layer movimiento {
	/*
	 * El aura respira moviendo sus degradados, no escalando la caja. Con un
	 * `scale` el elemento se salía unos píxeles por los cuatro costados y
	 * estiraba el documento justo lo suficiente para romper el ajuste a
	 * pantalla completa.
	 */
	@keyframes mp-respirar {
		from { background-position: 0% 0%, 100% 0%, 50% 100%; }
		to   { background-position: 10% 8%, 88% 3%, 50% 92%; }
	}

	@keyframes mp-latido {
		0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mp-lima) 65%, transparent); }
		60%      { box-shadow: 0 0 0 0.5rem color-mix(in oklab, var(--mp-lima) 0%, transparent); }
	}

	@keyframes mp-desfile {
		to { transform: translateX(-100%); }
	}

	@keyframes mp-flotar {
		from { transform: translateY(0.55rem) rotate(-1.5deg); }
		to   { transform: translateY(-0.55rem) rotate(1.5deg); }
	}

	@keyframes mp-girar {
		to { transform: rotate(1turn); }
	}


	.mp-aura {
		animation: mp-respirar 19s ease-in-out infinite alternate;
	}

	.mp-etiqueta__punto {
		animation: mp-latido 2.4s ease-out infinite;
	}

	.mp-escena__pop {
		/* El paralaje va en `translate`; el vaivén, en `transform`. Sin pelearse. */
		animation: mp-flotar 7s ease-in-out infinite alternate;
		animation-delay: calc(var(--mp-profundidad, 1) * -2.3s);
	}

	.mp-marquesina__tira {
		animation: mp-desfile 34s linear infinite;
	}

	.mp-marquesina:hover .mp-marquesina__tira {
		animation-play-state: paused;
	}

	.mp-boton__giro {
		animation: mp-girar 700ms linear infinite;
	}

	/*
	 * Estado de partida de la animación de entrada. Lo pone un script en línea
	 * marcando el <html>, para que ya esté puesto en el primer fotograma; GSAP
	 * lo releva con estilos en línea y quita la marca. Si el módulo nunca
	 * llega, el propio script en línea la retira a los 2,5 s.
	 */
	/*
	 * Solo opacidad, nunca `transform`. GSAP compone sus tweens sobre el
	 * transform que ya tenga el elemento: si el estado de partida se declarara
	 * aquí con un `translate`, GSAP lo tomaría como base y al terminar quedaría
	 * pegado (la banda naranja se quedaba 141 px más abajo de su sitio).
	 * El desplazamiento inicial lo pone intro.js y solo intro.js.
	 */
	/* Mientras GSAP anima, la banda naranja viene desde debajo del borde
	   inferior. Se recorta solo durante ese rato: después el lienzo vuelve a
	   dejar salir el contenido, para que nada quede escondido si el texto
	   crece (tipografía grande del sistema, traducciones más largas). */
	.mp-animando .mp-lienzo {
		overflow: clip;
	}

	.mp-intro .mp-logo,
	.mp-intro .mp-etiqueta,
	.mp-intro .mp-titular,
	.mp-intro .mp-entradilla,
	.mp-intro .mp-cuenta,
	.mp-intro .mp-espera,
	.mp-intro .mp-redes,
	.mp-intro .mp-elenco__pop,
	.mp-intro .mp-escena__pop,
	.mp-intro .mp-aura,
	.mp-intro .mp-feston,
	.mp-intro .mp-pie {
		opacity: 0;
	}

	/* El mensaje de éxito entra desde su estado inicial, sin JavaScript. */
	.mp-espera[estado="exito"] .mp-espera__aviso {
		transition: opacity 400ms ease, translate 400ms ease;
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		.mp-espera[estado="exito"] .mp-espera__aviso {
			opacity: 0;
			translate: 0 0.75rem;
		}
	}

}

/* ------------------------------------------------------------------ */
/* Adaptación: preferencias de la persona y pantallas estrechas        */
/* ------------------------------------------------------------------ */

@layer adaptacion {
	/*
	 * Escritorio: la portada ocupa exactamente una pantalla y no se desplaza.
	 * Para que quepa, las medidas que mandan en el alto pasan a depender de
	 * `svh` además de `vw`: gana la menor de las dos, así que en una pantalla
	 * baja encoge en lugar de desbordar.
	 */
	@media (width >= 64rem) and (height >= 34rem) {
		:root {
			--mp-tam-logo: min(15vw, 12.8svh);
			--mp-tam-titular: min(3.1vw, 4.6svh);
			--mp-tam-elenco: min(13vw, 13svh);
			--mp-hueco: clamp(0.5rem, 1.1svh, 0.9rem);
			--mp-margen-portada: clamp(0.75rem, 2svh, 1.5rem);
		}

		/*
		 * `min-block-size` y no `block-size`: la portada ocupa una pantalla,
		 * pero si algún día el texto crece —una traducción más larga, un
		 * titular de tres líneas, tipografía grande del sistema— la página
		 * prefiere desplazarse a recortar. Con una altura fija, el contenido
		 * centrado que no cabe se sale por arriba y desaparece sin más.
		 */
		.mp-lienzo {
			min-block-size: 100svh;
		}

		.mp-entradilla {
			max-inline-size: 62ch;
		}

		.mp-feston {
			padding-block-end: 0.7rem;
		}
	}

	/*
	 * Portátiles bajos (el 1366×768 de toda la vida). Aquí las medidas en `svh`
	 * ya están al mínimo pero el formulario, el pie y la marquesina siguen
	 * midiendo en `rem`, así que se recorta un poco más de los pops y del aire
	 * entre piezas. La marquesina no se toca: se quiere grande.
	 */
	@media (width >= 64rem) and (height < 49rem) {
		:root {
			--mp-tam-logo: min(15vw, 12svh);
			--mp-tam-elenco: min(13vw, 11.2svh);
			--mp-hueco: clamp(0.4rem, 0.85svh, 0.75rem);
			--mp-margen-portada: clamp(0.5rem, 1.4svh, 1rem);
		}
	}

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

		.mp-escena__pop {
			translate: none;
		}
	}

	/* En pantallas muy estrechas sobran adornos: manda el mensaje. */
	@media (width < 34rem) {
		.mp-escena__pop--2,
		.mp-escena__pop--3 {
			display: none;
		}

		.mp-escena__pop {
			opacity: 0.34;
		}

		.mp-cuenta__lista {
			gap: 0.4rem;
		}

		.mp-elenco {
			gap: 0.4rem;
		}
	}

	/* Pantallas bajas y apaisadas (móvil tumbado): menos aire vertical. */
	@media (height < 34rem) and (orientation: landscape) {
		.mp-elenco {
			display: none;
		}

		.mp-principal {
			padding-block: 2rem 1.5rem;
		}
	}

	/* Modo de contraste forzado: se respetan los colores del sistema. */
	@media (forced-colors: active) {
		.mp-etiqueta,
		.mp-campo,
		.mp-cuenta__casilla,
		.mp-redes__enlace {
			border: 1px solid CanvasText;
		}

		.mp-aura,
		.mp-escena {
			display: none;
		}
	}

	/* Impresión: solo el mensaje. */
	@media print {
		.mp-aura,
		.mp-escena,
		.mp-elenco,
		.mp-feston,
		.mp-redes {
			display: none;
		}

		body {
			background: #fff;
			color: #000;
		}
	}
}