/*
 * AJUSTES DE LOS FONDOS ANIMADOS
 *
 * Edita los valores que quieras probar y recarga la página.
 *
 * IMAGEN
 * En instancias públicas usa una ruta relativa a un asset versionado del tema.
 * Los originales de wp-content/uploads son solo una fuente de trabajo: hay que
 * promoverlos a assets/images/motion/ antes de referenciarlos aquí.
 * Ejemplo:
 * --ftn-depth-image: url("../images/motion/release-YYYY-MM-DD/mi-imagen.jpg");
 *
 * POSICIÓN
 * Horizontal: 0% = izquierda · 50% = centro · 100% = derecha
 * Vertical:   0% = arriba    · 50% = centro · 100% = abajo
 *
 * `image-x` / `image-y` colocan la imagen de fondo.
 * `zoom-x` / `zoom-y` indican hacia qué punto avanza la animación.
 *
 * MOVIMIENTO
 * `duration` son los segundos que tarda cada capa en completar el recorrido.
 * Un número mayor produce una animación más lenta.
 * Referencia: 16.7 = velocidad original · 28 = lenta · 40 = muy lenta.
 *
 * `distance` controla cuánto se acercan las capas:
 * 0 = sin profundidad · 1 = sutil · 3.2 = profundidad original · 4+ = intensa.
 *
 * NITIDEZ
 * `texture-width` es la resolución horizontal usada para generar las capas.
 * `trail` controla la persistencia de la estela: un valor menor emborrona menos.
 * `layer-opacity` regula cuánto cubren las capas animadas la imagen base nítida.
 * Su rango seguro es 0–1: las capas ya no suman luminosidad entre sí.
 * `background-integration` devuelve presencia a la imagen estática: 0 mantiene
 * todo el movimiento y 1 lo oculta por completo.
 * `parallax` indica el recorrido máximo de las capas respecto al centro del viewport.
 * Cada plano se desplaza con distinta intensidad para crear profundidad real.
 * Referencia: 0 = desactivado · 32 = sutil · 64 = visible · 88 = marcado.
 * `parallax-easing` controla la respuesta al scroll:
 * un valor mayor responde antes mientras se está haciendo scroll.
 * `parallax-settle` controla cómo termina el movimiento al soltar el scroll:
 * un valor menor prolonga la desaceleración y produce una parada más suave.
 *
 * TINTE DE SECCIÓN
 * `base-tint`: cuanto mayor, menos se ve la imagen estática.
 * `motion-tint`: cuanto menor, más visibles son las capas en movimiento.

 * INTEGRACIÓN CROMÁTICA
 * `key-color` convierte en transparente el fondo de la imagen que coincide
 * con ese color; el color final será exactamente el `background-color` del
 * módulo. `key-tolerance` admite variaciones del JPG y `key-feather` suaviza
 * el borde. Usa ambos únicamente cuando la imagen se haya preparado para ese
 * fondo.
 */

/* ÁREAS DE INTERVENCIÓN */
.ftn-home-services {
	--ftn-depth-image: url("../images/motion/baseline-2026-09-12/fnd-oscuro.jpg");
	--ftn-depth-image-x: 50%;
	--ftn-depth-image-y: 50%;
	--ftn-depth-zoom-x: 70%;
	--ftn-depth-zoom-y: 65%;
	--ftn-depth-duration: 22;
	--ftn-depth-distance: 0.85;
	--ftn-depth-texture-width: 2048;
	--ftn-depth-trail: 0.62;
	--ftn-depth-layer-opacity: 0.68;
	--ftn-depth-parallax: 88;
	--ftn-depth-parallax-easing: 0.24;
	--ftn-depth-parallax-settle: 0.022;
}

