/* ════════════════════════════════════════════════════════════════
   courses.css — Estilos del módulo de cursos online DoReSol.
   Se carga SOLO en páginas de curso (vía $extra_css). No pisa la web:
   todo el chrome está scopeado bajo `.ds-course`.

   GENERADO — no editar a mano debajo del marcador. Regenerar con:
     bash css/courses/build-courses-css.sh
   (capa de alias de tokens de _head.css + chrome scopeado de
    _doresol-leccion.css vía scope_chrome.py).

   Estructura:
   1) Capa de ALIAS de tokens: da los nombres que usa el kit de Claude
      Design (--mono, --sans, --surf, --line-s, --r-*, --gold-h, --t)
      mapeados a las variables que YA existen en app.css. Así el kit
      hereda el sistema de temas del sitio (claro/oscuro) sin duplicar
      valores ni tocar app.css. Los tokens compartidos (--gold, --fg,
      --bg, --card, --line, --muted, --hint, --ink, --cream, --night,
      --green) ya están en app.css con valores 1:1 — no se redefinen.
   2) Chrome de lección scopeado bajo `.ds-course`.
   ════════════════════════════════════════════════════════════════ */

:root {
  --mono:   var(--font-mono);       /* app.css: 'IBM Plex Mono'… */
  --sans:   var(--font-sans);       /* app.css: 'IBM Plex Sans'… */
  --surf:   var(--surface);         /* app.css: var(--bg-surface) */
  --line-s: var(--line-strong);     /* app.css: var(--border-med) */
  --gold-h: var(--gold-hover);      /* app.css: var(--accent-hover) */
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-pill: var(--radius-pill);
  --t:      var(--trans);
  /* Acento secundario (mito/alerta suave/nivel no pasado). No existe en
     app.css; es un token propio del módulo. Terracota estable en ambos
     temas (mismo valor claro/oscuro, como en tokens.css del handoff). */
  --orange: #C2553D;
}

/* Guard de colisión con app.css: la clase `.hero__title` existe en ambos.
   app.css la oculta (`opacity:0; transform:translateY`) esperando la clase
   `.hero.ready` que SOLO agrega el JS del home; en páginas de curso ese JS
   no corre → el título quedaría invisible. Forzamos el estado visible dentro
   de `.ds-course` (mayor especificidad que la regla global de app.css). */
.ds-course .hero__title,
.ds-course .hero__kicker,
.ds-course .hero__lede {
  opacity: 1;
  transform: none;
}
/* app.css fija `.hero__title{color:#FFF}` (home hero sobre imagen oscura) →
   en las páginas de curso el título quedaba BLANCO sobre crema en tema claro
   (invisible). El color debe seguir el tema. El `em` dorado se conserva. */
.ds-course .hero__title { color: var(--fg); }
/* app.css fija `.section{padding:… 32px}` (el `.section` genérico del resto del
   sitio) → indentaba la prosa y los títulos 32px respecto de los componentes
   (conceptos/faq/objetivos/figuras), rompiendo el ancho de columna. En curso el
   `.section` no lleva padding horizontal: todo respeta el mismo ancho. */
.ds-course .section { padding-left: 0; padding-right: 0; }

/* Raya horizontal del eyebrow de sección ("SECCIÓN N ———"), como el handoff
   (`.section__eyebrow::after`). Nuestro label es `.section__label`. */
.ds-course .section__label { display: flex; align-items: center; gap: 10px; }
.ds-course .section__label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-s), transparent);
}

/* app.css fija `.hero{height:...}` (el hero del home) → recorta el panel
   lateral (score-card+mod-track) porque `.hero` tiene overflow:hidden. En
   las páginas de curso el hero crece con su contenido. */
.ds-course .hero { height: auto; }

/* Sub-navbar de secciones: el kit (_doresol-leccion.css) ya trae el estilo
   completo de `.ds-course .sec-nav`; solo corregimos el offset sticky (el
   handoff asumía topbar de 52px; el de DoReSol mide 66px) y el margen de
   scroll para que la sección apuntada no quede tapada. */
.ds-course nav.sec-nav { top: 66px; }
.ds-course .section[id] { scroll-margin-top: 132px; }

/* Catálogo de escucha del curso — diseño de la plantilla oficial
   "DoReSol Catalogo Blues". Las cards las renderiza el componente del kit
   (doresol-catalogo.js → .ds-catalogo/.dscat-*, CSS auto-inyectada). Aquí
   solo el chrome de sección + stats del hero + pie. Scopeado a .ds-course. */
