/*
 * MINURD · /munrevolution/minurd.mun (3.26). Hoja propia, sin tema.
 *
 * Marca: letras ultramar #002D62 (blancas sobre la noche), placa bermellón #CE1126, noche #0A1628,
 * Outfit + DM Sans. Sin dorado (es de MUN Revolution) y sin azul celeste (nada que sugiera la ONU).
 *
 * Movimiento: con .mi-movimiento cada escena es más alta que la pantalla y su .mi-fijo queda pegado
 * arriba; minurd.js escribe en cada escena --p (0 → 1, su avance), --e (0 → 1, cuánto ha entrado
 * por encima de la anterior) y --sale (cuánto la tapa la siguiente), y en la raíz --mx/--my (puntero,
 * de -1 a 1) y --cx/--cy (luz del cursor, en px). Cada capa se mueve a su velocidad con esas
 * variables. Sin JavaScript o con movimiento reducido las escenas quedan una debajo de otra, quietas,
 * en el estado que fija cada sección.
 */

@font-face {
	font-family: 'Outfit';
	src: url(fonts/outfit.woff2) format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'DM Sans';
	src: url(fonts/dm-sans.woff2) format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--mi-azul: #002D62;
	--mi-azul-vivo: #123E86;
	--mi-rojo: #CE1126;
	--mi-rojo-claro: #FF4D61;
	--mi-noche: #0A1628;
	--mi-noche-2: #07101F;
	--mi-gris: #A9B4C8;
	--mi-papel: #EEF0F5;
	--mi-alto: 100vh;
	--mx: 0;
	--my: 0;
	--cx: -999px;
	--cy: -999px;
	color-scheme: dark;
}
@supports (height: 100svh) {
	:root {
		--mi-alto: 100svh;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	background: var(--mi-noche);
	-webkit-text-size-adjust: 100%;
	overflow-x: clip;
}
body {
	margin: 0;
	background: var(--mi-noche);
	color: #fff;
	font: 400 17px/1.55 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
a {
	color: inherit;
}
:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.mi-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.mi-saltar {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--mi-azul);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
}
.mi-saltar:focus {
	transform: none;
}
/* El salto genérico que añade funajit-paginas apunta a un contenedor que aquí no existe: vale el propio. */
.fjxp-salto-contenido {
	display: none;
}

/* Grano de película y luz que sigue al cursor: dan textura a la noche. */
.mi-grano {
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	opacity: .07;
	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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.mi-luz-cursor {
	display: none;
}
@media (pointer: fine) {
	.mi-movimiento .mi-luz-cursor {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 55;
		width: 560px;
		height: 560px;
		margin: -280px 0 0 -280px;
		border-radius: 50%;
		pointer-events: none;
		background: radial-gradient(circle, rgba(206, 17, 38, .16), rgba(206, 17, 38, 0) 65%);
		mix-blend-mode: screen;
		transform: translate3d(var(--cx), var(--cy), 0);
	}
}

/* ── Escenas ─────────────────────────────────────────────────────────────────────────────── */

.mi-escena {
	position: relative;
	--e: 1;
	--sale: 0;
}
.mi-fijo {
	position: relative;
	min-height: var(--mi-alto);
	overflow: hidden;
	background: var(--mi-noche);
}
.mi-capa {
	position: absolute;
	inset: 0;
}

/* Estado quieto de cada escena (sin JavaScript o con movimiento reducido). */
.mi-portada {
	--p: 0;
	z-index: 1;
}
.mi-lema {
	--p: .6;
	z-index: 2;
}
.mi-cien {
	--p: 1;
	z-index: 3;
}

.mi-movimiento .mi-portada {
	height: calc(var(--mi-alto) * 2.8);
}
.mi-movimiento .mi-lema {
	height: calc(var(--mi-alto) * 3.2);
}
.mi-movimiento .mi-cien {
	height: calc(var(--mi-alto) * 3);
}
/* Cada escena entra por encima de la anterior, que se queda pegada, se aleja y se apaga. */
.mi-movimiento .mi-lema,
.mi-movimiento .mi-cien,
.mi-movimiento .mi-pedir {
	margin-top: calc(var(--mi-alto) * -1);
}
.mi-movimiento .mi-fijo {
	position: sticky;
	top: 0;
	height: var(--mi-alto);
	transform: scale(calc(1 - var(--sale) * .08));
	border-radius: calc((1 - var(--e)) * 44px) calc((1 - var(--e)) * 44px) 0 0;
	box-shadow: 0 -30px 80px rgba(0, 0, 0, calc((1 - var(--e)) * .55));
}
.mi-fijo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	background: #02060D;
	opacity: calc(var(--sale) * .75);
}

/* ── 1. Portada ──────────────────────────────────────────────────────────────────────────── */

.mi-aurora {
	overflow: hidden;
	transform: translate3d(0, calc(var(--p) * -12%), 0);
}
.mi-aurora i {
	position: absolute;
	width: 70vmax;
	height: 70vmax;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
}
.mi-aurora i:nth-child(1) {
	top: -30vmax;
	left: -20vmax;
	background: var(--mi-azul-vivo);
}
.mi-aurora i:nth-child(2) {
	top: 10%;
	right: -35vmax;
	background: var(--mi-rojo);
	opacity: .32;
}
.mi-aurora i:nth-child(3) {
	bottom: -45vmax;
	left: 15%;
	background: var(--mi-azul);
	opacity: .8;
}
.mi-movimiento .mi-aurora i {
	animation: mi-deriva 22s ease-in-out infinite alternate;
}
.mi-movimiento .mi-aurora i:nth-child(2) {
	animation-duration: 17s;
	animation-delay: -6s;
}
.mi-movimiento .mi-aurora i:nth-child(3) {
	animation-duration: 26s;
	animation-delay: -12s;
}

.mi-gigante {
	display: grid;
	place-items: center;
	pointer-events: none;
	transform: translate3d(calc(var(--mx) * 26px), calc(var(--p) * 22% + var(--my) * 14px), 0) scale(calc(1 + var(--p) * .45));
}
.mi-gigante span {
	font: 800 31vw/.8 'Outfit', sans-serif;
	letter-spacing: -.05em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .11);
}

