---
id: highlights-escalon-scroll
status: proposed
kind: new
sprint: 5                        # pestaña "Sprint Nueva Arquitectura" del sheet de arquitectura

target:
  block: sek_c_stats
  based_on: sek-content-highlights
  see: https://institucioneducativaseki5.sg-host.com/desarrollo-integral-del-talento/

evidence:
  used_in:
    - output/pages/sek-schools/educacion-infantil.html
  figma: "1708:35304"

fields:
  - { name: settle_on_scroll, type: boolean, default: true, label: "El escalón se resuelve al hacer scroll" }
  - { name: stagger_px, type: number, default: 96, label: "Escalón por celda (px)" }

tokens: []

behaviour:
  - Las celdas **nacen escalonadas** —96 px por celda, hasta la quinta— y se van alineando
    conforme la tira sube. El escalón del bloque publicado (0 / 50 / 100) se queda corto: con
    tan poco recorrido la recolocación no se percibe
  - Cuando el borde superior de la tira llega a la **mitad del viewport**, todas están alineadas
  - El recorrido se reparte entre el borde inferior de la ventana y esa mitad: así la
    recolocación se ve mientras se baja, en vez de resolverse de golpe
  - El desplazamiento va en el elemento interior de cada celda, porque el `li` ya lo usa el
    reveal del theme
  - Con `prefers-reduced-motion: reduce` no hay escalón: todo nace alineado

accept:
  - A media pantalla las celdas están alineadas por arriba, sin excepción
  - El movimiento sigue al scroll (no es una transición de duración fija que arranca al entrar)
  - Sin JavaScript, las celdas se ven alineadas y legibles

built:
  branch:
  commit:
  notes:
---

# El escalón se deshace al hacer scroll

Hoy el escalón lo pinta el CSS con `margin-top` por `nth-child` y se queda fijo. La referencia
lo trata como **movimiento**: es un rasgo de entrada que se resuelve, no una composición
estática — y sirve además para que la tira quede alineada justo cuando el lector la está
leyendo.

En la maqueta va con un script propio de ~25 líneas que interpola `translateY` según la
posición de la tira. Sin dependencias.