Esto no es un catálogo de páginas —esas están en Páginas— sino lo que puede dar problemas: lo que está roto en staging, lo que encontramos mal y tuvimos que corregir, y los criterios que hay que mantener al migrar.
La entrega en sí vive en ui/output
con las once páginas, y el detalle completo en
registro-dev.md.
Cada acuerdo de diseño es un chequeo automático que se pasa a las once en cada compilación, y la maqueta no se publica si alguna falla. Si algo os chirría en una página, lo más probable es que no sea un descuido sino un criterio. Estas son las 27 reglas — pasad el ratón para ver el motivo de cada una:
Están rotos en staging ahora mismo. Lo que veis en las maquetas funciona porque lo hemos parcheado en nuestra copia, pero el theme sigue igual.
| Qué | Dónde | Detalle |
|---|---|---|
El contador animado (data-sek-count) se come la coma decimal: una cifra como "13,5" cuenta hasta "135" | sek-ui.js, función runStatCount — global, no solo Logros | El parseo (raw.match(/\d[\d.,]*/) + parseInt(digits.replace(/[.,]/g,''),10)) trata la coma como separador de miles, no decimal. Cualquier cifra no entera en una celda con data-sek-count sale mal. En Logros se evita quitando el atributo cuando el valor lleva coma; si aparecen más casos, el parseo del script necesita distinguir coma decimal de coma de miles |
| El overtitle de sección "roba" el primer teléfono de una lista de contacto | 08-sek-colegio-info — mismo bloque que Residencias | dividerOvertitle() (global, en pulido()) busca el primer <span> de texto suelto dentro de .sek-section-heading para convertirlo en overtitle. Si la sección no trae uno propio, encuentra el (+34) del primer <a href="tel:…"> de la lista de contacto (que sí vive dentro de .sek-section-heading en esta plantilla) y lo desplaza arriba, partiendo el teléfono en dos. En Logros se resuelve insertando un overtitle real ("Contacto") antes que el teléfono en el documento. Residencias probablemente tiene el mismo bug — no revisado hoy |
sek-banner-cta publica su titular como div.font-title, no h2 — afecta a los 2 banner-cta de esta página | SISA, Contacto | Mismo bug de los otros 5 sitios ya registrados; receta [banner-cta-heading](new/banner-cta-heading.md) |
La card "Etapas educativas y Programas IB" del sek-cross lleva el sello de B Corp como imagen | prefooter, todas las páginas | No le corresponde: es contenido cargado, no del componente. En la maqueta se le pone una foto normal. Conviene corregirlo en el editor |
sek-banner-cta se ha quedado sin heading: el titular es un div.font-title | banner-cta en todas sus instancias | La sección desaparece del árbol de encabezados y del salto por landmarks. Ocurre en 5 sitios del catálogo. Receta [banner-cta-heading](new/banner-cta-heading.md). En las maquetas el titular vuelve a h2 |
bg-sekSchools-surfaces-accent-greendeep no existe: la utilidad emitida es greenDeep, con D | tailwind-built.css | Quien escriba la clase en minúsculas se queda sin fondo y sin aviso. Conviene emitir también el alias en minúsculas o documentarlo |
El salto del anchor bar lo cancela cualquier wheel | assets/js/sek-ui.js | Lenis aborta su scrollTo ante cualquier evento de rueda, y la inercia del trackpad sigue emitiendo wheel segundos después de soltar. Medido: un solo wheel de 1 píxel lo cancela. Arreglo probado: lock: true, force: true en las dos llamadas a window.lenis.scrollTo() (smoothScrollToEl y correctTo, ~2557 y ~2573). Aplicado ya en la copia de UI para poder revisar; falta llevarlo al theme. |
No estaba en el sistema o venía mal del bloque publicado, y lo hemos corregido en la maqueta. Si reconstruís esa parte desde el theme, el fallo vuelve salvo que se arregle en origen.
| Qué | Dónde | Detalle |
|---|---|---|
| La píldora del anchor bar no acompaña al desplazamiento | sek-anchornav, global | .sek-anchornav-pill cuelga de la barra y se posiciona respecto a ella. Si quien se desplaza es la lista, los ítems se mueven y la píldora se queda clavada a la izquierda, tapando el texto. El scroll tiene que ocurrir en el mismo contenedor que la píldora |
La tinta inversa sobrevive al cambio de fondo: muchos bloques se publican en versión inversa (text-…-inverse) y al reutilizarlos sobre crema o blanco el texto se queda en #fbfbfb. Contraste 1,1 — ilegible | global (25 casos en esta página) | La tinta debe depender de la superficie del bloque, no venir clavada en el marcado. Ojo: en cards sobre foto la inversa sí es la correcta, aunque la sección sea clara |
| Mapa con las coordenadas de Alborán (36,71 / −2,79 · Almería) | Residencias · Ubicación | Heredadas de la plantilla. Las de SEK-El Castillo son 40.473333, −3.940556 (publicadas por el colegio en *Dónde estamos*) |
La entrada (data-sek-reveal) va en el propio .sek-map | Residencias · Ubicación | Si el mapa lleva una pieza superpuesta, esta no acompaña el movimiento y se ve descolgada durante toda la animación. El reveal debe ir en el envoltorio |
Titular de sección a w-[50%] shrink-0 se sale 32 px de la retícula si la columna de contenido es fija | Residencias · Ubicación | 680 + 128 + 584 = 1392 sobre un contenedor de 1360. Debe ser flex:1 1 auto; min-width:0 |
Los superíndices salen planos: el reset deja sup en vertical-align:baseline | global (visto en Residencias · Ubicación) | "40.000 m²" se lee con el dos a media altura. Afecta a cualquier unidad al cuadrado o cúbica. Arreglo: sup{vertical-align:baseline;position:relative;top:-.35em;font-size:.68em;line-height:0}. Ojo, vertical-align:super sube demasiado y despega el dígito de la unidad: la elevación se marca a mano (~⅓ de eme) |
| Los mapas apuntaban a Almería (36,71 / −2,79): el bloque viene de Alborán y arrastra sus coordenadas. También traía el teléfono del colegio | sek-colegio-info | Los datos de mapa y contacto deben venir del centro, no del bloque de origen |
Ola y reveal en el mismo nodo: al marcar la card con data-sek-wave-col teniendo ya data-sek-reveal, los dos gestos escriben su transform y la entrada da saltos —y el texto de la card llega a verse cortado mientras dura—. El theme separa capas: la ola en el contenedor, el reveal en la card | animación | La ola nunca en el mismo nodo que el reveal |
El splitter de titulares parte el nombre del centro: hace replace(/\s+/g, ' ') y \s incluye el espacio duro, así que lo convierte en espacio normal y "Residencia SEK-El Castillo" rompe como SEK-El / Castillo. Regla: el nombre del centro no se parte nunca | sek-motion.js | Que el splitter respete \u00A0 (dividir por espacios normales, no por \s) y no trocee elementos marcados nowrap |
Dos animaciones compitiendo por el mismo transform: la entrada escalonada iba con un script propio y el theme tiene su ola (data-sek-wave), con rAF compartido con el parallax. Las cards entraban a saltos | animación | La entrada usa la ola del theme; ajustar la amplitud es un cambio global del componente |
| El velo se aplicaba a todas las cards del Cross, y en el prefooter conviven dos tipos: a sangre y con caja de color. Absolutizar la media de las segundas las rompía | sek-cross | El velo y la foto a sangre solo en la variante alpha |
El theme ya tiene contador (data-sek-count) en las cifras: marcarlas también con el nuestro hacía que se pisaran —el nuestro ponía 0 y el suyo lo tomaba como valor final— y se quedaban en cero. Donde ya hay contador del theme, no se toca | animación | El contador propio solo para nodos nuevos, como los numerales de la lista |
| El escudo de los ejes tiene dos superficies, una para el contenido y otra para la parte del icono, con su propio fondo cada una: se pueden desincronizar (pasó al cambiar solo una) y dejan costura entre ambas. Basta una superficie en el contenedor, con el radius inferior | sek-cert | Una sola superficie por card; las capas internas, transparentes |
El script del contador no se ejecutaba: iba dentro del sub-documento del módulo, y un <script> que llega como HTML dentro de otro elemento no corre. Los números se quedaban en cero | animación | Inyectarlo una vez en el documento, no por módulo |
| El escudo crema de los ejes se leía como un hueco en la rejilla: pasa al blanco de la paleta | sek-cert | — |
El velo de las cards no oscurecía: la capa de color lleva mix-blend-mode: multiply y el contenedor tenía z-index, que crea contexto de apilamiento — el blend se mezclaba consigo mismo y no con la foto. Sin z-index funciona | velo de cards a sangre | No poner z-index en la capa del velo: el orden del DOM ya la coloca sobre la imagen |
El título del acordeón se queda a 16 px y peso normal si el texto se escribe en el span contenedor: el estilo vive en un span interno con font-title | sek-programas | Que el campo escriba en el nodo correcto |
Hay iconos del theme con el grosor en sus path o g, no en el svg, y con valores propios (1,6 · 1,7 · 1,8). Tocar solo el svg raíz deja fuera a la mitad del set | iconos de todo el sitio | Normalizar el atributo en el svg y en sus formas |
El trazo escala con el tamaño del icono: stroke-width va en unidades del viewBox, así que el mismo 1 se pinta a 2 px en un icono de 48 y a 0,83 en uno de 20. Se ve en el + del acordeón | iconos de todo el sitio | vector-effect="non-scaling-stroke" en el svg y sus formas: el trazo pasa a medirse en píxeles de pantalla y deja de depender del tamaño |
| Los estilos de texto se desvían de Figma: el overtitle lleva el tracking al revés (−2 % frente al +2 % de Figma) y con interlineado 1,6 en vez de 1,3; los titulares de 24 y 32 van a 1,3 cuando el estilo es 1,2; el cuerpo, a 1,5 con tracking negativo cuando debe ser 1,4 y sin tracking | definición de estilos | Receta estilos-texto-figma |
| La foto de una card a sangre debe cubrir toda la card: si la imagen solo ocupa la mitad superior, el velo de la caja de texto se aplica sobre el fondo del bloque y sale un rectángulo gris en vez de la foto difuminada | sek-cross | La media de la variante alpha va en position:absolute; inset:0 |
| El Cross publica su cabecera sin overtitle: no hay nodo donde escribirlo | sek-cross | Campo de overtitle con su regla, como el resto de módulos |
| Al clonar un item de lista/cross, el clon arrastra el contenido del anterior si ya se había rellenado (descripciones repetidas, numeral fijo en 01) | repeaters | Renderizar cada item desde plantilla limpia |
El velo de las cards a sangre no es el de Figma: hoy son un gradiente from-black/45 via-black/15 y un .sek-progressive-blur de 24 px planos con máscara. Un blur único enmascarado no progresa: en la franja intermedia se ven a la vez la foto nítida y la foto desenfocada | .sek-progressive-blur, cards Color=Alpha | Token Overlay/Card/Bottom (rgba(29,31,33,0)→.40, multiply) y blur progresivo 0→24 px apilando capas con máscara escalonada. Receta card-scrim-overlay |
Clonar un item del acordeón arrastra sus id: cuatro paneles con el mismo id/aria-controls dejan el acordeón inutilizable para lector de pantalla | sek-programas | Los id deben generarse por índice al renderizar el repeater |
| El hero de "Dónde sucede el aprendizaje" no trae bajada: al volcar el subtítulo se perdía sin avisar | sek-hero | La bajada debe existir siempre en el bloque, aunque nazca vacía |
| Las anclas no llevaban a la sección: el arrastre de la barra se comía el clic | _staging/lib.mjs, todas las páginas con anchor bar | Era nuestro, no del theme. El gesto de arrastrar la barra pedía setPointerCapture en el pointerdown, y eso redirige a la barra todos los eventos de puntero, incluido el click que el navegador genera al soltar: el enlace no lo recibía nunca, ni se ponía el hash. Solo pasa con ratón o trackpad; un .click() sintético no atraviesa los eventos de puntero, y por eso las pruebas daban verde. Ahora la captura se pide cuando el gesto supera el umbral de arrastre (4 px), así que un clic limpio llega entero. Vigilado por clic-no-capturado. |
Decisiones de diseño ya cerradas que la maqueta aplica en todas. Están aquí porque al migrar hay que mantenerlas: si se pierden, se nota.
| Qué | Dónde | Detalle |
|---|---|---|
Símbolo % (y cualquier sufijo) en cifras: más pequeño y en la base, no al tamaño del número | Logros hoy; criterio nuevo, no aplicado aún a las otras 10 páginas | Helper cifra() en _staging/lib.mjs. Generaliza el <span style="font-size:.5em"> que el propio wireframe ya usaba a mano para la nota EBAU |
Dos gestos distintos, no uno: la ola (data-sek-wave-col) y la entrada (data-sek-reveal) | animación, global | La ola desplaza la pieza de forma permanente y ligada al scroll: es un mosaico, y sobre una rejilla de celdas iguales solo las descuadra. La entrada es fade + 20 px de subida, una vez. En rejillas que deben leerse alineadas: entrada sí, ola no |
| Los enlaces van en negro, no en azul de marca | todas las páginas | Decisión del 24/08. Lo que distingue a un enlace es el subrayado, no el color; el azul se reserva a la marca. Incluye el hover, que saltaba a azul. Sobre superficie oscura siguen en inversa, y los botones conservan su color de marca |
| Los iconos decorativos van en tinta, no en azul: el azul es del enlace | todas las páginas | Si icono y enlace comparten color, el ojo no distingue qué es pulsable |
sek-agenda para cualquier secuencia numerada, no solo la jornada | metodología y "un día en Infantil" | Es el módulo que trae la numeración (Figma 254:31037) |
sek-doble-card tiene dos usos: con sus cards (Figma 23:1454) o solo con media (669:45238) | Infantil, dos módulos | En el primero las cards son el contenido; en el segundo sobran y se retiran. Ojo: el bloque solo publica una imagen, así que la segunda card se queda sin foto |
Una sección y su resumen van juntos (Figma 1334:39205) | "Crecer acompañado" | Cabecera con el texto y, debajo, la rejilla de cuatro. Mismo criterio que en "Preparados" |
| El testimonio se alinea a la izquierda por dentro; lo que se centra es su caja | testimonial | Centrar también el contenido descolocaba comillas, cita y atribución entre sí |
El badge de sek-agenda viene en azul claro del calendario: fuera de ese contexto va en blanco | "Un día en Educación Infantil" | Igual que su bajada y sus descargables de meses, que tampoco aplican |
sek-agenda es el módulo con numeración (Figma 254:31037) | "Así es un día en Educación Infantil" | Badge con el número, título del momento y su descripción. Ojo: viene del calendario del curso y arrastra su bajada y los descargables de meses |
| Un módulo de cabecera y su resumen son un solo bloque | "Preparados para dar el siguiente paso" | Se fusionan en el highlights con texto previo (Figma 820:35493), en vez de encadenar editorial y rejilla |
| La línea del overtitle va al 60 % de opacidad | todas | Con el token a plena opacidad seguía pesando demasiado |
| El testimonial va centrado: caja, comillas, cita y atribución | Infantil | Suelto a la izquierda el bloque queda descompensado |
Los titulares admiten salto de línea explícito (<br>) | UCJC, Estudios y Life Long Learning | Un titular de dos palabras largas se come el ancho de la columna. El volcado detecta el <br> y usa html() en vez de text() |
| Sobre el granate, la línea del overtitle va en blanco translúcido, no en el gris apagado | UCJC, Estudios | El border-static-disabled es para fondos claros |
sek-colegio-info es el módulo Location de la librería (Figma 20:3345): cabecera con tabla de datos y dos mapas | Residencias, Logros | En staging se usa con el teléfono en el overtitle, y por eso no parecía el mismo módulo. El overtitle es para la etiqueta de sección |
| Hay dos prefooters y no son intercambiables | todas | sek-schools: Colegios · Por qué SEK · Bienestar · Etapas educativas · SEK Learning Model · Servicios (instancia de *Bienvenida*). sek institucional: UCJC · Bachillerato Internacional · Colegios internacionales · Ideario · Proyectos Fundación (instancia de *Alumni*). En lib.mjs, prefooter({ marca, excluir }) |
| El prefooter se autoexcluye: no lleva la card de la página que lo muestra | Etapas, Por qué SEK, UCJC | Lo pedía ya la nota UX de Etapas educativas |
Los resúmenes de sección van como highlights con icono (Figma 1685:20601), no como rejilla de cards sueltas | Educación Infantil | Se leen de un vistazo y comparten fondo con la sección que resumen, para que se asocien |
| El texto corrido con varias ideas pasa a lista con un título por punto | Educación Infantil, metodología | Mismo formato que "Así es un día en Educación Infantil" |
| Trazo de icono 1,25 (antes 1,5) y tamaños más contenidos | todas | El icono acompaña al dato, no compite con él |
La regla del overtitle puede ir apagada con el token border-static-disabled | UCJC, Experiencia | La utilidad bg- de ese token no está emitida: se aplica por variable CSS |
| Ritmo del cuerpo: normal, destacado, normal | todas las páginas | El párrafo destacado en medio da respiro vertical. Cuando la sección tiene bajada, la destacada es la bajada y va la primera. En lib.mjs, cuerpo(..., { destaca }) |
Cabecera a dos columnas (Title Section 02, Figma 4:1385) en bloques que solo traen overtitle | testimonial | Sin ella el texto de sección se estira a todo el ancho del bloque y la línea se hace ilegible. cabeceraDoble() antepone el sek-section-heading del content-lg |
Enlaces que salen del sitio: target="_blank" + rel="noopener noreferrer", flecha diagonal decorativa y aviso en texto para lector de pantalla | rejilla de universidades | La flecha sola no dice nada a quien no la ve |
| Textos que el wireframe marca pendientes de redactar se dejan visibles como tales | Educación Infantil (la jornada), Logros (evolución) | No se inventa copy: el hueco tiene que verse en la maqueta para que el cliente lo rellene |
| El subrayado animado necesita contraste en la línea base | migas de todas las páginas | .sek-underline pinta la base en gris fijo (#cfd3d5) y encima el currentColor que crece al hover. Sobre el hero eso es blanco creciendo sobre gris claro: la animación ocurre y no se ve. La maqueta sube esa base a blanco al 35 % solo dentro de .sek-brc. Si el theme parametriza el color de la base, mejor que el override. |
| La rejilla, al número de datos | UCJC, Espacios deportivos, Logros | Los bloques traen las columnas de su ejemplo (el de cifras venía con cinco). Montado con cuatro, la quinta se queda vacía a la derecha y el grupo se lee corrido a la izquierda; justify-content:center no salva nada porque las columnas sí llenan. Lo ajusta columnasSegunDatos() en pulido(), que solo baja y solo escribe la clase si el CSS precompilado la emite. Vigilado por columnas-fantasma. |
| Quien pinta un fondo de marca, pone la tinta | UCJC y las que traigan color de cliente | El granate de UCJC no es una superficie del sistema: se pinta con style inline, y por eso ningún helper de tinta lo veía. Tres bloques llevaban texto negro sobre granate. Ahora lo resuelve superficieDeMarca() (_staging/lib.mjs), que pinta y tiñe, decide por luminancia y respeta las piezas con fondo claro propio. Vigilado por tinta-sobre-marca y superficie-sin-tinta. |
| Las migas, en blanco | todas las páginas | Van siempre sobre el hero, que lleva foto con velo. No lo declaraba ninguna de las siete: heredaban el negro del theme y quedaban gris sobre gris. migasEnBlanco() en pulido(); el nivel actual y el separador, en inverseMuted. |
| Iconos a trazo 1,25 en todo lo que inyecta UI | todas las maquetas | Lucide viene a 2 y canta al lado del texto. El valor lo fijó Guille a mano en UCJC el 24/08 y pasa a ser el del sistema: vive en TRAZO_ICONO (_staging/lib.mjs), no en cada build |
| Overtitle corto, titular largo | todas las páginas nuevas | Cambio de criterio de UX: el overtitle es una etiqueta (registro del anchor bar) y la frase larga va en el h2 |
| Ritmo de fondos: nunca dos secciones seguidas con el mismo | todas las páginas nuevas | Alterna cream #f0eee5 / light #fbfbfb, con el testimonial en #e8e6dd |
La maqueta se separa a propósito de lo publicado. No son errores: cada una dice por qué.
| Qué | Dónde | Detalle |
|---|---|---|
Universidades: contenedor de logo a tamaño fijo + filter:grayscale(1) brightness(0) para normalizar todos a negro | Grids de universidades | Dos de los 18 assets (digipen, columbia-college) traían fondo blanco sólido pintado, no transparente — se procesaron con Pillow para quitarlo antes de aplicar el filtro |
sek-colegio-info reutilizado sin su dirección, teléfono ni mapa (los de SEK-Alborán) | Extraescolares · Contacto | Esta página cubre los siete colegios; la dirección de un solo centro es incorrecta aquí. Se retira todo lo posterior a la cabecera y queda solo título + texto. Mismo bug de origen que ya se registró en Residencias (2026-08-20): el bloque trae los datos de Alborán clavados |
content-welcome--gallery reutilizado sin el "ver más" ni la galería de vídeo | Extraescolares · Programas (SEK International Sports Academy) | Se reusa el mismo contenido de la página propia de SISA, pero sin el colapso ni el modal de YouTube: aquí es una card de apoyo, no la página del programa |
| El editorial de esta página se pintaba su propio ritmo con márgenes inline, en vez del cuerpo del sistema | Por qué SEK | Corregido: usa el helper común, así hereda 40/16 y la regla de texto destacado |
La dl del mapa no es la Table del componente: 3 columnas, línea hairline en vez de disabled, apilado en ≥768 y etiqueta en medium 16 | Residencias · Ubicación | El componente 20:3345 pide columna de 584 con filas de dos columnas al 50 %. Receta [location-tabla-datos](new/location-tabla-datos.md) |
| El doble-card se queda sin media al retirar las cards de plantilla, y el heading cae en una columna de 432 px | sek-doble-card | Ya recogido en content-feature-list: media propia del bloque |
| La rejilla de cards iba a 327 px; pasa a la retícula del sistema, tres de 432 con 24 de calle | sek-content-grid | Misma retícula en todos los módulos de card |
La tarjeta de ubicación se monta a caballo del borde del mapa, como en Figma 20:3345: pegada al borde se lee como un pie | sek-colegio-info | Que la tarjeta pueda desbordar el frame |
| El listado de Location va en vertical: una fila por dato, etiqueta a la izquierda y valor a la derecha. El bloque lo reparte en tres columnas de 184 px y trae seis filas cuando los datos son cuatro | sek-colegio-info | Filas, no columnas, y que las filas sobrantes no se pinten |
Location con la tabla de datos en la segunda columna (Figma 20:3345): cabecera a dos columnas y los datos bajo el texto. El bloque publicado la deja a ancho completo bajo el heading | sek-colegio-info | Registrar esa instancia; hoy no existe en el theme |
"Así es el día a día" pasa a acordeón con la descripción dentro y la foto cambia al abrir cada apartado, usando el mapa de imágenes del propio bloque (data-sek-programas-config) | sek-programas | — |
| La media de la card viene en vertical (322×660), pensada para columna estrecha: en una rejilla de dos columnas se estira a 661 de alto. En ese formato va apaisada (3/2) | sek-content-grid | Proporción de media según el número de columnas |
| La regla del overtitle, unificada: borde suave al 50 % sobre fondo claro y blanco al 40 % sobre marca u oscuro. Cada bloque traía el suyo, alguno en negro sólido | global | Que el color lo resuelva el componente por superficie |
| En UCJC, el accent naranja de Schools pasa al granate de la universidad, con el contenido en el blanco de la paleta | sek-cert | Que el accent lo dé la marca de la página |
| El CTA cierra el listado como una fila más: hueco del numeral vacío y el botón donde arranca el título de cada item, así comparten vertical | sek-content-list | Slot de acción al final de la lista |
| Lista con numeral, ajustes de la variante: 16 px entre la cifra y su contenido (eran 24), divider al 18 % —al 30 % pesaba—, sin la primera línea (solo separaba del Title Section) y la lista centrada respecto a la imagen | sek-content-list | Recogerlo en la variante, no por instancia |
| La regla del overtitle pasa al borde suave (30 %), no al primario | global | Token de borde para la regla |
| Retícula de La Colmena a la especificación: tres columnas iguales con 24 de calle (432 px en 1440). El bloque las dejaba en 389 con 67 de separación | sek-content-grid | Revisar la retícula del bloque |
| Dividers del listado de Estudios en blanco al 30 % sobre el granate | sek-content-list | Que el color del divider dependa de la superficie |
Estudios y las cifras eran dos módulos seguidos: van fusionados en uno (Figma 1406:37521), en granate y con la cifra como numeral gigante del item | sek-content-list | Variante del item con numeral en vez de icono |
Life Long Learning pasa al módulo de contenido con par de imágenes (Figma 1320:37286) | sek-content-lg | — |
Escudos de los ejes: esquinas inferiores a 9999px y el icono toma su color de la superficie —blanco de paleta sobre las oscuras, tinta sobre las claras—. El de Tecnología tiene escudo crema: en blanco desaparecía | sek-cert | Que el color del icono lo resuelva el componente por contraste |
Las cifras se pegan al módulo anterior: padding-top reducido para que se lean como parte de él | sek-stats | Campo de espaciado superior, o herencia del bloque anterior |
| El Cross mezcla dos tipos de card en el mismo reel: texto sobre foto y foto con caja debajo. La guía las quiere todas a sangre, con numeral y descripción, y la última en superficie de marca | sek-cross | Campos: tipo de card, numeral y superficie por card |
| En "Así es un día" se retira la card con vídeo de fondo que trae el bloque: la sección es el listado de momentos y su foto | sek-agenda | Que la card de vídeo sea opcional y que su columna deje de estar reservada: el grid mantiene grid-cols-[minmax(0,1fr)_322px] aunque no haya card, y la lista se queda en 951 px de los 1360 |
El velo va dentro de la caja de texto, no sobre la card entera (1714:54387): así ocupa solo lo que ocupa el texto y la foto se ve limpia por encima. Y en esa franja el desenfoque llega a 12 px, no a 24 | cards a sangre | Recogido en la receta card-scrim-overlay |
| En esa rejilla, el numeral va en la línea del título, a la derecha, y sustituye al enlace de la card | sek-cross | Campo de numeral por card |
Media al otro lado: ningún bloque publicado la pone a la izquierda. Alternar el lado entre secciones consecutivas es el campo media_side de content-feature-list | sek-content-list | Pendiente de la receta ya abierta |
| En el bloque de superficie de marca, el cuerpo hereda el gris secundario y no se lee: hay que forzar el color inverso | sek-content-list inverso | Que el color del cuerpo dependa de la superficie |
Controles del carrusel visibles en escritorio (1:2256). El bloque los oculta a partir de 640 px | sek-content-grid | Campo para mostrarlos siempre, con su indicador de progreso |
Recursos para la familia (669:45238) pide texto a la izquierda y media a la derecha a la misma altura. El bloque de lista deja la media en una fila propia, debajo del texto | sek-content-list sin lista | Que la media pueda ir en la fila del contenido cuando el bloque no lleva items |
| La superficie de la celda de highlights se decide por el fondo de la sección (crema sobre blanco, blanca sobre crema). Hoy es siempre crema y sobre fondo crema desaparece | sek_c_stats | Campo de superficie, o que herede del fondo |
El svg de las banderas circulares no trae width/height y dentro de un flex se colapsa | maqueta | Si se vendorizan, darles tamaño explícito |
| Bloque de cifras sobre el granate de la marca, con cifras, etiquetas e iconos en blanco | UCJC, titulaciones | El color va en línea: las clases de texto del bloque y de sus contenedores ganan a la de la sección, y las cifras se quedaban en oscuro sobre el granate |
| Cards del prefooter sin foto, con color de paleta en vez del negro del sistema | prefooter, todas | Junto a las que sí llevan foto, el negro canta. La de colegios va al azul de marca; el resto, a los tonos claros. El fondo se aplica en línea porque no siempre lo pinta la misma utilidad |
| Rejilla fija 3 × 2 en La Colmena, sin mandos | UCJC | Seis retos se leen mejor de una vez que pasando carrusel |
| Galería en carrusel también en escritorio | Residencias, "Vivir en SEK" | Igual que en La Colmena: el content-grid pasa a rejilla a partir de 640 px y esconde los mandos |
Logo de marca en línea, no como <img> | banner de SEK Sport | Los -mono están dibujados con currentColor: como <img> no heredan color y además vienen a width:100%, sin ancho intrínseco, así que se ven a 0 px. En lib.mjs, logo() |
Línea del overtitle inyectada en content-lg | Educación Infantil | El content-grid publica su divider y el content-lg no, así que el mismo overtitle se ve distinto según el bloque. Va con border-static-disabled |
| Subrayado de enlace siempre visible en el prefooter | sek-cross | .sek-underline pinta por defecto una línea gris fija (#cfd3d5) y solo toma el color del texto al pasar por encima: sobre las cards oscuras se pierde. Se fuerza --sek-ul-fill:100% para que sea del color del propio texto |
| La Colmena sigue siendo carrusel en escritorio | UCJC | El content-grid pasa a rejilla a partir de 640 px y por eso esconde flechas y líneas. Con seis retos interesa la galería completa; se mantiene el modo scroller y los controles dejan de ocultarse |
| Bloque de Estudios con la marca UCJC (fondo granate, texto e iconos en blanco) | UCJC | La oferta académica es de la universidad, no del colegio |
| El panel de resultados 2×2 con cards de cifras no se puede montar | Logros | sek-cert colorea sus slides por posición y las deja desalineadas; el bloque de cifras pierde la agrupación por área. Va como cabecera + fila de cifras + accesos por área |
sek-stats no tiene titular ni texto: es solo la fila de cifras | Logros (IB, PAU, universidades), Educación Infantil | Se compone sek-content-lg + sek-stats con el mismo fondo, igual que en SISA. Si el bloque tuviera cabecera propia, sobraría el apaño |
| Párrafos inyectados bajo el titular | todas las páginas nuevas | Los bloques exponen un slot de texto y los wireframes traen dos o tres párrafos por sección. Mismo caso que [section-heading-bajada](new/section-heading-bajada.md) |
sek-doble-card no lleva enlace: el CTA se añade con el tratamiento de link del sistema | Residencias | Si el bloque va a usarse como cierre con llamada a la acción, necesita su slot de CTA |
sek-cert reutilizado como cards de icono + título | Residencias, Por qué SEK, Educación Infantil | Es el bloque de acreditaciones (logo suelto). Para "N cards con icono y título" es lo más cercano que hay publicado |
Bajada de sección inyectada en sek-testimonial | Espacios deportivos, Etapas educativas | El bloque no tiene slot para la bajada y el wireframe la trae. Receta [section-heading-bajada](new/section-heading-bajada.md) |
| Las cards de "La experiencia SEK" se agrupan en un carrusel único, con la etapa como overtitle | Etapas educativas | Sin bloque de tabs no hay dónde repartirlas por etapa. Al construir [tabs-seccion](new/tabs-seccion.md), cada card vuelve a su panel |
sek-accordion sin imagen y con el panel en texto corrido | Etapas educativas (FAQs) | La única instancia publicada es la de actividades, con foto y etiquetas. Receta [accordion-faq](new/accordion-faq.md) |
Icono kayak de Lucide en línea | Espacios deportivos | El set del theme no tiene piragua. Receta [icono-piraguismo](new/icono-piraguismo.md) |
| CTA convertido en card sólida dentro del carrusel | Espacios deportivos, prefooter | Receta [card-cta-solida](new/card-cta-solida.md) |
Regla corta en el overtitle (ancho fijo en vez de flex-1) | Espacios deportivos (banner) | Receta [section-heading-regla-corta](new/section-heading-regla-corta.md). Pendiente decidir si se propaga |
| Galería sin autoplay y testimonial sin vídeo | Espacios deportivos | El theme no expone ninguna de las dos cosas. Recetas [slider-autoplay](new/slider-autoplay.md) y [testimonial-video](new/testimonial-video.md) |
Tokens, assets y medidas que hemos tenido que resolver por nuestra cuenta porque no existían. Si se añaden al sistema, la maqueta deja de necesitar el apaño.
| Qué | Dónde | Detalle |
|---|---|---|
Ubicación: de 08-sek-colegio-info tal cual a ubicacionMapa() (helper ya existente en lib.mjs, hasta hoy sin usar en ninguna página) | Contacto | Reordena dirección/teléfono/mapa en listado vertical en vez del reparto horizontal descuadrado |
Insights ("Resultados"): de fila plana de cifras a 3 cards con superficie crema e icono badge-check arriba | Resumen de resultados | Sin bloque publicado equivalente — compuesto a mano sobre sek-stats |
| Evolución por convocatoria: de lista horizontal numerada a rejilla de cards verticales (overtitle numerado + texto + imagen) | Evolución | Sin bloque publicado equivalente — compuesto a mano sobre sek-content-list |
| Cómo acompañamos: de grid 2×4 de iconos a listado vertical (icono izquierda, texto derecha) | Orientación | listaCeldas() de lib.mjs, forzando una columna — primer uso real de este helper en una página |
Hero: de sek-hero-simple (sin foto) a sek-hero con imagen, como el resto del sistema | Hero | Era la única de las 11 páginas sin foto de fondo |
| Historias: cabecera y testimonio centrados, no a dos columnas | Historias | Se sustituyó cabeceraDoble() por la cabecera apilada de 06-sek-content-grid, más overrides de centrado en el slide |
"Acceso a la universidad" se dejó como fila de cifras (solo con la regla de cifra()), no como cards numeradas | Acceso a la universidad | Guille no confirmó si esta sección debía llevar el mismo tratamiento de card que Evolución — pendiente de que lo revise |
Programas pasa de 2 cards sueltas + card destacada a sek-doble-card estándar (el mismo de "Vive SEK"), con foto en vez de vídeo en ambos slots | Extraescolares · Programas | Sin petición nueva: el bloque ya admite imagen fija (donde-sucede-el-aprendizaje lo usa así en su 2º slide) |
SISA deja de ser una descripción extendida (content-welcome) y pasa a ser el sek-banner-cta que ya promociona SISA en su propia página (verde #095434, foto y URL reales) | Extraescolares · Alto rendimiento | Reuso literal, sin editar apenas — el contenido publicado ya es correcto para este hueco |
Colaboradores pasa a usar el mismo bloque y la misma celda con fallback icono+nombre que universidades() en Logros (content-grid + grid-logos) | Extraescolares · Más experiencias | Mismo patrón, no receta nueva — sigue en [grid-logos](new/grid-logos.md) |
Contacto de cierre pasa de sek-colegio-info (bloque de ficha de colegio) a sek-banner-cta genérico | Extraescolares · Contacto | Encaja mejor con "Solicite información" como CTA que como ficha informativa |
Reveal anidado al usar ponOvertitle() sobre sek-doble-card: la fila de overtitle de ese bloque ya trae data-sek-reveal="fade", y dividerOvertitle() le añade su propia línea con data-sek-reveal="rule" dentro — dos gestos en el mismo nodo | Extraescolares · Programas | Corregido en el build de la página (se retira el reveal del contenedor cuando ya lo lleva un hijo). Si ponOvertitle()/dividerOvertitle() se usan sobre más bloques con esa fila premarcada, conviene resolverlo en lib.mjs en vez de en cada build |
Filtro de Categoría pasa de <select> a pestañas; Colegio/Etapa de dos selects siempre visibles a un botón "Filtros" con panel de checkboxes | Extraescolares · Catálogo | Receta [catalogo-filtrable](new/catalogo-filtrable.md) actualizada. Mismo hueco de tabs ya pedido en [tabs-seccion](new/tabs-seccion.md) |
| Nuestras escuelas pasa de cabecera + rejilla apiladas a composición asimétrica: título en columna izquierda, rejilla 3×2 en la derecha | Extraescolares · Nuestras escuelas | Receta [highlights-con-tags](new/highlights-con-tags.md) actualizada, mismo contrato de datos |
| 4 cifras de la intro, cada una con icono (antes sin icono) | Extraescolares · La experiencia SEK | Reusa sek-stats, que ya admite icono por celda — solo se rellenó el slot |
| Sin dato de colegio ni etapa por actividad: el documento del cliente lista las 26 actividades por categoría, sin asociarlas a colegio o etapa educativa | Extraescolares · Catálogo | Los filtros de Colegio y Etapa quedan en la maqueta deshabilitados, con aviso, hasta que el cliente lo facilite — ver Casuística de la receta |
| UX pide el mapa como foto y el bloque monta dos mapas interactivos de Leaflet | sek-colegio-info | Campo para elegir mapa o imagen |
| Fuera el bloque de vídeo: no lo pedía UX —lo había añadido UI como apoyo al Think Tank—. Si se recupera, Life Long Learning iría solo con el vídeo, sin el par de imágenes | UCJC | Confirmar con UX |
| Falta el logotipo de La Colmena: no existe como archivo en ucjc.edu, la marca aparece solo como texto | Modelo educativo | Pedirlo a la universidad |
| Con texto largo sobre foto, el velo de Figma (0,40 sobre el 60 % inferior) no llega a AA. En la maqueta esas cards usan velo al 100 % de alto y 0,55 | Cross de contenido | Variante de velo para cards con descripción, o subir el token |
El crema oscuro es --bg-tertiary de Figma (#e8e6dd) y en el theme no existe: el bloque de testimonial lo escribe a pelo con bg-[#e8e6dd] | tokens | Añadirlo como token y sustituir el hardcode |
| El Cross no cuadra con Figma: el heading debe medir 584 px (hoy nace a dos columnas, con el titular al 50 %) y el reel es una rejilla de tres columnas de 437,33 px con 24 de calle, no un carrusel de slides de 322. Las cards arrancan a 64 / 40 / 0 px y miden 636 / 614 / 656 | sek-cross | Variante "rejilla" del Cross con esas medidas; hoy hay que neutralizar el carrusel (clases swiper-*) y el efecto de ola (data-sek-wave-col) para que no pisen la retícula |
| Con el overlay de Figma (0.40) el titular blanco baja de AA sobre fotos claras; el del theme (0.45 + parada 0.15) tapaba más | cards del cross | Decidir: subir la opacidad, ampliar la altura del velo o dar text-shadow al titular. Está en la receta |
Banderas circulares en assets/banderas/ (circle-flags) | cifras del modelo lingüístico | El icono genérico de traducción no dice nada; la bandera sí. Dos códigos se solapan para el modelo bilingüe. En lib.mjs, banderas() |
| Dos líneas en el overtitle | todas las páginas | Varios bloques ya publican la suya y nosotros añadíamos otra: quedaba la larga del bloque y un trozo corto al lado. Ahora se reestiliza la existente y solo se crea si falta. Una sola, a ancho del contenedor y al 50 % de opacidad |
| Cards del bloque origen sin retirar: SEK-Les Alpes y la Goleta aparecían en Infantil y en Residencias | sek-doble-card | El bloque viene de *Dónde sucede el aprendizaje* y trae dos cards propias. Se retiran junto con su copy |
| Las celdas de highlights salían solo con el icono | Infantil, cuatro módulos | El volcado reutilizaba los nodos de la plantilla y el texto no llegaba a pintarse. Ahora la celda se reconstruye entera: icono, título y descripción |
Estábamos usando un sek-cross que no es el prefooter | las 7 páginas | Varias páginas usan sek-cross como bloque de contenido propio (los campus en *Dónde sucede*, los idiomas en *Dimensión internacional*). De ahí venían las cards descuadradas y el sello de B Corp donde no tocaba |
| El h2 del primer módulo repetía el h1 de la página | Educación Infantil | El titular de sección es el programa (PEP); el nombre de la etapa baja a overtitle y el destacado pasa a ser el dato de los dos ciclos |
No hay surfaces-tertiary (el crema algo más oscuro para cards sobre fondo crema) | cards sobre crema | Solo existen accent-cream (#f4f3ee, más claro que el fondo) y el #e8e6dd que el theme usa suelto en el testimonial. Se usa ese; convendría que fuese token |
| Párrafos colgados de la fila del heading → cada uno se volvía una columna de ~100 px | las 5 páginas nuevas | El sek-section-heading es una fila de dos columnas a partir de 981 px, y ya trae su columna de texto. lib.mjs la localiza (columna()) y cuerpo() vuelca ahí |
| La foto de la plantilla, repetida por toda la página (hasta 11 veces en Por qué SEK) | páginas con content-lg como cabecera | sek-content-lg de Curso 25-26 trae schools-banner.jpg. sinMedia() la retira, y también su contenedor, que vacío dejaba un rectángulo negro de 810 px |
| Etiquetas de cifra de 50 caracteres en celdas de 164 px (siete líneas) | Logros, Educación Infantil, Espacios deportivos | La etiqueta de una cifra es una etiqueta: el detalle vive en el texto de la sección. verify-page.mjs avisa si supera 45 caracteres dentro de una celda max-w-[…px] |
| Iconos corruptos: 15 SVG eran la página de redirección del CDN, no el icono | todas las páginas | curl sin -L guardó "Redirecting to…" dentro del .svg. Rescatados; lib.mjs ahora revienta si un icono no contiene <svg> |
| Copy de la plantilla sin sustituir en tres sitios de Logros | hero, Evolución, Universidades | El volcado buscaba h3/p en bloques que usan span, y reescribía solo el primer nodo de la card. verify-page.mjs compara ahora cada texto de la página contra el catálogo de bloques y lo caza solo |