/* ==========================================================================
   Lando — Fondo flotante (efecto "parallax" para Hero y otras secciones)
   ==========================================================================
   v1.3 — Causa real encontrada inspeccionando el sitio en vivo (Elementor
   4.1.4, elemento tipo "Contenedor"):

   Elementor SI implementa "Background Overlay" (Capa de fondo) de forma
   nativa para Contenedores, pero NO como un div ".elementor-background-overlay"
   (esa es la marca antigua, de las Secciones clasicas). Para Contenedores,
   Elementor lo renderiza como un pseudo-elemento "::before" en el propio
   elemento, con una regla MUY especifica (usa el ID unico del elemento) que
   fija "background-size: cover" sin usar !important.

   El bug: la version anterior de este archivo animaba correctamente esa
   capa (el "background-position" SI se movia, confirmado inspeccionando
   el DOM en vivo), pero le faltaba el "!important" en "background-size".
   Como la regla nativa de Elementor es mas especifica que la nuestra,
   "cover" ganaba y dejaba la imagen sin espacio para "pasear" — la
   animacion corria, pero era invisible al no haber margen para desplazarse.

   CON ESTE ARCHIVO, EL FLUJO ES EXACTAMENTE EL QUE PEDISTE — solo 3 pasos,
   100% Elementor free, sin atributos personalizados ni editar CSS:
   1. Selecciona la Seccion/Contenedor del Hero.
   2. Pestaña "Style" > "Background": sube la primera imagen (el Fondo).
   3. Misma pestaña, activa "Background Overlay" y sube la segunda imagen
      (la Capa de fondo).
   4. Pestaña "Advanced" > "CSS Classes": escribe   lando-float-bg
   Guarda/Publica — listo, ambas capas se mueven solas en sentidos opuestos.

   Clases modificadoras opcionales (junto a lando-float-bg, separadas por
   espacio en el mismo campo CSS Classes):
     lando-float-fast     -> ciclo mas rapido (6s en vez de 12s)
     lando-float-slow     -> ciclo mas lento (18s)
     lando-float-strong   -> recorrido/desplazamiento mas amplio

   Respeta accesibilidad: si el visitante tiene "reducir movimiento"
   activado en su sistema, la animacion se desactiva sola.
   ========================================================================== */

.lando-float-bg {
	--lando-float-duration: 12s;
	--lando-float-amount: 8%;
	position: relative;
	overflow: hidden;
	background-size: 130% auto !important;
	animation: lando-float-pan var(--lando-float-duration) ease-in-out infinite alternate;
}

/* Capa "Background Overlay" nativa de Elementor (se renderiza como ::before
   en Contenedores). Forzamos tamaño con !important porque la regla propia
   de Elementor (muy especifica, por ID de elemento) fija "cover" sin
   !important — sin esto, no queda margen visible para animar la posicion. */
.lando-float-bg::before {
	background-size: 130% auto !important;
	animation: lando-float-pan-reverse var(--lando-float-duration) ease-in-out infinite alternate;
}

/* Respaldo para Secciones clasicas (Elementor viejo estilo), donde el
   overlay SI es un div real con esta clase en vez de un ::before. */
.lando-float-bg .elementor-background-overlay {
	background-size: 130% auto !important;
	animation: lando-float-pan-reverse var(--lando-float-duration) ease-in-out infinite alternate;
}

/* Velocidad */
.lando-float-fast {
	--lando-float-duration: 6s;
}

.lando-float-slow {
	--lando-float-duration: 18s;
}

/* Amplitud del movimiento */
.lando-float-strong {
	--lando-float-amount: 14%;
}

@keyframes lando-float-pan {
	0% {
		background-position: 50% calc(50% - var(--lando-float-amount));
	}
	100% {
		background-position: 50% calc(50% + var(--lando-float-amount));
	}
}

@keyframes lando-float-pan-reverse {
	0% {
		background-position: 50% calc(50% + var(--lando-float-amount));
	}
	100% {
		background-position: 50% calc(50% - var(--lando-float-amount));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lando-float-bg,
	.lando-float-bg::before,
	.lando-float-bg .elementor-background-overlay {
		animation: none !important;
	}
}