/* ========================================================================== NEUROHABLEMOS — Design tokens v1.0 (2026-09-28) · copia para la web Fuente de verdad: 04_MARCA/sistema-de-diseno/SISTEMA_DE_DISENO_NEUROHABLEMOS.md Este archivo = bloque oficial (sección A, idéntico a 04_MARCA/sistema-de-diseno/tokens.css) + capa de compatibilidad web (sección B). Al actualizar el sistema de diseño, actualizar la sección A aquí y en campus/assets/tokens.css. ========================================================================== */ /* --------------------------------------------------------------------------- A · TOKENS OFICIALES (no editar a mano: copiar desde 04_MARCA) --------------------------------------------------------------------------- */ :root { /* ---- Núcleo (60 %) ---- */ --nh-tinta: #111820; --nh-hueso: #FAFAF7; --nh-niebla: #E9EEF3; --nh-grafito: #5B6470; /* ---- Azules de marca (25 %) ---- */ --nh-profundo: #1C3A5C; --nh-azul: #5E8CB8; /* Azul Neuro — color del logotipo */ --nh-cian: #1FB6E9; /* Cian sinapsis — solo líneas/iconos sobre claro */ --nh-hielo: #DDEFF9; /* ---- Calidez (10 %) ---- */ --nh-coral: #F09BA0; --nh-rubor: #FBE4E6; --nh-coral-profundo: #C8556A; /* ---- Acento (5 %) — único ---- */ --nh-lima: #92BD4F; /* ---- Alias semánticos: MODO CLARO (por defecto) ---- */ --nh-bg: var(--nh-hueso); --nh-bg-2: var(--nh-niebla); --nh-surface: var(--nh-hielo); --nh-text: var(--nh-tinta); --nh-text-2: var(--nh-grafito); --nh-heading: var(--nh-profundo); --nh-serif-word: var(--nh-profundo); --nh-line: var(--nh-azul); --nh-btn-bg: var(--nh-tinta); --nh-btn-text: var(--nh-lima); --nh-btn2-border: var(--nh-profundo); --nh-badge-bg: var(--nh-hielo); --nh-badge-text: var(--nh-profundo); --nh-quote-bg: var(--nh-rubor); --nh-quote-mark: var(--nh-coral-profundo); --nh-partner-mono: var(--nh-profundo); /* RENE Academy y aliados */ --nh-sponsor-mono: var(--nh-grafito); /* ---- Tipografía ---- */ --nh-font-display: "Inter Display", "Geist", "Satoshi", Inter, Helvetica, Arial, sans-serif; --nh-font-text: Inter, "Geist", Helvetica, Arial, sans-serif; --nh-font-serif: "Instrument Serif", "Newsreader", Georgia, serif; --nh-font-mono: "Geist Mono", "JetBrains Mono", "Courier New", monospace; --nh-display-xl: clamp(56px, 8vw, 96px); --nh-display-l: clamp(40px, 5vw, 56px); --nh-h1: 34px; --nh-h2: 24px; --nh-body: 17px; --nh-small: 14px; --nh-label: 12px; --nh-tracking-display: -0.025em; --nh-tracking-label: 0.10em; --nh-leading-display: 1.0; --nh-leading-body: 1.5; /* ---- Espaciado y forma ---- */ --nh-s-1: 4px; --nh-s-2: 8px; --nh-s-3: 12px; --nh-s-4: 16px; --nh-s-5: 24px; --nh-s-6: 32px; --nh-s-7: 48px; --nh-s-8: 64px; --nh-s-9: 96px; --nh-s-10: 128px; --nh-radius-card: 16px; --nh-radius-icon: 12px; --nh-radius-badge: 14px; --nh-radius-pill: 999px; --nh-line-w: 1px; --nh-shadow-flyer: 0 8px 24px rgba(28, 58, 92, 0.08); /* solo piezas gráficas, no web */ --nh-container: 1200px; --nh-gutter: 24px; /* ---- Movimiento ---- */ --nh-ease: cubic-bezier(.2,.7,.2,1); --nh-dur: 400ms; } /* ---- MODO OSCURO — eventos y streaming (no se usa en la web; se conserva por paridad) ---- */ [data-mode="oscuro"] { --nh-bg: var(--nh-tinta); --nh-bg-2: #171F29; --nh-surface: rgba(250, 250, 247, 0.08); --nh-text: var(--nh-hueso); --nh-text-2: rgba(250, 250, 247, 0.70); --nh-heading: var(--nh-hueso); --nh-serif-word: var(--nh-cian); --nh-line: rgba(94, 140, 184, 0.40); --nh-btn-bg: var(--nh-lima); --nh-btn-text: var(--nh-tinta); --nh-btn2-border: var(--nh-hueso); --nh-badge-bg: rgba(250, 250, 247, 0.12); --nh-badge-text: var(--nh-hueso); --nh-quote-bg: rgba(240, 155, 160, 0.14); --nh-quote-mark: var(--nh-coral); --nh-partner-mono: var(--nh-hueso); --nh-sponsor-mono: rgba(250, 250, 247, 0.70); } /* ---- MODO PROFUNDO — académico e institucional (permitido en bloques destacados de la web) ---- */ [data-mode="profundo"] { --nh-bg: var(--nh-profundo); --nh-bg-2: #16304D; --nh-surface: rgba(250, 250, 247, 0.08); --nh-text: var(--nh-hueso); --nh-text-2: rgba(221, 239, 249, 0.80); --nh-heading: var(--nh-hueso); --nh-serif-word: var(--nh-coral); --nh-line: rgba(94, 140, 184, 0.60); --nh-btn-bg: var(--nh-hueso); --nh-btn-text: var(--nh-profundo); --nh-btn2-border: var(--nh-hueso); --nh-badge-bg: rgba(250, 250, 247, 0.12); --nh-badge-text: var(--nh-hueso); --nh-quote-bg: rgba(240, 155, 160, 0.14); --nh-quote-mark: var(--nh-coral); --nh-partner-mono: var(--nh-hueso); --nh-sponsor-mono: rgba(250, 250, 247, 0.70); } @media (prefers-reduced-motion: reduce) { :root { --nh-dur: 0ms; } } /* --------------------------------------------------------------------------- B · CAPA DE COMPATIBILIDAD WEB Nombres que usan site.css, campus.css e index.html. Todos derivan de los tokens oficiales de la sección A; aquí no se define ningún color nuevo. El amarillo (--nh-yellow) queda retirado y NO existe: cualquier referencia que sobreviva se verá sin color y debe corregirse. --------------------------------------------------------------------------- */ :root { /* Color */ --nh-black: var(--nh-tinta); --nh-white: var(--nh-hueso); --nh-stone: var(--nh-niebla); --nh-navy: var(--nh-profundo); --nh-sky: var(--nh-cian); /* solo filetes, iconos y texto sobre fondo oscuro */ --nh-ink: var(--nh-tinta); /* texto sobre claro */ --nh-ink-2: var(--nh-grafito); /* texto secundario */ --nh-ink-3: var(--nh-grafito); /* metadatos (antes un gris más claro; Grafito cumple 5.2:1) */ /* --nh-line (oficial) = Azul Neuro: filete entre logos, columnas y bajo titulares (manual 6.5) */ --nh-line-card: var(--nh-niebla); /* borde de tarjetas en reposo (manual 6.3) */ --nh-line-dark: rgba(94, 140, 184, 0.40); /* filete sobre Profundo / Tinta (manual 6.5) */ --nh-line-input: rgba(94, 140, 184, 0.45); /* borde visible de campos de formulario */ --nh-focus-ring: rgba(31, 182, 233, 0.30); /* halo de foco (Cian) */ /* Estados funcionales del sistema (no son colores de marca; feedback de pagos/validación) */ --nh-ok: #2F7D4F; --nh-warn: #9A6B00; --nh-bad: #B3261E; /* Tipografía (alias) */ --font-display: var(--nh-font-display); --font-text: var(--nh-font-text); --font-serif: var(--nh-font-serif); --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* JetBrains Mono es la que carga Google Fonts */ --fs-hero: clamp(2.75rem, 1.2rem + 5.6vw, 6rem); /* 44 → 96 px = display-xl */ --fs-h2: clamp(2rem, 1.1rem + 3vw, 3.5rem); /* 32 → 56 px = display-l */ --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); /* 22 → 28 px = heading-2 */ --fs-body: 1.0625rem; /* 17 px */ --fs-body-lg: 1.125rem; /* 18 px */ --fs-small: 0.9375rem; /* 15 px */ --fs-mono: 0.75rem; /* 12 px = label */ --lh-body: 1.6; --lh-tight: 1.02; --measure: 68ch; --track-display: -0.028em; --track-mono: 0.10em; /* Espaciado (escala 4 px) */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --section-y: clamp(5rem, 4rem + 6vw, 10rem); /* 80 → 160 px */ --container: 1200px; --gutter: clamp(1rem, 4vw, 3rem); /* Forma */ --radius-card: var(--nh-radius-card); --radius-pill: var(--nh-radius-pill); --radius-input: 10px; --border: 1px solid var(--nh-line-card); --shadow-hair: 0 1px 0 rgba(17,24,32,.04); /* Movimiento */ --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-fast: 200ms; --dur-base: 450ms; --dur-slow: 600ms; --stagger: 60ms; --marquee: 40s; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --stagger: 0ms; --marquee: 0s; } }