/* ═══════════════════════════════════════════════════════════════
   MANUAL · las 21 páginas de referencia de Claude Code
   ───────────────────────────────────────────────────────────────
   Texto largo, técnico y para leer entero. No es una ficha de venta:
   aquí manda la legibilidad y nada más. Usa los tokens del mundo
   oscuro (void/paper/brass) y no introduce ninguno nuevo.
   ═══════════════════════════════════════════════════════════════ */

/* ── Índice ──────────────────────────────────────────────────── */
.idx{
  max-width:900px;margin:0 auto;
  padding:5rem clamp(1.2rem,5vw,4.5rem) 7rem;
  background:var(--void);
}
.idx h1{color:var(--paper);margin:.4rem 0 1.2rem}
.idx__dek{color:var(--muted);font-size:1.08rem;line-height:1.6;max-width:60ch}
.idx__datos{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
.idx__lista{margin-top:2.5rem;display:grid}
.idx__fila{
  display:grid;grid-template-columns:3rem 1fr;gap:.2rem 1.2rem;
  padding:1.3rem 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background 200ms var(--e),padding-left 200ms var(--e);
}
.idx__fila:hover{background:var(--void-2);padding-left:.8rem}
.idx__n{
  font-family:var(--mono);font-size:.78rem;color:var(--brass);
  padding-top:.2rem;
}
.idx__t{color:var(--paper);font-size:1.06rem;font-weight:500}
.idx__d{grid-column:2;color:var(--muted);font-size:.92rem;line-height:1.55}

/* ── Página de módulo ────────────────────────────────────────── */
.mod{
  max-width:760px;margin:0 auto;             /* ~68ch con este cuerpo */
  padding:4rem clamp(1.2rem,5vw,3rem) 6rem;
  background:var(--void);
}
.mod__cuerpo{color:var(--paper)}
.mod__cuerpo h1{
  font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.15;
  margin:1.6rem 0 1.4rem;
}
.mod__cuerpo h2{
  font-size:clamp(1.25rem,2.6vw,1.55rem);line-height:1.25;
  margin:3.2rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.mod__cuerpo h3{font-size:1.08rem;margin:2.2rem 0 .8rem;color:var(--paper)}
.mod__cuerpo p,
.mod__cuerpo li{
  color:var(--muted);font-size:1.05rem;line-height:1.72;
}
.mod__cuerpo strong{color:var(--paper);font-weight:600}
.mod__cuerpo a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.mod__cuerpo ul,.mod__cuerpo ol{padding-left:1.3rem;margin:1.1rem 0}
.mod__cuerpo li{margin:.5rem 0}
.mod__cuerpo li::marker{color:var(--brass-dim)}
.mod__cuerpo hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

/* El blockquote de entrada de cada módulo: para quién es y qué resuelve. */
.mod__cuerpo blockquote{
  margin:0 0 2rem;padding:1.2rem 1.4rem;
  background:var(--void-2);border-left:2px solid var(--brass-dim);
}
.mod__cuerpo blockquote p{margin:.35rem 0;font-size:.98rem}

/* Código. El material está lleno de comandos: tienen que poder copiarse y
   no deben desbordar en móvil, que es donde se lee la mitad de esto. */
.mod__cuerpo pre{
  background:var(--void-3);border:1px solid var(--line);
  padding:1.1rem 1.2rem;margin:1.4rem 0;
  overflow-x:auto;border-radius:2px;
}
.mod__cuerpo pre code{
  font-family:var(--mono);font-size:.86rem;line-height:1.65;
  color:var(--paper);white-space:pre;
}
.mod__cuerpo :not(pre)>code{
  font-family:var(--mono);font-size:.88em;
  background:var(--void-3);border:1px solid var(--line);
  padding:.12em .38em;border-radius:2px;color:var(--paper);
  overflow-wrap:anywhere;
}

/* Tablas: hay muchas y algunas son anchas. Scroll propio antes que romper
   el ancho de la columna de lectura. */
.mod__cuerpo table{
  width:100%;border-collapse:collapse;margin:1.6rem 0;
  font-size:.94rem;display:block;overflow-x:auto;
}
.mod__cuerpo th,.mod__cuerpo td{
  border-bottom:1px solid var(--line);padding:.7rem .8rem;
  text-align:left;vertical-align:top;color:var(--muted);
}
.mod__cuerpo th{
  color:var(--faint);font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;
}

/* ── Navegación entre módulos ────────────────────────────────── */
.mod__nav{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.mod__nav-a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--muted);text-decoration:none;max-width:48%;
  transition:color 200ms var(--e);
}
.mod__nav-a--sig{text-align:right;margin-left:auto}
.mod__nav-a:hover{color:var(--brass)}

/* ── Cierre ──────────────────────────────────────────────────── */
.mod__cierre{
  margin-top:3.5rem;padding:1.8rem;
  background:var(--void-2);border:1px solid var(--line);
}
.mod__cierre-h{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 .7rem;
}
.mod__cierre p{color:var(--muted);font-size:.98rem;line-height:1.6;margin:0 0 1.2rem}
.mod__cierre .compra__btn{display:inline-block}

@media (max-width:560px){
  .idx__fila{grid-template-columns:2.2rem 1fr}
  .mod__cuerpo p,.mod__cuerpo li{font-size:1.02rem}
  .mod__nav-a{max-width:100%}
}