---
id: card-scrim-overlay
status: proposed
kind: fix
sprint: 5                        # pestaña "Sprint Nueva Arquitectura" del sheet de arquitectura

target:
  block: sek_c_card             # Card/Content, variante Color=Alpha
  based_on: sek-cross, sek-content-grid
  see: https://institucioneducativaseki5.sg-host.com/curso-escolar-sek-alboran/

evidence:
  used_in:
    - output/pages/sek-schools/educacion-infantil.html
  figma: "1:1027, 1:1028"

fields:
  - { name: scrim_height, type: text, default: "60%", label: "Alto del velo" }

tokens: [Overlay/Card/Bottom, background-dark]

behaviour:
  - **El velo vive dentro de la caja de texto**, no sobre la card entera (Figma `1714:54387`,
    donde el contenedor se llama *Card*). Así ocupa solo lo que ocupa el texto y el resto de la
    foto se ve limpio
  - El velo es el token **Overlay/Card/Bottom**:
    `linear-gradient(180deg, rgba(29,31,33,0) 0%, rgba(29,31,33,.40) 100%)` con `mix-blend-mode: multiply`
  - El desenfoque **progresa de 0 a 24 px** de arriba abajo. Se consigue apilando cuatro capas
    con `backdrop-filter` creciente (2 / 6 / 12 / 24 px), cada una enmascarada en su franja
  - Lo publicado hoy es un gradiente `from-black/45 via-black/15` más un `.sek-progressive-blur`
    de 24 px planos con una sola máscara — que no es un blur progresivo

accept:
  - Por encima de la caja de texto, la foto se ve **sin velo ni desenfoque**
  - En la franja intermedia no se ve la foto nítida y la desenfocada a la vez
  - El color del velo es `#1d1f21`, no negro puro
  - Sin `backdrop-filter` (navegador antiguo) el gradiente por sí solo sigue dando fondo al texto
  - **Decisión de UI (20/08): sin desenfoque**. El `backdrop-filter` progresivo no se reproduce
    en navegador como en Figma —en una franja de 200 px acaba aplanando la foto—, así que el
    velo es solo el degradado de color, en `multiply` y algo más marcado:
    `rgba(29,31,33,0)` → `.55` al 45 % → `.7` abajo. Figma sigue definiendo blur; si dev lo
    reproduce con fidelidad, se recupera

built:
  branch:
  commit:
  notes:
---

# El velo de las cards a sangre

Dos diferencias con Figma, las dos visibles: el **color** (negro puro en vez de `#1d1f21`, y
sin `multiply`) y el **desenfoque**, que en el theme es plano.

## Contraste — decisión pendiente

Con el overlay de Figma (0.40) el titular blanco **baja de AA sobre fotos claras**; el del
theme tapaba más (0.45 con parada intermedia). Hace falta decidir entre subir la opacidad del
token, ampliar el alto del velo o dar `text-shadow` al titular. La maqueta va hoy con el valor
de Figma, tal cual.