/* =============================================
   MARK — Variables globales y reset
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ─── TOKENS DE COLOR ─── */
:root {
  /* Fondos */
  --bg-hero:      #020B1C;
  --bg-navy:      #071426;
  --bg-deep:      #03111F;
  --bg-card-dark: #0D1B2E;
  --bg-sidebar:   #0A1628;

  /* Verdes */
  --green:        #22C55E;
  --green-dark:   #15803D;
  --green-mid:    #16A34A;
  --green-lime:   #84CC16;
  --green-soft:   #EAF8EF;

  /* Neutros claros */
  --white:        #FFFFFF;
  --gray-light:   #F6F8FA;
  --gray-border:  #E5E7EB;
  --gray-text:    #6B7280;

  /* Texto */
  --text-dark:    #0F172A;
  --text-mid:     #334155;
  --text-muted:   #64748B;
  --text-faint:   #475569;

  /* Acentos */
  --red:          #EF4444;
  --orange:       #F97316;
  --violet:       #A855F7;
  --blue:         #3B82F6;

  /* Transparencias comunes */
  --glass-white:  rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.10);
  --green-glow:   rgba(34, 197, 94, 0.25);
}

/* ─── GRADIENTES ─── */
:root {
  --grad-hero:    linear-gradient(135deg, #020B1C 0%, #071426 55%, #03111F 100%);
  --grad-green:   linear-gradient(135deg, #22C55E 0%, #15803D 100%);
  --grad-logo:    linear-gradient(135deg, #22C55E 0%, #84CC16 50%, #16A34A 100%);
  --grad-dark:    linear-gradient(135deg, #020B1C 0%, #071426 100%);
}

/* ─── TIPOGRAFÍA ─── */
:root {
  --font-display: 'Roboto', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Tamaños */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;

  /* Títulos desktop */
  --title-hero:    58px;
  --title-section: 40px;
  --title-sub:     28px;
  --title-card:    18px;

  /* Radios */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* Sombras */
  --shadow-card:  0 12px 32px rgba(15, 23, 42, 0.06);
  --shadow-dark:  0 32px 80px rgba(0, 0, 0, 0.35);
  --shadow-green: 0 10px 28px rgba(34, 197, 94, 0.28);

  /* Transiciones */
  --transition: all 0.2s ease;
}

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

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

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

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

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

button {
  font-family: var(--font-body);
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font-family: var(--font-body);
}