/* =============================================================
   VARIABLES — Design Tokens
   WordPress: Mapear a theme.json (colors, typography, spacing)
   ============================================================= */

:root {

  /* ── Colores ─────────────────────────────────────────────── */
  --c-dark:         #0D0D0D;
  --c-dark-2:       #111111;
  --c-dark-3:       #1A1A1A;
  --c-dark-border:  #222222;
  --c-dark-5:       #333333;
  --c-dark-muted:   #555555;

  --c-accent:       #2EA3F1;
  --c-accent-hover: #1a8fd8;

  /* Acento de eyebrow por tipo de fondo de sección.
     Configurable desde Apariencia → Personalizar → Colores. */
  --c-eyebrow-on-dark:  #2EA3F1;  /* secciones oscuras  */
  --c-eyebrow-on-gray:  #0D0D0D;  /* secciones grises   */
  --c-eyebrow-on-light: #0D0D0D;  /* secciones blancas  */

  /* ── Variantes de bloque ─────────────────────────────────── */
  /* Dark (fondo oscuro) */
  --dark-bg:      #0D0D0D;
  --dark-text:    #FFFFFF;
  --dark-accent:  #2EA3F1;
  /* Gray (fondo gris) */
  --gray-bg:      #F4F4F4;
  --gray-text:    #0D0D0D;
  --gray-accent:  #0D0D0D;
  /* Light (fondo blanco) */
  --light-bg:     #FFFFFF;
  --light-text:   #0D0D0D;
  --light-accent: #0D0D0D;

  --c-white:        #FFFFFF;
  --c-gray:         #F4F4F4;
  --c-gray-2:       #E8E8E8;

  --c-text:         #0D0D0D;
  --c-text-2:       #475569;  /* AA (≥4.5:1) sobre --c-white y --c-gray */
  --c-text-3:       #94A3B8;  /* solo para texto sobre fondos oscuros */
  --c-border:       #E8E8E8;

  /* ── Tipografía ──────────────────────────────────────────── */
  --f-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-ui:      'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala tipográfica */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.375rem;   /* 22px */
  --text-3xl:  1.75rem;    /* 28px */
  --text-4xl:  2rem;       /* 32px */
  --text-5xl:  2.5rem;     /* 40px */
  --text-6xl:  2.75rem;    /* 44px */
  --text-7xl:  3rem;       /* 48px */
  --text-8xl:  3.5rem;     /* 56px */
  --text-9xl:  4rem;       /* 64px */
  --text-hero: 4.75rem;    /* 76px */

  /* ── Layout ──────────────────────────────────────────────── */
  --container:    1400px;
  --pad-x:        5rem;        /* 80px padding horizontal desktop */
  --pad-section:  5.5rem;      /* 88px padding vertical secciones */
  --nav-h:        6.25rem;     /* 100px alto del nav */

  /* ── Radios ──────────────────────────────────────────────── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 9999px;

  /* ── Transiciones ────────────────────────────────────────── */
  --t-fast:   0.15s ease;
  --t:        0.2s ease;
  --t-med:    0.35s ease;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.16);
}

/* ── Responsive adjustments ──────────────────────────────────── */
@media (max-width: 1200px) {
  :root {
    --pad-x:      3rem;
    --text-hero:  3.75rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --pad-section: 4.5rem;
    --text-hero:   3rem;
    --text-9xl:    3.25rem;
    --text-8xl:    2.75rem;
  }
}

@media (max-width: 768px) {
  :root {
    --pad-x:       1.25rem;
    --pad-section: 3rem;
    --text-hero:   2.375rem;
    --text-9xl:    2.5rem;
    --text-8xl:    2.25rem;
    --text-7xl:    2rem;
    --text-6xl:    1.875rem;
    --text-5xl:    1.75rem;
  }
}

@media (max-width: 480px) {
  :root {
    --pad-x:     1rem;
    --text-hero: 2rem;
  }
}