.ds-course .hero__stats { display: flex; gap: 12px; flex-wrap: wrap; }
.ds-course .hero__stat {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--card); border: 1px solid var(--line-s, var(--line));
  border-radius: var(--r-md); padding: 13px 20px;
}
.ds-course .hero__stat b {
  font-size: 24px; font-weight: 600; color: var(--gold);
  letter-spacing: -.02em; line-height: 1;
}
.ds-course .hero__stat span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hint);
}
.ds-course .cat-section { margin-bottom: clamp(44px, 5vw, 68px); scroll-margin-top: 110px; }
.ds-course .cat-section__head {
  display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px; flex-wrap: wrap;
}
.ds-course .cat-section__n {
  font-family: var(--sans); font-weight: 300; font-style: italic;
  font-size: clamp(30px, 4vw, 44px); color: var(--gold);
  line-height: 1; letter-spacing: -.02em;
}
.ds-course .cat-section__title {
  font-family: var(--sans); font-weight: 300; font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -.025em; line-height: 1.05; margin: 0;
}
.ds-course .cat-section__count {
  font-family: var(--mono); font-size: 11px; color: var(--hint);
  letter-spacing: .06em; align-self: center; margin-left: auto;
}
.ds-course .cat-foot__inner {
  border-top: 1px solid var(--line); padding-top: 32px;
  display: flex; gap: 18px; align-items: flex-start; margin-top: 8px;
}
.ds-course .cat-foot__ico {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in oklab, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 28%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.ds-course .cat-foot__ico svg { width: 22px; height: 22px; color: var(--gold); }
.ds-course .cat-foot__text {
  font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0; max-width: 70ch;
}
.ds-course .cat-foot__text strong { color: var(--fg); font-weight: 500; }
.ds-course .cat-foot__note {
  font-family: var(--mono); font-size: 11px; color: var(--hint);
  line-height: 1.6; margin: 12px 0 0;
}

/* ─── FRETBOARD INTERACTIVO (full-bleed) — componente bespoke de Claude
   Design (handoff Guitarra L1). Portado verbatim, scopeado a .ds-course.
   Comportamiento: doresol-fretboard.js (tocar cuerda → Karplus + vibe). ─── */
.ds-course .fretboard-lead { max-width: 780px; margin: 8px 0 22px; }
.ds-course .fretboard-lead__eyebrow {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 6px;
  display: flex; align-items: center; gap: 9px;
}
.ds-course .fretboard-lead__eyebrow svg { width: 13px; height: 13px; }
.ds-course .fretboard-lead__text {
  font-family: var(--mono); font-size: 11px; color: var(--hint); margin: 0; letter-spacing: .02em;
}
.ds-course .fretboard {
  position: relative; width: 100vw; left: 50%; margin-left: -50vw;
  margin-top: 34px; margin-bottom: 34px; height: 300px;
  background: linear-gradient(180deg, #2a221a, #1c1611);
  overflow: hidden; user-select: none;
  border-top: 1px solid rgba(200, 169, 110, .25);
  border-bottom: 1px solid rgba(200, 169, 110, .25);
}
:root[data-theme="dark"] .ds-course .fretboard { background: linear-gradient(180deg, #231d16, #15110d); }
.ds-course .fretboard__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ds-course .fretboard__inlays { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ds-course .fretboard__labels { position: absolute; top: 0; left: 0; height: 100%; width: 120px; pointer-events: none; z-index: 3; }
.ds-course .string-hit { cursor: pointer; }
.ds-course .string-line { vector-effect: non-scaling-stroke; }
.ds-course .string-line.is-vibe { filter: drop-shadow(0 0 6px rgba(200, 169, 110, .85)); }
.ds-course .fret-line { vector-effect: non-scaling-stroke; }
.ds-course .fretboard__hint {
  position: absolute; right: 18px; bottom: 14px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: #9a8a6c;
  display: flex; align-items: center; gap: 7px; pointer-events: none;
}
.ds-course .fretboard__hint svg { width: 13px; height: 13px; }
.ds-course .fb-inlay {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: #6f6347; transform: translate(-50%, -50%); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4);
}
.ds-course .fret-label { position: absolute; left: 22px; transform: translateY(-50%); display: flex; align-items: center; gap: 11px; }
.ds-course .fret-label__no {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(200, 169, 110, .55);
  color: #c9a96e; font-family: var(--mono); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(20, 16, 11, .35);
}
.ds-course .fret-label__txt { display: flex; flex-direction: column; line-height: 1.08; }
.ds-course .fret-label__txt b { font-family: var(--mono); font-size: 19px; font-weight: 600; color: #f0e6d0; letter-spacing: -.01em; }
.ds-course .fret-label__txt i { display: none; }

/* ─── GUITARRA "PARTES DEL INSTRUMENTO" (imagen + pins) — bespoke Claude
   Design (handoff Guitarra L1). Tooltip por :hover (desktop) o .is-open
   (tap mobile, doresol-lesson-score.js). Portado verbatim, scopeado. ─── */
.ds-course .gtr-anatomy { margin: 8px 0 16px; }
.ds-course .gtr-anatomy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ds-course .gtr-anatomy__tag {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px;
}
.ds-course .gtr-anatomy__tag svg { width: 12px; height: 12px; }
.ds-course .gtr-anatomy__hint { font-family: var(--mono); font-size: 9px; color: var(--hint); letter-spacing: .04em; }
.ds-course .gtr-anatomy__stage { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.ds-course .gtr-anatomy__stage img { width: 100%; height: auto; display: block; }
.ds-course .npin { position: absolute; transform: translate(-50%, -50%); z-index: 5; cursor: pointer; }
.ds-course .npin__ring { position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; animation: npin-pulse 2.4s ease-out infinite; }
@keyframes npin-pulse { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.ds-course .npin__dot {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff; position: relative; z-index: 2; transition: transform .15s;
}
.ds-course .npin:hover .npin__dot, .ds-course .npin.is-open .npin__dot { transform: scale(1.18); }
.ds-course .npin__tip {
  position: absolute; background: rgba(15, 15, 13, .97); border: 1px solid rgba(200, 169, 110, .4);
  border-radius: var(--r-md); padding: 10px 14px; width: max-content; max-width: 180px; opacity: 0;
  pointer-events: none; transition: opacity .18s; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); z-index: 20;
}
.ds-course .npin:hover .npin__tip, .ds-course .npin.is-open .npin__tip { opacity: 1; }
.ds-course .npin__tip-name { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--gold); display: block; margin-bottom: 3px; }
.ds-course .npin__tip-desc { font-family: var(--mono); font-size: 10px; color: #9a9a8a; line-height: 1.5; margin: 0; }
.ds-course .npin--right .npin__tip { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
.ds-course .npin--left .npin__tip { right: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
.ds-course .gtr-anatomy__cap { font-family: var(--mono); font-size: 11px; color: var(--hint); line-height: 1.55; margin: 18px 0 0; text-align: center; }
@media (max-width: 640px) {
  .ds-course .npin__tip, .ds-course .npin--right .npin__tip, .ds-course .npin--left .npin__tip {
    left: 50%; right: auto; bottom: calc(100% + 12px); top: auto; transform: translateX(-50%);
    width: max-content; max-width: 46vw;
  }
  .ds-course .npin__dot { width: 24px; height: 24px; font-size: 11px; }
}

/* ─── GUITAR HOTSPOT (foto full-bleed del diapasón + pins de traste) —
   bespoke Claude Design (handoff L1 "backup pre-md"). Mismo patrón de tap
   que .npin pero full-bleed (100vw) como .fretboard. Scopeado. ─── */
.ds-course .guitar-hotspot {
  position: relative; width: 100vw; left: 50%; margin-left: -50vw;
  overflow: hidden; margin-top: 8px; margin-bottom: 28px; background: #f5f3ef; user-select: none;
}
[data-theme="dark"] .ds-course .guitar-hotspot { background: #181612; }
.ds-course .guitar-hotspot__img { width: 100%; height: auto; display: block; }
.ds-course .guitar-hotspot__bar {
  position: absolute; top: 0; left: 0; right: 0; padding: 12px 18px;
  background: linear-gradient(to bottom, rgba(248, 247, 244, .92) 0%, transparent 100%);
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
[data-theme="dark"] .ds-course .guitar-hotspot__bar { background: linear-gradient(to bottom, rgba(15, 15, 13, .85) 0%, transparent 100%); }
.ds-course .guitar-hotspot__tag { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ds-course .guitar-hotspot__hint { font-family: var(--mono); font-size: 9px; color: var(--hint); margin-left: auto; letter-spacing: .04em; }
.ds-course .pin { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 10; }
.ds-course .pin__ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: pin-pulse 2.2s ease-out infinite; }
.ds-course .pin__ring2 { position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; animation: pin-pulse 2.2s ease-out .7s infinite; }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.ds-course .pin__dot {
  width: 18px; height: 18px; background: var(--gold); border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35); position: relative; z-index: 2; transition: transform .15s;
}
.ds-course .pin:hover .pin__dot, .ds-course .pin.is-open .pin__dot { transform: scale(1.2); }
.ds-course .pin__tip {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: rgba(15, 15, 13, .96); border: 1px solid rgba(200, 169, 110, .35);
  border-radius: var(--r-md); padding: 11px 16px; min-width: 160px; max-width: 220px;
  pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); text-align: left;
}
.ds-course .pin__tip--up { bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px); }
.ds-course .pin__tip--down { top: calc(100% + 12px); transform: translateX(-50%) translateY(-6px); }
.ds-course .pin:hover .pin__tip, .ds-course .pin.is-open .pin__tip { opacity: 1; }
.ds-course .pin:hover .pin__tip--up, .ds-course .pin.is-open .pin__tip--up { transform: translateX(-50%) translateY(0); }
.ds-course .pin:hover .pin__tip--down, .ds-course .pin.is-open .pin__tip--down { transform: translateX(-50%) translateY(0); }
.ds-course .pin__tip-arrow { width: 8px; height: 8px; background: rgba(15, 15, 13, .96); border: 1px solid rgba(200, 169, 110, .35); position: absolute; left: 50%; transform: translateX(-50%) rotate(45deg); }
.ds-course .pin__tip-arrow--up { bottom: -5px; border-top: none; border-left: none; }
.ds-course .pin__tip-arrow--down { top: -5px; border-bottom: none; border-right: none; }
.ds-course .pin__tip-name { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: .04em; margin: 0 0 4px; display: block; }
.ds-course .pin__tip-desc { font-family: var(--mono); font-size: 10px; color: #9a9a8a; line-height: 1.5; margin: 0; }
.ds-course .guitar-hotspot__cap { padding: 10px 16px; font-family: var(--mono); font-size: 11px; color: var(--hint); line-height: 1.5; background: color-mix(in oklab, var(--fg) 3%, var(--card)); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .ds-course .pin__tip { max-width: 44vw; }
  .ds-course .pin__tip--up, .ds-course .pin__tip--down { left: 50% !important; transform: translateX(-50%) !important; }
}

/* ─── POSTURA (sentado / de pie) — bespoke Claude Design (handoff L1
   "backup pre-md"). Scopeado. ─── */
.ds-course .posture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
@media (max-width: 600px) { .ds-course .posture-grid { grid-template-columns: 1fr; } }
.ds-course .posture-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.ds-course .posture-card__ico {
  width: 44px; height: 44px; border-radius: var(--r-md); background: color-mix(in oklab, var(--gold) 12%, transparent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ds-course .posture-card__ico svg { width: 22px; height: 22px; color: var(--gold); }
.ds-course .posture-card__title { font-family: var(--sans); font-weight: 500; font-size: 18px; margin: 0 0 4px; letter-spacing: -.01em; }
.ds-course .posture-card__sub { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); margin: 0 0 16px; }
.ds-course .posture-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ds-course .posture-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ds-course .posture-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.ds-course .posture-list .ok { color: var(--gold); }
.ds-course .posture-list .no { color: var(--orange, #c17a4a); }

/* ─── MANOS / DEDOS (finger-fan) — bespoke Claude Design (handoff L1
   "backup pre-md"). Tap en un dedo → nombre+desc en .hand-caption
   (doresol-lesson-score.js). Scopeado. ─── */
.ds-course .hands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
@media (max-width: 640px) { .ds-course .hands-grid { grid-template-columns: 1fr; } }
.ds-course .hand-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; }
.ds-course .hand-panel__label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 4px; }
.ds-course .hand-panel__name { font-family: var(--sans); font-weight: 300; font-size: 21px; margin: 0 0 22px; letter-spacing: -.02em; }
.ds-course .finger-fan { display: flex; justify-content: center; align-items: flex-end; gap: 12px; height: 118px; margin-bottom: 18px; }
.ds-course .finger { display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer; background: none; padding: 0; border: none; }
.ds-course .finger__bar { width: 13px; border-radius: var(--r-pill) var(--r-pill) 2px 2px; background: var(--line); transition: var(--t); }
.ds-course .finger__key {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-s);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: 13px; font-weight: 600; color: var(--muted); transition: var(--t); flex-shrink: 0;
}
.ds-course .finger:hover .finger__key, .ds-course .finger.is-on .finger__key { border-color: var(--gold); background: var(--gold); color: var(--ink, var(--bg)); transform: scale(1.08); }
.ds-course .finger:hover .finger__bar, .ds-course .finger.is-on .finger__bar { background: var(--gold); }
.ds-course .hand-caption { min-height: 46px; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--hint); border-top: 1px solid var(--line); padding-top: 14px; }
.ds-course .hand-caption b { color: var(--fg); font-family: var(--sans); font-weight: 500; font-size: 15px; display: block; margin-bottom: 2px; }

/* ─── TABLA rica (.table-figure) — diseño del handoff: contenedor con borde
   redondeado, header con fondo, filas rayadas + hover, badge circular `.str-no`
   para columnas numéricas, negrita fg para la etiqueta. Scopeado. ─── */
.ds-course .table-figure {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin: 8px 0 28px;
}
.ds-course .table-figure table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 0; }
.ds-course .table-figure th {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hint); padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--fg) 4%, var(--card));
}
.ds-course .table-figure td {
  padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--muted);
  line-height: 1.5; vertical-align: middle;
}
.ds-course .table-figure tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--fg) 1.6%, var(--card)); }
.ds-course .table-figure tr:last-child td { border-bottom: none; }
.ds-course .table-figure tbody tr:hover td { background: color-mix(in oklab, var(--gold) 5%, var(--card)); }
.ds-course .table-figure td b { color: var(--fg); font-weight: 500; }
.ds-course .str-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in oklab, var(--gold) 13%, transparent); color: var(--gold);
  font-family: var(--mono); font-weight: 600; font-size: 13px;
}

