/*
 * Escenas fijadas · "La A como protagonista".
 *
 * Solo con html.motion-scenes (runtime montado, movimiento completo y pantalla suficiente).
 * Sin esa clase, o con [data-scene-off] en una sección que no cabe, cada capítulo vuelve al
 * flujo normal de siempre: movimiento reducido, sin WebGL, fallo del runtime o `?scenes=0`.
 *
 * Cada escena es una sección alta (pantalla + recorrido) con un escenario `position: sticky`.
 * El recorrido se mide en svh (estable con la barra de Safari) y el escenario en lvh.
 */

/* ---------- Piezas que solo existen en modo escena ---------- */

.giant-words,
.viewer-window,
.viewer-ticks,
.viewer-label,
.scene-slot,
.reel,
.modes-dock,
.mode-scan,
.blueprint-labels {
  display: none;
}

/* Velo de los saltos largos: corte limpio en lugar de recorrer todas las escenas. */
.scene-veil {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Escena: sección alta + escenario fijado ---------- */

.motion-scenes #inicio {
  --scene-len: 1.6;
}

.motion-scenes #intencion {
  --scene-len: 3.2;
}

.motion-scenes #servicios {
  --scene-len: 3.4;
}

.motion-scenes #inmersivo {
  --scene-len: 3;
}

/* Huecos invisibles donde el director encuadra la A (se posicionan por pantalla). */
.motion-scenes [data-scene]:not([data-scene-off]) .scene-slot {
  position: absolute;
  display: block;
  pointer-events: none;
}

.motion-scenes [data-scene]:not([data-scene-off]) {
  height: calc(100vh + var(--scene-len, 1) * 100vh);
  height: calc(100lvh + var(--scene-len, 1) * 100svh);
  min-height: 0;
  padding: 0;
  overflow-anchor: none;
}

/* El velo de lectura pasa de la sección (que ahora es alta) al escenario. */
.motion-scenes [data-scene]:not([data-scene-off])::before {
  content: none;
}

.motion-scenes [data-scene]:not([data-scene-off]) > .scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  overflow: clip;
}

.motion-scenes [data-scene]:not([data-scene-off]) > .scene-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--scrim);
  content: "";
  opacity: 0.78;
  transition: opacity 900ms var(--ease-premium);
}

.motion-scenes [data-scene].is-active:not([data-scene-off]) > .scene-stage::before {
  opacity: 0.56;
}

/* El marco usa la pantalla visible (svh); lo que quede bajo la barra de Safari no se usa. */
.motion-scenes [data-scene]:not([data-scene-off]) .chapter-frame {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 5.5rem;
}

.motion-scenes .chapter--hero:not([data-scene-off]) .chapter-frame {
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: 3.5rem;
}

/* El título del hero también se limita por la altura: en laptops bajas el hero debe caber. */
.motion-scenes .chapter--hero:not([data-scene-off]) .hero-title {
  font-size: clamp(3.5rem, min(10.8vw, 18svh), 10.4rem);
}

@media (min-width: 821px) and (max-height: 820px) {
  .motion-scenes .chapter--hero:not([data-scene-off]) .chapter-frame {
    padding-top: calc(var(--header-h) + 2.5rem);
  }
}

/* ---------- 01 Intención: la tarjeta visor ---------- */

.motion-scenes #intencion:not([data-scene-off]) {
  --scrim: linear-gradient(90deg, rgba(4, 5, 6, 0.95) 0%, rgba(4, 5, 6, 0.74) 36%, rgba(4, 5, 6, 0) 60%);
}

.motion-scenes #intencion:not([data-scene-off]) .principles-panel {
  display: grid;
  background: none;
  backdrop-filter: none;
  padding: 0;
}

.motion-scenes #intencion:not([data-scene-off]) .principles-panel__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
}

.motion-scenes #intencion:not([data-scene-off]) .viewer-label {
  display: inline;
  color: var(--muted);
  white-space: nowrap;
}

/* Ventana transparente: la A del lienzo se ve a través. Solo marcas de esquina de 1 px. */
.motion-scenes #intencion:not([data-scene-off]) .viewer-window {
  --mark: rgba(244, 245, 246, 0.42);
  --mark-size: 0.8rem;
  --mark-gap: 0.8rem;
  position: relative;
  display: block;
  height: clamp(11rem, 34svh, 21rem);
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) left var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) left var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) right var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) right var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) left var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) left var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) right var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) right var(--mark-gap) / 1px var(--mark-size) no-repeat;
}

/* Zona donde se encuadra la A (la mide el director; no se pinta). */
.viewer-slot {
  position: absolute;
  inset: 1.6rem;
  pointer-events: none;
}

