/* ---------- página de categoría ---------- */
.cat-empty{padding:40px 0;max-width:56ch}
.cat-empty h1{font-size:clamp(28px,3.6vw,38px);font-weight:700;margin-bottom:14px}
.cat-empty p{color:var(--ink-mid);font-size:16px;margin-bottom:22px}
.cat-back{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:13px;
  font-weight:600;color:var(--glow-aa);text-decoration:none}
.cat-back:hover{text-decoration:underline}

/* El tope de 70ch ya NO vive aquí (pasó a .cat-intro, su medida de lectura):
   así, en escritorio, el título + conteo pueden usar el ancho que sobra a la
   izquierda del intro. Ver la rejilla de dos columnas más abajo. */
.cat-head{margin-bottom:28px}
/* margin-top:0 — h1 es siempre el primer hijo de .cat-head (ya no hay
   eyebrow antes); con margen superior colapsaría con el padding-top de
   .sec-top y se sumaría al hueco que justo se está recortando. */
.cat-head h1{font-size:clamp(30px,4vw,44px);font-weight:700;margin:0 0 12px}
.cat-count{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  color:var(--glow-aa);margin-bottom:14px}
/* El intro conserva su medida de lectura de 70ch (antes la daba .cat-head;
   ahora vive aquí, en el párrafo, para que el título use el resto del ancho).
   En escritorio va en la columna derecha de la rejilla de abajo. */
.cat-intro{color:var(--ink-mid);font-size:16.5px;max-width:70ch}

/* Encabezado en dos columnas en escritorio (>=900px): título + conteo a la
   izquierda tomando lo que sobra (1fr), e intro a la derecha conservando sus
   70ch (columna `auto` = lo que mide el párrafo, topado por su propio
   max-width). Alineados arriba (align-items:start). Debajo de 900px se apila
   como antes, en una sola columna y en orden de documento. Solo cuando hay
   intro (:has(.cat-intro)): una categoría sin intro queda como bloque normal
   —título y conteo— sin una columna vacía a la derecha. El quiebre de 900px
   es el mismo que ya usan las guías para pasar a dos columnas. */
@media(min-width:900px){
  .cat-head:has(.cat-intro){display:grid;grid-template-columns:1fr auto;
    column-gap:48px;align-items:start}
  .cat-head:has(.cat-intro) h1{grid-column:1;grid-row:1}
  .cat-head:has(.cat-intro) .cat-count{grid-column:1;grid-row:2}
  .cat-head:has(.cat-intro) .cat-intro{grid-column:2;grid-row:1 / span 2}
}

.cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cf-btn{padding:8px 16px;border:1px solid var(--line);border-radius:20px;background:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-mid);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.cf-btn:hover{border-color:var(--glow-dk);color:var(--ink)}
.cf-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--stone)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:14px}
/* Celular: dos tarjetas por renglón. El auto-fill de arriba, con su mínimo de
   240px, cae a UNA sola columna por debajo de ~544px de viewport (240·2 + gap
   + sangría ya no caben) — en un celular de 360px eso dejaba la página larguísima
   (~6400px en bombas de calor). Se fuerzan 2 columnas iguales hasta 543px; a
   partir de 544px el auto-fill ya da 2 por sí solo, así que el relevo es parejo.
   A 2 columnas en 360px cada tarjeta mide ~148px: el número grande del bloque de
   identidad (p. ej. "119,000 BTU") no cabe a su tamaño de ficha, así que SOLO aquí
   —acotado a .cat-grid .pcard-id, nunca a .prod-vis-* de css/09 ni a las guías— se
   achica y se le reduce la sangría. La ficha de producto no cambia ni un pixel. */
@media(max-width:543px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid .pcard-id{padding:10px 8px;gap:3px}
  .cat-grid .pcard-id .prod-vis-big{font-size:clamp(20px,6.4vw,30px)}
  .cat-grid .pcard-id .prod-vis-name{font-size:clamp(14px,3.6vw,18px)}
}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:5px;
  overflow:hidden;text-decoration:none;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,36,34,.13)}
.pcard-img{height:130px;position:relative;overflow:hidden;background:var(--deep-2)}
/* Bloque de identidad: reemplaza la vieja foto de agua en la tarjeta de
   producto. Misma estructura y paleta que el bloque de la ficha (.prod-vis),
   pero a escala de tarjeta: el dato grande en IBM Plex Mono (no Bricolage),
   marca y serie en mono mayúsculas pequeñas como en la ficha. La altura la
   sigue fijando .pcard-img (130px aquí, 90/120px en guías); el contenido se
   centra y lo que sobre se recorta (overflow:hidden). Las reglas .prod-vis-*
   base viven en css/09; aquí se pisan por especificidad (.pcard-id .prod-vis-*)
   para quitarles el posicionado absoluto y el tamaño gigante de la ficha. */
.pcard-id{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;padding:12px 16px;text-align:center;color:var(--stone);
  background:linear-gradient(160deg,var(--ink) 0%,var(--deep-2) 55%,var(--deep-3) 100%)}
