@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  /* === SURFACES === */
  --c-ink:     #0d0d0d;
  --c-paper:   #faf8f2;
  --c-dark:    #111111;
  --c-dark-2:  #1a1a1a;
  --c-text:    #3a3a3a;
  --c-muted:   #8a8a8a;
  --c-border:      rgba(13,13,13,0.1);
  --c-border-dark: rgba(250,248,242,0.1);

  /* === BRAND — CMYK === */
  --c-m:      #d40069;   /* magenta — dominante */
  --c-m-dark: #a80055;
  --c-m-dim:  rgba(212,0,105,0.1);
  --c-c:      #009ab8;   /* cyan */
  --c-y:      #ffd100;   /* yellow */
  --c-lime:   #7bc043;   /* subrayado del logo */

  /* CMYK exacto — para SVG y gráficos */
  --cmyk-c:  #009fcf;
  --cmyk-m:  #e4006c;
  --cmyk-y:  #ffd400;
  --cmyk-k:  #0d0d0d;

  /* === TIPOGRAFÍA === */
  --f-display: 'DM Serif Display', Georgia, serif;
  --f-body:    'IBM Plex Sans', -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Escala tipográfica */
  --fs-number: clamp(4rem, 12vw, 9rem);
  --fs-hero:   clamp(2.25rem, 5vw, 4rem);
  --fs-h1:     clamp(2rem, 4vw, 3.25rem);
  --fs-h2:     clamp(1.625rem, 3vw, 2.25rem);
  --fs-h3:     clamp(1.125rem, 2vw, 1.375rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.75rem;

  /* Leading */
  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.6;

  /* Tracking */
  --ls-tight:  -0.03em;
  --ls-snug:   -0.02em;
  --ls-label:   0.1em;

  /* === ESPACIADO === */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* === LAYOUT === */
  --max-w:     1200px;
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section-v: clamp(4rem, 8vw, 7rem);

  /* === FORMA === */
  --r-sm: 2px;
  --r-md: 4px;

  /* === PROFUNDIDAD — sombras teñidas === */
  --sh-sm: 0 1px 4px rgba(212,0,105,0.08);
  --sh-md: 0 4px 20px rgba(212,0,105,0.12);
  --sh-lg: 0 12px 40px rgba(212,0,105,0.18);

  /* === MOVIMIENTO === */
  --tr-fast: 150ms ease;
  --tr-base: 240ms ease;
  --tr-slow: 400ms ease;
}