/* Los siete principios ocupan la misma celda: el scroll decide cuál se lee. */
.motion-scenes #intencion:not([data-scene-off]) .principles-list {
  display: grid;
  padding: 1.1rem 1.1rem 0.35rem;
}

.motion-scenes #intencion:not([data-scene-off]) .principles-list article {
  grid-area: 1 / 1;
  border-bottom: 0;
  padding: 0;
}

.motion-scenes #intencion:not([data-scene-off]) .principles-list h3 {
  font-size: 1.02rem;
}

.motion-scenes #intencion:not([data-scene-off]) .principles-list p {
  font-size: 0.78rem;
}

/* Tira de siete mini-marcos: el número del principio y una regla que se llena. */
.motion-scenes #intencion:not([data-scene-off]) .viewer-ticks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.85rem 1.1rem 1rem;
}

.viewer-ticks i {
  display: grid;
  gap: 0.45rem;
  color: var(--faint);
  font-family: var(--font-tech);
  font-size: 0.42rem;
  font-style: normal;
  letter-spacing: 0.1em;
  transition: color 300ms ease;
}

.viewer-ticks i::after {
  height: 1px;
  background: linear-gradient(90deg, var(--bone) calc(var(--fill, 0) * 100%), var(--hairline) 0);
  content: "";
}

.viewer-ticks i.is-active {
  color: var(--bone);
}

/* ---------- 02 Servicios: la pista horizontal ---------- */

/* El escenario se desvanece en los bordes: los paneles entran y salen sin cortes duros. */
.motion-scenes #servicios:not([data-scene-off]) > .scene-stage {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 86%, transparent 97%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 86%, transparent 97%);
}

.motion-scenes #servicios:not([data-scene-off]) .scene-slot--gallery {
  top: 15%;
  left: 36%;
  width: 46%;
  height: 68%;
}

.motion-scenes #servicios:not([data-scene-off]) .chapter-frame {
  --panel-h: min(33rem, calc(100svh - var(--header-h) - 10rem));
  --track-gap: clamp(1rem, 1.6vw, 1.75rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--track-gap);
  width: max-content;
  max-width: none;
  margin: 0;
  /* Al final de la pista el cierre queda antes del desvanecido y del riel de capítulos. */
  padding-right: calc(14vw + 2rem);
  padding-left: max(4.5rem, calc((100vw - 94rem) / 2));
}

.motion-scenes #servicios:not([data-scene-off]) {
  --scrim: linear-gradient(90deg, rgba(4, 5, 6, 0.72) 0%, rgba(4, 5, 6, 0.28) 38%, rgba(4, 5, 6, 0.18) 70%, rgba(4, 5, 6, 0.5) 100%);
}

.motion-scenes #servicios:not([data-scene-off]) .chapter-heading {
  flex: 0 0 auto;
  width: min(36rem, 40vw);
  height: var(--panel-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.motion-scenes #servicios:not([data-scene-off]) .chapter-title {
  font-size: clamp(2.5rem, min(4.4vw, 8svh), 5.6rem);
}

.motion-scenes #servicios:not([data-scene-off]) .services-list {
  display: flex;
  gap: var(--track-gap);
  margin: 0;
  border: 0;
}

.motion-scenes #servicios:not([data-scene-off]) .services-list > li {
  flex: 0 0 auto;
  width: min(25rem, 30vw);
  height: var(--panel-h);
}

.motion-scenes #servicios:not([data-scene-off]) .service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: rgba(7, 9, 10, 0.74);
  padding: 1.5rem 1.4rem 1.4rem;
  transition: border-color 450ms ease, background 450ms ease;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row::before {
  transition: width 650ms var(--ease-premium), opacity 300ms ease;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row.is-current {
  border-color: var(--hairline-strong);
  background: rgba(9, 11, 13, 0.82);
}

.motion-scenes #servicios:not([data-scene-off]) .service-row.is-current::before {
  width: 45%;
  opacity: 1;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row__identity {
  grid-row: 1 / span 2;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row__number {
  padding-top: 0;
  color: transparent;
  font-size: clamp(2.2rem, 3vw, 3.2rem);
  letter-spacing: 0;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(244, 245, 246, 0.42);
}

.motion-scenes #servicios:not([data-scene-off]) .service-row h3 {
  max-width: none;
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
}

.motion-scenes #servicios:not([data-scene-off]) .service-row__description,
.motion-scenes #servicios:not([data-scene-off]) .service-row__capabilities {
  grid-column: 1;
  padding-left: 0;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row__description {
  grid-row: 3;
  align-self: start;
}

.motion-scenes #servicios:not([data-scene-off]) .service-row__capabilities {
  grid-row: 4;
}

