/* ============================================================
   CATÁLOGO — filtros, grid y visor
   ============================================================ */

.cat-hero .sec-head{ margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

/* -- Chips de filtro -- */
.cat-filtros{
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1rem;
}
.chip{
  padding: .55rem 1.1rem; border-radius: 999px; font-size: .86rem; font-weight: 700;
  border: 1.5px solid var(--linea-2); color: var(--gris);
  background: transparent; cursor: pointer; transition: all .25s;
  white-space: nowrap;
}
.chip span{ color: var(--gris-2); font-weight: 600; }
.chip:hover{ border-color: var(--amarillo); color: var(--hueso); }
.chip.is-active{ background: var(--amarillo); border-color: var(--amarillo); color: var(--negro); }
.chip.is-active span{ color: rgba(5,5,5,.6); }

.cat-contador{
  color: var(--gris-2); font-size: .86rem; margin: 0 0 1.5rem;
}

/* -- Grid -- */
.cat-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .9rem;
}
.cat-item{
  position: relative; display: block; padding: 0; border: none; cursor: pointer;
  background: #000; border-radius: 12px; overflow: hidden;
  aspect-ratio: 3 / 4; transition: transform .25s;
}
.cat-item:hover{ transform: translateY(-3px); }
.cat-item img{
  /* contain, no cover: el precio real ya viene impreso en la foto (arriba o
     abajo, varía por imagen) — recortar a cover lo corta al azar y a veces
     lo deja justo detrás de nuestra propia etiqueta, dos precios encimados.
     Mostrar la foto completa es lo honesto para un catálogo real. */
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.cat-item__tag{
  position: absolute; top: .5rem; left: .5rem;
  padding: .3rem .55rem; border-radius: 6px; font-size: .68rem; font-weight: 800;
  color: var(--negro); background: var(--amarillo);
  text-align: left; line-height: 1.2;
}
.cat-item.is-oculto{ display: none; }

/* -- Migas (compartido con blog si no cargó ya) -- */
.crumbs{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  font-size:.82rem; color:var(--gris-2); margin-bottom:1.6rem;
}
.crumbs a{ color:var(--gris); text-decoration:none; }
.crumbs a:hover{ color:var(--amarillo); }
.crumbs .here{ color:var(--hueso); }

/* -- Visor modal -- */
.cat-modal{
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
}
.cat-modal.is-open{ display: flex; }
.cat-modal__backdrop{
  position: absolute; inset: 0; background: rgba(5,5,5,.92); backdrop-filter: blur(4px);
}
.cat-modal__box{
  position: relative; z-index: 1; width: 100%; max-width: 920px; max-height: 92vh;
  display: grid; grid-template-columns: 1.3fr 1fr;
  background: var(--negro-2); border-radius: 16px; overflow: hidden;
  border: 1px solid var(--linea-2);
}
.cat-modal__img{
  width: 100%; height: 100%; max-height: 92vh; object-fit: contain; background: var(--negro);
  display: block;
}
.cat-modal__info{
  padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column;
  justify-content: center; gap: .9rem;
}
.cat-modal__cat{
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--amarillo);
}
.cat-modal__info h2{
  font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; margin: 0;
}
.cat-modal__precio{
  font-family: var(--display); color: var(--amarillo); font-size: 1.6rem; margin: 0;
}
.cat-modal__precio:empty{ display: none; }
.cat-modal__cerrar{
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(5,5,5,.7); color: var(--hueso); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cat-modal__cerrar svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.cat-modal__cerrar:hover{ background: var(--amarillo); color: var(--negro); }

@media (max-width: 720px){
  .cat-modal__box{ grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .cat-modal__img{ max-height: 55vh; }
  .cat-grid{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
}