/* ========================================================================== CMCS — Tokens del sistema de diseño Gate G7 · Trama y Urdimbre -------------------------------------------------------------------------- Los dos azules son institucionales, muestreados del logotipo vectorial (Logo-CMCS.svg). No son elegibles: cualquier extensión del sistema parte de ellos. ========================================================================== */ :root { /* ---- Hilos institucionales ------------------------------------------ */ --marino: #2A2E68; /* urdimbre — estructura, competencia */ --ceruleo: #0086C0; /* trama — el hilo que cruza, humanidad */ /* ---- Derivados de los hilos (no institucionales, calculados) --------- */ --marino-hondo: #1C1F4A; /* profundidades: barra de utilidad, pie */ --marino-medio: #3A3F84; --ceruleo-hondo: #00648F; /* enlaces sobre fondo claro — 5.3:1 */ --marino-tinte: #B3B8DC; /* texto secundario SOBRE marino — 6.4:1 */ /* ---- Oro verificado ------------------------------------------------- Reservado POR LEY para evidencia verificable. Aparece exactamente tres veces en la Home y en ningún otro lugar del sitio. Si algo se pinta de oro sin un número de resolución detrás, el sistema está roto. */ --oro: #F0B429; /* 6.7:1 sobre marino */ /* ---- Lana: el campo de lectura -------------------------------------- */ --lana: #E8EAE5; /* fondo — gris frío de lana, nunca crema */ --lana-clara: #F3F4F1; --lana-honda: #D3D6CF; /* ---- Tinta ----------------------------------------------------------- */ --tinta: #14161C; /* 14.9:1 sobre lana */ --tinta-suave: #4A4F5C; /* 7.2:1 sobre lana */ /* ---- Tipografía ------------------------------------------------------ MONTSERRAT es la tipografía institucional del colegio. No es una elección de diseño: es un activo de marca y manda sobre cualquier propuesta. Geométrica y ancha — por eso el tracking de display se cierra más que con una grotesca normal, y los titulares piden una talla menos. PRODUCCIÓN: autoalojar en woff2. Google Fonts es solo para el prototipo. */ --fuente-titular: "Montserrat", system-ui, sans-serif; --fuente-texto: "Montserrat", system-ui, sans-serif; --fuente-codigo: "Montserrat", ui-monospace, monospace; /* Escala tipográfica — razón 1.25, fluida entre 380px y 1440px */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-md: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem); --t-lg: clamp(1.6rem, 1.3rem + 1.4vw, 2.75rem); --t-xl: clamp(2.1rem, 1.5rem + 2.8vw, 4rem); --t-2xl: clamp(2.6rem, 1.4rem + 5.6vw, 6.5rem); /* ---- LOS DOS ÚNICOS TAMAÑOS DE TITULAR (2026-09-10) ------------------- Andrés, después de ver el sitio en Vercel: «el H1 tiene que ser el mayor, y de ahí para abajo todos H2; tiene que verse consistente la marca». Tenía razón y el problema era medible: los titulares habían llegado a CUATRO tamaños distintos que nadie había puesto en la misma tabla — .etapa__nombre 6,2rem ← «Preescolar», el más grande de todos .expansion__h1 5,2rem ← el H1 de la portada .promesa__frase 4,6rem .encabezado__titulo / .acto__declaracion 4,4rem — o sea que el nombre de una etapa pesaba un 19 % MÁS que el único H1 del sitio. La jerarquía estaba invertida y por eso «se veía inconsistente». Desde aquí hay dos y sólo dos. El H1 sube al tamaño que tenían las etapas —que es el que Andrés señaló como el bueno— y todo lo demás baja al de «Ser Cervantista», que es el que dio por bueno: --display-1 el título de la PÁGINA. Uno por página y ni uno más. --display-2 cualquier título de sección, sea del tamaño que sea la sección. Incluye los nombres de las etapas. El suelo del display-1 se queda en 2,4rem —lo que ya medía en el teléfono— a propósito: allí el titular de la portada tiene cinco palabras y no le sobra sitio. Lo que crece es el techo, que es donde se veía el problema. */ --display-1: clamp(2.4rem, 7.4vw, 6.2rem); --display-2: clamp(2rem, 5.2vw, 4.6rem); /* Interlínea óptica: se CIERRA a medida que el tamaño crece. Aplicar el mismo ratio a 16px y a 24px deja los textos grandes flojos y desarmados. */ --interlinea-titular: 0.94; /* display cerrado, al estilo Obviously */ --interlinea-lead: 1.38; /* entradas y apoyos, --t-md */ --interlinea-texto: 1.65; /* lectura, --t-base */ --interlinea-corta: 1.35; /* etiquetas y códigos */ /* Tracking óptico: también se cierra al crecer. */ --tracking-display: -0.055em; /* muy cerrado: es lo que pidio el cliente */ --tracking-titular: -0.045em; /* --t-xl y --t-lg */ --tracking-codigo: 0.14em; --ceruleo-claro: #7FC4E8; /* hover de enlaces sobre marino */ /* ---- Campos saturados ----------------------------------------------- La leccion de Viens-la no es el violeta: es el COMPROMISO. Un sitio que alterna claro y oscuro cada seccion se lee timido. El cerúleo deja de ser solo un hilo y pasa a ser superficie de pagina completa. */ --campo-ceruleo: #0071A3; /* cerúleo profundo: blanco encima da 6.1:1 */ --campo-marino: #2A2E68; /* Campo cielo: la lana enfriada hacia el cerúleo. Es el fondo de la ruta pedagógica. Marino encima da 11.4:1, tinta 13.2:1. */ --campo-cielo: #E9F2FB; --campo-cielo-h: #D6E7F7; /* el mismo, un paso más hondo */ /* ---- Retícula: la urdimbre ------------------------------------------ 12 columnas. Los hilos verticales caen en los límites de columna: la retícula no es una guía invisible, se ve. */ --columnas: 12; --ancho-max: 80rem; --canal: clamp(1.25rem, 4vw, 3.5rem); /* LO QUE MIDE LA CABECERA PEGAJOSA. Medido, no supuesto: 89 px a 390, 107 a 1024 y 104 a 1440 —a partir de 68rem la fila se fija en 6,5rem y por debajo crece con el logotipo—. Existe para que una sección pueda ocupar exactamente lo que se ve: `calc(100svh - var(--cabecera))`. Si se pusiera `100svh` a secas, los primeros 104 px de cada sección quedarían DEBAJO de la cabecera y siempre asomaría una franja de la sección anterior. La barra de utilidad no cuenta: se va con el scroll. */ --cabecera: 5.6rem; --medida-lectura: 68ch; /* ---- Espaciado — escala de 4px --------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem; /* ---- Hilos: grosores ------------------------------------------------- */ --hilo-fino: 1px; /* urdimbre */ --hilo-trama: 2px; /* trama que cruza */ --hilo-orillo: 4px; /* remate del tejido */ /* ---- Movimiento ------------------------------------------------------ Un solo momento con autoría: el hilo de trama que se teje al entrar en vista. Nada rebota. Salida exponencial. */ --sale: cubic-bezier(0.16, 1, 0.3, 1); --dur-corta: 140ms; --dur-media: 460ms; --dur-larga: 900ms; /* ---- El peso de los titulares --------------------------------------- VA EN UN SOLO SITIO Y SE HA MOVIDO DOS VECES, así que conviene la historia: 900 (Black) lo original del sistema 700 (Bold) 2026-09-07 — el cliente: «se lee muy pesada» 600 (SemiBold) 2026-09-08 — el cliente: «un poquito menos fuerte» Montserrat es geométrica y ancha, así que mancha más que una grotesca de la misma talla: a tamaño display, cada escalón de peso se nota el doble. `--peso-enfasis` es el escalón de arriba, para el resaltado DENTRO de un titular —`.marca`, `.urde`, `.hilo`—. Va siempre uno por encima del titular y nunca dos: con 600 de base, un énfasis en 800 volvería a manchar. Si mañana el titular baja a 500, el énfasis baja a 600. */ --peso-titular: 600; --peso-enfasis: 700; /* ---- Radios: el tejido no tiene esquinas redondeadas ------------------ */ --radio-0: 0; --radio-1: 2px; /* LA ESQUINA DE LOS BOTONES DE ACCIÓN, EN UNA SOLA LÍNEA. El cliente preguntó el 2026-09-08 si redondearlas en todo el sitio. La recomendación va escrita aquí para que quien lo cambie sepa qué está cambiando, no en un correo que se pierde: El sistema entero se sostiene sobre UNA oposición: círculos puros —los anillos de la ruta, los discos del pórtico, las fotos de las etapas, el muro del equipo— contra rectángulos puros —la retícula, los campos, las tarjetas—. Un radio pequeño (6, 8, 12 px) no es un término medio: es la única forma que no pertenece a ninguna de las dos familias, y por eso los botones se leerían como pegados de otra plantilla. Si hay que suavizarlos, el valor coherente es la PÍLDORA COMPLETA, que no inventa una tercera geometría: rima con los discos. Es la única alternativa que no rompe nada. --radio-cta: var(--radio-0); recto (el del sistema) --radio-cta: 999px; píldora (la que se usa hoy) Cualquier valor entre esos dos es el que hay que evitar. EL CLIENTE ELIGIÓ PÍLDORA el 2026-09-08, después de leer esto. Queda dicho para que nadie lo lea como un descuido: es una decisión tomada, y la única de las dos alternativas que no mete una tercera geometría en el sistema. Si alguien vuelve algún día a los 8px, está rompiendo la oposición sobre la que se sostiene todo lo demás. */ --radio-cta: 999px; /* Y LA EXCEPCIÓN, que conviene que esté aquí y no sólo donde se usa: los naipes de «Noticias y circulares» SÍ llevan un radio intermedio desde el 2026-09-09, porque el cliente lo pidió y porque el razonamiento de arriba no les aplica. La salida coherente para un botón es la píldora; una tarjeta de 314 × 419 px no puede ser una píldora. Entre 0 y «imposible» no hay término medio que inventar: o recta o redondeada de verdad. Vive en `--radio-naipe`, en `.escena` de `bloques.css`, atado al ancho de la tarjeta para que se vea igual de marcado en cualquier pantalla. */ } /* TRES ESCALONES, MEDIDOS UNO A UNO. La cabecera no encoge de forma continua: por encima de 68rem su fila está fijada en 6,5rem, entre 48 y 68 crece con el logotipo y la navegación, y por debajo de 48 se recoge al menú de teléfono. Los números salen de medir —89 px a 390, 107 a 1024, 104 a 1440—, no de suponer. Si cambia la cabecera, estos tres se vuelven a medir. */ @media (min-width: 48rem) { :root { --cabecera: 6.7rem; } } @media (min-width: 68rem) { :root { --cabecera: 6.5rem; } }