---
id: grid-logos
status: proposed
kind: new
sprint: 5

target:
  block: acf/grid-logos
  based_on: sek-content-grid
  see: https://institucioneducativaseki5.sg-host.com/bienvenida/

evidence:
  used_in:
    - output/pages/sek-schools/logros-y-calificaciones.html
  ux: ux/output/pages/sek-schools/logros-y-calificaciones.html (rama ux/irene)

fields:
  - { name: title, type: text, note: "un bloque por grupo: nacionales / internacionales" }
  - { name: items, type: repeater, sub: [
        { name: logo, type: image, note: "SVG o PNG con fondo transparente" },
        { name: name, type: text, required: true, note: "es el alt del logo: nunca vacío" },
        { name: url,  type: link, required: false, label: "Enlace a la universidad (opcional)" },
      ] }

tokens: [text-static-primary, text-static-brand, text-static-secondary]

behaviour:
  - Rejilla, no carrusel: son 18 destinos y se leen mejor de un vistazo (2 col. en móvil, 3 en tablet, 5 en escritorio)
  - El nombre es el `alt` del logo y se pinta debajo: sin logo, la celda se queda con el nombre y no se rompe
  - Con `url`, aparece "Ver universidad" con flecha diagonal; el enlace abre en pestaña nueva (`target="_blank"` + `rel="noopener noreferrer"`)
  - La flecha diagonal es decorativa; el aviso de que se abre fuera va en texto para lector de pantalla
  - Los logos se normalizan por alto (la zona de logo mide lo mismo en todas las celdas), no por ancho

accept:
  - Todas las celdas alinean el logo a la misma altura, con logos de proporciones dispares
  - Sin `url`, la celda no deja hueco donde iría el enlace
  - Sin `logo`, se lee el nombre y la rejilla no descuadra
  - Un lector de pantalla anuncia el nombre de la universidad y que el enlace abre en otra pestaña
  - En 375 la rejilla no genera scroll horizontal

built:
  branch:
  commit:
  notes:
---

# Rejilla de logos con nombre y enlace (SEK-CON-006)

*Logros y calificaciones* lista los destinos universitarios en dos grupos —10 nacionales y 8
internacionales— con **logo, nombre debajo y un enlace opcional** a la web de cada una. El
sistema no tiene nada parecido: `sek-cert` es un carrusel de acreditaciones que solo muestra el
logo, sin nombre, y colorea los slides por posición.

Va como rejilla y no como carrusel a propósito: con 18 destinos, el carrusel esconde la mayoría
y obliga a pasar; en rejilla se ven todos de una vez, que es de lo que trata la sección.

## Los logos

Los 18 están descargados en `output/assets/img/universidades/`, con su procedencia en el
`FUENTES.md` de esa carpeta. Se tomaron de la web oficial de cada universidad y, cuando no los
exponían sueltos, de Wikimedia Commons.

**Son marcas registradas**: sirven para ver la maqueta, pero antes de publicar hay que
confirmar con cada institución la versión autorizada y sus normas de uso. Conviene que el campo
`logo` sea editable en el CMS precisamente por eso.

## Casuística

Los logos de universidad vienen en proporciones muy dispares —escudos verticales, marcas
apaisadas—. Normalizar por alto y centrar es lo que evita que la fila se vea rota. Y el enlace
tiene que ser opcional: no todas las fichas tendrán web que enlazar, o el cliente puede preferir
no sacar al usuario del sitio.