/* ==========================================================================
   ÍNDICE DE LIBROS — compartido de verdad por category-entrevistas-autores.php
   y category-resena.php (mismas rejillas, mismos huecos — confirmado por
   Nicolás 2026-08-08 que las dos plantillas son iguales en estructura).
   Todo lo genérico (tarjeta, filtros, paginación, cta-inline, cluster) vive
   en components.css; aquí solo la rejilla y ajustes propios de esta página.
   ========================================================================== */

.hero-in {
  max-width: 760px;
}

.hero-copy {
  font-size: 20px;
  max-width: 58ch;
}

.filtros {
  top: 108px; /* debajo del header sticky (34px + 74px) */
}

.sec { padding: 60px 0 92px; }

.cuenta {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--tinta-40);
  margin-bottom: 26px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* El CTA intercalado ocupa el ancho de las 3 columnas de esta rejilla */
.grid .cta-inline {
  grid-column: span 3;
}

.sec2 { padding: 0 0 92px; }

@media (max-width: 1000px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .grid .cta-inline { grid-column: span 2; }
  .cluster { grid-template-columns: 1fr 1fr; }
  .filtros { top: 76px; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .grid .cta-inline { grid-column: span 1; padding: 28px 24px; }
}