/* CTA final global — la variante de Proceso puede usar otra animación. */
.ftn-final-cta--home {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A0394-copia-NIU2.jpg");
	--ftn-depth-image-x: 50%;
	--ftn-depth-image-y: 0%;
	--ftn-depth-zoom-x: 24%;
	--ftn-depth-zoom-y: 44%;
	--ftn-depth-duration: 14;
	--ftn-depth-distance: 0.6;
	--ftn-depth-texture-width: 2560;
	--ftn-depth-trail: 0.98;
	--ftn-depth-layer-opacity: 1;
	--ftn-depth-background-integration: 0;
	--ftn-depth-parallax: 96;
	--ftn-depth-parallax-easing: 0.02;
	--ftn-depth-parallax-settle: 0.01;
	--ftn-depth-base-tint: 0;
	--ftn-depth-motion-tint: 0;
	--ftn-depth-key-color: #ef63bc;
	--ftn-depth-key-tolerance: 0.1;
	--ftn-depth-key-feather: 0.06;
	background-color: #ef63bc;
}

.ftn-final-cta--process {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/fnd-pink-3.jpg");
	--ftn-depth-image-x: 54%;
	--ftn-depth-image-y: 44%;
	--ftn-depth-zoom-x: 48%;
	--ftn-depth-zoom-y: 52%;
	--ftn-depth-duration: 36;
	--ftn-depth-distance: 0.52;
	--ftn-depth-texture-width: 2048;
	--ftn-depth-trail: 0.7;
	--ftn-depth-layer-opacity: 0.74;
	--ftn-depth-parallax: 48;
	--ftn-depth-parallax-easing: 0.18;
	--ftn-depth-parallax-settle: 0.02;
	--ftn-depth-base-tint: 0.9;
	--ftn-depth-motion-tint: 0.5;
}

/* PÁGINA SERVICIOS / HERO */
.ftn-services-hero {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A9614-copia-1.jpg");
	--ftn-depth-image-x: 20%;
	--ftn-depth-image-y: 50%;
	--ftn-depth-zoom-x: 13%;
	--ftn-depth-zoom-y: 67%;
	--ftn-depth-duration: 24;
	--ftn-depth-distance: 1.25;
	--ftn-depth-texture-width: 2560;
	--ftn-depth-trail: 0.53;
	--ftn-depth-layer-opacity: 1;
	--ftn-depth-background-integration: 0;
	--ftn-depth-parallax: 32;
	--ftn-depth-parallax-easing: 0.08;
	--ftn-depth-parallax-settle: 0.04;
	--ftn-depth-base-tint: 0;
	--ftn-depth-motion-tint: 0;
	--ftn-depth-key-color: #f3eee2;
	--ftn-depth-key-tolerance: 0.1;
	--ftn-depth-key-feather: 0.06;
	background-color: #f3eee2;
}

/*
 * PÁGINA SERVICIOS / PROYECTOS SELECCIONADOS
 * Ajustes independientes del hero y de las animaciones de la Home.
 */
.ftn-services-projects {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A0651-copia-B-INV-CR.jpg");
	--ftn-depth-image-x: 100%;
	--ftn-depth-image-y: 44%;
	--ftn-depth-zoom-x: 50%;
	--ftn-depth-zoom-y: 52%;
	--ftn-depth-duration: 72;
	--ftn-depth-distance: 1.35;
	--ftn-depth-texture-width: 2560;
	--ftn-depth-trail: 0.47;
	--ftn-depth-layer-opacity: 0.66;
	--ftn-depth-parallax: 32;
	--ftn-depth-parallax-easing: 0.08;
	--ftn-depth-parallax-settle: 0.04;
	--ftn-depth-base-tint: 0.58;
	--ftn-depth-motion-tint: 0.08;
	background-color: #2f1e2a;
}

/* PÁGINA PROYECTOS / HERO */
.ftn-projects-intro {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A0651-B3_PROYECTOS.jpg");
	--ftn-depth-image-x: 100%;
	--ftn-depth-image-y: 10%;
	--ftn-depth-zoom-x: 52%;
	--ftn-depth-zoom-y: 23%;
	--ftn-depth-duration: 17;
	--ftn-depth-distance: 0.9;
	--ftn-depth-texture-width: 2560;
	--ftn-depth-trail: 0.82;
	--ftn-depth-layer-opacity: 1;
	--ftn-depth-background-integration: 0;
	--ftn-depth-parallax: 32;
	--ftn-depth-parallax-easing: 0.08;
	--ftn-depth-parallax-settle: 0.04;
	--ftn-depth-base-tint: 0;
	--ftn-depth-motion-tint: 0;
	--ftn-depth-key-color: #f3eee2;
	--ftn-depth-key-tolerance: 0.1;
	--ftn-depth-key-feather: 0.06;
	background-color: #f3eee2;
}

