/* ============================================================ NIEFERGOLD & CÍA. — SISTEMA DE TOKENS Fuente única de verdad de color, tipografía, movimiento y layout. ------------------------------------------------------------ Ninguna otra hoja debe declarar un color literal. Si necesitas un tono que no está aquí, se agrega aquí primero. Se carga ANTES que styles.css en todas las páginas. El build (scripts/stamp-assets.mjs) le pone hash a la URL, así que la caché `immutable` de netlify.toml es segura. ============================================================ */ /* ── Tipografía: San Francisco con Inter de respaldo ────────── El sitio usa la tipografía del sistema de Apple (SF Pro Display / SF Pro Text vía -apple-system) en macOS e iOS, e Inter en el resto de las plataformas, que es la sans más cercana a San Francisco. Inter va SELF-HOSTED, no por Google Fonts. La CSP del sitio declara `font-src 'self'` y `style-src 'self'` (ver netlify.toml), así que un a fonts.googleapis.com sería bloqueado en producción: la página se quedaría sin la fuente de respaldo justo en los equipos que no tienen SF Pro. Los .woff2 viven en /assets/fonts/ y se sirven desde nuestro propio dominio, con el mismo resultado tipográfico y sin depender de un tercero. Inter es una fuente variable: este único archivo cubre 400, 500, 600 y 700 (y todo lo intermedio). `font-display:swap` evita el texto invisible mientras carga. Los nombres de archivo son estables a propósito. Si algún día reemplazas un .woff2, cámbiale también el nombre: la caché de /assets/* es immutable por un año y el navegador no volvería a pedirlo. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root{ /* ── Color ─────────────────────────────────────────────────── */ --onix: #0C0C0E; /* fondo principal / hogar del logo */ --grafito: #16161A; /* superficie elevada sobre ónix */ --grafito-2: #202027; /* bordes/hairlines sobre ónix */ --marfil: #F5F1E8; /* fondo claro cálido */ --marfil-2: #EDE7D8; /* fondo claro alternativo */ --oro: #C6A15B; /* acento principal — usar con moderación */ --champan: #E6D2A2; /* oro claro — degradés, cifras, itálicas */ --bronce: #8C6A2C; /* oro profundo — texto/acento SOLO sobre fondo claro */ --tinta: #1B1B1F; /* texto sobre marfil */ --piedra: #6E6E74; /* texto secundario sobre marfil */ --niebla: #DAD5C7; /* hairlines sobre marfil */ --humo: #9A9AA2; /* texto secundario sobre ónix */ --verde-ok: #4FA07A; /* estado: verificado/éxito, uso mínimo */ /* ── Tipografía ────────────────────────────────────────────── Una sola familia para todo el sitio: la de Apple, con Inter de respaldo. Se conservan los dos nombres de token porque el HTML y las hojas ya los usan, y porque distinguen la intención: los titulares piden SF Pro *Display* (ajustada al texto grande) y el cuerpo SF Pro *Text*. Fuera de Apple ambos caen en Inter. */ --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif; --font-texto: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif; /* Peso de los titulares. SF Pro y Inter son sans: el peso 300 que usaba el serif anterior las deja anémicas en tamaños grandes. 600 es el semibold con el que Apple compone sus titulares. */ --peso-titular: 600; /* ── Movimiento ────────────────────────────────────────────── */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* entradas / reveals */ --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* transiciones de estado */ --e-soft: cubic-bezier(0.22, 1, 0.36, 1); /* micro-interacciones hover */ --t-micro: 240ms; --t-base: 560ms; --t-lento: 900ms; /* ── Layout ────────────────────────────────────────────────── */ --radio: 18px; --radio-s: 12px; --max: 1180px; /* ══════════════════════════════════════════════════════════════ DERIVADOS — no son parte del kit, se calculan desde lo de arriba. Existen para que ninguna regla del sitio necesite escribir un literal de color. Si cambia un token base, esto cambia con él. ══════════════════════════════════════════════════════════════ */ /* Canales RGB, para construir transparencias sin repetir el hex. Uso: rgba(var(--oro-rgb), .12) */ --onix-rgb: 12, 12, 14; --grafito-rgb: 22, 22, 26; --marfil-rgb: 245, 241, 232; --oro-rgb: 198, 161, 91; --champan-rgb: 230, 210, 162; --tinta-rgb: 27, 27, 31; --verde-ok-rgb: 79, 160, 122; /* Hairlines y superficies translúcidas sobre ónix */ --linea: rgba(var(--marfil-rgb), .10); --linea-fuerte: rgba(var(--marfil-rgb), .18); --superficie: rgba(var(--marfil-rgb), .04); /* inputs, tarjetas sutiles */ --superficie-2: rgba(var(--marfil-rgb), .07); /* estado hover / foco */ /* Sombras: siempre negras sobre ónix, nunca de color */ --sombra: 0 24px 80px rgba(0, 0, 0, .45); --sombra-sm: 0 10px 30px rgba(0, 0, 0, .35); /* Radio grande para tarjetas de página completa. --radio y --radio-s cubren el resto; este es su hermano mayor. */ --radio-l: 26px; /* Blanco puro: solo para tarjetas sobre marfil, donde --marfil se confundiría con el fondo. Nunca como color de texto. */ --blanco: #FFFFFF; /* ── Estados semánticos ──────────────────────────────────────── EXTENSIÓN AL KIT. El kit define --verde-ok pero el asistente de herencia tiene un semáforo de diagnóstico de tres niveles (verde / amarillo / rojo) que ya existe y no puedo representar con un solo color. Estos dos tonos se eligieron para convivir con la paleta cálida sin confundirse con --oro. */ --ambar-aviso: #D9944A; /* revisar antes de usar el resultado */ --rojo-alerta: #C4635E; /* el caso necesita revisión profesional */ --ambar-aviso-rgb: 217, 148, 74; --rojo-alerta-rgb: 196, 99, 94; /* ── Marca de terceros ───────────────────────────────────────── Verde oficial de WhatsApp. No es parte de nuestra paleta y no debe alinearse con ella: el botón se reconoce por ese color. */ --wa: #1FAC54; --wa-hover: #189646; }