/* ============================================================
   Catálogo: índice de productos, tarjetas y listas por industria
   ============================================================ */

.item-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(var(--sp-4),2.5vw,var(--sp-8)); }
.prod-row{
  display:flex; align-items:baseline; gap:var(--sp-2); padding:var(--sp-4) 0;
  border-top:1px solid var(--line); font-size:var(--fs-xs); line-height:1.4; color:var(--graphite);
  transition:color .2s ease, border-color .2s ease;
}
.prod-row .n{ font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; color:var(--steel-light); }
.prod-row .t{ flex:1; }
.prod-row.is-static{ color:var(--steel); }
.prod-row .ar{ margin-left:auto; display:inline-flex; color:var(--steel-light); transform:translateX(-4px); opacity:0; transition:opacity .2s ease, transform .25s ease; }
a.prod-row:hover{ color:var(--yellow-dim); border-color:var(--yellow); }
a.prod-row:hover .ar{ opacity:1; transform:translateX(0); color:var(--yellow-dim); }
@media (max-width:560px){ .item-list{ grid-template-columns:1fr; } }

/* Variantes de un mismo producto (ej.: estabilización UV del film de invernadero) */
.variant-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(var(--sp-4),2.2vw,var(--sp-8)); }
.variant-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--blue-900); }
.variant-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.variant:hover .variant-media img{ transform:scale(1.05); }
.variant-tag{
  position:absolute; left:0; bottom:0; background:var(--yellow); color:var(--navy);
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:var(--sp-2) var(--sp-3);
}
.variant h3{ font-family:var(--font-body); font-weight:600; font-size:var(--fs-body); color:var(--navy); margin:var(--sp-4) 0 var(--sp-2); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.variant p{ font-size:var(--fs-xs); line-height:1.6; color:var(--steel); }
@media (max-width:980px){ .variant-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .variant-grid{ grid-template-columns:1fr; } }

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--steel-light); }
.crumbs a{ color:var(--steel-light); }
/* Sobre fondo oscuro (heroes con foto) las migas usan el gris para fondo oscuro. */
.on-dark .crumbs, .on-dark .crumbs a{ color:var(--on-dark-600); }
.crumbs a:hover{ color:var(--yellow); }
.crumbs em{ font-style:normal; color:var(--white); }

.spec-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.pill.pill-line{ background:transparent; border-color:var(--line-on-dark); color:var(--on-dark-400); text-transform:none; font-weight:500; letter-spacing:.02em; padding:var(--sp-2) var(--sp-4); font-size:var(--fs-xs); }
.pill.pill-line b{ color:var(--yellow); font-weight:600; text-transform:uppercase; letter-spacing:.09em; font-size:var(--fs-lbl); margin-right:var(--sp-2); }
a.pill.pill-line{ transition:border-color .2s ease, color .2s ease; }
a.pill.pill-line:hover{ border-color:var(--yellow); color:var(--white); }

/* Fotografía del producto dentro de su ficha. Fondo blanco y `contain` porque
   el catálogo son recortes sobre blanco, no fotografías con contexto: al
   recortarlas a sangre se pierde justo la forma del producto. */
.ficha-foto{
  margin:0; padding:var(--card-pad);
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
}
.ficha-foto img{
  width:100%; max-height:340px; object-fit:contain; display:block;
}
.ficha-foto figcaption{
  margin-top:var(--sp-3); font-family:var(--font-mono); font-size:var(--fs-lbl);
  letter-spacing:.06em; text-transform:uppercase; color:var(--steel-light);
}

/* ============================================================
   Catálogo plano y filtrable

   La industria dejó de ser una jerarquía del menú y pasó a ser una
   pastilla más. Las filas se ocultan con el atributo hidden desde el
   navegador: no hay recarga ni petición.
   ============================================================ */
