/* LR · Animaciones: estilos. Se carga desde el snippet de Custom Code "LR · Animaciones (GSAP)" (wp-content/uploads/lr-anim/lr-anim.css).
   Fuente: Code/LaReserva/animaciones/lr-anim.css. Todo lo que oculta o mueve algo va bajo una clase que pone el script (lr-anim-oc, lr-anim-banda-on, lr-anim-horizontal-on);
   sin el script, el sitio es el de Elementor. Plan: clientes/Sources/2026-09-29 - La Reserva plan de animaciones_v2.md. */
/* 1 · titulares: SplitText recorta cada renglón con overflow: clip al alto exacto de su línea (interlineado 1.0 en Belleza) y se comería
   los palitos de g, p, y y los acentos. Se recorta con clip-path y un margen de 0.2em arriba y abajo, que funciona igual en Safari. */
.lr-anim-renglon-mask { overflow: visible !important; clip-path: inset(-0.2em -0.2em); }
/* 3 · lr-anim-sube: el texto de 08 sube y aparece con Motion Effects NATIVO de Elementor (Vertical Scroll + Transparency, sin código).
   Motion Effects no respeta prefers-reduced-motion; con movimiento reducido se anula su transform y su opacidad. */
@media (prefers-reduced-motion: reduce) { .lr-anim-sube { transform: none !important; opacity: 1 !important; } }
/* 2 · lr-anim-sello (12): el Vertical Scroll nativo del sello tampoco respeta prefers-reduced-motion; se anula su transform (Chriz, 29-sep).
   La posición absoluta del sello va por left/top, no por transform, así que no se mueve de su sitio. */
@media (prefers-reduced-motion: reduce) { .lr-anim-sello { transform: none !important; } }
/* 5 · lr-anim-banda (09): el fondo va de Accent a Primary con el scroll y el texto cambia de color EN EL PUNTO DE CRUCE, no en degradado
   (con el mismo progreso que el fondo el contraste caía a 1.01:1). Mientras la clase lr-anim-banda-on está puesta, los colores salen de
   variables que el script calcula a partir de los globales del kit; sin JS o sin la clase, la banda es la de Elementor. */
.lr-anim-banda.lr-anim-banda-on { background-color: var(--lr-banda-fondo) !important; transition: none !important; }   /* el contenedor de Elementor trae una transición de 0.3 s en el fondo: el fondo iría detrás del texto */
.lr-anim-banda.lr-anim-banda-on .elementor-heading-title, .lr-anim-banda.lr-anim-banda-on .elementor-widget-text-editor { color: var(--lr-banda-texto) !important; }
.lr-anim-banda.lr-anim-banda-on .em-tonal { color: var(--lr-banda-tonal) !important; }
/* 6 · lr-anim-horizontal (06): navegación horizontal de las tarjetas con pin. Solo mientras la clase lr-anim-horizontal-on está puesta (desde 768 px y
   sin movimiento reducido): la sección ocupa la altura de la ventana con el contenido centrado y se apagan las flechas del Swiper, que no harían nada.
   Sin botón para saltar la sección desde el 4-oct-2026 (la versión con botón está en animaciones/_versiones/, B2 del 4-oct). */
.lr-anim-horizontal.lr-anim-horizontal-on { min-height: 100svh !important; align-content: center !important; align-items: center !important; }
/* Al soltar el pin, ScrollTrigger deja la sección al final de su espaciador con transform: translate(0, <largo del pin>px); el contenedor de Elementor trae
   transition: transform 0.4s, así que ese translate se animaba de 0 a 615 px (428 a 1366): la sección saltaba hacia arriba el largo del pin y bajaba flotando
   (y al revés al volver a entrar subiendo). Sin transición, la sección se mueve exactamente lo que se mueve el scroll (#168, #169). */
