/* 02 Proceso: «La maqueta en corte» (js/proceso.js).
   Escena 3D en tiempo real que avanza con el scroll, sobre la misma estructura de la sección .s-reel
   (título, texto, pasos con su barra de avance y la frase del paso activo; estilos base en estilos.css).
   La versión anterior (tableta con video y cinta) quedó en _sin_uso/. */
.s-maqueta { height: 760vh; z-index: 2; }
.s-maqueta .s-reel__stick { overflow: hidden; }   /* sin fondo propio: al entrar y salir se ve el fondo de la página */

/* Lienzo de la escena y velo para que el texto se lea sobre ella */
.s-maqueta__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.s-maqueta__velo { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    linear-gradient(90deg, rgb(17 18 22 / .92) 0%, rgb(17 18 22 / .74) 30%, rgb(17 18 22 / 0) 50%),
    radial-gradient(ellipse 75% 80% at 64% 52%, rgb(17 18 22 / 0) 55%, rgb(17 18 22 / .55) 100%); }
.s-maqueta .s-reel__title, .s-maqueta .s-reel__copy { z-index: 1; }

/* Cada paso lleva su barra de avance (el tramo de la escena que le corresponde). */
.s-reel__pasos li { position: relative; }
.s-reel__pasos li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: #38B6FF; transform-origin: 0 50%; transform: scaleX(var(--f, 0));
  box-shadow: 0 0 8px rgb(56 182 255 / .6);
}
/* Frase del paso activo: cambia con un fundido corto. */
.s-reel__paso { font: 400 .92em/1.5 var(--sans) !important; letter-spacing: 0; color: var(--text-2); min-height: 4.6em;
  transition: opacity .35s var(--ease), transform .35s var(--ease); }
.s-reel__paso.is-cambio { opacity: 0; transform: translateY(6px); }

/* Escritorio: columna de texto a la izquierda (marco de 1440×900 escalado, como el resto de la sección);
   la escena se corre hacia la derecha desde la cámara (js/proceso.js). */
@media (min-width: 901px) {
  .s-maqueta .s-reel__title { left: calc(50vw - 600 * var(--u)); top: calc(50vh - 318 * var(--u)); width: calc(560 * var(--u));
    font-size: calc(92 * var(--u)); }
  .s-maqueta .s-reel__copy { left: calc(50vw - 600 * var(--u)); top: calc(50vh - 96 * var(--u)); width: calc(380 * var(--u)); }
}

/* Móvil: texto arriba, escena debajo. */
@media (max-width: 900px) {
  .s-maqueta { height: 680vh; }
  .s-maqueta .s-reel__stick { align-content: start; padding-top: calc(128px + env(safe-area-inset-top, 0px)); gap: 16px; }
  .s-maqueta .s-reel__copy > p:first-child { display: none; }
  .s-maqueta__velo { background:
    linear-gradient(180deg, rgb(17 18 22 / .95) 0%, rgb(17 18 22 / .8) 34%, rgb(17 18 22 / 0) 52%),
    linear-gradient(0deg, rgb(17 18 22 / .85) 0%, rgb(17 18 22 / 0) 16%); }
  .s-reel__pasos li::after { left: 9px; right: 9px; bottom: 2px; }
  .s-maqueta .s-reel__paso { display: block; font-size: 14px !important; min-height: 4.6em; }
}
@media (prefers-reduced-motion: reduce) { .s-reel__paso { transition: none; } }