/* ════════════════════════════════════════════════════════════════
   V5 · capa de movimiento de #producto (bloqueo por abajo, patrón V11)
   El bloque se ve EXACTAMENTE igual que en flujo normal: nada de
   alturas, centrados ni escalas. Sólo se sostiene solo cuando su
   borde inferior alinea con el borde inferior de la ventana (justo
   antes de que entre #equipo) y, en esa posición, el scroll cambia
   los paneles 01→03 mientras el móvil queda fijo.
   ─ Cómo: el wrapper .features-pin añade recorrido debajo (padding)
   y .features es sticky con bottom:0 → se libra al llegar su borde
   inferior al de la ventana, se mantiene durante el recorrido y se
   suelta al agotarse. Sin style.css ni scripts.js tocados.
   ════════════════════════════════════════════════════════════════ */

/* Lenis (smooth scroll, MIT, vendido): clases recomendadas de la librería */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (min-width: 901px) {
  /* recorrido extra de scroll (2 cascadas + meseta final). Va como
     CONTENIDO del wrapper (spacer insertado por motion.js). */
  .js.motion-ok .features-pin .features-runway {
    height: 210svh;
  }

  /* Agarre POR TRANSFORM (motion.js desplaza la sección): el sticky con
     top var(calc+svh) desplaza el contenedor pero sus descendientes
     compuestos pintan con el offset viejo (cull de Chromium). */
  .js.motion-ok .features-pin .features {
    position: relative;
    will-change: transform;
  }
}

/* ── escenario construido: paneles apilados + móvil máscara ──── */
@media (min-width: 901px) {
  .js.motion-ok .features-pin.is-built .feature-panels {
    position: relative;
  }

  /* los paneles 2 y 3 se apilan sobre el 1 (que da la altura). SIN stretch:
     la geometría (y con ella la posición de la píldora) es la de style.css;
     la columna de texto se estira con su propio align-self */
  .js.motion-ok .features-pin.is-built .feature-panel {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .js.motion-ok .features-pin.is-built .feature-panel:first-child {
    position: relative;
    inset: auto;
    pointer-events: auto;
  }

  /* el marco del teléfono, inclinado como el diseño. SIN FONDO PROPIO: el
     blanco lo pone .phone-bg — una copia del marco sin borde insertada por
     motion.js como PRIMER hijo, debajo de los .phone-layer. El background
     directo de .phone tapaba las capas (el escenario construido se veía
      como un rectángulo blanco sin pantalla). El borde navy y la sombra
     siguen en .phone; el copia solo replica el relleno. */
  .js.motion-ok .features-pin.is-built .phone {
    overflow: hidden;
    transform: rotate(7deg);
    background: transparent;
    z-index: 1;
  }

  /* la copia: mismo relleno que el marco (inset:0 = padding box, radio
     interior 32−7=25) en blanco. Pinta DEBAJO de las capas por orden de
     árbol (primera hija) y hace de telón cuando el contenido entra/sale */
  .js.motion-ok .features-pin.is-built .phone-bg {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 25px;
  }

  /* las píldoras pasan POR ENCIMA del marco del teléfono y se quedan en su
     posición natural (absolute de style.css: left/bottom); solo sube el
     z-index. (position: relative las convertía en ítem de la rejilla del
     visual: centradas bajo el móvil, +180px de desplazamiento y +41px de
     altura en la sección al construir) */
  .js.motion-ok .features-pin.is-built .visual-tag {
    z-index: 2;
  }

  /* el isolation del visual confinaría ese z-index a su propio panel: sin
     él, la píldora (z2) pinta por encima de TODOS los marcos apilados
     (z1), igual que en el carrusel normal — si no, el marco de los paneles
     2/3 tapa la píldora del 1 («Escritori…» cortada) */
  .js.motion-ok .features-pin.is-built .feature-visual {
    isolation: auto;
  }

  /* el "arrive" de pestaña no tiene sentido con los paneles apilados:
     movería el panel entero (marco incluido) durante 0,3s */
  .js.motion-ok .features-pin.is-built .feature-panel.is-entering {
    animation: none;
  }

  /* los blobs de los paneles superpuestos se retiran: solo el del panel 1 */
  .js.motion-ok .features-pin.is-built .feature-panel:not(:first-child) .feature-visual::before {
    opacity: 0;
  }

  /* flecha inaplicable en el extremo: apagada */
  .js.motion-ok .features-pin.is-built .feature-navigation button[disabled] {
    opacity: .35;
    cursor: default;
  }

  /* cascada de textos: la columna-máscara estirada recorta con degradado
     SOLO en los bordes extremos; el centro jamás muestra transparencia */
  .js.motion-ok .features-pin.is-built .feature-copy {
    overflow: hidden;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }

  .features-pin.is-built .phone-layer {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    overflow: hidden;
    /* SIN background ni transform propios: la capa solo recorta; el fondo
       viaja con el slide y el desplazamiento lo aplica motion.js. */
  }

  .features-pin.is-built .phone-slide {
    position: absolute;
    inset: 0;
    background: #fff;
    min-height: 100%;
    padding: 28px 20px 23px; /* el padding del teléfono, dentro de la capa */
  }
}

/* ── parallax de retrato y documento (desde la v11) ─────────── */
.js.motion-ok .workplace-image {
  transform: scale(1.16) translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.js.motion-ok .registration-visual {
  transform: translate3d(0, var(--py, 0px), 0);
}

.js.motion-ok #registro .registration-folio,
.js.motion-ok #registro .registration-pair {
  transform: translate3d(0, var(--py, 0px), 0);
}

.js.motion-ok .contact {
  z-index: 2;
  background-position: center calc(50% + var(--py, 0px));
}

.js.motion-ok .closing {
  position: relative;
  z-index: 1;
  transform: translate3d(0, var(--slide, 0px), 0);
}

.js.motion-ok #demo-form {
  transform: translate3d(0, var(--py, 0px), 0);
}

