/* ==========================================================================
   interacciones.css
   --------------------------------------------------------------------------
   Reimplementa en CSS las interacciones que en el sitio original hacía el
   motor IX2 de Webflow (un JSON interpretado por webflow.js en runtime).

   Va en un archivo aparte a propósito: `webflow.css` es copia byte a byte
   del CSS original y se mantiene sin tocar, para poder re-sincronizarlo si
   hiciera falta. Cargar este archivo DESPUÉS de webflow.css.

   Inventario completo de las interacciones en _migracion/INVENTARIO.md y el
   JSON crudo en _migracion/ix2-interacciones.json.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Marquee de logos de clientes  (solo en /)

   Original: actionList `a` "Logo loop"
     evento    PAGE_START, loop infinito, todos los breakpoints
     acción    TRANSFORM_MOVE sobre .container-59
     de        xValue 0%   (duration 0)
     a         xValue -100% (duration 20000ms)
     easing    ninguno -> lineal

   El home tiene dos .container-59 hermanos dentro de un .container-57 con
   overflow:hidden, con los mismos 13 logos en el mismo orden. Al desplazar
   cada uno exactamente el 100% de su propio ancho, el segundo queda donde
   estaba el primero: el bucle no tiene costura.
   -------------------------------------------------------------------------- */

@keyframes boca-logo-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.container-59 {
  animation: boca-logo-loop 20s linear infinite;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Navbar mobile con auto-hide  (7 páginas)

   Original: actionLists `a-2` "navleave" y `a-3` "navup"
     evento    PAGE_SCROLL_DOWN / PAGE_SCROLL_UP
     acción    TRANSFORM_MOVE sobre el navbar mobile [data-w-id]
     ocultar   yValue -150px en 300ms
     mostrar   yValue 0     en 500ms

   El desplazamiento lo aplica nav.js agregando .is-hidden; acá solo van las
   transiciones, para no escribir estilos desde JS.

   Breakpoint unificado en <=991px para las 7 páginas. El original usa 991px
   en /nosotros y /portafolio pero 767px en las otras cinco; se tomó como
   descuido de Webflow, no como decisión de diseño.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .navbarmobile {
    transition: transform 500ms ease;    /* mostrar: 500ms (navup) */
    will-change: transform;
  }

  .navbarmobile.is-hidden {
    transform: translateY(-150px);
    transition-duration: 300ms;          /* ocultar: 300ms (navleave) */
  }
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion

   El sitio original no contempla esta preferencia. Acá sí: con la opción
   activada no se mueve nada. El marquee queda quieto y el navbar deja de
   ocultarse (nav.js también corta el comportamiento por su cuenta, esto es
   la red de seguridad en CSS).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .container-59 {
    animation: none;
  }

  .navbarmobile,
  .navbarmobile.is-hidden {
    transform: none;
    transition: none;
  }
}