/* Bulgi Kéfir — tokens.css Única fuente de verdad. Ningún componente escribe hex. ============================================================ SISTEMA DE COLOR v3 (2026-08-25) — un lienzo, anclas escasas, acentos ============================================================ La paleta NO cambia: son los mismos cinco colores de los logos. Lo que cambia —otra vez— es la regla de aplicarla. Vale la pena el historial, porque las dos veces el diagnóstico fue el mismo y la corrección se pasó de largo: · v1 (hasta 2026-08-20). Tres temas, y la tinta era siempre OTRO color de marca: fondo crema → texto café, fondo café → texto crema. Todo caía en la familia tierra por construcción. Mario: «todo está muy cargado hacia lo beige amarillento y café, y no me gusta». · v2 (2026-08-21). Arregló lo que había que arreglar —tinta neutra, secundario gris— pero repartió los CINCO colores como fondos de sección a partes iguales y añadió una regla que obliga a alternar: «nunca dos bloques seguidos del mismo color». Con doce secciones, eso son doce fondos distintos; cinco de ellos celeste, empezando por el hero. Mario, el 2026-08-25: «la página se siente visualmente desordenada porque cada sección cambia demasiado de color» y «no me gusta que el fondo principal sea azul claro». v2 curó la monotonía y produjo lo contrario: confeti. v3 no toca los colores, cambia quién manda. En v2 el color era el fondo por defecto y el neutro la excepción; aquí es al revés. ┌──────────────────────────────────────────────────────┐ │ EL COLOR ES UN ACONTECIMIENTO, NO EL FONDO NORMAL. │ └──────────────────────────────────────────────────────┘ LAS NUEVE REGLAS ---------------- 1. HAY UN SOLO LIENZO: `papel` (#FCFBF8, un blanco cálido). La mayoría de las secciones NO cambian de fondo. Se distinguen por aire, jerarquía, composición y acento — no por color de fondo. ⚠️ DOS SECCIONES `papel` SEGUIDAS SON LO NORMAL, no un error. Es exactamente lo que v2 prohibía. `components.css` les pone un filete fino entre medias, automático, sin tocar el HTML. 2. `crema` (#EFECDE) es ese mismo lienzo un tono más cálido: una REPISA para agrupar algo que va junto (el catálogo, el FAQ). El salto papel→crema es pequeño a propósito: se lee como ritmo, no como corte. Máximo tres por página y nunca dos pegadas. 3. LAS ANCLAS SON OSCURAS Y ESCASAS: `cobalto` y `cafe`. **Máximo dos por página**, nunca seguidas. Ahí van los momentos de peso —el CTA de en medio, el bloque de compra— y el pie, que es café en las nueve páginas. Son las que dan el golpe de color saturado que sostiene toda la página. 4. `celeste` y `dorado` DEJAN DE SER FONDOS DE SECCIÓN. Pasan a ser superficies de PIEZA: tarjetas destacadas, pastillas, números de paso, stickers, realces. Es lo que mantiene el color vivo por toda la página sin teñir pantallas enteras — el azul bajito y el dorado siguen ahí, en dosis de 40px en vez de 800. ⚠️ Un `
` es un ERROR del sistema v3, no una opción. Lo atrapa `tests/bloques.test.js`. 5. UN SOLO IDIOMA DE ACENTO, y sale de la LUMINOSIDAD del fondo, no del logo: · superficie CLARA → acento COBALTO · acción cobalto con tinta blanca · superficie OSCURA → acento DORADO · acción dorada con tinta negra En v2 el acento rotaba por tema (crema→cobalto, celeste→café, café→celeste, dorado→café), así que el color de los antetítulos cambiaba al hacer scroll y no había forma de aprenderlo. Eso era la mitad del desorden. Aquí solo hay dos respuestas y dependen de una cosa observable: si el fondo es claro u oscuro. 6. LA TINTA ES NEGRA O BLANCA, y el secundario un GRIS NEUTRO. Esto viene de v2 y es lo que sí funcionaba: ningún párrafo en café, crema, cobalto, celeste ni dorado. Es lo que impide volver a la monotonía tierra. 7. `--realce` es el color decorativo del tema —celeste sobre claro, dorado sobre oscuro— y SIEMPRE es un RELLENO con su borde encima. ⚠️ NUNCA es texto ni una línea suelta: celeste sobre papel da 1.49:1 y dorado sobre papel 1.86:1. Sobre el relleno la tinta es negra (10.88:1 en celeste, 7.55:1 en dorado). Es la regla que hace que el color se pueda usar con alegría sin romper contraste en ningún sitio. ⚠️ Y VA CON `--realce-borde`, NO CON `--borde`. Es lo primero que salió al medirlo: en un bloque oscuro `--borde` es blanco, así que una pastilla dorada con el borde del tema daba **2.23:1** y su contorno desaparecía. `--realce-borde` es negro en los siete temas, y así la pieza siempre se recorta: sobre fondo claro la separa el borde (el relleno celeste solo da 1.49:1), y sobre fondo oscuro ya la separa el propio relleno (dorado sobre cobalto, 6.53:1). Uno de los dos carga siempre con el trabajo; el verificador comprueba justo eso. 8. NUNCA TEXTO BLANCO sobre dorado (2.23:1) ni sobre celeste (1.55:1). Excepción única: el logo puede ir blanco sobre dorado por su tamaño. 9. UN SOLO BOTÓN LLENO POR BLOQUE; los demás de contorno. (Vive en el HTML, no aquí: lo fija `tests/bloques.test.js`.) POR QUÉ NO SE VA A CREMA/BEIGE, que es el otro fallo conocido ------------------------------------------------------------- El lienzo es blanco cálido, no crema: #FCFBF8 contra #EFECDE. Crema pasa de ser el ambiente a ser una banda ocasional. Y el color no desaparece, se concentra: dos anclas saturadas por página, los antetítulos en cobalto, y celeste/dorado en cada pastilla, número y sticker. Menos superficie teñida, más saturación donde se ve. ⚠️ EL AZUL OSCURO SE LLAMA --cobalto AQUÍ, NO --azul. La entrega de Claude Design lo llama `--azul` y su tema `data-bloque="azul"`. En este repo se quedó `--cobalto` (decisión de Mario, 2026-08-21) porque ya estaba puesto en las nueve páginas y renombrarlo era churn sin ganancia. Traducción, por si alguien compara los dos archivos: entrega --azul → repo --cobalto (#00147d, el azul oscuro) entrega --celeste → repo --celeste (#A8D3E6, el azul bajito) entrega data-bloque="azul" → repo data-bloque="cobalto" ⚠️ ESTE ARCHIVO NO ES UNA COPIA DE LA ENTREGA. Se le añadieron cosas que la entrega no puede saber y que se pierden SIN UN SOLO ERROR DE CSS si alguien re-sincroniza pegándola encima: · los pares --bulgito-mostrar-solido / --bulgito-mostrar-outline · --tinta-tenue · el tema `papel`, --realce y todo el reparto de v3 Sin los pares, la mascota deja de alternar entre sólido y contorno. Y la entrega reparte los cinco colores como fondos de sección, que es justo lo que v3 vino a quitar: **de ahí se toma la paleta, no el reparto.** Ratios: MEDIDOS con scripts/verificar_contraste.py, no copiados del HANDOFF —ahí varios estaban mal (afirmaba 9.4:1 para el café, son 11.64; 9.0 para el dorado, son 7.55). Todos pasan AA; la mayoría, AAA. */ :root { /* ---- Paleta de marca (5 colores, los de los logos) ---- */ --crema: #EFECDE; --celeste: #A8D3E6; --cobalto: #00147d; --cafe: #4C2F27; --dorado: #D4A341; /* ---- Neutros ---- Suavizados a propósito (decisión de Mario, 2026-08-21): el ojo los lee como negro y blanco puros, pero en párrafos largos —las tres páginas legales— cansan menos que #000 sobre crema. */ --negro: #1A1A1A; /* tinta sobre fondos claros */ --blanco: #FCFBF8; /* tinta sobre fondos oscuros */ --blanco-puro: #FFFFFF; /* superficie de tarjeta, NO tinta y NO fondo de página */ /* EL LIENZO DEL SITIO (v3). Hoy vale lo mismo que --blanco y eso es deliberado: es el mismo blanco cálido de la marca. Tiene nombre propio porque son DOS papeles distintos —uno es superficie de página, el otro es tinta sobre fondo oscuro— y el día que alguien quiera enfriar o calentar el lienzo no debe arrastrar consigo el color del texto del pie. */ --papel: #FCFBF8; /* Un gris por fondo. No es capricho: un solo gris no llega a 4.5:1 sobre todos. Sobre celeste y sobre dorado hace falta un gris muy oscuro y con un punto de la temperatura del fondo, o el texto secundario no pasa AA. */ --gris: #5C5C5C; /* 6.46:1 sobre papel · 5.64:1 sobre crema */ --gris-pizarra: #2E4149; /* 6.67:1 sobre celeste */ --gris-azulado: #C9CEE4; /* 9.62:1 sobre cobalto */ --gris-claro: #CFCBC5; /* 7.46:1 sobre café */ --gris-oliva: #3D2E10; /* 5.71:1 sobre dorado */ /* ---- Tipografía ---- ⏸️ GARBATA ESTÁ RETIRADA HASTA QUE SE COMPRE LA LICENCIA (2026-08-26). Las cuatro `garbata-*.ttf` eran la versión TRIAL de Zetafonts, y publicar el sitio con ellas es servir tipografía de prueba en un sitio comercial. Se sustituyó por la sans del sistema, que no se descarga y no tiene licencia que incumplir. Para volver a Garbata: ver el bloque de `css/base.css` — son dos pasos y están escritos ahí. ⚠️ El fallback de Garbata era `Georgia, serif`, y ESTABA MAL: Garbata es una SANS humanista, no una serif. Se comprobó renderizando las dos juntas el 2026-08-26. O sea que el día que Garbata no cargara, el sitio entero se caía a una serif y cambiaba de carácter sin avisar. La pila de abajo sí se le parece —proporción, altura de x y cifras alineadas—, así que cuando Garbata vuelva, su fallback debe ser ESTA pila y no Georgia. */ --fuente-titulo: Recoleta, Georgia, serif; --fuente-cuerpo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-display-xl-size: clamp(2.75rem, 9vw, 6rem); --t-display-xl-lh: 0.95; --t-display-l-size: clamp(2rem, 5.5vw, 3.5rem); --t-display-l-lh: 0.98; --t-display-m-size: clamp(1.5rem, 3.5vw, 2.25rem); --t-display-m-lh: 1.05; --t-title-s-size: 1.25rem; --t-title-s-lh: 1.15; --t-eyebrow-size: 0.8125rem; --t-eyebrow-lh: 1.2; --t-body-l-size: 1.1875rem; --t-body-l-lh: 1.55; --t-body-size: 1.0625rem; --t-body-lh: 1.60; --t-body-s-size: 0.9375rem; --t-body-s-lh: 1.50; --t-legal-size: 0.875rem; --t-legal-lh: 1.65; /* El logotipo del header tiene su propio tamaño y NO comparte `--t-title-s-size`: ese lo usan los h3 de tarjeta, los de `.b-prosa` y tres componentes más, así que subirlo movía medio sitio para arreglar una sola palabra. A 1.25rem la marca se veía desproporcionada dentro de la barra (Mario, 2026-08-25) y sobraba aire: `.b-header [data-marca]` ya reserva `--toque-min` (44px) de alto, y la letra solo ocupaba ~23. Subió a 2rem y Mario dijo que seguía viéndose chica, así que va al tope. ⚠️ EL TECHO SON 2.75rem, y es exacto, no aproximado. La caja de línea es `font-size × line-height`, y `.b-header [data-marca]` fuerza `line-height: 1` justo para poder llegar aquí: 2.75rem × 1 = 44px = `--toque-min`, o sea que el logo mide exactamente lo mismo que la hamburguesa y la barra se queda en 78px. Medido a 320px el 2026-08-25: a 3rem la caja pasa a 48px y la barra crece a 82px **en las nueve páginas**. No queda margen. ⚠️ Está en 2.5rem, NO en el techo. Llegó a 2.75 y Mario lo vio pasado de grande; 2.5 es el paso atrás que pidió. El techo sigue siendo 2.75 y el margen que queda —6px de caja de línea— es a propósito, no sitio libre para rellenar. */ --t-marca-size: 2.5rem; /* ---- Espaciado (base 4) ---- */ --e-2xs: 2px; --e-xs: 4px; --e-sm: 8px; --e-md: 12px; --e-lg: 16px; --e-xl: 20px; --e-2xl: 24px; --e-3xl: 32px; --e-4xl: 48px; --e-5xl: 72px; --e-6xl: 112px; --bloque-aire: clamp(72px, 10vw, 112px); --ancho-max: 1180px; /* ---- Forma ---- */ --r-badge: 8px; --r-card: 14px; --r-cont: 24px; --r-pill: 999px; --borde-ancho: 2px; --borde-ancho-fuerte: 3px; /* sombras duras, sin blur: se declaran abajo porque dependen de --borde */ --rot-a: -1.5deg; --rot-b: 1.25deg; /* ---- Movimiento ---- */ --curva: cubic-bezier(.16, .84, .44, 1); --dur-rapida: 150ms; --dur-media: 260ms; --dur-reveal: 520ms; --toque-min: 44px; } /* ============================================================ LOS TEMAS Cada uno declara: superficie, tinta neutra, secundario gris, acento, realce decorativo y el par de acción. Se dividen en dos familias, y la diferencia NO es cosmética: · SUPERFICIES DE SECCIÓN — papel · crema · cobalto · cafe Las únicas que pueden ir en un
. · SUPERFICIES DE PIEZA — tarjeta · celeste · dorado Solo para tarjetas, paneles, pastillas y realces DENTRO de una sección. Puestas a página completa son el confeti que v3 vino a quitar. `tests/bloques.test.js` hace cumplir la separación; ningún CSS puede. ============================================================ */ /* ---- 1 · EL LIENZO. La mayoría de las secciones del sitio son esta. ---- */ [data-bloque="papel"] { --superficie: var(--papel); --tinta: var(--negro); /* 16.82:1 AAA */ --tinta-suave: var(--gris); /* 6.46:1 AA */ --tinta-tenue: var(--gris); --borde: var(--cafe); /* canto CÁLIDO sobre superficie clara */ --acento: var(--cobalto); /* 14.53:1 AAA — claro → acento cobalto */ --realce: var(--celeste); /* relleno decorativo, nunca texto */ --realce-tinta: var(--negro); /* 10.88:1 AAA sobre celeste */ --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--cafe);/* sombra CÁLIDA sobre superficie clara */ --accion-fondo: var(--cobalto); --accion-tinta: var(--blanco); /* 14.53:1 AAA */ } /* ---- 2 · LA REPISA. El mismo lienzo, un tono más cálido. ---- */ [data-bloque="crema"] { --superficie: var(--crema); --tinta: var(--negro); /* 14.69:1 AAA */ --tinta-suave: var(--gris); /* 5.64:1 AA */ --tinta-tenue: var(--gris); --borde: var(--cafe); /* canto CÁLIDO sobre superficie clara */ --acento: var(--cobalto); /* 12.69:1 AAA */ --realce: var(--celeste); --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--cafe);/* sombra CÁLIDA sobre superficie clara */ --accion-fondo: var(--cobalto); --accion-tinta: var(--blanco); } /* ---- 3 · ANCLA FRÍA. Máximo dos anclas por página, contando esta. ---- Este tema se llamaba "terracota" hasta el 2026-08-20 y su superficie era #BD5631. En la entrega de Claude Design se llama "azul". Aquí no: ver arriba. */ [data-bloque="cobalto"] { --superficie: var(--cobalto); --tinta: var(--blanco); /* 14.53:1 AAA */ --tinta-suave: var(--gris-azulado); /* 9.62:1 AAA */ --tinta-tenue: var(--gris-azulado); --borde: var(--blanco); --acento: var(--dorado); /* 6.53:1 AA — oscuro → acento dorado */ --realce: var(--dorado); --realce-tinta: var(--negro); /* 7.55:1 AAA sobre dorado */ --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--blanco);/* sobre fondo oscuro el café da 1.25:1: invisible */ --accion-fondo: var(--dorado); /* fondo oscuro → acción dorada */ --accion-tinta: var(--negro); /* 7.55:1 — NUNCA blanco sobre dorado (2.23:1) */ } /* ---- 4 · ANCLA CÁLIDA. La del pie, y como mucho una de contenido. ---- */ [data-bloque="cafe"] { --superficie: var(--cafe); --tinta: var(--blanco); /* 11.64:1 AAA */ --tinta-suave: var(--gris-claro); /* 7.46:1 AAA */ --tinta-tenue: var(--gris-claro); --borde: var(--blanco); /* ⚠️ En v2 el acento del café era CELESTE, "el par de su logo". Se cambió a dorado el 2026-08-25 por la regla 5: el acento lo decide la luminosidad del fondo, no el logo. Con celeste aquí y dorado en cobalto, las dos anclas oscuras de la misma página tenían antetítulos de colores distintos — el desorden en pequeño. El celeste no se pierde: sigue vivo como --realce del tema claro y como superficie de pieza. */ --acento: var(--dorado); /* 5.23:1 AA */ --realce: var(--dorado); --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--blanco);/* sobre fondo oscuro el café da 1.25:1: invisible */ --accion-fondo: var(--dorado); /* el cobalto sobre café da 1.25:1: invisible */ --accion-tinta: var(--negro); } /* ============================================================ SUPERFICIES DE PIEZA — nunca un
============================================================ */ /* Tarjeta blanca sobre cualquier bloque: el escalón más claro del sistema. */ [data-bloque] [data-superficie="tarjeta"] { --superficie: var(--blanco-puro); --tinta: var(--negro); /* 17.40:1 AAA */ --tinta-suave: var(--gris); /* 6.69:1 AA */ --tinta-tenue: var(--gris); --borde: var(--cafe); /* canto CÁLIDO sobre superficie clara */ --acento: var(--cobalto); /* 15.04:1 AAA */ --realce: var(--celeste); --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--cafe);/* sombra CÁLIDA sobre superficie clara */ --accion-fondo: var(--cobalto); --accion-tinta: var(--blanco); } /* Panel celeste: el azul bajito de la marca, en pieza y no en pantalla entera. Para destacar UNA tarjeta de una rejilla, un aviso o una nota al margen. */ [data-bloque] [data-superficie="celeste"] { --superficie: var(--celeste); --tinta: var(--negro); /* 10.88:1 AAA */ --tinta-suave: var(--gris-pizarra); /* 6.67:1 AA */ --tinta-tenue: var(--gris-pizarra); --borde: var(--cafe); /* canto CÁLIDO sobre superficie clara */ --acento: var(--cobalto); /* 9.40:1 AAA */ --realce: var(--dorado); /* el otro acento, para no repetirse */ --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--cafe);/* sombra CÁLIDA sobre superficie clara */ --accion-fondo: var(--cobalto); --accion-tinta: var(--blanco); } /* Panel dorado: el énfasis cálido. Es el más ruidoso de los tres, así que va en piezas chicas y de una en una — un precio destacado, un sticker, un aviso. */ [data-bloque] [data-superficie="dorado"] { --superficie: var(--dorado); --tinta: var(--negro); /* 7.55:1 AAA */ --tinta-suave: var(--gris-oliva); /* 5.71:1 AA */ --tinta-tenue: var(--gris-oliva); --borde: var(--cafe); /* canto CÁLIDO sobre superficie clara */ --acento: var(--cobalto); /* 6.53:1 AA */ --realce: var(--celeste); --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--cafe);/* sombra CÁLIDA sobre superficie clara */ --accion-fondo: var(--cobalto); /* 6.53:1 — pasa de sobra el 3:1 de UI */ --accion-tinta: var(--blanco); } /* Panel café: el ancla cálida en tamaño de pieza (2026-08-25, a petición de Mario: «se pierde el café, solo está en el footer»). Para UNA cosa por página y de las que quieren voz humana —la nota del bulgicultor, una cita—, no para tarjetas de rejilla: tres de estas seguidas ya no son un detalle, son la banda café que v3 quitó. ⚠️ Su `--borde` es NEGRO y no blanco, al revés que el tema café de sección. No es un descuido: una sección café ocupa todo el ancho y no tiene "fuera", así que su borde solo se ve por dentro. Una PIEZA café se recorta contra el lienzo, y ahí el relleno ya da 11.64:1 él solo; el borde existe para que la tarjeta tenga el mismo canto negro que todas las demás de la página. Con el borde blanco saldría un aro claro entre el marrón y el papel, que se lee como un error de maquetación. */ [data-bloque] [data-superficie="cafe"] { --superficie: var(--cafe); --tinta: var(--blanco); /* 11.64:1 AAA */ --tinta-suave: var(--gris-claro); /* 7.46:1 AAA */ --tinta-tenue: var(--gris-claro); --borde: var(--negro); --acento: var(--dorado); /* 5.23:1 AA — oscuro → acento dorado */ --realce: var(--dorado); --realce-tinta: var(--negro); --realce-borde: var(--negro); /* NO es --borde: ver la regla 7 */ --sombra-color: var(--negro);/* la pieza café ya es cálida: su sombra va oscura */ --accion-fondo: var(--dorado); --accion-tinta: var(--negro); } /* ---- Sombras duras: dependen de --borde, así que van después de los temas ---- */ [data-bloque], [data-bloque] [data-superficie] { --sombra: 4px 4px 0 var(--sombra-color); --sombra-alta: 6px 6px 0 var(--sombra-color); --sombra-fuerte: 6px 6px 0 var(--sombra-color); --sombra-nula: 0 0 0 var(--sombra-color); } /* ⚠️ Aquí vivió `--sombra-junta`, un anillo de 1px para tapar la raya clara que sale entre el canto y la sombra del botón de CONTORNO. Se quitó el 2026-08-25: solo la bajaba de 102 a 77 (54 es el café pleno) porque el píxel que sobra está DENTRO del borde y un anillo exterior no lo alcanza. Lo que sí la quita es `filter: drop-shadow` en `.b-btn--outline` — el porqué está escrito ahí. Si vuelve a hacer falta un anillo para otra cosa, que no se llame «junta»: para esto no servía. */ /* ---- Bulgito: sólido en superficies claras, contorno en oscuras ---- ⚠️ ESTO NO VIENE EN LA ENTREGA DE CLAUDE DESIGN. Un custom property no se puede leer desde un selector, así que la variante se aplica con este par de interruptores: cada tema enciende uno y apaga el otro. Si se pierden, la mascota se queda en una sola variante y no hay error de CSS que lo avise. En la variante sólida los ojos son huecos recortados en la mancha, así que --bulgito-cara tiene que ser la SUPERFICIE. En contorno los ojos son trazo: ahí la cara es la TINTA, o el dibujo sale sin ojos. */ [data-bloque="papel"], [data-bloque="crema"], [data-bloque] [data-superficie="tarjeta"], [data-bloque] [data-superficie="celeste"], [data-bloque] [data-superficie="dorado"] { --bulgito-var: solido; --bulgito-mostrar-solido: block; --bulgito-mostrar-outline: none; --bulgito-relleno: var(--tinta); --bulgito-cara: var(--superficie); } [data-bloque="cobalto"], [data-bloque="cafe"], [data-bloque] [data-superficie="cafe"] { --bulgito-var: outline; --bulgito-mostrar-solido: none; --bulgito-mostrar-outline: block; --bulgito-relleno: transparent; --bulgito-cara: var(--tinta); } /* ---- El canto del sitio es CAFÉ sobre superficie clara (2026-08-25) ---- El `--borde` de las cinco superficies claras —papel, crema, tarjeta, celeste y dorado— pasó de negro a café. Es a petición de Mario, en la misma línea que la sombra: pone café en todos los componentes de todas las páginas sin darle ni una sección. Un canto es una tira de 2px, así que por construcción no puede ser un golpe de color. ⚠️ VA DENTRO DE CADA TEMA, y esto ya se intentó al revés. Escribirlo como un bloque agrupado al final —más corto y más fácil de revertir— hace que `scripts/verificar_contraste.py` NO LO VEA: su parser solo entra en bloques que declaran `--superficie`, así que seguía midiendo el borde negro viejo y decía "las 72 casillas pasan" sobre un valor que el navegador ya no usaba. Un guardián que mide otra cosa es peor que no tenerlo. Si mañana hay que cambiar esto otra vez, se cambia tema por tema. ⚠️ Solo las CLARAS. Sobre cobalto el café da 1.25:1 y sobre una pieza café 1.00:1: el borde se esfumaría sin ningún error. Los oscuros conservan su blanco y la pieza café su negro, igual que ya hace `--sombra-color`. ⚠️ `--borde` y `--sombra-color` siguen siendo DOS tokens, aunque ahora valgan lo mismo en claro. No los unifiques «para simplificar»: el borde responde ante WCAG 1.4.11 (3:1, porque delimita el componente) y la sombra no responde ante nadie. El día que un borde tenga que oscurecerse por contraste, unificados se llevarían la sombra por delante. ⚠️ `--realce-borde` NO se toca: sigue negro (regla 7). */