/* ============================================================ 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; --bronce-rgb: 140, 106, 44; --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; } /* ── Medidas del teléfono ──────────────────────────────────────── DOS COSAS QUE EN ESCRITORIO NO EXISTEN Y EN UN TELÉFONO SE NOTAN TODOS LOS DÍAS. 1. `--alto-ventana`. En un móvil, `100vh` NO es la altura visible: es la altura que tendría la ventana si la barra del navegador estuviera oculta. Con la barra a la vista —que es el estado normal— una pantalla de `min-height:100vh` queda unos 60–90 px más alta que el hueco disponible, y el resultado es una página de login que se puede desplazar aunque no tenga nada que mostrar debajo. `100dvh` mide lo que de verdad se ve y se ajusta cuando la barra aparece o se va. Va con respaldo: quien no entienda `dvh` se queda con la línea anterior, que es exactamente el comportamiento de hoy. 2. `--seguro-*`. Todas las páginas declaran `viewport-fit=cover`, que es lo que hace que el fondo llegue hasta el borde en un iPhone con muesca. Lo que faltaba era la otra mitad del trato: `cover` mete el CONTENIDO debajo de la muesca, de las esquinas redondeadas y de la barra del gesto de inicio. Sin apartarlo, un botón fijo abajo queda medio tapado por la barra del sistema y en horizontal el texto se corta contra la muesca. Los valores caen a 0 px en cualquier pantalla sin muescas, así que esto no cambia nada en escritorio. */ :root{ --alto-ventana:100vh; --alto-ventana:100dvh; --seguro-arriba:env(safe-area-inset-top, 0px); --seguro-abajo:env(safe-area-inset-bottom, 0px); --seguro-izq:env(safe-area-inset-left, 0px); --seguro-der:env(safe-area-inset-right, 0px); }