/**
 * Multicines PWA — mcp-2029-base.css
 *
 * v0.33.0 (Rediseño 2029, Fase 0): la base del diseño nuevo.
 *
 * Solo se encola con la casilla "Diseño 2029" encendida (MCP_Diseno) y todo cuelga de la clase
 * `.mcp-2029` del <body>: con la casilla apagada este archivo ni se descarga. No reescribe
 * mcp-pantallas.css: se monta encima.
 *
 * Contenido:
 *   1. Tokens del prototipo, puestos sobre los tokens SEMÁNTICOS que ya usan todos los componentes
 *      (--mcp-fondo, --mcp-primario, ...). El tema sigue saliendo de las mismas clases
 *      .mcp-tema-claro / .mcp-tema-oscuro que pone el servidor: sin data-mode ni localStorage,
 *      y por eso sin parpadeo.
 *   2. Tipografía (sistema u Outfit + DM Sans, según el panel).
 *   3. Hoja que sube desde abajo: reestilo de los <dialog> que ya existen (MCP_Componentes::modal).
 *      El foco atrapado, Escape y el fondo inerte los da el <dialog> nativo; mcp-2029.js agrega
 *      el hundimiento del fondo y cerrar deslizando.
 *   4. Isla de avisos (avisos que llegan de otra pantalla, data-mcp-flash).
 *   5. Guía de foco.
 *   6. Interruptor (switch) y luces de marquesina, listos para las pantallas.
 *   7. Movimiento reducido y alto contraste.
 *
 * Todas las clases y keyframes nuevos llevan el prefijo mcp-2029- (en el prototipo una clase
 * genérica, .done, chocó entre dos componentes).
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────────────────────── */
.mcp-2029 {
	--mcp-2029-spring: cubic-bezier(.2, 1.25, .32, 1);
	--mcp-2029-ease: cubic-bezier(.2, .8, .2, 1);
	--mcp-2029-display: var(--mcp-fuente);
	--mcp-2029-oro-1: #FFE1A6;
	--mcp-2029-oro-2: #F7A443;
	--mcp-2029-oro-3: #E07A10;
	--mcp-2029-isla: #14101C;
	--mcp-2029-luz: rgba(255, 214, 150, .38);
	/* Radios del prototipo: más redondos que los del RN. */
	--mcp-radio-lg: 16px;
	--mcp-radio-xl: 20px;
	--mcp-radio-2xl: 30px;
}

.mcp-2029.mcp-tema-claro {
	--mcp-2029-bg: #F6F3FA;
	--mcp-2029-superficie-2: #F1EBF8;
	--mcp-2029-linea: #E4DAF0;
	--mcp-2029-marca: #5E2B8C;
	--mcp-2029-marca-2: #7A3DB5;
	--mcp-2029-acento-suave: rgba(242, 138, 30, .16);
	--mcp-2029-vidrio: #FFFFFF;
	--mcp-2029-sombra: 0 18px 40px -22px rgba(60, 25, 100, .45);
	--mcp-2029-velo: rgba(29, 19, 48, .42);

	--mcp-fondo: var(--mcp-2029-bg);
	--mcp-fondo-alterno: #ECE5F5;
	--mcp-superficie: #FFFFFF;
	--mcp-superficie-elevada: #FFFFFF;
	--mcp-borde: var(--mcp-2029-linea);
	--mcp-borde-control: #9C83C0;          /* 3.4:1 sobre blanco (WCAG 1.4.11) */
	--mcp-texto: #1D1330;
	--mcp-texto-secundario: #685C7E;       /* 5.6:1 sobre #F6F3FA */
	--mcp-texto-destacado: var(--mcp-2029-marca);
	--mcp-primario: var(--mcp-2029-marca);
	--mcp-primario-hover: #4C2273;
	--mcp-primario-texto: var(--mcp-2029-marca);
	--mcp-sobre-primario: #FFFFFF;
	--mcp-acento: #F28A1E;
	--mcp-sobre-acento: #1F1000;
	--mcp-acento-texto: #A34C00;           /* 5.3:1 sobre #F6F3FA */
	--mcp-header-fondo: var(--mcp-2029-marca);
	--mcp-tabbar-fondo: #FFFFFF;
	--mcp-tabbar-texto: #685C7E;
	--mcp-tabbar-activa-fondo: #F28A1E;
	--mcp-tabbar-activa-texto: #1F1000;
	--mcp-error: #C9343A;
	--mcp-exito: #178A55;
	--mcp-foco: var(--mcp-2029-marca);
	--mcp-velo: var(--mcp-2029-velo);
	--mcp-esqueleto: #F1EBF8;
	--mcp-esqueleto-brillo: #FFFFFF;
	--mcp-marca-fondo: var(--mcp-2029-marca);
}

.mcp-2029.mcp-tema-oscuro {
	--mcp-2029-bg: #100A1A;
	--mcp-2029-superficie-2: #261A3B;
	--mcp-2029-linea: #382A52;
	--mcp-2029-marca: #8A4FCC;
	--mcp-2029-marca-2: #A46BE0;
	--mcp-2029-acento-suave: rgba(255, 154, 60, .17);
	--mcp-2029-vidrio: #1B122B;
	--mcp-2029-sombra: 0 18px 40px -20px rgba(0, 0, 0, .8);
	--mcp-2029-velo: rgba(0, 0, 0, .6);

	--mcp-fondo: var(--mcp-2029-bg);
	--mcp-fondo-alterno: #0A0611;
	--mcp-superficie: #1B122B;
	--mcp-superficie-elevada: #261A3B;
	--mcp-borde: var(--mcp-2029-linea);
	--mcp-borde-control: #8F72B8;
	--mcp-texto: #F4EFFB;
	--mcp-texto-secundario: #ADA1C4;
	--mcp-texto-destacado: #FFB46B;
	--mcp-primario: var(--mcp-2029-marca); /* como fondo de botón: blanco encima 5.2:1 */
	--mcp-primario-hover: #7A3DB5;
	--mcp-primario-texto: var(--mcp-2029-marca-2);
	--mcp-sobre-primario: #FFFFFF;
	--mcp-acento: #FF9A3C;
	--mcp-sobre-acento: #1F1000;
	--mcp-acento-texto: #FFB46B;
	--mcp-header-fondo: #1B122B;
	--mcp-tabbar-fondo: #1B122B;
	--mcp-tabbar-texto: #ADA1C4;
	--mcp-tabbar-activa-fondo: #FF9A3C;
	--mcp-tabbar-activa-texto: #1F1000;
	--mcp-error: #FF6B70;
	--mcp-exito: #3DD68C;
	--mcp-foco: #FF9A3C;
	--mcp-velo: var(--mcp-2029-velo);
	--mcp-esqueleto: #261A3B;
	--mcp-esqueleto-brillo: #382A52;
	--mcp-marca-fondo: #100A1A;
}

