/* AHNSA — /productos, navegador multimarca por familia. v14 (mockup v8)
   ---------------------------------------------------------------------------
   Va SIEMPRE después de css/ahnsa-sumi.css y de css/ahnsa-filtros-mc.css: el
   molde base es el de /sumitomo y /amec, y AQUÍ se sobreescribe —con la clase
   .ahprodnav / .ahprodhub delante, para ganar en especificidad sin tocar la
   hoja compartida— todo lo que el mockup v8 de Mario (docs/pack_v8/assets/
   ui_mockups/brocas_product_listing.png, insertos_product_listing.png) pide
   distinto:
     · contenedor de ~1480 px y rejilla de 5 columnas (4 ≥1100, 3 ≥820, 2 móvil)
     · cabecera: migas gris, título + pill, descripción de dos líneas
     · toolbar: caja de código a la izquierda | "Vista: ▦ ☰" | "Ordenar por: …"
     · chips activos blancos con borde y "🗑 Limpiar todo"
     · tarjeta: corazón, render 170 px sobre blanco, logo de marca, código en
       azul, "Familia:", tipo, cotas con unidad, chips ISO, semáforo de tres
       bandas, pie "Ver ficha" + "Agregar a cotización"
     · banda (i) "Mostrando X de N · De estos N, M tienen ficha" + paginación
       numerada (escritorio) / "Mostrar más" (móvil)
   Todo hereda los tokens de tema (var(--nav-*), azul AHNSA #1878B9 / #0F4C7A,
   marino #0A1E5E); ni un color suelto que se salga del sistema. Números en
   tabular-nums. Móvil primero en lo que importa; pointer: coarse/fine decide
   los blancos de toque, no el ancho de la ventana. */

/* ── 0. contenedor y rejilla ───────────────────────────────────────────────── */
.ahsumi.ahprodnav,
.ahsumi.ahprodhub { max-width: 1480px; }
.ahsumi.ahprodnav .sumi-main { min-width: 0; }
.ahprodnav .sumi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 820px)  { .ahprodnav .sumi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v14 (1-sep). Las CUATRO columnas fijas eran la respuesta correcta mientras el
   contenedor topaba en 1,480 px: a 1680 la tarjeta media ~318 px y respiraba.
   Con la barra de filtros convertida en columna de aplicacion (ahnsa-filtros-mc
   .css v9) el contenedor deja de topar y la columna de contenido pasa de 1,060 a
   1,536 px a 1920: cuatro columnas fijas darian tarjetas de ~380 px, mas anchas
   que el render que llevan dentro. Desde 1100 px la rejilla vuelve a AUTO-FILL.

   El piso es 224 px y no 228. Medido en el navegador, los dos dan EXACTAMENTE lo
   mismo en los anchos que se aprobaron (1440 -> 4 · 1920 -> 6 · 2560 -> 8), pero
   a 1100-1279 px la columna util mide 716 px y con 228 px la tercera tarjeta se
   queda fuera por CUATRO pixeles (3x228 + 2x18 = 720): la rejilla cae a DOS
   columnas justo en el portatil chico. Con 224 caben las tres (708 px).
   Medido: 1100 -> 3 · 1280 -> 3 · 1366 -> 4 · 1440 -> 4 · 1680 -> 5 · 1920 -> 6 ·
   2560 -> 8 · 3440 -> 8 (aqui ya manda el tope de 2,200 px de la columna).

   Nitidez: el `srcset` de la tarjeta va con descriptores 1x/2x (la derivada -320
   a 1x, el maestro de 720 a 2x), asi que el navegador elige por DPR y no por
   ancho de caja — el `sizes` que lleva al lado es inerte con descriptores x. Con
   tarjetas de 241-251 px la eleccion sigue siendo la misma que con 318 px, y no
   hay que tocar el espejo gen_productos.card_html() <-> ahnsa-prod.js card(). */
@media (min-width: 1100px) {
  .ahprodnav .sumi-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 18px; }
}
.ahprodnav .sumi-grid.lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* ── 1. cabecera de la página ──────────────────────────────────────────────── */
.ahprodnav .sumi-cab { padding: 16px 0 4px; }
.ahprodnav .ahnav-migas { font-size: 13px; gap: 9px; }
.ahprodnav .ahnav-migas > span[aria-hidden] { color: var(--nav-conteo); }
.ahprodnav .ahnav-migas a { color: var(--nav-tinta-3) !important; }
.ahprodnav .ahnav-migas a:hover { color: var(--nav-liga-alta) !important; }
.ahprodnav .ahnav-migas > span:last-child { color: var(--nav-tinta); font-weight: 600; }
.ahprodnav .sumi-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 6px 0 6px;
  font-size: 30px;
  line-height: 1.15;
  color: var(--nav-marino);
  letter-spacing: -.01em;
}
.ahprodnav .sumi-titulo .sumi-n {
  margin-left: 0;
  padding: 4px 12px;
  background: #E8F2FB;
  border-color: #CFE3F5;
  color: #0F4C7A;
  font-size: 13px;
  vertical-align: 0;
}
.ahprodnav .prod-desc {
  margin: 0 0 14px;
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nav-tinta-2);
}

/* D3 — el visual de la familia.
   Va ABSOLUTO a proposito: asi el titulo, las migas y la descripcion conservan
   exactamente el flujo que ya tenian en las 19 paginas y el cambio no puede
   mover un pixel de texto (CLS 0). El texto ya venia acotado por
   `max-width: 78ch`, que es lo que le deja el hueco libre a la derecha.
   Se apaga en pantallas angostas: ahi el ancho es del listado, no del adorno. */