/* ─────────────── chrome de lección (scopeado) ─────────────── */

/* ─── RESUMEN DE NIVELES (índice de curso) — bespoke Claude Design
   (handoff guitarra-index.html), adaptado al layout .body/.section del
   sitio (sin el wrapper 1240px propio del handoff, ya lo da .body).
   Reusable: partial views/partials/course-nivel-card.php. Scopeado. ─── */
.ds-course .niveles { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: 8px 0 28px; }
.ds-course .nivel-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; padding: 26px 28px; background: var(--card); text-decoration: none; color: inherit; transition: background .15s; align-items: center; position: relative; }
.ds-course .nivel-card:hover { background: color-mix(in oklab, var(--gold) 3%, var(--card)); }
.ds-course .nivel-card[data-locked] { opacity: .5; pointer-events: none; }
.ds-course .nivel-card[data-active] { background: color-mix(in oklab, var(--gold) 4%, var(--card)); }
.ds-course .nivel-card[data-active]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
@media (max-width: 700px) { .ds-course .nivel-card { grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 18px; } .ds-course .nivel-card__right { display: none; } }
.ds-course .nivel-card__num { font-family: var(--sans); font-size: 42px; font-weight: 300; letter-spacing: -.04em; color: var(--gold); line-height: 1; opacity: .5; }
.ds-course .nivel-card[data-active] .nivel-card__num { opacity: 1; }
.ds-course .nivel-card__tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hint); margin: 0 0 6px; }
.ds-course .nivel-card__title { font-family: var(--sans); font-weight: 400; font-size: clamp(17px, 2vw, 21px); letter-spacing: -.015em; margin: 0 0 6px; line-height: 1.2; }
.ds-course .nivel-card__title em { font-style: normal; color: var(--gold); }
.ds-course .nivel-card__lede { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.ds-course .nivel-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 190px; }
.ds-course .nivel-card__badge { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surf); color: var(--hint); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.ds-course .nivel-card[data-active] .nivel-card__badge { background: var(--fg); color: var(--bg); }
.ds-course .nivel-card__badge.is-locked svg { width: 11px; height: 11px; }
.ds-course .nivel-card__bar-wrap { width: 140px; height: 3px; background: var(--line-s); border-radius: 2px; overflow: hidden; }
.ds-course .nivel-card__bar-fill { height: 100%; background: var(--gold); border-radius: 2px; }
.ds-course .nivel-card__bar-label { font-family: var(--mono); font-size: 10px; color: var(--hint); }
.ds-course .nivel-card__bar-label b { color: var(--fg); }
.ds-course .nivel-card__score { font-family: var(--mono); font-size: 10px; color: var(--hint); }
.ds-course .nivel-card__score b { color: var(--gold); }
.ds-course .nivel-card__cta { font-family: var(--mono); font-size: 11px; color: var(--hint); letter-spacing: .08em; transition: color .15s; }
.ds-course .nivel-card:hover .nivel-card__cta { color: var(--gold); }