/* PÁGINA CONTACTO / HERO */
.ftn-contact-hero {
	--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A0654-C-ALT.jpg");
	--ftn-depth-image-x: 13%;
	--ftn-depth-image-y: 80%;
	--ftn-depth-zoom-x: 51%;
	--ftn-depth-zoom-y: 91%;
	--ftn-depth-duration: 10;
	--ftn-depth-distance: 0.55;
	--ftn-depth-texture-width: 2560;
	--ftn-depth-trail: 0.64;
	--ftn-depth-layer-opacity: 1;
	--ftn-depth-background-integration: 0;
	--ftn-depth-parallax: 32;
	--ftn-depth-parallax-easing: 0.08;
	--ftn-depth-parallax-settle: 0.04;
	--ftn-depth-base-tint: 0;
	--ftn-depth-motion-tint: 0;
	--ftn-depth-key-color: #f3eee2;
	--ftn-depth-key-tolerance: 0.1;
	--ftn-depth-key-feather: 0.06;
	background-color: #f3eee2;
}

/*
 * Ajustes opcionales para móvil.
 * Puedes darles valores distintos si el encuadre lo necesita.
 */
@media (max-width: 767px) {
	.ftn-home-services {
		--ftn-depth-image: url("../images/motion/baseline-2026-09-12/fnd-oscuro-1536x864.jpg");
		--ftn-depth-image-x: 50%;
		--ftn-depth-image-y: 50%;
		--ftn-depth-zoom-x: 50%;
		--ftn-depth-zoom-y: 50%;
		--ftn-depth-duration: 30;
		--ftn-depth-distance: 0.6;
		--ftn-depth-texture-width: 1536;
		--ftn-depth-trail: 0.16;
		--ftn-depth-layer-opacity: 0.32;
		--ftn-depth-parallax: 10;
		--ftn-depth-parallax-easing: 0.13;
		--ftn-depth-parallax-settle: 0.018;
	}

	.ftn-final-cta--home {
		--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A0394-copia-NIU2.jpg");
		--ftn-depth-image-x: 50%;
		--ftn-depth-image-y: 0%;
		--ftn-depth-zoom-x: 24%;
		--ftn-depth-zoom-y: 44%;
		--ftn-depth-duration: 14;
		--ftn-depth-distance: 0.6;
		--ftn-depth-texture-width: 2560;
		--ftn-depth-trail: 0.98;
		--ftn-depth-layer-opacity: 1;
		--ftn-depth-background-integration: 0;
		--ftn-depth-parallax: 96;
		--ftn-depth-parallax-easing: 0.02;
		--ftn-depth-parallax-settle: 0.01;
		--ftn-depth-base-tint: 0;
		--ftn-depth-motion-tint: 0;
		--ftn-depth-key-color: #ef63bc;
		--ftn-depth-key-tolerance: 0.1;
		--ftn-depth-key-feather: 0.06;
		background-color: #ef63bc;
	}

	.ftn-services-hero {
		--ftn-depth-image: url("../images/motion/release-2026-09-28/C5A9614-copia-1.jpg");
		--ftn-depth-image-x: 44%;
		--ftn-depth-image-y: 20%;
		--ftn-depth-zoom-x: 43%;
		--ftn-depth-zoom-y: 37%;
		--ftn-depth-duration: 84;
		--ftn-depth-distance: 2.95;
		--ftn-depth-texture-width: 2560;
		--ftn-depth-trail: 0.23;
		--ftn-depth-layer-opacity: 1;
		--ftn-depth-background-integration: 0;
		--ftn-depth-parallax: 32;
		--ftn-depth-parallax-easing: 0.08;
		--ftn-depth-parallax-settle: 0.04;
		--ftn-depth-base-tint: 0;
		--ftn-depth-motion-tint: 0;
		background-color: #f3eee2;
	}

}