.mi-sala3d {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	perspective: 900px;
	perspective-origin: 50% 0;
	pointer-events: none;
}
.mi-sala3d .mi-hemiciclo {
	width: min(1500px, 150vw);
	flex: none;
	margin-bottom: -9%;
	transform-origin: 50% 100%;
	transform: translate3d(calc(var(--mx) * -18px), calc(var(--p) * -14%), 0) rotateX(calc(64deg - var(--p) * 34deg));
	opacity: calc(.75 + var(--p) * .25);
}
.mi-hemiciclo .mi-escano {
	fill: rgba(255, 255, 255, .13);
}
.mi-sala3d g:nth-child(7n + 3) .mi-escano,
.mi-sala3d g:nth-child(11n + 5) .mi-escano {
	fill: var(--mi-rojo);
}
.mi-movimiento .mi-sala3d g:nth-child(7n + 3) .mi-escano,
.mi-movimiento .mi-sala3d g:nth-child(11n + 5) .mi-escano {
	animation: mi-titila 3.6s ease-in-out infinite;
	animation-delay: calc(var(--a) * -9s);
}

/* Placas en el aire, letreros apaisados como la del logotipo: --z es la profundidad; las cercanas son más grandes, más rápidas y nítidas. */
.mi-placas {
	pointer-events: none;
}
.mi-placa {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: calc(var(--z) * 10);
	width: calc(32px + var(--z) * 36px);
	aspect-ratio: 2.1 / 1;
	transform: translate3d(calc(var(--mx) * var(--z) * -22px), calc(var(--p) * var(--z) * -55vh + var(--my) * var(--z) * -14px), 0) rotate(var(--r));
	filter: blur(calc(max(0px, (1 - var(--z)) * 5px)));
	opacity: calc(.45 + min(var(--z), 1) * .55);
}
.mi-placa b {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background: var(--mi-rojo);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mi-placa b::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 6%;
	height: 120%;
	border-radius: 0 0 2px 2px;
	background: rgba(255, 255, 255, .8);
	transform: translateX(-50%);
}
.mi-placa--papel b {
	background: var(--mi-papel);
}
.mi-placa--papel b::after {
	background: rgba(238, 240, 245, .6);
}
.mi-movimiento .mi-placa b {
	animation: mi-flota calc(4.5s + var(--z) * 1.6s) ease-in-out infinite alternate;
	animation-delay: calc(var(--z) * -2.3s);
}