.motion-scenes #servicios:not([data-scene-off]) .services-closing {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
  width: min(22rem, 28vw);
  height: var(--panel-h);
  border-left: 1px solid var(--hairline);
  padding: 0 0 0 1.75rem;
}

/* ---------- 03 Inmersivo: los modos de visión ---------- */

.motion-scenes #inmersivo:not([data-scene-off]) {
  --scrim: linear-gradient(90deg, rgba(4, 5, 6, 0.95) 0%, rgba(4, 5, 6, 0.7) 30%, rgba(4, 5, 6, 0) 46%, rgba(4, 5, 6, 0) 72%, rgba(4, 5, 6, 0.6) 100%);
}

.motion-scenes #inmersivo:not([data-scene-off]) .modes-dock {
  display: block;
}

.motion-scenes #inmersivo:not([data-scene-off]) .specimen-window {
  --mark: rgba(244, 245, 246, 0.36);
  --mark-size: 0.9rem;
  --mark-gap: 0;
  position: relative;
  height: min(62svh, 36rem);
  background:
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) left var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) left var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) right var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) top var(--mark-gap) right var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) left var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) left var(--mark-gap) / 1px var(--mark-size) no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) right var(--mark-gap) / var(--mark-size) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) bottom var(--mark-gap) right var(--mark-gap) / 1px var(--mark-size) no-repeat;
}

.motion-scenes #inmersivo:not([data-scene-off]) .specimen-window .viewer-slot {
  inset: 2.5rem 1.5rem 1.5rem;
}

.mode-label {
  position: absolute;
  top: 0.9rem;
  left: 1.2rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Línea de escaneo de los modos: la mueve la escena junto con el corte del shader. */
.motion-scenes #inmersivo:not([data-scene-off]) .mode-scan {
  position: fixed;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(244, 245, 246, 0.82) 18%, rgba(244, 245, 246, 0.82) 82%, transparent);
  box-shadow: 0 0 22px rgba(220, 228, 232, 0.22);
  opacity: 0;
  pointer-events: none;
}

.motion-scenes #inmersivo:not([data-scene-off]) .systems-readout {
  background: rgba(7, 9, 10, 0.62);
  backdrop-filter: none;
}

.motion-scenes #inmersivo:not([data-scene-off]) .systems-readout__header {
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.motion-scenes #inmersivo:not([data-scene-off]) .systems-readout dl > div {
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.motion-scenes #inmersivo:not([data-scene-off]) .systems-readout dl > div.is-current {
  opacity: 1;
}

.motion-scenes #inmersivo:not([data-scene-off]) .systems-readout dd span::after {
  transform: scaleX(var(--fill, 1));
  transform-origin: left;
}

/* Etiquetas del plano técnico: las coloca la escena 3D sobre puntos de la marca. */
.motion-scenes .blueprint-labels {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.blueprint-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -0.45em;
  color: rgba(244, 245, 246, 0.78);
  font-family: var(--font-tech);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-999px, 0, 0);
}