/* aire del bloque workplace (petición del usuario): más alto, para que
   el parallax de la foto respire */
.workplace-content {
  padding-top: 170px;
  padding-bottom: 120px;
}

/* ── reveals de entrada (desde la v11): fade + rise ─────────── */
.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity .65s var(--ease),
    translate .65s var(--ease);
}

.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

.js #registro .registration-heading[data-reveal] {
  translate: 0 48px;
}

.js #registro .registration-heading[data-reveal].is-in {
  translate: 0 0;
}

.js #demo-form[data-reveal] {
  translate: 0 48px;
  transition-delay: .1s;
}

.js #demo-form[data-reveal].is-in {
  translate: 0 0;
}

.js .contact-links > a[data-reveal] {
  transition-delay: calc(.05s * var(--i, 0));
}

/* sin JS: todo visible */
html:not(.js) [data-reveal] {
  opacity: 1;
}

/* #funciones · entrada y punto azul */

.fx-nav-play {
  transition: transform .32s var(--ease);
}

.motion-ok #funciones .fx-side {
  opacity: 0;
}

.motion-ok #funciones .fx-entry {
  opacity: 0;
  translate: 0 18px;
}

.motion-ok #funciones .fx-spread.is-in .fx-side,
.motion-ok #funciones .fx-entry.is-in {
  opacity: 1;
  transition: opacity .32s var(--ease), translate .38s var(--ease);
}

.motion-ok #funciones .fx-entry.is-in {
  translate: 0 0;
}

/* ── movimiento reducido: nada de bloqueo ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js .features-pin .features-runway {
    display: none;
  }

  .js .features-pin .features {
    position: static !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }

  .js.motion-ok .workplace-image,
  .js.motion-ok .registration-visual,
  .js.motion-ok #registro .registration-folio,
  .js.motion-ok #registro .registration-pair,
  .js.motion-ok #demo-form {
    transform: none;
    will-change: auto;
  }

  .js.motion-ok .closing {
    transform: none;
  }

  .js.motion-ok .contact {
    background-position: center;
  }

  .fx-nav-play,
  .motion-ok #funciones .fx-side,
  .motion-ok #funciones .fx-entry {
    transition: none;
  }
}