/* ========================================================================= LaCardio · Design tokens ------------------------------------------------------------------------- Tres capas, de abajo hacia arriba: 1. PRIMITIVAS — el valor crudo. Una paleta, una escala. No dicen para qué. 2. SEMÁNTICOS — el uso. `--lc-bg-band` no es "gris azulado", es "el fondo de las bandas de sección". Es lo que se usa al construir. 3. ALIAS LEGADOS — nombres viejos que la familia especialidad todavía pide. No usar en código nuevo; se retiran en el port a React. Fuente: educacion-continua-eventos/styles.css (set --lc-* completo) + el inventario de valores reales del código (2026-08-28, ver la deuda al final). ========================================================================= */ /* ========================================================================= 1 · PRIMITIVAS ========================================================================= */ :root { /* — Escala azul (Color/Blue del DS en Figma) —————————————— */ --lc-blue-50: #E5EBF6; --lc-blue-100: #C3D0EA; --lc-blue-200: #94A9DB; --lc-blue-300: #6582CB; --lc-blue-500: #1D386D; --lc-blue-700: #001B45; --lc-blue-jordy: #AACCFF; --lc-blue-jordy-light: #EEF5FF; --lc-blue-royal: #002D72; /* — Neutrales ————————————————————————————————————————————— */ --lc-white: #FFFFFF; --lc-ink: #080808; --lc-ink-600: #616161; --lc-ink-700: #474644; /* text/secondary del Figma */ --lc-gray-200: #C9C9C9; --lc-gray-300: #C5C4C1; /* — Grises azulados: las bandas y filetes del cromo ——————— */ /* Los cuatro estaban hardcodeados en header, footer, sedes, satis y cred. Son colores de marca de facto que nunca se habían tokenizado. */ --lc-band-100: #F7F9FC; --lc-band-200: #F0F2F5; --lc-band-250: #EAEDF2; /* ⚠️ a ojo es el mismo que band-200: candidato a fundir */ --lc-band-300: #E7EDF1; /* — Rojo de marca ————————————————————————————————————————— */ --lc-red-50: #FEF0F3; /* estaba a pelo en el hover del CTA de donación */ --lc-red-500: #E40046; --lc-red-600: #B70038; } /* ========================================================================= 2 · SEMÁNTICOS ========================================================================= */ :root { /* — Marca ————————————————————————————————————————————————— */ --lc-brand-primary: var(--lc-blue-royal); --lc-brand-primary-hover: #00245C; --lc-brand-primary-active: var(--lc-blue-700); --lc-brand-secondary: var(--lc-red-500); --lc-brand-secondary-hover:var(--lc-red-600); /* — Texto ———————————————————————————————————————————————— */ --lc-text-primary: var(--lc-ink); --lc-text-secondary: var(--lc-ink-600); --lc-text-on-brand: var(--lc-white); /* — Fondos ——————————————————————————————————————————————— */ --lc-bg-page: #F4F3F0; --lc-bg-surface: var(--lc-white); --lc-bg-topbar: var(--lc-blue-jordy-light); --lc-bg-subtle: var(--lc-band-100); /* filas del menú móvil */ --lc-bg-band: var(--lc-band-300); /* bandas de sección y arranque de degradados a blanco */ /* — Bordes ——————————————————————————————————————————————— */ --lc-border-default: var(--lc-gray-300); --lc-border-soft: var(--lc-band-200); /* filetes dentro del cromo */ --lc-border-soft-alt:var(--lc-band-250); /* ⚠️ ver deuda */ /* — Sombras ——————————————————————————————————————————————— */ --lc-shadow-header: 0px 9px 20.6px 0px rgba(196, 210, 216, 0.4); --lc-shadow-bottom-nav: 0px 6px 12px 0px rgba(3, 14, 37, 0.35); --lc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.10); --lc-shadow-btn: 0 4px 14px rgba(0, 45, 114, 0.40); /* — Familias ——————————————————————————————————————————————— */ --lc-font-heading: 'Fira Sans', sans-serif; --lc-font-body: 'Open Sans', sans-serif; /* — Pesos ————————————————————————————————————————————————— */ --lc-fw-regular: 400; --lc-fw-medium: 500; --lc-fw-semibold: 600; --lc-fw-bold: 700; /* — Escala de texto · DESKTOP ——————————————————————————————— */ --lc-size-h1: 46px; --lc-size-h2: 40px; --lc-size-h3: 36px; --lc-size-h4: 32px; --lc-size-h5: 24px; --lc-size-h6: 20px; --lc-size-body: 18px; --lc-size-body-sm: 14px; --lc-size-caption: 12px; --lc-size-eyebrow: 14px; --lc-size-btn: 16px; --lc-size-btn-lg: 18px; --lc-lh-h1: 56px; --lc-lh-h2: 52px; --lc-lh-h3: 44px; --lc-lh-h4: 41px; --lc-lh-h5: 32px; --lc-lh-h6: 28px; --lc-lh-body: 24px; --lc-lh-body-sm: 20px; /* — Letter-spacing ———————————————————————————————————————— */ /* En EM, no en px: el DS de Figma los define como porcentaje del tamaño y el código lo confirma — −1% da 40→−0.4, 32→−0.32, 24→−0.24, 20→−0.2; +1.5% da 18→0.27, 16→0.24, 14→0.21. Al escribirlos en px hacía falta un token por tamaño y no funcionaban en la escala mobile. Ver deuda #2. */ --lc-ls-heading: -0.01em; /* −1% · antes decía -1px, que nadie usaba */ --lc-ls-body: 0.015em; /* +1.5% · antes decía 1.5px, que nadie usaba */ --lc-ls-eyebrow: 0.26em; /* 3.64px a 14px · el eyebrow real, 16 componentes */ --lc-ls-btn: -0.02em; /* −2% · −0.36px a 18px, en 18 sitios */ /* — Espaciado ————————————————————————————————————————————— */ --lc-space-xxs: 4px; --lc-space-xs: 8px; --lc-space-sm: 12px; /* añadido 2026-08-31 · era el hueco de la escala: el gap más repetido de la biblioteca (eyebrow → título → lead) y no tenía token. Hallazgo #6. */ --lc-space-md: 16px; --lc-space-lg: 24px; --lc-space-xl: 32px; --lc-space-2xl: 48px; --lc-space-3xl: 64px; --lc-space-4xl: 80px; /* — Radios ———————————————————————————————————————————————— */ /* 6px es el radio POR DEFECTO del sistema: el más usado de todos (botones, tarjetas, el campo del buscador, los paneles del selector) y el único que no tenía token. Por eso el canon del botón lo escribía a pelo y siete botones propios acabaron pidiéndole el radio a --lc-radius-md, que vale 8: el sistema dibujaba dos radios para la misma pieza (hallazgo 30). No entra en la escalera sm/md/lg/xl —que se queda igual, nada se mueve— porque no es un escalón: es el valor de partida y los demás son la excepción. El alias legado --radius-sm ya valía 6 y ahora apunta aquí. */ --lc-radius-base: 6px; --lc-radius-sm: 4px; --lc-radius-md: 8px; --lc-radius-lg: 12px; --lc-radius-xl: 16px; --lc-radius-full: 9999px; /* — Estructura del header ————————————————————————————————— */ --lc-mobile-header-h: 70px; --lc-topbar-h: 36px; --lc-navbar-h: 90px; --lc-desktop-header-h: calc(var(--lc-topbar-h) + var(--lc-navbar-h)); } /* ========================================================================= 3 · RETÍCULA ------------------------------------------------------------------------- Desktop: 12 columnas · margen 120 · gutter 36 → contenido 1200 · columna 67 Mobile: 4 columnas · margen 24 · gutter 18 → contenido 342 · columna 72 La columna NO es un número redondo y por eso el código está lleno de "números mágicos": 273px son 3 columnas, 685px son 7. Los tokens --lc-span-* son esos anchos ya calculados, para dejar de escribirlos a mano. Los span cambian solos en mobile: solo se redefinen las dos primitivas (columna y gutter) en el @media del final, y el calc hace el resto. ========================================================================= */ :root { --lc-grid-cols: 12; --lc-grid-col: 67px; --lc-grid-gutter: 36px; --lc-grid-margin: 120px; --lc-grid-content: 1200px; /* Anchos en columnas. N columnas = N anchos + (N−1) gutters. */ --lc-span-1: var(--lc-grid-col); --lc-span-2: calc(2 * var(--lc-grid-col) + 1 * var(--lc-grid-gutter)); --lc-span-3: calc(3 * var(--lc-grid-col) + 2 * var(--lc-grid-gutter)); --lc-span-4: calc(4 * var(--lc-grid-col) + 3 * var(--lc-grid-gutter)); --lc-span-5: calc(5 * var(--lc-grid-col) + 4 * var(--lc-grid-gutter)); --lc-span-6: calc(6 * var(--lc-grid-col) + 5 * var(--lc-grid-gutter)); --lc-span-7: calc(7 * var(--lc-grid-col) + 6 * var(--lc-grid-gutter)); --lc-span-8: calc(8 * var(--lc-grid-col) + 7 * var(--lc-grid-gutter)); --lc-span-9: calc(9 * var(--lc-grid-col) + 8 * var(--lc-grid-gutter)); --lc-span-10: calc(10 * var(--lc-grid-col) + 9 * var(--lc-grid-gutter)); --lc-span-11: calc(11 * var(--lc-grid-col) + 10 * var(--lc-grid-gutter)); --lc-span-12: var(--lc-grid-content); /* — Margen lateral de página ——————————————————————————————— */ /* ⚠️ `--page-pad-x` usa 100%, que resuelve contra el contenedor donde se escribe: dentro de una columna de grilla se desalinea del resto del sitio (deuda #5). Se conserva porque lo usa todo el código existente. `--lc-page-pad-x` mide contra el viewport y es seguro en cualquier lugar: es el que hay que usar de aquí en adelante. */ --page-pad-x: max(120px, calc((100% - 1200px) / 2)); --lc-page-pad-x: max(var(--lc-grid-margin), calc((100vw - var(--lc-grid-content)) / 2)); /* Segundo ritmo de margen. Las landings de educación respiran 64/40/24 en vez de 120/60/24: su contenido es más ancho. Es una divergencia REAL del sistema, no un error — y se nombra aquí, una vez, en vez de repetirla en cuatro styles.css. Candidata a unificar cuando alguien decida cuál gana. */ --lc-page-pad-x-wide: 64px; } /* ========================================================================= 3b · TABLET ------------------------------------------------------------------------- El escalón de 60px que hasta el 2026-09-02 vivía copiado a mano en diez styles.css, cada uno con una lista distinta de sus componentes hermanos (unas de 11 selectores, otras de 10, otras de 9 — habían divergido). Vive aquí porque el margen de página es una decisión de página, no de sección. ========================================================================= */ @media (max-width: 1199.98px) { :root { --lc-page-pad-x: 60px; --lc-page-pad-x-wide: 40px; } } /* ========================================================================= 4 · MOBILE ------------------------------------------------------------------------- Corte en 991.98px, el mismo `lg` de Bootstrap que ya usan los componentes. ========================================================================= */ @media (max-width: 991.98px) { :root { /* Retícula de 4 columnas. Los --lc-span-* se recalculan solos: 1c=72 · 2c=162 · 3c=252 · 4c=342 */ --lc-grid-cols: 4; --lc-grid-col: 72px; --lc-grid-gutter: 18px; --lc-grid-margin: 24px; --lc-grid-content: 342px; --lc-page-pad-x: var(--lc-grid-margin); --lc-page-pad-x-wide: var(--lc-grid-margin); /* en móvil los dos ritmos coinciden */ /* Escala de texto mobile. ⚠️ INCOMPLETA A PROPÓSITO: solo está el H2, que es el único nivel confirmado en Figma (Mobile/H2 = Fira Sans Medium 32/40, ls −1%; nodos 4:136 y 1:240 de Salud metabólica) y el canon que eligió Sergio el 2026-08-28. Los demás niveles NO se inventan: hoy cada componente hardcodea el suyo y los valores divergen. Ver deuda #6. */ --lc-size-h2: 32px; --lc-lh-h2: 40px; } } /* ========================================================================= 5 · ALIAS LEGADOS — familia especialidad (salud-metabolica, cardiologia, trasplantes). ⚠️ No usar en código nuevo. Ahora apuntan a las primitivas. ========================================================================= */ :root { --color-royal-blue: var(--lc-blue-royal); --color-jordy-blue: var(--lc-blue-jordy); --color-blue-50: var(--lc-blue-50); /* texto secundario sobre azul (diff cards) */ --color-blue-100: var(--lc-blue-100); /* subtítulos/eyebrows sobre azul */ --color-blue-200: var(--lc-blue-200); /* texto principal del diferenciador */ --color-blue-card-bg: var(--lc-blue-700); /* fondo cards del diff (Figma) */ --color-blue-500: var(--lc-blue-500); /* títulos de preguntas FAQ (Figma) */ --color-red-500: var(--lc-red-500); --color-black: var(--lc-ink); --color-white: var(--lc-white); --color-gray-1: var(--lc-ink-600); --color-gray-2: var(--lc-gray-200); --color-ink-700: var(--lc-ink-700); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-sm: var(--lc-radius-base); /* 6px, ahora en un solo sitio */ --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --font-display: var(--lc-font-heading); --font-body: var(--lc-font-body); --fs-caption: 12px; --fs-sm: 14px; --fs-body: 18px; --fs-h6: 20px; --fs-h5: 24px; --fs-h4: 32px; --fs-h3: 36px; --fs-h2: 40px; --fs-h1: 46px; --fw-regular: var(--lc-fw-regular); --fw-medium: var(--lc-fw-medium); --fw-semibold: var(--lc-fw-semibold); --fw-bold: var(--lc-fw-bold); --shadow-header: var(--lc-shadow-header); /* Sombra de tarjetas info (Por qué elegir) — tomada del Figma */ --shadow-info: 0px 15px 16.1px 0px rgba(135, 145, 162, 0.06), 0px 13px 20.5px -6px rgba(135, 145, 162, 0), 0px 45px 45px -19px rgba(135, 145, 162, 0.18); /* "sombra-timeline" de las cards del proceso paso a paso (Figma): highlight blanco superior-izq + drop gris inferior-der. */ --shadow-timeline: -6px -8px 16.5px 0px rgba(255, 255, 255, 0.68), 15px 26px 25.1px -12px rgba(146, 146, 146, 0.24); --background-page: var(--lc-bg-page); --brand-primary: var(--lc-brand-primary); --brand-accent: var(--lc-brand-secondary); --text-primary: var(--lc-text-primary); --text-secondary: var(--lc-ink-700); --text-muted: var(--lc-text-secondary); --text-on-primary: var(--lc-white); --surface: var(--lc-white); --surface-soft: var(--lc-blue-50); --border-subtle: var(--lc-gray-200); --border-default: var(--lc-border-default); --btn-primary-bg: var(--brand-accent); --btn-primary-text: var(--lc-white); --btn-radius: var(--radius-sm); --btn-pad-y: var(--space-4); --btn-pad-x: 30px; } /* ========================================================================= DEUDA VIVA — lo que este archivo todavía no resuelve ------------------------------------------------------------------------- #2 · Escala mobile incompleta. Solo el H2 está confirmado (ver arriba). Falta traer de Figma H1, H3–H6 y cuerpo mobile. #5 · `--page-pad-x` se rompe dentro de grillas. Reemplazo listo (`--lc-page-pad-x`), falta migrar el código que lo usa. #7 · Duplicado a propósito: --text-secondary (#474644) ≠ --lc-text-secondary (#616161). El de los radios se cerró el 2026-09-04: --radius-sm ya no declara 6px por su cuenta, apunta a --lc-radius-base — que es el nombre moderno del mismo valor. #8 · `--lc-band-250` (#EAEDF2) es indistinguible de `--lc-band-200` (#F0F2F5) y ambos son filetes del mismo componente. Fundirlos es una decisión de marca, no un refactor: se deja el píxel como está. #9 · Dos eyebrows conviven: Fira Sans 400 / 3.64px (16 componentes, es el canon y el que ahora declara el token) y Open Sans 700 / 1.625px (lc-agenda y lc-edu-sec-head, alineados el 2026-08-28). Bitácora completa en la memoria del proyecto: ds-hallazgos-deuda. ========================================================================= */