/* ============================================================ VÉLORIS — TOKENS DE MARCA Enmienda 5 — Véloris Editorial (branding 2026-08, sello lineal de 4 puntas + escala monocromática --s1..--s7) es, desde esta pasada, la identidad oficial y ÚNICA de toda la plataforma en :root — ya no un override aislado a body.page-home/body.page-veloris. La migración página a página (documentada en arquitectura/veloris-sistema-de-marca.md §9 y docs/auditoria-branding-2026-08.md) queda cerrada: cualquier página que cargue este archivo (todas) hereda el sistema monocromático sin necesitar una clase en . #08080c void obsidiana | escala de blancos --s1(#EDEDEB)..--s7 | sin dorado. Los nombres de variable (--void, --void-2, --ink, --gold, --gold-soft) se mantienen a través de este tercer pivote, por la misma razón que en los anteriores: cientos de reglas en todo el CSS ya referencian estas variables. --gold/--gold-soft ya no significan "dorado" — son pasos de énfasis de la escala de blancos, igual que ya documentaba el bloque body.page-home que este cambio sustituye. Paleta cálida de Enmienda 4 (`#faf6ef` base, `#a8823c` dorado) queda retirada de la interfaz activa — registro histórico completo en arquitectura/veloris-sistema-de-marca.md §8. Sistema de movimiento (arquitectura/veloris-direccion-creativa-landing.md §3.1): un único lenguaje de animación reutilizado en todo el sitio, en vez de que cada componente invente su propia duración/curva. La curva --ease-premium ya existía (era la del .reveal principal) — se generaliza en vez de inventar una nueva. ============================================================ */ :root{ --void:#08080c; --void-2:#0e0e14; --surface:rgba(237,237,235,0.04); --gold:rgba(237,237,235,0.70); --gold-soft:#EDEDEB; /* --indigo: residuo de nombre de la paleta violeta original (dos pivotes atrás) — no se renombra por la misma razón que --gold, ver comentario de arriba. */ --indigo:rgba(237,237,235,0.40); --ink:#EDEDEB; --muted:#7A7A80; --border:rgba(237,237,235,0.15); --card-gradient:linear-gradient(160deg, rgba(237,237,235,0.04) 0%, rgba(237,237,235,0.02) 100%); --island-bg:rgba(237,237,235,0.02); --island-border:rgba(237,237,235,0.08); /* Escala tipográfica (dirección creativa §3.3, Fase 3): ocho pasos, no diecisiete tamaños sueltos. La jerarquía se construye con tamaño, peso, espaciado y aire — no con más colores. Componentes nuevos: elegir un paso de aquí, nunca inventar un font-size intermedio. */ --fs-hero:clamp(56px, 7.2vw, 92px); /* titular de portada */ --fs-display:clamp(32px, 4vw, 50px); /* titulares de capítulo/sección */ --fs-title:24px; /* títulos de tarjeta grande */ --fs-sub:20px; /* subtítulos, nombres destacados */ --fs-body-lg:17px; /* prosa editorial (Fraunces) */ --fs-body:14px; /* cuerpo de interfaz */ --fs-caption:12px; /* metadatos, nav, pies */ --fs-kicker:11px; /* kickers/etiquetas en mayúsculas */ --ease-premium:cubic-bezier(.16,.8,.24,1); --dur-micro:0.2s; --dur-base:0.6s; --dur-slow:1.2s; /* Segunda firma de movimiento, deliberada: física de cartas físicas (repartir/voltear en la mesa de tarot) — un asentamiento con ligero rebote, distinto a --ease-premium a propósito. No es parte del "caos" de curvas sueltas: se usa solo aquí, consistentemente. */ --ease-card-flip:cubic-bezier(.22,.9,.3,1.02); /* Tercera firma, solo para el intercambio de la palabra rotativa del hero ("el universo ___"): salida rápida seca + entrada con rebote leve, para que el cambio de palabra se sienta vivo, no mecánico. */ --ease-word-leave:cubic-bezier(.4,0,1,1); --ease-word-enter:cubic-bezier(.34,1.56,.64,1); /* Paneles flotantes (header-estrella, menú overlay, spotlight de tarjetas): cristal oscuro con filo blanco tenue — nada cálido, nada mineral. */ --glass-bg:rgba(237,237,235,0.03); --glass-bg-strong:rgba(237,237,235,0.06); --glass-border:rgba(237,237,235,0.12); --glass-border-strong:rgba(237,237,235,0.24); --blur-panel:blur(22px) saturate(140%); --glow-gold-soft:0 0 18px rgba(237,237,235,0.10); --glow-gold-strong:0 0 30px rgba(237,237,235,0.14), 0 0 70px rgba(237,237,235,0.05); --ease-menu:cubic-bezier(.19,1,.22,1); /* --cool-accent: no es un segundo tono cálido ni frío/cian — es la misma escala de grises (--di), sin introducir un tercer color. */ --cool-accent:rgba(58,58,64,0.9); --cool-accent-dim:rgba(58,58,64,0.10); /* Estado de error — un solo token, un solo rojo en todo el sitio. */ --danger:#c1554f; /* Escala oficial de la marca (branding 2026-08) — expuesta con sus nombres propios para componentes nuevos (The Card, Explorar, Memoria) que quieren un paso de opacidad concreto en vez de un token con rol semántico prestado. */ --s1:#EDEDEB; --s2:rgba(237,237,235,0.70); --s3:rgba(237,237,235,0.40); --s4:rgba(237,237,235,0.15); --s5:rgba(237,237,235,0.08); --s6:rgba(237,237,235,0.04); --s7:rgba(237,237,235,0.02); --mu:#7A7A80; --di:#3A3A40; --gh:#1A1A20; --hover-tint:rgba(237,237,235,0.08); --hover-tint-soft:rgba(237,237,235,0.05); --hover-border:rgba(237,237,235,0.4); --icon-tint:rgba(237,237,235,0.1); --avatar-bg:rgba(237,237,235,0.12); --nav-icon-glow:rgba(237,237,235,0.35); --nav-icon-glow-hover:rgba(237,237,235,0.6); --nav-icon-glow-active:rgba(237,237,235,0.75); --nav-icon-glow-pulse-a:rgba(237,237,235,0.3); --nav-icon-glow-pulse-b:rgba(237,237,235,0.55); --divider-line:rgba(237,237,235,0.4); --divider-glow:rgba(237,237,235,0.6); --divider-soft:rgba(237,237,235,0.3); --footer-bg:var(--void-2); --btn-glow-shared:rgba(237,237,235,0.18); --btn-glow-enter-hover:rgba(237,237,235,0.15); --btn-glow-primary:rgba(237,237,235,0.35); --btn-glow-dark:rgba(237,237,235,0.3); --modal-border:rgba(237,237,235,0.22); --modal-glow:rgba(237,237,235,0.08); --seal-glow:rgba(237,237,235,0.32); --link-underline:rgba(237,237,235,0.35); --moon-glow:rgba(237,237,235,0.2); }