.mi-heroe {
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px 6vh;
	text-align: center;
	transform: translate3d(calc(var(--mx) * -10px), calc(var(--p) * -26vh + var(--my) * -6px), 0) scale(calc(1 - var(--p) * .22));
	opacity: calc(1 - var(--p) * 1.5);
}
.mi-kicker {
	margin: 0 0 clamp(18px, 3vh, 30px);
	padding: 7px 16px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font: 600 12px/1 'Outfit', sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
}
.mi-titulo {
	margin: 0;
	line-height: 0;
}
.mi-logo {
	display: block;
	width: min(82vw, 720px, 118vh);
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .45));
}
.mi-logo__letras,
.mi-logo__brazo {
	fill: #fff;
}
.mi-logo__placa {
	fill: var(--mi-rojo);
}
.mi-heroe .mi-logo {
	transform: perspective(900px) rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -6deg));
}
.mi-nombre {
	margin: clamp(16px, 2.6vh, 26px) 0 0;
	font: 500 clamp(14px, 1.5vw, 19px)/1.45 'Outfit', sans-serif;
	letter-spacing: .02em;
	color: var(--mi-gris);
}

/* 3.37: la cifra en vivo en la portada. */
.mi-portada-vivo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: clamp(18px, 3vh, 30px) 0 0;
	padding: 10px 18px 10px 14px;
	border: 1px solid rgba(206, 17, 38, .6);
	border-radius: 999px;
	background: rgba(206, 17, 38, .16);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font: 500 clamp(14px, 1.5vw, 17px)/1.3 'Outfit', sans-serif;
	color: #fff;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background .2s ease;
}
.mi-portada-vivo:hover,
.mi-portada-vivo:focus-visible {
	background: rgba(206, 17, 38, .3);
}
.mi-portada-vivo i {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mi-rojo);
	animation: mi-late 1.8s ease-out infinite;
}
.mi-portada-vivo b {
	font-weight: 800;
}
.mi-portada-vivo__b::before {
	content: ' · ';
}
@media (max-width: 560px) {
	.mi-portada-vivo {
		text-align: left;
	}
	.mi-portada-vivo__a,
	.mi-portada-vivo__b {
		display: block;
	}
	.mi-portada-vivo__b::before {
		content: none;
	}
}
.mi-movimiento .mi-heroe > .mi-portada-vivo {
	animation-delay: .7s;
}
.mi-portada-vivo.is-sube b {
	animation: mi-destello 1.2s ease-out;
}

.mi-pista {
	position: absolute;
	left: 50%;
	bottom: max(22px, env(safe-area-inset-bottom));
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: max-content;
	transform: translateX(-50%);
	font: 600 11px/1 'Outfit', sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mi-gris);
	opacity: calc(1 - var(--p) * 10);
}
.mi-pista i {
	position: relative;
	display: block;
	width: 1px;
	height: 44px;
	overflow: hidden;
	background: rgba(255, 255, 255, .18);
}
.mi-pista i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--mi-rojo-claro);
	transform: translateY(-100%);
}
.mi-movimiento .mi-pista i::after {
	animation: mi-cae 1.8s cubic-bezier(.6, 0, .3, 1) infinite;
}
.mi-sin-js .mi-pista,
.mi-js:not(.mi-movimiento) .mi-pista {
	display: none;
}

/* Entrada al cargar: el brazo alza la placa y el resto aparece en cascada. */
.mi-movimiento .mi-heroe > * {
	animation: mi-entra 1.2s cubic-bezier(.2, .8, .2, 1) both;
}
.mi-movimiento .mi-heroe > .mi-titulo {
	animation-delay: .15s;
}
.mi-movimiento .mi-heroe > .mi-nombre {
	animation-delay: .45s;
}
.mi-movimiento .mi-heroe .mi-brazo {
	animation: mi-alza 1.3s cubic-bezier(.34, 1.45, .5, 1) .75s both;
}
.mi-movimiento .mi-gigante span {
	animation: mi-aparece 2.4s ease .2s both;
}

/* ── 2. Lema ─────────────────────────────────────────────────────────────────────────────── */

