/* Estilos de la página — copiados del <helmet> de la maqueta de Claude Design. */

/* overflow-x: CLIP, no hidden, y esto tiene truco.
   `hidden` convierte html/body en contenedor de scroll y con eso rompe
   `position:sticky` en TODO lo que hay dentro — la cabecera del tren llevaba
   sin quedarse fija desde la maqueta original, sin que se notara.
   `clip` recorta igual pero no crea contenedor de scroll. */
html, body { margin:0; padding:0; background-color:#e3e0d7; overflow-x:clip; }
body { font-family:'Roboto', system-ui, sans-serif; color:#252525; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { color:#5B630C; text-decoration:underline; text-underline-offset:2px; }
a:hover { color:#252525; }
input, button, textarea { font-family:'Roboto', system-ui, sans-serif; }

@keyframes chug { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-1.5px) } }
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.3 } }
@keyframes sheetUp { from { transform:translateY(110%) } to { transform:translateY(0) } }
@keyframes crossing { from { transform:translateX(-14vw) } to { transform:translateX(114vw) } }
@keyframes bub { 0% { opacity:0; transform:translateY(10px) scale(.94) } 5% { opacity:1; transform:translateY(0) scale(1) } 17% { opacity:1; transform:translateY(0) scale(1) } 23% { opacity:0; transform:translateY(-7px) scale(.98) } 100% { opacity:0 } }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important } }

/* Mientras la página no ha hidratado no se enseña nada a medias. */
#app:empty { min-height:100vh; }

/* ─────────── la intro ─────────── */

/* Tuad flotando mientras habla. Suave: si se mueve mucho, distrae de leer. */
@keyframes flotar {
	0%, 100% { transform: translateY(0) }
	50%      { transform: translateY(-8px) }
}

/* El zarandeo justo antes del confeti. Corto y seco, como un "¡eh!". */
@keyframes agitar {
	0%, 100% { transform: translateX(0) rotate(0) }
	15%      { transform: translateX(-7px) rotate(-6deg) }
	35%      { transform: translateX(7px) rotate(6deg) }
	55%      { transform: translateX(-5px) rotate(-4deg) }
	75%      { transform: translateX(5px) rotate(3deg) }
}

/* El confeti cae hacia arriba y se va. No se recicla: la intro se ve una vez. */
@keyframes confeti {
	from { transform: translateY(0) rotate(0); opacity: 1 }
	to   { transform: translateY(-58vh) rotate(540deg); opacity: 0 }
}

/* El botón de la intro respira para que se vea que hay que tocarlo. */
@keyframes latido {
	0%, 100% { transform: scale(1) }
	50%      { transform: scale(1.035) }
}

/* Tuad cruzando el techo colgado de su liana, de derecha a izquierda.
   Lento (26s) y en bucle: tiene que sorprender una vez, no marear. */
@keyframes colgado {
	from { transform: translateX(90px) rotate(4deg) }
	50%  { transform: translateX(-46vw) rotate(-4deg) }
	to   { transform: translateX(-102vw) rotate(4deg) }
}

/* El fogonazo del golpe de la intro: entra de sopetón y se va suave. */
@keyframes fogonazo {
	0%   { opacity: 0 }
	12%  { opacity: .92 }
	100% { opacity: 0 }
}

/* ─────────── el recuento de los que se han subido ───────────
   Vive bajo el "¿cuento contigo?". El botón es discreto a propósito: compite
   con un titular de 40px y no tiene que ganarle, sólo estar. El número, cuando
   sale, sí manda — con el mismo trato de sombra lima que el contador grande. */

.da-recuento__b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: 16px;
	padding: 0 18px;
	border: 1.5px solid rgba(47, 36, 24, 0.20);
	border-radius: 14px;
	background: var(--da-paper, #fffdf7);
	font: 900 14px/1.2 'Poppins', sans-serif;
	letter-spacing: -0.02em;
	color: #252525;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(47, 36, 24, 0.12);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.da-recuento__b:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(47, 36, 24, 0.12);
}

.da-recuento {
	margin-top: 14px;
	animation: fadeUp 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.da-recuento__n {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 62px;
	line-height: 0.9;
	letter-spacing: -0.06em;
	color: #252525;
	text-shadow: 4px 4px 0 #b9c91c;
}

.da-recuento__t {
	display: block;
	margin-top: 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 17px;
	letter-spacing: -0.03em;
	color: #252525;
}

.da-recuento__poco {
	display: block;
	max-width: 26ch;
	margin: 8px auto 0;
	font-family: 'Gochi Hand', cursive;
	font-size: 16px;
	line-height: 1.25;
	color: #9d9d9d;
	text-shadow: 0 0 10px #f1f1f1, 0 0 10px #f1f1f1, 0 0 4px #f1f1f1;
}