/* ============================================================
   ECONNECT · CAPA DE MOVIMIENTO (QA)
   Se monta encima del sistema de prod sin cambiar su tipografía.
   Todo lo oculto de inicio vive bajo html.motion, que solo existe
   si el visitante no pidió "reducir movimiento" y si el JS arrancó.
   ============================================================ */

/* ---------- Lenis (scroll suave) ---------- */
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: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---------- Estados iniciales (evitan el parpadeo antes de animar) ---------- */
.motion .hero .container > *,
.motion .hero-copy > *,
.motion .p-hero-copy > *,
.motion .article-header .container > *,
.motion .blog-hero .fade-in { opacity: 0; }
.motion .fade-in { transition: none !important; }

/* Líneas de SplitText con máscara */
.m-line-mask { overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.m-word { display: inline-block; will-change: transform; }

/* ---------- Preloader (solo la primera vista de la sesión) ---------- */
.m-preloader { display: none; }
.motion:not(.m-seen) .m-preloader {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: var(--ink); color: var(--paper);
}
.m-preloader svg { width: min(240px, 42vw); height: auto; overflow: visible; }
.m-preloader .m-pre-count {
  font-family: var(--body-font); font-size: 12px; font-weight: 600; letter-spacing: .24em;
  color: var(--purple-light); font-variant-numeric: tabular-nums;
}
.m-preloader .m-pre-bar { width: min(240px, 42vw); height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.m-preloader .m-pre-bar i { display: block; height: 100%; width: 100%; background: var(--purple-light); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- Cortina de transición entre páginas ---------- */
.m-curtain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--ink); transform: translateY(101%);
  display: flex; align-items: center; justify-content: center;
}
.m-curtain svg { width: 84px; height: auto; opacity: .9; }
.motion.m-seen .m-curtain { transform: translateY(0); }

/* ---------- Barra de progreso de lectura ---------- */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1001;
  background: linear-gradient(90deg, var(--purple), var(--accent));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* ---------- Cursor discreto: solo una etiqueta junto al puntero, sobre tarjetas ---------- */
.m-cursor { position: fixed; top: 0; left: 0; z-index: 10001; pointer-events: none; }
.m-cursor-label { position: absolute; left: 18px; top: 20px; padding: 7px 12px; border-radius: 100px; background: var(--ink); color: #fff;
  font-family: var(--body-font); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: scale(.6); transform-origin: 0 0; transition: opacity .2s ease, transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 10px 24px -12px rgba(10,10,18,.55); }
.m-cursor.is-card .m-cursor-label { opacity: 1; transform: scale(1); }
.m-cursor.is-dark .m-cursor-label { background: #fff; color: var(--ink); }
@media (hover: none), (pointer: coarse) { .m-cursor { display: none !important; } }

/* ---------- Tarjetas con inclinación 3D y luz que sigue al cursor ---------- */
.m-tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.m-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(93, 63, 255, .14), transparent 45%);
  opacity: 0; transition: opacity .35s ease;
}
.m-tilt:hover::after { opacity: 1; }
.manifesto .m-tilt::after, .contact-section .m-tilt::after, .p-dark .m-tilt::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 111, 255, .22), transparent 45%);
}

/* ---------- Botones magnéticos ---------- */
.m-magnetic { will-change: transform; }
.m-magnetic > * { pointer-events: none; }

/* ---------- Marquee controlado por velocidad de scroll ---------- */
.motion .industries-strip .marquee { animation: none !important; will-change: transform; }

/* ---------- Brillo que sigue al mouse en secciones oscuras ---------- */
.m-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(600px circle at var(--gx, 70%) var(--gy, 30%), rgba(93, 63, 255, .28), transparent 60%);
  transition: background .1s linear; }

