/*!
 * Boom Motion — capa de animación por clases para Divi / WordPress
 * Todos los estados ocultos dependen de html.bm-js: sin JS, o dentro del
 * constructor visual, el contenido se ve siempre.
 */

:root {
  --bm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --bm-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --bm-dur: 0.8s;
  --bm-distance: 28px;
  --bm-stagger: 70ms;
  --bm-gap: 56px;
  --bm-accent-fallback: #4b4bf5;
}

/* ------------------------------------------------------------------ */
/* 1. REVEALS (bm-reveal + variante bm-v-*)                            */
/* ------------------------------------------------------------------ */

.bm-js .bm-reveal,
.bm-js .bm-stagger > .bm-child {
  opacity: 0;
  transform: translate3d(0, var(--bm-distance), 0);
  transition:
    opacity var(--bm-dur) var(--bm-ease-out) var(--bm-delay, 0ms),
    transform var(--bm-dur) var(--bm-ease-out) var(--bm-delay, 0ms),
    filter var(--bm-dur) var(--bm-ease-out) var(--bm-delay, 0ms),
    clip-path calc(var(--bm-dur) * 1.3) var(--bm-ease-in-out) var(--bm-delay, 0ms);
  will-change: opacity, transform;
}

.bm-js .bm-reveal.bm-v-fade,
.bm-js .bm-stagger.bm-v-fade > .bm-child { transform: none; }

.bm-js .bm-reveal.bm-v-left,
.bm-js .bm-stagger.bm-v-left > .bm-child { transform: translate3d(calc(var(--bm-distance) * -1.5), 0, 0); }

.bm-js .bm-reveal.bm-v-right,
.bm-js .bm-stagger.bm-v-right > .bm-child { transform: translate3d(calc(var(--bm-distance) * 1.5), 0, 0); }

.bm-js .bm-reveal.bm-v-scale,
.bm-js .bm-stagger.bm-v-scale > .bm-child { transform: scale(0.94); }

.bm-js .bm-reveal.bm-v-blur,
.bm-js .bm-stagger.bm-v-blur > .bm-child { transform: translate3d(0, 14px, 0); filter: blur(12px); }

.bm-js .bm-reveal.bm-v-clip,
.bm-js .bm-stagger.bm-v-clip > .bm-child {
  /* Se deja una rendija de 2 px: un elemento recortado al 100 % no existe para
     IntersectionObserver y nunca se dispararía. La opacidad la oculta hasta entonces. */
  opacity: 0;
  transform: none;
  clip-path: inset(0 0 calc(100% - 2px) 0);
  transition:
    opacity 1ms linear var(--bm-delay, 0ms),
    clip-path calc(var(--bm-dur) * 1.3) var(--bm-ease-in-out) var(--bm-delay, 0ms);
}

.bm-js .bm-reveal.bm-in,
.bm-js .bm-stagger > .bm-child.bm-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Al terminar se libera will-change para no retener capas de GPU */
.bm-js .bm-done { will-change: auto; }

/* Modificadores de ritmo */
.bm-fast { --bm-dur: 0.5s; }
.bm-slow { --bm-dur: 1.2s; }
.bm-d-1 { --bm-delay: 100ms; }
.bm-d-2 { --bm-delay: 200ms; }
.bm-d-3 { --bm-delay: 300ms; }
.bm-d-4 { --bm-delay: 400ms; }
.bm-d-5 { --bm-delay: 500ms; }
.bm-d-6 { --bm-delay: 600ms; }

/* ------------------------------------------------------------------ */
/* 2. TEXTO                                                            */
/* ------------------------------------------------------------------ */

/* bm-split / bm-textfill los anima GSAP: ocultos hasta que carga */
.bm-js .bm-split { visibility: hidden; }
.bm-js.bm-failsafe .bm-split,
.bm-js .bm-split.bm-ready { visibility: visible; }

.bm-split .bm-line-mask { overflow: hidden; display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Subrayador que se dibuja detrás de <em> o <mark> */
.bm-highlight em,
.bm-highlight mark {
  font-style: inherit;
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(
    var(--bm-highlight, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 28%, transparent)),
    var(--bm-highlight, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 28%, transparent))
  );
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.38em;
  padding: 0 0.06em;
}
.bm-js .bm-highlight em,
.bm-js .bm-highlight mark {
  background-size: 0% 0.38em;
  transition: background-size 0.9s var(--bm-ease-in-out) 0.35s;
}
.bm-js .bm-highlight.bm-in em,
.bm-js .bm-highlight.bm-in mark { background-size: 100% 0.38em; }

