/* ============================================================
   RESET.CSS — Variables globales, reset y box-sizing
   Momentum Lab | Manual de Marca v1.0 — Ibagué, Colombia 2026
   ============================================================ */

/* Google Fonts se importan desde los HTML vía <link> */

/* ── Variables ──────────────────────────────────────────── */
:root {
  /* ── Paleta oficial (Manual de Marca v1.0) ──────────────
     Estilo minimalista corporativo: base neutra + acento índigo
     reservado para cifras, datos y llamados a la acción.
     El índigo NUNCA se usa como relleno dominante del logotipo.
  ──────────────────────────────────────────────────────── */

  /* Base oscura */
  --navy:           #0F172A;   /* Azul oscuro principal — fondo hero, header, footer */
  --navy-dark:      #0F172A;   /* alias idéntico */
  --navy-light:     #1E293B;   /* Gris oscuro — segunda capa, cards oscuras */

  /* Índigo — acento único de marca */
  --steel:          #4F46E5;   /* Índigo secundario */
  --steel-light:    #6366F1;   /* Índigo acento (CTAs, hover, overlines) */
  --steel-pale:     #EEF2FF;   /* Índigo fondo muy claro */
  --amber:          #6366F1;   /* Alias → índigo acento (botones primarios, métricas) */
  --amber-light:    #4F46E5;   /* Alias → índigo secundario */
  --amber-pale:     #EEF2FF;   /* Alias → índigo pale */
  --amber-gold:     #818CF8;   /* Índigo claro — texto sobre fondos oscuros */
  --amber-dark:     #4338CA;   /* Índigo dark — gradientes, hover */

  /* Neutros del manual */
  --white:          #FFFFFF;
  --gray-50:        #F8FAFC;   /* Fondo blanco — secciones alternadas */
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-400:       #94A3B8;   /* Gris claro — "Lab" en wordmark, texto secundario */
  --gray-600:       #64748B;   /* Texto de cuerpo secundario */
  --gray-800:       #1E293B;   /* Gris oscuro — texto principal sobre fondo claro */
  --black:          #0D1421;

  /* Estado: error / éxito */
  --error:          #E53E3E;
  --error-bg:       #FFF5F5;
  --success:        #22C55E;
  --success-bg:     #ECFDF5;

  /* Tipografías */
  --font-heading:   'Montserrat', sans-serif;   /* Encabezados 500–900 */
  --font-body:      'Inter', sans-serif;         /* Cuerpo 400–600 */
  --font-mono:      'JetBrains Mono', monospace; /* Datos, cifras, métricas */

  /* Efectos — sombras actualizadas a base índigo */
  --shadow-sm:   0 1px 4px rgba(15, 23, 42, 0.08);
  --shadow-md:   0 4px 16px rgba(15, 23, 42, 0.12);
  --shadow-lg:   0 8px 32px rgba(15, 23, 42, 0.16);

  /* Escala tipográfica */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */

  /* Espaciado */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout */
  --max-width:     1200px;
  --container-px:  24px;

  /* Efectos */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --transition:  0.25s ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-800);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}