/**
 * Portada — retoques que deben sobrevivir a los guardados del maquetador.
 *
 * POR QUE ESTE ARCHIVO EXISTE
 * ---------------------------
 * El CSS manual del maquetador vive en wp_options (oz_pb_global_classes_css) y
 * el layout en post_meta. Al guardar una pagina desde el builder, el navegador
 * manda su copia completa de AMBOS y pisa cualquier edicion hecha por fuera.
 * Todo lo que se escriba alli directamente se pierde en el siguiente guardado.
 *
 * Por eso estos estilos viven en el tema: el plugin no los toca nunca.
 *
 * QUE SE SELECCIONA Y POR QUE
 * ---------------------------
 * `.oz-pb-comp-image-p90-v2aby7so` es la clase automatica que el maquetador
 * genera para el bloque de imagen del hero (la laguna). Se usa como gancho
 * porque el propio builder la conserva entre guardados; una clase
 * personalizada, en cambio, solo sobrevive si se asigna desde el panel.
 *
 * Si algun dia se borra y se recrea ese bloque, la clase automatica cambia y
 * el efecto deja de aplicarse. La solucion estable es asignar al bloque la
 * clase `hero-imagen-flotante` desde el panel del maquetador: este archivo ya
 * la contempla y el efecto seguiria funcionando sin tocar codigo.
 */

/* ==========================================================================
   Imagen del hero: flotacion continua
   ========================================================================== */

/* El bloque sube en el apilado. z-index solo actua sobre elementos
   posicionados, de ahi el position:relative. */
.oz-pb-comp-image-p90-v2aby7so,
.hero-imagen-flotante {
	position: relative;
	z-index: 20;
}

/* La animacion va sobre el <figure>, no sobre el bloque: el bloque lleva las
   variables de padding/margin del maquetador y, mientras dura la animacion de
   entrada (.oz-pb-reveal), tambien su propio transform. Separarlos evita que
   se pisen. */
.oz-pb-comp-image-p90-v2aby7so .oz-pb-image,
.hero-imagen-flotante .oz-pb-image {
	animation: lc-flotar 6s ease-in-out infinite;
	will-change: transform;
}

/* Recorrido corto y curva simetrica: se lee como flotacion, no como rebote. */
@keyframes lc-flotar {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-18px);
	}
}

/* Respeta a quien pidio menos movimiento en el sistema operativo: es una
   animacion infinita en el primer pantallazo del sitio. */
@media (prefers-reduced-motion: reduce) {
	.oz-pb-comp-image-p90-v2aby7so .oz-pb-image,
	.hero-imagen-flotante .oz-pb-image {
		animation: none;
	}
}