/* src/css/variables.css */ :root { /* ── Paleta de color ─────────────────────── */ --color-dark: #072E33; --color-yellow: #F2A800; --color-yellow-hover: #D99200; /* yellow oscurecido para hover states */ --color-yellow-glow: rgba(242, 168, 0, 0.25); /* yellow 25% para box-shadow */ --color-yellow-border: rgba(242, 168, 0, 0.4); /* yellow 40% para badge-outline border */ --color-teal: #0D6E74; --color-light: #E8ECEC; --color-light-alt: #CDD5D5; /* superficies neutras alternativas (clima cards) */ --color-white: #FAFAF8; /* blanco cálido puro (brief) — era #F5F8F8 */ --color-bg-neutral: #F0F0EC; /* fondo levemente grisáceo para §2 Marcas */ --color-teal-10: color-mix(in srgb, var(--color-teal) 10%, transparent); /* acento mínimo en superficies claras */ /* Superficies elevadas */ --color-surface-elevated: #0A3A40; /* dropdown bg — teal dark ligeramente más claro */ --color-dark-95: rgba(7, 46, 51, 0.95); /* header bg con transparencia */ --color-dark-98: rgba(7, 46, 51, 0.98); /* header scrolled */ /* White alpha scale (var(--color-white) con opacidad) */ --color-white-82: rgba(250, 250, 248, 0.82); --color-white-70: rgba(250, 250, 248, 0.70); --color-white-50: rgba(250, 250, 248, 0.50); /* ── Texto ───────────────────────────────── */ --color-text-primary: #F5F8F8; /* sobre fondos oscuros */ --color-text-dark: #0F1010; /* sobre fondos claros — neutro, no teal (brief) */ --color-text-muted: #A8B8B9; /* secundario sobre oscuro */ --color-text-muted-dk: #5A7070; /* secundario sobre claro */ /* ── Light alpha scale (var(--color-light) con opacidad) ── */ /* Usadas para texto jerárquico sobre fondos oscuros */ --color-light-85: color-mix(in srgb, var(--color-light) 85%, transparent); --color-light-80: color-mix(in srgb, var(--color-light) 80%, transparent); --color-light-75: color-mix(in srgb, var(--color-light) 75%, transparent); --color-light-70: color-mix(in srgb, var(--color-light) 70%, transparent); --color-light-65: color-mix(in srgb, var(--color-light) 65%, transparent); --color-light-60: color-mix(in srgb, var(--color-light) 60%, transparent); --color-light-55: color-mix(in srgb, var(--color-light) 55%, transparent); --color-light-50: color-mix(in srgb, var(--color-light) 50%, transparent); --color-light-45: color-mix(in srgb, var(--color-light) 45%, transparent); --color-light-35: color-mix(in srgb, var(--color-light) 35%, transparent); --color-light-30: color-mix(in srgb, var(--color-light) 30%, transparent); --color-light-20: color-mix(in srgb, var(--color-light) 20%, transparent); /* Teal alpha */ --color-teal-22: color-mix(in srgb, var(--color-teal) 22%, transparent); /* ── Tokens rediseño Variante C ─────────── */ --color-dark-deep: #041F23; /* fondo CTA final */ --color-bg-warm: #F5F3EE; /* card Hissuma Home */ --color-ink-60: color-mix(in srgb, var(--color-text-dark) 60%, transparent); --color-ink-45: color-mix(in srgb, var(--color-text-dark) 45%, transparent); /* ── Radii adicionales ───────────────────── */ --radius-xl: 20px; /* cards grandes (borderRadius: 20) */ /* ── Bordes ──────────────────────────────── */ --color-border-dark: rgba(255, 255, 255, 0.10); --color-border-light: #D4DADA; /* ── Tipografía ──────────────────────────── */ --font-display: 'Outfit', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Escala tipográfica — fluid con clamp */ --text-xs: clamp(0.75rem, 1vw, 0.875rem); --text-sm: clamp(0.875rem, 1.2vw, 1rem); --text-base: clamp(1rem, 1.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1.8vw, 1.375rem); --text-xl: clamp(1.375rem, 2.2vw, 1.75rem); --text-2xl: clamp(1.75rem, 3vw, 2.25rem); --text-3xl: clamp(2.25rem, 4vw, 3rem); --text-4xl: clamp(3rem, 5.5vw, 4.5rem); /* Tokens de display — para titulares de sección y números grandes */ --text-hero: clamp(3rem, 6.5vw, 5.5rem); /* hero headline */ --text-display: clamp(2.25rem, 4vw, 3.5rem); /* h2 de secciones */ --text-stat: clamp(3.5rem, 6vw, 6rem); /* números de credenciales */ /* Tracking — letter-spacing semántico */ --tracking-display: 0.01em; /* headlines: levemente abierto (brief) */ --tracking-tight: -0.02em; /* números grandes: más comprimidos */ --tracking-label: 0.06em; /* etiquetas uppercase */ /* ── Espaciado ───────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ── Spacing fluid para secciones ──────────────────────── */ --section-pad-y: clamp(3.5rem, 7.5vw, 6rem); /* vertical: ~56px mobile → 96px desktop */ --section-pad-x: clamp(1.5rem, 5vw, 4.5rem); /* horizontal: ~24px mobile → 72px desktop */ --hero-pad-top: clamp(6rem, 12vw, 10rem); /* top del hero: ~96px mobile → 160px desktop */ /* ── Layout ──────────────────────────────── */ --container-max: 1320px; --container-prose: 720px; --section-padding: var(--space-24); --grid-gap: var(--space-6); /* ── Radii ───────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 9999px; /* ── Transiciones ────────────────────────── */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; /* ── Z-index layers ──────────────────────── */ --z-header: 100; --z-dropdown: 110; --z-overlay: 200; /* ── hs-* design tokens (usados en contacto.css y solar) ─── */ --hs-bg: var(--color-white); --hs-bg-alt: var(--color-bg-warm); --hs-ink: var(--color-text-dark); --hs-ink-60: rgba(15, 16, 16, 0.65); --hs-ink-45: rgba(15, 16, 16, 0.45); --hs-ink-25: rgba(15, 16, 16, 0.22); --hs-ink-12: rgba(15, 16, 16, 0.12); --hs-ink-06: rgba(15, 16, 16, 0.06); --hs-dark: var(--color-dark); --hs-dark-deep: var(--color-dark-deep); --hs-yellow: var(--color-yellow); --hs-teal: var(--color-teal); --hs-line-light: #D4D0C4; --hs-display: var(--font-display); --hs-body: var(--font-body); --hs-mono: var(--font-mono); }