/* Subrayado animado para enlaces dentro de un módulo de texto */
.bm-link-underline a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--bm-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bm-link-underline a:hover { background-position: 0 100%; background-size: 100% 1px; }
}

/* ------------------------------------------------------------------ */
/* 3. MARQUEE                                                          */
/* ------------------------------------------------------------------ */

.bm-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.bm-marquee.bm-marquee-nomask { -webkit-mask-image: none; mask-image: none; }

.bm-marquee .bm-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  animation: bm-marquee var(--bm-marquee-dur, 40s) linear infinite;
}
.bm-marquee .bm-marquee-track > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 calc(var(--bm-gap) / 2) !important;
}
.bm-marquee img {
  height: var(--bm-marquee-h, 36px);
  width: auto;
  max-width: none;
  display: block;
}
.bm-marquee.bm-marquee-reverse .bm-marquee-track { animation-direction: reverse; }
.bm-marquee.bm-marquee-slow { --bm-marquee-dur: 70s; }
.bm-marquee.bm-marquee-fast { --bm-marquee-dur: 22s; }
.bm-marquee:not(.bm-inview) .bm-marquee-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .bm-marquee.bm-marquee-pause:hover .bm-marquee-track { animation-play-state: paused; }
}
@keyframes bm-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ------------------------------------------------------------------ */
/* 4. INTERACCIÓN: botones, tarjetas, imágenes                         */
/* ------------------------------------------------------------------ */

.bm-press, .bm-press .et_pb_button,
.bm-magnetic, .bm-magnetic .et_pb_button { transition: transform 160ms var(--bm-ease-out); }
.bm-press:active, .bm-press .et_pb_button:active { transform: scale(0.97); }

.bm-magnetic-target { will-change: transform; display: inline-block; }

/* Brillo que cruza el botón */
.bm-btn-shine, .bm-btn-shine .et_pb_button { position: relative; overflow: hidden; isolation: isolate; }
a.bm-btn-shine::before,
.bm-btn-shine .et_pb_button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
  margin: 0 !important;
  opacity: 1 !important;
  font-size: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  a.bm-btn-shine:hover::before,
  .bm-btn-shine .et_pb_button:hover::before { transform: translateX(120%); transition: transform 0.9s var(--bm-ease-out); }
}

/* Tarjeta con luz que sigue al cursor */
.bm-spotlight { position: relative; isolation: isolate; }
.bm-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--bm-ease-out);
  background: radial-gradient(
    var(--bm-spot-size, 420px) circle at var(--bm-mx, 50%) var(--bm-my, 50%),
    var(--bm-spot, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 16%, transparent)),
    transparent 65%
  );
}
.bm-spotlight > * { position: relative; z-index: 1; }
.bm-spotlight.bm-hover::after { opacity: 1; }

/* Inclinación 3D */
.bm-tilt { transform-style: preserve-3d; transition: transform 0.5s var(--bm-ease-out); will-change: transform; }
.bm-tilt.bm-hover { transition: transform 0.12s linear; }

/* Zoom suave de imagen al pasar el cursor */
.bm-img-zoom { overflow: hidden; }
.bm-img-zoom img { transition: transform 0.9s var(--bm-ease-out); display: block; }
@media (hover: hover) and (pointer: fine) {
  .bm-img-zoom:hover img { transform: scale(1.05); }
}

