/* ========================================================================== AUTOMOCIÓN REMECA · tokens.css Sistema de diseño. Ningún componente escribe un color, una sombra, un espaciado o una duración en crudo. Si hace falta un valor nuevo, se añade aquí; no se incrusta. Derivación de la paleta ----------------------- El logotipo aporta dos colores medidos sobre el archivo original: azul #062A91 · rojo #DA0D01 El azul da los tres niveles de superficie profunda; el rojo se reserva en exclusiva a la acción. El cian no está en el logotipo: es el acento luminoso que necesita la geometría animada para leerse sobre fondo oscuro (un rojo sobre azul noche no llega a 3:1 y los trazos desaparecen). Regla de uso del color ---------------------- · cian → trazo, geometría, dato técnico, estado activo. NUNCA texto sobre blanco: #4CC6FF sobre #FFF da 2,26:1. · rojo → solo lo que se puede pulsar. Si decora, deja de leerse como acción. · azul → superficie y estructura. ========================================================================== */ :root{ /* ── Superficies oscuras ─────────────────────────────────────────────── La cabecera y el pie son oscuros en todo el sitio por una razón concreta: el texto del logotipo es un degradado claro y sobre blanco resulta ilegible. Ver DATOS.md. */ --c-ink-900:#050B18; /* pie y fondo más profundo */ --c-ink-800:#0A1122; /* fondo oscuro base */ --c-ink-700:#101B34; /* superficie oscura elevada */ --c-ink-600:#17264A; /* tarjeta sobre fondo oscuro */ --c-ink-500:#22345F; /* borde sobre fondo oscuro */ /* ── Azul de marca ─────────────────────────────────────────────────── */ --c-brand:#0A2E8C; /* azul del logotipo, ajustado */ --c-brand-600:#0B3AAE; --c-brand-400:#2C5BD1; --c-brand-200:#93AEF0; /* ── Cian: acento luminoso, geometría y dato ───────────────────────── */ --c-cyan:#4CC6FF; --c-cyan-400:#7FD8FF; --c-cyan-700:#0E86C8; /* variante utilizable sobre fondo claro */ --c-cyan-a12:rgba(76,198,255,.12); --c-cyan-a25:rgba(76,198,255,.25); --c-cyan-a45:rgba(76,198,255,.45); /* ── Rojo: exclusivamente acción ───────────────────────────────────── */ --c-red:#DA0D01; /* 5,2:1 con blanco → AA en texto normal */ --c-red-700:#B80E06; /* hover */ --c-red-300:#FF4433; /* rojo legible sobre azul noche (5,5:1) */ /* ── Superficies claras y texto ────────────────────────────────────── */ --c-bg:#FFFFFF; --c-bg-alt:#F4F7FC; --c-bg-alt2:#EAF0FA; --c-text:#16203A; /* 14,7:1 sobre blanco */ --c-text-2:#52607A; /* 6,3:1 sobre blanco */ --c-line:#DCE4F0; --c-line-strong:#C2CFE4; /* ── Texto sobre fondo oscuro ──────────────────────────────────────── */ --c-inv:#FFFFFF; --c-inv-2:#C3D2EE; /* 12,3:1 sobre --c-ink-800 */ --c-inv-3:#8FA3C7; /* 7,3:1 sobre --c-ink-800 */ --c-line-inv:rgba(255,255,255,.14); --c-line-inv-2:rgba(255,255,255,.28); /* ── Estados ───────────────────────────────────────────────────────── */ --c-ok:#0F7B4F; --c-err:#B3261E; --c-warn:#8A6100; /* ── Gradientes (máximo tres, según el Compendio) ──────────────────── */ --g-marca:linear-gradient(135deg,hsl(220 87% 29%) 0%,hsl(224 90% 18%) 55%,hsl(226 70% 9%) 100%); --g-seccion:linear-gradient(180deg,hsl(216 50% 98%) 0%,hsl(216 45% 94%) 100%); --g-accion:linear-gradient(135deg,hsl(2 99% 46%) 0%,hsl(6 92% 36%) 100%); /* ── Tipografía ────────────────────────────────────────────────────── */ --font-head:'Sora',ui-sans-serif,system-ui,sans-serif; --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif; --text-xs:.75rem; /* 12 px · etiquetas, marcas de agua */ --text-sm:.875rem; /* 14 px · pies, metadatos */ --text-base:1rem; /* 16 px · cuerpo */ --text-md:1.0625rem; /* 17 px · cuerpo de artículo */ --text-lg:clamp(1.09rem,1.02rem + .32vw,1.25rem); --text-xl:clamp(1.25rem,1.14rem + .5vw,1.5rem); --text-2xl:clamp(1.45rem,1.28rem + .78vw,1.9rem); --text-3xl:clamp(1.72rem,1.42rem + 1.35vw,2.5rem); --text-4xl:clamp(2rem,1.55rem + 2vw,3.1rem); --text-5xl:clamp(2.3rem,1.6rem + 3.1vw,3.9rem); --text-6xl:clamp(2.6rem,1.6rem + 4.4vw,4.8rem); --lh-tight:1.1; --lh-head:1.18; --lh-body:1.75; --lh-loose:1.85; --ls-head:-.018em; --ls-eyebrow:.16em; /* ── Espaciado ─────────────────────────────────────────────────────── */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:2.75rem; --sp-8:3.5rem; --sp-9:4.5rem; --sp-10:6rem; --sp-sec:clamp(3.5rem,2.2rem + 5.4vw,7rem); /* separación entre secciones */ --sp-gut:clamp(1.1rem,.6rem + 2.1vw,2.5rem); /* canalón de rejilla */ /* ── Retícula ──────────────────────────────────────────────────────── */ --container:1320px; --container-narrow:920px; /* medida de lectura cómoda */ --pad-x:clamp(1.1rem,.5rem + 2.6vw,2.5rem); /* ── Forma ─────────────────────────────────────────────────────────── */ --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px; --bracket:22px; /* longitud de las escuadras del marco */ /* ── Sombras ───────────────────────────────────────────────────────── */ --sh-sm:0 2px 8px rgba(10,17,34,.06); --sh-md:0 12px 28px rgba(10,17,34,.10); --sh-lg:0 24px 60px rgba(10,17,34,.16); --sh-inv:0 22px 55px rgba(3,8,20,.55); --sh-red:0 10px 26px rgba(218,13,1,.32); --sh-cyan:0 0 0 1px var(--c-cyan-a25),0 0 22px rgba(76,198,255,.28); /* ── Movimiento ────────────────────────────────────────────────────── */ --ease:cubic-bezier(.25,.6,.3,1); --ease-out:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.4,.64,1); --t-fast:.18s; --t:.28s; --t-slow:.55s; --tr:var(--t) var(--ease); /* Duraciones sincronizadas entre CSS y JS. Si se cambia una, hay que cambiar la constante equivalente en main.js o la barra de avance miente. */ --d-slide:6800ms; /* = DELAY del pase del encabezado */ --d-proceso:7200ms; /* = ESPERA del acordeón de proceso */ /* ── Alturas de la interfaz flotante ───────────────────────────────── */ /* Alto de la cabecera. Subido de 104/74 al agrandar el logotipo: con 62 px de logo la barra se quedaba sin aire. */ --h-header:118px; --h-header-scrolled:82px; --wa-size:62px; /* alto del botón lateral de WhatsApp */ --z-header:60; --z-menu:70; --z-flot:80; --z-cookies:90; } @media (max-width:900px){ :root{ --h-header:78px; --h-header-scrolled:70px; --wa-size:56px; } }