/** ========================================================================== * Tokens CEI — fuente única de verdad del sistema de diseño * * Traducción directa de Figma → colección «Variables CEI». Los nombres son * exactamente los de allí: «Global/Color-Black» → --Global-Color-Black, * «Font/Size-19» → --Font-Size-19. * * Se carga ANTES que style.css y que las hojas de cabecera y footer, para que * cualquiera pueda consumir estos tokens. Ningún componente debería declarar * un color o un tamaño de texto que no salga de aquí. * * Secciones: * 1. Figma — variables del sistema * 2. Responsive — los mismos nombres redefinidos por breakpoint * 3. Excepciones registradas — valores sin variable en Figma * ========================================================================== */ :root { /* ------------------------------------------------------------------------ * 1. FIGMA — Variables CEI * --------------------------------------------------------------------- */ /* Global → Colores */ --Global-Color-Black: #000000; --Global-Color-White: #ffffff; --Global-Color-Grey: #f0f0ef; --Global-Color-Grey-Secondary: #787877; --Global-Destacado: #e43713; /* * NO ESTÁ EN FIGMA (Eduardo, 15/09/2026). El verde de una variación positiva * —el «+18% vs. 2025» de la tarjeta de convenios— hacía falta y no había * ninguno: el único verde del sistema es el del área de Videojuegos, y usar * ese aquí sería decir «Videojuegos» donde se quiere decir «sube». Se le pone * nombre propio y su mismo valor, que ya es un color de la casa; si Figma * define un verde de éxito, se cambia aquí y sale en todas partes. */ --Global-Positivo: #004e45; /* * El verde de la PASTILLA de variacion, que es mas claro que el de arriba y * lo eligio Eduardo el 16/09/2026. Es un fondo, no una tinta: el * --Global-Positivo de arriba es la tinta sobre blanco y este es el fondo, y * por eso son dos. Ojo: desde el 16/09/2026 --Global-Positivo NO LO USA NADIE * —lo gastaban las palomitas de una lista que se deshizo—, pero se queda: es * el verde de la casa y el nombre ya esta puesto. * * OJO AL CONTRASTE: en blanco da 3,60:1, por debajo del 4,5:1 que pide AA * para texto normal —la pastilla va a 14px—. Con tinta negra da 5,84:1, y el * mismo verde oscurecido a #548063 da 4,52:1 en blanco. Se sirve en blanco * porque asi se pidio; queda anotado. */ --Global-Positivo-Fondo: #5f9271; /* En Figma esta variable está marcada «CTA-Destacado (eliminar)» y tiene el mismo valor que Destacado: al unificarlas, esta desaparece. */ --Global-CTA-Destacado: #e43713; --Global-Background-Footer: #f0f0ef; --Global-Background-Empleo: #ffc0b2; --Global-Background-Fundae: #f8f1b6; /* Área → un color por área formativa */ --Area-Grafico-Primary: #ffd3e4; --Area-Tech-Primary: #0219ba; --Area-Marketing-Primary: #fdf98f; --Area-Audiovisual-Primary: #b9a3c4; --Area-Web-Primary: #9dbbdf; --Area-Videojuegos-Primary: #004e45; --Area-Arquitectura-Primary: #f79883; /* * Font → escala tipográfica. * * Siete tamaños: 95 especial (lemas y cifras grandes), 45 títulos grandes, * 32 y 29 títulos de sección, 20 y 19 cuerpo de texto, 14 letra pequeña. * Los ocho estilos Global-* de Figma usan cinco de ellos (95/45/29/19/14). */ --Font-Family-Primary: "Inter", "Helvetica Neue", Arial, sans-serif; --Font-Weight-400: 400; --Font-Weight-500: 500; /* solo Global-p--italic (Medium Italic) */ --Font-Size-95: 95px; --Font-Size-45: 45px; --Font-Size-32: 32px; --Font-Size-29: 29px; --Font-Size-20: 20px; --Font-Size-19: 19px; --Font-Size-14: 14px; /* * Tracking. Figma lo expresa en PORCENTAJE, no en px: Letter-spacing-2 es * -2% (de ahi el 2 del nombre). Aqui estuvo escrito -0.6px, que es ese mismo * -2% resuelto a 30px y solo vale a ese tamano: sobre Size-14 equivale a * -4.3% y sobre Size-95 a -0.6%. En em el porcentaje se mantiene a cualquier * tamano, que es justo el motivo por el que el interlineado tampoco va en px. */ --Font-Letter-spacing-2: -0.02em; /* Figma: -2% */ /* * Global-h1 aparece en Figma como -2px, que sobre Size-95 es -2.1%: el mismo * -2% mostrado en px. Se deja como alias para no repetir el valor, y para * poder borrarlo el dia que Figma lo unifique. * * La home nueva usa otro (-1px sobre 95); va escrito en su propia hoja * (Eduardo, 16/09/2026), que de momento es solo cosa suya. */ --Font-Letter-spacing-h1: var(--Font-Letter-spacing-2); --Font-Letter-spacing-0: 0; /* pendiente de variable en Figma */ /* * Interlineado sin unidad, no en px. Figma lo expresa en porcentaje, y en * px solo funciona para un tamano concreto: --Font-Line-height-100 valia * 45px, correcto unicamente junto a Size-45. Al redefinir los tamanos por * breakpoint (seccion 2) un px fijo rompe todo lo demas. */ --Font-Line-height-100: 1; /* Figma: 100% — h1, h2 */ --Font-Line-height-110: 1.103; /* Figma: 110.3% — h3 y sus variantes */ --Font-Line-height-h3-underline: calc(32 / 29); /* Figma: 32px sobre 29px */ /* ------------------------------------------------------------------------ * 3. EXCEPCIONES REGISTRADAS * * Valores que el diseño usa pero que no tienen variable en Figma. Cada uno * con su motivo: la lista debe encoger, no crecer. * --------------------------------------------------------------------- */ /* ------------------------------------------------------------------------ * AREA · SECONDARY — PROPUESTA, PENDIENTE DE VALIDAR EN FIGMA * * Figma define hoy UN color por area, el fuerte: Area/{Area}/Primary. Estas * son las Secondary que faltan, con el mismo nombrado, para el segundo papel * que el area ya cumple en la web: el fondo de una superficie grande con * texto negro encima —el primer bloque de una ficha de curso—. Ahi el color * fuerte no sirve: con Tech (#0219ba) el texto negro queda en 1.4:1. * * Estos siete valores llevan anos en el CSS, escritos a mano y sin nombre. * Medidos, no son colores inventados: son EL MISMO TONO de Figma subido de * luminosidad hasta que el negro se lee encima. * * area Primary Secondary tono luminosidad negro encima * Grafico #ffd3e4 #ffd3e4 0° 91% -> 91% 15.7:1 * Tech #0219ba #e2ecfd 15° 37% -> 94% 17.7:1 * Marketing #fdf98f #f5f1d1 4° 78% -> 89% 18.4:1 * Audiovisual #b9a3c4 #efdcfa 2° 70% -> 92% 16.3:1 * Web #9dbbdf #8eaade 6° 75% -> 71% 9.0:1 * Videojuegos #004e45 #cde3d5 31° 15% -> 85% 15.5:1 * Arquitectura #f79883 #ffc0b2 0° 74% -> 85% 13.4:1 * * Lo que hay que decidir en diseno, y por eso esto es una propuesta: * * · Grafico tiene el mismo valor en los dos papeles, porque su Primary ya es * claro. O sobra una de las dos, o Primary deberia ser mas saturado. * · Web va 3% MAS OSCURA que su Primary en vez de mas clara, y es la unica * que baja de 10:1. Probablemente deberia ser #9dbbdf, su propio Primary. * · Tech y Videojuegos se separan bastante de tono (15° y 31°) porque partir * de un azul y un verde oscuros y llegar a un fondo claro no da el mismo * tono. Merecen una mirada. * · Arquitectura usa #ffc0b2, que es exactamente --Global-Background-Empleo. * Comparten valor por casualidad o a proposito, pero son dos cosas * distintas y conviene separarlas. * * Mientras no esten en Figma viven aqui, con nombre y con este registro. El * dia que entren, se borra este bloque y no hay que tocar ninguna regla. * --------------------------------------------------------------------- */ --Area-Grafico-Secondary: #ffd3e4; --Area-Tech-Secondary: #e2ecfd; --Area-Marketing-Secondary: #f5f1d1; --Area-Audiovisual-Secondary: #efdcfa; --Area-Web-Secondary: #8eaade; --Area-Videojuegos-Secondary: #cde3d5; --Area-Arquitectura-Secondary: #ffc0b2; /* * Variante oscura del area de Marketing. No esta en Figma, pero si en la * web: la usan doce reglas de style.css para las cabeceras, precios y * tarjetas de esa area. Se saca aqui para dejar de repetir el hexadecimal. */ --Area-Marketing-Oscuro: #b6b37a; /* --------------------------------------------------------------------- * LOS COLORES DE LAS DOS UNIVERSIDADES (Eduardo, 16/09/2026) * * No son areas de CEI: son marcas de terceros que firman un diploma, y por * eso tienen familia propia. Se usan SOLO en su modulo de la ficha; el resto * de la pagina sigue con los colores de la casa. * * UDIMA los da la propia universidad. Contrastes medidos: * · blanco sobre el verde .................. 9,94:1 (AAA) * · lima sobre el verde .................... 4,90:1 (AA) * · negro sobre la lima ................... 10,34:1 (AAA) * * SABAL, PENDIENTE DE CONFIRMAR. Los cinco ficheros de Sabal que hay en * cei.es (el SVG del tema, sabal-university.png/webp, SABAL.svg y * sangre_SABAL.svg) son TODOS en blanco y negro, asi que estos dos valores * estan sacados a ojo del logo en color, no medidos de un fichero. Cuando * llegue la marca oficial se cambian aqui y salen en toda la web. * · blanco sobre el azul .................. 14,24:1 (AAA) * · dorado sobre el azul ................... 6,36:1 (AA) * --------------------------------------------------------------------- */ --Udima-Primary: #004d35; --Udima-Secondary: #9dc419; --Sabal-Primary: #14275c; /* provisional */ --Sabal-Secondary: #d7a62f; /* provisional */ /* Medidos del nodo de Figma, sin variable propia. Los consume la cabecera. */ --Global-Hover-Grey: #8a8a8a; /* hover de los ítems del menú */ --Global-Gris-Seccion: #8a8a8a; /* encabezados de sección de los desplegables */ --Global-Filete: #d6d6d4; /* regla bajo los encabezados de sección */ /* * El aro del foco. No esta en Figma pero si en la web: los campos lo pintan * con `outline: 2px solid` y `outline-offset: 2px`. El hueco es la suma de * los dos —lo que el aro sobresale de la caja—, y sirve para que cualquier * contenedor que recorte le deje sitio con `overflow-clip-margin` en vez de * cortarlo (Eduardo, 10/09/2026). */ --Global-Foco-grosor: 2px; --Global-Foco-separacion: 2px; --Global-Foco-hueco: 4px; /* grosor + separacion */ --Global-Borde-Tarjeta: var(--Global-Color-Black); /* borde de las tarjetas destacadas en el carrusel móvil */ --Global-Borde-Campo: #bbbbbb; /* borde de los campos de formulario (newsletter) */ --Global-Enlace-Submenu: #3f4a55; /* texto secundario de las tarjetas */ /* Vidrio: efecto del diseño 2026, no es una variable de Figma. */ --Global-Velo-Blanco: rgba(255, 255, 255, 0.65); /* fondo de vidrio de barra y paneles */ --Global-Velo-Blanco-60: rgba(255, 255, 255, 0.6); /* velo de las columnas destacadas y de noticias */ --Global-Vidrio-Blur: blur(18px) saturate(400%); /* desenfoque del fondo */ /* La cabecera declara su propia pila de fallbacks. */ --MenuNavegacion-fuente: "Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif; /* * Distancia entre un titulo de seccion y su contenido. Tampoco es de Figma: * es el margen que ya tenian los h2.tipo_curso de las areas (24px), sacado * aqui para que el h1 de la cabecera respete la misma separacion en vez de * los 62px que le salian por sumar su margen al gap del contenedor. */ --Global-Espacio-TituloContenido: 24px; /* * Y el de arriba, que es el que faltaba: lo que separa un grupo del * siguiente. Con los dos, el ritmo vertical de una pagina se lee de un * vistazo —24 dentro de un grupo, 60 entre grupos— y deja de depender de que * cada plantilla se lo invente. * * El valor sale de las paginas de area, que es donde ya funcionaba: 60px * entre un carrusel y el titulo siguiente. La home no tenia NINGUNO —medido, * 0px en escritorio entre las tarjetas de un area y el titulo de la * siguiente, con solo 15px de relleno en la fila del titulo—, y por eso * «Desarrollo web» aparecia pegado a las tarjetas de «Diseño gráfico». */ --Global-Espacio-Grupo: 60px; /* * Espacio entre la cabecera fija y el contenido de la primera seccion. * * Antes cada plantilla se lo inventaba, y todas contaban la cabecera dos * veces: `body[class]` ya reserva su altura desde que la barra es fixed, y * encima el contenido llevaba la holgura antigua (75px en escritorio, 100 * en movil) pensada para cuando se le metia por debajo. En un movil de 844 * de alto eso dejaba el titulo a 164px del borde, casi un quinto de la * pantalla en blanco. * * Ahora esto es solo ritmo, no holgura: la cabecera la reserva el body y * este valor es lo que se ve. Lo consumen las fichas de curso, las paginas * de area y el contenido estandar, para que el arranque sea el mismo en * toda la web. */ --Global-Espacio-Superior: 48px; /* * El boton flotante de WhatsApp. Los tres valores salen de medir la barra * fija de una ficha en un iPhone real, no del emulador: el margen es el * mismo que separa de los bordes a los botones de esa barra, de modo que el * flotante cae en su misma linea en vez de a su aire. */ --Global-Flotante: 44px; /* el minimo comodo para un objetivo tactil */ --Global-Flotante-margen: 20px; /* a los bordes; el mismo de la barra fija */ --Global-Flotante-hueco: 12px; /* con lo que tenga al lado */ /* * Radios. Figma no define variables de radio, asi que estos valores salen * medidos del diseno de la cabecera 2026, que es donde ya estaban escritos a * mano. Se sacan aqui para poder reutilizarlos en el resto de la web y que * las esquinas sean las mismas en todas partes. */ /* * La prueba de las esquinas a escuadra (08/09/2026) se deshace: vuelven los * radios de Figma. Se cambian los tokens y no cada bloque, asi que todo * vuelve a la vez; lo que antes llevaba el radio a mano —el panel del * buscador de la cabecera y una tarjeta de la landing— sigue leyendo su * token, que para eso se saco. */ --Global-Radio-Panel: 16px; /* laminas de los desplegables */ --Global-Radio-Tarjeta: 12px; /* tarjetas destacadas */ --Global-Radio-Imagen: 8px; /* imagen dentro de una tarjeta */ --Global-Radio-Pastilla: 999px; /* CTA y etiquetas */ /* * PESO DE LOS TITULARES — EXCEPCION TEMPORAL, PENDIENTE DE CERRAR * * Figma define los ocho estilos Global-* con Weight-regular (400) y solo * Global-p--italic se sale, con 500. La web venia construida al reves: de * las 311 declaraciones de font-weight del tema, el 50% eran 500 y el 20% * 600, y solo el 14% 400. Al migrar, los titulares se quedan sin enfasis y * la jerarquia pasa a depender solo del tamano. * * Hasta hablarlo con Elena, que es quien define los estilos en Figma, los h1 * van a 600 y los h2 a 500. Desviacion consciente y acotada: cuando haya * decision se cambia el valor aqui y se propaga solo, o se borran los dos * tokens y todo vuelve a Weight-regular sin tocar ninguna regla. * * Abierta: 04/09/2026 · Revisar: semana del 11/09/2026 · Decide: Elena */ --Font-Weight-h1-temporal: 600; --Font-Weight-h2-temporal: 500; /* * TAMANO DE H1 — EXCEPCION TEMPORAL, SIGUE ABIERTA * * Figma da Size-95 al estilo Global-h1: 95px en escritorio. En la web ese * tamano se ve enorme, y no por capricho de nadie: en Figma el h1 se dibuja * en un lienzo ancho y con mucho aire alrededor, y aqui cae dentro de * columnas y bloques contenidos donde 95px ocupa tres lineas. * * El h1 se sirve al tamano del h2 (Size-45). Sigue siendo responsivo por si * solo, porque apunta al token, no a un numero: 45 / 38 / 30 por breakpoint. * * LA HOME NUEVA VA POR DELANTE (Eduardo, 16/09/2026): alli el ESTILO * .Global-h1 ya se sirve a 95 / 95 / -1px, acotado en * css/templates/home-v2.css, para verlo en sitio antes de decidir. Los

* de verdad no se han tocado en ningun lado. El dia que se aplique a todo, * el valor se trae aqui y se borra aquella regla. * * Ojo con una cosa al cerrarla: `.LandingAdmisiones .Contact-h2` tambien usa * Size-95 y NO se ha tocado, porque es un h2 decorativo, no un h1. Si de la * conversacion sale otro valor para Size-95, ese tambien se mueve. * * Abierta: 05/09/2026 · Decide: Elena */ --Font-Size-h1-temporal: var(--Font-Size-45); } /* ========================================================================== * 2. RESPONSIVE * * El responsive de la tipografia se resuelve AQUI y solo aqui: se redefine el * valor de los tokens por breakpoint y toda la web hereda. Los componentes no * declaran tamanos condicionales ni clamp() propios. * * Breakpoints: los mismos que ya usan cabecera y footer (1199.98 / 767.98). * Ojo, no confundir con 1320/1560, que son los de LAYOUT de la cabecera * (cuando el menu colapsa a hamburguesa) y no tocan la tipografia. * * Los valores de escritorio son los de Figma. Los de tablet y movil estan * derivados de los minimos que ya usaban los clamp() de las landings, que es * lo que el equipo daba por bueno en pantallas pequenas: PENDIENTES DE * VALIDAR en diseno. * ========================================================================== */ @media (max-width: 1199.98px) { :root { --Global-Espacio-Grupo: 48px; --Global-Espacio-Superior: 32px; --Font-Size-95: 60px; --Font-Size-45: 38px; --Font-Size-32: 28px; --Font-Size-29: 26px; --Font-Size-20: 19px; --Font-Size-19: 18px; --Font-Size-14: 14px; } } @media (max-width: 767.98px) { :root { --Global-Espacio-Superior: 24px; --Font-Size-95: 40px; --Font-Size-45: 30px; --Font-Size-32: 24px; --Font-Size-29: 23px; --Font-Size-20: 18px; --Font-Size-19: 17px; --Font-Size-14: 13px; } }