.ahprodnav .sumi-cab { position: relative; }
.ahprodnav .prod-fam-vis {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 132px;
  height: 132px;
  object-fit: contain;
  pointer-events: none;
  /* El render viene con fondo BLANCO OPACO (medido: 255,255,255) y la cabecera
     es blanco calido (medido: 254,253,249). Son 1-6 puntos por canal, pero el
     borde es duro y sobre 132x132 el ojo lee un rectangulo pegado detras de la
     pieza. `multiply` deja pasar el fondo de la pagina alli donde el pixel es
     blanco puro, sin tocar la pieza y sin fabricar un webp con alfa. */
  mix-blend-mode: multiply;
}
@media (max-width: 1024px) {
  .ahprodnav .prod-fam-vis { display: none; }
}

/* ── 2. la toolbar ─────────────────────────────────────────────────────────── */
.ahprodnav .sumi-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.ahprodnav .sumi-q {
  flex: 1 1 240px;
  max-width: 420px;
  min-height: 40px;
  font-size: 13.5px;
  border-radius: 8px;
  padding-left: 34px;
  background: var(--nav-fondo) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 11px center / 16px no-repeat;
}
.ahprodnav .sumi-herr {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-left: auto;
}
.ahprodnav .sumi-vista-l,
.ahprodnav .sumi-orden-l > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-tinta-2);
  white-space: nowrap;
}
.ahprodnav .sumi-vista-l { margin-right: -4px; }
.ahprodnav .sumi-vista {
  display: inline-flex;
  border: 1px solid var(--nav-linea);
  border-radius: 8px;
  overflow: hidden;
  background: var(--nav-fondo);
}
.ahprodnav .sumi-vista button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: var(--nav-fondo);
  color: var(--nav-tinta-3);
  cursor: pointer;
}
.ahprodnav .sumi-vista button + button { border-left: 1px solid var(--nav-linea); }
.ahprodnav .sumi-vista button svg { width: 18px; height: 18px; fill: currentColor; }
.ahprodnav .sumi-vista button:hover { color: var(--nav-liga-alta); background: var(--nav-lavado); }
.ahprodnav .sumi-vista button.activo { background: #1878B9; color: #fff; }
.ahprodnav .sumi-vista button:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: -2px; }
.ahprodnav .sumi-orden-l {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--nav-linea);
  border-radius: 8px;
  background: var(--nav-fondo);
}
.ahprodnav .sumi-orden {
  min-height: 36px;
  border: 0;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nav-tinta);
  background: transparent;
  max-width: 260px;
  cursor: pointer;
}
.ahprodnav .sumi-orden:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 2px; border-radius: 4px; }