.cat-filtros{
  padding:clamp(var(--sp-4),2.2vw,var(--sp-6)); margin-bottom:clamp(var(--sp-8),3.4vw,var(--sp-12));
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.cat-filtro-fila{ display:flex; align-items:baseline; gap:var(--sp-4); flex-wrap:wrap; }
.cat-filtro-tit{
  flex:0 0 88px; font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
}
.cat-filtro-ops{ display:flex; flex-wrap:wrap; gap:var(--sp-2); flex:1; min-width:0; }
.filtro{
  padding:var(--sp-2) var(--sp-4); cursor:pointer; font-family:inherit;
  font-size:var(--fs-xs); font-weight:600; line-height:1.3;
  color:var(--blue-800); background:var(--white);
  border:1px solid var(--line); border-radius:999px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.filtro:hover{ border-color:var(--navy-soft); }
.filtro[aria-checked="true"]{ background:var(--navy-deep); border-color:var(--navy-deep); color:var(--white); }
.cat-filtro-pie{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  padding-top:var(--sp-4); border-top:1px solid var(--line);
}

.cat-grupo{ margin-bottom:clamp(var(--sp-8),3.6vw,var(--sp-12)); }
.cat-grupo[hidden]{ display:none; }
.cat-grupo-head{ display:flex; align-items:baseline; gap:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:2px solid var(--navy); }
.cat-grupo-head h2{
  margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:var(--fs-d5); color:var(--navy);
}
.cat-grupo-head span{
  margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-lbl);
  letter-spacing:.06em; text-transform:uppercase; color:var(--steel);
}

/* Cinco columnas: foto, nombre, ancho, espesor y flecha. Los dos datos van
   en la fila y no en la ficha porque son justamente los que el comprador
   compara antes de entrar a ninguna parte. */
.cat-fila{
  display:grid; grid-template-columns:64px minmax(0,2.2fr) 1fr 1fr 24px;
  align-items:center; gap:clamp(var(--sp-3),1.6vw,var(--sp-6));
  padding:var(--sp-4) 0; border-bottom:1px solid var(--line); color:inherit;
  transition:background .18s ease;
}
.cat-fila[hidden]{ display:none; }
.cat-fila:hover{ background:var(--blue-100); }
.cat-fila-foto{
  width:64px; height:64px; display:grid; place-items:center; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.cat-fila-foto img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-1); }
.cat-fila-nombre{
  display:flex; flex-direction:column; gap:3px; min-width:0;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-d6);
  letter-spacing:-.01em; color:var(--navy);
}
.cat-fila-nombre em{
  font-family:var(--font-body); font-style:normal; font-weight:400;
  font-size:var(--fs-xs); line-height:1.45; color:var(--steel);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cat-fila-dato{ display:flex; flex-direction:column; gap:3px; font-size:var(--fs-xs); color:var(--graphite); }
.cat-fila-dato b{
  font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--steel-light);
}
.cat-fila-ar{ display:inline-flex; justify-content:flex-end; color:var(--steel-light); transition:color .18s ease, transform .22s ease; }
.cat-fila:hover .cat-fila-ar{ color:var(--yellow-dim); transform:translateX(3px); }

.cat-vacio{
  padding:var(--sp-8); text-align:center; font-size:var(--fs-xs); color:var(--steel);
  background:var(--paper); border:1px dashed var(--line); border-radius:var(--radius);
}
.cat-vacio[hidden]{ display:none; }
.cat-vacio a{ color:var(--blue-700); text-decoration:underline; }

@media (max-width:920px){
  .cat-fila{ grid-template-columns:56px minmax(0,1fr) 24px; row-gap:var(--sp-2); }
  .cat-fila-dato{ grid-column:2 / 4; flex-direction:row; gap:var(--sp-2); align-items:baseline; }
  .cat-fila-foto{ width:56px; height:56px; grid-row:span 3; align-self:start; }
  .cat-filtro-tit{ flex-basis:100%; }
}


/* Variantes en dos columnas en todos los tamaños (ficha de producto). */
.variant-grid.cols-2{ grid-template-columns:1fr 1fr; }