/* * Efectos de la landing que Elementor no permite definir (animaciones). * Clases globales usadas en Elementor: * .flor-flotante cada flor decorativa del hero * .hero-contenido contenedor del texto del hero (deja pasar el ratón a las flores) */ /* ---------- Flores flotando ---------- */ @keyframes gd-flotar { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(4px, -10px, 0) rotate(3deg); } 50% { transform: translate3d(0, -16px, 0) rotate(0deg); } 75% { transform: translate3d(-4px, -8px, 0) rotate(-3deg); } 100% { transform: translate3d(0, 0, 0) rotate(0deg); } } .flor-flotante { animation: gd-flotar 7s ease-in-out infinite; will-change: transform; transition: scale .35s cubic-bezier(.34, 1.56, .64, 1), filter .35s ease; filter: drop-shadow(0 6px 10px rgba(25, 27, 25, .12)); cursor: default; } /* Cada flor con su propio ritmo para que no se muevan al unísono */ img.flor-flotante:nth-of-type(1) { animation-duration: 6.5s; animation-delay: -1.2s; } img.flor-flotante:nth-of-type(2) { animation-duration: 8s; animation-delay: -3.4s; } img.flor-flotante:nth-of-type(3) { animation-duration: 7.2s; animation-delay: -0.6s; } img.flor-flotante:nth-of-type(4) { animation-duration: 8.6s; animation-delay: -2.1s; } img.flor-flotante:nth-of-type(5) { animation-duration: 6.9s; animation-delay: -4.8s; } img.flor-flotante:nth-of-type(6) { animation-duration: 7.7s; animation-delay: -5.6s; } .flor-flotante:hover { scale: 1.12; filter: drop-shadow(0 10px 16px rgba(25, 27, 25, .2)); animation-play-state: paused; } /* El texto del hero no bloquea el ratón sobre las flores, pero sus elementos sí son clicables */ .hero-contenido { pointer-events: none; } .hero-contenido > * { pointer-events: auto; } /* ---------- Rastro de flores al mover el ratón (js/rastro-flores.js) ---------- * Clase global "hero-rastro" en la sección del hero. La capa queda por encima de * las flores fijas y por debajo del texto (.hero-contenido tiene z-index 3). */ .gd-rastro-capa { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 2; } .gd-rastro-flor { position: absolute; display: block; height: auto; max-width: none; opacity: 0; pointer-events: none; user-select: none; will-change: transform, opacity; filter: drop-shadow(0 6px 10px rgba(25, 27, 25, .12)); } /* ---------- Menú en móvil y tablet (js/menu-movil.js) ---------- * Clases globales en Elementor: * .cabecera la cabecera (header) → recibe .menu-abierto al abrir * .menu-principal el