/* ============================================================ VÉLITE — TOKENS DE MARCA Ruta · carbono · alto rendimiento. Lujo deportivo tipo F1. Fuente de verdad para color, tipografía, escala y motivos. ============================================================ */ :root { /* --- Núcleo: oscuridad de pit-lane --- */ --bg: #0a0a0b; /* casi negro — fondo base */ --surface: #141417; /* tarjetas / paneles */ --surface-2: #1c1c20; /* superficie elevada / chips */ --line: #2a2a30; /* divisores / bordes */ /* --- Texto --- */ --text: #f5f5f7; /* texto principal */ --muted: #8a8a92; /* texto secundario / specs */ /* --- Acentos --- */ --accent: #e10600; /* rojo carreras — acción, alma de la marca */ --accent-2: #c9ccd2; /* cromo / plata — detalles técnicos */ --accent-deep:#9c0400; /* rojo profundo para sombras/gradientes */ /* --- Gradientes de marca --- */ --grad-accent: linear-gradient(135deg, #ff1f12 0%, var(--accent) 45%, var(--accent-deep) 100%); --grad-hero: linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.72) 55%, var(--bg) 100%); --grad-dark: linear-gradient(135deg, #0c0c0e 0%, #16161a 100%); --grad-chrome: linear-gradient(180deg, #f5f5f7 0%, #9a9da3 100%); /* --- Tipografía (Google Fonts) --- Display: Saira Condensed (700/800) — titulares en MAYÚSCULAS, números, specs. Cuerpo: Inter (400/500/600). */ --font-display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* --- Escala tipográfica (clamp = responsive sin breakpoints) --- */ --fs-mega: clamp(3.4rem, 13vw, 11rem); /* hero monumental */ --fs-hero: clamp(2.6rem, 7vw, 5.5rem); --fs-h1: clamp(2rem, 5vw, 3.6rem); --fs-h2: clamp(1.7rem, 3.6vw, 2.8rem); --fs-h3: clamp(1.2rem, 2vw, 1.55rem); --fs-body: clamp(1rem, 1.05vw, 1.075rem); --fs-small: 0.8rem; --fs-stat: clamp(2.8rem, 8vw, 6rem); /* --- Radios --- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; /* --- Sombras / glows --- */ --shadow-sm: 0 2px 10px rgba(0,0,0,.4); --shadow-md: 0 16px 40px rgba(0,0,0,.5); --shadow-lg: 0 30px 80px rgba(0,0,0,.6); --glow-red: 0 0 0 1px rgba(225,6,0,.4), 0 12px 40px rgba(225,6,0,.35); /* --- Movimiento --- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.55,.06,.68,.19); /* --- Motivos: cortes diagonales reutilizables (clip-path) --- */ --cut-top: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); --cut-bottom: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); --cut-both: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); /* --- Layout --- */ --header-h: 76px; --maxw: 1240px; } /* ---------- Botones base de marca ---------- */ .btn { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.7rem; border: 0; cursor: pointer; border-radius: var(--r-sm); line-height: 1; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--grad-accent); color: #fff; box-shadow: 0 8px 24px rgba(225,6,0,.3); } .btn--primary:hover { box-shadow: var(--glow-red); } .btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); } .btn--ghost:hover { border-color: var(--text); background: rgba(255,255,255,.04); } .btn--chrome { background: var(--grad-chrome); color: #0a0a0b; } .btn--chrome:hover { box-shadow: var(--shadow-md); } .btn--lg { padding: 1.05rem 2.1rem; font-size: 1.15rem; } .btn--sm { padding: .6rem 1.1rem; font-size: .92rem; } /* NOTA — Fuentes: cargar en el : */