/* «Precios por categoría» (`/precios` y `/precios/<slug>`) — su hoja, para su
   documento (`web/precios.html`). Se carga DESPUÉS de `portada.css` y vive de
   ella: el contenedor `.pg-contenedor`, el reset mínimo, el lockup del logo
   (`.pg-logo`), los pasos de «Así funciona» (`.pg-paso`), el pie completo
   (`.pg-pie`), `.pg-enlace` y la miniatura (`.miniatura`). Acá solo está lo
   propio de estas páginas. Se escribe con tokens `--nm-*` y clases de
   `componentes.css`, nunca con un hex.

   Las franjas alternan sin repetirse: base (cabecera) · papel (lo que está
   en más tiendas) · base (así funciona) · papel (de la A a la Z) · índigo
   (el cierre) · índigo (el pie de la portada). El índigo aparece dos veces y
   al final, que es lo que DESIGN.md le permite: cerrar. El cierre y el pie
   comparten tono, así que se pegan sin filete entre ellos. Un solo botón
   primario: el de la cabecera; «Arma tu lista» del cierre va como
   secundario. */

/* Las secciones son hijas del `<body>` (o del `<main>`) y miden todo el
   ancho: el fondo lo pinta la sección y el `::before` a sangre de
   `.nm-banda` / `.nm-franja-indigo` se apaga, igual que `portada.css` hace
   con `.pg-banda`. Así ninguna crea contexto de apilamiento. */
.cat-topnav, .cat-cabecera, .cat-banda, .cat-seccion, .cat-cierre { position: static; z-index: auto; }
.cat-banda::before, .cat-cierre::before { content: none; }

/* El cierre y el pie son los dos índigo seguidos: sin el filete doble. */
.cat-main + .pg-pie { border-top: 0; }

/* ── Cabecera de la portada, reutilizada: logo + «Entrar a la app». Está
   fuera de la franja índigo (esta página no es la portada), así que usa los
   bordes base y no los de franja. ───────────────────────────────────────── */