/* Badges compartidos gratis/premium/hecho/siguiente (temario y resumen) */
.ds-course .badge-free { background: color-mix(in oklab, var(--green, #1D9E75) 12%, transparent); color: var(--green, #1D9E75); }
.ds-course .badge-premium { background: color-mix(in oklab, var(--gold) 10%, transparent); color: var(--gold); }
.ds-course .badge-done { background: color-mix(in oklab, var(--green, #1D9E75) 12%, transparent); color: var(--green, #1D9E75); }
.ds-course .badge-next { background: color-mix(in oklab, var(--gold) 14%, transparent); color: var(--gold); }

/* ─── "LO QUE HACE DIFERENTE A ESTE CURSO" (.porque) — bespoke Claude
   Design (handoff guitarra-index.html/blues-index.html). Banda con
   fondo de superficie, 2 columnas (prosa | lista de beneficios).
   Contenido por curso: views/learning/lessons/{curso}/es/course-meta.php.
   Scopeado. ─── */
.ds-course .porque { background: var(--surf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0; margin-top: clamp(40px, 5vw, 56px); width: 100vw; position: relative; left: 50%; margin-left: -50vw; }
.ds-course .porque__inner { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 760px) { .ds-course .porque__inner { grid-template-columns: 1fr; gap: 32px; } }
.ds-course .porque__eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; display: flex; align-items: center; gap: 12px; }
.ds-course .porque__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.ds-course .porque__title { font-family: var(--sans); font-weight: 300; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 18px; }
.ds-course .porque__title em { font-style: normal; color: var(--gold); }
.ds-course .porque__body { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.ds-course .porque__body p { margin: 0 0 13px; }
.ds-course .porque__body b { color: var(--fg); }
.ds-course .beneficios { display: flex; flex-direction: column; }
.ds-course .beneficio { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.ds-course .beneficio:last-child { border-bottom: none; }
.ds-course .beneficio__icon { width: 34px; height: 34px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--gold) 10%, transparent); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.ds-course .beneficio__icon svg { width: 15px; height: 15px; }
.ds-course .beneficio__title { font-size: 13.5px; font-weight: 500; color: var(--fg); margin: 0 0 3px; }
.ds-course .beneficio__desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0; }

/* ─── ÍNDICE DE CURSO v2 (hero con progreso + nav sticky + track de
   lecciones) — bespoke Claude Design (handoff guitarra-index-v2.html),
   adaptado a nuestra estructura real de 3 niveles × 10 lecciones (el
   handoff usaba 4 "módulos" ficticios 8/7/7/8 — no es nuestro modelo de
   datos). Scopeado a .ds-course. ─── */

/* Hero: CTA + tarjeta de progreso (columna lateral del hero) */
.ds-course .hero__cta {
  display: inline-flex; align-items: center; gap: 10px; background: var(--gold); color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 13px 26px; border-radius: var(--r-pill); transition: var(--t); margin-top: 8px;
}
.ds-course .hero__cta:hover { background: var(--gold-h); }
.ds-course .prog-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.ds-course .prog-card__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--hint); letter-spacing: .06em; margin-bottom: 10px; }
.ds-course .prog-card__row b { font-size: 26px; font-weight: 300; font-family: var(--sans); letter-spacing: -.03em; color: var(--gold); line-height: 1; }
.ds-course .prog-card__bar { height: 5px; background: var(--line-s); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.ds-course .prog-card__fill { height: 100%; background: var(--gold); border-radius: 3px; }
.ds-course .prog-card__foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--hint); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ds-course .prog-card__foot b { color: var(--fg); }
.ds-course .prog-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 4px; }
.ds-course .prog-card__stat { font-family: var(--mono); }
.ds-course .prog-card__stat b { display: block; font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -.02em; line-height: 1; }
.ds-course .prog-card__stat span { font-size: 9px; color: var(--hint); letter-spacing: .08em; text-transform: uppercase; }

/* Nav sticky de niveles (equivalente a mod-nav, pero para 3 niveles) */
.ds-course .lvl-nav { position: sticky; top: 66px; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); }
.ds-course .lvl-nav::-webkit-scrollbar { display: none; }
.ds-course .lvl-nav__inner { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; }
.ds-course .lvl-nav__item { padding: 15px 22px; font-family: var(--sans); font-weight: 400; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; }
.ds-course .lvl-nav__item svg { width: 17px; height: 17px; color: var(--hint); transition: color .15s; flex-shrink: 0; }
.ds-course .lvl-nav__item:hover { color: var(--fg); }
.ds-course .lvl-nav__item:hover svg { color: var(--gold); }
.ds-course .lvl-nav__item.is-on { color: var(--fg); font-weight: 500; border-bottom-color: var(--gold); }
.ds-course .lvl-nav__item.is-on svg { color: var(--gold); }
.ds-course .lvl-nav__count { font-family: var(--mono); font-size: 10px; color: var(--hint); letter-spacing: .06em; }
.ds-course .lvl-nav__item.is-on .lvl-nav__count { color: var(--gold); }

/* Sección de nivel: sidebar sticky (info) + track de lecciones. Jorge
   (feedback INDEX-V2 auditoría): "hay mas espacio arriba y abajo, no
   todo tan comprimido" vs guitarra-index-v2.html — más aire vertical
   entre niveles y dentro de cada lección de la lista. */
.ds-course .lvl { display: grid; grid-template-columns: 320px 1fr; gap: 44px; align-items: start; margin-bottom: 0; padding: clamp(28px, 4vw, 40px) 0; }
@media (max-width: 900px) { .ds-course .lvl { grid-template-columns: 1fr; gap: 28px; } }
.ds-course .lvl-info { position: sticky; top: 116px; }
@media (max-width: 900px) { .ds-course .lvl-info { position: static; } }
.ds-course .lvl-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.ds-course .lvl-title { font-family: var(--sans); font-weight: 300; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.025em; line-height: 1.08; margin: 0 0 18px; }
.ds-course .lvl-title em { font-style: normal; color: var(--gold); }
.ds-course .lvl-desc { font-size: 15px; color: var(--muted); line-height: 1.68; margin: 0 0 22px; }
.ds-course .lvl-outcome { background: color-mix(in oklab, var(--gold) 6%, var(--card)); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 15px 17px; margin: 0 0 22px; }
.ds-course .lvl-outcome__label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.ds-course .lvl-outcome__text { font-size: 12.5px; color: var(--fg); line-height: 1.55; margin: 0; }
.ds-course .lvl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
.ds-course .lvl-chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted); background: var(--surf); border: 1px solid var(--line-s); padding: 5px 10px; border-radius: var(--r-pill); }
.ds-course .lvl-song { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 17px; transition: var(--t); text-decoration: none; color: inherit; }
.ds-course .lvl-song:hover { border-color: color-mix(in oklab, var(--gold) 30%, transparent); }
.ds-course .lvl-song__icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--gold) 12%, transparent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-course .lvl-song__icon svg { width: 16px; height: 16px; color: var(--gold); }
.ds-course .lvl-song__label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 2px; }
.ds-course .lvl-song__name { font-size: 12.5px; font-weight: 500; color: var(--fg); margin: 0; }
.ds-course .lvl-song__arrow { font-family: var(--mono); font-size: 12px; color: var(--hint); margin-left: auto; transition: var(--t); flex-shrink: 0; }
.ds-course .lvl-song:hover .lvl-song__arrow { color: var(--gold); transform: translateX(3px); }

