/* ==========================================================================
   Aiseguros — Sistema de animaciones
   Clases utilitarias con prefijo `aiseg-anim-*` para aplicar desde
   "Avanzado > Clases CSS" de Elementor o desde el marcado de los widgets.

   Reglas del sistema:
   - Sólo se animan `transform` y `opacity` (no provocan reflow → 60fps).
   - El estado inicial oculto se aplica SÓLO si hay JS (`html.aiseg-js`), para
     que el contenido nunca quede invisible si el JS falla.
   - El estado final es `transform: none` (NO `translateY(0)`): un `transform`
     activo convierte al elemento en bloque contenedor de sus descendientes
     `position: fixed`, lo que rompería el header fijo y el botón flotante.
   - Dentro del editor de Elementor todo se muestra visible y sin transición.
   ========================================================================== */

:root {
	/* Duraciones */
	--aiseg-dur-fast: 180ms;
	--aiseg-dur-base: 300ms;
	--aiseg-dur-slow: 1100ms;

	/* Curvas */
	--aiseg-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--aiseg-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

	/* Ritmo del escalonado (stagger) */
	--aiseg-stagger-step: 150ms;

	/* Desplazamiento de entrada */
	--aiseg-anim-shift: 48px;
}

/* ==========================================================================
   1. Reveal al hacer scroll
   El JS añade `.is-in` cuando el elemento entra en el viewport.
   ========================================================================== */

.aiseg-js .aiseg-anim-fade,
.aiseg-js .aiseg-anim-up,
.aiseg-js .aiseg-anim-down,
.aiseg-js .aiseg-anim-left,
.aiseg-js .aiseg-anim-right,
.aiseg-js .aiseg-anim-zoom {
	opacity: 0;
	transition:
		opacity var(--aiseg-dur-slow) var(--aiseg-ease-out),
		transform var(--aiseg-dur-slow) var(--aiseg-ease-out);
}

.aiseg-js .aiseg-anim-up    { transform: translateY(var(--aiseg-anim-shift)); }
.aiseg-js .aiseg-anim-down  { transform: translateY(calc(var(--aiseg-anim-shift) * -1)); }
.aiseg-js .aiseg-anim-left  { transform: translateX(var(--aiseg-anim-shift)); }
.aiseg-js .aiseg-anim-right { transform: translateX(calc(var(--aiseg-anim-shift) * -1)); }
.aiseg-js .aiseg-anim-zoom  { transform: scale(0.94); }

/* Estado final: `none` para no dejar un bloque contenedor activo. */
.aiseg-js .aiseg-anim-fade.is-in,
.aiseg-js .aiseg-anim-up.is-in,
.aiseg-js .aiseg-anim-down.is-in,
.aiseg-js .aiseg-anim-left.is-in,
.aiseg-js .aiseg-anim-right.is-in,
.aiseg-js .aiseg-anim-zoom.is-in {
	opacity: 1;
	transform: none;
}

/* Retardos manuales. */
.aiseg-anim-delay-1 { transition-delay: 90ms; }
.aiseg-anim-delay-2 { transition-delay: 180ms; }
.aiseg-anim-delay-3 { transition-delay: 270ms; }
.aiseg-anim-delay-4 { transition-delay: 360ms; }

/* ==========================================================================
   2. Escalonado (stagger)
   Se aplica al CONTENEDOR: sus hijos directos entran en cascada.
   ========================================================================== */

.aiseg-js .aiseg-anim-stagger > * {
	opacity: 0;
	transform: translateY(var(--aiseg-anim-shift));
	transition:
		opacity var(--aiseg-dur-slow) var(--aiseg-ease-out),
		transform var(--aiseg-dur-slow) var(--aiseg-ease-out);
}

.aiseg-js .aiseg-anim-stagger.is-in > * {
	opacity: 1;
	transform: none;
}