.mi-lema .mi-fijo {
	background: var(--mi-noche-2);
	--sube: clamp(0, calc(var(--p) * 2.6 - .25), 1);
}
.mi-foco {
	background:
		radial-gradient(ellipse 46% 75% at 50% -8%, rgba(206, 17, 38, calc(.08 + var(--sube) * .22)), transparent 72%),
		radial-gradient(ellipse 60% 50% at 50% 110%, rgba(18, 62, 134, .45), transparent 70%);
}
.mi-placa-grande {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 5vh;
	pointer-events: none;
}
.mi-placa-grande .mi-placa-svg {
	width: min(34vw, 300px, 36vh);
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 0 70px rgba(206, 17, 38, .55)) drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
	transform: translate3d(calc(var(--mx) * 14px), calc((1 - var(--sube)) * 75vh - var(--p) * 14vh), 0) rotate(calc((1 - var(--sube)) * -28deg + var(--mx) * 3deg));
}
.mi-placa-svg .mi-logo__placa {
	fill: var(--mi-rojo);
}
.mi-placa-svg .mi-logo__brazo {
	fill: #fff;
}
.mi-lema__texto {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	pointer-events: none;
	font: 800 min(15vw, 24vh, 230px)/.88 'Outfit', sans-serif;
	letter-spacing: -.045em;
	text-align: center;
}
.mi-linea {
	display: block;
	white-space: nowrap;
}
.mi-linea--1 {
	color: transparent;
	-webkit-text-stroke: 2px #fff;
	transform: translate3d(calc((.5 - var(--p)) * 70vw), 0, 0);
}
.mi-linea--2 {
	transform: translate3d(calc((var(--p) - .5) * 70vw), 0, 0);
	text-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.mi-linea--2 em {
	font-style: normal;
	color: var(--mi-rojo-claro);
}
.mi-lema__sub {
	inset: auto 0 max(10vh, 56px);
	z-index: 3;
	margin: 0;
	padding: 0 24px;
	text-align: center;
	font: 500 clamp(16px, 2vw, 22px)/1.4 'Outfit', sans-serif;
	color: #fff;
	opacity: calc((var(--p) - .35) * 4);
	transform: translate3d(0, calc((1 - var(--p)) * 40px), 0);
}

/* ── 3. La meta: cien escaños ────────────────────────────────────────────────────────────── */

.mi-cien .mi-fijo {
	--q: clamp(0, calc((var(--p) - .08) / .72), 1);
	--w: min(1100px, 132vw, 136vh);
}
.mi-cien__halo {
	background: radial-gradient(ellipse 55% 45% at 50% 70%, rgba(206, 17, 38, calc(.05 + var(--q) * .3)), transparent 70%);
}
.mi-cien__sala {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	pointer-events: none;
}
.mi-cien__sala .mi-hemiciclo {
	flex: none;
	width: var(--w);
	margin-top: calc(var(--mi-alto) * .7 - var(--w) * .488);
	transform-origin: 50% 95%;
	transform: translate3d(calc(var(--mx) * -10px), calc((1 - var(--p)) * 8vh), 0) scale(calc(.88 + var(--q) * .12));
}
/* 3.37: --tope es el avance del tramo en curso (de 150 a 300…); lo pone la vista y lo sube minurd.js en vivo. */
@property --tope {
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}
.mi-cien {
	transition: --tope 1.4s cubic-bezier(.2, .8, .2, 1);
}
.mi-cien .mi-escano {
	--on: clamp(0, calc((min(var(--q), var(--tope, 1)) * 1.02 - var(--a)) * 40), 1);
	fill: rgba(255, 255, 255, .13);
	fill: color-mix(in srgb, var(--mi-rojo) calc(var(--on) * 100%), rgba(255, 255, 255, .13));
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(calc(.82 + var(--on) * .26));
}
.mi-cien__centro {
	bottom: auto;
	height: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	transform: translate3d(0, calc((1 - var(--p)) * 5vh), 0);
}
.mi-cien__etiqueta {
	margin: 0 0 6px;
	font: 600 12px/1 'Outfit', sans-serif;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mi-rojo-claro);
}
.mi-cien__cifra {
	margin: 0;
	font: 800 min(26vw, 25vh, 220px)/.82 'Outfit', sans-serif;
	letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 calc(var(--q) * 80px) rgba(206, 17, 38, .7), 0 10px 40px rgba(0, 0, 0, .6);
}
.mi-cien__cifra {
	position: relative;
}
.mi-cien__texto b {
	display: inline-block;
	padding: 0 .2em;
	border-radius: 8px;
	background: rgba(206, 17, 38, .22);
	color: #fff;
	font-size: 1.45em;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* En vivo (3.37): punto que late, barra del tramo y «+N» cuando la cifra sube sin recargar. */
.mi-envivo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 8px;
	padding: 4px 9px 4px 8px;
	border-radius: 999px;
	background: rgba(206, 17, 38, .18);
	border: 1px solid rgba(206, 17, 38, .55);
	color: #fff;
	letter-spacing: .18em;
	vertical-align: middle;
}
.mi-envivo i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mi-rojo);
	box-shadow: 0 0 0 0 rgba(206, 17, 38, .7);
	animation: mi-late 1.8s ease-out infinite;
}
@keyframes mi-late {
	0% { box-shadow: 0 0 0 0 rgba(206, 17, 38, .7); }
	70%, 100% { box-shadow: 0 0 0 9px rgba(206, 17, 38, 0); }
}
.mi-tramo {
	width: min(440px, 78vw);
	margin: min(3vh, 22px) auto 0;
	font: 600 12px/1 'Outfit', sans-serif;
	color: var(--mi-gris);
	font-variant-numeric: tabular-nums;
}
.mi-tramo__barra {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}
.mi-tramo__lleno {
	display: block;
	height: 100%;
	width: calc(var(--avance, 0) * 100%);
	min-width: 8px;
	border-radius: inherit;
	background: linear-gradient(90deg, #8E0B1A, var(--mi-rojo) 60%, #FF5A6B);
	box-shadow: 0 0 18px rgba(206, 17, 38, .6);
	transition: width 1.4s cubic-bezier(.2, .8, .2, 1);
}
.mi-tramo__fin {
	display: flex;
	justify-content: space-between;
	margin-top: 7px;
}
.mi-mas {
	position: absolute;
	top: .1em;
	left: 100%;
	margin-left: .12em;
	padding: .18em .42em;
	border-radius: 999px;
	background: var(--mi-rojo);
	font: 800 clamp(14px, 2.4vw, 22px)/1 'Outfit', sans-serif;
	letter-spacing: 0;
	text-shadow: none;
	animation: mi-sube 2.4s ease-out forwards;
}
@keyframes mi-sube {
	0% { opacity: 0; transform: translateY(14px) scale(.8); }
	15% { opacity: 1; transform: translateY(0) scale(1.05); }
	75% { opacity: 1; transform: translateY(-6px) scale(1); }
	100% { opacity: 0; transform: translateY(-18px) scale(1); }
}
.is-sube [data-mi-contador],
.mi-meta.is-sube b {
	animation: mi-destello 1.2s ease-out;
}
@keyframes mi-destello {
	0% { color: #FF5A6B; text-shadow: 0 0 28px rgba(206, 17, 38, .9); }
	100% { color: inherit; }
}
.mi-meta.is-vivo b {
	font-variant-numeric: tabular-nums;
}

.mi-cien__texto {
	position: absolute;
	top: calc(100% + 3vh);
	left: 0;
	right: 0;
	max-width: 30em;
	margin: 0 auto;
	padding: 0 24px;
	font: 500 clamp(16px, 1.8vw, 21px)/1.45 'Outfit', sans-serif;
	color: var(--mi-gris);
}

/* ── 4. Pedir la palabra ─────────────────────────────────────────────────────────────────── */

.mi-pedir {
	position: relative;
	z-index: 4;
	display: grid;
	place-items: center;
	min-height: var(--mi-alto);
	padding: 12vh 20px;
	overflow: hidden;
	background: var(--mi-noche);
	--p: 0;
	--e: 1;
}
.mi-movimiento .mi-pedir {
	border-radius: calc((1 - var(--e)) * 44px) calc((1 - var(--e)) * 44px) 0 0;
	box-shadow: 0 -30px 80px rgba(0, 0, 0, calc((1 - var(--e)) * .55));
}
.mi-pedir__fondo i {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}
.mi-pedir__fondo i:nth-child(1) {
	top: -20%;
	left: -15%;
	width: 60vmax;
	height: 60vmax;
	background: var(--mi-azul-vivo);
	opacity: .5;
}
.mi-pedir__fondo i:nth-child(2) {
	right: -20%;
	bottom: -30%;
	width: 55vmax;
	height: 55vmax;
	background: var(--mi-rojo);
	opacity: .28;
}
.mi-movimiento .mi-pedir__fondo i {
	animation: mi-deriva 20s ease-in-out infinite alternate;
}
.mi-placas--suaves {
	position: absolute;
	inset: 0;
	opacity: .55;
}

.mi-tarjeta {
	position: relative;
	z-index: 20;
	width: min(600px, 100%);
	padding: clamp(28px, 5vw, 52px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	box-shadow: 0 40px 100px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.mi-movimiento [data-mi-aparece] {
	opacity: 0;
	transform: translateY(48px) scale(.96);
	transition: opacity 1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1);
}
.mi-movimiento [data-mi-aparece].is-visible {
	opacity: 1;
	transform: none;
}
.mi-tarjeta__kicker {
	margin: 0 0 12px;
	font: 600 12px/1 'Outfit', sans-serif;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mi-rojo-claro);
}
.mi-tarjeta__titulo {
	margin: 0 0 12px;
	font: 800 clamp(38px, 7vw, 60px)/1 'Outfit', sans-serif;
	letter-spacing: -.035em;
}
.mi-tarjeta__texto {
	margin: 0 0 26px;
	color: var(--mi-gris);
}

.mi-trampa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.mi-campos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.mi-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.mi-campo--ancho {
	grid-column: 1 / -1;
}
.mi-campo__etiqueta {
	font: 600 13px/1 'Outfit', sans-serif;
	letter-spacing: .04em;
	color: var(--mi-gris);
}
.mi-entrada {
	width: 100%;
	min-width: 0;
	height: 54px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 14px;
	background: rgba(4, 10, 22, .55);
	color: #fff;
	font: 500 17px/1 'DM Sans', sans-serif;
	transition: border-color .2s, box-shadow .2s;
}
.mi-entrada::placeholder {
	color: rgba(169, 180, 200, .7);
}
.mi-entrada:focus {
	outline: none;
	border-color: var(--mi-rojo-claro);
	box-shadow: 0 0 0 4px rgba(206, 17, 38, .28);
}
.mi-entrada[aria-invalid='true'] {
	border-color: var(--mi-rojo-claro);
}
select.mi-entrada {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23A9B4C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
select.mi-entrada option {
	color: #0A1628;
}
.mi-form .mi-boton {
	width: 100%;
	margin-top: 16px;
}
.mi-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	padding: 0 24px;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: var(--mi-rojo);
	color: #fff;
	font: 600 17px/1 'Outfit', sans-serif;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(206, 17, 38, .4);
	transition: transform .2s, box-shadow .2s;
}
.mi-boton::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
	transform: translateX(-120%);
}
.mi-boton:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 44px rgba(206, 17, 38, .55);
}
.mi-boton:hover::before {
	transition: transform .8s;
	transform: translateX(120%);
}
.mi-boton[disabled] {
	opacity: .7;
	cursor: progress;
}
/* La placa del botón: se alza al pasar por encima, como quien pide la palabra. */
.mi-boton__placa {
	position: relative;
	width: 22px;
	height: 11px;
	border-radius: 2px;
	background: #fff;
	transform: translateY(3px);
	transition: transform .35s cubic-bezier(.34, 1.6, .5, 1);
}
.mi-boton__placa::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 2px;
	height: 9px;
	background: rgba(255, 255, 255, .8);
	transform: translateX(-50%);
}
.mi-boton:hover .mi-boton__placa,
.mi-boton:focus-visible .mi-boton__placa {
	transform: translateY(-5px) rotate(-6deg);
}

