/* ============================================================
   Q10 — Nueva Web · Tokens de marca
   Fuente ÚNICA de variables. Derivado del manual oficial
   "IDENTIDAD VISUAL Q10 RGB" (oct-2025) + variables del Figma
   "Nueva Web Q10". Cada página en pages/*.html consume estas
   variables — no hardcodear hex de marca en las páginas.
   ============================================================ */

:root {
  /* ── Gama corporativa principal ──────────────────────────
     Impacto = énfasis · Prestigio = principal oscuro
     Código = apoyo · Calma = casi-blanco cálido            */
  --impacto:   #FF6A13;   /* RGB 255,106,19 — acentos, CTAs, logo */
  --prestigio: #2B1D19;   /* RGB 43,29,25 — fondos oscuros, titulares sobre claro */
  --codigo:    #594A48;   /* RGB 89,74,72 — tono de apoyo (técnico) */
  --calma:     #FFF3EC;   /* RGB 255,243,236 — fondo cálido / texto sobre oscuro */

  /* Escalas (Figma Foundation) */
  --prestigio-50:  #EAE8E8;
  --prestigio-100: #BDB9B8;
  --prestigio-200: #9D9795;
  --codigo-200:    #B3ACAB;   /* labels secundarios (megamenú) */
  --calma-100:     #FFFBF9;   /* casi blanco, el más sutil */

  /* ── Gama web complementaria (SOLO web) ──────────────────
     Naranjas (claro → oscuro) para fondos suaves, hovers,
     estados; tierras para detalles.                         */
  --naranja-50:  #FFE9DC;
  --naranja-100: #FFDFCC;
  --naranja-200: #FFC19D;
  --naranja-300: #FFA46F;
  --naranja-400: #FF8640;
  --naranja-500: var(--impacto);

  --tierra-50:  #FFD7CC;
  --tierra-200: #CAA297;
  --tierra-400: #957167;
  --tierra-600: #60453D;
  --tierra-800: #372621;

  /* ── Grises (Figma) ── */
  --gray-100: #F7F7F7;
  --gray-500: #999999;
  --gray-600: #555555;
  --gray-700: #333333;
  --white:    #FFFFFF;

  /* ── Roles semánticos ────────────────────────────────────
     Comportamiento cromático del manual:
     fondo Calma → titular Impacto, texto Prestigio;
     fondo Prestigio/Código → titular Impacto, texto Calma.  */
  --bg:          var(--white);       /* fondo base de página (la web usa blanco; Calma para secciones) */
  --bg-cream:    var(--calma);       /* secciones cálidas */
  --bg-dark:     var(--prestigio);   /* secciones oscuras (Diferenciadores) */
  --text:        var(--prestigio);   /* texto principal sobre claro */
  --text-soft:   var(--codigo);      /* texto secundario */
  --text-on-dark:var(--calma);       /* texto sobre fondos oscuros */
  --accent:      var(--impacto);     /* énfasis / CTAs / eyebrow */
  --line:        var(--prestigio-50);/* divisores suaves */

  /* ── Tipografía ──────────────────────────────────────────
     Titulares: Bagoss Standard (Regular)
     Texto:     Eastlane (Book/Bold)
     Fuentes con licencia — ver assets/fonts.css. Mientras no
     estén los archivos, caen a las fallbacks de la pila.     */
  --font-display: 'Bagoss Standard', 'Poppins', system-ui, sans-serif;
  --font-text:    'Eastlane', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Pesos (las únicas variantes del manual) */
  --fw-display: 400;   /* Bagoss Regular */
  --fw-text:    400;   /* Eastlane Book */
  --fw-bold:    700;   /* Eastlane Bold */

  /* Escala tipográfica (px) — afinable contra Figma */
  --fs-h1:   64px;
  --fs-h2:   44px;
  --fs-h3:   28px;
  --fs-lead: 22px;   /* subtítulos / bajadas */
  --fs-body: 18px;
  --fs-sm:   15px;
  --fs-xs:   13px;   /* notas (mín. 12px en digital) */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;

  /* ── Espaciado (Figma) ── */
  --space-xs:  4px;
  --space-sm:  6px;
  --space-md:  8px;
  --space-lg:  12px;
  --space-xl:  16px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 96px;
  --section-y: 100px;   /* padding vertical de secciones (Figma) */

  /* ── Geometría ── */
  --radius:    12px;   /* Radius/LG */
  --radius-lg: 16px;   /* Radius/XL */
  --radius-pill: 999px;

  /* ── Layout ── */
  --container: 1200px;     /* ancho de contenido (Figma: 1600 - 200·2 márgenes) */
  --gutter:    200px;      /* margen lateral del lienzo de 1600 */
}