.pcard-id .prod-vis-top{position:static;inset:auto;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(235,233,226,.72);max-width:100%}
.pcard-id .prod-vis-big{font-family:'IBM Plex Mono',monospace;font-weight:600;
  font-size:clamp(30px,7vw,42px);line-height:.95;color:var(--glow);letter-spacing:-.01em}
.pcard-id .prod-vis-big small{font-size:.42em;font-weight:500;margin-left:.1em;color:var(--stone)}
.pcard-id .prod-vis-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(15px,3.6vw,20px);line-height:1.12;color:var(--glow);letter-spacing:-.01em;max-width:100%}
.pcard-tag{position:absolute;left:12px;top:12px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:var(--glow);background:rgba(5,32,31,.8);padding:4px 8px;border-radius:2px;z-index:3}
.pcard-b{padding:16px 18px 18px}
/* Mismo motivo que .card-b h3: color explícito para que no herede el
   texto claro de una caja oscura (guia.html). */
.pcard-b h3{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.pcard-price{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--glow-aa);margin-bottom:6px}
.pcard-price .prov{font-size:12px;margin-left:1px}
/* "Desde": solo en productos con presentaciones (ver productos.js). Va en
   IBM Plex Sans, no mono, y en --ink-mid: es la palabra que aclara, el
   número sigue siendo el dato. */
.pcard-price .desde{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink-mid)}
.cat-note{font-size:12px;color:var(--ink-mid);margin-bottom:40px}

.cat-close{background:var(--deep-2);color:var(--stone);border-radius:6px;padding:28px 26px;
  max-width:60ch;margin-bottom:20px}
.cat-close b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;margin-bottom:6px}
.cat-close p{font-size:14.5px;color:rgba(235,233,226,.82);margin-bottom:18px}
/* Texto en --ink, no blanco: blanco sobre --glow-dk da 2.97:1, no pasa
   4.5:1. --ink sobre --glow-dk mide 5.49:1 en reposo. En hover
   (opacity:.9) el peor caso es sobre página blanca (producto.html,
   "Ir a la calculadora"/"Comprar"): 4.55:1, sigue arriba de 4.5:1 pero
   con poco margen — no bajar más la opacidad del hover sin remedir. Sobre
   --stone da 4.58:1 y sobre --deep-2 (categoria.html, "Escríbenos" en
   .cat-close, que es oscuro) da 4.73:1. */
.btn-glow{background:var(--glow-dk);color:var(--ink)}
.btn-glow:hover{opacity:.9}

@media(max-width:520px){
  .sec{padding:54px 0}
}

/* ---------- página de catálogo completo (catalogo.html) ----------
   Un grupo por tema (bloque 9 de app.js, GRUPOS_CATALOGO — tres grupos,
   no las siete familias del riel); cada tarjeta reusa .card tal cual.
   El título es el del grupo, tal como lo declaró Patricio (provisional,
   no se retoca aquí), con una línea que lo separa del siguiente. */
.catg{margin-bottom:40px}
.catg:last-child{margin-bottom:0}
.catg-h{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.1vw,23px);
  font-weight:700;letter-spacing:.01em;color:var(--ink-mid);
  padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid var(--line)}
/* .cat-grid (arriba) usa grid-template-columns:repeat(auto-fill,...): bien
   para una sola categoría con muchos productos, mal aquí, donde el grupo
   chico (2 tarjetas) se estiraría al ancho del grande (6) y dejaría de
   verse como el mismo componente. .catg-grid también es grid, pero con
   un número FIJO de columnas (2 o 3 según el ancho, ver abajo) en vez de
   auto-fill — así el ancho de tarjeta es idéntico sin importar si el
   grupo tiene 2 o 6, y un grupo incompleto (5 tarjetas en 3 columnas dan
   fila de 2) deja el hueco vacío en vez de estirar la última tarjeta.
   Se probó primero con flex (flex:1 1 0, "como 1fr pero sin cambiar de
   display"): no sirve, flex-wrap solo pasa de línea cuando los ítems ya
   no pueden encoger más, y con flex-basis:0 SIEMPRE pueden encoger, así
   que las 6 tarjetas de un grupo terminaban apretadas en una sola fila
   en vez de 2 filas de 3. Grid no tiene ese problema: el número de
   columnas es una propiedad del contenedor, no una consecuencia del
   encogimiento. Sin tope de ancho: el contenedor es el mismo .wrap que
   usa el resto del sitio (categoria.html incluido), no uno propio menor.
   flex:0 0 262px de .card (la regla que comparte con el riel) no aplica
   aquí: flex-basis/grow/shrink no hacen nada dentro de un contenedor
   grid, así que el ancho de columna manda sin pisar el riel. */
.catg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:14px}
/* Celular: 2 columnas (regla base, arriba). Por debajo de 588px de ancho
   de viewport, 2 .card de 262px fijos (más su gap y el padding de .wrap)
   ya no caben solos — por eso 2 columnas aquí es a propósito, no lo que
   quedaba del ancho fijo de antes. */
/* Escritorio: 3 columnas desde 588px, donde ya cabían 2 de 262px sin
   ayuda — mismo quiebre de siempre, ahora también gobierna cuándo pasa
   a 3. */
@media(min-width:588px){
  .catg-grid{grid-template-columns:repeat(3,1fr)}
}