/* ============================================================ METRINA DESIGN SYSTEM — Tokens Paleta: Azul Cobalto (anchor #2563EB). Estilo "Playground-like": cremas + pasteles azules sólidos, tipografía sans densa (Manrope), radios grandes, casi sin bordes. ARQUITECTURA en 3 niveles: 1. Primitivos → --m-cream, --m-brand, --m-block-1… 2. Semánticos → --m-bg-*, --m-text-*, --m-border-*… 3. Componentes → .m-btn-brand, .m-section-deep… REGLA: los componentes consumen SIEMPRE tokens semánticos. ============================================================ */ :root { /* ---------- COLOR · SUPERFICIES (no cambian por paleta) ---------- Fondos cremosos, tinta casi negra. */ --m-cream: #FBF7F1; /* fondo principal, "off-white" cálido */ --m-cream-soft: #F5F0E8; /* fondo de sección alterna */ --m-paper: #FFFFFF; /* superficies sobre cream */ --m-ink: #161614; /* texto principal, casi negro cálido */ --m-ink-muted: #5A5752; --m-ink-subtle: #8B8780; --m-line: #E7E1D6; /* línea muy sutil, raramente usada */ --m-line-strong: #D4CCBC; /* Translúcido del cream para nav sticky con backdrop-filter */ --m-cream-translucent: rgba(251,247,241,0.85); /* Canales RGB — para usar con rgb() en transparencias. Ejemplo: rgb(var(--m-cream-rgb) / 0.7) */ --m-cream-rgb: 251 247 241; --m-accent-warm-ink-rgb: 120 53 15; /* ---------- COLOR · BRAND (Azul Cobalto) ---------- */ --m-brand: #2563EB; --m-brand-hover: #1D4ED8; --m-brand-soft: #DBEAFE; --m-brand-ink: #1E3A8A; /* azul navy para texto brand sobre claros */ --m-brand-deep: #0E2144; /* azul casi tinta — antiguo "forest" */ /* RGB del brand para usar con rgba() en animaciones (no perder al rebrand) */ --m-brand-rgb: 37 99 235; /* ---------- COLOR · BLOQUES PASTEL ---------- Tonos sólidos para fondos de sección y cards. En cobalto reducimos a 4 azules realmente distintos + 2 acentos warm para no quedar 100% monocromos (regla del DS: chispa juguetona). */ --m-block-1: #93C5FD; /* azul medio (antes "coral") */ --m-block-2: #BFDBFE; /* azul claro (antes "mint") */ --m-block-3: #DBEAFE; /* azul muy claro (antes "sky") */ --m-block-4: #EFF6FF; /* azul casi blanco (antes "lilac") */ /* Acentos warm — pequeños, para badges "nuevo", pulse, sticker */ --m-accent-warm: #FCD34D; /* amber, sticker tipo "nuevo" */ --m-accent-warm-soft: #FEF3C7; --m-accent-warm-ink: #78350F; /* ---------- SEMÁNTICAS DE ESTADO (fijas entre paletas) ---------- */ --m-success: #15803D; --m-success-soft: #DCFCE7; --m-warning: #92400E; --m-warning-soft: #FEF3C7; --m-danger: #991B1B; --m-danger-soft: #FEE2E2; --m-info: #1E4E79; --m-info-soft: #DBEAFE; --m-neutral: #44403C; /* estado neutro — pausado, archivado */ --m-neutral-soft: #F5F5F4; /* ---------- TIPOGRAFÍA ---------- Manrope, una sola familia. Pesos 400/500/600/700. */ --m-font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --m-font-display: "Manrope", "Inter", -apple-system, sans-serif; --m-font-aux: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* auxiliar UI: metadatos, números, código */ /* Escala — display gigante, body cómodo */ --m-text-2xs: 11px; --m-text-xs: 12px; --m-text-sm: 14px; --m-text-base:16px; --m-text-md: 17px; --m-text-lg: 20px; --m-text-xl: 24px; --m-text-2xl: 32px; --m-text-3xl: 40px; --m-text-4xl: 52px; --m-text-5xl: 68px; --m-text-6xl: 88px; --m-text-7xl: 112px; --m-leading-tight: 1.05; --m-leading-snug: 1.2; --m-leading-normal: 1.5; --m-leading-relaxed: 1.65; --m-tracking-tight: -0.025em; --m-tracking-snug: -0.015em; --m-tracking-normal: 0; --m-tracking-wide: 0.04em; --m-tracking-caps: 0.06em; --m-weight-regular: 400; --m-weight-medium: 500; --m-weight-semi: 600; --m-weight-bold: 700; /* ---------- ESPACIADO ---------- */ --m-space-1: 4px; --m-space-2: 8px; --m-space-3: 12px; --m-space-4: 16px; --m-space-5: 20px; --m-space-6: 24px; --m-space-8: 32px; --m-space-10: 40px; --m-space-12: 48px; --m-space-16: 64px; --m-space-20: 80px; --m-space-24: 96px; --m-space-32: 128px; /* ---------- RADIOS · MUY generosos ---------- */ --m-radius-sm: 8px; --m-radius-md: 14px; --m-radius-lg: 20px; --m-radius-xl: 28px; --m-radius-2xl: 36px; --m-radius-3xl: 48px; --m-radius-pill: 9999px; /* ---------- SOMBRAS · sutiles, casi inexistentes (1–8% opacidad) ---------- */ --m-shadow-xs: 0 1px 2px rgba(22,22,20,0.04); --m-shadow-sm: 0 4px 12px rgba(22,22,20,0.06); --m-shadow-md: 0 12px 32px rgba(22,22,20,0.08); --m-shadow-lg: 0 24px 60px rgba(22,22,20,0.10); /* ---------- LAYOUT ---------- */ --m-container: 1240px; --m-gutter: 24px; --m-section-y: 120px; /* ---------- MOTION ---------- */ --m-ease-out: cubic-bezier(.2,.7,.2,1); --m-dur-1: 150ms; --m-dur-2: 240ms; --m-dur-3: 320ms; --m-dur-loop: 2.5s; } /* ============================================================ SEMANTIC TOKENS — por caso de uso Referencia: Atlassian Design System, GitHub Primer, Material 3 ============================================================ */ :root { /* ── 1. BACKGROUND ──────────────────────────────────────────── */ --m-bg-page: var(--m-cream); --m-bg-subtle: var(--m-cream-soft); --m-bg-surface: var(--m-paper); --m-bg-overlay: var(--m-paper); --m-bg-brand: var(--m-brand); --m-bg-brand-subtle: var(--m-brand-soft); --m-bg-brand-bold: var(--m-brand-deep); --m-bg-block-primary: var(--m-block-1); --m-bg-block-secondary: var(--m-block-2); --m-bg-block-tertiary: var(--m-block-3); /* azul pálido, coherente con la serie */ --m-bg-block-accent: var(--m-accent-warm); /* warm amber para énfasis o sticker */ --m-bg-success: var(--m-success-soft); --m-bg-success-bold: var(--m-success); --m-bg-warning: var(--m-warning-soft); --m-bg-warning-bold: var(--m-warning); --m-bg-danger: var(--m-danger-soft); --m-bg-danger-bold: var(--m-danger); --m-bg-info: var(--m-info-soft); --m-bg-info-bold: var(--m-info); /* ── 2. TEXT ────────────────────────────────────────────────── */ --m-text-default: var(--m-ink); --m-text-subtle: var(--m-ink-muted); --m-text-disabled: var(--m-ink-subtle); --m-text-inverse: var(--m-cream); --m-text-on-brand: var(--m-cream); --m-text-brand: var(--m-brand); --m-text-brand-strong: var(--m-brand-ink); --m-text-success: var(--m-success); --m-text-warning: var(--m-warning); --m-text-danger: var(--m-danger); --m-text-info: var(--m-info); /* ── 3. BORDER ──────────────────────────────────────────────── */ --m-border-default: var(--m-line); --m-border-strong: var(--m-line-strong); --m-border-brand: var(--m-brand); --m-border-focus: var(--m-brand); --m-border-danger: var(--m-danger); --m-border-inverse: rgba(251,247,241,0.15); /* ── 4. INTERACTIVE ─────────────────────────────────────────── */ /* Botón neutral (genérico) */ --m-action-neutral-bg: var(--m-ink); --m-action-neutral-hover: #2A2A28; --m-action-neutral-text: var(--m-cream); /* Botón brand (CTA de conversión — máx 1 por vista) */ --m-action-brand-bg: var(--m-brand); --m-action-brand-hover: var(--m-brand-hover); --m-action-brand-text: var(--m-cream); /* Botón sutil (acciones secundarias) */ --m-action-subtle-bg: var(--m-cream-soft); --m-action-subtle-hover: var(--m-line); --m-action-subtle-text: var(--m-ink); /* Estado deshabilitado */ --m-action-disabled-bg: var(--m-cream-soft); --m-action-disabled-text: var(--m-ink-subtle); /* Focus ring (a11y) */ --m-focus-ring: 0 0 0 3px var(--m-brand-soft), 0 0 0 5px var(--m-brand); /* ── 5. LINK ────────────────────────────────────────────────── */ --m-link-text: var(--m-text-brand); --m-link-hover: var(--m-brand-hover); --m-link-active: var(--m-brand-ink); --m-link-visited: var(--m-brand-ink); /* ── 6. INLINE ELEMENTS ─────────────────────────────────────── */ --m-inline-code-bg: var(--m-cream-soft); --m-inline-code-text: var(--m-brand-ink); --m-inline-highlight-bg: var(--m-accent-warm-soft); --m-inline-highlight-text:var(--m-accent-warm-ink); /* ── 7. HOVERS Y TRANSPARENCIAS ─────────────────────────────── */ --m-overlay-hover: rgba(22,22,20,0.06); /* hover ghost, pill, kbd */ --m-overlay-hover-soft: rgba(22,22,20,0.05); /* hover muy sutil */ --m-text-on-dark-muted: rgba(251,247,241,0.7); /* texto de apoyo sobre ink/deep */ } /* ============================================================ TOKENS DE PRODUCTO — app layer Usados por la app de producto. No son necesarios en la landing. ============================================================ */ :root { /* ── SERIES SECUNDARIAS ──────────────────────────────────────── */ --m-secondary-market: #0F766E; --m-secondary-market-hover: #0B5F59; --m-secondary-market-soft: #CCFBF1; --m-secondary-market-text: #0F766E; --m-secondary-market-border: #99F6E4; --m-secondary-benchmark: #7C3AED; --m-secondary-benchmark-hover: #6D28D9; --m-secondary-benchmark-soft: #F3E8FF; --m-secondary-benchmark-text: #6D28D9; --m-secondary-benchmark-border: #DDD6FE; --m-secondary-data: #64748B; --m-secondary-data-hover: #475569; --m-secondary-data-soft: #F1F5F9; --m-secondary-data-text: #475569; --m-secondary-data-border: #CBD5E1; --m-secondary-outlier: #B91C1C; --m-secondary-outlier-hover: #991B1B; --m-secondary-outlier-soft: #FEE2E2; --m-secondary-outlier-text: #991B1B; --m-secondary-outlier-border: #FECACA; /* ── CHART ───────────────────────────────────────────────────── */ --m-chart-primary: var(--m-brand); --m-chart-market: var(--m-secondary-market); --m-chart-market-soft: var(--m-secondary-market-soft); --m-chart-benchmark: var(--m-secondary-benchmark); --m-chart-benchmark-soft: var(--m-secondary-benchmark-soft); --m-chart-average: var(--m-secondary-data); --m-chart-history: #94A3B8; --m-chart-estimated: var(--m-warning); --m-chart-incomplete: var(--m-ink-subtle); --m-chart-masked: var(--m-brand-deep); --m-chart-outlier: var(--m-secondary-outlier); /* ── TRUST / PRIVACIDAD ──────────────────────────────────────── */ --m-trust-privacy-bg: var(--m-brand-soft); --m-trust-privacy-text: var(--m-brand-ink); --m-trust-sample-bg: var(--m-success-soft); --m-trust-sample-text: var(--m-success); --m-trust-verified-bg: #ECFDF5; --m-trust-verified-text: #047857; --m-trust-masked-bg: var(--m-neutral-soft); --m-trust-masked-text: var(--m-neutral); /* ── SEVERITY ────────────────────────────────────────────────── */ --m-severity-info-bg: var(--m-info-soft); --m-severity-info-text: var(--m-info); --m-severity-attention-bg: var(--m-accent-warm-soft); --m-severity-attention-text: var(--m-accent-warm-ink); --m-severity-risk-bg: var(--m-warning-soft); --m-severity-risk-text: var(--m-warning); --m-severity-critical-bg: var(--m-danger-soft); --m-severity-critical-text: var(--m-danger); --m-severity-blocking-bg: var(--m-ink); --m-severity-blocking-text: var(--m-cream); /* ── ROLES ───────────────────────────────────────────────────── */ --m-role-owner-bg: var(--m-brand-deep); --m-role-owner-text: var(--m-cream); --m-role-admin-bg: var(--m-brand-soft); --m-role-admin-text: var(--m-brand-ink); --m-role-editor-bg: var(--m-accent-warm-soft); --m-role-editor-text: var(--m-accent-warm-ink); --m-role-viewer-bg: var(--m-neutral-soft); --m-role-viewer-text: var(--m-neutral); /* ── CAPAS / OVERLAYS ────────────────────────────────────────── */ --m-layer-scrim: rgba(14,33,68,0.48); /* fondo de modal o drawer */ --m-layer-row-hover: rgba(37,99,235,0.06); /* hover de fila en tabla */ --m-layer-selection: rgba(37,99,235,0.12); /* selección múltiple o filtro activo */ --m-layer-expanded: rgba(245,240,232,0.88); /* fila o panel expandido */ --m-layer-locked: rgba(22,22,20,0.05); /* zona bloqueada */ /* ── ON-DARK STATE (indicadores sobre superficies brand-deep/ink) ── */ --m-on-dark-positive: #4ADE80; /* indicador positivo / live dot sobre oscuro */ --m-on-dark-positive-soft: #86EFAC; /* valor positivo legible sobre oscuro */ --m-on-dark-negative: #FCA5A5; /* valor negativo legible sobre oscuro */ --m-on-dark-highlight: var(--m-block-2); /* highlight de brand sobre oscuro */ } /* Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--m-font-sans); font-size: var(--m-text-base); line-height: var(--m-leading-normal); color: var(--m-text-default); background: var(--m-bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--m-brand); color: var(--m-cream); }