.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(1)  { transition-delay: calc(var(--aiseg-stagger-step) * 0); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(2)  { transition-delay: calc(var(--aiseg-stagger-step) * 1); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(3)  { transition-delay: calc(var(--aiseg-stagger-step) * 2); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(4)  { transition-delay: calc(var(--aiseg-stagger-step) * 3); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(5)  { transition-delay: calc(var(--aiseg-stagger-step) * 4); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(6)  { transition-delay: calc(var(--aiseg-stagger-step) * 5); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(7)  { transition-delay: calc(var(--aiseg-stagger-step) * 6); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(8)  { transition-delay: calc(var(--aiseg-stagger-step) * 7); }
.aiseg-js .aiseg-anim-stagger.is-in > *:nth-child(n+9) { transition-delay: calc(var(--aiseg-stagger-step) * 8); }

/* ==========================================================================
   3. Microinteracciones (hover) — CSS puro
   ========================================================================== */

/* Elevación de tarjeta. */
.aiseg-anim-lift {
	transition:
		transform var(--aiseg-dur-base) var(--aiseg-ease-out),
		box-shadow var(--aiseg-dur-base) var(--aiseg-ease-out);
}

.aiseg-anim-lift:hover,
.aiseg-anim-lift:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--aiseguros-shadow-md, 0 14px 40px rgba(4, 48, 74, 0.10));
}

/* Zoom de la imagen interior (el contenedor debe tener overflow:hidden). */
.aiseg-anim-zoom-img {
	overflow: hidden;
}

.aiseg-anim-zoom-img img {
	transition: transform var(--aiseg-dur-slow) var(--aiseg-ease-out);
}

.aiseg-anim-zoom-img:hover img {
	transform: scale(1.06);
}

/* Realce con el azul de marca (banners, tarjetas destacadas). */
.aiseg-anim-glow {
	transition: box-shadow var(--aiseg-dur-base) var(--aiseg-ease-out);
}

.aiseg-anim-glow:hover {
	box-shadow: 0 0 0 1px rgba(74, 179, 231, 0.35), 0 18px 44px rgba(74, 179, 231, 0.22);
}

/* Respuesta táctil al pulsar (botones). */
.aiseg-anim-press {
	transition: transform var(--aiseg-dur-fast) var(--aiseg-ease-out);
}

.aiseg-anim-press:active {
	transform: scale(0.97);
}

/* Subrayado que crece desde la izquierda (enlaces). */
.aiseg-anim-underline {
	position: relative;
}

.aiseg-anim-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background-color: var(--aiseguros-color-secondary, #4ab3e7);
	transition: width var(--aiseg-dur-base) var(--aiseg-ease-out);
}

.aiseg-anim-underline:hover::after,
.aiseg-anim-underline:focus-visible::after {
	width: 100%;
}

/* ==========================================================================
   6. Texto revelado palabra por palabra (`aiseg-anim-words`)
   El JS envuelve cada palabra en .aiseg-word > span; el contenedor exterior
   recorta y el interior sube desde abajo (efecto máscara).
   ========================================================================== */

.aiseg-word {
	display: inline-block;
	overflow: hidden;
	/* Evita que las letras con descendente (g, y, p) se recorten. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	vertical-align: top;
}

/*
 * ⚠️ SIN `will-change` fijo. Con 5 títulos de ~8 palabras eran 33 capas de
 * composición permanentes en la portada: el navegador las arrastra en CADA
 * fotograma de scroll, animen o no, y sólo animan una vez.
 *
 * GSAP ya promociona el elemento mientras dura el tween (`force3D: 'auto'`) y
 * lo devuelve a la normalidad al terminar, que es justo el ciclo de vida que
 * `will-change` debería tener.
 */
.aiseg-word > span {
	display: inline-block;
}

/* Antes de que el JS parta el texto no se toca nada: si el JS falla, el
   título se ve normal. */

/* ==========================================================================
   7. Contadores (`aiseg-anim-count`)
   ========================================================================== */

.aiseg-anim-count {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. Scroll suave (Lenis)
   ========================================================================== */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ==========================================================================
   4. Seguridad en el editor de Elementor
   Nada puede quedar invisible dentro del lienzo: impediría seleccionar y
   soltar widgets.
   ========================================================================== */

.elementor-editor-active .aiseg-anim-fade,
.elementor-editor-active .aiseg-anim-up,
.elementor-editor-active .aiseg-anim-down,
.elementor-editor-active .aiseg-anim-left,
.elementor-editor-active .aiseg-anim-right,
.elementor-editor-active .aiseg-anim-zoom,
.elementor-editor-active .aiseg-anim-stagger > *,
.elementor-editor-active .aiseg-word > span {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ==========================================================================
   5. Accesibilidad — respeta "reducir movimiento"
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.aiseg-js .aiseg-anim-fade,
	.aiseg-js .aiseg-anim-up,
	.aiseg-js .aiseg-anim-down,
	.aiseg-js .aiseg-anim-left,
	.aiseg-js .aiseg-anim-right,
	.aiseg-js .aiseg-anim-zoom,
	.aiseg-js .aiseg-anim-stagger > *,
	.aiseg-word > span {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.aiseg-anim-lift,
	.aiseg-anim-zoom-img img,
	.aiseg-anim-glow,
	.aiseg-anim-press,
	.aiseg-anim-underline::after {
		transition: none !important;
	}

	.aiseg-anim-lift:hover,
	.aiseg-anim-press:active {
		transform: none !important;
	}

	.aiseg-anim-zoom-img:hover img {
		transform: none !important;
	}
}