/* ============================================================
   BASE.CSS — Tokens de diseño, reset, tipografía y utilidades
   Sistema unificado para todo Talendev Academy.
   ============================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Marca / azules */
  --blue:         #006FFF;
  --blue-dark:    #0052CC;
  --blue-deeper:  #003D99;
  --blue-light:   #E8F1FF;
  --blue-mid:     #C5DAFF;

  /* Acentos */
  --teal:         #00A68B;
  --teal-light:   #E0F5F2;
  --teal-mid:     #7DD5C8;
  --orange:       #FC752C;
  --orange-dark:  #E0611A;
  --orange-light: #FFF0E8;
  --orange-mid:   #FBC9A7;
  --purple:       #7C3AED;
  --purple-light: #F3EEFF;
  --purple-mid:   #C4B5FD;
  --red:          #E8002D;
  --red-light:    #FDEDF1;
  --red-mid:      #F5A0B0;
  --whatsapp:     #25D366;
  --whatsapp-dark:#1DB954;
  --star:         #F59E0B;

  /* Superficies */
  --bg:            #F4F7FC;
  --white:         #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #EEF2F8;
  --border:        #DDE4F0;
  --border-strong: #C4CEDF;

  /* Texto */
  --text:     #0F1D38;
  --text-mid: #344769;
  --muted:    #6B7A99;
  --muted-2:  #9AAABF;

  /* Tipografía */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Layout */
  --container: 1100px;   /* landing */
  --page:      880px;    /* brochures */
  --radius:    12px;
  --radius-lg: 16px;
  --radius-sm: 8px;

  /* Sombras */
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(0,111,255,0.10);
  --shadow-lg: 0 12px 36px rgba(0,111,255,0.12);

  /* Transiciones */
  --t-fast: 0.15s ease;
  --t-mid:  0.2s ease;
}

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { list-style: none; }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── CONTENEDORES ──────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.page      { max-width: var(--page);      margin: 0 auto; padding: 0 28px; }

.section    { padding: 88px 0; }
.section-sm { padding: 64px 0; }

/* ─── ENCABEZADOS DE SECCIÓN (reutilizable) ─────────────── */
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.section-heading {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 620px;
  line-height: 1.7;
}
.accent        { color: var(--blue); }
.accent-teal   { color: var(--teal); }
.accent-orange { color: var(--orange); }
.accent-purple { color: var(--purple); }

hr.section-div { border: none; border-top: 1px solid var(--border); }

/* ─── HELPERS ───────────────────────────────────────────── */
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Permite scroll horizontal seguro de tablas anchas en móvil */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── AJUSTES RESPONSIVE GLOBALES ───────────────────────── */
@media (max-width: 600px) {
  .container, .page { padding: 0 18px; }
  .section    { padding: 56px 0; }
  .section-sm { padding: 44px 0; }
  body { font-size: 15px; }
}