.mi-acepto {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 16px;
	font-size: 15px;
	color: var(--mi-gris);
	cursor: pointer;
}
.mi-acepto input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--mi-rojo);
}
.mi-privacidad {
	margin-top: 12px;
	font-size: 14px;
	color: var(--mi-gris);
}
.mi-privacidad summary {
	width: max-content;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.mi-privacidad p {
	margin: 10px 0 0;
}

.mi-gracias {
	text-align: center;
}
.mi-gracias[hidden],
[data-mi-form-caja][hidden] {
	display: none;
}
.mi-gracias__placa {
	display: inline-block;
	width: 76px;
	margin-bottom: 8px;
}
.mi-gracias__placa .mi-placa-svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 30px rgba(206, 17, 38, .6));
}
.mi-movimiento .mi-gracias:not([hidden]) .mi-gracias__placa {
	animation: mi-alza-placa .9s cubic-bezier(.34, 1.5, .5, 1) both;
}
.mi-gracias .mi-gracias__titulo {
	margin: 0 0 10px;
	font: 800 clamp(34px, 6vw, 48px)/1.05 'Outfit', sans-serif;
	letter-spacing: -.03em;
	color: #fff;
}
.mi-gracias__titulo:focus {
	outline: none;
}
.mi-gracias p {
	color: var(--mi-gris);
}
.mi-compartir {
	margin-top: 8px;
	padding: 14px 22px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: 600 16px/1 'Outfit', sans-serif;
	cursor: pointer;
	transition: background .2s;
}
.mi-compartir:hover {
	background: rgba(255, 255, 255, .08);
}

