/* ╔══════════════════════════════════════════════════════════╗
   ║  LA INTRO — las mismas seis pantallas, en cualquier tamaño ║
   ╚══════════════════════════════════════════════════════════╝

   Estas medidas estaban puestas a mano dentro de index.html y sólo servían
   para un móvil. En un portátil pasaba esto: el bloque de texto ocupaba los
   1440 px de ancho, así que la frase entera cabía en una línea de 36 px
   perdida en mitad de una pantalla enorme, el Tuad medía 104 px y el botón
   estaba a un palmo del borde inferior. No estaba roto: estaba desangelado,
   que en la primera pantalla que ve alguien es peor.

   Lo que cambia por tamaño es SÓLO la escala y el ancho de caja. Ni una
   palabra, ni un paso, ni un orden. */

.da-intro__escenario {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 26px 210px;
	pointer-events: none;
}

.da-intro__escena {
	position: absolute;
	left: 26px;
	right: 26px;
	margin: 0 auto;
	max-width: 34ch; /* la frase larga cae en 3 líneas, que es como se diseñó */
	text-align: center;
	color: #fffdf7;
	transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.da-intro__pre {
	font: 8px/1 var(--font-mono);
	letter-spacing: 0.12em;
	color: var(--da-accent);
}

.da-intro__big {
	margin-top: 16px;
	font-family: 'Poppins', sans-serif;
	font-weight: var(--fw-black);
	font-size: 36px;
	letter-spacing: -0.055em;
	line-height: 1.02;
	text-wrap: balance;
}

.da-intro__nota {
	margin-top: 14px;
	font-family: 'Gochi Hand', cursive;
	font-size: 19px;
	color: rgba(255, 255, 255, 0.6);
}

.da-intro__tuad {
	position: absolute;
	left: 50%;
	top: calc(66% - 108px);
	width: 104px;
	margin-left: -52px;
	z-index: 2;
}

.da-intro__pie {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: calc(56px + env(safe-area-inset-bottom));
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

.da-intro__cta {
	width: 100%;
	max-width: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: 16px;
	background: var(--da-accent);
	color: var(--da-accent-ink);
	font-size: 17px;
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	box-shadow: 0 4px 0 var(--da-accent-shadow);
	animation: latido 1.8s ease-in-out infinite;
}

.da-intro__nuevo {
	width: 100%;
	max-width: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.1);
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.72);
	font-size: 13.5px;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

/* ─────────── móvil pequeño (iPhone SE y compañía) ───────────
   A 360 px de ancho y 640 de alto, "de cuántos seáis sale cuántos planes
   monto" a 36 px se comía la pantalla y empujaba el botón fuera. */
@media (max-width: 380px), (max-height: 700px) {
	.da-intro__big {
		font-size: 30px;
	}

	.da-intro__escenario {
		padding-bottom: 190px;
	}

	.da-intro__tuad {
		width: 84px;
		margin-left: -42px;
		top: calc(66% - 92px);
	}
}

/* ─────────── tablet y ordenador ─────────── */
/* ⚠️ EL ANCHO VA EN PÍXELES, NO EN `ch`, Y AQUÍ ESTÁ EL PORQUÉ.
   La primera versión ponía `max-width: 15ch` para que la frase cayera en pocas
   líneas. Pero `ch` se mide contra el tamaño de letra DEL PROPIO elemento, y
   `.da-intro__escena` hereda 16 px — el que crece es el hijo. Resultado en un
   portátil: una caja de 135 px de ancho con letra de 72 px, o sea una palabra
   por línea y una columna de texto de 294 px de alto. Ridículo, y difícil de
   ver si sólo se mira el número.
   En píxeles el ancho es el que se pretende, y la frase larga de la escena 4
   ("de cuántos seáis sale cuántos planes monto") cae en dos líneas. */

/* ⚠️ EL `min-height` NO ES DECORATIVO — es el arreglo de un fallo real.
   Con sólo `min-width: 720px`, un móvil TUMBADO (844 de ancho, 390 de alto)
   entraba en el modo ordenador: letra de 52 px y 380 px de hueco reservado
   abajo, dentro de una pantalla de 390 px de alto. Las seis pantallas de la
   intro se salían por arriba y cuatro le caían encima a Tuad. Nadie diseña
   para el móvil tumbado, pero la gente gira el móvil. */
@media (min-width: 720px) and (min-height: 700px) {
	.da-intro__escena {
		max-width: 560px;
	}

	.da-intro__big {
		font-size: 52px;
		letter-spacing: -0.06em;
	}

	.da-intro__nota {
		font-size: 22px;
		margin-top: 18px;
	}

	.da-intro__pre {
		font-size: 10px;
	}

	.da-intro__tuad {
		width: 150px;
		margin-left: -75px;
		top: calc(66% - 156px);
	}

	/* Este hueco es lo que mantiene el texto por encima de Tuad. Tuad cuelga
	   justo sobre la vía (66% de la altura) y el texto se centra en lo que
	   queda: si el hueco se queda corto, la frase le cae encima a la cabeza. */
	.da-intro__escenario {
		padding-bottom: 380px;
	}
}

@media (min-width: 1100px) and (min-height: 700px) {
	.da-intro__escena {
		max-width: 700px;
	}

	.da-intro__big {
		font-size: 68px;
	}

	.da-intro__tuad {
		width: 180px;
		margin-left: -90px;
		top: calc(66% - 188px);
	}

	.da-intro__escenario {
		padding-bottom: 430px;
	}
}

/* ─────────── pantalla de poco alto (iPhone SE de pie, 568) ───────────
   Entre 470 y 640 px de alto la intro cabía por poco y las pantallas largas
   —la 4 y la 6— le caían encima a Tuad. Se aprieta un punto más: misma intro,
   mismas seis pantallas, sólo más compacta. */
@media (max-height: 640px) and (min-height: 471px) {
	.da-intro__big {
		font-size: 26px;
	}

	.da-intro__nota {
		font-size: 17px;
		margin-top: 10px;
	}

	.da-intro__escenario {
		padding-bottom: 186px;
	}

	.da-intro__tuad {
		width: 72px;
		margin-left: -36px;
		top: calc(66% - 78px);
	}
}

/* ─────────── pantalla muy bajita (el móvil tumbado) ───────────
   Menos de 470 px de alto es, básicamente, un teléfono girado. Ahí no cabe una
   intro con ilustración: cabe el texto y el botón. Tuad se esconde —es
   decoración, ya va con aria-hidden— porque es lo único que se puede quitar
   sin quitar información. Es preferible una intro sobria a una rota. */
@media (max-height: 470px) {
	.da-intro__escenario {
		padding: 12px 26px 118px;
	}

	.da-intro__escena {
		max-width: 460px;
	}

	.da-intro__big {
		font-size: 24px;
		margin-top: 10px;
		line-height: 1.06;
	}

	.da-intro__nota {
		font-size: 15px;
		margin-top: 8px;
	}

	.da-intro__tuad {
		display: none;
	}

	.da-intro__pie {
		bottom: calc(18px + env(safe-area-inset-bottom));
		gap: 7px;
	}

	.da-intro__cta {
		min-height: 46px;
		font-size: 15px;
	}

	.da-intro__nuevo {
		min-height: 40px;
		font-size: 12.5px;
	}
}