/*
 * Otochi · sitio · estilos propios de /modulos (catálogo de módulos).
 * Se carga solo en modulos.html, después de estilos.css. No define colores, tipografías, radios
 * ni espacios nuevos: usa los tokens del DS (assets/ds/) y los del sitio (estilos.css, sección 2).
 *
 *  1. Ficha: el resumen ocupa el alto que sobra, así «Lo usa» y «Míralo en» quedan alineados al pie
 *     de las dos fichas de cada fila.
 *  2. El índice pegajoso, más compacto para que los 26 módulos quepan en la pantalla.
 */

/* 1. Ficha ------------------------------------------------------------------------------------ */
/* Sin scroll-margin propio: el html ya trae scroll-padding-top (encabezado + --space-4) y los dos
   se suman, así que la ficha quedaba casi 100 px por debajo del encabezado al llegar a su ancla. */
.catalogo .ficha { grid-template-rows: auto 1fr auto; scroll-margin-top: 0; }
.ficha__datos {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--borde);
}
.ficha__datos div { display: grid; gap: var(--space-1); }
/* Igual que el dt de .modulo__ficha en las subpáginas */
.ficha__datos dt {
  font-size: var(--fs-meta-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--texto-2);
}
.ficha__datos dd { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-snug); color: var(--texto); }
.ficha__datos .ficha__enlaces { margin-top: 0; }

/* Las cuatro familias tienen un número impar de módulos: la última ficha ocupa la fila entera en
   vez de dejar un hueco, y en el escritorio pone «Lo usa» y «Míralo en» a la derecha del resumen. */
@media (min-width: 720px) {
  .fichas > .ficha:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .fichas > .ficha:last-child:nth-child(odd) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-8);
  }
  .fichas > .ficha:last-child:nth-child(odd) > :not(.ficha__datos) { grid-column: 1; }
  .fichas > .ficha:last-child:nth-child(odd) .ficha__datos {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: start;
    padding-top: 0;
    padding-left: var(--space-8);
    border-top: 0;
    border-left: 1px solid var(--borde);
  }
}

/* 2. Índice ----------------------------------------------------------------------------------- */
/* Más compacto que el índice de estilos.css para que los 26 módulos quepan en una pantalla de
   escritorio (1440 × 900) sin desplazarse por dentro: 2 px arriba y abajo [der] (la mitad de
   --space-1, como el relleno del badge) y sin hueco entre renglones. */
.indice ul { gap: 0; }
.indice ul a { padding-block: 2px; }
.indice__grupo + .indice__grupo { margin-top: var(--space-3); }