/* ============================================================ Copia de ../../assets/css/tokens.css. El contexto de build de Docker es backend/, asi que no puede alcanzar el sitio: el panel necesita su propia copia. Para resincronizar: npm run tokens ============================================================ */ :root { /* ---- Color: base ---- */ --ink: #0B0B0D; /* negro de marca */ --ink-2: #141418; /* superficie oscura elevada */ --ink-3: #1E1E24; /* borde sobre oscuro */ --paper: #FFFFFF; --paper-2: #F5F5F7; /* gris Apple, superficie clara */ --paper-3: #E8E8ED; --lienzo: #F5F5F7; /* fondo fijo de las fichas de fabricante */ /* El lienzo no cambia con el tema, asi que su texto tampoco puede hacerlo. */ --sobre-lienzo: #1D1D1F; --sobre-lienzo-2: #6E6E73; --acc-3-velo: rgba(10, 95, 214, .07); /* relleno suave del boton de contorno */ /* ---- Color: acento — titanio y azul eléctrico ---- El oro salió: leía a joyería, no a tecnología. El titanio es el mismo material del iPhone Duo y del chasis Pro; el azul es la luz encendida. */ --acc-1: #E7EEF8; /* titanio claro, brillo alto */ --acc-2: #4D9BFF; /* azul eléctrico: foco, bordes, acento sobre oscuro */ --acc-3: #0A5FD6; /* azul legible sobre superficie clara */ --acc-4: #0B2E63; /* azul profundo, cierre de degradado */ --acc-grad: linear-gradient(160deg, #F2F7FD 0%, #C2D2E6 44%, #8098B8 100%); --acc-text: linear-gradient(120deg, #FFFFFF 0%, #C8DCF5 38%, #8FC2FF 68%, #4D9BFF 100%); --glow-acc: rgba(77, 155, 255, .55); /* ---- Color: WhatsApp ---- Verde de marca, reservado al boton flotante. Es el unico punto del sitio donde un color ajeno a la paleta gana: ahi la gente lo busca. */ --wa-1: #2BD96C; --wa-2: #0E9F55; --wa-3: #075E54; /* teal profundo, cierre del degradado */ --wa-grad: linear-gradient(150deg, #3BE57A 0%, #1FB865 52%, #0B7D4A 100%); --sobre-wa: #FFFFFF; --glow-wa: rgba(43, 217, 108, .5); --wa-velo: rgba(43, 217, 108, .14); /* Silueta de WhatsApp para usar como mascara: hereda currentColor. */ --wa-glifo: url('data:image/svg+xml;utf8,'); /* ---- Color: texto ---- */ --t-hi-dark: #FFFFFF; /* sobre fondo oscuro */ --t-mid-dark: #A8A8B3; --t-lo-dark: #6E6E7A; --t-hi-light: #0B0B0D; /* sobre fondo claro */ --t-mid-light: #52525C; --t-lo-light: #86868B; /* ---- Acentos por línea de producto ---- */ --influencer: #7BE0D6; /* cian frío: cámaras 360, drones, audio */ --gamer: #C04CFF; /* violeta: gaming y VR */ --alert: #FF453A; --alert-velo: rgba(255, 69, 58, .12); /* ---- Tipografía: stack nativo, SF Pro en Apple ---- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --font-num: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* Escala fluida. clamp(min, preferido, max) */ --fs-mega: clamp(3.4rem, 11vw, 9.5rem); --fs-h1: clamp(2.6rem, 7vw, 5.6rem); --fs-h2: clamp(2rem, 4.6vw, 3.6rem); --fs-h3: clamp(1.35rem, 2.2vw, 1.9rem); --fs-lead: clamp(1.05rem, 1.7vw, 1.45rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.72rem; --tracking-tight: -0.035em; /* titulares grandes, estilo Apple */ --tracking-norm: -0.011em; --tracking-wide: 0.18em; /* eyebrows en mayúscula */ /* ---- Escala de espacio: grid de 4/8 pt. No uses valores sueltos ---- */ --e1: 0.25rem; /* 4 px */ --e2: 0.5rem; /* 8 px */ --e3: 0.75rem; /* 12 px */ --e4: 1rem; /* 16 px */ --e5: 1.25rem; /* 20 px */ --e6: 1.5rem; /* 24 px */ --e7: 1.75rem; /* 28 px */ --e8: 2rem; /* 32 px */ --e10: 2.5rem; /* 40 px */ --e12: 3rem; /* 48 px */ --e16: 4rem; /* 64 px */ /* Área mínima de toque. Apple HIG: 44 pt. */ --toque: 44px; /* ---- Roles invertidos: superficie contraria al tema actual ---- */ --inverso: #0B0B0D; /* fondo de chips activos y botones sólidos */ --sobre-inverso: #FFFFFF; /* texto sobre --inverso */ --sobre-acento: #061024; /* texto sobre el relleno de titanio */ --acento-fino: var(--acc-3); /* azul legible sobre superficie clara */ /* ---- Espacio ---- */ --gutter: clamp(1.25rem, 5vw, 2.5rem); --maxw: 1180px; --maxw-text: 68ch; --sec-y: clamp(5.5rem, 13vh, 11rem); /* respiración vertical */ /* ---- Radios y bordes ---- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; --hairline-dark: 1px solid rgba(255,255,255,.12); --hairline-light: 1px solid rgba(11,11,13,.12); /* ---- Motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: .22s; --dur: .5s; --dur-slow: .9s; /* ---- Texturas de marca ---- */ --patron-gris: url("../img/patron-nek-tile-gris.svg"); --patron-blanco: url("../img/patron-nek-tile-blanco.svg"); --patron-acento: url("../img/patron-nek-tile-acero.svg"); --patron-size: clamp(260px, 34vw, 520px); /* ---- Capas ---- */ --z-nav: 100; --z-menu: 200; } /* El patrón es textura, nunca contenido: 8–16 % de opacidad efectiva. Si al leer un titular se notan los iconos, está mal aplicado. */ /* ============================================================ Modo oscuro — tema propio, no una inversión. Las superficies "claras" pasan a ser superficies elevadas oscuras; las secciones que ya eran oscuras no cambian. ============================================================ */ @media (prefers-color-scheme: dark) { :root { --paper: #141418; /* superficie base del tema oscuro */ --paper-2: #1C1C21; --paper-3: #26262E; /* Blanco puro vibra en bloques largos: el cuerpo va con opacidad. */ --t-hi-light: rgba(255, 255, 255, .93); --t-mid-light: #A8A8B3; --t-lo-light: #85858F; --hairline-light: 1px solid rgba(255, 255, 255, .13); --inverso: #FFFFFF; --sobre-inverso: #0B0B0D; /* El azul oscuro no llega al contraste sobre superficie oscura. */ --acento-fino: var(--acc-2); } }