/* ── 3. chips activos ──────────────────────────────────────────────────────── */
.ahprodnav .sumi-chips { gap: 8px; margin: 0 0 14px; align-items: center; }
.ahprodnav .sumi-chip {
  min-height: 34px;
  padding: 5px 10px 5px 12px;
  border: 1px solid var(--nav-linea);
  border-radius: 8px;
  background: var(--nav-fondo);
  color: var(--nav-tinta);
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
}
.ahprodnav .sumi-chip:hover { border-color: var(--nav-liga-alta); background: var(--nav-lavado); }
.ahprodnav .sumi-chip i { font-style: normal; font-weight: 500; opacity: 1; color: var(--nav-tinta-3); }
.ahprodnav .sumi-chip > span[aria-hidden] { font-size: 15px; line-height: 1; color: var(--nav-tinta-3); margin-left: 2px; }
.ahprodnav .sumi-chip:hover > span[aria-hidden] { color: #B3261E; }
.ahprodnav .sumi-chip.limpia {
  border: 0;
  background: none;
  color: #0F4C7A;
  padding-left: 24px;
  position: relative;
}
.ahprodnav .sumi-chip.limpia::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 15px; height: 15px;
  margin-top: -8px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6.5 7l1 13h9l1-13M10 11v6M14 11v6'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.ahprodnav .sumi-chip.limpia:hover { background: none; text-decoration: underline; }

/* ── 4. la tarjeta ─────────────────────────────────────────────────────────── */
.ahprodnav .sumi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #E1E7EF;
  border-radius: 10px;
  background: var(--nav-fondo);
  color: var(--nav-tinta);
  overflow: hidden;
  min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
.ahprodnav .sumi-card:hover { border-color: var(--nav-liga-alta); box-shadow: 0 4px 14px rgba(10, 30, 94, .09); }
.ahprodnav .sumi-card.sinficha { cursor: auto; }
.ahprodnav .sumi-card.sinficha:hover { border-color: var(--nav-liga-alta); box-shadow: 0 4px 14px rgba(10, 30, 94, .09); }

/* corazón de favoritos: arriba a la derecha, sobre la imagen */
.ahprodnav .sumi-fav {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--nav-conteo);
  cursor: pointer;
  padding: 0;
}
.ahprodnav .sumi-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.ahprodnav .sumi-fav:hover { color: #B3261E; background: #fff; }
.ahprodnav .sumi-fav.activo { color: #B3261E; }
.ahprodnav .sumi-fav.activo svg { fill: currentColor; }
.ahprodnav .sumi-fav:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 1px; }

/* la imagen: render grande sobre blanco, sin caja visible; marco neutro
   (sin render honesto) con el código, como antes */
.ahprodnav .sumi-card-vis {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  padding: 14px 14px 6px;
  background: #fff;
  text-decoration: none;
  color: inherit;
}
.ahprodnav .sumi-card-foto {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 200px;
  object-fit: contain;
}
.ahprodnav .sumi-card-vis.neutro { background: #fff; }
.ahprodnav .sumi-neutro {
  width: 110px; height: 110px;
  border: 1px dashed var(--nav-linea);
  border-radius: 8px;
  background: var(--nav-lavado);
}
.ahprodnav .sumi-neutro-cod { font-size: 10px; }

.ahprodnav .sumi-card-c {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 14px 12px;
  min-width: 0;
  flex: 1;
}
.ahprodnav .sumi-card-marca {
  display: flex;
  align-items: center;
  min-height: 22px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--nav-tinta-2);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ahprodnav .sumi-logo { display: block; height: 22px; width: auto; max-width: 130px; object-fit: contain; object-position: left center; }
.ahprodnav .sumi-card-cod {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1px;
  line-height: 1.3;
  color: #1B5DB4 !important;
  text-decoration: none;
  /* un código largo se parte en sus guiones antes que a media sílaba */
  word-break: normal;
  overflow-wrap: anywhere;
}
.ahprodnav .sumi-card-cod:hover { text-decoration: underline; color: #0F4C7A !important; }
.ahprodnav .sumi-card-fam { font-size: 12px; color: var(--nav-tinta-2); }
.ahprodnav .sumi-card-fam b { font-weight: 700; color: var(--nav-tinta); }
.ahprodnav .sumi-card-nombre { font-size: 12.5px; color: var(--nav-tinta-2); margin: 0; line-height: 1.35; }
.ahprodnav .sumi-card-dims {
  font-size: 12px;
  line-height: 1.45;
  color: var(--nav-tinta-2);
  font-variant-numeric: tabular-nums;
  word-break: normal;
  overflow-wrap: anywhere;
}
.ahprodnav .sumi-card-iso { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ahprodnav .sumi-card-iso .iso-mat.mini { min-width: 20px; height: 20px; font-size: 12px; border-radius: 4px; }
/* v10: los chips P/M/K van rectos como en el mockup. Son <i>, y sin esto el
   navegador bajaba la cara ITALICA de supreme (36 KB, font-display swap) en
   cada listado con chips — medido en CWV.md (brocas +1 fuente). */
.ahprodnav .iso-mat, .ahprodnav .iso-mat.mini { font-style: normal; }
.ahprodnav .sumi-card-pie { margin-top: 4px; }
.ahprodnav .sumi-exi { margin-left: 0; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ahprodnav .sumi-exi::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0;
  vertical-align: 0;
  background: var(--nav-conteo);
}
.ahprodnav .sumi-exi.hay { color: #1B5E20; }
.ahprodnav .sumi-exi.hay::before { background: #2E7D32; }
.ahprodnav .sumi-exi.medio { color: #8A5A00; }
.ahprodnav .sumi-exi.medio::before { background: #E0A100; }
.ahprodnav .sumi-exi.surte { color: #9A4A00; }
.ahprodnav .sumi-exi.surte::before { background: #E8751A; }

/* el pie: "Ver ficha" + "Agregar a cotización" (sin precios, sin PDF) */
.ahprodnav .sumi-card-acc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--nav-linea-2);
}
.ahprodnav .sumi-ver,
.ahprodnav .sumi-cot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  min-width: 0;
}
.ahprodnav .sumi-ver { border: 1.5px solid #1878B9; background: #fff; color: #0F4C7A !important; padding: 0 6px; }
.ahprodnav .sumi-ver:hover { background: #E8F2FB; }
/* "Agregar a cotización" completo sólo cuando la tarjeta es ancha (vista de
   lista, 3 columnas, pantallas grandes); en una tarjeta de ~200 px queda
   "Agregar" + carrito, que es lo que cabe sin pisar a "Ver ficha". La
   tarjeta es el contenedor de la consulta. */
.ahprodnav .sumi-card { container-type: inline-size; }
.ahprodnav .sumi-cot-l { display: none; }
@container (min-width: 262px) { .ahprodnav .sumi-cot-l { display: inline; } }
@supports not (container-type: inline-size) {
  @media (min-width: 820px) and (max-width: 1399px) { .ahprodnav .sumi-cot-l { display: none; } }
}
.ahprodnav .sumi-cot { border: 1.5px solid #1878B9; background: #1878B9; color: #fff; }
.ahprodnav .sumi-cot svg { width: 16px; height: 16px; flex: none; }
.ahprodnav .sumi-cot svg circle { fill: currentColor; }
.ahprodnav .sumi-cot:hover { background: #0F4C7A; border-color: #0F4C7A; }
.ahprodnav .sumi-cot:disabled,
.ahprodnav .sumi-cot.listo { background: #fff; color: #1B5E20; border-color: #9FD2A6; cursor: default; }
.ahprodnav .sumi-ver:focus-visible,
.ahprodnav .sumi-cot:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 2px; }

/* vista de lista: la tarjeta se acuesta */
.ahprodnav .sumi-grid.lista .sumi-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: stretch;
}
.ahprodnav .sumi-grid.lista .sumi-card-vis { height: auto; min-height: 120px; padding: 10px; }
.ahprodnav .sumi-grid.lista .sumi-card-foto { max-width: 130px; }
.ahprodnav .sumi-grid.lista .sumi-card-c { padding: 10px 14px 10px 6px; }
.ahprodnav .sumi-grid.lista .sumi-card-acc {
  grid-template-columns: auto auto;
  justify-content: start;
  border-top: 0;
  padding-top: 6px;
}
.ahprodnav .sumi-grid.lista .sumi-ver,
.ahprodnav .sumi-grid.lista .sumi-cot { padding: 0 14px; }
.ahprodnav .sumi-grid.lista .sumi-neutro { width: 90px; height: 90px; }

/* ── 5. banda (i) + paginación ─────────────────────────────────────────────── */
.ahprodnav .sumi-banda {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--nav-lavado);
  border: 1px solid var(--nav-linea-2);
}
.ahprodnav .sumi-banda-i {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--nav-marino);
  color: #fff;
  font: 800 15px/30px Georgia, 'Times New Roman', serif;
  text-align: center;
  font-style: italic;
}
.ahprodnav .sumi-banda-t {
  flex: 1 1 260px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nav-tinta-2);
}
.ahprodnav .sumi-banda-t .sumi-cuenta,
.ahprodnav .sumi-banda-t .sumi-ficha-n { display: block; white-space: normal; font-size: 13px; color: inherit; font-variant-numeric: tabular-nums; }
.ahprodnav .sumi-banda-t .sumi-cuenta { font-weight: 700; color: var(--nav-tinta); }
.ahprodnav .sumi-pag { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ahprodnav .sumi-pag:empty { display: none; }
.ahprodnav .sumi-pag a,
.ahprodnav .sumi-pag span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--nav-linea);
  border-radius: 6px;
  background: var(--nav-fondo);
  color: var(--nav-tinta) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
}
.ahprodnav .sumi-pag span { border-color: transparent; background: none; color: var(--nav-tinta-3) !important; min-width: 22px; padding: 0; }
.ahprodnav .sumi-pag a:hover { border-color: var(--nav-liga-alta); color: var(--nav-liga) !important; }
.ahprodnav .sumi-pag a.activo { background: var(--nav-marino); border-color: var(--nav-marino); color: #fff !important; }
.ahprodnav .sumi-pag .sumi-pag-s { font-size: 18px; line-height: 1; }
.ahprodnav .sumi-mas { display: none; }
@media (max-width: 819px) {
  .ahprodnav .sumi-pag { display: none; }
  .ahprodnav .sumi-mas { display: block; width: 100%; margin-top: 12px; }
  .ahprodnav .sumi-mas[hidden] { display: none; }
}

/* ── 6. móvil y ventana angosta ────────────────────────────────────────────── */
@media (max-width: 920px) {
  .ahprodnav .sumi-titulo { font-size: 24px; }
  .ahprodnav .sumi-barra { gap: 8px; }
  .ahprodnav .sumi-q { flex: 1 1 160px; max-width: none; }
  .ahprodnav .sumi-herr { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 8px; }
  .ahprodnav .sumi-orden-l { flex: 1 1 auto; min-width: 0; }
  .ahprodnav .sumi-orden { max-width: 100%; flex: 1 1 auto; width: 100%; min-width: 0; }
  .ahprodnav .sumi-abrir-filtros { min-height: 40px; }
}
@media (max-width: 560px) {
  .ahprodnav .sumi-grid { gap: 8px; }
  .ahprodnav .sumi-card-vis { height: 128px; padding: 10px 10px 4px; }
  .ahprodnav .sumi-card-c { padding: 4px 10px 10px; gap: 3px; }
  .ahprodnav .sumi-card-cod { font-size: 12.5px; }
  /* piso de hims en movil: nada de texto bajo 12px ni target bajo 44px (29-ago) */
  .ahprodnav .sumi-card-nombre, .ahprodnav .sumi-card-dims, .ahprodnav .sumi-card-fam { font-size: 12px; }
  .ahprodnav .sumi-card-acc { grid-template-columns: 1fr; gap: 5px; }
  .ahprodnav .sumi-ver, .ahprodnav .sumi-cot { font-size: 12px; min-height: 2.75rem; }
  .ahprodnav .sumi-fav { min-height: 2.75rem; min-width: 2.75rem; }
  .ahprodnav .sumi-card-cod { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .ahprodnav .sumi-cot svg { width: 14px; height: 14px; }
  .ahprodnav .sumi-vista-l { display: none; }
  .ahprodnav .sumi-orden-l > span { display: none; }
  .ahprodnav .prod-desc { font-size: 13px; }
  .ahprodnav .sumi-banda { padding: 10px 12px; gap: 10px; }
  .ahprodnav .sumi-banda-i { width: 26px; height: 26px; font-size: 13px; line-height: 26px; }
}
/* con dedo, blancos de toque de 44 px; con ratón y ventana angosta, compacto */
@media (pointer: coarse) {
  .ahprodnav .sumi-fav { width: 40px; height: 40px; }
  .ahprodnav .sumi-ver, .ahprodnav .sumi-cot { min-height: 40px; }
  .ahprodnav .sumi-pag a, .ahprodnav .sumi-pag span { min-width: 40px; height: 40px; }
  .ahprodnav .sumi-vista button { width: 44px; min-height: 42px; }
}

/* ── 7. hub de familias (cuatro franjas) ───────────────────────────────────── */
.ahprodhub .prod-franja {
  margin: 22px 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nav-tinta-3);
}
.ahprodhub .prod-franja:first-of-type { margin-top: 10px; }
.ahprodhub .sumi-tiles { margin: 0 0 6px; }
.prod-tiles .sumi-tile a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.prod-tiles .sumi-tile img { margin-bottom: 2px; }
.prod-tiles .sumi-tile-c { display: block; }
.ahprodhub .sumi-tile[hidden], .ahprodhub .prod-tiles[hidden], .ahprodhub .prod-franja[hidden] { display: none; }

/* ── 8. otras familias (pie de la página de familia) ───────────────────────── */
.prod-otras { margin: 28px 0 8px; }
.prod-otras h2 {
  font-size: 14px;
  font-weight: 800;
  color: var(--nav-tinta-2);
  margin: 0 0 10px;
}
.prod-otras ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prod-otras a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--nav-liga);
  border: 1px solid var(--nav-linea-2);
  border-radius: 999px;
  padding: 6px 12px;
}
.prod-otras a:hover { border-color: var(--nav-liga); background: var(--nav-lavado); }
.prod-otras a span {
  font-weight: 600;
  font-size: 12px;
  color: var(--nav-tinta-3);
  font-variant-numeric: tabular-nums;
}

/* Todas las familias ocupan el MISMO hueco de imagen, tenga render 3D
   (fondo transparente) o foto de categoría (3:2), para que la rejilla del hub
   no se vea rota. `contain` en el 3D respeta la silueta; `cover` en la foto la
   encuadra sin deformarla. */
.prod-tile-img {
  display: block;
  width: 120px;
  height: 68px;
  object-fit: contain;
}
.prod-tile-img.foto {
  object-fit: cover;
  border-radius: 4px;
}

/* Origen del dato dimensional. Una medida transcrita de la página impresa y
   una deducida de la designación ISO son las dos ciertas, pero no son lo
   mismo; el sitio no las presenta como si lo fueran. Va discreto: es una
   precisión, no una advertencia. */
.sumi-dec {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nav-tinta-3);
}
.sumi-dec::before { content: '↳ '; }

/* Familia sin imagen honesta: hueco neutro del mismo tamaño, para que la
   rejilla del hub no se rompa. Antes que una foto que prometa lo que no es. */
.prod-tile-img.vacia {
  background: var(--nav-lavado);
  border: 1px dashed var(--nav-linea);
  border-radius: 4px;
}

/* ── vacío útil ────────────────────────────────────────────────────────────
   "Sin resultados" no le sirve a nadie: lo que sirve es saber CUÁL filtro
   está cortando todo y cuántos productos vuelven si se quita. Aquí también
   aparece el aviso de un filtro que llegó por la URL y no existe en esta
   familia — la página se muestra completa en vez de salir vacía sin decir
   por qué. */
.sumi-vacio {
  margin: 12px 0 4px;
  padding: 18px 20px;
  background: var(--nav-lavado);
  border: 1px solid var(--nav-linea);
  border-radius: 10px;
  text-align: left;
}
.sumi-vacio[hidden] { display: none; }
.sumi-vacio-t {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--nav-tinta);
}
.sumi-vacio-p,
.sumi-vacio-aviso {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nav-tinta-2);
}
.sumi-vacio-aviso:last-child { margin-bottom: 0; }
.sumi-vacio-p b { font-variant-numeric: tabular-nums; }
.sumi-vacio-b {
  font: 700 13px/1 inherit;
  font-family: inherit;
  color: var(--nav-liga);
  background: none;
  border: 1px solid var(--nav-linea-2);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  margin-right: 6px;
}
.sumi-vacio-b:hover {
  border-color: var(--nav-liga);
  background: var(--nav-fondo);
}
.sumi-vacio-b:focus-visible {
  outline: 2px solid var(--nav-liga);
  outline-offset: 2px;
}

/* ── /productos?marca=X ────────────────────────────────────────────────────
   Las 50 fichas de /marcas/<slug> entran al área de productos ya filtradas
   por su marca. Sin familia, el hub dice en cuáles tiene productos en vez de
   dejar al visitante adivinar cuál de las diecinueve abrir. */
.prod-marca-aviso {
  margin: 10px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nav-tinta-2);
  background: var(--nav-lavado);
  border: 1px solid var(--nav-linea);
  border-radius: 10px;
}
.prod-marca-aviso[hidden] { display: none; }
.prod-marca-aviso b { color: var(--nav-tinta); font-variant-numeric: tabular-nums; }

/* ── dispositivo real, no sólo ancho de ventana ────────────────────────────
   css/ahnsa-theme.css ya distingue `pointer: coarse/fine`: con ratón y ventana
   angosta el cajón de filtros entra como PANEL lateral y el fondo se sigue
   pudiendo desplazar. Pero ese bloque vive en una hoja que se carga ANTES que
   css/ahnsa-sumi.css, y sumi vuelve a poner `overflow: hidden` con la misma
   especificidad — así que ganaba el bloqueo del scroll. Aquí se restaura para
   /productos, que es donde se pidió. La causa de fondo es el orden de las
   hojas y afecta igual a /sumitomo y /amec. */
@media (max-width: 920px) and (pointer: fine) {
  .ahsumi.ahprodnav.filtros-abiertos { overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HUB: el "no pude" honesto.
   ══════════════════════════════════════════════════════════════════════════ */
.prod-hs-aviso {
  margin: 8px 0 12px;
  padding: 10px 13px;
  border-left: 3px solid var(--nav-aqui);
  background: var(--nav-aqui-suave);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--nav-tinta-2);
  max-width: 760px;
}
.prod-hs-aviso a { color: var(--nav-liga); font-weight: 700; }

/* Nota de referencia de las fotos (Mario 29-ago 15:47): honesta y discreta. */
.ahprodnav .prod-nota-ref, .prod-nota-ref {
  margin: 10px 4px 0; font-size: 12px; line-height: 1.5; color: #5B6B82;
}

/* ══════════════════════════════════════════════════════════════════════════
   JERARQUÍA DE TÍTULOS DEL LISTADO Y ENTRADA SUAVE  (v15, 3-sep)
   ──────────────────────────────────────────────────────────────────────────
   Mario, 3-sep 09:21: «todos los h1 están feos… ¿se podrán animar, o sea que
   el texto cambie con smooth animation y que se vea más bonito?».

   Lo MEDIDO en /productos/insertos a 1440x900 antes de tocar nada:

       h1  .sumi-titulo            57 px / peso 410 / rgba(0,0,0,.89)
       h2  .hm-cat__cab-listado    40 px / peso 450 / rgba(0,0,0,.89)

   Dos titulares del mismo color y de la misma familia de tamaño, a 330 px de
   distancia, compitiendo por ser el título de la página; y el segundo,
   además, envolvía a dos renglones y empujaba la rejilla fuera del primer
   pantallazo. Eso no es una jerarquía: es un empate.

   La jerarquía que se aplica (registro hims / McMaster: UN título, un rótulo
   de sección y el resto en gris):

       h1  «Insertos»                    28 → 38 px, peso 650, tinta
       p   descripción de familia        14 → 16 px, peso 400, tinta-2   (igual)
       kicker «CATÁLOGO COMPLETO · …»    12 → 13 px, mayúsculas           (igual)
       h2  «Filtra los N códigos…»       16 → 19 px, peso 550, tinta-2

   El h2 deja de ser un titular y pasa a ser lo que siempre fue: el rótulo del
   bloque de filtros. NO se toca `.hm-h2` global — la clase la usan la home y
   las 62 fichas de marca, donde sí es un titular de sección. El corte va por
   `.hm-cat__cab-listado`, que sólo emite gen_productos.py para el listado.

   ENTRADA. Se hace con @keyframes y no con el `.hm-reveal` de la hoja hims a
   propósito: `.hm-reveal` arranca en `opacity:0` y depende de que
   js/ahnsa-home.js llegue a poner `.is-in`; si ese script falla, el h1 de las
   19 familias se queda INVISIBLE. Una animación CSS siempre termina, y bajo
   `prefers-reduced-motion` no llega a empezar.

   Y la descripción NO se desvanece, sólo se desplaza. No es capricho: medido
   con PerformanceObserver, el elemento LCP de esta página es `P.sumi-sub`
   (344 ms a 1440). Un elemento en `opacity:0` no está pintado, así que
   animarle la opacidad desde 0 RETRASA el LCP tanto como dure la animación —
   la misma lección que ya está escrita para el h1 del héroe de la home
   (ahnsa-hims.css v77). Se le anima sólo el `transform`, que no cambia
   cuándo se pintó.

   CLS: `opacity` y `transform` no participan del layout, así que no mueven
   nada. El contador de la píldora sí podría moverlo (el texto crece de «0» a
   «39,164 productos» y la píldora es un elemento en la fila del h1, que
   envuelve); por eso js/ahnsa-prod.js le RESERVA el ancho final antes de
   empezar a contar. Medido con PerformanceObserver: CLS 0 antes y después.
   ══════════════════════════════════════════════════════════════════════════ */

/* (0,3,0) y en hoja posterior: le gana a `.ahprodnav.hm-cat .sumi-titulo` de
   ahnsa-hims.css, que es de la misma especificidad pero se carga antes. */
.ahprodnav.hm-cat .sumi-titulo {
  margin: .375rem 0 .5rem;
  gap: .5rem .75rem;
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.375rem);   /* 28 → 38 px */
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--hm-tinta, rgba(0, 0, 0, .89));
}
.ahprodnav.hm-cat .sumi-titulo .sumi-n {
  align-self: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
/* El rótulo del bloque de filtros, ya no un segundo titular. */
.hm-cat .hm-cat__cab-listado { margin: 1.75rem auto .75rem; }
.hm-cat__cab-listado .hm-h2 {
  font-size: clamp(1rem, .9rem + .35vw, 1.1875rem);       /* 16 → 19 px */
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--hm-tinta-2, rgba(0, 0, 0, .65));
}
.hm-cat__cab-listado .hm-h2 span[data-n] { color: var(--hm-tinta, rgba(0, 0, 0, .89)); font-weight: 650; }

