/* ============================================================ AVANTY — Sistema de diseño Variables globales (tokens) — Fase 1, Archivo 1 (corregido) Única fuente de verdad para colores, tipografía, espaciado, sombras, capas (z-index) y tiempos de animación. Ningún otro archivo CSS debe usar valores "sueltos" (hex, px) para estas categorías: siempre a través de estas variables. ============================================================ */ :root { /* ---------------------------------------------------------- 1. PALETA CRUDA — nombres tal como aparecen en la sección 5 del documento maestro. No usar directamente en componentes: usar la capa semántica de más abajo. ---------------------------------------------------------- */ --azul-marino-profundo: #06172A; --azul-corporativo: #123B63; --azul-brillante: #3A9ED8; --azul-celeste: #79D8F7; --dorado: #D3A347; --dorado-claro: #F0C86A; --blanco: #F5F7FA; --gris-claro: #E8EDF3; --gris-secundario: #9BA8B7; --fondo-oscuro-alterno: #091F36; /* Dos colores funcionales que el documento no especifica pero que hacen falta para mensajes de éxito/error (sección 9). Elegidos para no chocar con el azul/dorado de marca. Si prefieres otro tono, se cambia solo aquí. */ --rojo-error: #D64545; --verde-exito: #2F9E6E; /* Gris azulado más oscuro que --gris-secundario, agregado en la Fase 2 para corregir un problema real de contraste: sobre fondo claro, --gris-secundario (#9BA8B7) da apenas 2.25:1, por debajo del mínimo de 4.5:1 que pide la sección 21 para texto normal. Sobre fondo oscuro sí funciona bien (7.46:1) y se queda como estaba ahí. Este nuevo tono da 6.40:1 sobre blanco y 5.84:1 sobre --gris-claro — pasa en los dos fondos donde se usa. */ --gris-secundario-oscuro: #4A5C70; /* ---------------------------------------------------------- 2. CAPA SEMÁNTICA — lo que se usa en el resto del proyecto. Aquí vive la decisión de fondo oscuro en hero/CTA y fondo claro en contenido largo. ---------------------------------------------------------- */ --color-fondo-oscuro: var(--azul-marino-profundo); --color-fondo-oscuro-alterno: var(--fondo-oscuro-alterno); --color-fondo-claro: var(--blanco); --color-fondo-claro-secundario: var(--gris-claro); --color-texto-sobre-oscuro: var(--blanco); --color-texto-sobre-oscuro-secundario: var(--gris-secundario); --color-texto-sobre-claro: var(--azul-marino-profundo); --color-texto-sobre-claro-secundario: var(--gris-secundario-oscuro); --color-marca: var(--azul-corporativo); --color-interactivo: var(--azul-brillante); --color-interactivo-suave: var(--azul-celeste); --color-acento: var(--dorado); --color-acento-suave: var(--dorado-claro); --color-error: var(--rojo-error); --color-exito: var(--verde-exito); --color-borde-sobre-claro: var(--gris-claro); --color-borde-sobre-oscuro: rgba(245, 247, 250, 0.12); --color-enfoque: var(--azul-celeste); /* foco de teclado visible — sección 21 */ /* ---------------------------------------------------------- 3. TIPOGRAFÍA ---------------------------------------------------------- */ --font-family-heading: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-family-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 3.75rem; /* 60px, para el titular del hero */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; /* etiquetas en mayúscula, tipo el lema del logo */ /* ---------------------------------------------------------- 4. ESPACIADO — escala en base 4px ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* ---------------------------------------------------------- 5. RADIOS DE BORDE — moderados, para no perder el carácter geométrico del logo con esquinas demasiado redondeadas. ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; /* ---------------------------------------------------------- 6. SOMBRAS Y BRILLOS Sombras normales para fondo claro; sobre fondo oscuro una sombra negra no se nota, así que se usan brillos de color para dar profundidad (sección 8: "efectos luminosos azules", "destellos dorados discretos"). ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(6, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(6, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(6, 23, 42, 0.12); --glow-azul: 0 0 48px rgba(58, 158, 216, 0.25); --glow-dorado: 0 0 32px rgba(211, 163, 71, 0.18); /* ---------------------------------------------------------- 7. GLASSMORPHISM MODERADO (sección 8) ---------------------------------------------------------- */ --glass-fondo: rgba(18, 59, 99, 0.35); --glass-borde: rgba(245, 247, 250, 0.10); --glass-blur: 16px; /* ---------------------------------------------------------- 8. TRANSICIONES — se apagan solas con prefers-reduced-motion más abajo en este mismo archivo. ---------------------------------------------------------- */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --easing-standard: cubic-bezier(0.16, 1, 0.3, 1); /* ---------------------------------------------------------- 9. CAPAS (z-index) ---------------------------------------------------------- */ --z-header: 100; --z-dropdown: 200; --z-modal: 300; --z-whatsapp-float: 400; --z-back-to-top: 410; --z-toast: 500; /* ---------------------------------------------------------- 10. CONTENEDOR / LAYOUT BASE ---------------------------------------------------------- */ --container-max: 1280px; --container-padding: var(--space-5); } /* ============================================================ Movimiento reducido (secciones 8 y 21): con esto activado, las transiciones casi no toman tiempo. Como todo el proyecto anima a través de estas variables, esto lo resuelve desde un solo lugar sin tocar cada componente por separado. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-base: 0.01ms; --transition-slow: 0.01ms; } } /* ============================================================ Referencia de quiebres (breakpoints) para responsive.css. CSS no permite usar una variable dentro de @media, así que estos valores quedan aquí solo como documentación — los valores reales se escriben literal dentro de cada @media en responsive.css y deben coincidir con esta lista: móvil: hasta 599px tablet: 600px – 959px escritorio: 960px en adelante escritorio grande: 1280px en adelante ============================================================ */