/* ============================================================
   Flow-Bi · motion.css — capa de vida compartida de la web pública
   Se SUMA al CSS existente de cada página (no reemplaza nada).
   Cargada por index/planes/contacto/ejemplos junto a motion.js.
   Filosofía: "el sistema está vivo" — datos que laten, tinta que
   se asienta, gravedad de marca. GPU-only (transform/opacity/filter).
   ============================================================ */

/* ── Reveal global mejorado: blur de enfoque SOLO durante la entrada ──
   Importante: NO tocamos la transition del legacy (opacity/transform y sus
   delays quedan intactos). El blur va por @keyframes en .in, así el filtro
   solo existe ~1s en los elementos que están entrando — decenas de .reveal
   ocultos con filter permanente creaban capas de compositor y colgaban el
   renderer en páginas largas. */
@keyframes mx-focus {
  from { filter: blur(5px); }
  to   { filter: blur(0); }
}
.reveal.in, .reveal.visible {
  /* fill BACKWARDS a propósito: al terminar, el filter desaparece del todo.
     Con `both`/`forwards` quedaba filter: blur(0) persistente — y blur(0)
     TAMBIÉN crea capa de composición: decenas de reveals acumulados
     saturaban el raster y colgaban la captura/compositor. */
  animation: mx-focus 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* ── Text split (h1.split — FIX: este CSS no existía y el título quedaba roto) ── */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.split-line-inner {
  display: inline-block;
  transform: translateY(118%);
  opacity: 0;
  filter: blur(4px);
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    opacity 0.7s ease var(--d, 0ms),
    filter 0.9s ease var(--d, 0ms);
}
.split-ready .split-line-inner {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

/* ── Subrayado que se dibuja (em del hero y links activos) ── */
.mx-underline {
  position: relative;
  white-space: nowrap;
}
.mx-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.04em;
  height: 0.07em;
  width: 100%;
  background: currentColor;
  opacity: 0.4;
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}
.in .mx-underline::after,
.visible .mx-underline::after,
.split-ready .mx-underline::after { transform: scaleX(1); }

/* ── Counters (data-count) ── */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── Flash sage cuando un valor "se actualiza" (ticker vivo) ── */
@keyframes mx-flash { 0% { color: inherit; } 30% { color: #8fc4b6; } 100% { color: inherit; } }
.mx-flash { animation: mx-flash 1.4s ease-out; }

/* ── Marquee genérico (data-marquee) ── */
.mx-marquee { overflow: hidden; position: relative; }
.mx-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--mx-gap, 18px);
  will-change: transform;
  animation: mx-marquee var(--mx-speed, 40s) linear infinite;
}
.mx-marquee[data-marquee-reverse] .mx-marquee-track { animation-direction: reverse; }
.mx-marquee:hover .mx-marquee-track { animation-play-state: paused; }
@keyframes mx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Lift de cards (data-lift / .mx-lift) ── */
.mx-lift { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.mx-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 48px -20px rgba(26, 42, 34, 0.25); }

/* ── Pulso desincronizado (dots de estado — usar --mxp para el offset) ── */
@keyframes mx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
.mx-pulse { animation: mx-pulse 2.4s ease-in-out infinite; animation-delay: var(--mxp, 0s); }

/* ── Tilt 3D (data-tilt — JS setea --rx/--ry) ── */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
  will-change: transform;
}

/* ── Botón magnético (data-magnetic — JS setea --tx/--ty) ── */
[data-magnetic] {
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-magnetic] .btn-arrow { display: inline-block; transition: transform 0.3s ease; }
[data-magnetic]:hover .btn-arrow { transform: translate(2px, -2px); }

/* ── Onda concéntrica al click (CTA) ── */
.mx-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 196, 182, 0.7);
  pointer-events: none;
  animation: mx-ripple 0.7s ease-out forwards;
}
@keyframes mx-ripple {
  from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.2); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

/* ── Línea que se dibuja (SVG path, data-draw — JS controla dashoffset) ── */
[data-draw] path, [data-draw] line {
  stroke-dasharray: var(--mx-len, 1000);
  stroke-dashoffset: var(--mx-off, 1000);
}

/* ── Scan de luz para la banda de números (idea 20) ── */
@keyframes mx-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }
.mx-scan {
  position: absolute;
  top: 0; bottom: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(143, 196, 182, 0.06), transparent);
  pointer-events: none;
  will-change: transform;
  animation: mx-scan 7s ease-in-out infinite;
}

/* ── Shimmer al hover (cards de industrias) ── */
.mx-shimmer { position: relative; overflow: hidden; }
.mx-shimmer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.85s ease;
  pointer-events: none;
}
.mx-shimmer:hover::before { left: 130%; }