/* ── entrada escalonada ──────────────────────────────────────────────────── */
@keyframes ahp-entra   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ahp-entra-t {          from { transform: translateY(10px); }   to {              transform: none; } }

.ahprodnav .sumi-cab .ahnav-migas { animation: ahp-entra 340ms cubic-bezier(.22, .61, .36, 1) both; }
.ahprodnav.hm-cat .sumi-titulo    { animation: ahp-entra 420ms cubic-bezier(.22, .61, .36, 1) 60ms both; }
/* transform SOLO: es el elemento LCP (ver arriba). */
.ahprodnav.hm-cat .prod-desc      { animation: ahp-entra-t 420ms cubic-bezier(.22, .61, .36, 1) 140ms both; }
.ahprodnav .sumi-cab .hm-cat__subs { animation: ahp-entra 420ms cubic-bezier(.22, .61, .36, 1) 220ms both; }
/* La píldora entra DESPUÉS del título y con su propio empujón: es donde cae
   el ojo cuando el contador empieza a subir. */
.ahprodnav.hm-cat .sumi-titulo .sumi-n { animation: ahp-entra 380ms cubic-bezier(.22, .61, .36, 1) 260ms both; }

@media (prefers-reduced-motion: reduce) {
  .ahprodnav .sumi-cab .ahnav-migas,
  .ahprodnav.hm-cat .sumi-titulo,
  .ahprodnav.hm-cat .prod-desc,
  .ahprodnav .sumi-cab .hm-cat__subs,
  .ahprodnav.hm-cat .sumi-titulo .sumi-n { animation: none; }
}


