:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --kf-gris-suave: #8a7f86; --kf-fondo-foto: #f4edf2; --kf-linea: #eadfe7; }
.seccion-catalogo { padding: 3rem 0 4.5rem; }
.lista-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: .5rem 2rem;
  border-bottom: 1px solid var(--kf-linea);
  margin-bottom: 2rem;
}
.lista-cabecera h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin: 0; line-height: 1.1; }
.lista-cabecera .conteo { display: inline-block; font-size: .82rem; color: var(--kf-gris-suave); margin: .35rem 0 1rem; }

.tabs-cat { position: relative; display: flex; gap: 1.75rem; }
.tabs-cat button {
  background: none; border: 0;
  padding: 0 0 1rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--kf-gris-suave);
  transition: color 200ms ease;
}
.tabs-cat button:hover, .tabs-cat button.activo { color: var(--kf-carbon); }
.tabs-indicador {
  position: absolute; left: 0; bottom: -1px;
  width: 1px; height: 2px;
  background: var(--kf-morado);
  transform-origin: left center;
  transition: transform 280ms var(--ease-out);
}

.producto { cursor: pointer; outline-offset: 6px; border-radius: 6px; }
.producto-foto {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--kf-fondo-foto);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 160ms ease-out;
}
.producto-foto img {
  position: absolute; left: 12%; top: 10%;
  width: 76%; height: 80%;
  object-fit: contain;
  transition: opacity 300ms ease, transform 450ms var(--ease-out);
}
.producto-foto .espalda { opacity: 0; }
.producto-ver {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 4px;
  padding: .65rem;
  text-align: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kf-carbon);
  transform: translateY(calc(100% + .75rem));
  transition: transform 260ms var(--ease-out);
}
.producto:active .producto-foto { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .producto:hover .frente { opacity: 0; }
  .producto:hover .espalda { opacity: 1; }
  .producto:hover .producto-foto img { transform: scale(1.03); }
  .producto:hover .producto-ver { transform: translateY(0); }
}
.producto-info { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .85rem; }
.producto-info h3 { font-family: "Montserrat", sans-serif; font-size: .92rem; font-weight: 600; margin: 0; line-height: 1.3; }
.producto .ref { font-size: .7rem; letter-spacing: .08em; color: var(--kf-gris-suave); white-space: nowrap; }
.producto .cat { display: block; font-size: .78rem; color: var(--kf-rosa); margin-top: .2rem; }
@media (max-width: 575.98px) {
  .tabs-cat { gap: 1.1rem; }
  .tabs-cat button { font-size: .7rem; letter-spacing: .1em; }
  .producto-info { flex-direction: column; gap: .15rem; }
}
.lista-cabecera h1.lista-titulo { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; margin: 0; line-height: 1.1; }
.sticker-recomendado {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  background: var(--kf-morado); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .65rem; border-radius: 4px;
}
.sticker-detalle { position: static; display: inline-block; margin-left: .6rem; vertical-align: middle; }
.producto-foto .sticker-recomendado {
  top: .7rem; left: .7rem; right: auto;
  background: linear-gradient(135deg, #b8648c 0%, #8e5a9b 100%);
  box-shadow: 0 6px 16px rgba(142, 90, 155, .35);
  padding: .45rem .75rem; font-size: .64rem; letter-spacing: .1em;
}