/* ============================================================ TOKENS — Punto Clave Design System ============================================================ Sistema completo. Paleta extraída del monograma oficial. Tipografía variable para máximo control expresivo. ============================================================ */ :root { /* ════════════════════════════════════════════════════════ PALETA — Azules del monograma oficial ════════════════════════════════════════════════════════ */ --brand-50: #EEF2FB; --brand-100: #DCE3F7; --brand-200: #B8C6EE; --brand-300: #8AA0E0; --brand-400: #5870D4; --brand-500: #2D4ECC; /* azul logo medio */ --brand-600: #243FB0; --brand-700: #1E3A8A; /* azul logo profundo */ --brand-800: #182E70; --brand-900: #142555; --brand-gradient: linear-gradient(135deg, #2D4ECC 0%, #1E3A8A 60%, #142555 100%); --brand-gradient-soft: linear-gradient(135deg, #DCE3F7 0%, #B8C6EE 100%); --brand-gradient-radial: radial-gradient(circle at 30% 20%, #3B5BFB 0%, #1E3A8A 50%, #142555 100%); /* ════════════════════════════════════════════════════════ NEUTROS — con tinte azul ════════════════════════════════════════════════════════ */ --bg-pure: #FFFFFF; --bg-soft: #FBFBFD; --bg-cool: #F4F5F8; --bg-section: #EEF0F5; --bg-hover: #E4E7EE; --ink-50: #F8F9FB; --ink-100: #E4E7EE; --ink-200: #C7CBD5; --ink-300: #9CA3B0; --ink-400: #6B7280; --ink-500: #4B5263; --ink-600: #353A4A; --ink-700: #2D3142; --ink-800: #1A1D2C; --ink-900: #0E0F1A; /* ════════════════════════════════════════════════════════ ACENTOS funcionales ════════════════════════════════════════════════════════ */ --accent-electric: #3B5BFB; --accent-electric-light: #DBE3FE; --whatsapp: #25D366; --whatsapp-dark: #128C7E; --success: #16A34A; --warn: #D97706; --error: #DC2626; /* ════════════════════════════════════════════════════════ TIPOGRAFÍA — Bricolage Grotesque (variable) + Onest + JetBrains Mono ════════════════════════════════════════════════════════ */ --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --font-body: 'Onest', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Escala fluida — clamp(min, preferred, max) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.813rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.938rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.063rem); --fs-lg: clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.27rem + 0.55vw, 1.625rem); --fs-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); --fs-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem); --fs-4xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.5rem); --fs-5xl: clamp(3.5rem, 2.4rem + 5.5vw, 6.5rem); --fs-hero: clamp(3rem, 1.8rem + 6vw, 7.5rem); --fw-extralight: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1; --lh-snug: 1.08; --lh-snugger: 1.15; --lh-normal: 1.55; --lh-relaxed: 1.7; --ls-tightest: -0.05em; --ls-tighter: -0.035em; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-widest: 0.16em; --ls-mega: 0.24em; /* ════════════════════════════════════════════════════════ SPACING ════════════════════════════════════════════════════════ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --space-11: 12rem; --section-py: clamp(4.5rem, 8vw, 8rem); /* spacing vertical estándar */ /* ════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════ */ --container-narrow: 1280px; /* alias = base (consistencia) */ --container-base: 1280px; /* estándar único de TODA la página */ --container-wide: 1280px; /* alias = base */ --container-mega: 1440px; /* solo hero */ --reading-width: 760px; /* ancho ÓPTIMO de lectura para acordeones/párrafos */ --content-px: clamp(1.5rem, 5vw, 3rem); --header-h: 72px; --topbar-h: 36px; /* ════════════════════════════════════════════════════════ BORDERS & RADIUS ════════════════════════════════════════════════════════ */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; --border-hairline: 1px solid var(--ink-100); --border-thin: 1px solid var(--ink-200); --border-medium: 1.5px solid var(--ink-900); /* ════════════════════════════════════════════════════════ SHADOWS — frías, con tinte azul ════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(14, 15, 26, 0.04); --shadow-sm: 0 2px 8px rgba(14, 15, 26, 0.04), 0 1px 2px rgba(14, 15, 26, 0.03); --shadow-md: 0 8px 24px rgba(14, 15, 26, 0.06), 0 2px 6px rgba(14, 15, 26, 0.04); --shadow-lg: 0 20px 56px rgba(14, 15, 26, 0.10), 0 6px 16px rgba(14, 15, 26, 0.05); --shadow-xl: 0 32px 96px rgba(14, 15, 26, 0.14), 0 12px 32px rgba(14, 15, 26, 0.08); --shadow-brand: 0 12px 32px rgba(45, 78, 204, 0.28), 0 4px 12px rgba(45, 78, 204, 0.16); --shadow-brand-lg: 0 24px 64px rgba(45, 78, 204, 0.35), 0 8px 20px rgba(45, 78, 204, 0.22); /* ════════════════════════════════════════════════════════ MOTION — easing curves de calidad cinematográfica ════════════════════════════════════════════════════════ */ --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1); --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 520ms; --duration-slower: 900ms; --duration-cinema: 1400ms; /* ════════════════════════════════════════════════════════ Z-INDEX ════════════════════════════════════════════════════════ */ --z-base: 1; --z-overlay: 10; --z-sticky: 100; --z-header: 500; --z-modal: 1000; --z-toast: 2000; --z-cursor: 8500; --z-whatsapp: 9000; }