/**
 * Parallax equivalente al comportamiento del código adjunto.
 *
 * Zoom original: 20%
 * Duración original: 1 segundo
 */
.parallax-real {
	--parallax-zoom: 20;
	--parallax-duration: 1s;

	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/**
 * La posición y el tamaño de esta capa se calculan mediante JS.
 *
 * Con zoom 20:
 * - top: -10%
 * - left: -10%
 * - width: 120%
 * - height: 120%
 */
.parallax-real > .parallax-inner {
	position: absolute;
	z-index: 0;

	pointer-events: none;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	transform: translate3d(0, 0, 0);
	transform-origin: center center;

	will-change: transform;

	/*
	 * Aproximación al Power1.easeOut utilizado
	 * normalmente por TweenLite.
	 */
	transition-property: transform;
	transition-duration: var(--parallax-duration);
	transition-timing-function:
		cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/**
 * Mantiene la superposición de Elementor
 * entre la imagen y el contenido.
 */
.parallax-real > .elementor-background-overlay {
	z-index: 1;
}

/**
 * Coloca el contenido por encima de la capa parallax.
 *
 * Sirve tanto para contenedores Flexbox como
 * para las secciones antiguas de Elementor.
 */
.parallax-real > *:not(.parallax-inner):not(.elementor-background-overlay) {
	position: relative;
	z-index: 2;
}

/**
 * Clases opcionales.
 */
.parallax-real.parallax-suave {
	--parallax-zoom: 14;
	--parallax-duration: 1.2s;
}

.parallax-real.parallax-intenso {
	--parallax-zoom: 30;
	--parallax-duration: 0.8s;
}

/**
 * Respeta la preferencia de accesibilidad del usuario.
 */
@media (prefers-reduced-motion: reduce) {
	.parallax-real > .parallax-inner {
		transform: translate3d(0, 0, 0) !important;
		transition: none !important;
		will-change: auto;
	}
}