/* ── Órbita de integraciones (data-orbit) ── */
.mx-orbit-wrap { position: relative; }
.mx-orbit-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(90, 130, 104, 0.18);
  /* will-change: capa propia → la rotación es compositor-only.
     Sin esto, cada frame re-rasterizaba el anillo completo. */
  will-change: transform;
  animation: mx-orbit var(--mx-orbit-t, 60s) linear infinite;
}
.mx-orbit-ring[data-reverse] { animation-direction: reverse; }
@keyframes mx-orbit { to { transform: rotate(360deg); } }
.mx-orbit-item {
  position: absolute;
  will-change: transform;
  /* counter-rotate para que el logo quede derecho mientras el anillo gira */
  animation: mx-orbit-counter var(--mx-orbit-t, 60s) linear infinite;
}
.mx-orbit-ring[data-reverse] .mx-orbit-item { animation-direction: reverse; }
@keyframes mx-orbit-counter { to { transform: rotate(-360deg); } }
.mx-orbit-wrap:hover .mx-orbit-ring,
.mx-orbit-wrap:hover .mx-orbit-item { animation-play-state: paused; }

/* Tooltip global de la órbita (UN solo nodo fijo — lo posiciona motion.js).
   Vive fuera de las capas en rotación: cero costo de compositor. */
#mx-orbit-tip {
  position: fixed;
  z-index: 1000;
  transform: translate(-50%, -100%) translateY(4px);
  padding: 5px 11px;
  background: var(--forest-900, #1a2a22);
  color: var(--cream-50, #faf7f0);
  font-family: var(--mono, "IBM Plex Mono"), monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 7px;
  box-shadow: 0 10px 26px -14px rgba(26, 42, 34, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
#mx-orbit-tip.on {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(0);
}
[data-theme="dark"] #mx-orbit-tip {
  background: var(--cream-50, #faf7f0);
  color: var(--forest-900, #1a2a22);
}

/* ── Scroll progress (inyectada por motion.js) ── */
#mx-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #5a8268, #8fc4b6);
  z-index: 999;
  pointer-events: none;
}

/* ── Nav inteligente (motion.js togglea .mx-nav-hidden en el nav fijo) ── */
.nav { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease; }
.nav.mx-nav-hidden { transform: translateY(-110%); }

/* ── Link activo de la nav: subrayado que se dibuja ── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 1.5px;
  width: 100%;
  background: var(--sage-500, #5a8268);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a.active::after,
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Scroll hint del hero ── */
@keyframes mx-hint { 0%, 100% { transform: scaleY(0.35); opacity: 0.35; } 50% { transform: scaleY(1); opacity: 0.8; } }
.mx-scroll-hint {
  width: 1.5px;
  height: 42px;
  margin: 28px auto 0;
  background: linear-gradient(180deg, transparent, #5a8268);
  transform-origin: top center;
  animation: mx-hint 2.6s ease-in-out infinite;
}

/* ── Grain editorial (textura de papel, casi imperceptible) ── */
#mx-grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 998;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mx-grain 9s steps(6) infinite;
}
@keyframes mx-grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, -1%); }
}
[data-theme="dark"] #mx-grain { opacity: 0.05; }

/* ── Selección de texto de marca ── */
::selection { background: rgba(143, 196, 182, 0.35); color: inherit; }

/* ── Scrollbar de marca (sutil, solo desktop webkit + firefox) ── */
html { scrollbar-color: rgba(90, 130, 104, 0.45) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(90, 130, 104, 0.35);
  border-radius: 99px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(90, 130, 104, 0.6); }

/* ── Canvas del grafo vivo (hero) ── */
#mx-graph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Letras del wordmark del footer (reveal escalonado) ── */
.mx-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) rotate(2deg);
  filter: blur(5px);
  transition:
    opacity 0.7s ease var(--d, 0ms),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    filter 0.8s ease var(--d, 0ms);
}
.in .mx-letter,
.visible .mx-letter { opacity: 1; transform: none; filter: blur(0); }

/* ── Reduced motion: todo visible y quieto ── */
@media (prefers-reduced-motion: reduce) {
  .reveal.in, .reveal.visible { animation: none !important; }
  .reveal, .split-line-inner, .mx-letter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .mx-marquee-track, .mx-pulse, .mx-scan, .mx-orbit-ring, .mx-orbit-item,
  .mx-scroll-hint, #mx-grain { animation: none !important; }
  .mx-underline::after { transform: scaleX(1) !important; transition: none !important; }
  [data-tilt] { transform: none !important; }
  [data-magnetic] { transform: none !important; }
  .mx-lift:hover { transform: none !important; }
}