/* ── 2. Tipografía ─────────────────────────────────────────────────────────────────────────── */
.mcp-2029.mcp-2029-fuente-outfit {
	--mcp-fuente: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mcp-2029-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mcp-2029.mcp-2029-fuente-poppins { --mcp-fuente: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mcp-2029-display: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mcp-2029.mcp-2029-fuente-montserrat { --mcp-fuente: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mcp-2029-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.mcp-2029.mcp-2029-fuente-manrope { --mcp-fuente: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mcp-2029-display: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* Tamaño general (todo está en rem): se ajusta la raíz. Los campos quedan en 16 px exactos. */
:root:has(body.mcp-2029-tam-fino) { font-size: 93.75%; }
:root:has(body.mcp-2029-tam-grande) { font-size: 106.25%; }
.mcp-2029 input.mcp-control,
.mcp-2029 select.mcp-control,
.mcp-2029 textarea.mcp-control { font-size: 16px; }
.mcp-2029 h1,
.mcp-2029 h2,
.mcp-2029 h3 { font-family: var(--mcp-2029-display); text-wrap: balance; }
.mcp-2029.mcp-pantalla-completa { background: var(--mcp-fondo); }

/* ── Encabezado de marca y barra inferior (toda la app; el recorrido de compra los ajusta) ─── */
.mcp-2029 .mcp-header {
	background: linear-gradient(160deg, var(--mcp-2029-marca-2), var(--mcp-primario));
	border-radius: 0 0 28px 28px;
	box-shadow: var(--mcp-2029-sombra);
	padding-left: var(--mcp-esp-3);
	padding-right: var(--mcp-esp-3);
}
.mcp-2029.mcp-tema-oscuro .mcp-header { background: linear-gradient(160deg, #2A1A45, #1B122B); border-bottom: 1px solid var(--mcp-borde); }
.mcp-2029 .mcp-header-boton { border-radius: 14px; }
.mcp-2029 .mcp-header-boton:hover { background: rgba(255, 255, 255, .14); }
.mcp-2029 .mcp-idioma { padding: 3px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.mcp-2029 .mcp-idioma-opcion { padding: 0 10px; font-size: .75rem; }
.mcp-2029 .mcp-idioma-opcion.es-activa { background: #FFFFFF; color: var(--mcp-primario); }
.mcp-2029 .mcp-header .mcp-pwa-boton { width: 40px; height: 40px; min-width: var(--mcp-tactil-min); min-height: var(--mcp-tactil-min); border-radius: 13px; background: var(--mcp-acento) content-box; padding: 2px; }
.mcp-2029 .mcp-header .mcp-2029-luces { flex: 0 0 calc(100% + 2 * var(--mcp-esp-3)); order: 10; margin: 6px calc(-1 * var(--mcp-esp-3)) -6px; }
.mcp-2029 .mcp-tabbar {
	height: auto;
	padding: 6px;
	gap: 6px;
	border: 1px solid var(--mcp-borde);
	border-radius: 24px;
	background: var(--mcp-2029-vidrio);
	box-shadow: var(--mcp-2029-sombra), 0 2px 0 rgba(255, 255, 255, .4) inset;
}
.mcp-2029 .mcp-tabbar-item { flex: 1 1 0; height: 50px; border-radius: 18px; font-weight: var(--mcp-peso-bold); font-size: .875rem; }
.mcp-2029 .mcp-tabbar-item.is-activa { box-shadow: 0 8px 18px -10px var(--mcp-acento); }
.mcp-2029 .mcp-tabbar-item:active { transform: scale(.96); }
.mcp-2029 .mcp-tabbar-item svg { width: 24px; height: 24px; flex: none; }

/* Cronómetro: píldora clara con el anillo que se vacía; roja y latiendo en los últimos minutos
   (el umbral y el latido son los de siempre, de mcp-front.js). Va en la base: también sale en
   la cartelera y el perfil cuando hay una compra en curso. */
.mcp-2029 .mcp-cronometro-ficha {
	gap: 8px;
	padding: 4px 12px 4px 6px;
	background: var(--mcp-2029-acento-suave);
	color: var(--mcp-acento-texto);
	font-weight: var(--mcp-peso-bold);
	border-color: transparent;
}
.mcp-2029 .mcp-cronometro-anillo { width: 22px; height: 22px; }
.mcp-2029 .mcp-cronometro.is-urgente .mcp-cronometro-ficha { animation: mcp-2029-late 1s ease-in-out infinite; }
@keyframes mcp-2029-late { 50% { transform: scale(1.06); } }

/* Punto naranja en la pestaña Perfil (boleto nuevo sin ver). */
.mcp-2029-punto {
	position: absolute;
	top: 9px;
	right: calc(50% - 38px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mcp-acento);
	box-shadow: 0 0 0 2px var(--mcp-2029-vidrio);
	animation: mcp-2029-punto 1.6s ease-in-out infinite;
}
.mcp-2029 .mcp-tabbar-item { position: relative; }
@keyframes mcp-2029-punto { 50% { transform: scale(1.35); opacity: .65; } }


/* Piezas de texto compartidas por las hojas y las pantallas (compra, perfil). */
.mcp-2029-acciones-columna { flex-direction: column; }
.mcp-2029-frase { margin: 0; font-size: 1.0625rem; line-height: 1.4; font-weight: var(--mcp-peso-semi); }
.mcp-2029-nota { margin: 0; font-size: .8125rem; color: var(--mcp-texto-secundario); }
.mcp-2029-nota--acento {
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--mcp-2029-acento-suave);
	color: var(--mcp-acento-texto);
	font-weight: var(--mcp-peso-semi);
}

/* ── 3. Hoja que sube desde abajo (siempre, en todos los tamaños) ──────────────────────────── */
.mcp-2029 .mcp-modal,
.mcp-2029 .mcp-modal--hoja {
	width: 100%;
	max-width: var(--mcp-ancho-app);
	max-height: 92vh;
	max-height: 92dvh;
	margin: auto auto 0;
	border-radius: var(--mcp-radio-2xl) var(--mcp-radio-2xl) 0 0;
	border-top: 1px solid var(--mcp-borde);
	background: var(--mcp-superficie);
	box-shadow: 0 -24px 60px -18px rgba(0, 0, 0, .45);
	padding-bottom: env(safe-area-inset-bottom);
	overflow: hidden;
	will-change: transform;
}
.mcp-2029 .mcp-modal::backdrop { background: var(--mcp-velo); }
.mcp-2029 .mcp-modal[open] { animation: mcp-2029-hoja-sube .62s var(--mcp-2029-spring); }
.mcp-2029 .mcp-modal[open]::backdrop { animation: mcp-2029-aparece .35s ease; }
.mcp-2029 .mcp-modal.mcp-2029-saliendo { animation: mcp-2029-hoja-baja .28s cubic-bezier(.5, 0, .75, 0) forwards; }
.mcp-2029 .mcp-modal-caja { position: relative; }
/* Luz de proyector: un instante cálido en la parte de arriba al abrir. */
.mcp-2029 .mcp-modal-caja::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -40px;
	width: 140%;
	height: 260px;
	transform: translateX(-50%);
	background: radial-gradient(50% 70% at 50% 0, var(--mcp-2029-luz), transparent 70%);
	pointer-events: none;
	opacity: 0;
}
.mcp-2029 .mcp-modal[open] .mcp-modal-caja::before { animation: mcp-2029-proyector 1.4s ease-out; }
/* Agarradera con perforaciones de película (la inserta mcp-2029.js). */
.mcp-2029-agarradera {
	flex: none;
	position: relative;
	display: flex;
	justify-content: center;
	padding: 12px 0 6px;
	touch-action: none;
	cursor: grab;
}
.mcp-2029-agarradera::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 7px;
	background: radial-gradient(circle at 50% 50%, var(--mcp-borde) 0 2.2px, transparent 2.6px) 0 0 / 14px 7px repeat-x;
	opacity: .9;
}
.mcp-2029 .mcp-modal[open] .mcp-2029-agarradera::before { animation: mcp-2029-rollo 1s var(--mcp-2029-ease); }
.mcp-2029-agarradera i { width: 44px; height: 5px; border-radius: 5px; background: var(--mcp-borde-control); opacity: .55; }
.mcp-2029 .mcp-modal-cabecera { padding: 2px var(--mcp-esp-2) var(--mcp-esp-3) 18px; }
.mcp-2029 .mcp-modal-titulo { font-size: 1.3125rem; }
.mcp-2029 .mcp-modal-cerrar { color: var(--mcp-texto-secundario); background: var(--mcp-2029-superficie-2); width: 38px; height: 38px; min-width: var(--mcp-tactil-min); min-height: var(--mcp-tactil-min); background-clip: content-box; padding: 3px; }
.mcp-2029 .mcp-modal-cuerpo { padding: 4px 18px 26px; overscroll-behavior: contain; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > * { animation: mcp-2029-sube .55s var(--mcp-2029-ease) both; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(1) { animation-delay: .08s; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(2) { animation-delay: .13s; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(3) { animation-delay: .18s; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(4) { animation-delay: .23s; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(5) { animation-delay: .28s; }
.mcp-2029 .mcp-modal[open] .mcp-modal-cuerpo > *:nth-child(6) { animation-delay: .33s; }
.mcp-2029 .mcp-modal-acciones { padding: 0 18px 22px; }
/* La pantalla de atrás se hunde mientras hay una hoja abierta (clase puesta por mcp-2029.js). */
.mcp-2029 .mcp-app { transform-origin: 50% 0; transition: transform .55s var(--mcp-2029-spring), border-radius .55s var(--mcp-2029-spring), filter .3s ease; }
.mcp-2029 .mcp-app.mcp-2029-hundida { transform: translateY(14px) scale(.93); border-radius: 26px; filter: brightness(.82) saturate(.9); overflow: hidden; }
.mcp-2029 .mcp-app.mcp-2029-hundida-sale { transition-duration: .3s; transition-timing-function: ease-in; }

/* ── 4. Isla de avisos ─────────────────────────────────────────────────────────────────────── */
.mcp-2029-isla {
	position: fixed;
	top: calc(10px + env(safe-area-inset-top));
	left: 50%;
	z-index: 1000;
	transform: translateX(-50%);
	max-width: min(calc(100% - 32px), 408px);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 16px 10px 10px;
	border: 0;
	border-radius: var(--mcp-radio-pill);
	background: var(--mcp-2029-isla);
	color: #FFFFFF;
	font-size: .8125rem;
	font-weight: var(--mcp-peso-bold);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
	animation: mcp-2029-isla .5s var(--mcp-2029-spring);
}
.mcp-2029-isla::before {
	content: "✓";
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mcp-acento);
	color: var(--mcp-sobre-acento);
}
.mcp-2029-isla.mcp-2029-isla--sale { animation: mcp-2029-isla-sale .3s ease-in forwards; }
.mcp-2029 .mcp-mensaje--error[data-mcp-flash] { animation: mcp-2029-sacude .35s; }

/* ── 5. Guía de foco (opción A, elegida por Deiby): un destello de luz cruza el botón una vez
   y el botón se levanta apenas. Va como capa de fondo, nunca encima del texto, y no usa ::after
   (varios botones ya lo usan). ──────────────────────────────────────────────────────────────── */
.mcp-2029-guia { animation: mcp-2029-guia 1.1s var(--mcp-2029-ease) 1 both !important; }
/* El destello va en su propia capa (la pone mcp-2029.js): así no pisa el fondo del botón. */
.mcp-2029-destello {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
.mcp-2029-destello::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 48%, rgba(255, 230, 190, .55) 52%, transparent 65%) 130% 0 / 250% 100% no-repeat;
	animation: mcp-2029-destello 1.1s var(--mcp-2029-ease) both;
}

/* Lo que esta capa esconde con `hidden` se esconde de verdad (el display de las cajas le ganaba). */
.mcp-2029 [hidden],
.mcp-2029 .mcp-2029-oculto { display: none !important; }

/* ── Campos de formulario (toda la app): altos, redondeados, con halo naranja al enfocar ──── */
.mcp-2029 .mcp-campo { gap: 6px; }
.mcp-2029 .mcp-campo-etiqueta { font-size: .8125rem; font-weight: var(--mcp-peso-bold); }
.mcp-2029 .mcp-control {
	min-height: 50px;
	border: 1.5px solid var(--mcp-borde);
	border-radius: 16px;
	background: var(--mcp-2029-superficie-2);
	padding: 0 16px;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.mcp-2029 .mcp-control:focus { border-color: var(--mcp-2029-marca-2); box-shadow: 0 0 0 4px var(--mcp-2029-acento-suave); background: var(--mcp-superficie); }
.mcp-2029 .mcp-campo.is-error .mcp-control { border-color: var(--mcp-error); animation: mcp-2029-sacude .35s; }
.mcp-2029 .mcp-control-accion { border-radius: 12px; }
/* El botón principal de cualquier formulario, con la forma del prototipo. */
.mcp-2029 .mcp-form .mcp-boton--primario,
.mcp-2029 .mcp-modal .mcp-boton--primario {
	min-height: 48px;
	border: 0;
	border-radius: 16px;
	background: linear-gradient(180deg, var(--mcp-2029-marca-2), var(--mcp-primario));
	color: #FFFFFF;
	box-shadow: 0 14px 30px -14px var(--mcp-primario), inset 0 1px 0 rgba(255, 255, 255, .35);
	font-family: var(--mcp-2029-display);
	font-size: 1.0625rem;
}
.mcp-2029 .mcp-modal .mcp-boton--secundario { min-height: 48px; border-radius: 16px; border-width: 1.5px; font-size: 1rem; }
.mcp-2029 .mcp-form .mcp-boton { width: 100%; }

/* ── 6. Componentes listos para las pantallas ──────────────────────────────────────────────── */
/* Interruptor claro/oscuro. Es un enlace (el cambio de tema lo hace el servidor), vestido de switch. */
.mcp-2029-switch {
	position: relative;
	display: inline-block;
	flex: none;
	width: 56px;
	height: 32px;
	border-radius: var(--mcp-radio-pill);
	border: 1px solid var(--mcp-borde-control);
	background: var(--mcp-2029-superficie-2);
	vertical-align: middle;
}
.mcp-2029-switch-perilla {
	position: absolute;
	top: 3px;
	left: 3px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #FFFFFF; /* blanca en los dos temas, como el prototipo: en oscuro se perdía */
	color: var(--mcp-acento-texto);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	transition: transform .4s var(--mcp-2029-spring);
}
.mcp-2029-switch[aria-checked="false"] .mcp-2029-switch-perilla { transform: translateX(24px); color: var(--mcp-primario-texto); }
.mcp-2029-switch:active .mcp-2029-switch-perilla { width: 28px; }
/* Luces de marquesina: solo con el ajuste encendido. */
.mcp-2029-luces { display: none; }
.mcp-2029-marquesina .mcp-2029-luces {
	display: block;
	height: 10px;
	background:
		radial-gradient(circle, #FFE3A8 0 2.6px, transparent 3.2px) 0 50% / 16px 10px repeat-x,
		radial-gradient(circle, rgba(255, 227, 168, .25) 0 2.6px, transparent 3.2px) 8px 50% / 16px 10px repeat-x;
	filter: drop-shadow(0 0 3px rgba(255, 200, 110, .8));
	animation: mcp-2029-luces 1.2s steps(2) infinite;
}

/* ── Carga: "Pochito" (balde de palomitas) y su carrete, solo CSS, con una frase de cine ─────
   Se dibuja dentro del loader de siempre (MCP_Template::loader_html); el JS lo agrega y cambia la
   frase. El logo se queda, más pequeño; el giro y el "Cargando" fijo se esconden. */
.mcp-2029 .mcp-loader { gap: 18px; }
.mcp-2029 .mcp-loader .mcp-loader-logo { width: 46%; max-width: 170px; }
.mcp-2029 .mcp-loader .mcp-loader-spinner,
.mcp-2029 .mcp-loader .mcp-loader-texto { display: none; }
.mcp-2029-escena { position: relative; display: flex; align-items: flex-end; gap: 14px; height: 120px; }
.mcp-2029-muneco { position: relative; width: 74px; height: 112px; animation: mcp-2029-rebota 1.1s cubic-bezier(.3, 0, .3, 1) infinite; transform-origin: 50% 100%; }
/* El balde: rayas rojas y blancas, más angosto abajo. */
.mcp-2029-muneco-balde {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 70px;
	clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
	background: repeating-linear-gradient(90deg, #E8453C 0 11px, #FFF7EE 11px 22px);
	border-radius: 0 0 10px 10px;
}
.mcp-2029-muneco-balde::before { /* el borde de arriba del balde */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 8px;
	background: #C7302A;
}
/* La cara: un parche claro con ojos que parpadean, cachetes y sonrisa. */
.mcp-2029-muneco-cara {
	position: absolute;
	left: 50%;
	top: 22px;
	width: 42px;
	height: 30px;
	transform: translateX(-50%);
	border-radius: 14px;
	background: #FFF7EE;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.mcp-2029-muneco-cara b { position: absolute; top: 8px; width: 6px; height: 8px; border-radius: 50%; background: #1D1330; animation: mcp-2029-parpadea 3.2s infinite; }
.mcp-2029-muneco-cara b:nth-child(1) { left: 10px; }
.mcp-2029-muneco-cara b:nth-child(2) { right: 10px; }
.mcp-2029-muneco-cara em { position: absolute; left: 50%; bottom: 5px; width: 12px; height: 6px; transform: translateX(-50%); border: 2px solid #1D1330; border-top: 0; border-radius: 0 0 10px 10px; }
.mcp-2029-muneco-cara::before,
.mcp-2029-muneco-cara::after { content: ""; position: absolute; top: 17px; width: 7px; height: 4px; border-radius: 50%; background: rgba(232, 69, 60, .35); }
.mcp-2029-muneco-cara::before { left: 3px; }
.mcp-2029-muneco-cara::after { right: 3px; }
/* Las palomitas de arriba y la que salta. */
.mcp-2029-muneco-maiz { position: absolute; left: 2px; right: 2px; bottom: 62px; height: 30px; }
.mcp-2029-muneco-maiz i,
.mcp-2029-muneco-salta {
	position: absolute;
	width: 20px;
	height: 18px;
	border-radius: 48% 52% 45% 55%;
	background: radial-gradient(circle at 35% 35%, #FFFFFF, #FFF1C9 55%, #F2C76B);
	box-shadow: inset -2px -2px 0 rgba(214, 150, 40, .35);
}
.mcp-2029-muneco-maiz i:nth-child(1) { left: 0; bottom: 0; }
.mcp-2029-muneco-maiz i:nth-child(2) { left: 14px; bottom: 8px; }
.mcp-2029-muneco-maiz i:nth-child(3) { left: 28px; bottom: 2px; animation: mcp-2029-tiembla .9s infinite; }
.mcp-2029-muneco-maiz i:nth-child(4) { left: 40px; bottom: 10px; }
.mcp-2029-muneco-maiz i:nth-child(5) { right: 0; bottom: 0; }
.mcp-2029-muneco-salta { left: 30px; bottom: 80px; opacity: 0; animation: mcp-2029-salta 1.1s cubic-bezier(.2, .8, .4, 1) infinite; }
.mcp-2029-muneco-sombra { position: absolute; left: 10px; right: 10px; bottom: -8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .25); filter: blur(2px); animation: mcp-2029-sombra 1.1s cubic-bezier(.3, 0, .3, 1) infinite; }
/* El carrete amigo: gira con calma, con ojitos. */
.mcp-2029-carrete {
	position: relative;
	width: 46px;
	height: 46px;
	margin-bottom: 6px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, #2A1240 0 5px, transparent 5.5px),
		radial-gradient(circle at 50% 20%, #2A1240 0 6px, transparent 6.5px),
		radial-gradient(circle at 80% 58%, #2A1240 0 6px, transparent 6.5px),
		radial-gradient(circle at 20% 58%, #2A1240 0 6px, transparent 6.5px),
		radial-gradient(circle at 50% 50%, #B9A6D3 0 21px, #8F72B8 21.5px);
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
	animation: mcp-2029-gira 2.4s linear infinite;
}
.mcp-2029-carrete::after { /* la cinta que cuelga */
	content: "";
	position: absolute;
	right: -18px;
	bottom: 4px;
	width: 22px;
	height: 6px;
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, #1D1330 0 4px, #4A3D61 4px 6px);
}
.mcp-2029-frase-carga {
	min-height: 2.6em;
	max-width: 17rem;
	margin: 0;
	padding: 0 16px;
	text-align: center;
	color: #FFFFFF;
	font-family: var(--mcp-2029-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	animation: mcp-2029-sube .4s var(--mcp-2029-ease);
}
/* ══ v0.36.10 · Arranque de la app instalada: UNA pantalla fija que empalma con la de Android ═══
   Antes: pantalla de Android → destello lila vacío (el 3-2-1 lo armaba el JS, que llega al final)
   → 3-2-1 con esqueleto. Ahora, desde el primer pintado (solo CSS + el HTML del servidor): el
   mismo morado del manifiesto (#672E86, igual en claro y oscuro), el logo animado de Multicines al
   centro y, cuando llega el JS, una rayita de progreso y "PREPARANDO LA CARTELERA". */
.mcp-2029-arranque { display: none; }
.mcp-arranque .mcp-2029 .mcp-loader {
	justify-content: center;
	gap: 28px;
	padding: 0 24px;
	background: radial-gradient(120% 70% at 50% 45%, #7A3A9C 0, #672E86 55%, #5A2876 100%);
}
.mcp-arranque .mcp-2029 .mcp-loader > :not(.mcp-loader-logo):not(.mcp-2029-arranque) { display: none; }
.mcp-arranque .mcp-2029 .mcp-loader .mcp-loader-logo { width: 64%; max-width: 260px; animation: mcp-2029-aparece-logo .6s cubic-bezier(.2, .8, .2, 1) both; }
.mcp-arranque .mcp-2029 .mcp-2029-arranque { display: grid; justify-items: center; gap: 14px; width: min(260px, 72%); text-align: center; animation: mcp-2029-aparece .5s .15s ease both; }
.mcp-2029-arranque-barra { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.mcp-2029-arranque-barra::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, #F7A541, transparent); animation: mcp-2029-barra-viaja 1.1s cubic-bezier(.45, 0, .55, 1) infinite; }
.mcp-2029-arranque-texto { margin: 0; white-space: nowrap; color: rgba(255, 255, 255, .78); font-size: .6875rem; font-weight: var(--mcp-peso-bold); letter-spacing: .18em; text-transform: uppercase; }
@keyframes mcp-2029-barra-viaja { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes mcp-2029-aparece-logo { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.mcp-2029-arranque-barra::after { animation: none; width: 100%; background: rgba(255, 255, 255, .5); }
	.mcp-arranque .mcp-2029 .mcp-loader .mcp-loader-logo, .mcp-arranque .mcp-2029 .mcp-2029-arranque { animation: none; }
}

@keyframes mcp-2029-rebota { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .92); } 45% { transform: translateY(-14px) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1.04, .96); } }
@keyframes mcp-2029-sombra { 0%, 100% { transform: scale(1); opacity: .9; } 45% { transform: scale(.7); opacity: .45; } }
@keyframes mcp-2029-salta { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(-16px, -36px) rotate(-160deg); opacity: 1; } 100% { transform: translate(-30px, 6px) rotate(-320deg); opacity: 0; } }
@keyframes mcp-2029-tiembla { 50% { transform: translateY(-3px) rotate(8deg); } }
@keyframes mcp-2029-parpadea { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ── Keyframes (todos con prefijo) ─────────────────────────────────────────────────────────── */
@keyframes mcp-2029-hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mcp-2029-hoja-baja { to { transform: translateY(100%); } }
@keyframes mcp-2029-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcp-2029-proyector { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mcp-2029-rollo { from { background-position: -140px 0; } to { background-position: 0 0; } }
@keyframes mcp-2029-sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mcp-2029-isla { from { opacity: 0; transform: translate(-50%, -30px) scale(.7); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes mcp-2029-isla-sale { to { opacity: 0; transform: translate(-50%, -20px) scale(.9); } }
@keyframes mcp-2029-guia { 40% { transform: translateY(-2px); } }
@keyframes mcp-2029-destello { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes mcp-2029-sacude { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes mcp-2029-gira { to { transform: rotate(360deg); } }
@keyframes mcp-2029-luces { to { background-position: 16px 50%, 24px 50%; } }

/* ── Computadora (3.6): la app centrada en un marco, como el prototipo ────────────────────── */
@media (min-width: 56em) {
	.mcp-2029.mcp-pantalla-completa {
		background:
			radial-gradient(60% 50% at 20% 10%, rgba(122, 61, 181, .14), transparent 70%),
			radial-gradient(50% 40% at 85% 90%, rgba(242, 138, 30, .12), transparent 70%),
			var(--mcp-fondo-alterno);
	}
	.mcp-2029 .mcp-app {
		margin: 28px auto;
		min-height: calc(100vh - 56px);
		min-height: calc(100dvh - 56px);
		border: 1px solid var(--mcp-borde);
		border-radius: 36px;
		overflow: clip;
		box-shadow: 0 40px 90px -40px rgba(94, 43, 140, .55);
	}
	.mcp-2029 .mcp-tabbar { bottom: 44px; }
	.mcp-2029 .mcp-header { border-radius: 0 0 28px 28px; }
}

/* ── 7. Movimiento reducido y alto contraste ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mcp-2029 *,
	.mcp-2029 *::before,
	.mcp-2029 *::after,
	.mcp-2029 .mcp-modal::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.mcp-2029 .mcp-app.mcp-2029-hundida { transform: none; border-radius: 0; filter: brightness(.82); }
	.mcp-2029-marquesina .mcp-2029-luces { animation: none; }
}
@media (forced-colors: active) {
	.mcp-2029 .mcp-modal { border: 1px solid CanvasText; }
	.mcp-2029-isla { border: 1px solid CanvasText; }
	.mcp-2029-switch { border-color: CanvasText; }
}

/* ══ v0.35.0 · Controles del encabezado parejos y compactos (pedido de Deiby) ═══════════════════
   Antes cada uno tenía su alto (idioma 50 px, instalar 44 px con un borde de 2 px, Salir 44 px) y
   en el recorrido se apretaban contra el título: el "ES" activo se salía de su píldora. Ahora los
   tres miden 38 px, con la misma forma; el área táctil sigue siendo cómoda (WCAG 2.5.8 pide 24). */
.mcp-2029 .mcp-header { column-gap: 8px; }
.mcp-2029 .mcp-idioma { height: 38px; padding: 3px; gap: 2px; flex: none; box-sizing: border-box; }
.mcp-2029 .mcp-idioma-opcion { min-height: 0; height: 100%; min-width: 34px; padding: 0 9px; border-radius: 999px; font-size: .75rem; line-height: 1; }
.mcp-2029 .mcp-header .mcp-pwa-boton {
	width: 38px;
	height: 38px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 12px;
	background: var(--mcp-acento);
	box-shadow: 0 6px 14px -8px rgba(242, 138, 30, .9);
	animation: none;
}
.mcp-2029 .mcp-header .mcp-pwa-boton svg { width: 20px; height: 20px; }
.mcp-2029 .mcp-header .mcp-header-boton--texto { height: 38px; min-height: 0; padding: 0 12px; border-radius: 12px; font-size: .8125rem; }

/* El cronómetro sobre la banda morada: píldora blanca sólida (el naranja translúcido sobre el
   morado no se leía). En el recorrido, el encabezado es claro y se queda como estaba. */
.mcp-2029 .mcp-header .mcp-cronometro:not(.is-urgente):not(.is-vencido) .mcp-cronometro-ficha {
	background: #FFFFFF;
	color: #A34C00;
	box-shadow: 0 6px 16px -10px rgba(20, 5, 40, .6);
}
.mcp-2029 :is(.mcp-pantalla-compra-entradas, .mcp-pantalla-compra-asientos, .mcp-pantalla-compra-resumen, .mcp-pantalla-compra-pago) .mcp-header .mcp-cronometro:not(.is-urgente):not(.is-vencido) .mcp-cronometro-ficha {
	background: var(--mcp-2029-acento-suave);
	color: var(--mcp-acento-texto);
	box-shadow: none;
}

/* Teléfonos angostos: un poco más chicos para que el título respire. */
@media (max-width: 389px) {
	.mcp-2029 .mcp-header { column-gap: 6px; }
	.mcp-2029 .mcp-idioma { height: 34px; }
	.mcp-2029 .mcp-idioma-opcion { min-width: 30px; padding: 0 7px; }
	.mcp-2029 .mcp-header .mcp-pwa-boton { width: 34px; height: 34px; border-radius: 11px; }
	.mcp-2029 .mcp-header .mcp-header-boton--texto { height: 34px; padding: 0 10px; }
}


/* ══ v0.36.0 · Aviso "Instale la app" en iPhone: corto, centrado, con el ícono y una flecha
   que baja hacia el botón Compartir de Safari (mientras la app llega a las tiendas). ══════════ */
.mcp-2029 .mcp-2029-hoja-instalar .mcp-modal-caja { text-align: center; }
.mcp-2029 .mcp-2029-hoja-instalar .mcp-modal-cabecera { justify-content: center; position: relative; }
.mcp-2029 .mcp-2029-hoja-instalar .mcp-modal-titulo { font-family: var(--mcp-2029-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.mcp-2029 .mcp-2029-hoja-instalar .mcp-modal-cerrar { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.mcp-2029-instalar-icono {
	display: block;
	width: 72px;
	height: 72px;
	margin: 4px auto 14px;
	border-radius: 18px;
	box-shadow: 0 16px 30px -14px rgba(60, 25, 100, .7), 0 0 0 1px rgba(0, 0, 0, .05);
	animation: mcp-2029-flota-suave 3.2s ease-in-out infinite;
}
.mcp-2029-instalar-texto { margin: 0 auto 4px; max-width: 30ch; font-size: 1rem; line-height: 1.55; color: var(--mcp-texto-secundario); }
/* Tarjeta flotante (como el ejemplo de Deiby), con espacio abajo para la flecha. */
.mcp-2029 .mcp-modal.mcp-2029-hoja-instalar {
	width: calc(100% - 32px);
	max-width: 420px;
	margin: auto auto calc(76px + env(safe-area-inset-bottom));
	padding-bottom: 0;
	border: 1px solid var(--mcp-borde);
	border-radius: 28px;
	box-shadow: 0 30px 60px -20px rgba(20, 5, 40, .55);
	overflow: visible;
}
.mcp-2029 .mcp-2029-hoja-instalar .mcp-modal-caja { padding-top: 22px; }
.mcp-2029 .mcp-2029-hoja-instalar .mcp-2029-agarradera { display: none; }
.mcp-2029-instalar-flecha {
	position: absolute;
	left: 50%;
	top: calc(100% + 16px);
	width: 44px;
	height: 44px;
	margin-left: -22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mcp-superficie);
	color: #0A7AFF;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
	animation: mcp-2029-señala 1.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
.mcp-2029-instalar-flecha svg { width: 22px; height: 22px; }
@keyframes mcp-2029-señala { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(4px); } }
@keyframes mcp-2029-flota-suave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* v0.35.2 · El interruptor claro/oscuro del encabezado con el mismo alto que ES/EN e instalar. */
.mcp-2029 .mcp-header .mcp-2029-switch--marca { box-sizing: border-box; width: 64px; height: 38px; }
.mcp-2029 .mcp-header .mcp-2029-switch--marca .mcp-2029-switch-perilla { top: 3px; left: 3px; width: 30px; height: 30px; }
.mcp-2029 .mcp-header .mcp-2029-switch--marca[aria-checked="false"] .mcp-2029-switch-perilla { transform: translateX(26px); }
@media (max-width: 389px) {
	.mcp-2029 .mcp-header .mcp-2029-switch--marca { width: 56px; height: 34px; }
	.mcp-2029 .mcp-header .mcp-2029-switch--marca .mcp-2029-switch-perilla { width: 26px; height: 26px; }
	.mcp-2029 .mcp-header .mcp-2029-switch--marca[aria-checked="false"] .mcp-2029-switch-perilla { transform: translateX(22px); }
}

/* ══ v0.36.0 · La bolita de instalar: el logo de la app, redondo, palpitando suave ════════════
   Solo se ve cuando la app se puede instalar (mcp-front.js lo decide): el latido nunca le sale a
   quien ya la tiene. Dos ondas que se abren y se desvanecen, sin parpadeos (WCAG 2.3.1). */
.mcp-2029 .mcp-header .mcp-pwa-boton.mcp-2029-bolita {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 6px 16px -6px rgba(242, 138, 30, .85), 0 0 0 2px rgba(255, 255, 255, .9);
	overflow: visible;
	animation: mcp-2029-late-suave 2.4s ease-in-out infinite;
}
.mcp-2029-bolita img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mcp-2029-bolita::before,
.mcp-2029-bolita::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--mcp-acento);
	opacity: 0;
	pointer-events: none;
	animation: mcp-2029-onda 2.4s cubic-bezier(.2, .6, .35, 1) infinite;
}
.mcp-2029-bolita::after { animation-delay: 1.2s; }
@keyframes mcp-2029-onda { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes mcp-2029-late-suave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (max-width: 389px) { .mcp-2029 .mcp-header .mcp-pwa-boton.mcp-2029-bolita { width: 36px; height: 36px; } }

/* ══ v0.36.0 · Movimiento: suave y con intención (solo si la persona no pidió menos movimiento) ═ */
@media (prefers-reduced-motion: no-preference) {
	/* Al llegar a una pantalla, el contenido entra en cascada, una pieza tras otra. */
	.mcp-2029 .mcp-main > * { animation: mcp-2029-entra .55s cubic-bezier(.2, .8, .2, 1) both; }
	.mcp-2029 .mcp-main > :nth-child(2) { animation-delay: .05s; }
	.mcp-2029 .mcp-main > :nth-child(3) { animation-delay: .1s; }
	.mcp-2029 .mcp-main > :nth-child(4) { animation-delay: .15s; }
	.mcp-2029 .mcp-main > :nth-child(5) { animation-delay: .2s; }
	.mcp-2029 .mcp-main > :nth-child(n+6) { animation-delay: .25s; }
	/* Botones, tarjetas y chips responden al dedo con un leve hundimiento elástico. */
	.mcp-2029 :is(.mcp-boton, .mcp-header-boton, .mcp-tabbar-item, .mcp-dia-enlace, .mcp-horario-boton, .mcp-pelicula, .mcp-2029-cambiar, .mcp-idioma-opcion) {
		transition: transform .35s var(--mcp-2029-spring), box-shadow .3s ease, background-color .25s ease, color .25s ease, filter .25s ease;
	}
	.mcp-2029 :is(.mcp-boton, .mcp-header-boton, .mcp-tabbar-item, .mcp-dia-enlace, .mcp-horario-boton, .mcp-idioma-opcion):active { transform: scale(.96); transition-duration: .08s; }
	/* La TARJETA se hunde, nunca el enlace: el enlace estira su ::after sobre toda la tarjeta, y si
	   él mismo se transforma pasa a ser el contenedor de ese ::after, que se encoge al título justo
	   al tocar y el toque sobre el póster se pierde (v0.36.0 → corregido en v0.36.2). */
	.mcp-2029 .mcp-pelicula:has(.mcp-pelicula-enlace:active) { transform: scale(.98); transition-duration: .08s; }
}
@keyframes mcp-2029-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.mcp-2029-bolita, .mcp-2029-bolita::before, .mcp-2029-bolita::after,
	.mcp-2029-instalar-icono, .mcp-2029-instalar-flecha { animation: none; }
}

/* Nada (ni las ondas de la bolita) puede mover la página de lado. `clip` y no `hidden`: no rompe
   los encabezados y pies pegajosos. */
html:has(body.mcp-2029), body.mcp-2029 { overflow-x: clip; }

/* ══ v0.36.3 · Encabezado morado ordenado (Deiby: "se ve desacomodado") ════════════════════════
   Antes: 0 px arriba y 10 px a la derecha, así que la bolita quedaba pegada a la esquina redonda
   y sus ondas se salían; la flecha de volver medía 44 px y los demás controles 38; el cronómetro
   iba centrado debajo de un título alineado a la izquierda. Ahora: aire parejo, todos los
   controles de 38 px en la misma línea, y el cronómetro alineado con el título. */
.mcp-2029 .mcp-header:not(.mcp-2029-pro .mcp-header) { padding: calc(12px + env(safe-area-inset-top)) 14px 14px; column-gap: 8px; }
.mcp-2029 .mcp-header:not(.mcp-2029-pro .mcp-header) > a.mcp-header-boton:first-child:not(.mcp-header-boton--texto) {
	width: 38px;
	height: 38px;
	min-width: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
}
.mcp-2029 .mcp-header:not(.mcp-2029-pro .mcp-header) > a.mcp-header-boton:first-child:not(.mcp-header-boton--texto) svg { width: 20px; height: 20px; }
.mcp-2029 .mcp-header .mcp-header-titulo { font-family: var(--mcp-2029-display); font-weight: 800; letter-spacing: -.01em; }
/* El cronómetro, alineado con el título (debajo de él), no centrado en el aire. */
.mcp-2029 .mcp-header:not(.mcp-2029-pro .mcp-header) .mcp-cronometro--cabecera { text-align: left; padding-left: 46px; margin-top: 8px; }
/* Las ondas de la bolita, un poco más cortas: palpitan sin salirse del encabezado. */
@keyframes mcp-2029-onda { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.45); opacity: 0; } }

/* ══ v0.36.3 · Avisos informativos: una tarjeta amable, no un recuadro de formulario ═══════════ */
.mcp-2029 .mcp-mensaje--info {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 0;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(103, 46, 134, .10), rgba(242, 138, 30, .10));
	color: var(--mcp-texto);
	font-weight: var(--mcp-peso-semi);
	line-height: 1.45;
}
.mcp-2029 .mcp-mensaje--info::before {
	content: "✦";
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mcp-acento), #E0701A);
	color: #FFFFFF;
	font-size: .875rem;
	box-shadow: 0 6px 14px -8px rgba(242, 138, 30, .9);
}
.mcp-2029.mcp-tema-oscuro .mcp-mensaje--info { background: linear-gradient(135deg, rgba(181, 138, 224, .14), rgba(255, 154, 60, .10)); }

/* ══ v0.36.5 · Isla de avisos que da tiempo de leer ═══════════════════════════════════════════
   La tarjeta suave de avisos (.mcp-mensaje--info, 0.36.3) no debe ganarle a la isla. */
.mcp-2029 .mcp-2029-isla,
.mcp-2029 .mcp-mensaje--info.mcp-2029-isla,
.mcp-2029 .mcp-mensaje--exito.mcp-2029-isla {
	overflow: hidden;
	width: max-content;
	max-width: min(calc(100vw - 32px), 420px);
	padding: 12px 18px 14px 12px;
	border: 0;
	border-radius: 20px;
	background: var(--mcp-2029-isla);
	color: #FFFFFF;
	font-size: .875rem;
	line-height: 1.4;
	align-items: center;
	box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .6);
	-webkit-user-select: none;
	user-select: none;
	transition: translate .2s ease;
}
.mcp-2029 .mcp-mensaje--info.mcp-2029-isla::before,
.mcp-2029 .mcp-mensaje--exito.mcp-2029-isla::before {
	content: "✓";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mcp-acento);
	color: var(--mcp-sobre-acento);
	font-size: .8125rem;
	box-shadow: none;
}
/* La rayita que se va vaciando: lo que queda antes de que se vaya. */
.mcp-2029-isla-tiempo {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .55);
	transform-origin: left center;
	animation: mcp-2029-isla-tiempo var(--mcp-2029-isla-dura, 6000ms) linear forwards;
}
.mcp-2029-isla--quieta .mcp-2029-isla-tiempo { animation-play-state: paused; }
@keyframes mcp-2029-isla-tiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .mcp-2029-isla-tiempo { animation: none; opacity: .4; } }