/* Índices: /guia/ y /articulos/ */
.familias-lista, .lista-articulos { list-style: none; margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; gap: 6px; }
.familia-enlace, .articulo-enlace { display: grid; text-decoration: none; color: inherit; background: var(--surface); transition: background-color var(--t-hover) ease; }
.familia-fila:nth-child(2) .familia-enlace { background: var(--field-2); }
.familia-fila:nth-child(3) .familia-enlace { background: var(--surface-2); }
.familia-foto { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.familia-foto img, .articulo-foto img { filter: grayscale(1) contrast(1.05); transition: transform 700ms var(--ease-soft); }
.familia-texto { display: grid; gap: .75rem; padding: 1.5rem 1.25rem 2rem; align-content: start; }
.familia-nombre { font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.familia-frase { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.familia-pistas { font-size: var(--step-small); color: var(--muted); line-height: 1.6; }
.familia-enlace:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) {
  .familia-enlace:hover .familia-nombre, .articulo-enlace:hover .articulo-titulo { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
  .familia-enlace:hover img, .articulo-enlace:hover img { transform: scale(1.03); }
}
.indice-articulos { padding-top: var(--section); display: grid; gap: 1.5rem; }
.indice-articulos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.indice-articulos a { display: block; padding: 1.1rem 1.25rem; background: var(--surface); font-weight: 600; font-size: var(--step-lead); text-decoration: none; }

.articulo-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.articulo-texto { display: grid; gap: .6rem; padding: 1.25rem; align-content: start; }
.articulo-titulo { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.articulo-entradilla { max-width: 52ch; }
.articulo-fecha { font-size: var(--step-small); color: var(--muted); }

@media (min-width: 48em) {
  .familia-enlace { grid-template-columns: 42fr 58fr; min-height: 22rem; }
  .familia-foto { aspect-ratio: auto; }
  .familia-texto { padding: 2rem 2.5rem; align-content: center; }
  .articulo-enlace { grid-template-columns: 16rem 1fr; }
  .articulo-foto { aspect-ratio: auto; min-height: 12rem; }
  .articulo-texto { padding: 1.5rem 2rem; align-content: center; }
}
@media (min-width: 60em) {
  .indice-articulos { grid-template-columns: 42fr 58fr; }
  .indice-articulos .titulo-seccion { padding-right: 2.5rem; }
  .lista-articulos { margin-left: 0; }
  .articulo-enlace { grid-template-columns: calc(42% - 6px) 1fr; }
}