/* ===========================================================================
   REJILLA DE CATEGORÍAS DE LA PORTADA — "la estantería"
   Tres herramientas recortadas por categoría, flotando sobre el papel, y
   debajo el nombre, los artículos y los apartados. Sin marcos: el mismo
   lenguaje que el carrusel 3D.
   =========================================================================== */

.wkcat{
  --wkcat-sombra:rgba(18,16,14,.20);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:44px 28px;
  max-width:var(--wk-ancho,1380px);
  margin-inline:auto;
}
html[data-tema="oscuro"] .wkcat{ --wkcat-sombra:rgba(0,0,0,.5); }

.wkcat__c{display:block;text-decoration:none;position:relative}

/* La escena: la herramienta grande delante y dos más pequeñas asomando a los
   lados. Alto fijo para que todas las celdas cuadren aunque los productos
   sean de proporciones muy distintas. */
.wkcat__esc{position:relative;display:block;height:180px}
.wkcat__f{position:absolute;bottom:24px;object-fit:contain;object-position:center bottom;
  transition:transform 320ms var(--wk-ease,cubic-bezier(.2,.6,.2,1))}
.wkcat__f--0{left:50%;width:62%;height:124px;transform:translateX(-50%);z-index:3;
  filter:drop-shadow(0 18px 14px var(--wkcat-sombra))}
.wkcat__f--1{left:2%;width:36%;height:74px;z-index:2;opacity:.85}
.wkcat__f--2{right:2%;width:36%;height:74px;z-index:1;opacity:.85}
.wkcat__suelo{
  position:absolute;left:50%;bottom:14px;width:76%;height:18px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--wkcat-sombra),rgba(18,16,14,0) 70%);
}
/* En oscuro una sombra oscura no existe: bajo la herramienta va un charco de
   luz tenue, como cuando algo se apoya en una superficie oscura y brillante. */
html[data-tema="oscuro"] .wkcat__suelo{
  background:radial-gradient(ellipse at center,rgba(255,255,255,.08),rgba(255,255,255,0) 70%);
}

.wkcat__pie{
  position:relative;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-top:1px solid var(--wk-filete);padding-top:12px;
}
/* top:-1px para tapar el filete gris de 1px en vez de dibujar una segunda
   línea debajo. El gris se queda: es la estructura; el rojo es el gesto. */
.wkcat__pie::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--wk-rojo);transform:scaleX(0);transform-origin:left;
  transition:transform .18s var(--wk-ease,ease);
}
.wkcat .wkcat__nom{
  font-family:var(--wk-cond) !important;
  font-size:17px;line-height:1.2;color:var(--wk-tinta) !important;
  text-transform:none !important;letter-spacing:0 !important;font-weight:600;
  transition:color 200ms var(--wk-ease,ease);
  min-width:0;
  /* Dos líneas reservadas: "Knarren, Verlängerungen, Adapter, Zubehör" ocupa
     dos y descuadraba su fila entera (chequeo visual 2026-09-07). */
  min-height:2.4em;
}
.wkcat__n{
  font-family:var(--wk-mono);font-size:12px;white-space:nowrap;
  color:var(--wk-tinta-3) !important;font-variant-numeric:tabular-nums;
}
.wkcat__sub{
  display:block;margin-top:6px;
  font-family:var(--wk-mono);font-size:12px;letter-spacing:.04em;
  color:var(--wk-tinta-3) !important;
  transition:color 200ms var(--wk-ease,ease);
}

@media (hover:hover) and (pointer:fine){
  .wkcat__c:hover .wkcat__f--0{transform:translateX(-50%) translateY(-6px)}
  .wkcat__c:hover .wkcat__f--1{transform:translateX(-8px)}
  .wkcat__c:hover .wkcat__f--2{transform:translateX(8px)}
  .wkcat__c:hover .wkcat__nom,
  .wkcat__c:hover .wkcat__sub{color:var(--wk-rojo) !important}
  .wkcat__c:hover .wkcat__pie::after{transform:scaleX(1)}
}
.wkcat__c:focus-visible{outline:2px solid var(--wk-rojo);outline-offset:6px}

@media (max-width:1200px){
  .wkcat{grid-template-columns:repeat(3,1fr);gap:38px 24px}
}
@media (max-width:900px){
  .wkcat{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .wkcat__esc{height:150px}
  .wkcat__f--0{height:104px}
  .wkcat__f--1,.wkcat__f--2{height:62px}
}
@media (max-width:560px){
  .wkcat{gap:28px 16px}
  .wkcat__esc{height:126px}
  .wkcat__f--0{height:88px}
  .wkcat__f--1,.wkcat__f--2{height:52px}
  .wkcat .wkcat__nom{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .wkcat__f{transition:none}
}