/* ============================================================================ MAPTAINER — Tokens Idea rectora: la pantalla. La web es una sala oscura y el producto es lo unico que emite luz. Se toma la identidad de maptainer.com: rampa navy de seis pasos, un solo acento cian, texto siempre tenido de azul y ningun gris neutro. Nada se rellena de color: se vela. Los filetes son cian traslucido, las tarjetas son un velo navy sobre el fondo, y la profundidad la da el halo, no la sombra. Todos los pares usados como texto/fondo cumplen WCAG AA (>=4,5:1) y todo borde con significado llega a 3:1. ============================================================================ */ :root { /* ---- Rampa navy: la unica escala de superficie ---- */ --navy-900: #050d1f; /* fondo de pagina */ --navy-800: #0a1733; /* bloque hundido, pie, campos */ --navy-700: #0e2148; /* banda destacada */ --navy-600: #142b5e; /* velo de tarjeta */ --navy-500: #1d3d7c; --navy-400: #2b5599; /* ---- Superficies ---- */ --paper: var(--navy-900); --paper-2: var(--navy-800); --paper-3: rgba(20, 43, 94, .42); /* tarjeta: velo, no relleno */ --paper-solid: #0b1a39; /* el mismo velo ya resuelto, para capas flotantes que no pueden dejar ver lo que hay debajo */ /* ---- Tinta: siempre tenida de azul ---- */ --ink: #E6F1FF; /* texto principal · 16,97:1 sobre navy-900 */ --ink-2: #9BB5D4; /* secundario, cotas, unidades · 9,18:1 */ --ink-3: #7F9DC2; /* apoyo · 6,92:1, sigue valiendo como texto */ /* ---- Filete: velo cian, nunca un color solido ---- */ --rule: rgba(127, 214, 255, .14); /* filete decorativo */ --rule-2: rgba(127, 214, 255, .45); /* borde con significado · 3,2:1 */ /* ---- Acento: cian. En oscuro el hover ACLARA, no oscurece ---- */ --accent: #7FD6FF; /* texto y enlaces · 11,96:1 */ --accent-hi: #4CC1F5; /* superficies grandes y simbologia · 9,46:1 */ --accent-mid: #2DA5E0; /* extremo oscuro del degradado de boton */ --accent-deep: #B5E7FF; /* estado hover · 14,61:1. Aclara: ver comentario */ --accent-wash: rgba(127, 214, 255, .10); /* fondo tenue de estado activo */ --on-accent: var(--navy-900); /* texto sobre relleno cian */ --teal: #6FC0D1; /* el cian del logotipo · 9,35:1 */ --teal-hi: #A2E4DD; /* su realce, tambien del logotipo */ --alert: #FF6B8A; /* vencimiento y bloqueo · 7,12:1 */ --alert-wash: rgba(255, 107, 138, .12); --ok: #5CD6A8; /* 10,74:1 */ /* ---- Halo: la profundidad de este sistema ---- */ --glow: 0 0 40px rgba(76, 193, 245, .18); --glow-strong: 0 8px 30px rgba(76, 193, 245, .35); --shadow-lift: 0 16px 40px rgba(0, 0, 0, .55); /* ---- Reticula de fondo: la textura de la marca ---- */ --grid-line: rgba(127, 214, 255, .08); --grid-step: 40px; /* ---- Espaciado ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ============================================================ TIPOGRAFIA — tres voces con papeles separados, como en la web viva: display Space Grotesk titulos, interfaz, botones, cifras lectura Source Serif 4 texto largo: articulos, glosario, doc, entradilla etiqueta JetBrains Mono antetitulos, pildoras, metadatos, cotas --font-text es la voz por defecto (interfaz) y apunta al display, igual que en maptainer.com. La serif NO es la fuente de la pagina: se reserva para donde de verdad se lee seguido. Ver --font-read. */ --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-text: var(--font-display); --font-read: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fs-mono: 12px; --fs-cap: 14px; --fs-body: 17px; --fs-lead: 20px; --fs-h4: 18px; --fs-h3: 22px; /* h2 tiene que quedar por DEBAJO del h1 de pagina interior (54px), o el titular de seccion compite con el de la pagina. */ --fs-h2: clamp(28px, 3.4vw, 44px); --fs-h1: clamp(40px, 5.6vw, 76px); /* La escala grande se reserva a la portada. Las interiores bajan un peldano, igual que hace maptainer.com: un titular de 76px con cinco lineas de texto deja de ser un titular. */ --fs-h1-page: clamp(34px, 4vw, 54px); /* El contraste de interletraje es la firma: display muy cerrado, micro-texto en mono muy abierto. */ --tracking-h1: -.022em; --tracking-h2: -.019em; --tracking-h3: -.014em; --tracking-label: .16em; --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.65; --measure: 68ch; /* La misma columna, pero en px. --measure va en ch y el ch se resuelve contra la fuente DEL ELEMENTO: desde que conviven la serif de lectura y el display, dos cajas hermanas con 68ch salen de anchos distintos. Donde varias cajas tienen que alinearse entre si se usa esta. */ --measure-col: 640px; /* ---- Geometria ---- */ --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-pill: 999px; --container: 1200px; --container-wide: 1400px; /* ---- Capas ---- */ --z-base: 1; --z-nav: 100; --z-mega: 110; --z-modal: 1000; /* ---- Movimiento ---- */ --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; --ease: cubic-bezier(.2,.7,.2,1); /* ---- Puntos de ruptura (referencia; las media queries usan literales) ---- */ --bp-sm: 600px; --bp-md: 900px; --bp-lg: 1200px; /* ========================================================================= ALIAS HEREDADOS — NO BORRAR. Son los ocho nombres que todavia se escriben a mano dentro del PHP: el cuarteto semantico + --cyan-300 en los filtros del blog (es/blog-gmao.php y en/blog.php, lineas 87-91), --txt-dim en el aviso de "sin articulos" (linea 108) y --txt-mute en el sello de fecha de las cinco paginas legales de cada idioma. Comprobado con grep: no hay mas. El cuarteto es el de maptainer.com — pasteles desaturados calibrados para fondo oscuro — y se usa SOLO para categorizar, nunca para decorar. ========================================================================= */ --cyan-300: #7FD6FF; /* categoria: smart · 11,96:1 sobre navy-900 */ --green: #5CD6A8; /* categoria: gis · 10,74:1 */ --amber: #FFB454; /* categoria: kpi · 10,99:1 */ --violet: #B18BFF; /* categoria: case · 7,39:1 */ --rose: #FF6B8A; /* categoria: tech · 7,12:1 */ --txt-dim: var(--ink-2); --txt-mute: var(--ink-3); }