/** * Premioplus — Design Tokens * Fuente única de verdad visual. Ningún otro archivo CSS debe usar * valores de color/espaciado/radio/sombra fuera de estas variables. */ :root { /* Paleta primaria — púrpura */ --purple-950: #170022; --purple-900: #1f0330; --purple-800: #2a0549; --purple-700: #3b0764; --purple-600: #4e1780; --purple-500: #6b2fa8; --purple-400: #8b5fbf; /* Paleta secundaria — oro (único color de acción) */ --gold-300: #ffe066; --gold-400: #ffd93d; --gold-500: #ffd700; --gold-600: #e6b800; --gold-700: #b38f00; /* Fondos */ --bg-base: #0a0710; --bg-elevated: #14101c; --bg-surface: #1c1526; --bg-surface-hover: #241b33; --bg-overlay: rgba(10, 7, 16, 0.82); --bg-glass: rgba(28, 21, 38, 0.55); /* Texto */ --text-primary: #ffffff; --text-secondary: #c9c2d6; --text-muted: #948ca6; --text-disabled: #514b5e; --text-gold: #ffd700; --text-on-gold: #170022; /* Estado / alertas */ --success: #22c55e; --warning: #f59e0b; --error: #ef4444; --info: #38bdf8; /* Colores de categoría (uso puntual, iconografía) */ --cat-coral: #ff4b2b; --cat-cyan: #00bfff; --cat-purple: #8a2be2; --cat-teal: #00c9a7; --cat-green: #32cd32; --cat-gold: var(--gold-500); /* Gradientes */ --grad-hero: linear-gradient(135deg, #170022 0%, #3b0764 55%, #0a0710 100%); --grad-gold-cta: linear-gradient(135deg, #ffe066 0%, #ffd700 55%, #e6b800 100%); --grad-card-overlay: linear-gradient(to top, rgba(10, 7, 16, 0.95) 0%, rgba(10, 7, 16, 0.35) 55%, transparent 100%); --grad-divider: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent); /* Fondo global "cielo" — ÚNICO background, en , para toda la landing. Nada de esto se corta entre secciones: las secciones no tienen background propio, todas dejan ver esta misma superficie. Radios en PORCENTAJE (no px): en un layout donde el documento puede medir 7000px o 12000px según cuánto contenido tenga, un radio fijo en píxeles calculado para una altura "promedio" deja huecos apagados en páginas más altas — literalmente lo que se veía. Con radios en % (que en un radial-gradient se resuelven contra el ancho/alto reales del elemento) la cobertura de cada glow escala automáticamente con la altura real del documento, así que 14 glows separados ~7% siempre se solapan, sin importar cuánto mida la página final. */ /* Glows al ~18% menos de alfa que la versión anterior — mismo hue, misma posición, mismo tamaño, mismo degradado base (#170022 etc. sin tocar): la identidad morada/dorada queda intacta, solo baja un escalón la cantidad de luz que esos glows suman por encima del negro profundo de base. Es la corrección de "demasiada luminosidad" pedida sin oscurecer el negro de fondo en sí (ese ya estaba en su punto). */ --grad-sky: radial-gradient(65% 17% at 15% 2%, rgba(139, 95, 191, 0.18), transparent 80%), radial-gradient(55% 14% at 88% 9%, rgba(255, 215, 0, 0.045), transparent 76%), radial-gradient(70% 18% at 8% 16%, rgba(107, 47, 168, 0.16), transparent 80%), radial-gradient(60% 16% at 90% 24%, rgba(139, 95, 191, 0.15), transparent 78%), radial-gradient(68% 18% at 10% 31%, rgba(139, 95, 191, 0.16), transparent 80%), radial-gradient(52% 14% at 86% 38%, rgba(255, 215, 0, 0.04), transparent 76%), radial-gradient(70% 18% at 9% 46%, rgba(107, 47, 168, 0.17), transparent 80%), radial-gradient(60% 16% at 92% 53%, rgba(139, 95, 191, 0.15), transparent 78%), radial-gradient(55% 14% at 14% 60%, rgba(255, 215, 0, 0.04), transparent 76%), radial-gradient(66% 17% at 88% 68%, rgba(139, 95, 191, 0.16), transparent 80%), radial-gradient(70% 18% at 9% 75%, rgba(107, 47, 168, 0.17), transparent 80%), radial-gradient(58% 15% at 90% 82%, rgba(139, 95, 191, 0.15), transparent 78%), radial-gradient(72% 19% at 18% 90%, rgba(107, 47, 168, 0.18), transparent 80%), radial-gradient(75% 20% at 25% 99%, rgba(139, 95, 191, 0.19), transparent 82%), linear-gradient(180deg, #170022 0%, #1a0a28 14%, #170c22 32%, #190d26 50%, #170c22 68%, #1a0a28 86%, #170022 100%); /* Sombras / elevación */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4); --elev-2: 0 4px 14px rgba(0, 0, 0, 0.5); --elev-3: 0 12px 32px rgba(0, 0, 0, 0.6); --elev-gold-glow: 0 0 0 1px rgba(255, 215, 0, 0.25), 0 8px 24px rgba(255, 215, 0, 0.18); --elev-purple-glow: 0 0 32px rgba(139, 95, 191, 0.22); /* Sombra ambiental y difusa (no una sombra "de caja" pegada al borde) — es la que hace que las tarjetas se sientan suspendidas sobre el --grad-sky en vez de apoyadas sobre un fondo plano. */ --elev-float: 0 28px 60px -16px rgba(0, 0, 0, 0.55), 0 6px 18px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Border radius */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px; /* Espaciado (base 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Grid / contenedor */ --container-max: 1280px; --container-pad: 24px; /* Tipografía */ --font-display: "Poppins", -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); --fs-h2: clamp(2rem, 1.2rem + 2.5vw, 3rem); --fs-h3: clamp(1.25rem, 1rem + 1vw, 1.5rem); --fs-eyebrow: 0.75rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-caption: 0.875rem; /* Movimiento */ --ease-out-premium: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-micro: 150ms; --dur-standard: 250ms; --dur-entrance: 640ms; --dur-hero: 600ms; }