/* Sistema de animaciones al hacer scroll (clases utilitarias para Elementor) */

.vts-fade-up,
.vts-fade-down,
.vts-fade-in,
.vts-slide-left,
.vts-slide-right,
.vts-zoom-in {
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.vts-fade-up {
	opacity: 0;
	transform: translateY(40px);
}

.vts-fade-down {
	opacity: 0;
	transform: translateY(-40px);
}

.vts-fade-in {
	opacity: 0;
}

.vts-slide-left {
	opacity: 0;
	transform: translateX(40px);
}

.vts-slide-right {
	opacity: 0;
	transform: translateX(-40px);
}

.vts-zoom-in {
	opacity: 0;
	transform: scale(0.92);
}

.vts-fade-up.is-visible,
.vts-fade-down.is-visible,
.vts-fade-in.is-visible,
.vts-slide-left.is-visible,
.vts-slide-right.is-visible,
.vts-zoom-in.is-visible {
	opacity: 1;
	transform: none;
}

/* Delays opcionales: vts-delay-100, vts-delay-200, ... vts-delay-500 */
.vts-delay-100 { transition-delay: 0.1s !important; }
.vts-delay-200 { transition-delay: 0.2s !important; }
.vts-delay-300 { transition-delay: 0.3s !important; }
.vts-delay-400 { transition-delay: 0.4s !important; }
.vts-delay-500 { transition-delay: 0.5s !important; }
.vts-delay-600 { transition-delay: 0.6s !important; }
.vts-delay-700 { transition-delay: 0.7s !important; }
.vts-delay-800 { transition-delay: 0.8s !important; }
.vts-delay-900 { transition-delay: 0.9s !important; }
.vts-delay-1000 { transition-delay: 1s !important; }
.vts-delay-1500 { transition-delay: 1.5s !important; }
.vts-delay-2000 { transition-delay: 2s !important; }

/* Duraciones opcionales: alargan la transición (por defecto 0.7s) */
.vts-duration-slow { transition-duration: 1.5s !important; }
.vts-duration-2s { transition-duration: 2s !important; }
.vts-duration-slower { transition-duration: 2.5s !important; }

/* En el editor de Elementor, mostrar siempre los elementos (el observer no corre ahí) */
.elementor-editor-active .vts-fade-up,
.elementor-editor-active .vts-fade-down,
.elementor-editor-active .vts-fade-in,
.elementor-editor-active .vts-slide-left,
.elementor-editor-active .vts-slide-right,
.elementor-editor-active .vts-zoom-in {
	opacity: 1;
	transform: none;
}

/* Respeta la preferencia del usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.vts-fade-up,
	.vts-fade-down,
	.vts-fade-in,
	.vts-slide-left,
	.vts-slide-right,
	.vts-zoom-in {
		transition: none;
		opacity: 1;
		transform: none;
	}
}