/* ============================================================ tokens-cowork-v1.css Sistema de design tokens unificado — basado en home / sultanfreight.com Generado por Cowork 2026-05-09 — instrucción CEO: "la linea grafica a tomar es la de la pagina principal siempre". Reemplaza por completo los sistemas anteriores en: - /products/cargoplex.html (antes: --navy:#030D1C + --gold:#D4A84B + Syne+DM Sans → AHORA: igual paleta + Plus Jakarta + Space Grotesk) - /products/dispatch.html (antes: -apple-system → AHORA: Plus Jakarta + Space Grotesk) - /products/tracking.html (idem) - /products/command.html (idem) - /products/ecosystem.html (antes: Segoe UI + navy/gold → AHORA: Plus Jakarta + Space Grotesk + navy/gold) - /products/index.html (alinear con home) - /blog/ + posts (Fase 4 lo aplica completo en rebuild de plantilla) - /about.html, /contact.html, /faq.html, /careers.html, /investors.html (alinear) NO se aplica a: - /iron-route/ (mantiene su sistema interno con LIGHT cream por UX cabina; Cowork ajustará IR solo si CEO lo indica) Uso: al inicio del . Después dejar la hoja específica de la página que use estos tokens. ============================================================ */ :root { /* === PALETA — del home === */ --navy: #030D1C; /* fondo principal */ --navy-light: #0d2035; /* superficies elevadas */ --navy-dark: #010810; /* tonos más profundos */ --navy-mid: #071428; /* gradients */ --navy-2: #0d1f3c; /* card-bg base */ --navy-3: #1b2d50; /* borders sutiles */ --gold: #D4A84B; /* CTA principal + acentos */ --gold-light: #E8C675; /* hover / highlights */ --gold-dark: #B8902F; /* presed states */ --gold-dim: rgba(212, 168, 75, 0.15); /* === Neutrales === */ --white: #FFFFFF; --gray-50: #F8F9FC; --gray-100: #EEF1F6; --gray-200: #D5DAE5; --gray-300: #BCC4D2; --gray-400: #8896AB; --gray-500: #6E7C90; --gray-600: #556070; --gray-700: #3D4756; --gray-800: #2C3544; --gray-900: #1A2030; /* === Estados === */ --success: #22c55e; /* verde — confirmación */ --warning: #f59e0b; /* ámbar — atención */ --error: #ef4444; /* rojo — peligro */ --info: #06b6d4; /* cyan — info */ /* === Tipografía === */ --font-h: 'Space Grotesk', sans-serif; --font-b: 'Plus Jakarta Sans', sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', monospace; /* === Sombras (del home) === */ --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.08); --shadow-md: 0 8px 30px rgba(27, 42, 74, 0.12); --shadow-lg: 0 20px 60px rgba(27, 42, 74, 0.18); --shadow-gold: 0 4px 18px rgba(212, 168, 75, 0.35); /* === Radios === */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; /* === Spacing scale === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* === Touch targets (Iron Route compatible — apps móviles) === */ --touch: 48px; --touch-min: 44px; /* === Capas z-index === */ --z-nav: 1000; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; } /* === DARK SURFACE BASE (para páginas de productos) === */ .cw-dark { background: var(--navy); color: var(--white); font-family: var(--font-b); line-height: 1.7; } .cw-dark h1, .cw-dark h2, .cw-dark h3, .cw-dark h4, .cw-dark h5 { font-family: var(--font-h); line-height: 1.2; font-weight: 700; } /* === Glassmorphism navbar (del home + cargoplex) === */ .cw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); background: rgba(3, 13, 28, 0.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(212, 168, 75, 0.15); height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; } /* === Botón CTA gold (del home) === */ .cw-cta { display: inline-block; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: var(--navy); font-family: var(--font-h); font-weight: 700; font-size: 0.95rem; padding: 12px 26px; border-radius: var(--radius-sm); text-decoration: none; transition: filter 0.2s, transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; min-height: var(--touch); } .cw-cta:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-gold); } .cw-cta-ghost { background: transparent; border: 1px solid var(--gold); color: var(--gold); } .cw-cta-ghost:hover { background: var(--gold-dim); color: var(--gold-light); } /* === Card base oscura (productos / ecosystem) === */ .cw-card { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: var(--radius); padding: var(--space-6); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .cw-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); } /* === Container estándar === */ .cw-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* === Tipografía editorial (para blog Fase 4) === */ .cw-prose { max-width: 720px; margin: 0 auto; font-family: var(--font-b); font-size: 17px; line-height: 1.75; color: var(--gray-200); } .cw-prose h2 { font-family: var(--font-h); font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1rem; color: var(--white); } .cw-prose p { margin-bottom: 1.4em; } .cw-prose a { color: var(--gold-light); text-decoration: underline; text-decoration-color: var(--gold-dim); } .cw-prose a:hover { text-decoration-color: var(--gold); } .cw-prose blockquote { border-left: 3px solid var(--gold); padding: 16px 24px; margin: 2rem 0; background: rgba(212, 168, 75, 0.05); font-style: italic; font-size: 1.1em; color: var(--gray-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .cw-prose img { max-width: 100%; border-radius: var(--radius); margin: 2rem 0; display: block; } /* === Reset focus accesible === */ .cw-dark *:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); } /* === A11y helpers === */ .cw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .cw-skip-link { position: absolute; top: -100px; left: 16px; background: var(--gold); color: var(--navy); padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 700; z-index: var(--z-tooltip); transition: top 0.2s; } .cw-skip-link:focus { top: 16px; }