/* ============================================================ FUNDACIÓN BANÚS · DESIGN TOKENS Sistema de diseño derivado del briefing (junio 2026). Dos capas: 1. PRIMITIVAS → el color/medida en crudo. No usar en componentes. 2. SEMÁNTICAS → qué papel cumple. Esto es lo que se usa al maquetar. Las semánticas se reasignan por superficie (negro / arena / piedra), así que un mismo componente se comporta bien en las tres sin tocarlo. ============================================================ */ :root { /* ---------------------------------------------------------- 1. PRIMITIVAS · COLOR Valores del briefing. Ver notas de contraste más abajo. ---------------------------------------------------------- */ --fb-negro-calido: #1A1A1A; /* tinta sobre papel, nunca negro digital */ --fb-arena: #D4D2CA; /* papel cálido y analógico, secciones editoriales */ --fb-gris-piedra: #3B3A3D; /* estructura: paneles y separaciones */ --fb-gris-medio: #656468; /* solo apoyo no textual */ --fb-blanco-roto: #F2F0E6; /* jamás puro; luz y texto sobre oscuro */ --fb-rosa-banus: #C26474; /* el único color con voz propia */ --fb-rosa-suave: #C6919A; /* el rosa legible sobre negro */ --fb-vino: #6E4A55; /* el rosa legible sobre arena */ /* Verde de La Concha. No es un verde de catálogo: el tono (106°) está muestreado de la vegetación del monte en la fotografía del hero, el mismo criterio con el que el briefing dice que los neutros salen "del propio paisaje de la costa". Sobre ese tono se le da el carácter empolvado de la paleta —saturación baja, luz alta— para que sea pariente del rosa suave y no un color invitado. Único cometido: estado "convocatoria abierta". No es un segundo acento; el rosa sigue siendo el único color con voz propia. */ --fb-verde-concha: #AAC3A2; /* estado abierto, sobre negro y piedra */ --fb-verde-hondo: #3A5D30; /* su pareja para superficie arena */ /* ---------------------------------------------------------- 2. PRIMITIVAS · TIPOGRAFÍA Deuterium Variable es de Adobe Fonts (Kostic Type Foundry): NO está en Google Fonts y necesita un kit de Adobe. Ver fonts.css. Jost queda como sustituta geométrica mientras no haya kit. ---------------------------------------------------------- */ --font-display: "deuterium-variable", "Deuterium Variable", "Jost", "Century Gothic", system-ui, sans-serif; --font-editorial: "Bodoni Moda", "Didot", Georgia, serif; --font-texto: "Public Sans", system-ui, -apple-system, sans-serif; --fw-thin: 100; --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* El peso del texto de lectura. Hasta ahora esta era la única voz del sistema sin decidir: ni body ni .cuerpo declaraban peso, así que el texto largo caía en el 400 por defecto del navegador. Con un rótulo en 100 y los leads en Bodoni, ese 400 pleno de Public Sans se leía macizo. El 300 no es un valor nuevo: es el mismo juicio que ya estaba escrito para .convocatoria__ficha dd —«el 400 de Public Sans se leía robusto, casi en negrita»—, aplicado por fin a la voz que más superficie ocupa de la página. El valor salió de mirar, no de calcular. Se probó primero en 300 y no se apreciaba: medida la tinta sobre lienzo, el 300 solo quita un 10% respecto al 400, por debajo del umbral en que se nota nada sin comparar lado a lado. El eje de peso de Public Sans es muy suave en ese tramo. El 200 quita un 20% y ahí sí se lee el cambio. 400 · 100% 350 · 95% 300 · 90% 250 · 85% 200 · 80% ATENCIÓN: 200 es exactamente el suelo de lo que fonts.css pide a Google (wght@200..700). Public Sans llega hasta 100 de verdad, pero si algún día se baja de 200 hay que ampliar antes esa petición, o el navegador falsificará el fino adelgazando el trazo por software y sin avisar. Tiene token propio, y no reutiliza --fw-extralight directamente, porque es lo que se va a querer afinar mirando. Cambiarlo aquí no arrastra a las fichas ni a las dotaciones, que también son ligeras pero por su propio motivo. */ --fw-lectura: var(--fw-extralight); /* Escala fluida. El rótulo grande domina; el cuerpo no crece apenas. El suelo de --text-hero no es una decisión estética sino física: "FUNDACIÓN" es una palabra larga que el navegador no puede partir. Con un suelo alto, en un móvil estrecho la palabra mide más que la pantalla y arrastra a toda la rejilla, desbordando la página entera. A 2.125rem entra en 320px con margen. Por encima de ese ancho el clamp ya no toca el suelo, así que no encoge nada. */ --text-hero: clamp(2.125rem, 7vw, 6.5rem); --text-display: clamp(2rem, 4.5vw, 3.75rem); --text-titulo: clamp(1.75rem, 3vw, 2.5rem); --text-lead: clamp(1.25rem, 2vw, 1.75rem); --text-cuerpo: 1.0625rem; --text-menor: 0.9375rem; --text-micro: 0.75rem; --lh-apretado: 1.05; /* rótulos display */ --lh-titulo: 1.2; --lh-lead: 1.4; --lh-cuerpo: 1.65; /* legibilidad: el briefing insiste en "entrar sin fricción" */ /* El tracking amplio es la firma de los rótulos: "el nombre grabado en la fachada". A mayor cuerpo, menos tracking relativo. */ --track-rotulo: 0.18em; --track-eyebrow: 0.22em; --track-hero: 0.08em; --track-normal: 0; /* ---------------------------------------------------------- 3. PRIMITIVAS · ESPACIO, MEDIDA Y AIRE "Mucho aire" es requisito del briefing, no decoración. ---------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; --seccion-y: clamp(4rem, 10vw, 9rem); /* aire vertical entre secciones */ --container-max: 1200px; --container-pad: clamp(1.5rem, 5vw, 4rem); --medida: 68ch; /* longitud de línea legible */ /* ---------------------------------------------------------- 4. PRIMITIVAS · TRAZO, RADIO Y MOVIMIENTO Sistema editorial: filos rectos, sin sombras difusas. ---------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-pill: 999px; --linea: 1px; --regla-gruesa: 2px; --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-rapida: 160ms; --dur-media: 280ms; /* ---------------------------------------------------------- 5. SEMÁNTICAS · SUPERFICIE NEGRA (por defecto) ---------------------------------------------------------- */ --surface: var(--fb-negro-calido); --surface-panel: var(--fb-gris-piedra); --texto: var(--fb-blanco-roto); --texto-tenue: color-mix(in srgb, var(--fb-blanco-roto) 68%, var(--fb-negro-calido)); --texto-editorial: var(--fb-arena); --borde: color-mix(in srgb, var(--fb-blanco-roto) 18%, transparent); --borde-fuerte: color-mix(in srgb, var(--fb-blanco-roto) 38%, transparent); /* El acento se parte en dos por contraste (ver nota al final): -display → rótulos, numeración, cifras grandes (>=24px o bold) -texto → enlaces y énfasis a cuerpo de texto */ --acento-display: var(--fb-rosa-banus); --acento-texto: var(--fb-rosa-suave); --acento-suelo: color-mix(in srgb, var(--fb-rosa-banus) 22%, transparent); /* Estado de convocatoria. Semántico y no primitivo, para que cambie solo al pisar otra superficie, igual que el acento. */ --estado-abierto: var(--fb-verde-concha); --focus: var(--fb-rosa-suave); } /* ---------------------------------------------------------- 6. SEMÁNTICAS · SUPERFICIE ARENA Para secciones editoriales: "papel cálido y analógico". Aquí el rosa Banús NO vale como texto (2.58:1) → entra el vino. ---------------------------------------------------------- */ [data-surface="arena"] { --surface: var(--fb-arena); --surface-panel: color-mix(in srgb, var(--fb-arena) 82%, var(--fb-negro-calido)); --texto: var(--fb-negro-calido); --texto-tenue: color-mix(in srgb, var(--fb-negro-calido) 72%, var(--fb-arena)); --texto-editorial: var(--fb-gris-piedra); --borde: color-mix(in srgb, var(--fb-negro-calido) 20%, transparent); --borde-fuerte: color-mix(in srgb, var(--fb-negro-calido) 45%, transparent); --acento-display: var(--fb-vino); --acento-texto: var(--fb-vino); --acento-suelo: color-mix(in srgb, var(--fb-vino) 18%, transparent); /* Sobre arena el verde claro se pierde (1.16:1): entra el hondo. */ --estado-abierto: var(--fb-verde-hondo); --focus: var(--fb-vino); } /* ---------------------------------------------------------- 7. SEMÁNTICAS · SUPERFICIE PIEDRA Paneles y bloques destacados dentro de la superficie negra. ---------------------------------------------------------- */ [data-surface="piedra"] { --surface: var(--fb-gris-piedra); --surface-panel: color-mix(in srgb, var(--fb-gris-piedra) 80%, var(--fb-negro-calido)); --texto: var(--fb-blanco-roto); --texto-tenue: color-mix(in srgb, var(--fb-blanco-roto) 70%, var(--fb-gris-piedra)); --texto-editorial: var(--fb-arena); --borde: color-mix(in srgb, var(--fb-blanco-roto) 22%, transparent); --borde-fuerte: color-mix(in srgb, var(--fb-blanco-roto) 42%, transparent); --acento-display: var(--fb-rosa-suave); --acento-texto: var(--fb-rosa-suave); --acento-suelo: color-mix(in srgb, var(--fb-rosa-suave) 22%, transparent); --estado-abierto: var(--fb-verde-concha); --focus: var(--fb-rosa-suave); } /* ============================================================ NOTA DE CONTRASTE (medido, WCAG 2.1 AA) El briefing dice que el rosa Banús está "igual de cómodo sobre el negro que sobre el arena". Medido, no lo está: Rosa Banús #C26474 sobre negro → 4.45:1 falla cuerpo (pide 4.5), pasa titular Rosa Banús #C26474 sobre arena → 2.58:1 falla ambos Rosa suave #C6919A sobre negro → 6.56:1 pasa ambos Vino #6E4A55 sobre arena → 5.00:1 pasa ambos Blanco roto sobre negro → 15.23:1 Gris medio #656468 sobre negro → 2.96:1 nunca como texto Por eso --acento-display y --acento-texto son tokens distintos: el rosa Banús se conserva donde el briefing lo quiere (rótulos, cifras, numeración) y cede a un pariente legible en cuerpo de texto. La firma de marca se mantiene; la legibilidad también. ============================================================ */