/* ===== listados paginados (/peliculas|series|anime/page/N/) ===== */

.gs-listado{padding:118px 40px 60px;}
.gs-listado-title{
  font-family:var(--display);font-weight:900;font-size:1.8rem;margin:0 0 26px;
  display:flex;align-items:center;
}

/* Columnas en 3 escalones FIJOS (no auto-ajuste continuo) — a propósito:
   así POR_PAGINA (ver generator/build-listados.js) puede ser un múltiplo
   común exacto de las 3 cantidades (2, 3 y 7) y nunca deja hueco a mitad
   de catálogo en ninguno de los 3 anchos. La contra: en pantallas MUY
   anchas (1600px, 1920px...) las tarjetas ya no siguen creciendo de a
   poco — se quedan fijas en 7 columnas con más aire alrededor. */
.gs-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:18px;
}
/* dentro de una grilla, la tarjeta no debe quedar con ancho fijo (eso es
   para las filas horizontales del home) — acá tiene que llenar su celda */
.gs-grid .gs-card{width:auto;}

.gs-paginacion{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px;
  font-family:var(--mono);font-size:.9rem;
}
.gs-pagina{
  min-width:40px;height:40px;padding:0 12px;border-radius:8px;background:var(--surface);
  border:1px solid var(--surface-2);color:var(--bone);display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-weight:700;
}
.gs-pagina.activa{background:var(--slime);color:#0A0D0B;border-color:var(--slime);}
.gs-pagina.deshabilitada{opacity:.35;pointer-events:none;}

/* Escalón 2: celular normal (341-720px) -> 3 columnas fijas */
@media (max-width:720px){
  .gs-listado{padding:100px 16px 40px;}
  .gs-grid{grid-template-columns:repeat(3,1fr);gap:12px;}
}

/* Escalón 1: pantallas muy angostas (340px o menos) -> 2 columnas fijas */
@media (max-width:340px){
  .gs-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
}