/* ══════════════════════════════════════════════════════════════════ FLOWENT v2 — DESIGN TOKENS Un único origen de verdad. Nada de valores mágicos fuera de aquí. ══════════════════════════════════════════════════════════════════ */ :root { /* ─── COLOR: escala neutra ───────────────────────────────────── Azules desaturados en lugar de grises puros: el fondo "respira" con la marca sin que se lea como azul. */ --ink-950: #05090F; /* fondo absoluto, secciones de impacto */ --ink-900: #070D18; /* fondo base de página */ --ink-850: #0A121F; --ink-800: #0D1626; /* superficie elevada 1 */ --ink-700: #131F33; /* superficie elevada 2 */ --ink-600: #1B2B45; /* superficie elevada 3 / bordes fuertes */ --ink-500: #2A3E5E; --ink-400: #46607F; --ink-300: #6E88A6; /* texto terciario */ --ink-200: #9DB2C9; /* texto secundario */ --ink-100: #D3DEEA; /* texto primario atenuado */ --ink-050: #F2F6FA; /* casi blanco */ --white: #FFFFFF; /* ─── COLOR: marca ──────────────────────────────────────────── Se conserva el azul/cian del logo. El cian es el acento vivo y se usa con disciplina: nunca en bloques grandes. */ --brand-700: #1D4ED8; --brand-600: #2563EB; /* azul primario */ --brand-500: #3B82F6; --brand-400: #60A5FA; --brand-300: #93C5FD; --cyan-600: #06A6C4; --cyan-500: #06C4D6; /* cian de acento */ --cyan-400: #22D3EE; --cyan-300: #67E8F9; /* ─── COLOR: acento cálido ──────────────────────────────────── Cian sobre azul marino es frío sobre frío: armonioso y olvidable, y es además la paleta que delata una web generada. El azul se queda para la estructura y el logotipo; este ámbar marca únicamente lo que importa —cifras, estados activos, la palabra resaltada— y por ser cálido contra un fondo frío crea la tensión que hace que se recuerde. Usado con avaricia: si aparece en todas partes, deja de significar. */ --amber-600: #C9852A; --amber-500: #E8A33D; --amber-400: #F0B761; --amber-300: #F5CE94; --signal-ok: #10B981; --signal-warn: #F59E0B; --signal-err: #EF4444; /* ─── COLOR: roles semánticos ────────────────────────────────── */ --bg: var(--ink-900); --bg-deep: var(--ink-950); --surface-1: var(--ink-800); --surface-2: var(--ink-700); --surface-3: var(--ink-600); --text-1: var(--white); --text-2: var(--ink-200); --text-3: var(--ink-300); --text-4: var(--ink-400); --line-1: rgba(255, 255, 255, 0.06); /* separador apenas visible */ --line-2: rgba(255, 255, 255, 0.11); /* borde de componente */ --line-3: rgba(255, 255, 255, 0.18); /* borde en hover */ --accent: var(--amber-500); --accent-soft: rgba(232, 163, 61, 0.12); --accent-line: rgba(232, 163, 61, 0.34); /* ─── GRADIENTES ─────────────────────────────────────────────── */ --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--cyan-500) 100%); /* --grad-text queda retirado a propósito: el texto en degradado aparecía en seis titulares y es uno de los marcadores más reconocibles del aspecto generado. La jerarquía la hacen ahora el peso y el ámbar. */ --grad-line: linear-gradient(90deg, transparent, var(--brand-500), var(--cyan-400), transparent); --grad-fade-b: linear-gradient(to bottom, transparent, var(--bg)); /* ─── GLOW ──────────────────────────────────────────────────── Sutil siempre. La regla: si se nota el glow antes que la forma, está mal calibrado. */ --glow-brand: 0 0 60px -12px rgba(37, 99, 235, 0.55); --glow-cyan: 0 0 60px -12px rgba(6, 196, 214, 0.45); --glow-amber: 0 0 60px -14px rgba(232, 163, 61, 0.45); --glow-soft: 0 0 120px -30px rgba(37, 99, 235, 0.35); /* ─── SOMBRAS ───────────────────────────────────────────────── Escala física coherente: cada nivel dobla la elevación. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-4: 0 28px 64px rgba(0, 0, 0, 0.50); --shadow-5: 0 48px 120px rgba(0, 0, 0, 0.60); /* ─── TIPOGRAFÍA ────────────────────────────────────────────── Escala modular con razón ≈1.28, fluida entre 380px y 1600px. El salto entre --fs-body y --fs-display es deliberadamente brutal: es de donde sale la jerarquía. */ /* Bricolage Grotesque para titulares. Es sans, así que convive con el logotipo —que es geométrico y redondeado— pero tiene rasgos deliberadamente irregulares y ejes variables de anchura y tamaño óptico. Inter, que estaba antes, es la tipografía por defecto de medio internet: no resta, pero tampoco dice que alguien eligiera nada. */ --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --font-sans: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; --fs-micro: clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem); /* 10 → 11 */ --fs-tiny: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); /* 11 → 12 */ --fs-small: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); /* 13 → 14 */ --fs-body: clamp(0.9375rem, 0.90rem + 0.16vw, 1.0625rem); /* 15 → 17 */ --fs-lead: clamp(1.0625rem, 0.98rem + 0.36vw, 1.375rem); /* 17 → 22 */ --fs-h4: clamp(1.125rem, 1.05rem + 0.32vw, 1.375rem); /* 18 → 22 */ --fs-h3: clamp(1.375rem, 1.20rem + 0.75vw, 2rem); /* 22 → 32 */ --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3.5rem); /* 30 → 56 */ --fs-h1: clamp(2.5rem, 1.40rem + 4.6vw, 5.5rem); /* 40 → 88 */ --fs-display: clamp(3rem, 0.90rem + 8.8vw, 9rem); /* 48 → 144 */ --fs-mega: clamp(4rem, -1.5rem + 23vw, 17rem); /* 64 → 272 */ --lh-tight: 0.94; --lh-snug: 1.10; --lh-heading: 1.16; --lh-body: 1.65; --lh-relaxed: 1.78; --ls-mega: -0.045em; --ls-display: -0.038em; --ls-h1: -0.032em; --ls-h2: -0.026em; --ls-h3: -0.018em; --ls-body: -0.006em; --ls-label: 0.14em; /* mayúsculas espaciadas */ /* ─── ESPACIADO ─────────────────────────────────────────────── Base 4px. Los pasos grandes son fluidos. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-section: clamp(5rem, 3rem + 9vw, 11rem); /* padding vertical de sección */ --sp-block: clamp(2.5rem, 1.6rem + 4vw, 5rem); /* separación entre bloques */ --sp-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); /* margen lateral */ /* ─── LAYOUT ────────────────────────────────────────────────── Grid de 12 columnas disponible como variable para que las secciones puedan alinearse entre sí sin recalcular nada. */ --w-max: 1440px; --w-content: 1180px; --w-text: 62ch; /* medida óptima de lectura */ --w-narrow: 740px; --col: calc((min(100vw - var(--sp-gutter) * 2, var(--w-content)) - var(--sp-6) * 11) / 12); --nav-h: 72px; /* ─── RADIOS ────────────────────────────────────────────────── Radio real proporcional al tamaño del componente: un botón de 14px de radio junto a una card de 14px se ve descompensado. */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-full: 999px; /* ─── MOVIMIENTO ────────────────────────────────────────────── Curvas con nombre. `--ease-out-expo` para entradas (arranca rápido, asienta suave) y `--ease-spring` para interacciones directas donde se busca respuesta física. */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 90ms; --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 620ms; --dur-slower: 1000ms; /* ─── PROFUNDIDAD (z-index) ─────────────────────────────────── Escala explícita para no volver a escribir z-index: 9999. */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-drawer: 600; --z-cursor: 900; --z-overlay: 1000; } /* ─── Propiedades animables ──────────────────────────────────── Registrar los customs que se animan permite interpolarlos de verdad (si no, el navegador los trata como cadenas y saltan). */ @property --spin { syntax: ''; initial-value: 0deg; inherits: false; } @property --sweep { syntax: ''; initial-value: 0%; inherits: false; }