.mi-estado {
	min-height: 1.5em;
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--mi-gris);
}
.mi-estado.is-error {
	color: #FF9AA5;
}
.mi-meta {
	margin: 6px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 14px;
	color: var(--mi-gris);
}
.mi-meta b {
	color: #fff;
}

/* Chispas: placas pequeñas que salen del botón al pedir la palabra. */
.mi-chispa {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	width: 20px;
	height: 9px;
	border-radius: 2px;
	background: var(--mi-rojo);
	pointer-events: none;
}
.mi-chispa:nth-child(3n) {
	background: #fff;
}

.mi-pie {
	position: relative;
	z-index: 5;
	padding: 40px 20px max(48px, env(safe-area-inset-bottom));
	background: var(--mi-noche);
	text-align: center;
	font-size: 14px;
	color: var(--mi-gris);
}
.mi-pie p {
	margin: 0 0 8px;
}
.mi-pie a {
	color: #fff;
	text-underline-offset: 3px;
}
.mi-pie .mi-pie__nota {
	max-width: 46em;
	margin: 14px auto 0;
	font-size: 12px;
	opacity: .8;
}

/* ── Secciones por metas (3.29) ──────────────────────────────────────────────────────────── */

.mi-voz {
	position: relative;
	z-index: 5;
	padding: 12vh 20px 8vh;
	background: linear-gradient(180deg, var(--mi-noche) 0%, var(--mi-noche-2) 100%);
}
.mi-voz__caja {
	width: min(760px, 100%);
	margin: 0 auto;
}
.mi-voz__kicker {
	margin: 0 0 12px;
	font: 600 12px/1.4 'Outfit', sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mi-rojo-claro);
}
.mi-voz__titulo {
	margin: 0 0 12px;
	font: 800 clamp(32px, 6vw, 52px)/1.04 'Outfit', sans-serif;
	letter-spacing: -.03em;
	color: #fff;
}
.mi-voz__intro {
	margin: 0 0 28px;
	max-width: 40em;
	color: var(--mi-gris);
}
.mi-voz__aviso {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 14px;
	background: rgba(18, 62, 134, .35);
	border: 1px solid rgba(169, 180, 200, .25);
	color: #fff;
}
.mi-voz__aviso.is-error {
	background: rgba(206, 17, 38, .14);
	border-color: rgba(255, 77, 97, .45);
	color: #FFC7CD;
}
.mi-acceso {
	margin: 0 0 28px;
	padding: clamp(20px, 4vw, 32px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 24px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
}
.mi-acceso__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
}
.mi-acceso__fila--otra {
	margin-top: 8px;
}
.mi-acceso__texto,
.mi-acceso__otro {
	margin: 0 0 14px;
	color: var(--mi-gris);
}
.mi-acceso__otro {
	margin: 18px 0 0;
	font-size: 14px;
}
.mi-acceso__nota {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--mi-gris);
}
.mi-acceso__nota a,
.mi-enlace {
	color: #fff;
	text-underline-offset: 3px;
}
/* ── Entrar con Google (3.33): el botón lo pinta Google; aquí solo el marco ──────────────── */
.mi-google {
	display: none;
}
.mi-js .mi-google {
	display: block;
}
.mi-google__boton {
	display: flex;
	min-height: 44px;
	max-width: 100%;
	overflow: hidden;
}
.mi-google__form {
	display: none;
}
.mi-google__aviso {
	margin: 12px 0 0;
	font-size: 14px;
	color: #FFC7CD;
}
.mi-otro {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.mi-otro__resumen {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	cursor: pointer;
	color: #fff;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style: none;
}
.mi-otro__resumen::-webkit-details-marker {
	display: none;
}
.mi-otro__resumen::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}
.mi-otro[open] > .mi-otro__resumen::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.mi-otro__resumen:focus-visible {
	outline: 3px solid var(--mi-rojo-claro);
	outline-offset: 4px;
	border-radius: 6px;
}
.mi-otro__cuerpo {
	margin-top: 12px;
}
.mi-codigo {
	font: 700 24px/1 'Outfit', sans-serif;
	letter-spacing: .3em;
}
.mi-boton--voz {
	height: 54px;
}
.mi-metas {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mi-meta-item {
	padding: clamp(20px, 4vw, 30px);
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
}
.mi-meta-item.is-abierta {
	border-color: rgba(255, 77, 97, .5);
	background: linear-gradient(160deg, rgba(0, 45, 98, .65), rgba(10, 22, 40, .6));
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.mi-meta-item.is-proxima {
	border-style: dashed;
	opacity: .75;
}
.mi-meta-item__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.mi-meta-item__meta {
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font: 600 12px/1 'Outfit', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mi-gris);
}
.is-abierta .mi-meta-item__meta {
	background: var(--mi-rojo);
	color: #fff;
}
.mi-meta-item__titulo {
	flex: 1 1 auto;
	margin: 0;
	font: 700 22px/1.2 'Outfit', sans-serif;
	color: #fff;
}
.mi-meta-item__estado {
	font-size: 14px;
	color: var(--mi-gris);
}
.is-abierta .mi-meta-item__estado {
	color: #fff;
	font-weight: 600;
}
.mi-meta-item__texto {
	margin: 12px 0 0;
	color: var(--mi-gris);
}
.mi-pregunta {
	margin-top: 18px;
}
.mi-pregunta fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.mi-pregunta__titulo {
	padding: 0;
	font: 700 20px/1.3 'Outfit', sans-serif;
	color: #fff;
}
.mi-meta-item__intro {
	color: #fff;
	font-size: 17px;
	line-height: 1.55;
}
.mi-pregunta fieldset + fieldset {
	margin-top: 8px;
}
.mi-pregunta fieldset + fieldset .mi-pregunta__titulo {
	margin-bottom: 14px;
}
.mi-pregunta__nota {
	margin: 6px 0 16px;
	font-size: 15px;
	color: var(--mi-gris);
}
.mi-opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}
.mi-opcion {
	position: relative;
	display: block;
	cursor: pointer;
}
.mi-opcion input {
	position: absolute;
	opacity: 0;
}
.mi-opcion span {
	display: flex;
	align-items: center;
	min-height: 58px;
	padding: 10px 18px 10px 48px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 16px;
	background: rgba(4, 10, 22, .5);
	font: 600 17px/1.2 'Outfit', sans-serif;
	color: #fff;
	transition: border-color .2s, background .2s;
}
.mi-opcion span::before {
	content: '';
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid var(--mi-gris);
	border-radius: 50%;
}
.mi-opcion input:checked + span {
	border-color: var(--mi-rojo-claro);
	background: rgba(206, 17, 38, .2);
}
.mi-opcion input:checked + span::before {
	border-color: #fff;
	background: radial-gradient(circle, #fff 0 4px, var(--mi-rojo) 5px);
}
.mi-opcion input:focus-visible + span {
	box-shadow: 0 0 0 4px rgba(206, 17, 38, .35);
}
.mi-pendiente {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(206, 17, 38, .28);
	border: 1px solid var(--mi-rojo-claro);
	font: 700 12px/1 'DM Sans', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
	color: #fff;
}
/* Casillas (selección múltiple): misma tarjeta que las opciones, con marca cuadrada. */
.mi-opciones--casillas {
	grid-template-columns: minmax(0, 1fr);
}
.mi-opcion--casilla span::before {
	border-radius: 6px;
}
.mi-opcion--casilla input:checked + span::before {
	background: var(--mi-rojo);
	border-color: #fff;
}
.mi-opcion--casilla span::after {
	content: '';
	position: absolute;
	left: 25px;
	top: 50%;
	width: 5px;
	height: 10px;
	margin-top: -7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	rotate: 45deg;
	opacity: 0;
}
.mi-opcion--casilla input:checked + span::after {
	opacity: 1;
}
.mi-campo--centro {
	margin: 4px 0 20px;
}
.mi-campo--centro[hidden] {
	display: none;
}
.mi-campo--centro .mi-pregunta__titulo {
	display: block;
}
.mi-pregunta__tuya {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--mi-gris);
}
.mi-voz__salir {
	margin-top: 18px;
	text-align: center;
}
.mi-enlace {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	color: var(--mi-gris);
}

