/* ============================================================ NEXDORF — Tokens de marca v1.0 Territorio: ingeniería institucional Uso: importar ANTES de styles.css y borrar el bloque :root viejo. ============================================================ */ /* Las fuentes NO se cargan desde aquí. Un @import dentro de una hoja encadena dos viajes en serie en la ruta crítica del render y empeora el LCP — que en nexdorf.com.mx es texto del hero y hoy es el único cuello de botella medido (LCP 2,7 s = FCP 2,7 s, PSI 2026-09-04). IBM Plex Sans e IBM Plex Mono se sirven self-hosted desde /fonts con @font-face + font-display:swap, y el peso del H1 va con en el de la pagina. Ver docs/plan-marca-seo.md, Fase 1.1. */ :root { /* ---------- Color · base ---------- */ --nx-tinta: #0D2B45; /* azul tinta — color institucional, texto principal */ --nx-tinta-800: #12395C; /* superficie elevada sobre tinta */ --nx-tinta-700: #1B4670; /* bordes y separadores sobre tinta */ /* ---------- Color · acción ---------- */ --nx-azul: #1B5E96; /* botones y enlaces sobre fondo claro (6.8:1) */ --nx-azul-hover: #164E7D; --nx-azul-claro: #6FB2E8; /* enlaces y acción sobre tinta (6.4:1) */ --nx-azul-50: #DCE7F1; /* fondos suaves, chips, tablas alternas */ /* ---------- Color · acento (señalética) ---------- */ --nx-ambar: #E8A33D; /* acento gráfico. NUNCA texto sobre blanco */ --nx-ambar-texto: #8C5E14; /* cuando el ámbar tiene que ser texto sobre claro (5.6:1) */ --nx-ambar-10: #FDF3E2; /* fondo de avisos */ /* ---------- Color · neutrales ---------- */ --nx-papel: #F4F6F8; /* fondo por defecto del sitio */ --nx-blanco: #FFFFFF; --nx-linea: #D5DCE3; /* retículas, bordes de tabla, separadores */ --nx-gris: #5A6B7B; /* texto secundario sobre claro (5.5:1) */ --nx-gris-claro: #8FA3B5; /* texto secundario sobre tinta (5.6:1) */ /* ---------- Color · semántico ---------- */ --nx-validado: #157F55; /* cálculo conforme, estimación aceptada */ --nx-validado-dk: #3FBF8F; /* el mismo, sobre tinta */ --nx-desviacion: #C1442F; /* error de fórmula, retraso, rechazo */ --nx-desviacion-dk:#FF7A63; /* ---------- Tipografía ---------- */ --nx-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --nx-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; --nx-h1: 700 clamp(2.1rem, 4.5vw, 3.4rem)/1.08 var(--nx-font-sans); --nx-h2: 600 clamp(1.6rem, 3vw, 2.3rem)/1.15 var(--nx-font-sans); --nx-h3: 600 1.25rem/1.3 var(--nx-font-sans); --nx-body: 400 1.0625rem/1.6 var(--nx-font-sans); --nx-small: 400 0.875rem/1.5 var(--nx-font-sans); --nx-dato: 500 1rem/1.4 var(--nx-font-mono); --nx-track-titular: -0.01em; --nx-track-etiqueta: 0.08em; /* versalitas de etiqueta y logotipo */ /* ---------- Forma ---------- */ --nx-radio: 4px; /* institucional: esquinas casi rectas */ --nx-radio-tarjeta: 6px; --nx-chaflan: 12px; /* el corte de esquina de la marca, aplicado a tarjetas destacadas */ --nx-borde: 1px solid var(--nx-linea); --nx-sombra: 0 1px 2px rgba(13,43,69,.06), 0 8px 24px rgba(13,43,69,.06); /* ---------- Ritmo ---------- */ --nx-espacio-1: 4px; --nx-espacio-2: 8px; --nx-espacio-3: 12px; --nx-espacio-4: 16px; --nx-espacio-6: 24px; --nx-espacio-8: 32px; --nx-espacio-12: 48px; --nx-espacio-16: 64px; --nx-espacio-24: 96px; --nx-ancho-texto: 68ch; } /* ============================================================ Puente de compatibilidad con styles.css actual. Mantiene los nombres viejos funcionando mientras migras. Borra este bloque cuando ya no queden referencias. ============================================================ */ :root { --bg-primary: var(--nx-papel); --bg-secondary: var(--nx-blanco); --primary-500: var(--nx-azul); --primary-glow: rgba(27, 94, 150, .18); /* El ámbar NUNCA es texto sobre claro (2.16:1, regla 2 del README). El sitio usa --accent-cyan como color de TEXTO en enlaces sobre fondo papel, así que sobre claro el puente apunta al ámbar de texto (5.6:1). Sobre tinta sí es el ámbar pleno — ver .nx-oscuro. */ --accent-cyan: var(--nx-ambar-texto); --text-primary: var(--nx-tinta); --text-secondary:var(--nx-gris); --glass-bg: var(--nx-blanco); --glass-border: var(--nx-linea); } /* Secciones oscuras (hero, pie de página): envolver en .nx-oscuro */ .nx-oscuro { --bg-primary: var(--nx-tinta); --bg-secondary: var(--nx-tinta-800); --primary-500: var(--nx-azul-claro); --text-primary: var(--nx-blanco); --text-secondary:var(--nx-gris-claro); --accent-cyan: var(--nx-ambar); /* sobre tinta el ámbar pleno sí contrasta (7.4:1) */ --glass-bg: var(--nx-tinta-800); --glass-border: var(--nx-tinta-700); background: var(--nx-tinta); color: var(--nx-blanco); } /* ---------- Piezas base ---------- */ body { background: var(--nx-papel); color: var(--nx-tinta); font: var(--nx-body); } h1 { font: var(--nx-h1); letter-spacing: var(--nx-track-titular); } h2 { font: var(--nx-h2); letter-spacing: var(--nx-track-titular); } h3 { font: var(--nx-h3); } /* Cifras, factores, folios, importes: siempre en mono con cifras tabulares */ .nx-dato, td.num, .cifra { font: var(--nx-dato); font-variant-numeric: tabular-nums; } /* Etiqueta normativa: el recurso de credibilidad de la marca */ .nx-etiqueta { display: inline-block; font: 500 .72rem/1 var(--nx-font-mono); letter-spacing: var(--nx-track-etiqueta); text-transform: uppercase; color: var(--nx-tinta); background: var(--nx-azul-50); border: 1px solid var(--nx-linea); border-radius: 2px; padding: 6px 10px; } .nx-oscuro .nx-etiqueta { color: var(--nx-blanco); background: var(--nx-tinta-800); border-color: var(--nx-tinta-700); } /* Botón primario */ .nx-btn { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem/1 var(--nx-font-sans); padding: 14px 22px; border-radius: var(--nx-radio); background: var(--nx-azul); color: var(--nx-blanco); border: 1px solid var(--nx-azul); text-decoration: none; transition: background .15s ease; } .nx-btn:hover { background: var(--nx-azul-hover); } .nx-btn--ambar { background: var(--nx-ambar); border-color: var(--nx-ambar); color: var(--nx-tinta); } .nx-btn--linea { background: transparent; color: var(--nx-azul); } .nx-oscuro .nx-btn--linea { color: var(--nx-blanco); border-color: var(--nx-tinta-700); } /* Tarjeta con el chaflán de la marca (usar con moderación: 1–2 por pantalla) */ .nx-tarjeta { background: var(--nx-blanco); border: var(--nx-borde); padding: var(--nx-espacio-6); clip-path: polygon(0 0, calc(100% - var(--nx-chaflan)) 0, 100% var(--nx-chaflan), 100% 100%, 0 100%); } /* Retícula de plano: fondo técnico discreto, sustituye a las partículas */ .nx-reticula { background-image: linear-gradient(to right, rgba(13,43,69,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(13,43,69,.05) 1px, transparent 1px); background-size: 32px 32px; } .nx-oscuro.nx-reticula { background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }