/* ============================================================ CUMBRE — DESIGN TOKENS (DEMO XploraBike) Marca ficticia de MTB / gravel / aventura. Personalidad: ruda, cinética, outdoor, topográfica, neón-sobre-oscuro. Voz: épica, retadora, de montaña. "Donde acaba el asfalto." Fuente de verdad para color, tipografía, escala, radios y movimiento. ============================================================ */ :root { /* --- Base oscura (verde-carbón) --- */ --bg: #11140f; /* fondo base, verde-carbón muy oscuro */ --surface: #1a1e15; /* tarjetas / paneles */ --surface-2: #232818; /* superficies elevadas / chips */ --line: #2f3626; /* bordes / divisores */ /* --- Texto --- */ --text: #f1f3ec; /* texto principal */ --muted: #9aa18c; /* texto secundario */ --stone: #7c8466; /* gris-piedra, etiquetas técnicas */ /* --- Acentos neón --- */ --accent: #c8ff2e; /* verde lima neón — acción / energía */ --accent-2: #e8531f; /* naranja seguridad — alertas / dificultad */ --accent-ink:#11140f; /* tinta sobre el neón (alto contraste) */ /* --- Mezclas y respaldos para fondos (siempre detrás de imagen) --- */ --grad-hero: linear-gradient(160deg, #0c0f0a 0%, #161b10 45%, #0a0d07 100%); --grad-neon: linear-gradient(120deg, var(--accent) 0%, #9be000 60%, #6fd400 100%); --grad-fire: linear-gradient(120deg, var(--accent-2) 0%, #ff7a3d 100%); --grad-surface:linear-gradient(180deg, #1d2217 0%, #14180f 100%); --glow-neon: 0 0 0 1px rgba(200,255,46,.35), 0 0 28px rgba(200,255,46,.28); /* --- Tipografía (Google Fonts) --- Display: Anton (titulares masivos en mayúsculas) Cuerpo + acentos técnicos: Space Grotesk */ --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; /* --- Escala tipográfica (clamp = fluida sin breakpoints) --- */ --fs-mega: clamp(3rem, 13vw, 10rem); /* hero gigante */ --fs-h1: clamp(2.4rem, 7vw, 5rem); --fs-h2: clamp(1.9rem, 4.4vw, 3.4rem); --fs-h3: clamp(1.25rem, 2.2vw, 1.7rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem); --fs-body: clamp(1rem, 1.05vw, 1.075rem); --fs-small: 0.8125rem; --fs-mono: 0.78rem; /* etiquetas técnicas */ /* --- Radios --- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; /* --- Sombras (sobre fondo oscuro, profundas) --- */ --shadow-sm: 0 2px 10px rgba(0,0,0,.45); --shadow-md: 0 16px 40px rgba(0,0,0,.5); --shadow-lg: 0 30px 70px rgba(0,0,0,.6); /* --- Espaciado de sección --- */ --pad-section: clamp(4rem, 9vw, 8rem); --container: 1240px; /* --- Movimiento --- */ --ease: cubic-bezier(.2,.7,.25,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .2s; --t-mid: .45s; } /* NOTA — Fuentes: cargar en el del HTML: */ /* ====== Botones base de marca (neón + ghost neón + fuego) ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1; padding: 1rem 1.6rem; border: 2px solid transparent; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--neon { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow-neon); } .btn--neon:hover { box-shadow: 0 0 0 1px rgba(200,255,46,.5), 0 10px 34px rgba(200,255,46,.45); } .btn--ghost { background: transparent; color: var(--text); border-color: var(--accent); } .btn--ghost:hover { background: rgba(200,255,46,.1); color: var(--accent); } .btn--fire { background: var(--accent-2); color: #fff; } .btn--fire:hover { box-shadow: 0 10px 30px rgba(232,83,31,.5); } .btn--lg { padding: 1.15rem 2rem; font-size: 1rem; } .btn--block { width: 100%; }