/* Conexia — FX visuales Round 1
   Decorativos: gradient orbs + logo marquee + animated counters.
   No tocan layout existente, solo añaden capas. */

/* ════════════ GRADIENT ORBS ════════════ */
/* Capa absoluta detrás del contenido principal.
   Uso: añadir <div class="cx-fx-orbs" aria-hidden="true">...</div> dentro de la sección. */
.cx-fx-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Variante full-bleed: rompe contenedores cx-container (max-width 1240px) y se expande al viewport completo */
.cx-fx-has-orbs.cx-container > .cx-fx-orbs,
.cx-fx-orbs--bleed {
  position: absolute;
  left: 50%;
  right: auto;
  top: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  inset: auto;
  height: 100%;
  overflow: hidden;
}
.cx-fx-orbs > * {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
}
.cx-fx-orb--blue {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(47,107,255,.45) 0%, rgba(47,107,255,0) 70%);
  top: -160px;
  left: -140px;
  animation: cx-fx-orb-float-1 18s ease-in-out infinite;
}
.cx-fx-orb--purple {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(14,165,233,.40) 0%, rgba(14,165,233,0) 70%);
  top: -100px;
  right: -120px;
  animation: cx-fx-orb-float-2 22s ease-in-out infinite;
}
.cx-fx-orb--cyan {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(6,182,212,.32) 0%, rgba(6,182,212,0) 70%);
  bottom: -120px;
  left: 30%;
  animation: cx-fx-orb-float-3 20s ease-in-out infinite;
}

@keyframes cx-fx-orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-25px, 40px) scale(.96); }
}
@keyframes cx-fx-orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 60px) scale(1.12); }
}
@keyframes cx-fx-orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(60px, -40px) scale(1.10); }
  80%      { transform: translate(-30px, 20px) scale(.98); }
}

/* En mobile: orbs más pequeños y menos blur para no comerse el CPU */
@media (max-width: 720px) {
  .cx-fx-orbs > * { filter: blur(50px); opacity: .40; }
  .cx-fx-orb--blue { width: 320px; height: 320px; }
  .cx-fx-orb--purple { width: 300px; height: 300px; }
  .cx-fx-orb--cyan { width: 260px; height: 260px; }
}

/* Reduced motion: orbs estáticos */
@media (prefers-reduced-motion: reduce) {
  .cx-fx-orbs > * { animation: none !important; }
}

/* Asegurar que el contenido sobre los orbs sea visible */
.cx-fx-has-orbs { position: relative; isolation: isolate; }
.cx-fx-has-orbs > *:not(.cx-fx-orbs) { position: relative; z-index: 1; }

/* ════════════ LOGO MARQUEE INFINITO ════════════ */
/* Uso: <div class="cx-fx-marquee"><div class="cx-fx-marquee__track">[logos]</div></div>
   El JS duplica el track para crear el loop continuo. */
.cx-fx-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cx-fx-marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  min-width: 200%;
  animation: cx-fx-marquee-scroll 28s linear infinite;
}
.cx-fx-marquee:hover .cx-fx-marquee__track { animation-play-state: paused; }
.cx-fx-marquee__item {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 4px;
  opacity: .65;
  transition: opacity 240ms ease, filter 240ms ease;
  filter: grayscale(100%);
}
.cx-fx-marquee__item:hover { opacity: 1; filter: grayscale(0%); }
.cx-fx-marquee__item img {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@keyframes cx-fx-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .cx-fx-marquee__track { gap: 36px; animation-duration: 22s; }
  .cx-fx-marquee__item { height: 44px; }
  .cx-fx-marquee__item img { max-height: 32px; max-width: 100px; }
}

/* ════════════ ANIMATED COUNTERS ════════════ */
/* Uso: <span class="cx-fx-counter" data-target="700" data-suffix="+">0+</span>
   El JS detecta cuando entra en viewport y anima de 0 al target. */
.cx-fx-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.cx-fx-counter[data-fx-running="1"] {
  /* Ligera glow durante la animación */
  text-shadow: 0 0 18px rgba(47,107,255,.20);
  transition: text-shadow 600ms ease;
}

/* ════════════ AUTO HERO GRADIENT BG ════════════ */
/* Inyectado por cx-fx.js en heros que no tienen su propio bg.
   Full-bleed (rompe el contenedor padre con 100vw). */
.cx-fx-hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(47,107,255,.14), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, rgba(14,165,233,.12), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ════════════ FLOATING SHAPES (decoración hero adicional) ════════════ */
/* Líneas/puntos sutiles para dar profundidad. */
.cx-fx-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.06) 1px, transparent 0);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 100%);
  z-index: 0;
}