/* ══ v16 · EL LISTADO EN MÓVIL, AL LENGUAJE hims ══════════════════════════════
   Mario, 3-sep 14:10: sí a `_entrega_movil/PROPUESTA_MOVIL.md`. Todo lo de aquí
   abajo vive bajo `@media (max-width: 739.98px)` —o `(pointer: coarse)` cuando
   es un GESTO y no un layout— y no toca escritorio ni una línea.

   Medido en este árbol el 3-sep (`_entrega_movil/_medidas_antes.json`,
   390x844 is_mobile has_touch, /productos/brocas):

     · `.sumi-grid` en DOS columnas de 175 px y tarjeta 175 x 474 (1 : 2.7).
     · código 12.5 px, nombre 12 px — bajo el piso de 13.5 que pide hims.
     · el buscador mide 275 x 40, la vista 39 x 42 y el orden 246 x 36: tres
       blancos de toque por debajo de 44 px en la primera pantalla.
     · la primera tarjeta empieza a los 640 px.

   Lo que cambia:
     1. UNA columna, con la foto a la izquierda en 104 px y el texto a la
        derecha — la tarjeta pasa de 1 : 2.7 a algo que se lee de un vistazo.
     2. Tipografía: código 17 px azul, nombre y medidas 15 px.
     3. La barra de herramientas se PEGA bajo la cabecera y lleva el botón
        «Filtros» con el CONTADOR de filtros puestos (`data-n`, que escribe
        js/ahnsa-filtros-mc.js FUERA de `.sumi-lado`: el espejo prerender↔JS
        compara el `outerHTML` de `.sumi-lado` y no se entera de nada).
     4. La columna de filtros deja de ser una pantalla completa a sangre y pasa
        a HOJA INFERIOR con velo, asa y cabecera pegada — el recurso de la
        captura de hims que mandó Mario.
   NADA de esto toca `card_html()` ni `card()`: el espejo mide el `innerHTML` de
   `.sumi-grid` y aquí sólo se cambia CSS. `verifica_prod_cards` sigue en 19/19
   por construcción. */

