---
id: highlights-tira-larga
status: proposed
kind: refinement
sprint: 5                        # pestaña "Sprint Nueva Arquitectura" del sheet de arquitectura

target:
  block: sek_c_stats            # highlights / insights
  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: "1394:50838"

fields:
  - { name: align, type: select, choices: [left, center], default: left, label: "Alineación del item" }
  - { name: stagger, type: boolean, default: true, label: "Escalón entre celdas" }
  - { name: full_width, type: boolean, default: false, label: "Tira a ancho completo" }

tokens: [background-medium, surfaces-accent-cream]

behaviour:
  - El item nace alineado a la izquierda (icono de 64 px arriba, texto debajo, `items-start`).
    La variante `center` es para celdas de cifra, donde el dato manda sobre la etiqueta
  - `stagger` es el escalón 0/50/100 px que hoy aplica el CSS por `nth-child`. Está pensado
    para tres celdas: a partir de la cuarta todas se quedan a 100 px y el efecto se pierde
  - `full_width` saca la tira de la columna izquierda del heading y la baja a una fila propia,
    bajo el texto, a ancho completo
  - La superficie de la celda debe contrastar con el fondo de la sección: crema sobre blanco,
    blanca sobre crema. Hoy es siempre crema y sobre fondo crema la celda desaparece

accept:
  - Con seis celdas y `full_width`, cada una mide 204 px en 1440 y ninguna etiqueta se parte
    en más de dos líneas
  - Con `stagger: false` todas las celdas arrancan a la misma altura
  - La celda siempre se distingue del fondo de la sección

built:
  branch:
  commit:
  notes:
---

# Tira de highlights de más de cuatro celdas

El bloque está calibrado para **tres** celdas dentro de la mitad izquierda del heading. Con
seis (las competencias de Educación Infantil) cada celda cae a 155 px, el texto sale en tiras
de dos palabras y la última se corta.

En la maqueta se resuelve con estilos en línea (`grid-column:1/-1; grid-row:3` y
`margin-top:0`). En el theme deberían ser los campos de arriba, que además dejan el escalón
como decisión editorial y no como una regla fija del CSS.