.lr-anim-horizontal.lr-anim-horizontal-on { transition: none !important; }
.lr-anim-horizontal.lr-anim-horizontal-on .elementor-swiper-button { display: none !important; }
/* 8 · off-canvas del header (85). TODO este bloque va bajo html.lr-anim-oc, una clase que pone el script solo con movimiento no reducido: en las páginas donde el
   snippet no carga, o si el script no corre, el off-canvas es el de Elementor (fadeInLeft de todo el ancho de la ventana). Curva y tiempos de omaivillas.com:
   panel de 0.6 s con cubic-bezier(0.25, 0.5, 0, 1), velo que aparece en 0.3 s, ícono que gira 0.4 s. La duración del panel sale de la del widget (--e-off-canvas-animation-duration-minimum).
   Elementor anima TODA la capa .e-off-canvas__main (ancho de la ventana) con fadeInLeft, así que el panel de 488 px solo asomaba en el último cuarto del recorrido;
   aquí esa capa conserva una animación vacía (Elementor espera su animationend para quitar las clases) y quien se mueve es el panel (.e-off-canvas__content), desde -100 % de su propio ancho. */
@keyframes lr-oc-main { from, to { opacity: 1; } }
@keyframes lr-oc-panel { from { transform: translate3d(-100%, 0, 0); } }
@keyframes lr-oc-panel-sale { to { transform: translate3d(-100%, 0, 0); } }
@keyframes lr-oc-velo { from { opacity: 0; } }
@keyframes lr-oc-velo-sale { to { opacity: 0; } }
@keyframes lr-oc-icono { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }
html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas__main.animated { animation-name: lr-oc-main; animation-timing-function: linear; }
html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas__main.animated .e-off-canvas__content { animation: lr-oc-panel var(--e-off-canvas-animation-duration-minimum, 0.6s) cubic-bezier(0.25, 0.5, 0, 1) both; }
html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas__main.animated:not(.reverse) .e-off-canvas__content .elementor-icon svg { animation: lr-oc-icono 0.4s cubic-bezier(0.25, 0.5, 0, 1) 0.2s both; }
/* al cerrar, Elementor reproduce su animación al revés (con la curva invertida: arranca lento); aquí el panel sale con la misma curva de salida, rápido al inicio */
html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas__main.animated.reverse .e-off-canvas__content { animation-name: lr-oc-panel-sale; }
@supports selector(:has(*)) {
  html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas:has(> .e-off-canvas__main.animated) > .e-off-canvas__overlay { animation: lr-oc-velo 0.3s ease both; }
  html.lr-anim-oc .elementor-widget-off-canvas .e-off-canvas:has(> .e-off-canvas__main.animated.reverse) > .e-off-canvas__overlay { animation: lr-oc-velo-sale 0.4s ease both; }
}

/* 6 · modo pista (PRUEBA B2, 1-oct-2026; la versión A está en animaciones/_versiones/): desde 1025 px el texto y las tarjetas se mueven juntos como una sola pista.
   La sección recorta en horizontal (overflow-x: clip) para que las tarjetas que salen por la derecha no creen scroll horizontal; el Swiper y su caja dejan de recortar
   para que las tarjetas puedan pasar por donde estaba el texto; las copias del bucle no se ven (visibility, para no mover el diseño); y el texto, que recibe un
   transform desde el script, no puede heredar la transición de transform de Elementor (se movería con 0.4 s de retraso). */
.lr-anim-horizontal.lr-anim-pista-on { overflow-x: clip !important; }
.lr-anim-horizontal.lr-anim-pista-on > .e-con, .lr-anim-horizontal.lr-anim-pista-on :is(.elementor-widget-n-carousel, .e-n-carousel, .swiper, .swiper-wrapper) { overflow: visible !important; }   /* el contenedor de la columna de tarjetas trae overflow: hidden */
.lr-anim-horizontal.lr-anim-pista-on .swiper-slide-duplicate { visibility: hidden !important; }
.lr-anim-horizontal.lr-anim-pista-on .lr-anim-pista-texto { transition: none !important; will-change: transform; }
.lr-anim-horizontal.lr-anim-pista-on { padding-top: 0 !important; padding-bottom: 0 !important; }   /* la sección ya ocupa la ventana con el contenido centrado (min-height: 100svh y align-content: center); el relleno vertical sobra y, medido, impedía el modo en laptops */