La sección que las 5 refs shippean y que va justo tras el hero: una afirmación
de producto junto a un screenshot, alternando lados fila a fila. Otra
disposición que la rejilla de iconos de `feature-grid`, así que block hermano
(decisión del usuario), no una variante turbia dentro de aquél.
Compound —la `.Row` se repite—: `<FeatureSplit>` + `.Row` (`reversed`, slot
`media`) + `.Eyebrow` + `.Title` + `.Text` + `.Features`/`.Feature` (checklist)
+ `.Actions`. El block coloca; la app pone la copy y la media.
- `reversed` mueve la media al lado de inicio vía `grid-column` (Box expone
`gridColumn`/`order`), dejando la copy SIEMPRE primera en el DOM — el orden de
lectura y el foco no cambian aunque el screenshot salte de lado.
- El check de cada `.Feature` es decorativo (`aria-hidden`): la palabra lleva el
significado.
- La media se COMPONE con el primitivo `Mockup`: la demo enseña cromo de
navegador (dashboard) y de teléfono (app), cerrando el hueco de «tratamiento
de media» del dossier de raíz en vez de falsearlo.
`.Row` usa un tipo limpio (no `HTMLAttributes`) porque su slot `media` colisiona
con el atributo HTML homónimo; el resto de sub-partes extienden los props del
componente canon que envuelven (lección de feature-grid).
Demo (`web/routes/blocks/feature-split/`): full-bleed + ruta `preview`, con
control del nº de filas y del lado inicial; 3 filas con Mockup navegador/teléfono.
Verificado en navegador (Playwright, módulos frescos): filas alternas en
claro/oscuro × LTR/RTL, `reversed`, el orden de lectura copy-primero, y los dos
cromos de Mockup. `blocks:check` verde (4 blocks) · `svelte-check` sin errores
propios.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