/* ── Pantallas estrechas ─────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.mi-acceso__fila {
		grid-template-columns: minmax(0, 1fr);
	}
	.mi-opciones {
		grid-template-columns: minmax(0, 1fr);
	}
	.mi-placa {
		width: calc(22px + var(--z) * 20px);
	}
	.mi-gigante span {
		font-size: 44vw;
		writing-mode: vertical-rl;
		rotate: 180deg;
	}
	.mi-campos {
		grid-template-columns: 1fr;
	}
	.mi-linea--1 {
		-webkit-text-stroke-width: 1.5px;
	}
}

/* ── Animaciones ─────────────────────────────────────────────────────────────────────────── */

@keyframes mi-deriva {
	to {
		translate: 8vmax 6vmax;
		scale: 1.15;
	}
}
@keyframes mi-flota {
	from {
		translate: 0 -6px;
	}
	to {
		translate: 0 8px;
	}
}
@keyframes mi-titila {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: .25;
	}
}
@keyframes mi-cae {
	to {
		transform: translateY(100%);
	}
}
@keyframes mi-entra {
	from {
		opacity: 0;
		translate: 0 36px;
		filter: blur(10px);
	}
}
@keyframes mi-alza {
	from {
		transform: translateY(130px);
	}
}
@keyframes mi-aparece {
	from {
		opacity: 0;
		letter-spacing: .1em;
	}
}
@keyframes mi-alza-placa {
	from {
		opacity: 0;
		transform: translateY(40px) rotate(-14deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}