/* Elevación de tarjeta */
.bm-lift { transition: transform 0.35s var(--bm-ease-out), box-shadow 0.35s var(--bm-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bm-lift:hover { transform: translate3d(0, -4px, 0); }
}

/* Flotación decorativa */
.bm-float { animation: bm-float var(--bm-float-dur, 7s) ease-in-out infinite alternate; }
@keyframes bm-float { from { transform: translate3d(0, -8px, 0); } to { transform: translate3d(0, 8px, 0); } }

/* ------------------------------------------------------------------ */
/* 5. FONDOS DE SECCIÓN                                                */
/* ------------------------------------------------------------------ */

[class*="bm-bg-"] { position: relative; isolation: isolate; }
[class*="bm-bg-"] > .et_pb_row,
[class*="bm-bg-"] > [class*="et_pb_row"],
[class*="bm-bg-"] > [class*="et_flex_"],
[class*="bm-bg-"] > .bm-content { position: relative; z-index: 2; }

/* Aurora: manchas de color difuminadas que derivan lentamente */
.bm-bg-aurora { overflow: hidden; }
.bm-bg-aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 22% 30%, var(--bm-aurora-1, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 55%, transparent)), transparent 70%),
    radial-gradient(34% 40% at 78% 24%, var(--bm-aurora-2, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 30%, #00c2ff 30%)), transparent 70%),
    radial-gradient(40% 46% at 55% 82%, var(--bm-aurora-3, color-mix(in srgb, var(--bm-accent, var(--gcid-primary-color, var(--bm-accent-fallback))) 35%, #ff7a59 25%)), transparent 70%);
  filter: blur(60px) saturate(1.1);
  opacity: var(--bm-aurora-opacity, 0.7);
  animation: bm-aurora 26s ease-in-out infinite alternate;
}
.bm-bg-aurora:not(.bm-inview)::before { animation-play-state: paused; }
@keyframes bm-aurora {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(5%, -3%, 0) rotate(-6deg) scale(1.02); }
}

/* Rejilla técnica con desvanecido radial */
.bm-bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bm-grid-color, rgba(127, 127, 127, 0.24)) 1px, transparent 1px),
    linear-gradient(90deg, var(--bm-grid-color, rgba(127, 127, 127, 0.24)) 1px, transparent 1px);
  background-size: var(--bm-grid-size, 56px) var(--bm-grid-size, 56px);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
}

/* Puntos */
.bm-bg-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--bm-grid-color, rgba(127, 127, 127, 0.45)) 1px, transparent 1.4px);
  background-size: var(--bm-grid-size, 26px) var(--bm-grid-size, 26px);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
}

/* Grano de película: rompe el aspecto plano de los degradados */
.bm-bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--bm-noise-opacity, 0.07);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ------------------------------------------------------------------ */
/* 6. COMPOSICIONES DE SCROLL                                          */
/* ------------------------------------------------------------------ */

/* Tarjetas que se apilan (solo CSS, position: sticky) */
.bm-sticky-stack > .bm-child {
  position: sticky;
  top: calc(var(--bm-stack-top, 96px) + var(--bm-i, 0) * var(--bm-stack-step, 18px));
}

/* Scroll horizontal: en móvil es un carrusel deslizable nativo */
.bm-hscroll { overflow: hidden; }
.bm-hscroll .bm-hscroll-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--bm-hscroll-pad, 6vw) !important;
  padding-right: var(--bm-hscroll-pad, 6vw) !important;
  gap: var(--bm-hscroll-gap, 32px) !important;
}
.bm-hscroll .bm-hscroll-track > * {
  flex: 0 0 var(--bm-panel-w, 42vw) !important;
  width: var(--bm-panel-w, 42vw) !important;
  max-width: none !important;
  margin: 0 !important;
}
.bm-hscroll.bm-native .bm-hscroll-track {
  width: 100% !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bm-hscroll.bm-native .bm-hscroll-track::-webkit-scrollbar { display: none; }
.bm-hscroll.bm-native .bm-hscroll-track > * { scroll-snap-align: center; }
@media (max-width: 980px) {
  .bm-hscroll { --bm-panel-w: 82vw; --bm-hscroll-gap: 16px; }
}

/* Imagen con parallax interno: el contenedor recorta */
.bm-parallax-img { overflow: hidden; }
.bm-parallax-img img { display: block; width: 100%; will-change: transform; }

/* Media que crece hasta ocupar el ancho */
.bm-scale-in { will-change: transform; transform-origin: 50% 50%; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* 7. ACCESIBILIDAD: movimiento reducido                               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bm-js .bm-reveal,
  .bm-js .bm-stagger > .bm-child {
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: opacity 0.3s linear !important;
  }
  .bm-js .bm-split { visibility: visible !important; }
  .bm-js .bm-highlight em, .bm-js .bm-highlight mark { background-size: 100% 0.38em; transition: none; }
  .bm-marquee { overflow-x: auto; }
  .bm-marquee .bm-marquee-track,
  .bm-bg-aurora::before,
  .bm-float { animation: none !important; }
  .bm-tilt, .bm-lift, .bm-img-zoom img { transition: none !important; transform: none !important; }
}

/* Móvil ligero: los fondos animados pasan a estáticos */
@media (max-width: 767px) {
  .bm-lite-mobile .bm-bg-aurora::before { animation: none; filter: blur(40px); }
}
