/* ==========================================================
   QUEKO — variables.css
   Paleta, tipografías y espaciados del sitio queko.net
   Base: mrbogart.com (27 sep 2026) · Paleta: Manual de marca Queko v1.2 (oct 2026)
   ========================================================== */

/* Tipografías: Instrument Sans y JetBrains Mono se cargan con <link> en el <head> de cada página */

:root {
  /* ---------- Color principal ---------- */
  --azul:            #1245ff;   /* azul eléctrico: bloques sólidos, botones, highlight */
  --azul-35:         rgba(18, 69, 255, 0.35);  /* bordes suaves azules */

  /* ---------- Neutros / fondos ---------- */
  --blanco:          #ffffff;   /* fondo base */
  --gris-fondo:      #f5f6f8;   /* secciones alternas claras */
  --tinta:           #0e1116;   /* texto principal y bloques oscuros */

  /* ---------- Texto ---------- */
  --texto:           #0e1116;   /* títulos y texto fuerte */
  --texto-2:         #2a2f36;   /* párrafos */
  --texto-suave:     #6a6f76;   /* textos secundarios, notas */
  --texto-inverso:   #ffffff;   /* texto sobre azul / tinta */
  --texto-inverso-2: rgba(255, 255, 255, 0.82);

  /* ---------- Marca (Manual v1.2) ---------- */
  --lima:            #c5f82a;   /* acento: marcador sobre azul/tinta, botones secundarios, detalles (~6 %) */
  --naranja:         #ff6a00;   /* firma: SOLO el logo. Nunca junto al azul ni como texto */

  /* ---------- Acentos funcionales ---------- */
  --verde:           #12a66b;   /* confirmaciones (formulario enviado) */
  --whatsapp:        #25d366;   /* botón WhatsApp */

  /* ---------- Bordes ---------- */
  --borde:           rgba(14, 17, 22, 0.12);
  --borde-fuerte:    rgba(14, 17, 22, 0.16);
  --borde-inverso:   rgba(255, 255, 255, 0.25);
  --velo-blanco:     rgba(255, 255, 255, 0.10); /* tarjetas sobre fondo azul */

  /* ---------- Tipografía ---------- */
  --font-base:  "Instrument Sans", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace; /* etiquetas y números 01, 02, 03 */

  --peso-regular: 400;
  --peso-medio:   500;
  --peso-semi:    600;
  --peso-bold:    700;

  /* Tamaños fluidos (móvil → escritorio, medidos en la referencia) */
  --fs-h1:     clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40px → 68px */
  --fs-h2:     clamp(2.125rem, 1.5rem + 2.6vw, 3.875rem);/* 34px → 62px */
  --fs-h3:     1.375rem;                                 /* 22px */
  --fs-body:   1rem;                                     /* 16px */
  --fs-small:  0.875rem;                                 /* 14px */
  --fs-label:  0.75rem;                                  /* 12px, mono en mayúsculas */

  --lh-titulo: 1.05;
  --lh-texto:  1.5;
  --ls-titulo: -0.035em;   /* títulos apretados (-2.38px en 68px) */

  /* Highlight: palabra en itálica con "marcador" azul al 30% inferior */
  --highlight:      linear-gradient(transparent 70%, var(--azul) 70%);  /* sobre blanco o gris */
  --highlight-lima: linear-gradient(transparent 70%, var(--lima) 70%);  /* sobre azul o tinta */

  /* ---------- Espaciados ---------- */
  --esp-1:  0.25rem;  /*  4px */
  --esp-2:  0.5rem;   /*  8px */
  --esp-3:  0.75rem;  /* 12px */
  --esp-4:  1rem;     /* 16px */
  --esp-5:  1.5rem;   /* 24px */
  --esp-6:  2rem;     /* 32px */
  --esp-7:  3rem;     /* 48px */
  --esp-8:  4rem;     /* 64px */

  --seccion-y:   clamp(2.75rem, 1.5rem + 5vw, 6rem);   /* 44px → 96px */
  --hero-top:    clamp(6rem, 4rem + 6vw, 8.75rem);     /* 96px → 140px */

  --contenedor:        1240px;
  --contenedor-texto:  760px;
  --gutter:            1rem;   /* margen lateral en móvil */

  /* ---------- Radios ---------- */
  --radio-s:    6px;
  --radio:      12px;   /* botones, inputs */
  --radio-l:    20px;   /* tarjetas, imágenes */
  --radio-pill: 999px;
}