/* Track de lecciones (fila compacta, distinto del .steps grande de lección) */
.ds-course .lvl-track-wrap { display: flex; flex-direction: column; gap: 12px; }
.ds-course .lvl-track { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ds-course .lvl-lesson { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 16px; padding: 19px 22px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .12s; }
.ds-course .lvl-track li:last-child .lvl-lesson { border-bottom: none; }
.ds-course .lvl-lesson:hover { background: color-mix(in oklab, var(--gold) 4%, var(--card)); }
.ds-course .lvl-lesson__num { font-family: var(--sans); font-size: 20px; font-weight: 300; letter-spacing: -.03em; color: var(--gold); line-height: 1; text-align: center; }
.ds-course .lvl-lesson__info { min-width: 0; }
.ds-course .lvl-lesson__title { font-size: 13.5px; font-weight: 500; color: var(--fg); margin: 0 0 4px; line-height: 1.35; }
.ds-course .lvl-lesson__lede { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Estrellas de puntaje por lección (5 = 5 ejercicios): reemplaza los
   minutos (Jorge, auditoría de nivel — "sacar los minutos, agregar las
   estrellas que corresponde"). Doradas sólidas = punto ganado, outline =
   sin punto. Solo se renderiza logueado (mismo gate que el resto del
   progreso — docs/cursos-online.md §8). */
.ds-course .lvl-lesson__stars { display: flex; gap: 2px; white-space: nowrap; }
.ds-course .lvl-star { width: 12px; height: 12px; color: var(--line-s); }
.ds-course .lvl-star svg { width: 100%; height: 100%; display: block; }
.ds-course .lvl-star.is-on { color: var(--gold); }
.ds-course .lvl-star.is-on svg { fill: currentColor; }
.ds-course .lvl-lesson__badge { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.ds-course .lvl-lesson[data-done] .lvl-lesson__num { color: var(--green, #1D9E75); }
.ds-course .lvl-lesson[data-done] .lvl-lesson__title { color: var(--muted); }
@media (max-width: 560px) { .ds-course .lvl-lesson { grid-template-columns: 36px 1fr; } .ds-course .lvl-lesson__stars, .ds-course .lvl-lesson__badge { display: none; } }

.ds-course .lvl-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* Mini-certificado (aside del hero del índice) — mismo lenguaje visual que
   el aside de doresol-examen-banner.js (score-motif), en miniatura. Solo
   se muestra si ya rindió el examen del ÚLTIMO nivel (el final del curso).
   Negro/fg si aprobó, rojo (mismo tono que dseb--noaprobado) si no. */
.ds-course .cert-mini { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 14px; }
.ds-course .cert-mini__ico { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-course .cert-mini__ico svg { width: 17px; height: 17px; }
.ds-course .cert-mini__body { min-width: 0; flex: 1; }
.ds-course .cert-mini__label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 3px; }
.ds-course .cert-mini__note { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.4; }
.ds-course .cert-mini__score { font-family: var(--mono); font-size: 15px; font-weight: 600; flex-shrink: 0; }
.ds-course .cert-mini--pass .cert-mini__ico { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
.ds-course .cert-mini--pass .cert-mini__label,
.ds-course .cert-mini--pass .cert-mini__score { color: var(--fg); }
.ds-course .cert-mini--fail .cert-mini__ico { background: color-mix(in oklab, #c2553d 12%, transparent); color: #c2553d; }
.ds-course .cert-mini--fail .cert-mini__label,
.ds-course .cert-mini--fail .cert-mini__score { color: #c2553d; }

/* Banner de examen de nivel — a todo el ancho del bloque (sale de la
   grilla sidebar+track), cerrando cada nivel. Jorge: "banner de examen,
   tiene que estar a todo lo ancho, finalizar el bloque de nivel". */
.ds-course .lvl-exam-banner { margin: 0 0 clamp(28px, 4vw, 40px); }

/* ─── CATÁLOGO — "Rutas de escucha" (cronológica + por tema/nivel) —
   bespoke Claude Design (handoff "DoReSol Catalogo Blues offline").
   Contenido editorial por curso en course-meta.php (`rutas`). Scopeado. ─── */
.ds-course .routes__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); position: relative; overflow: hidden; margin: 0 0 28px; }
.ds-course .routes__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gold); }
.ds-course .routes__label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.ds-course .routes__label svg { width: 15px; height: 15px; }
.ds-course .routes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 740px) { .ds-course .routes__grid { grid-template-columns: 1fr; gap: 18px; } }
.ds-course .route__name { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 7px; letter-spacing: -.01em; }
.ds-course .route__name em { font-style: normal; color: var(--gold); font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; }
.ds-course .route__text { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }
.ds-course .route__text strong { color: var(--fg); font-weight: 500; }

.ds-course .topbar {position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--bg) 90%,transparent);backdrop-filter:saturate(160%)blur(14px);-webkit-backdrop-filter:saturate(160%)blur(14px);border-bottom:1px solid var(--line);}
.ds-course .topbar__inner {max-width:1000px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:52px;display:flex;align-items:center;gap:8px;}
.ds-course .topbar__logo {font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.01em;color:var(--fg);}
.ds-course .topbar__logo i {color:var(--gold);font-style:normal;font-weight:600;}
.ds-course .topbar__sep {color:var(--hint);font-size:12px;margin:0 2px;}
.ds-course .topbar__crumb {font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--hint);}
.ds-course .topbar__crumb a:hover {color:var(--gold);}
.ds-course .topbar__crumb b {color:var(--fg);}
.ds-course .topbar__spacer {flex:1;}
.ds-course .topbar__theme {width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--line-s);color:var(--hint);display:flex;align-items:center;justify-content:center;font-size:13px;transition:var(--t);}
.ds-course .topbar__theme:hover {border-color:var(--gold);color:var(--gold);}
.ds-course .hero {border-bottom:1px solid var(--line);background:var(--surf);overflow:hidden;position:relative;}
.ds-course .hero::after {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 400px at 95% 50%,color-mix(in oklab,var(--gold) 6%,transparent),transparent 60%);}
.ds-course .hero__inner {max-width:1120px;margin:0 auto;padding:clamp(44px,5.5vw,72px) clamp(20px,4vw,48px);display:grid;grid-template-columns:1fr 240px;gap:64px;align-items:start;position:relative;z-index:1;}
@media(max-width:800px) {
  .ds-course .hero__inner {grid-template-columns:1fr;gap:32px;}
}
.ds-course .hero__crumbs {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
.ds-course .crumb {display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-s);color:var(--muted);}
.ds-course .crumb svg {width:13px;height:13px;}
.ds-course /* Pill blanca sólida: el fondo NUNCA cambia con el tema, .ds-course así que el texto
   tampoco puede — `--ink` sí cambia con el tema (piensa "texto sobre dorado", .ds-course no "texto sobre blanco fijo") y en dark queda casi blanco sobre blanco =
   ilegible. Texto siempre oscuro acá. */