@media (min-width: 1025px) {
  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame--modes {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr) minmax(16rem, 0.74fr);
    grid-template-areas: "heading specimen readout";
    gap: clamp(1.5rem, 2.6vw, 3rem);
    align-items: center;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame--modes > .chapter-heading {
    grid-area: heading;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame--modes > .systems-readout {
    grid-area: readout;
    padding: 1.25rem 1.3rem;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame--modes > .modes-dock {
    grid-area: specimen;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-title {
    font-size: clamp(2.4rem, min(3.7vw, 7.4svh), 4.9rem);
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .systems-readout dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }
}

/* ---------- Palabra gigante: capa decorativa bajo el lienzo 3D ---------- */

.motion-scenes .giant-words {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

/* Cada palabra tiene su carril: la máscara queda fija mientras la palabra se desliza. */
.giant-word-lane {
  position: absolute;
  inset: 0;
}

/* En pantalla ancha, "INTENCIÓN" vive detrás de la A y la tarjeta, no detrás del título. */
.giant-word-lane[data-giant-lane="intencion"] {
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 64%);
}

.giant-word {
  position: absolute;
  top: 50%;
  left: 0;
  color: transparent;
  font-family: var(--font-tech);
  font-size: clamp(8rem, 23vw, 30rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.8;
  white-space: nowrap;
  opacity: 0;
  -webkit-text-stroke: 1px rgba(244, 245, 246, 0.15);
}

.giant-word[data-giant-word="servicios"] {
  top: 54%;
}

/* ---------- Tableta y móvil: la tarjeta se fija sola, debajo del encabezado ---------- */

@media (max-width: 1024px) {
  .motion-scenes #intencion {
    --scene-len: 3.6;
  }

  .motion-scenes #inmersivo {
    --scene-len: 4;
  }

  .motion-scenes #intencion:not([data-scene-off]) > .scene-stage,
  .motion-scenes #inmersivo:not([data-scene-off]) > .scene-stage {
    position: relative;
    height: 100%;
    overflow: visible;
  }

  .motion-scenes #intencion:not([data-scene-off]) > .scene-stage::before,
  .motion-scenes #inmersivo:not([data-scene-off]) > .scene-stage::before {
    content: none;
  }

  /* Arriba, no centrado: `align-content` ya aplica a bloques y la sección es muy alta. */
  .motion-scenes #intencion:not([data-scene-off]) .chapter-frame,
  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame {
    display: block;
    align-content: normal;
    height: 100%;
    padding-top: calc(var(--header-h) + 3rem);
    padding-bottom: 4rem;
  }

  /* Se fija debajo de los controles ANT / SIG, que en tableta y móvil van arriba. */
  .motion-scenes #intencion:not([data-scene-off]) .viewer-dock,
  .motion-scenes #inmersivo:not([data-scene-off]) .modes-dock {
    position: sticky;
    top: calc(var(--header-h) + 4.25rem);
    margin-top: 2.5rem;
  }

  .motion-scenes #intencion:not([data-scene-off]) .principles-panel {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .systems-readout {
    margin-top: 2.5rem;
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .specimen-window {
    height: min(52svh, 30rem);
  }

  .motion-scenes #servicios:not([data-scene-off]) .chapter-heading {
    width: min(34rem, 62vw);
  }

  .motion-scenes #servicios:not([data-scene-off]) .services-list > li {
    width: min(24rem, 54vw);
  }

  .motion-scenes #servicios:not([data-scene-off]) .services-closing {
    width: min(22rem, 50vw);
  }

  .motion-scenes #servicios:not([data-scene-off]) .scene-slot--gallery {
    top: 18%;
    left: 10%;
    width: 80%;
    height: 60%;
  }

  .giant-word {
    top: 38%;
    font-size: clamp(5.5rem, 30vw, 14rem);
  }

  .giant-word[data-giant-word="servicios"] {
    top: 50%;
  }
}

@media (max-width: 820px) {
  .motion-scenes #inicio {
    --scene-len: 1.3;
  }

  .motion-scenes #servicios {
    --scene-len: 3.8;
  }

  .motion-scenes .chapter--hero:not([data-scene-off]) .chapter-frame {
    padding-bottom: 2.5rem;
  }

  .motion-scenes #servicios:not([data-scene-off]) > .scene-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent);
  }

  .motion-scenes #servicios:not([data-scene-off]) .chapter-frame {
    --panel-h: min(31rem, calc(100svh - var(--header-h) - 9.5rem));
    padding: calc(var(--header-h) + 3.5rem) 9vw 3rem;
  }

  .motion-scenes #servicios:not([data-scene-off]) .chapter-heading,
  .motion-scenes #servicios:not([data-scene-off]) .services-list > li,
  .motion-scenes #servicios:not([data-scene-off]) .services-closing {
    width: 82vw;
  }
}

@media (max-width: 560px) {
  .motion-scenes .chapter--hero:not([data-scene-off]) .chapter-frame {
    padding-top: calc(var(--header-h) + 3.4rem);
    padding-bottom: 4.75rem;
  }

  .motion-scenes #intencion:not([data-scene-off]) .chapter-frame,
  .motion-scenes #inmersivo:not([data-scene-off]) .chapter-frame {
    padding-top: calc(var(--header-h) + 2.6rem);
  }

  .motion-scenes #intencion:not([data-scene-off]) .viewer-window {
    height: clamp(10rem, 31svh, 16rem);
  }

  .motion-scenes #inmersivo:not([data-scene-off]) .specimen-window {
    height: min(46svh, 24rem);
  }

  .motion-scenes #servicios:not([data-scene-off]) .service-row {
    gap: 0.85rem;
    padding: 1.15rem 1.1rem 1.1rem;
  }

  .motion-scenes #servicios:not([data-scene-off]) .service-row__number {
    font-size: 2rem;
  }

  .motion-scenes #servicios:not([data-scene-off]) .service-row__capabilities {
    gap: 0.35rem;
  }
}

