/* ═══════════════════════════════════════════════════
   css/tokens.css
   Design tokens & global styles
   Edita las variables :root para cambiar la identidad
   visual de todo el sitio desde un solo lugar.
═══════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────── */
:root {
  /* Brand */
  --teal:          #008080;
  --teal-hover:    #006f6f;
  --teal-light:    #00a3a3;
  --teal-dim:      rgba(0, 128, 128, 0.09);
  --teal-border:   rgba(0, 128, 128, 0.22);

  /* Surfaces */
  --bg:            #f9f8f6;
  --surface:       #ffffff;
  --surface-2:     #f2f1ef;

  /* Text */
  --ink:           #111110;
  --ink-2:         #4a4a47;
  --ink-3:         #9a9993;

  /* Borders */
  --border:        #e4e3df;

  /* Radii */
  --r-sm:          8px;
  --r-md:          12px;
  --r-lg:          16px;

  /* Layout */
  --max-w:         800px;
  --px:            28px;

  /* Transitions */
  --t:             0.22s ease;
}

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

body {
  background:              var(--bg);
  color:                   var(--ink);
  font-family:             'Lexend', system-ui, sans-serif;
  font-size:               16px;
  line-height:             1.65;
  -webkit-font-smoothing:  antialiased;
}

img, svg { display: block; }

::-webkit-scrollbar         { width: 3px; }
::-webkit-scrollbar-thumb   { background: var(--teal); border-radius: 2px; }

/* ── Layout helpers ───────────────────────────────── */
.wrap {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--px);
}

.two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   64px;
  align-items:           start;
}

hr.divider {
  border:         none;
  border-top:     1px solid var(--border);
  margin:         0;
}

/* ── Section ──────────────────────────────────────── */
section           { padding: 60px 0; }
section#inicio    { padding-top: 100px; padding-bottom: 60px; }
section#recursos  { padding-bottom: 80px; }

/* ── Typography ───────────────────────────────────── */
h1 {
  font-family:    'Lexend', system-ui, sans-serif;
  font-size:      clamp(2.4rem, 6.5vw, 4.2rem);
  line-height:    1.1;
  letter-spacing: -0.025em;
  font-weight:    700;
}
h2 {
  font-family:    'Lexend', system-ui, sans-serif;
  font-size:      clamp(1.8rem, 5vw, 2.5rem);
  line-height:    1.2;
  letter-spacing: -0.02em;
  font-weight:    600;
}
h3 {
  font-family:    'Lexend', system-ui, sans-serif;
  font-size:      16px;
  font-weight:    600;
  letter-spacing: -0.01em;
}

em.accent {
  color:       var(--teal);
  font-style:  normal;
  font-weight: 800;
}

.section-label {
  display:         block;
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--teal);
  margin-bottom:   18px;
}

.prose {
  font-size:   15px;
  color:       var(--ink-2);
  line-height: 1.82;
}
.prose p + p   { margin-top: 16px; }
.prose strong  { color: var(--ink); font-weight: 500; }

/* ── Buttons ──────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  font-size:       13px;
  font-weight:     500;
  padding:         10px 20px;
  border-radius:   10px;
  text-decoration: none;
  border:          none;
  cursor:          pointer;
  transition:      background var(--t), transform var(--t), border-color var(--t);
  line-height:     1;
  white-space:     nowrap;
}
.btn-dark             { background: var(--ink); color: #fff; }
.btn-dark:hover       { background: #2c2c29; transform: translateY(-1px); }
.btn-ghost            { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover      { background: var(--surface-2); border-color: var(--ink-3); }
.btn-teal             { background: var(--teal); color: #fff; border: 1px solid var(--teal); }
.btn-teal:hover       { background: var(--teal-hover); transform: translateY(-1px); }

/* ── Tags / pills ─────────────────────────────────── */
.tag {
  display:       inline-block;
  font-size:     11px;
  font-weight:   500;
  letter-spacing:0.03em;
  color:         var(--teal);
  background:    var(--teal-dim);
  border:        1px solid var(--teal-border);
  padding:       3px 10px;
  border-radius: 999px;
}

/* ── Cards ────────────────────────────────────────── */
.card {
  background:  var(--surface);
  border:      1px solid var(--border);
  border-radius: var(--r-lg);
  transition:  border-color var(--t), transform var(--t), box-shadow var(--t);
}
.card:hover {
  border-color: var(--teal-border);
  transform:    translateY(-3px);
  box-shadow:   0 12px 36px rgba(0, 0, 0, 0.06);
}

/* ── Reveal animation ─────────────────────────────── */
.rv {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rv.in  { opacity: 1; transform: translateY(0); }
.rv.d1  { transition-delay: 0.08s; }
.rv.d2  { transition-delay: 0.16s; }
.rv.d3  { transition-delay: 0.24s; }
.rv.d4  { transition-delay: 0.32s; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 640px) {
  :root { --px: 20px; }

  .two-col       { grid-template-columns: 1fr; gap: 36px; }
  section        { padding: 60px 0; }
  section#inicio { padding-top: 110px; padding-bottom: 60px; }

  .hide-mobile   { display: none !important; }
  .show-mobile   { display: block !important; }
}