/* Media queries centralizados para Normi */

/* Móvil pequeño 320px–545px: ocupa 100% del ancho disponible */
@media (max-width: 545px) {
	.app {
		width: 100%;
	}

	.home-screen,
	.tutorial-screen {
		padding-inline: clamp(12px, 6%, 24px);
	}

	.tutorial__section-track,
	.tutorial__nav {
		width: 100%;
	}
}

/* A partir de 546px: la pantalla principal se queda en 415px centrada */
@media (min-width: 546px) {
	.app {
		width: 415px;
		max-width: 415px;
	}
}

/* Ajustes para el modal de tiempo en pantallas pequeñas */
/* Mantener tamaño consistente para evitar que los botones tapen el fondo */
@media (max-width: 425px) {
	.time-modal__content {
		min-height: 345px;
		height: 345px;
		width: 100%;
		max-width: 460px;
		aspect-ratio: auto;
	}
}