.cat-topnav {
  height: var(--nm-cabecera);
  border-bottom: 1px solid var(--nm-borde);
}
.cat-topnav__fila {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.cat-topnav .pg-logo { font-size: 19px; text-decoration: none; color: var(--nm-texto); }

/* ── Encabezado: migas, H1, la frase de beneficio, un solo primario y el
   dato secundario. ────────────────────────────────────────────────────── */
.cat-cabecera { padding: var(--nm-esp-6) 0; }
.cat-migas {
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center;
  margin-bottom: var(--nm-esp-3); color: var(--nm-texto-3);
}
.cat-migas a { color: inherit; text-decoration: none; }
.cat-migas__actual { color: var(--nm-texto-2); }
.cat-titulo { max-width: 26ch; }
.cat-beneficio { margin: var(--nm-esp-3) 0 var(--nm-esp-5); color: var(--nm-texto-2); max-width: 46ch; }
.cat-cta { text-decoration: none; }
.cat-conteo { margin-top: var(--nm-esp-3); color: var(--nm-texto-3); }

/* ── Filas con foto («Lo que está en más tiendas»): la miniatura es la de la
   ficha del genérico (`seo.miniatura`, 48 px). ───────────────────────────── */
.cat-seccion { padding: var(--nm-esp-8) 0; }
.cat-banda { padding: var(--nm-esp-7) 0; border-top: 1px solid var(--nm-banda-linea); border-bottom: 1px solid var(--nm-banda-linea); }
.cat-seccion-titulo { margin-bottom: var(--nm-esp-4); }
.cat-seccion-titulo h2 { margin: 0; }
.cat-buscado {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--nm-esp-5); row-gap: 0;
}
.cat-fila {
  display: flex; align-items: center; gap: var(--nm-esp-3);
  padding: 12px 0; border-bottom: 1px solid var(--nm-borde-sutil);
  text-decoration: none; color: inherit; border-radius: var(--nm-radio-md);
}
.cat-buscado .cat-fila:nth-last-child(-n+2) { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .cat-fila:hover { background: var(--nm-superficie-2); }
}
.cat-fila:focus-visible, .cat-az-fila:focus-visible, .cat-lista__fila:focus-visible,
.cat-indice__letra:focus-visible, .cat-letra:focus-visible {
  outline: 2px solid var(--nm-foco); outline-offset: 2px;
}
.cat-fila__foto { border: 1px solid var(--nm-borde-sutil); background: var(--nm-superficie-2); flex: none; }
.cat-fila__cuerpo { flex: 1 1 auto; min-width: 0; }
.cat-fila__nombre {
  display: block;
  font: 600 var(--nm-b1) / 1.3 var(--nm-cuerpo); color: var(--nm-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-fila__meta { display: flex; gap: 8px; align-items: baseline; margin-top: 2px; flex-wrap: wrap; }
.cat-fila__desde { font: 700 var(--nm-b2) / 1.2 var(--nm-cuerpo); color: var(--nm-texto); font-variant-numeric: tabular-nums; }
.cat-fila__tiendas { color: var(--nm-texto-3); font-size: var(--nm-b3); }
.cat-fila__chevron { color: var(--nm-texto-3); width: 18px; height: 18px; flex: none; }

/* ── «Así funciona», compacta: los `.pg-paso` de la portada, sin el video. ── */
.cat-pasos { display: grid; gap: var(--nm-esp-3); max-width: 640px; }

/* ── Índice de letras y la grilla de la A a la Z: sin foto y sin conteo de
   tiendas, filas de una línea. ──────────────────────────────────────────── */
.cat-indice {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: var(--nm-esp-5);
  position: sticky; top: 0; z-index: 1;
  background: var(--nm-banda); padding: 8px 0;
}
.cat-indice__letra {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--nm-radio-full);
  color: var(--nm-texto-2); text-decoration: none; font: 600 13px / 1 var(--nm-cuerpo);
}
@media (hover: hover) and (pointer: fine) {
  .cat-indice__letra:hover { background: var(--nm-superficie-2); color: var(--nm-texto); }
}

.cat-az { column-count: 3; column-gap: var(--nm-esp-5); }
.cat-az-grupo { break-inside: avoid-column; margin-bottom: var(--nm-esp-3); display: block; }
.cat-letra {
  font: 700 var(--nm-l1) / 1 var(--nm-cuerpo); letter-spacing: var(--nm-l1-tracking);
  text-transform: uppercase; color: var(--nm-texto-3);
  padding: 6px 0; cursor: pointer; scroll-margin-top: 48px;
  list-style: none;
}
.cat-letra::-webkit-details-marker { display: none; }
.cat-az-lista { display: grid; }
.cat-az-fila {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--nm-esp-2);
  padding: 7px 0; border-bottom: 1px solid var(--nm-borde-sutil);
  text-decoration: none; color: inherit; font-size: var(--nm-b2);
}
.cat-az-fila:last-child { border-bottom: 0; }
.cat-az-fila__nombre {
  color: var(--nm-texto); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cat-az-fila__precio { color: var(--nm-texto-2); font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .cat-az-fila:hover .cat-az-fila__nombre { text-decoration: underline; text-underline-offset: 2px; }
}

/* ── El índice (`/precios`): una fila por categoría con su conteo. ───────── */
.cat-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nm-esp-5); }
.cat-lista__fila {
  display: flex; align-items: center; gap: var(--nm-esp-3);
  padding: 14px 0; border-bottom: 1px solid var(--nm-borde-sutil);
  text-decoration: none; color: inherit; border-radius: var(--nm-radio-md);
}
.cat-lista__nombre { flex: 1 1 auto; min-width: 0; font: 600 var(--nm-b1) / 1.3 var(--nm-cuerpo); color: var(--nm-texto); }
.cat-lista__cuenta { color: var(--nm-texto-3); font-size: var(--nm-b3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .cat-lista__fila:hover { background: var(--nm-superficie-2); }
}

/* ── Cierre índigo: el CTA, «Conoce Nada Menos» y «Otras categorías». ────── */
.cat-cierre { padding: var(--nm-esp-8) 0 var(--nm-esp-6); }
.cat-cierre__caja { max-width: 46rem; }
.cat-cierre__titulo { margin: 0; }
.cat-cierre__texto { margin: var(--nm-esp-3) 0 var(--nm-esp-5); color: var(--nm-franja-texto-2); }
.cat-cierre__acciones { display: flex; align-items: center; gap: var(--nm-esp-5); flex-wrap: wrap; }
.cat-cierre__acciones .nm-boton { text-decoration: none; }
.cat-cierre__enlace { text-decoration-color: var(--nm-franja-texto-3); }
.cat-otras { margin-top: var(--nm-esp-7); padding-top: var(--nm-esp-6); border-top: 1px solid var(--nm-franja-linea); }
.cat-otras__titulo { color: var(--nm-franja-texto-3); margin-bottom: var(--nm-esp-3); }
.cat-otras__enlaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nm-esp-2) var(--nm-esp-5); }
.cat-otras__enlace { color: var(--nm-franja-texto-2); font-size: var(--nm-b2); text-decoration: none; }
.cat-otras__enlace:focus-visible { outline: 2px solid var(--nm-foco); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .cat-otras__enlace:hover { color: var(--nm-franja-texto); }
}

/* ── Teléfono: 375 px, 16 px de gutter, sin scroll horizontal, la A a la Z
   plegable con el índice arriba. ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .cat-buscado, .cat-lista { grid-template-columns: 1fr; }
  .cat-buscado .cat-fila:nth-last-child(-n+2) { border-bottom: 1px solid var(--nm-borde-sutil); }
  .cat-buscado .cat-fila:last-child { border-bottom: 0; }
  .cat-az { column-count: 1; }
  .cat-otras__enlaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-cierre__acciones { gap: var(--nm-esp-3) var(--nm-esp-5); }
}
@media (max-width: 480px) {
  .pg-contenedor { padding-inline: 16px; }
  .cat-cabecera { padding: var(--nm-esp-5) 0; }
  .cat-banda, .cat-seccion { padding: var(--nm-esp-6) 0; }
  .cat-cierre { padding: var(--nm-esp-7) 0 var(--nm-esp-6); }
  /* El H1 con `nm-d2` (30 px) ocupa cuatro líneas a 375 px: un peldaño menos
     solo acá, para que entre en tres. */
  .cat-titulo { font-size: 26px; line-height: 1.2; }
}