/* campus tokens — un solo acento, AA, dark-first */
:root {
  --u: 1; --motion: 1; --hue: 222; --sat: 62%;
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-xs: .875rem; --fs-sm: .98rem; --fs-md: 1.125rem;
  --fs-lg: 1.35rem; --fs-xl: 1.7rem; --fs-2xl: 2.2rem; --fs-3xl: 2.9rem;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem;
  --r-sm: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-full: 999px;
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --bg-page: hsl(222 30% 7%);
  --bg-surface: hsl(222 26% 11%);
  --bg-sunken: hsl(222 30% 5%);
  --bg-muted: hsl(222 22% 16%);
  --bg-hover: hsl(222 20% 20%);
  --text-1: hsl(220 25% 96%);
  --text-2: hsl(220 15% 78%);
  --text-3: hsl(220 10% 62%);
  --border: hsl(222 18% 20%);
  --accent: hsl(var(--hue) var(--sat) 66%);
  --accent-soft: hsl(var(--hue) 45% 20%);
  --accent-ink: hsl(222 30% 8%);
  --success: hsl(145 70% 52%);
  --danger: hsl(358 85% 64%);
  --warning: hsl(38 95% 58%);
  --focus-ring: 0 0 0 3px hsl(var(--hue) var(--sat) 66% / .35);
  --shadow: 0 8px 24px hsl(222 50% 2% / .5);
}
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh;
  font: 400 var(--fs-md)/1.55 var(--font-sans);
  background: var(--bg-page); color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { max-width: 68ch; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { width: min(72rem, 100% - 2rem); margin-inline: auto; }
.skip-link {
  position: absolute; left: -999px; background: var(--bg-surface);
  color: var(--text-1); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); z-index: 10;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 64px; padding-inline: var(--sp-5);
  background: hsl(222 30% 7% / .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; letter-spacing: -.03em; font-size: var(--fs-lg); }
.brand span { color: var(--accent); }

.hero { padding: var(--sp-12) 0 var(--sp-8); }
.hero p.lead { font-size: var(--fs-lg); color: var(--text-2); }

.grid-cursos {
  display: grid; gap: var(--sp-5); padding: var(--sp-8) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: grid; gap: var(--sp-3); align-content: start;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.card:hover { border-color: var(--accent); }
.card .meta { color: var(--text-3); font-size: var(--fs-xs); }
.card h3 a { color: var(--text-1); text-decoration: none; }
.card h3 a:hover { color: var(--accent); }

.badge {
  display: inline-flex; padding: .25rem .6rem; width: fit-content;
  border-radius: var(--r-full); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em; min-height: 44px; padding: .6em 1.1em;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 var(--fs-sm) var(--font-sans); cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:hover { background: hsl(var(--hue) var(--sat) 72%); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-ghost {
  background: transparent; color: var(--text-2); border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-1); }

.quiz-box {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  margin: var(--sp-6) 0; display: grid; gap: var(--sp-4);
}
.quiz-box .opciones { display: grid; gap: var(--sp-2); }
.quiz-box .opcion {
  text-align: left; min-height: 48px; padding: .7em 1em;
  background: var(--bg-muted); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-1); cursor: pointer;
  font: 500 var(--fs-sm) var(--font-sans);
}
.quiz-box .opcion:hover { background: var(--bg-hover); }
.quiz-box .opcion.correcta { border-color: var(--success); color: var(--success); }
.quiz-box .opcion.fallo { border-color: var(--danger); color: var(--danger); }
.quiz-box .feedback { min-height: 1.5em; color: var(--text-2); }
.marcador { font: 700 var(--fs-sm) var(--font-mono); color: var(--accent); }

.voz-player {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-4); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin: var(--sp-4) 0;
}
.voz-player audio { width: 100%; min-width: 260px; }

.semanas { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }
.semana {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-4); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text-1); text-decoration: none;
}
.semana:hover { border-color: var(--accent); }
.semana .n { font: 800 var(--fs-lg) var(--font-mono); color: var(--accent); }

footer { padding: var(--sp-8) 0; border-top: 1px solid var(--border);
  color: var(--text-3); font-size: var(--fs-xs); }

@media (max-width: 640px) {
  h1 { font-size: var(--fs-2xl); }
  .topbar { padding-inline: var(--sp-4); }
}