@media (max-width: 739.98px) {
  /* ── 1. una sola columna, tarjeta horizontal ────────────────────────────── */
  .ahprodnav .sumi-grid { grid-template-columns: minmax(0, 1fr); gap: .625rem; }
  .ahprodnav .sumi-card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    gap: .875rem; align-items: start;
    padding: .75rem; border-radius: var(--hm-r-card-m, 1rem);
    border: 1px solid rgba(0, 0, 0, .12);
  }
  /* La foto deja de ser una banda de 170 px de alto y pasa a cuadro de 104. */
  .ahprodnav .sumi-card-vis {
    width: 104px; height: 104px; padding: .375rem;
    border-radius: .75rem; background: #fff; align-self: start;
  }
  .ahprodnav .sumi-card-foto { max-width: 100%; }
  .ahprodnav .sumi-card-c { padding: 0; gap: .25rem; }
  /* El corazón vuelve a la esquina de la TARJETA, no de la foto. */
  .ahprodnav .sumi-fav { top: .5rem; right: .5rem; width: 44px; height: 44px; background: rgba(255, 255, 255, .92); }

  /* ── 2. tipografía: se lee sin acercar el teléfono ──────────────────────── */
  .ahprodnav .sumi-card-cod { font-size: 17px; font-weight: 700; letter-spacing: -.01em; min-height: 44px; display: inline-flex; align-items: center; }
  .ahprodnav .sumi-card-nombre { font-size: 15px; line-height: 1.35; }
  .ahprodnav .sumi-card-dims { font-size: 15px; font-variant-numeric: tabular-nums; }
  .ahprodnav .sumi-card-fam { font-size: 13px; }
  .ahprodnav .sumi-exi { font-size: 13px; }
  .ahprodnav .sumi-card-acc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: .5rem; padding-top: .625rem; }
  .ahprodnav .sumi-ver, .ahprodnav .sumi-cot { font-size: 13.5px; min-height: 44px; border-radius: var(--hm-r-pill, 3rem); }
  /* El rotulo largo lo enciende un @container de 262 px sobre la TARJETA, y en
     una sola columna la tarjeta mide 358: se encendia y no cabia — medido, la
     pastilla decia «regar a cotización». Con dedo se queda el corto, que es lo
     mismo que ya hace el escritorio entre 820 y 1399 px. El @container no
     anade especificidad, asi que basta con ir despues. */
  .ahprodnav .sumi-cot-l { display: none; }
  .ahprodnav .sumi-titulo { font-size: 26px; line-height: 1.08; letter-spacing: -.022em; }
  .ahprodnav .prod-desc { font-size: 15px; line-height: 1.45; }

  /* ── 3. la barra pegajosa: Filtros con contador + buscador de 52 px ─────── */
  /* `top` es la altura del header fijo, para que la barra encaje justo debajo.
     LO QUE DECIA AQUI ERA FALSO, Y ERA EL DEFECTO (medido el 6-sep 20:5x; Mario:
     «esta parte when scrolling down looks awful en mobile»). Decia: «Si el header
     se esconde al bajar (.is-oculto) queda un hueco de 72 px sobre la barra; eso es
     una franja blanca, no una barra rota».
     No es una franja blanca. `nav.hm-hdr` es `position: fixed` y bajo 740 px se
     esconde moviendo su `top` a -74 (hims.css:3805), asi que NO PINTA NADA ahi: el
     hueco es TRANSPARENTE y el listado corre por debajo. Medido a 390x844 con
     `elementFromPoint(195, barra.y - 20)` en scrollY 900 y 1800: devuelve
     `.sumi-ver` y `.sumi-card-dims` — los botones y las cotas de las tarjetas
     pasando por encima, con el borde de una tarjeta cortando la barra por la mitad.
     En captura no se ve pegajosa: se ve rota.
     El arreglo es que la barra SIGA al header en vez de suponerlo: con el header
     escondido sube a 0 y no queda hueco; en cuanto vuelve —el mismo gesto de subir
     el dedo le quita `.is-oculto`— regresa a los 72 px, que es donde encaja.
     Los 200 ms lineales son los MISMOS del `top` del header (hims.css:3805-3807):
     con otra duracion una llega antes que el otro y se ve el salto. */
  .ahprodnav .sumi-barra {
    position: sticky; top: var(--hm-hdr-row, 4.5rem); z-index: 50;
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 .625rem; padding: .625rem 0 .5rem;
    background: #fff; border-bottom: 1px solid var(--hm-hairline, rgba(0, 0, 0, .06));
    transition: top 200ms linear;
  }
  body:has(nav.hm-hdr.is-oculto) .ahprodnav .sumi-barra { top: 0; }
  .ahprodnav .sumi-abrir-filtros {
    order: 1; flex: none; min-height: 52px; padding: 0 1.125rem;
    border-radius: var(--hm-r-pill, 3rem); font-size: 15px; gap: .5rem;
  }
  /* El contador de filtros puestos. Sale del `data-n` que escribe
     js/ahnsa-filtros-mc.js al repintar los chips; sin filtros no hay atributo y
     no hay pastilla — nada que reservar, nada que mover: CLS 0. */
  .ahprodnav .sumi-abrir-filtros[data-n]::after {
    content: attr(data-n);
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 .25rem;
    border-radius: 10px; background: var(--hm-oro, #EAB188); color: #241206;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .ahprodnav .sumi-q {
    order: 2; flex: 1 1 0; min-width: 0; max-width: none;
    min-height: 52px; font-size: 16px;   /* 16 px o iOS hace zoom al enfocar */
    border-radius: var(--hm-r-pill, 3rem);
  }
  /* Vista y orden bajan a su propia fila: en una sola línea con el buscador
     empujaban el botón de Filtros fuera de la ventana (el fallo de 10 px de
     scroll horizontal que cazó la maqueta). */
  .ahprodnav .sumi-herr { order: 3; width: 100%; margin-left: 0; gap: .5rem; }
  .ahprodnav .sumi-vista button { width: 44px; min-height: 44px; }
  .ahprodnav .sumi-orden { min-height: 44px; font-size: 14px; }
  .ahprodnav .sumi-chips { margin-bottom: .5rem; }

  /* ── 4. los filtros como HOJA INFERIOR ──────────────────────────────────── */
  /* El velo se dibuja con un pseudo-elemento de la raíz: no hay que añadir un
     nodo al árbol, y sobre todo no hay que tocar nada DENTRO de `.sumi-lado`,
     que es lo que compara el espejo prerender↔JS. */
  .ahsumi.ahprodnav.filtros-abiertos::before {
    content: ""; position: fixed; inset: 0; z-index: 59;
    background: rgba(3, 12, 36, .55);
  }
  .ahsumi.ahprodnav .sumi-lado {
    top: auto; bottom: 0; left: 0; right: 0;
    max-height: 86vh; overflow: auto; -webkit-overflow-scrolling: touch;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -12px 40px rgba(3, 12, 36, .35);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ahsumi.ahprodnav .sumi-lado-h {
    border-radius: 1.5rem 1.5rem 0 0;
    padding-top: 1.125rem;   /* deja sitio al asa */
  }
  /* El asa de la hoja: el mismo recurso de la captura de hims. */
  .ahsumi.ahprodnav .sumi-lado-h::before {
    content: ""; position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .19);
  }
  .ahsumi.ahprodnav .sumi-lado-h { position: sticky; }
  .ahsumi.ahprodnav .sumi-cerrar-filtros,
  .ahsumi.ahprodnav .mcf-limpiar { min-height: 44px; }

  /* ── 5. paginación y banda ──────────────────────────────────────────────── */
  .ahprodnav .sumi-mas { min-height: 52px; border-radius: var(--hm-r-pill, 3rem); font-size: 15px; }
  .ahprodnav .sumi-banda { padding: .75rem .875rem; }
}

/* Gestos, no layout: el ancho decide el layout, `pointer` decide los gestos. */
@media (pointer: coarse) {
  .ahprodnav .sumi-q { min-height: 44px; }
  .ahprodnav .sumi-orden { min-height: 44px; }
  .ahprodnav .sumi-vista button { min-height: 44px; }
  .ahprodnav .sumi-fav { width: 44px; height: 44px; }
}