/* ==========================================================================
   Galería
   La tarjeta de pieza (.obra) y su grilla (.obras) son compartidas: viven en app.css.
   ========================================================================== */

.muestrario { padding-top: clamp(44px, 5vw, 64px); }

/* ---- Filtros -------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(36px, 4.5vw, 56px);
  padding-bottom: clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.filtro:hover { border-color: var(--c5); }

.filtro-cantidad {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding-inline: 7px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--c5);
  font: 500 .72rem/1 var(--ff-mono);
  transition: background-color .2s, color .2s;
}

.filtro.es-activo {
  border-color: var(--c5);
  background: var(--c5);
  color: #fff;
}

.filtro.es-activo .filtro-cantidad {
  background: rgba(192, 191, 237, .22);
  color: #fff;
}

/* ---- En el panel, la ficha de una pieza es más breve que la de un servicio -- */

.dp-copy .dp-facts { margin-top: 6px; }

@media (max-width: 640px) {
  .filtros {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
}