/* ============================================================ CORTICALIA · Fundamentos compartidos de marca y producto ------------------------------------------------------------ Esta es la única fuente para tipografía, color de marca, espaciado base, controles y movimiento. Las hojas de cada superficie solo definen sus fondos, tintas y composición. ============================================================ */ :root { /* Tipografía: una función inequívoca para cada familia */ --font-brand: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-editorial: 'Fraunces', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: var(--font-ui); /* Escala tipográfica funcional */ /* NO hay escalón por debajo de --text-xs, y es deliberado. La regla del titular: 12 px es el suelo de todo lo que informa, y solo el pie de figura baja —a --text-xs, 11,25—. Llegué a añadir un --text-2xs de 10,5 px para dar sitio a los 1.852 elementos que estaban a 10,8; la regla los sube, no les busca acomodo. Un token por debajo del suelo solo sirve para saltárselo. */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-lg: 1rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-kpi: 2.2rem; --leading-tight: 1.2; --leading-ui: 1.4; --leading-copy: 1.55; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Colores maestros de la marca */ --navy: #0D3A66; --navy-deep: #082A4C; --navy-soft: #164E86; --blue: #0F5A96; --teal: #0E8A86; /* Tres pasos con un trabajo cada uno. Antes eran cinco nombres para cuatro valores: --teal-txt y --teal-deep eran el MISMO hex, y --teal-btn estaba a 4 de --teal-strong (indistinguibles). Los duplicados quedan como alias para no romper llamadas, pero ya no pueden divergir. */ --teal-strong: #0D7D79; /* fondo pulsado / activo */ --teal-btn: var(--teal-strong); --teal-txt: #0B6D6A; /* letra y enlaces sobre claro */ --teal-deep: var(--teal-txt); --green: #45AE7F; --gold: #C09447; /* El tono que ESCRIBE en dorado. Derivado en OKLCH con la misma transformación que ya produjo --teal-txt a partir de --teal —tono conservado, croma × 0,839— bajando la claridad hasta cruzar 4,5:1 contra el papel: 0,693 → 0,565 de L, y 2,77:1 → 4,61:1. Hacía falta porque el sistema solo tenía tono de letra para el teal, así que quien necesitaba escribir en dorado usaba el relleno y no se leía. DECLARADO: queda a 58 del tono de letra de «Requiere apoyo» (#843F15), por debajo del 60 con que se separan los niveles ENTRE SÍ. Se acepta porque no son un par contiguo de una escala: este escribe una cifra descriptiva sobre tarjeta blanca y aquél solo aparece sobre su propio fondo naranja pálido. Preservar más croma lo acerca todavía más —a 49, 45 y 32 del tono de «En observación»—, así que 58 es lo más lejos que se puede estar. */ --gold-txt: #936F31; /* Escala espacial compartida · retícula de 4 px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Densidad funcional compartida */ /* `--target-min` NO es un peldaño de la escala de controles: es el SUELO legal. WCAG 2.2 añadió el criterio 2.5.8 «Target Size (Minimum)», de nivel AA, en 24 × 24 px CSS — y con una condición que se olvida: si dos objetivos están pegados, cada uno tiene que caber en un círculo de 24 px que no toque el del vecino. O sea que agrandar el objetivo sin separar los vecinos no basta. Se usa donde la escala de controles no aplica —un enlace de texto dentro de una cabecera, un punto de una gráfica— y agrandar a 36 px deformaría lo que hay alrededor. Todo lo que SEA un control va a la escala. */ --target-min: 24px; --control-sm: 36px; --control-md: 40px; --control-lg: 44px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; /* Radios base del producto */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* Movimiento */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.32, .72, 0, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* Aquí vivía --ease-spring, una curva con sobreimpulso (el resorte del cuestionario hecho transición para todos los botones). El titular retiró los rebotes el 07-10-2026 (fase 1 de la propuesta de interfaz) y el token se borró al quedarse sin uso: ninguna curva del sistema se pasa de su destino. */ --duration-fast: 140ms; --duration-ui: 220ms; /* Aparición al entrar, medida en el StaggeredFadeIn de apple.com/iphone-duo (titular, 15-10-2026): la opacidad en 900 ms, la subida en 700 ms y 150 ms entre pieza y pieza. Solo para la PRIMERA vez que un bloque entra en pantalla (sitio público y vitrina de la entrada); nunca en hover, foco ni estados, que siguen con --duration-fast y --duration-ui. */ --duration-aparece: 900ms; --duration-aparece-subida: 700ms; --duration-aparece-paso: 150ms; /* Profundidad funcional · TRES niveles, y no hay más (unificado el 07-10-2026, fase 1 de la propuesta de interfaz): --sh-1 superficie en reposo · --sh-2 realzada por interacción · --sh-3 capa superpuesta (emergente, cajón, desplegable, aviso flotante). Los nombres --shadow-sm/md/lg de styles.css son alias de estos tres. Una tarjeta anidada no proyecta sombra. */ --sh-1: 0 .5px 0 rgba(13, 58, 102, .04), 0 1px 2px rgba(13, 58, 102, .05); --sh-2: 0 .5px 0 rgba(13, 58, 102, .05), 0 2px 4px rgba(13, 58, 102, .05), 0 12px 24px -8px rgba(13, 58, 102, .10); /* El paso que faltaba: la pieza que FLOTA sobre otra capa (la carta del orientador solapada al héroe). Vivía como dos sombras artesanales en landing.css — y styles.css:403 (.filter-more-body) ya invocaba var(--sh-3) descartado en silencio por inexistente: definir el token ENCIENDE también esa elevación que la emergente de filtros siempre pidió. No es efecto lateral, es deuda que se cobra. */ --sh-3: 0 16px 56px rgba(13, 58, 102, .10), 0 3px 10px rgba(13, 58, 102, .05); }