/* ---------- Firma: esfuerzos dispersos → crecimiento conectado ---------- */
.m-connect {
  position: relative; margin: clamp(40px, 7vw, 90px) 0 clamp(30px, 5vw, 70px);
  height: clamp(260px, 38vw, 480px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.m-connect canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-connect-labels {
  position: absolute; inset: auto 0 16px 0; display: flex; justify-content: space-between;
  font-family: var(--body-font); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray);
  pointer-events: none;
}
.m-connect-labels b { color: var(--purple); font-weight: 600; }

/* ---------- Banda Partner Network en el home ---------- */
.m-partners-band {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: clamp(80px, 12vh, 150px) 0;
}
.m-partners-band .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.m-partners-band h2 { color: var(--paper); }
.m-partners-band h2 em { color: var(--purple-light); font-style: italic; }
.m-partners-band .eyebrow { color: var(--purple-light); }
.m-partners-band p { color: var(--gray-light); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 520px; }
.m-partners-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
.m-partners-stats strong { display: block; font-family: var(--display-font); font-weight: 400; font-size: clamp(34px, 4vw, 56px); letter-spacing: -.03em; color: var(--paper); font-variation-settings: "opsz" 144; line-height: 1; margin-bottom: 8px; }
.m-partners-stats span { font-size: 13px; color: var(--gray-light); }
.m-partners-band .btn { margin-top: 36px; }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: var(--purple); color: #fff; border-color: var(--purple); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(93,63,255,.35); }
@media (max-width: 880px) { .m-partners-band .container { grid-template-columns: 1fr; } }

/* ---------- Etiqueta de entorno ---------- */
.m-qa-badge {
  position: fixed; left: 16px; bottom: 16px; z-index: 950;
  font-family: var(--body-font); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: #B45309; color: #fff; padding: 7px 11px; border-radius: 100px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  pointer-events: none;
}

/* ---------- Nav que se esconde al bajar y aparece al subir ---------- */
.nav { will-change: transform; }
.nav-links a[aria-current="page"] { color: var(--purple); }

/* ---------- Pequeños detalles ---------- */
.service-tile, .value-cell, .approach-item { transform-origin: 50% 100%; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; }
.m-scramble { font-variant-numeric: tabular-nums; }

/* ---------- Sin movimiento para quien lo pidió ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-preloader, .m-curtain, .m-cursor, .m-progress { display: none !important; }
  .m-tilt::after { display: none; }
}

/* ---------- Transiciones CSS que no deben pelear con GSAP ---------- */
.m-magnetic { transition-property: background-color, border-color, color, box-shadow !important; }
/* GSAP controla opacidad/visibilidad/transform: las transiciones CSS solo afectan color y sombras */
.motion .btn, .motion .nav-cta, .motion .form-submit, .motion .social-btn, .motion .filter-btn,
.motion .btn-whatsapp, .motion .btn-primary, .motion .calendly-tab, .motion .service-card, .motion .faq-toggle {
  transition-property: background-color, border-color, color, box-shadow, fill, stroke !important;
}
.m-tilt { transition-property: background-color, border-color, color, box-shadow !important; }

/* ---------- Wordmark oficial en el nav ---------- */
.nav-logo svg.nav-wordmark { width: 142px; height: 19px; overflow: visible; color: #5E17EB; transition: color .4s ease; }
@media (max-width: 560px) { .nav-logo svg.nav-wordmark { width: 118px; height: 16px; } }

/* ---------- Nav sobre secciones oscuras ---------- */
.nav { transition: border-color .3s ease, background-color .45s ease; }
.nav.is-dark { background: rgba(10, 10, 18, .55); border-bottom-color: rgba(255,255,255,.08); }
.nav.is-dark .nav-links a, .nav.is-dark .nav-logo { color: var(--paper); }
.nav.is-dark .nav-logo svg.nav-wordmark { color: #fff; }
.nav.is-dark .nav-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav.is-dark .nav-mobile-toggle span { background: var(--paper); }
.nav-links a, .nav-cta { transition: color .4s ease, background-color .4s ease, border-color .4s ease; }

/* ---------- Menú móvil: panel a pantalla completa con su propio fondo ---------- */
.nav-menu-extra { display: none; }
@media (max-width: 880px) {
  .nav-links, .nav-links.open {
    display: flex !important; position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 104px var(--gutter) calc(28px + env(safe-area-inset-bottom)); margin: 0;
    background: var(--ink); border: 0; overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-links { visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .6s cubic-bezier(.76,0,.24,1), visibility 0s linear .6s; }
  .nav-links.open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.76,0,.24,1), visibility 0s; }
  .nav-links::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 520px 420px at 90% 0%, rgba(93,63,255,.38), transparent 65%), radial-gradient(ellipse 420px 320px at 0% 100%, rgba(255,79,237,.14), transparent 65%); }
  .nav-links > li { position: relative; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-links > li > a { display: block; padding: 15px 0; font-family: var(--display-font); font-size: clamp(30px, 8.4vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; color: var(--paper) !important; font-variation-settings: "opsz" 144; }
  .nav-links > li > a::after { display: none; }
  .nav-links > li > a[aria-current="page"] { color: var(--purple-light) !important; }
  .nav-links > li.nav-menu-extra { display: flex; flex-direction: column; gap: 12px; border: 0; margin-top: auto; padding-top: 28px; }
  .nav-links .nav-menu-extra a.btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 10px; font-family: var(--body-font); font-size: 16px; letter-spacing: 0; padding: 16px 24px; }
  .nav-links .nav-menu-extra .btn-primary { background: var(--purple); border-color: var(--purple); color: #fff !important; }
  .nav-links .nav-menu-extra .btn-whatsapp { color: #fff !important; }
  .nav-logo, .nav-mobile-toggle { position: relative; z-index: 2; }
  .nav-mobile-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
  .nav-mobile-toggle span { transition: transform .45s cubic-bezier(.76,0,.24,1), opacity .25s, background-color .3s !important; }
  .menu-open .nav-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .nav-mobile-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .nav-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Con el menú abierto el nav siempre es oscuro, sin importar la sección de atrás */
  .menu-open .nav, .menu-open .nav.is-dark { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-open .nav .nav-logo svg.nav-wordmark { color: #fff; }
  .menu-open .nav .nav-mobile-toggle span { background: var(--paper); }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .menu-open .wa-float, .menu-open .m-qa-badge, .menu-open .m-progress { opacity: 0; pointer-events: none; }
}