/* ---------- 04 Proceso: la A se construye paso a paso ---------- */

.motion-scenes #proceso {
  --scene-len: 3;
}

.motion-scenes #proceso:not([data-scene-off]) .scene-slot--process {
  top: 13%;
  right: 6%;
  width: 40%;
  height: 46%;
}

.motion-scenes #proceso:not([data-scene-off]) .chapter-heading {
  max-width: min(52rem, 54%);
}

.motion-scenes #proceso:not([data-scene-off]) .chapter-title {
  font-size: clamp(2.4rem, min(4.2vw, 7.4svh), 5.4rem);
}

.motion-scenes #proceso:not([data-scene-off]) .process-track {
  position: relative;
  margin-top: clamp(1.5rem, 5svh, 3.5rem);
}

/* La pista se dibuja con el scroll sobre su borde superior. */
.motion-scenes #proceso:not([data-scene-off]) .process-track::after {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--bone);
  content: "";
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

.motion-scenes #proceso:not([data-scene-off]) .process-track li {
  min-height: 0;
  opacity: 0.42;
  transition: opacity 450ms ease;
}

.motion-scenes #proceso:not([data-scene-off]) .process-track li > div {
  margin-top: clamp(1.5rem, 4svh, 3rem);
}

.motion-scenes #proceso:not([data-scene-off]) .process-track li.is-done,
.motion-scenes #proceso:not([data-scene-off]) .process-track li.is-current {
  opacity: 1;
}

.motion-scenes #proceso:not([data-scene-off]) .process-track li.is-current::before {
  background: var(--silver);
  box-shadow: 0 0 12px rgba(212, 216, 219, 0.4);
}

/* ---------- 05 Trabajo y 06 Contacto: la sección fluye, solo la proyección se fija ---------- */

.motion-scenes #trabajo {
  --reel-len: 3.4;
}

.motion-scenes #contacto {
  --reel-len: 2.4;
}

.motion-scenes #trabajo:not([data-scene-off]),
.motion-scenes #contacto:not([data-scene-off]) {
  height: auto;
  padding: 0 0 7.5rem;
}

.motion-scenes #contacto:not([data-scene-off]) {
  padding-bottom: 10rem;
}

.motion-scenes #trabajo:not([data-scene-off])::before,
.motion-scenes #contacto:not([data-scene-off])::before {
  content: "";
}

.motion-scenes #trabajo:not([data-scene-off]) .chapter-frame,
.motion-scenes #contacto:not([data-scene-off]) .chapter-frame {
  height: auto;
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: 0;
}

.motion-scenes [data-scene]:not([data-scene-off]) .reel {
  position: relative;
  display: block;
  height: calc(100vh + var(--reel-len, 2) * 100vh);
  height: calc(100lvh + var(--reel-len, 2) * 100svh);
}

.reel-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  overflow: clip;
}

.reel-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(50% 50% 50% 50%);
}

.reel-slide img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.88);
}

.reel-slide::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 5, 6, 0.9) 0%, rgba(4, 5, 6, 0.35) 42%, rgba(4, 5, 6, 0.1) 70%),
    linear-gradient(90deg, rgba(4, 5, 6, 0.55), transparent 55%);
  content: "";
}

.reel-slide figcaption {
  position: absolute;
  z-index: 1;
  right: max(1.5rem, calc((100vw - 94rem) / 2));
  bottom: clamp(5rem, 15svh, 9rem);
  left: max(1.5rem, calc((100vw - 94rem) / 2));
  display: grid;
  justify-items: start;
  gap: 0.9rem;
}

.reel-slide figcaption .micro-label {
  color: var(--muted);
}

.reel-slide strong {
  font-size: clamp(3rem, 8vw, 8.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.reel-slide em {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-style: normal;
  line-height: 1.4;
}

.macro-caption {
  position: absolute;
  z-index: 1;
  bottom: clamp(5rem, 12svh, 8rem);
  left: max(1.5rem, calc((100vw - 94rem) / 2));
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .motion-scenes #trabajo:not([data-scene-off]) .chapter-frame,
  .motion-scenes #contacto:not([data-scene-off]) .chapter-frame {
    padding-top: calc(var(--header-h) + 3rem);
  }

  .reel-slide figcaption {
    bottom: clamp(5rem, 14svh, 7rem);
  }

  /* En vertical los pósters (16:9) se muestran completos arriba, sin recortar su texto. */
  .reel-slide {
    background: var(--ink);
  }

  .reel-slide img {
    height: 62%;
    margin-top: calc(var(--header-h) + 1rem);
    object-fit: contain;
    object-position: center top;
  }
}