/* WayGroup — Dirección D · tokens de diseño Derivados del Manual de Identidad Visual 2026. Nada se inventa. ESTE FICHERO ES EL ÚNICO DEL REPO QUE DECLARA UN VALOR DE COLOR. Las demás hojas los consumen; ninguna los declara y ninguna reasigna un rol fuera de su bloque de tema. La razón tiene nombre y fecha: `--deep` era un token de FONDO (`background:var(--deep)` en .sect--deep, .cta-band, .lab-intro) y pages.css lo usó una vez como TINTA; después `.page .sect` lo reasignó a #f4f7fa para construir el tema claro. Resultado: titular blanco sobre fondo blanco, 1.00:1, en producción y en los dos idiomas, durante semanas y a través de varias revisiones de código. Un token sin rol declarado produce texto invisible. El sistema son dos capas y la separación es lo que cierra la clase de fallo: Capa 1 · PALETA. Valores literales. Un solo sitio. Sin significado: una paleta no sabe si un color es fondo o tinta, y por eso no puede equivocarse. Capa 2 · ROLES. Un tema es un BLOQUE ENTERO. `--surface` y `--text` se declaran siempre juntos y en pares, que es lo que hace imposible por construcción que `color:var(--text)` resuelva al color de su propio fondo. Regla de uso, con puerta automática en tools/verify.mts: · Prohibido un literal de color fuera de este fichero. · Prohibido redefinir un rol fuera de su bloque de tema. Si una sección necesita otro color, cambia de TEMA (`data-tema` en la sección), no de variable. El escape existe, se declara con su razón y se ve en el diff: un comentario «verify: color literal — » en la línea anterior. Hoy no hay ninguno. */ @property --p { syntax: ""; inherits: true; initial-value: 0; } /* Respaldos con métricas igualadas. No son fuentes nuevas: son la que ya hay en el sistema, reescalada para ocupar la misma caja que la web font. Los números salen de las métricas reales de cada familia sobre 1000 unidades por em, divididas por el size-adjust, que es lo que iguala el ancho medio: Montserrat asc 968 desc 251 → 968/1128,3 = 85,79 % 251/1128,3 = 22,25 % Open Sans asc 1068 desc 293 → 1068/1051,5 = 101,53 % 293/1051,5 = 27,86 % El src va con varias locales porque Arial no existe en todas partes; en Linux entra Liberation Sans, que es métricamente compatible con Arial. */ /* El rango de peso NO es opcional y costó un error: sin `font-weight: 100 900` la cara sólo declara el 400, y el sitio pide Montserrat en 300, 600, 700, 800 y 900. Todo lo que no fuera 400 se saltaba el respaldo y caía en Arial a pelo, que es justo el salto que esto viene a evitar. Medido: pidiendo peso 300 la cara sin rango daba 1661px donde Montserrat da 2059; con el rango puesto, 2113. */ /* Dos caras y no una porque Montserrat ensancha con el peso y Arial casi no: de 300 a 900 Montserrat pasa de 2059 a 2269 px en la misma frase, y Arial se queda clavada. Con un solo size-adjust el ajuste sólo puede acertar en un punto de ese rango, y el error en 900 —que es donde están los titulares grandes, o sea donde más se nota un salto— se iba al 6,9 %. Partido en dos tramos el peor caso baja a la mitad. Medido en esta misma página. */ @font-face{ font-family:"Montserrat Respaldo"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); font-weight:100 500; font-style:normal; font-display:swap; ascent-override:85.79%; descent-override:22.25%; line-gap-override:0%; size-adjust:112.83%; } @font-face{ font-family:"Montserrat Respaldo"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); font-weight:600 900; font-style:normal; font-display:swap; ascent-override:85.79%; descent-override:22.25%; line-gap-override:0%; size-adjust:118.6%; } @font-face{ font-family:"Open Sans Respaldo"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); font-weight:100 900; font-style:normal; font-display:swap; ascent-override:101.53%; descent-override:27.86%; line-gap-override:0%; size-adjust:105.15%; } /* ═══════════════════════════════════════════════════════════════════════ CAPA 1 · PALETA Valores literales y nada más. Ningún nombre de esta capa dice si el color es fondo o tinta, a propósito: quien decide eso es la capa 2. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── Marca. Verbatim del manual. No se inventan ni se ajustan. ── */ --brand-org:#ff7500; /* primario */ --brand-org-2:#ff6500; --brand-red:#e51e24; --brand-amb:#ffb26c; --brand-blu:#004b7e; /* secundario */ --brand-blu-2:#0a6bb5; /* datos en estado correcto */ --grad:linear-gradient(112deg,var(--brand-red) 0%,var(--brand-org-2) 48%,var(--brand-amb) 100%); /* Tinta medida sobre el degradado. base.css explica el cálculo tramo a tramo y su dependencia del padding lateral de 32px. No se toca. */ --on-brand:#180a00; /* ── Lienzo. Derivado del azul de marca #004B7E, no de un negro neutro. ── */ --ink-950:#03080d; --ink-900:#061019; --ink-800:#0a1a26; --ink-700:#0d2231; --ink-100:#e8f2f8; --ink-50:#f4f7fa; --ink-0:#ffffff; /* ── Acero: la escala de tinta secundaria. ── --steel-400 es el antiguo --dim y su valor está medido, no elegido: el #4a5d6d original daba 2.4:1 sobre --ink-700 y no pasaba AA. #768a97 es el valor más bajo del mismo matiz que pasa 4.5:1 sobre los cuatro lienzos oscuros. Si se toca, hay que volver a medirlo. */ --steel-600:#245675; --steel-500:#496576; --steel-400:#768a97; --steel-300:#a6b7c6; --steel-200:#c2d9e8; /* Aquí vivían --blu-700 y --blu-600, las dos superficies del tema de marca. Se han ido con él: eran los únicos azules que existían para pintar una sección entera, y una sección entera ya no se pinta de azul. */ /* ── Papel. Sólo los usa el bloque de tema de impresión, más abajo. Dos tintas y no tres: en pantalla el gris medio y el gris fino eran dos tokens distintos (#1a1a1a y #333) y en papel esa diferencia no se ve. */ --paper:#ffffff; --paper-ink:#000000; --paper-ink-3:#333333; --paper-line:#c9c9c9; --paper-line-2:#9a9a9a; --paper-tint:#f4f4f4; /* ── Acentos por dominio ── Cada familia y cada sector arrastran un color propio para que dos páginas no se vean iguales. Seis de los diez eran un token del manual byte a byte; estos cuatro no los declara el manual y hasta hoy vivían sueltos en hexadecimal dentro de pages.css. Entran aquí con nombre —§2 del sistema visual: «o entran a tokens.css como --dom-* o se retiran»— y quedan a la espera de que alguien decida si pasan a la paleta de marca. */ --dom-emergencias:#ff4d14; --dom-cargas-2:#4aa3e0; --dom-bienestar:#12a594; --dom-bienestar-2:#6fdccb; /* ── Tintes con alfa ── Son los velos sobre fotografía, las superficies de cristal y los filetes translúcidos del sitio. Antes eran 24 valores `rgba(...)` sueltos repartidos por cinco hojas, con dieciocho opacidades distintas del MISMO tinte: nadie podía saber si .78 y .8 eran dos decisiones o el mismo número escrito dos veces. Aquí la escala es explícita y los pasos son de 5 o 10 puntos; los valores originales se redondearon al escalón vecino, que en un velo es un cambio por debajo del umbral de percepción. El sufijo es la opacidad: --ink-a70 es la tinta del lienzo al 70 %. */ --ink-a10:rgba(3,8,13,.10); --ink-a20:rgba(3,8,13,.20); --ink-a25:rgba(3,8,13,.25); --ink-a30:rgba(3,8,13,.30); --ink-a40:rgba(3,8,13,.40); --ink-a45:rgba(3,8,13,.45); --ink-a55:rgba(3,8,13,.55); --ink-a60:rgba(3,8,13,.60); --ink-a70:rgba(3,8,13,.70); --ink-a80:rgba(3,8,13,.80); --ink-a90:rgba(3,8,13,.90); --ink-50-a25:rgba(244,247,250,.25); --ink-50-a40:rgba(244,247,250,.40); --ink-50-a60:rgba(244,247,250,.60); --ink-50-a70:rgba(244,247,250,.70); --ink-50-a80:rgba(244,247,250,.80); --ink-50-a90:rgba(244,247,250,.90); /* De los siete escalones de blanco quedan dos. Los cuatro primeros que faltaron —.02, .05, .12 y .16— eran los velos y filetes de la barra flotante y de las opciones del calificador: superficies que sólo existen sobre un lienzo oscuro y que, al tener la barra y el calificador dos temas, pasaron a pedirse por su rol (--veil, --glass-2, --hairline-2). Un blanco al 5 % no tiene sentido sobre una superficie clara, y por eso ninguno sobrevivió al cambio: la lista corta es la prueba de que el rol hizo su trabajo. El quinto, --wht-a90, se fue en la poda de septiembre de 2026 por no tener consumidor. */ --wht-a08:rgba(255,255,255,.08); --wht-a22:rgba(255,255,255,.22); --org-a10:rgba(255,117,0,.10); --org-a45:rgba(255,117,0,.45); /* Edu, el robot de WayGroup (ui/shell/Edu.astro): el cian del anillo de su cara, medido sobre la foto. Es de Edu y de nadie más: pinta el anillo, el halo y el canto del lanzador. Su botón y sus opciones siguen en naranja. */ --edu-luz:#5ddaf5; --edu-luz-a45:rgba(93,218,245,.45); --blu-a15:rgba(0,75,126,.15); --blu-a20:rgba(0,75,126,.20); --blu-a38:rgba(0,75,126,.38); --blu-a45:rgba(0,75,126,.45); /* pareja azul de --org-a45, para --accent-line */ --blu-a70:rgba(0,75,126,.70); /* canto de control del tema claro, ver --control-edge */ --blu-2-a40:rgba(10,107,181,.40); /* Filetes del tema oscuro. Eran blanco neutro a .085 y .17, y tenían dos problemas. El primero lo dice la primera línea de este fichero: el lienzo se deriva del azul #004B7E, y una retícula de blanco neutro encima contradice el sistema entero. El segundo es que .085 sobre --ink-800 no es una línea: es una insinuación de línea, y un instrumento se dibuja con trazos que se ven. Ahora el blanco viene sesgado hacia el azul de marca y con peso suficiente para leerse como trazo. No son texto, así que no entran en el cálculo AA. */ --hair-a13:rgba(186,214,238,.13); --hair-a26:rgba(186,214,238,.26); --hair-a45:rgba(186,214,238,.45); /* canto de control del tema oscuro, ver --control-edge */ } /* ═══════════════════════════════════════════════════════════════════════ CAPA 2 · ROLES Un tema es este bloque entero, nunca una variable suelta. Se aplica con `data-tema` sobre el documento o sobre una sección. ═══════════════════════════════════════════════════════════════════════ */ /* El sitio es oscuro: `:root` y el tema explícito valen lo mismo. */ :root,[data-tema="oscuro"]{ /* EL VELO: el suelo de la página, translúcido. No es un gris cualquiera; es `--surface` con alfa, y por eso vive en el bloque de tema y cambia con él. Su papel es uno: cuando el texto queda sobre un medio que se mueve —una malla que gira, un film que pasa— el contraste deja de ser una propiedad del diseño y pasa a depender del fotograma. El velo lo vuelve a fijar. La escala `--ink-a*` de arriba no sirve para esto: es tinta, oscurece, y en un tema claro con texto oscuro oscurecer es exactamente lo contrario. */ --velo:rgba(3,8,13,.72); --surface:var(--ink-950); /* el lienzo de la página */ --surface-2:var(--ink-900); /* banda de sección alterna, cierre */ --surface-3:var(--ink-800); /* tarjeta, panel, medio enmarcado */ --surface-4:var(--ink-700); /* el mismo panel, realzado */ --text:var(--ink-50); --text-2:var(--steel-300); --text-3:var(--steel-400); --hairline:var(--hair-a13); --hairline-2:var(--hair-a26); /* EL CANTO DE UN CONTROL, y es un rol aparte del filete por una razón que se mide: un filete separa, y un canto de control IDENTIFICA el componente. WCAG 1.4.11 le exige 3:1 contra lo que tiene al lado; a un filete no le exige nada, porque no informa de nada. POR QUÉ NACIÓ, EN PASADO (agosto de 2026). Los campos del formulario de /contacto se dibujaban con --hairline-2, y medido sobre /contacto y /en/contacto ese canto daba 1,98:1 contra el relleno del campo (rgba(0,75,126,.38) compuesto sobre #f4f7fa). Un campo vacío es una caja vacía: si su borde no se ve, no hay nada que diga que ahí se escribe. El resto del formulario ya pasaba —texto 17,82:1, etiquetas 9,10:1, anillo de foco 8,46:1 contra el relleno y 9,10:1 contra la tarjeta— y por eso no se tocó ninguno. No se subió --hairline-2: es un rol de SEPARACIÓN, y contados entonces sobre el sitio construido lo consumían 24 declaraciones en 6 hojas que pintaban 1610 cantos repartidos por las 99 rutas de aquel sitio —hoy son 540 páginas—. Subirlo para arreglar 7 campos de 2 rutas convertía cada retícula del sitio en una rejilla. §2 manda declarar el token propio con su razón, y esta es. Los valores siguen siendo los medidos entonces contra el relleno del campo de cada tema, que era --surface: claro rgba(0,75,126,.70) sobre #f4f7fa → 4,04:1 oscuro rgba(186,214,238,.45) sobre #03080d → 3,34:1 QUÉ QUEDA HOY (septiembre de 2026). /contacto y `.field` se fueron en la poda, y con ellos el consumidor que dio nombre al rol. Le quedan cuatro declaraciones: `.btn-g` en base.css, el punto del riel de dominios en sus dos estados (home-dominios.css) y el botón «ver más» del catálogo audiovisual. Los cuatro son controles sin relleno en reposo, que es exactamente el caso que el rol describe. Se declara entero en cada tema porque un rol se declara entero en cada tema o no es un rol. */ --control-edge:var(--hair-a45); --accent:var(--brand-org); --accent-soft:var(--brand-amb); /* El acento como FILETE, al 45 %. Existe como rol y no como color suelto porque el único consumidor —.pill--org— lo escribía con --org-a45, un token de la capa de paleta que no sabe de tema: en una sección clara salían píldoras de canto naranja al lado de las azules. Un acento por tema. */ --accent-line:var(--org-a45); /* El acento como RELLENO DE CIFRA: las dos paradas del acento del tema. Existe como rol por lo mismo que --accent-line y --accent-wash: sus consumidores escribían --grad, el degradado de MARCA, que es rojo a ámbar y no sabe de tema. Contados en su día sobre las 99 rutas de entonces —hoy son 540 páginas—, los 120 elementos que lo usaban caían TODOS dentro del acto claro, repartidos en 32 rutas: una cifra en rojo de marca al lado de un enlace en #004b7e y de un destacado en #0a6bb5 son dos acentos conviviendo en la misma sección, que es lo que §10 prohíbe. De aquellos consumidores queda uno: `.g-text`, el destacado de titular de base.css. La cifra de `.fignum` y el número de paso de `.step::before` se fueron en la poda de septiembre de 2026, y `.stat b` mucho antes. El degradado de marca no desaparece del sitio: sigue siendo el fondo del CTA primario, donde es marca y no acento, con su tinta medida encima. Las dos paradas son --accent y --accent-soft escritas desde la paleta y no con var(--accent): una propiedad personalizada se sustituye en el elemento que la DECLARA, así que un --accent-grad único en :root se quedaría con el acento oscuro para siempre. Por eso se declara entera en cada tema, que es además lo que pide §2: un tema es el bloque completo. */ --accent-grad:linear-gradient(112deg,var(--brand-org) 0%,var(--brand-amb) 100%); --on-accent:var(--on-brand); /* El cristal de la barra flotante y el velo de sus controles. Son roles y no colores sueltos porque la barra tiene DOS estados: un observador le escribe `data-tema` según la sección que pasa por debajo, y sin un rol tendría que elegir entre quedarse oscura sobre una sección clara —que es lo que hacía, rgba(3,8,13,.60) sobre rgb(244,247,250), una mancha gris con el titular legible por debajo— o cambiarlo con una regla por estado. Son --surface a 70 %, que es lo que §4 del sistema visual escribe como `color-mix(in oklab, var(--surface) 72%, transparent)`. Se declaran como rgba explícito y no con color-mix por dos razones: la escala de tintes de arriba avanza de 5 en 5 y 72 no está en ella, y el escáner de contraste compone alfa pero no sabe resolver un color-mix, así que la barra dejaría de medirse. 70 y 72 no se distinguen; una barra sin medir sí se nota. */ --glass:var(--ink-a70); --glass-2:var(--ink-a80); /* el mismo cristal, al pasar el puntero */ --veil:var(--wht-a08); /* superficie de hover de un control de la barra */ /* El velo de la banda fotográfica a sangre. Es un ROL y no un degradado escrito en pages.css porque la banda es la única superficie del sitio que aparece en los DOS actos. Contadas en su día sobre las 99 páginas de entonces —hoy son 540— había 82: 2 antes del acto claro —/industrias y su espejo /en/industrias, rutas que ya no existen— y 80 dentro de él, repartidas en 78 rutas. Con el degradado escrito a mano las 82 quedaban oscuras, y una banda oscura entre dos secciones claras es una inversión de superficie: medido, 74 rutas invertían cuatro veces y dos seis. Al ser rol, la banda toma el velo del acto en el que cae y el documento vuelve a tener una sola conmutación. */ --veil-band:linear-gradient(100deg,var(--ink-a90) 0%,var(--ink-a60) 55%,var(--ink-a25) 100%); /* Relleno de acento: el fondo de un control SEÑALADO. Existe como rol por lo mismo que --accent-line: su consumidor de entonces —.opt[aria-pressed="true"] del calificador— lo escribía con --org-a10, paleta pura, y al pasar esa sección al tema claro quedaba un relleno naranja dentro de un canto azul. Aquel consumidor ya no existe: el calificador pasó a cuatro desplegables y las fichas de opción se fueron con él. El rol sí sigue, y con dos consumidores, que es lo que un rol tiene que soportar: el reposo bajo el puntero de `.qsel` (blocks.css) y el aviso de `pages.css`. El estado ELEGIDO lo dibuja ahora el navegador dentro del desplegable, no una clase nuestra; de ahí que el nombre del rol se lea mejor como «señalado». */ --accent-wash:var(--org-a10); } /* El acto de evidencia. Aquí el azul de marca es ACENTO —cifras, filetes, enlaces—, que es su papel en el manual, y no fondo a pantalla completa. --surface-3 se queda en el blanco puro y no en --ink-100 como sugiere el §2 del sistema visual: en claro la superficie elevada de una tarjeta es hoy el blanco, y bajarla a --ink-100 tiñe la tarjeta de 88 páginas. Eso es un cambio de aspecto y no de arquitectura de tokens, así que no es de esta fase. --ink-100 se queda como el cuarto escalón, que es el de realce. El segundo selector es la banda fotográfica a sangre que cae DENTRO del acto claro: la que tiene una sección clara antes en el mismo
. No lleva `data-tema` en el marcado porque su acto no lo decide ella sino su posición, y esa posición se lee en CSS con la misma herramienta con la que base.css localiza el borde de la conmutación. Es el bloque de tema entero el que se le aplica —§2: «un tema se aplica como bloque completo»—, no una variable suelta. La banda que va ANTES del acto claro, /industrias, no lo cumple y se queda en el oscuro del documento, que es donde le toca. */ [data-tema="claro"], main > [data-tema="claro"] ~ .band{ --velo:rgba(244,247,250,.82); /* `--ink-50` con alfa: el velo del tema claro */ --surface:var(--ink-50); --surface-2:var(--ink-0); --surface-3:var(--ink-0); --surface-4:var(--ink-100); --text:var(--ink-900); --text-2:var(--steel-500); --text-3:var(--steel-600); --hairline:var(--blu-a20); --hairline-2:var(--blu-a38); --control-edge:var(--blu-a70); --accent:var(--brand-blu); --accent-soft:var(--brand-blu-2); --accent-line:var(--blu-a45); /* La pareja clara del relleno de cifra: el mismo ángulo y las mismas dos paradas del acento, en azul. Es el acto donde viven los 120 elementos que antes se pintaban con el degradado de marca, así que aquí es donde el rol cierra el fallo: la cifra pasa a usar exactamente los dos colores que ya usan el enlace (#004b7e) y el destacado del titular (#0a6bb5). */ --accent-grad:linear-gradient(112deg,var(--brand-blu) 0%,var(--brand-blu-2) 100%); --on-accent:var(--ink-0); /* La pareja clara del cristal y del velo. El velo es tinta al 10 % y no blanco: sobre una barra clara un velo blanco no existe. */ --glass:var(--ink-50-a70); --glass-2:var(--ink-50-a80); --veil:var(--ink-a10); --accent-wash:var(--blu-a15); /* La pareja clara del velo de la banda: mismas tres paradas y las mismas tres opacidades, con el lienzo claro en lugar de la tinta. Las opacidades no se bajan: el titular de la banda se apoya en el extremo del 90 % y con menos velo dejaría de medirse contra un color. */ --veil-band:linear-gradient(100deg,var(--ink-50-a90) 0%,var(--ink-50-a60) 55%,var(--ink-50-a25) 100%); } /* AQUÍ VIVÍA [data-tema="marca"], EL AZUL DE MARCA A PANTALLA COMPLETA. Se ha ido, y no por gusto: era la TERCERA inversión de tema del documento. Medido en el home antes de esta fase, el recorrido de superficie era #03080d → #f4f7fa → #004b7e → #03080d o sea casi negro, casi blanco, azul saturado y otra vez casi negro, con cortes duros entre los cuatro. Lo mismo en las 88 internas: hero oscuro, `.sect` claro, sección de marca azul, banda de cierre oscura. Un documento que invierte tres veces no tiene tema: tiene cuatro. §4 del sistema visual: «el azul de marca vuelve a ser ACENTO dentro del tema claro —cifras, filetes, enlaces—, que es su papel en el manual». Eso ya lo sirve --accent del bloque de arriba, así que las 76 secciones que llevaban `data-tema="marca"` pasan a `"claro"` y no necesitan una sola regla nueva. Lo único que se pierde es el fondo saturado; el azul sigue en la página, donde el manual lo pone. */ /* El papel es un tema más, y por eso vive aquí y no en print.css. Quien imprime este sitio no es un visitante: es cumplimiento sacando una política legal o la página de certificaciones para archivarla. El sitio es texto claro sobre un azul casi negro, y en papel eso es un cartucho por hoja y menos legibilidad, no más. Va después de los dos temas y nombra a los dos, para que ninguna sección necesite un `!important` para imprimir en negro sobre blanco. */ @media print{ /* La banda del acto claro se nombra aquí por lo mismo que se nombra arriba: su tema entra por posición, y su selector pesa más que `[data-tema]`. Sin esta línea sería la única superficie del sitio que ignora el papel. */ :root,[data-tema="oscuro"],[data-tema="claro"], main > [data-tema="claro"] ~ .band{ --surface:var(--paper); --surface-2:var(--paper); --surface-3:var(--paper); --surface-4:var(--paper-tint); --text:var(--paper-ink); --text-2:var(--paper-ink); --text-3:var(--paper-ink-3); --hairline:var(--paper-line); --hairline-2:var(--paper-line-2); /* En papel el canto de control sube a la tinta fina y no se queda en la línea fuerte: --paper-line-2 da 2,81:1 sobre el blanco, y un rol que existe justamente para pasar de 3:1 no puede incumplirse a sí mismo en uno de sus tres temas. Con --paper-ink-3 el campo se imprime a 12,6:1, que es lo que hace falta para rellenarlo a mano o fotocopiarlo. */ --control-edge:var(--paper-ink-3); --accent:var(--paper-ink); --accent-soft:var(--paper-ink); --accent-line:var(--paper-line-2); /* En papel el acento es tinta, así que el relleno de cifra es tinta plana. print.css ya devuelve esos cuatro selectores a `background:none`; esto es la red por si algún día uno se le escapa de la lista. */ --accent-grad:linear-gradient(112deg,var(--paper-ink) 0%,var(--paper-ink) 100%); --on-accent:var(--paper); --glass:var(--paper); --glass-2:var(--paper); --veil:transparent; --accent-wash:var(--paper-tint); --shadow:none; --shadow-org:none; } } /* ═══════════════════════════════════════════════════════════════════════ LO QUE NO ES COLOR ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Tipografía Las dos familias salen del manual y no se tocan. Lo que se añade es un respaldo con las métricas ajustadas para que ocupe exactamente el mismo sitio que la web font mientras esta llega. Por qué importa, medido en rendimiento-red.md §9 y no supuesto: el elemento LCP del home es TEXTO (P.cine-lead), no una imagen. Con display=swap el texto se pinta con el respaldo y se REPINTA al llegar Montserrat; ese repintado emite un candidato de LCP nuevo y más tardío y de paso mueve la maquetación. La misma medición con las fuentes quitadas da: movil4G con fuentes 920 ms / CLS 0,025 · sin ellas 440 ms / CLS 0 y el documento concluye que ese CLS «es el intercambio de fuente, y nada más». En /recorrido pesa diez veces más (0,266) porque su titular sube a 88px donde el del home se queda en 63. Con las métricas igualadas el segundo pintado cae en el mismo sitio que el primero: no hay salto. Cero peticiones nuevas —el respaldo es una fuente que ya está en el sistema— y no sustituye a autoalojar los woff2, que es la otra mitad de la ganancia y sigue pendiente. El prefijo --font- no es cosmético: `--text` era el nombre de esta pila de fuentes Y el rol de la tinta primaria era `--wht`, o sea un token llamado «blanco» que en el tema claro resolvía a #061019. Los dos nombres mentían. Ahora `--text` es tinta y `--font-text` es familia, y ninguno de los dos puede leerse como el otro. */ --font-display:"Montserrat","Montserrat Respaldo",system-ui,sans-serif; --font-text:"Open Sans","Open Sans Respaldo",system-ui,sans-serif; /* La tercera voz no es una fuente nueva —«nada se inventa» sigue en pie—: es la mono que ya trae el sistema, cero bytes de red. Es la voz de los metadatos: rótulos, índices, códigos de escena. Un instrumento etiqueta en mono; Montserrat queda para hablar y Open Sans para leer. */ --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace; /* Espacio — base 4px */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:44px; --s8:64px; --s9:88px; --s10:112px; /* La barra flotante. Dos medidas, y viven aquí porque las lee más de una hoja: base.css dibuja la barra, pages.css separa el hero para que la copia no se meta debajo, y home-sequence.css hace lo propio con el escenario en móvil. Antes eran tres números sueltos —78, 66 y 64— escritos a mano en tres sitios, y ya se habían desincronizado. */ --nav-h:46px; /* alto de la barra */ --nav-top:14px; /* lo que separa la barra del borde superior */ /* Forma — cinco roles, y la regla se escribe aquí para que no vuelva a haber ambigüedad: EL CANTO ES REDONDEADO, CON UNA ESCALA Y CINCO ROLES. LA ÚNICA FORMA DE ÓVALO ES EL SELLO, Y EL SELLO ES SEMÁNTICO. Hubo tres escalas. La primera, 22 / 18 / 14: tres valores a 4px uno de otro, sin razón ni proporción, aplicados a todo —.card, .stat, .step, .fc, .cc, .qual, .phero-media—. Cada superficie era una burbuja blanda, y eso dice «SaaS simpático». La segunda, 4 / 2 / 1: el canto mecanizado llevado al extremo contrario, donde las tarjetas parecían chapa cortada y los botones, placas. Ninguna de las dos era el sitio: uno es un instrumento que se agarra, no una pieza de chapa ni una nube. contenedor --r-lg 16px tarjetas, paneles, medios enmarcados, mega menú, cajón móvil, BARRA DE NAVEGACIÓN control --r-md 12px botones, campos, opciones, descargas, enlaces del menú, conmutador de idioma filete --r-sm 8px avisos, imágenes internas sello --r-seal 999px SÓLO .pill, .cert y chips de estado foco --r-focus 12px :focus-visible El sello se llamaba --r-pill, y ese nombre es la misma clase de fallo que --wht: un token que se nombra por su forma acaba usado por cualquiera que quiera esa forma —la barra, el conmutador de idioma, la hamburguesa— en vez de por quien tiene su semántica. --r-seal no describe un óvalo: describe un sello, que es lo que autoriza el óvalo. Cinco roles, ni uno más, y `npm run audit:forma` comprueba a la vez el valor y su semántica. */ --r-seal:999px; --r-lg:16px; --r-md:12px; --r-sm:8px; --r-focus:12px; /* Elevación --shadow era 0 50px 100px -46px: 100px de desenfoque a 50px de caída. Nada físico proyecta eso; es una nube, y una nube debajo de una tarjeta es la firma de un sitio generado. Se sustituye por dos capas que sí describen un objeto apoyado: un contacto de 1px que ancla el borde y una caída corta. --shadow-org era un halo naranja a opacidad 1 bajo el botón primario. Un resplandor de neón bajo un CTA es la señal de «esto lo hizo una máquina» más reconocible que hay. El degradado del botón sale del manual y no se toca; lo que se va es el halo. En su lugar, un filo de luz superior —el brillo de una pieza biselada— y el mismo contacto de 1px que todo lo demás, para que el botón pese sobre el fondo en vez de flotar sobre él. */ --shadow:0 1px 0 var(--ink-a90), 0 10px 26px -14px var(--ink-a80); --shadow-org:inset 0 1px 0 var(--wht-a22), 0 1px 0 var(--ink-a90); /* Movimiento */ --ease:cubic-bezier(.2,.8,.2,1); /* Segundo easing: ya se usaba literal en 3 sitios sin estar declarado. */ --ease-out:cubic-bezier(.16,1,.3,1); --t-ui:240ms; --t-scene:760ms; --maxw:1340px; /* EL GUTTER ABSORBE EL RECORTE DE PANTALLA, Y POR ESO SON DOS TOKENS Y NO UNO. El sitio declara `viewport-fit=cover` en el Layout, así que en un teléfono con muesca el documento se pinta DEBAJO de la muesca y de las esquinas redondeadas. En vertical los recortes laterales valen 0 y no cambia nada; en apaisado un iPhone reporta 44px a un lado y 34 al otro, y ahí el gutter declarado de 22px deja el primer carácter de cada línea debajo del cristal curvo. Se resuelve en el token y no en `.wrap` a propósito: `--gutter` no es sólo el padding del contenedor, es la RETÍCULA. La copia del film (`.sequence-copy`, con `left`/`right`), el interruptor de sonido (`.fold-sound`, con `left`) y el aviso de carga (`.sequence-loading`, con `right`) se posicionan en absoluto contra ese mismo número para alinear con el texto que hay dentro de `.wrap`. Ensanchar sólo el contenedor rompería esa alineación en cuanto hubiera recorte. `max()` lo hace simétrico: los dos lados toman el mayor de los tres, así que una pantalla con muescas asimétricas no produce una columna descentrada. Y los `env()` llevan respaldo explícito de 0px porque sin él, en un navegador que no conozca la variable, la declaración entera sería inválida en tiempo de cálculo y `--gutter` se quedaría sin valor: cero margen lateral en las 493 páginas. El respaldo es la diferencia entre degradar y romper. */ --gutter-base:44px; --gutter:max(var(--gutter-base),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); } /* Acento por dominio. Vive en la capa de tokens y no en pages.css por la misma razón que todo lo demás de este fichero: es una asignación de color a un nombre, y ese trabajo se hace en un sitio. */ [data-acento]{--acc:var(--accent);--acc2:var(--accent-soft)} /* vial repite el acento por defecto a propósito: es la familia de la que salen los demás y dejarla escrita evita tener que deducirlo del selector sin atributo. */ [data-acento="vial"] {--acc:var(--brand-org); --acc2:var(--brand-amb)} [data-acento="alto-riesgo"]{--acc:var(--brand-red); --acc2:var(--brand-org-2)} [data-acento="emergencias"]{--acc:var(--dom-emergencias);--acc2:var(--brand-amb)} [data-acento="cargas"] {--acc:var(--brand-blu-2); --acc2:var(--dom-cargas-2)} [data-acento="bienestar"] {--acc:var(--dom-bienestar);--acc2:var(--dom-bienestar-2)} [data-acento="datos"] {--acc:var(--brand-blu); --acc2:var(--brand-blu-2)} @media (max-width:640px){ /* Se baja el gutter DECLARADO, no el compuesto: el `max()` de arriba sigue mandando y el contrato de «>= 22px en móvil» queda como suelo, nunca como techo. */ :root{ --gutter-base:22px; --s10:74px; } }