/* ═══════════════════════════════════════════════════════════════════════ SISTEMA DE DISEÑO — César Cardona · Analítica & IA Estructura y lenguaje visual del Diseño 1 (bento minimal claro) con la paleta original del sitio intacta: navy #0B1426, teal #00C9A7, blue #1A56E8, amber #F5A623 y la escala de grises existente. Hoja compartida por index.html, dashboards.html, Tendencias.html y (junto a wrg-theme.css) proposals/WRG.html. ═══════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Tokens del sistema de diseño (paleta original) */ --bg: #F7F8FA; --surface: #FFFFFF; --surface-warm: #FAFBFD; --ink: #0B1426; --ink-70: rgba(11, 20, 38, .72); --ink-50: rgba(11, 20, 38, .55); --ink-45: rgba(11, 20, 38, .46); --ink-35: rgba(11, 20, 38, .36); --hairline: rgba(11, 20, 38, .08); --hairline-strong: rgba(11, 20, 38, .20); --nav-bg: rgba(247, 248, 250, .88); --pill-bg: rgba(255, 255, 255, .92); --accent: #00C9A7; --accent-soft: #E0FAF4; --accent-text: #009E85; --radius: 16px; --font-sans: 'Geist', system-ui, sans-serif; --font-mono: 'Geist Mono', monospace; /* Curvas de easing — nuevas (Fase 0, criterio de emil-design-eng): los easings nativos de CSS (ease, ease-out) son débiles y se sienten "blandos"; estas versiones con más caída al inicio hacen que un botón/dropdown se sienta más responsivo al mismo tiempo (200ms). Se usan en .theme-toggle-btn y en los estados :active nuevos de abajo; el resto de transiciones existentes en el archivo (con "ease"/"all" genérico) se deja igual por ahora — no se reescriben una por una. */ --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); /* Escala de espaciado — nueva (Fase 0). No reemplaza todos los pixeles sueltos que ya existen en el archivo (sería un cambio enorme y riesgoso de una sola vez); de acá en adelante, código nuevo debe usar esta escala en vez de un pixel suelto. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Escala de radios — nueva (Fase 0). --radius (16px) se conserva tal cual para no romper los 8 usos existentes; --radius-pill documenta el valor 999px ya usado 25 veces (no se reemplazan esos usos, son válidos y explícitos, pero el código nuevo puede referenciar el token en vez de repetir el número mágico). */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Paleta original del sitio (identidad visual intacta) */ --navy: #0B1426; --navy-mid: #162040; --blue: #1A56E8; --blue-light: #4B7BFF; --blue-soft: #EBF1FF; --teal: #00C9A7; --teal-soft: #E0FAF4; --amber: #F5A623; --amber-soft: #FEF3DC; --gray-50: #F7F8FA; --gray-100: #EDF0F5; --gray-200: #D8DCE6; --gray-400: #8B93A8; --gray-700: #3D4558; --white: #FFFFFF; --text: #0B1426; --text-muted: #5A6275; --mstr-color: #D9232E; --pbi-color: #F2C811; --tableau-color: #E97627; /* Tokens "fijos" — Fase 0 (modo oscuro): --navy y --gray-700 se usaban a la vez como color de TEXTO (debe aclararse en oscuro) y como fondo de botón/insignia de marca (debe quedarse igual en los dos temas). Esa mezcla es la razón por la que no se puede simplemente redefinir --navy bajo un selector de modo oscuro sin romper los botones — los usos de fondo/borde ya se migraron a estos tokens fijos en todo el archivo (ver .btn-cta, .lang-btn.active, .hero-btn-primary, etc.), dejando a --navy libre para volverse claro en modo oscuro más abajo. */ --navy-fixed: #0B1426; --navy-mid-fixed: #162040; --gray-700-fixed: #3D4558; } /* ── MODO OSCURO (Fase 0) ── Detección automática (prefers-color-scheme) + anulación manual vía [data-theme] en , que pone/lee core.js (ver initThemeToggle()). Solo cambian acá los tokens que son genuinamente "superficie" o "texto" — los tokens "-fixed" y los colores de marca (--teal, --amber, --blue, --white) se quedan iguales en los dos temas a propósito. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0A0F1A; --surface: #121927; --surface-warm: #151D2E; --ink: #EDF0F5; --ink-70: rgba(237, 240, 245, .72); --ink-50: rgba(237, 240, 245, .55); --ink-45: rgba(237, 240, 245, .46); --ink-35: rgba(237, 240, 245, .36); --hairline: rgba(237, 240, 245, .10); --hairline-strong: rgba(237, 240, 245, .22); --nav-bg: rgba(10, 15, 26, .85); --pill-bg: rgba(18, 25, 39, .92); --navy: #EDF0F5; --accent-soft: rgba(0, 201, 167, .14); --accent-text: #2EE6C4; --amber-soft: rgba(245, 166, 35, .14); --teal-soft: rgba(0, 201, 167, .14); --blue-soft: rgba(26, 86, 232, .16); --gray-50: #17202F; --gray-100: #1C2536; --gray-200: #2A3448; --gray-400: #8891A3; --gray-700: #E4E8F0; --text-muted: #9AA3B5; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0A0F1A; --surface: #121927; --surface-warm: #151D2E; --ink: #EDF0F5; --ink-70: rgba(237, 240, 245, .72); --ink-50: rgba(237, 240, 245, .55); --ink-45: rgba(237, 240, 245, .46); --ink-35: rgba(237, 240, 245, .36); --hairline: rgba(237, 240, 245, .10); --hairline-strong: rgba(237, 240, 245, .22); --nav-bg: rgba(10, 15, 26, .85); --pill-bg: rgba(18, 25, 39, .92); --navy: #EDF0F5; --accent-soft: rgba(0, 201, 167, .14); --accent-text: #2EE6C4; --amber-soft: rgba(245, 166, 35, .14); --gray-50: #17202F; --gray-100: #1C2536; --gray-200: #2A3448; --gray-400: #8891A3; --gray-700: #E4E8F0; --text-muted: #9AA3B5; } :root[data-theme="light"] { color-scheme: light; } body { transition: background-color .25s ease, color .25s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 15px; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── LÓGICA BILINGÜE ── */ body.lang-es .en { display: none !important; } body.lang-en .es { display: none !important; } /* ── KEYFRAMES ── */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } @keyframes pulse-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } /* ── CAMPO DE PUNTOS INTERACTIVO (interactive-dots.js) ── */ #dot-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* El contenido se apila por encima de la malla de puntos. .index2-tendencias-section (el mini-carrusel "Últimas publicaciones" de index.html) vive fuera de
a propósito (ver comentario junto a
— necesita ser 100% ancho), así que se había quedado fuera de esta lista: sin position:relative + z-index, un elemento no posicionado pinta DEBAJO de #dot-field (que sí está posicionado, con z-index:0) según el orden de apilamiento de CSS, dejando ver los puntos por encima de las tarjetas — no era transparencia de las imágenes, era que la sección entera pintaba detrás de la malla. */ main, .main, footer, .newsletter-section, .index2-tendencias-section { position: relative; z-index: 1; } /* ── NAV ── */ nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 64px; gap: 16px; } .nav-logo { font-family: var(--font-mono); font-size: 12px; color: var(--ink); letter-spacing: .18em; white-space: nowrap; text-transform: uppercase; position: relative; text-decoration: none; font-weight: 500; } .nav-logo::before { content: '●'; color: var(--teal); margin-right: 8px; font-size: 8px; vertical-align: 2px; animation: pulse 2.4s ease-in-out infinite; } .nav-logo span { color: var(--accent-text); } .nav-links { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; justify-content: center; } .nav-links a { color: var(--ink-45); text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: color .2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: var(--teal); transition: width .25s; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .btn-dash { background: var(--surface); color: var(--ink-70); text-decoration: none; padding: 7px 15px; border-radius: 999px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--hairline); transition: all .2s; white-space: nowrap; display: flex; align-items: center; gap: 5px; letter-spacing: .04em; } .btn-dash:hover { border-color: color-mix(in srgb, var(--teal) 50%, transparent); color: var(--accent-text); background: var(--surface); } .btn-dash.disabled { opacity: .4; pointer-events: none; cursor: not-allowed; } /* Retroalimentación táctil (Fase 0, criterio de emil-design-eng): un botón que se "hunde" un poco al presionar se siente más responsivo. Nada de esto anima acciones repetidas cientos de veces al día (atajos de teclado) — son botones de navegación, se pulsan poco. */ .btn-dash:active { transform: scale(.97); } .btn-cta { background: var(--navy-fixed); color: #fff; text-decoration: none; padding: 7px 17px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: all .2s; white-space: nowrap; border: 1px solid var(--navy-fixed); cursor: pointer; font-family: inherit; /* Sin esto, un