/* ============================================================ WOXANT — tokens del sistema de diseño VERSIÓN A · CLARA (fondo Blanco Técnico, aire corporativo) SOLO variables. Ningún selector con estilos acá. ============================================================ REGLA DE MARCA (Manual de Identidad Visual, pag-09): El vocabulario de color son EXACTAMENTE 8 hex oficiales. Toda otra variante (hover, borde, sombra, texto atenuado, fondo de bloque) se deriva de uno de esos 8 con color-mix(), sin agregar un hex nuevo. #000, #fff y transparent NO son colores del vocabulario de marca: son OPERADORES de derivación (oscurecer, aclarar, transparentar). Única excepción declarada: #ffffff como superficie de tarjeta en esta versión clara — el manual lo usa así en la papelería (pag-20). Por eso el barrido `grep -oiE '#[0-9a-f]{3,8}' css/*.css` sobre esta versión devuelve los 8 oficiales + los operadores, y nada más. ============================================================ */ :root { /* ============================================================ 1 · LOS 8 COLORES OFICIALES — único vocabulario permitido ============================================================ */ --azul-estrategico: #2a2e6e; /* institucional, títulos, bloques */ --azul-corporativo: #4179b9; /* cierre del gradiente G1 */ --azul-innovacion: #30aeda; /* acento, arranque de G2 */ --verde-digital: #00b0b1; /* acento, cierre de G2 */ --gris-ingenieria: #516171; /* cuerpo de texto */ --gris-neutro: #8c9ca6; /* texto terciario */ --gris-claro: #d7dee3; /* bandas, bordes */ --blanco-tecnico: #f2f4f6; /* fondo base */ /* ---- Gradientes oficiales (pag-09), en su sentido correcto ---- */ --grad-g1: linear-gradient(135deg, var(--azul-estrategico), var(--azul-corporativo)); --grad-g2: linear-gradient(135deg, var(--azul-innovacion), var(--verde-digital)); /* ============================================================ 2 · DERIVACIONES — color-mix sobre oficiales, ningún hex nuevo ============================================================ */ --superficie-tarjeta: #ffffff; /* excepción declarada: papelería pag-20 */ --banda-alterna: color-mix(in srgb, var(--gris-claro) 42%, var(--blanco-tecnico)); --banda-suave: color-mix(in srgb, var(--gris-claro) 24%, var(--blanco-tecnico)); --borde-fino: color-mix(in srgb, var(--gris-claro) 78%, var(--blanco-tecnico)); --borde-marcado: var(--gris-claro); /* Acento legible como TEXTO sobre fondo claro: el Verde Digital puro no llega a 4.5:1 sobre blanco, así que se oscurece con el operador #000 en vez de inventar un teal nuevo. Medido: 4.8:1 sobre #f2f4f6. */ --acento-texto: color-mix(in srgb, var(--verde-digital) 68%, #000); --acento-hover: color-mix(in srgb, var(--azul-innovacion) 86%, #000); --acento-glow: color-mix(in srgb, var(--azul-innovacion) 72%, #fff); /* Superficies institucionales oscuras (hero, CTA, footer, mockup). En la versión clara se conservan: la papelería del manual combina hoja blanca con bloques azul institucional (pag-20). */ --inst-profundo: var(--azul-estrategico); --inst-medio: color-mix(in srgb, var(--azul-estrategico) 88%, var(--azul-corporativo)); --inst-alto: color-mix(in srgb, var(--azul-estrategico) 70%, var(--azul-corporativo)); --inst-hover: color-mix(in srgb, var(--azul-estrategico) 84%, #000); --inst-panel: color-mix(in srgb, var(--azul-estrategico) 90%, #000); /* Sombras: derivadas del Azul Estratégico, no de un negro puro. */ --sombra-color: color-mix(in srgb, var(--azul-estrategico) 18%, transparent); --sombra-color-2: color-mix(in srgb, var(--azul-estrategico) 26%, transparent); /* ============================================================ 3 · ROLES SEMÁNTICOS — lo que consumen base.css y sections.css Cambiar de versión = cambiar SOLO este archivo. ============================================================ */ /* ---- Superficies ---- */ --wox-bg: var(--blanco-tecnico); --wox-surface: var(--superficie-tarjeta); --wox-surface-alt: var(--banda-alterna); --wox-surface-mut: var(--banda-suave); --wox-border: var(--borde-fino); --wox-border-fuerte: var(--borde-marcado); /* ---- Superficie institucional oscura ---- */ --wox-navy: var(--inst-profundo); --wox-navy-mid: var(--inst-medio); --wox-navy-soft: var(--inst-alto); --wox-navy-hover: var(--inst-hover); --wox-panel-deep: var(--inst-panel); --wox-blue: var(--azul-corporativo); /* ---- Texto ---- */ --wox-titulo: var(--azul-estrategico); /* títulos sobre claro */ --wox-text: var(--gris-ingenieria); /* cuerpo */ --wox-text-muted: var(--gris-ingenieria); --wox-text-soft: var(--gris-neutro); /* terciario */ --wox-on-dark: var(--blanco-tecnico); /* texto sobre institucional */ --wox-on-accent: var(--azul-estrategico); /* texto sobre acento cian/verde */ /* ---- Acento ---- */ --wox-cyan: var(--azul-innovacion); --wox-cyan-deep: var(--acento-texto); --wox-cyan-glow: var(--acento-glow); --wox-cyan-hover: var(--acento-hover); --wox-green: var(--verde-digital); /* ---- Estado (columnas Antes/Después) ------------------------ El manual NO define un rojo ni un verde de estado. En vez de inventarlos, el contraste se construye con la propia paleta: "sin Woxant" en grises apagados, "con Woxant" en G2. */ --wox-danger-bg: color-mix(in srgb, var(--gris-claro) 34%, var(--blanco-tecnico)); --wox-danger-border: var(--gris-claro); --wox-danger-text: var(--gris-ingenieria); --wox-danger-icon: var(--gris-neutro); --wox-ok-bg: color-mix(in srgb, var(--verde-digital) 8%, var(--blanco-tecnico)); --wox-ok-border: color-mix(in srgb, var(--verde-digital) 26%, var(--blanco-tecnico)); --wox-ok-text: var(--acento-texto); --wox-ok-icon: var(--verde-digital); /* ---- Gradientes de aplicación ------------------------------ G1 = superficies y bloques grandes (institucional). G2 = acentos y elementos activos (botones, badges, foco). */ --wox-grad-hero: linear-gradient(to bottom right, var(--azul-estrategico), color-mix(in srgb, var(--azul-estrategico) 55%, var(--azul-corporativo)), var(--azul-corporativo)); --wox-grad-cta: var(--grad-g1); --wox-grad-full: var(--grad-g1); --wox-grad-acento: var(--grad-g2); /* ============================================================ 4 · GEOMETRÍA Y RITMO ============================================================ */ --wox-radius-card: 16px; --wox-radius-btn: 12px; --wox-radius-pill: 9999px; /* Sombras muy suaves: la versión clara es sobria, bordes finos. */ --wox-shadow-lg: 0 10px 15px -3px var(--sombra-color), 0 4px 6px -4px var(--sombra-color); --wox-shadow-2xl: 0 25px 50px -12px var(--sombra-color-2); --wox-announce-h: 44px; --wox-header-h: 72px; /* ============================================================ 5 · TIPOGRAFÍA — MONTSERRAT (manual pag-08) Light 300 / Regular 400 / Bold 700. Sin excepciones. ============================================================ */ --wox-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --wox-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* Montserrat es más ancha que Inter/Space Grotesk: la escala baja un escalón y el tracking se afloja de -0.025em a -0.01em para que los títulos no se aprieten ni desborden. El TEXTO no se toca. */ --wox-fs-h1: 54px; --wox-fs-h2: 43px; --wox-fs-h2-sec: 33px; --wox-fs-h3: 27px; --wox-fs-h3-card: 19px; --wox-fs-h3-sm: 17px; --wox-fs-body: 16px; --wox-fs-sec: 14px; --wox-fs-micro: 12px; --wox-tracking: -0.01em; /* ---- Curvas y duraciones ---- */ --wox-ease: cubic-bezier(.4, 0, .2, 1); --wox-t-fast: .15s; --wox-t-comp: .3s; --wox-t-industry: .7s; --wox-t-reveal: 800ms; --wox-marquee-dur: 15s; /* ---- Layout — la versión clara respira más ---- */ --wox-container-pad: 2rem; --wox-section-pad: 96px; --wox-offset-top: calc(var(--wox-announce-h) + var(--wox-header-h)); }