/* ==========================================================================
   THE COMPANY GRUPO L — variables.css
   Sistema de diseño (design tokens): color, tipografía, espaciado, grid.
   ========================================================================== */

:root {
  /* ---------- Paleta ---------- */
  --c-ink: #111111;          /* Negro principal */
  --c-ink-soft: #1b1b1d;     /* Negro suave (superficies) */
  --c-ink-800: #26262a;      /* Gris muy oscuro */
  --c-white: #ffffff;        /* Blanco */
  --c-gray: #ececec;         /* Gris claro (bordes / fondos) */
  --c-gray-100: #f6f6f4;     /* Gris casi blanco */
  --c-gray-300: #d9d9d6;     /* Gris medio-claro */
  --c-gray-500: #8a8a8a;     /* Gris texto secundario */
  --c-gold: #c89a3d;         /* Dorado elegante (acento único) */
  --c-gold-soft: #d9b463;    /* Dorado claro (hover) */
  --c-gold-deep: #a97e29;    /* Dorado profundo */

  /* ---------- Semántica ---------- */
  --bg: var(--c-white);
  --bg-alt: var(--c-gray-100);
  --bg-dark: var(--c-ink);
  --text: var(--c-ink);
  --text-muted: #5c5c5c;
  --text-inv: var(--c-white);
  --line: rgba(17, 17, 17, 0.10);
  --line-inv: rgba(255, 255, 255, 0.14);
  --accent: var(--c-gold);

  /* ---------- Tipografía ---------- */
  --font-display: "Montserrat", "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", "Montserrat", system-ui, sans-serif;

  /* Escala tipográfica (clamp fluido) */
  --fs-hero: clamp(2.6rem, 6.5vw, 5.6rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.65rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.75;

  --tracking-wide: 0.18em;
  --tracking-mid: 0.08em;

  /* ---------- Espaciado (4·8·16·24·32·48·64) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

  --section-y: clamp(64px, 9vw, 128px);

  /* ---------- Layout / Grid ---------- */
  --container: 1240px;
  --container-wide: 1440px;
  --gutter: 24px;
  --grid-cols: 12;

  /* ---------- Bordes / radios ---------- */
  --radius-sm: 8px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 40px;
  --radius-round: 999px;

  /* ---------- Sombras (discretas) ---------- */
  --shadow-xs: 0 2px 8px rgba(17, 17, 17, 0.06);
  --shadow-sm: 0 10px 30px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 20px 50px rgba(17, 17, 17, 0.12);
  --shadow-lg: 0 30px 70px rgba(17, 17, 17, 0.16);
  --shadow-gold: 0 18px 40px rgba(200, 154, 61, 0.22);

  /* ---------- Glass ---------- */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(17, 17, 17, 0.55);
  --glass-blur: blur(16px);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.7s;

  /* ---------- Header ---------- */
  --header-h: 90px;
  --header-h-scrolled: 70px;
  --z-header: 1000;
  --z-menu: 1100;
  --z-modal: 1200;
  --z-float: 900;
}

/* ---------- Breakpoints (referencia) ----------
   xs  < 576px    (mobile)
   sm  ≥ 576px
   md  ≥ 768px    (tablet)
   lg  ≥ 992px    (laptop)
   xl  ≥ 1200px   (desktop)
   xxl ≥ 1440px   (wide)
------------------------------------------------ */