/**
 * SETIN – animaciones del front (no se cargan en el editor).
 *
 * 1. Entrada de las cabeceras (hero) al cargar.
 * 2. Aparición al hacer scroll: animations.js añade .setin-reveal SOLO a lo que está fuera
 *    de pantalla al cargar (lo visible nunca se oculta: sin parpadeos ni penalización de LCP)
 *    y .is-visible cuando entra en pantalla.
 * Todo se desactiva con prefers-reduced-motion.
 */

@media (prefers-reduced-motion: no-preference) {

	/* 1. Cabeceras ------------------------------------------------------- */

	@keyframes setin-rise {
		from { opacity: 0; transform: translateY(28px); }
		to { opacity: 1; transform: none; }
	}

	@keyframes setin-zoom-out {
		from { transform: scale(1.08); }
		to { transform: scale(1); }
	}

	@keyframes setin-line {
		from { transform: scaleX(0); }
		to { transform: scaleX(1); }
	}

	/* Zoom lento de la foto de fondo (solo transform: no retrasa su pintado). */
	.setin-hero .wp-block-cover__image-background,
	.setin-page-hero .wp-block-cover__image-background {
		animation: setin-zoom-out 9s cubic-bezier(.2, .7, .2, 1) both;
	}

	/* Texto en cascada */
	.setin-hero .wp-block-cover__inner-container > * > *,
	.setin-page-hero .wp-block-cover__inner-container > * > * {
		animation: setin-rise 800ms cubic-bezier(.2, .7, .2, 1) both;
	}

	:is(.setin-hero, .setin-page-hero) .wp-block-cover__inner-container > * > :nth-child(2) { animation-delay: 90ms; }
	:is(.setin-hero, .setin-page-hero) .wp-block-cover__inner-container > * > :nth-child(3) { animation-delay: 180ms; }
	:is(.setin-hero, .setin-page-hero) .wp-block-cover__inner-container > * > :nth-child(4) { animation-delay: 270ms; }
	:is(.setin-hero, .setin-page-hero) .wp-block-cover__inner-container > * > :nth-child(5) { animation-delay: 360ms; }

	/* La rayita amarilla del antetítulo se "dibuja" */
	.setin-eyebrow::before {
		transform-origin: left center;
	}

	:is(.setin-hero, .setin-page-hero) .setin-eyebrow::before,
	.setin-reveal.is-visible .setin-eyebrow::before,
	.setin-eyebrow.setin-reveal.is-visible::before {
		animation: setin-line 700ms 250ms cubic-bezier(.2, .7, .2, 1) both;
	}

	/* 2. Aparición al hacer scroll --------------------------------------- */

	.setin-reveal {
		opacity: 0;
		transform: translateY(32px);
		transition:
			opacity 700ms cubic-bezier(.2, .7, .2, 1),
			transform 700ms cubic-bezier(.2, .7, .2, 1);
		transition-delay: var(--setin-delay, 0ms);
	}

	.setin-reveal--fade { transform: none; }
	.setin-reveal--zoom { transform: scale(.96); }

	.setin-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	/* Las tarjetas de servicio conservan su transición de hover tras aparecer. */
	.setin-card.setin-reveal.is-visible {
		transition-delay: 0ms;
	}

	/* Botones: pequeño desplazamiento de la flecha/elevación al pasar el ratón */
	.wp-block-button__link,
	.setin-btn {
		transition: background 260ms, color 260ms, border-color 260ms, transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms;
	}

	.wp-block-button__link:hover,
	.setin-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	}

	/* Botón de WhatsApp: un "latido" suave al aparecer para llamar la atención */
	@keyframes setin-pop {
		0% { opacity: 0; transform: scale(.4); }
		70% { transform: scale(1.08); }
		100% { opacity: 1; transform: scale(1); }
	}

	.setin-float__btn {
		animation: setin-pop 600ms 1.2s cubic-bezier(.2, .7, .2, 1) both;
	}

	.setin-float__btn--tel { animation-delay: 1.35s; }
}

/* Cifras: ancho estable mientras cuentan */
.setin-stat__value { font-variant-numeric: tabular-nums; }