.crumb--course {color:#141412;background:#fff;border-color:#fff;font-weight:600;}
[data-theme="dark"] .ds-course .crumb--course {color:#141412;background:#fff;border-color:#fff;}
.ds-course .crumb--level {color:var(--gold);background:transparent;border-color:var(--gold);}
.ds-course .hero__head {display:flex;align-items:center;gap:20px;margin:0 0 26px;}
.ds-course .hero__num {font-family:var(--sans);font-weight:300;font-style:italic;font-size:clamp(48px,5.8vw,70px);line-height:1;letter-spacing:-.02em;color:var(--gold);position:relative;padding-right:20px;flex-shrink:0;}
.ds-course .hero__num::after {content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:50px;background:var(--line);}
.ds-course .hero__head-meta {min-width:0;}
.ds-course .hero__kicker {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;}
.ds-course .hero__kicker-sub {font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--hint);margin:0;}
@media(max-width:560px) {
  .ds-course .hero__head {gap:14px;}
  .ds-course .hero__num {font-size:42px;padding-right:14px;}
  .ds-course .hero__num::after {height:42px;}
}
.ds-course .hero__title {font-family:var(--sans);font-weight:300;font-size:clamp(40px,6vw,72px);letter-spacing:-.04em;line-height:.95;margin:0 0 20px;text-wrap:balance;}
.ds-course .hero__title em {font-style:normal;color:var(--gold);}
.ds-course .hero__lede {font-size:15px;color:var(--muted);line-height:1.72;max-width:52ch;margin:0 0 28px;text-wrap:pretty;}
.ds-course .hero__chips {display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.ds-course .hero__chip {font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);background:var(--card);border:1px solid var(--line-s);padding:5px 12px;border-radius:var(--r-pill);display:flex;align-items:center;gap:6px;}
.ds-course .hero__chip svg {width:12px;height:12px;color:var(--gold);}
.ds-course .hero__start {display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:12px 24px;border-radius:var(--r-pill);transition:var(--t);cursor:pointer;border:none;}
.ds-course .hero__start:hover {background:var(--gold-h);}
.ds-course .hero__start:disabled {opacity:.7;cursor:default;}
.ds-course .hero__side {display:flex;flex-direction:column;}
.ds-course .mod-track {background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;}
.ds-course .mod-track__label {font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);margin:0 0 16px;}
.ds-course .mod-track__list {display:flex;flex-direction:column;gap:6px;}
.ds-course .mod-track__item {display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;color:var(--muted);padding:4px 0;}
.ds-course .mod-track__item.is-current {color:var(--gold);font-weight:500;}
.ds-course .mod-track__dot {width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line-s);background:transparent;flex-shrink:0;box-sizing:border-box;}
.ds-course .mod-track__item.is-done .mod-track__dot {border-color:var(--gold);background:color-mix(in oklab,var(--gold) 55%,transparent);}
.ds-course .mod-track__item.is-current .mod-track__dot {position:relative;border-color:var(--gold);background:var(--gold);}
.ds-course .mod-track__item.is-current .mod-track__dot::after {content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--gold);animation:mt-pulse 1.9s ease-out infinite;}
@keyframes mt-pulse{0%{transform:scale(.7);opacity:.7;}100%{transform:scale(2.7);opacity:0;}}
@media (prefers-reduced-motion:reduce) {
  .ds-course .mod-track__item.is-current .mod-track__dot::after {animation:none;}
}
.ds-course .score-card {background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;margin-bottom:16px;position:relative;overflow:hidden;}
.ds-course .score-card.is-complete {border-color:color-mix(in oklab,var(--gold) 45%,transparent);background:var(--ink);}
.ds-course .score-card.is-complete .score-card__label {color:color-mix(in oklab,var(--cream) 48%,transparent);}
.ds-course .score-card.is-complete .score-card__pts {color:color-mix(in oklab,var(--cream) 60%,transparent);}
.ds-course .score-card.is-complete .score-card__note {color:color-mix(in oklab,var(--cream) 55%,transparent);}
.ds-course .score-card.is-complete .score-card__bar {background:color-mix(in oklab,var(--cream) 14%,transparent);}
.ds-course .score-card.is-complete .score-card__star:not(.is-on) {color:color-mix(in oklab,var(--cream) 16%,transparent);}
.ds-course .score-card__top {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.ds-course .score-card__label {font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hint);}
.ds-course .score-card__pts {font-family:var(--mono);font-size:13px;color:var(--muted);display:flex;align-items:baseline;gap:4px;}
.ds-course .score-card__pts b {font-size:22px;font-weight:600;color:var(--gold);letter-spacing:-.02em;}
.ds-course .score-card__stars {display:flex;gap:8px;margin-bottom:12px;}
.ds-course .score-card__star {width:26px;height:26px;color:var(--line-s);transition:transform .4s cubic-bezier(.34,1.56,.64,1),color .3s;}
.ds-course .score-card__star svg {width:100%;height:100%;display:block;}
.ds-course .score-card__star.is-on {color:var(--gold);transform:scale(1.12) rotate(-4deg);}
.ds-course .score-card__star.is-on svg {fill:currentColor;}
.ds-course .score-card__bar {height:5px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;margin-bottom:12px;}
.ds-course .score-card__fill {height:100%;width:0;background:linear-gradient(90deg,var(--gold-h),var(--gold));border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1);}
.ds-course .score-card__note {font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--muted);margin:0;}
.ds-course .score-card__trophy {display:none;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in oklab,var(--cream) 12%,transparent);}
.ds-course .score-card.is-complete .score-card__trophy {display:flex;}
.ds-course .score-card__medal {width:42px;height:42px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ds-course .score-card__medal svg {width:23px;height:23px;color:var(--ink);}
.ds-course .score-card__trophy span {font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gold);}
.ds-course .sec-nav {position:sticky;top:52px;z-index:50;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.ds-course .sec-nav::-webkit-scrollbar {display:none;}
.ds-course .sec-nav__inner {max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:flex;}
.ds-course .sec-nav__item {display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:400;font-size:14px;color:var(--muted);padding:16px 22px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;}
.ds-course .sec-nav__item svg {width:18px;height:18px;color:var(--hint);transition:color .15s;flex-shrink:0;}
.ds-course .sec-nav__item:hover {color:var(--fg);}
.ds-course .sec-nav__item:hover svg {color:var(--gold);}
.ds-course .sec-nav__item.is-on {color:var(--fg);font-weight:500;border-bottom-color:var(--gold);}
.ds-course .sec-nav__item.is-on svg {color:var(--gold);}
.ds-course .body {max-width:1120px;margin:0 auto;padding:clamp(48px,5.5vw,72px) clamp(20px,4vw,48px) 96px;}
.ds-course .section {padding-bottom:52px;border-bottom:1px solid var(--line);margin-bottom:52px;}
.ds-course .section:last-child {border-bottom:none;}
.ds-course .section__label {font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;}
.ds-course .section__title {font-family:var(--sans);font-weight:300;font-size:clamp(26px,4vw,38px);letter-spacing:-.025em;line-height:1.05;margin:0 0 24px;}
.ds-course .section__title em {font-style:normal;color:var(--gold);}
.ds-course .prose {font-size:15px;color:var(--muted);line-height:1.75;margin:0 0 22px;}
.ds-course .prose p {margin:0 0 16px;}
.ds-course .prose p:last-child {margin:0;}
.ds-course .prose strong {color:var(--fg);font-weight:500;}
.ds-course .prose em {font-style:italic;color:var(--fg);}
.ds-course .diagram {background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px;margin:0 0 22px;overflow-x:auto;}
.ds-course .diagram__label {font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;}
.ds-course .diagram__caption {font-family:var(--mono);font-size:11px;color:var(--hint);margin:12px 0 0;line-height:1.5;}
.ds-course .def {background:color-mix(in oklab,var(--gold) 6%,var(--card));border-left:3px solid var(--gold);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:16px 18px;margin:0 0 22px;}
.ds-course .def__term {font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;}
.ds-course .def__body {font-size:14px;color:var(--fg);line-height:1.65;margin:0;}
.ds-course .table-wrap {overflow-x:auto;margin:0 0 22px;}
.ds-course table {width:100%;border-collapse:collapse;font-size:14px;}
.ds-course th {font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--hint);padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);}
.ds-course td {padding:12px;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.5;}
.ds-course tr:last-child td {border-bottom:none;}
.ds-course td b {color:var(--fg);font-weight:500;}
.ds-course .prog {display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;justify-content:center;}
.ds-course .prog__chord {flex:1;min-width:104px;border-radius:var(--r-md);padding:18px 14px;text-align:center;cursor:pointer;transition:var(--t);border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:4px;}
.ds-course .prog__chord:hover {transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 24px -16px var(--gold);}
.ds-course .prog__chord.is-i {background:var(--ink);border-color:var(--ink);}
.ds-course .prog__chord.is-i .prog__name, .ds-course .prog__chord.is-i .prog__full {color:var(--cream);}
.ds-course .prog__chord.is-i .prog__roman {color:var(--gold);}
.ds-course .prog__chord.is-v {background:var(--gold);border-color:var(--gold);}
.ds-course .prog__chord.is-v .prog__roman, .ds-course .prog__chord.is-v .prog__name, .ds-course .prog__chord.is-v .prog__full {color:var(--ink);}
.ds-course .prog__roman {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--gold);}
.ds-course .prog__name {font-family:var(--sans);font-size:32px;font-weight:300;color:var(--fg);line-height:1.05;letter-spacing:-.02em;}
.ds-course .prog__full {font-family:var(--mono);font-size:10px;color:var(--muted);}
.ds-course .prog__chord.is-playing {box-shadow:0 0 0 2px var(--gold);}
.ds-course .prog__arrow {display:flex;align-items:center;color:var(--hint);font-family:var(--mono);font-size:18px;}
@media(max-width:600px) {
  .ds-course .prog__arrow {display:none;}
}
.ds-course .section--quiz {background:color-mix(in oklab,var(--gold) 4.5%,var(--surf));border:1px solid color-mix(in oklab,var(--gold) 16%,var(--line));border-radius:22px;padding:clamp(28px,4vw,52px);margin-bottom:8px;}
.ds-course .quiz-intro {margin-bottom:30px;}
.ds-course .quiz-intro .section__title {margin-bottom:18px;}
.ds-course .quiz-intro__text {font-size:15px;color:var(--muted);line-height:1.72;max-width:60ch;margin:0 0 22px;text-wrap:pretty;}
.ds-course .quiz-intro__meta {display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.ds-course .quiz-meta-item {display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);}
.ds-course .quiz-meta-item svg {width:14px;height:14px;color:var(--gold);}
.ds-course .quiz-intro__meta .exercises-dots {margin-left:auto;padding-bottom:0;}
.ds-course .exercises-dots {display:flex;gap:6px;padding-bottom:6px;}
.ds-course .exercises-dot {width:8px;height:8px;border-radius:50%;border:1.5px solid var(--hint);transition:var(--t);}
.ds-course .exercises-dot.done {background:var(--gold-h);border-color:var(--gold-h);}
.ds-course .exercises-dot.current {background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 20%,transparent);}
.ds-course .ej {background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px 24px;margin:0 0 16px;transition:border-color .25s,box-shadow .25s;}
.ds-course .ej.is-ok {border-color:color-mix(in oklab,var(--gold) 40%,transparent);box-shadow:0 1px 0 color-mix(in oklab,var(--gold) 18%,transparent);}
.ds-course .ej.is-no {border-color:color-mix(in oklab,var(--orange) 35%,transparent);}
.ds-course .ej__top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.ds-course .ej__badge {display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.ds-course .ej__badge-ico {width:24px;height:24px;border-radius:var(--r-sm);background:color-mix(in oklab,var(--gold) 14%,transparent);display:flex;align-items:center;justify-content:center;}
.ds-course .ej__badge-ico svg {width:13px;height:13px;color:var(--gold);}
.ds-course .ej__worth {display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--hint);padding:5px 10px;border-radius:var(--r-pill);border:1px dashed var(--line-s);transition:var(--t);}
.ds-course .ej__worth svg {width:12px;height:12px;}
.ds-course .ej.is-ok .ej__worth {color:var(--gold);border-style:solid;border-color:color-mix(in oklab,var(--gold) 35%,transparent);background:color-mix(in oklab,var(--gold) 10%,transparent);}
.ds-course .ej.is-no .ej__worth {color:var(--orange);border-style:solid;border-color:color-mix(in oklab,var(--orange) 30%,transparent);}
.ds-course .ej__q {font-size:17px;font-weight:500;color:var(--fg);line-height:1.5;letter-spacing:-.01em;margin:0 0 18px;text-wrap:pretty;}
.ds-course .ej__opts {display:flex;flex-direction:column;gap:10px;}
.ds-course .opt {display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);text-align:left;font-size:14.5px;color:var(--fg);transition:var(--t);cursor:pointer;position:relative;}
.ds-course .opt:hover:not([disabled]) {border-color:color-mix(in oklab,var(--gold) 55%,var(--line));background:color-mix(in oklab,var(--gold) 4%,var(--card));}
.ds-course .opt__key {font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-s);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t);}
.ds-course .opt:hover:not([disabled]) .opt__key {border-color:var(--gold);color:var(--gold);}
.ds-course .opt__t {flex:1;line-height:1.4;}
.ds-course .opt__mark {width:22px;height:22px;flex-shrink:0;opacity:0;transition:opacity .2s;}
.ds-course .opt__mark svg {width:100%;height:100%;display:block;}
.ds-course .opt[disabled] {cursor:default;}
.ds-course .opt.correct {border-color:var(--gold);background:color-mix(in oklab,var(--gold) 10%,var(--card));}
.ds-course .opt.correct .opt__key {background:var(--gold);border-color:var(--gold);color:var(--ink);}
.ds-course .opt.correct .opt__mark {opacity:1;color:var(--gold);}
.ds-course .opt.incorrect {border-color:var(--orange);background:color-mix(in oklab,var(--orange) 8%,var(--card));}
.ds-course .opt.incorrect .opt__key {background:var(--orange);border-color:var(--orange);color:#fff;}
.ds-course .opt.incorrect .opt__mark {opacity:1;color:var(--orange);}
.ds-course .opt.dimmed {opacity:.5;}
.ds-course .ej__fb {display:none;margin-top:16px;padding:15px 18px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.6;color:var(--fg);}
.ds-course .ej__fb.show {display:flex;gap:13px;align-items:flex-start;}
.ds-course .ej__fb-ico {width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ds-course .ej__fb-ico svg {width:18px;height:18px;}
.ds-course .ej__fb-body {flex:1;}
.ds-course .ej__fb-title {font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 5px;display:flex;align-items:center;gap:8px;}
.ds-course .ej__fb-pts {font-size:9px;padding:2px 7px;border-radius:var(--r-pill);letter-spacing:.06em;}
.ds-course .ej__fb--ok {background:color-mix(in oklab,var(--gold) 8%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 22%,transparent);}
.ds-course .ej__fb--ok .ej__fb-ico {background:var(--gold);color:var(--ink);}
.ds-course .ej__fb--ok .ej__fb-title {color:var(--gold);}
.ds-course .ej__fb--ok .ej__fb-pts {background:var(--gold);color:var(--ink);}
.ds-course .ej__fb--no {background:color-mix(in oklab,var(--orange) 7%,var(--card));border:1px solid color-mix(in oklab,var(--orange) 20%,transparent);}
.ds-course .ej__fb--no .ej__fb-ico {background:var(--orange);color:#fff;}
.ds-course .ej__fb--no .ej__fb-title {color:var(--orange);}
.ds-course .ej__fb--no .ej__fb-pts {background:color-mix(in oklab,var(--orange) 16%,transparent);color:var(--orange);}
@keyframes ej-pop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.18);}100%{transform:scale(1);opacity:1;}}
.ds-course .ej__fb.show .ej__fb-ico {animation:ej-pop .45s cubic-bezier(.34,1.56,.64,1) both;}
.ds-course .complete-section {display:flex;align-items:center;gap:18px;padding:24px 28px;background:var(--card);border:1px solid color-mix(in oklab,var(--gold) 26%,transparent);border-radius:var(--r-lg);margin-top:8px;transition:var(--t);}
.ds-course .complete-section.is-done {border-color:color-mix(in oklab,var(--gold) 50%,transparent);background:var(--night);}
.ds-course .complete-section__ico {width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--gold) 16%,transparent);transition:var(--t);}
.ds-course .complete-section__ico svg {width:28px;height:28px;color:var(--gold);}
.ds-course .complete-section.is-done .complete-section__ico {background:var(--gold);}
.ds-course .complete-section.is-done .complete-section__ico svg {color:var(--ink);}
.ds-course .complete-section__text {flex:1;}
.ds-course .complete-section__title {font-size:15px;font-weight:500;color:var(--fg);margin:0 0 3px;}
.ds-course .complete-section.is-done .complete-section__title {color:var(--cream);}
.ds-course .complete-section__note {font-family:var(--mono);font-size:11px;color:var(--muted);}
.ds-course .complete-section.is-done .complete-section__note {color:color-mix(in oklab,var(--cream) 58%,transparent);}
.ds-course .complete-section__score {display:none;align-items:center;gap:11px;margin-top:11px;}
.ds-course .complete-section.is-done .complete-section__score {display:flex;}
.ds-course .cscore__stars {display:inline-flex;gap:5px;}
.ds-course .cscore__stars svg {width:15px;height:15px;color:color-mix(in oklab,var(--cream) 20%,transparent);transition:color .35s,transform .35s cubic-bezier(.34,1.56,.64,1);}
.ds-course .cscore__stars svg.on {color:var(--gold);fill:currentColor;transform:scale(1.12);}
.ds-course .cscore__pts {font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:color-mix(in oklab,var(--cream) 55%,transparent);}
.ds-course .cscore__pts b {color:var(--gold);font-size:13px;font-weight:600;}
.ds-course .btn-complete {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:var(--ink);padding:12px 24px;border-radius:var(--r-pill);transition:var(--t);cursor:pointer;}
.ds-course .btn-complete:hover {background:var(--gold-h);}
.ds-course .btn-complete:disabled {background:var(--gold-h);opacity:.75;cursor:default;}
.ds-course .btn-complete.is-done {background:transparent;border:1px solid var(--gold);color:var(--gold);opacity:1;display:inline-flex;align-items:center;gap:9px;}
.ds-course .btn-complete.is-done svg {width:15px;height:15px;}
.ds-course .pagination {display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:48px;border-top:1px solid var(--line);}
.ds-course .pag-link {display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-md);color:inherit;transition:var(--t);background:var(--card);}
.ds-course .pag-link:hover {border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 28px -16px rgba(20,20,18,.4);}
.ds-course .pag-link__arrow {width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line-s);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t);}
.ds-course .pag-link__arrow svg {width:18px;height:18px;color:var(--muted);transition:var(--t);}
.ds-course .pag-link:hover .pag-link__arrow {border-color:var(--gold);background:var(--gold);}
.ds-course .pag-link:hover .pag-link__arrow svg {color:var(--ink);}
.ds-course .pag-link__body {display:flex;flex-direction:column;gap:3px;min-width:0;}
.ds-course .pag-link__dir {font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.ds-course .pag-link__num {font-family:var(--mono);font-size:10px;color:var(--hint);}
.ds-course .pag-link__title {font-size:15px;font-weight:500;color:var(--fg);line-height:1.3;letter-spacing:-.01em;}
.ds-course .pag-link.is-next {flex-direction:row-reverse;text-align:right;}
.ds-course .pag-link.is-next .pag-link__body {align-items:flex-end;}
.ds-course .section__lead {font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--fg);font-weight:300;margin:-6px 0 24px;max-width:46em;}
.ds-course .section__lead em {font-style:italic;color:var(--gold);}
.ds-course .steps {list-style:none;margin:24px 0;padding:0;}
.ds-course .step {display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line);}
.ds-course .step:last-child {border-bottom:1px solid var(--line);}
.ds-course .step__no {width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--gold);border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);}
.ds-course .step__body {flex:1;}
.ds-course .step__title {font-size:16px;font-weight:500;color:var(--fg);margin:0 0 4px;}
.ds-course .step__text {font-size:15px;line-height:1.55;color:var(--muted);margin:0;}
.ds-course .recap {background:color-mix(in oklab,var(--gold) 8%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 24%,transparent);border-radius:var(--r-lg);padding:26px 28px;margin:28px 0;}
.ds-course .recap__title {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.ds-course .recap__title svg {width:15px;height:15px;}
.ds-course .recap__list {list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.ds-course .recap__item {display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;color:var(--fg);}
.ds-course .recap__item::before {content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:9px;}
.ds-course .profesor {display:grid;grid-template-columns:46px 1fr;gap:16px;padding:22px 24px 22px 22px;background:color-mix(in oklab,var(--gold) 15%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 38%,transparent);border-left:4px solid var(--gold);border-radius:var(--r-lg);margin:24px 0;}
.ds-course .profesor__ico {width:46px;height:46px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 4px 14px -6px var(--gold);}
.ds-course .profesor__ico svg {width:22px;height:22px;}
.ds-course .profesor__body {align-self:center;}
.ds-course .profesor__label {font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;}
.ds-course .profesor__text {font-size:15px;color:var(--fg);line-height:1.68;margin:0;}
.ds-course .profesor__text strong {color:var(--gold);font-weight:600;}
.ds-course .deepen {background:color-mix(in oklab,var(--gold) 7%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 22%,transparent);border-radius:var(--r-lg);padding:26px 30px;margin:8px 0 64px;}
.ds-course .deepen__title {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;display:flex;align-items:center;gap:9px;}
.ds-course .deepen__title svg {width:15px;height:15px;flex-shrink:0;}
.ds-course .deepen p {font-size:15px;line-height:1.72;color:var(--muted);margin:0 0 14px;}
.ds-course .deepen p:last-child {margin:0;}
.ds-course .deepen strong {color:var(--fg);font-weight:500;}
.ds-course .deepen em {color:var(--gold);font-style:italic;}
.ds-course .cancion-link {display:flex;align-items:center;gap:18px;margin:24px 0 0;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);transition:var(--t);}
.ds-course .cancion-link:hover {border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 26px -16px var(--gold);}
.ds-course .cancion-link__ico {width:46px;height:46px;border-radius:var(--r-md);flex-shrink:0;background:color-mix(in oklab,var(--gold) 14%,transparent);display:flex;align-items:center;justify-content:center;color:var(--gold);}
.ds-course .cancion-link__ico svg {width:22px;height:22px;}
.ds-course .cancion-link__body {flex:1;}
.ds-course .cancion-link__kicker {font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 4px;}
.ds-course .cancion-link__title {font-size:15px;font-weight:500;color:var(--fg);margin:0 0 2px;}
.ds-course .cancion-link__meta {font-family:var(--mono);font-size:11px;color:var(--muted);margin:0;}
.ds-course .cancion-link__cta {font-family:var(--mono);font-size:11px;color:var(--gold);white-space:nowrap;flex-shrink:0;}
@media(max-width:680px) {
  .ds-course .section {padding-bottom:40px;margin-bottom:40px;}
  .ds-course .section__title {font-size:clamp(24px,7vw,32px);}
  .ds-course .diagram {padding:16px;}
  .ds-course .ej {padding:18px 18px 20px;}
  .ds-course .opt {font-size:13.5px;padding:11px 13px;}
  .ds-course .section--quiz {padding:22px 18px;}
  .ds-course .table-wrap table {min-width:560px;}
  .ds-course .pagination {grid-template-columns:1fr;}
  .ds-course .pag-link, .ds-course .pag-link.is-next {flex-direction:row;text-align:left;}
  .ds-course .pag-link.is-next .pag-link__body {align-items:flex-start;}
}
.ds-course .tab {background:linear-gradient(180deg,#241c14,#160f09);border-radius:var(--r-lg);padding:22px 24px;margin:24px 0;overflow-x:auto;}
[data-theme="dark"] .ds-course .tab {background:linear-gradient(180deg,#1d160f,#100b07);}
.ds-course .tab__label {font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;line-height:1.5;}
.ds-course .tab pre {font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--cream);margin:0;white-space:pre;}
.ds-course .tab pre b {color:var(--gold);font-weight:600;}
@media(max-width:600px) {
  .ds-course .tab pre {font-size:11px;}
}
.ds-course .module-done {display:none;align-items:center;gap:22px;margin-top:32px;padding:0 30px;min-height:140px;background:var(--gold);border:1px solid var(--gold-h);border-radius:var(--r-lg);}
.ds-course .module-done.show {display:grid;grid-template-columns:1fr auto;}
.ds-course .module-done__main {display:flex;align-items:center;gap:18px;padding:24px 0;}
.ds-course .module-done__badge {width:56px;height:56px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 20px -8px rgba(20,20,18,.5);}
.ds-course .module-done__badge svg {width:28px;height:28px;color:var(--ink);}
.ds-course .module-done__title {font-size:18px;font-weight:600;color:var(--cream);margin:0 0 4px;letter-spacing:-.01em;}
.ds-course .module-done__note {font-family:var(--mono);font-size:11px;color:color-mix(in oklab,var(--cream) 65%,transparent);margin:0;}
.ds-course .btn-module-next {display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--cream);color:var(--cream);padding:13px 22px;border-radius:var(--r-pill);transition:var(--t);white-space:nowrap;}
.ds-course .btn-module-next:hover {background:var(--cream);color:var(--ink);}
.ds-course .btn-module-next svg {width:15px;height:15px;}
@media(max-width:600px) {
  .ds-course .module-done.show {grid-template-columns:1fr;}
  .ds-course .module-done {padding:24px;}
  .ds-course .module-done__main {padding:0;}
}