/* ========================================================== VARIABLES.CSS — Tokens del Sistema de Diseño ---------------------------------------------------------- Tokens de diseño centralizados para toda la landing page. Incluye: colores, tipografía (clamp), espaciado, sombras, bordes y transiciones. Modo claro = por defecto, oscuro vía el atributo [data-theme="dark"] en . ========================================================== */ /* ---------- Tema Claro (Por Defecto) ---------- */ :root { /* --- Paleta del usuario (variables base) --- */ --rojo-principal: #E10600; --rojo-oscuro: #A00000; --rojo-medio: #C40000; --amarillo-brillante: #FFD200; --amarillo-oscuro: #F4B400; --naranja: #F57C00; --blanco: #FFFFFF; --gris-claro: #D9D9D9; --negro: #000000; --marron-claro: #C68642; --marron-medio: #8D5524; --marron-oscuro: #5C3317; /* --- Sistema semántico de color (modo claro) --- */ --clr-primary: var(--rojo-principal); --clr-primary-dark: var(--rojo-oscuro); --clr-primary-light: var(--rojo-medio); --clr-secondary: var(--marron-medio); --clr-secondary-dark:var(--marron-oscuro); --clr-accent: var(--amarillo-brillante); --clr-accent-dark: var(--amarillo-oscuro); --clr-bg: #FFF8F3; --clr-bg-alt: #FCEEE3; --clr-surface: var(--blanco); --clr-surface-hover: #FFF4EC; --clr-text: #2A170A; --clr-text-muted: #6B4E36; --clr-text-inverse: #ffffff; --clr-border: #E8D2C0; --clr-overlay: rgba(0, 0, 0, 0.9); --clr-primary-rgb: 225, 6, 0; --clr-secondary-rgb: 141, 85, 36; --clr-accent-rgb: 255, 210, 0; /* Color de marca de WhatsApp */ --clr-whatsapp: #16b23b; --clr-whatsapp-dark: #065c2e; /* --- Escala tipográfica (clamp: móvil → escritorio) --- */ --ff-heading: 'Poppins', sans-serif; --ff-body: 'Open Sans', sans-serif; --fs-hero: clamp(2.25rem, 5vw + 1rem, 4.5rem); --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 3rem); --fs-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem); --fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); --fs-small: clamp(0.8rem, 0.3vw + 0.75rem, 0.9rem); --fs-btn: clamp(0.9rem, 0.4vw + 0.8rem, 1.05rem); --fs-nav: clamp(0.9rem, 0.3vw + 0.8rem, 1rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-heading: 1.2; --lh-body: 1.6; /* --- Escala de espaciado (fluida) --- */ --space-xs: clamp(0.25rem, 0.5vw, 0.5rem); --space-sm: clamp(0.5rem, 1vw, 0.75rem); --space-md: clamp(0.75rem, 1.5vw, 1.25rem); --space-lg: clamp(1rem, 2vw, 2rem); --space-xl: clamp(1.5rem, 3vw, 3rem); --space-2xl: clamp(2rem, 4vw, 4rem); --space-3xl: clamp(3rem, 6vw, 6rem); /* --- Maquetación --- */ --max-width: 75rem; /* 1200px */ --gutter: clamp(1rem, 3vw, 2rem); /* --- Radios de borde --- */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 50rem; --radius-circle: 50%; /* --- Sombras --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15); /* --- Transiciones --- */ --transition-fast: 0.15s ease; --transition-base: 0.3s ease; --transition-slow: 0.5s ease; --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- Tema Oscuro ---------- */ [data-theme="dark"] { --clr-primary: #D9D9D9; --clr-primary-dark: #BDBDBD; --clr-primary-light: #FFFFFF; --clr-secondary: #9EA4AD; --clr-secondary-dark:#7F8793; --clr-accent: #C68642; --clr-accent-dark: #D19A5D; --clr-bg: #0C0D10; --clr-bg-alt: #13161B; --clr-surface: #1A1E25; --clr-surface-hover: #232934; --clr-text: #F1F3F5; --clr-text-muted: #B1B7C0; --clr-text-inverse: #0C0D10; --clr-border: #313843; --clr-overlay: rgba(0, 0, 0, 0.72); --clr-primary-rgb: 217, 217, 217; --clr-secondary-rgb: 158, 164, 173; --clr-accent-rgb: 198, 134, 66; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.45); }