/* Catálogo — layout de filtros + grid */
.catalog-hero { padding: var(--s-7) 0 var(--s-5); text-align: center; }
.catalog-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.catalog-hero p { max-width: 560px; margin: var(--s-3) auto 0; }

.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--s-6); align-items: start; }

.filters { position: sticky; top: 100px; }
.filters__group { margin-bottom: var(--s-5); }
.filters__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-calido); margin-bottom: var(--s-3); }
.filters__list { display: flex; flex-direction: column; gap: 2px; }
.filter-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-radius: 100px; font-size: 0.9rem; color: var(--texto);
  transition: background .25s, color .25s; text-align: left;
}
.filter-chip:hover { background: var(--gris-claro); }
.filter-chip.is-active { background: var(--verde-profundo); color: var(--blanco-calido); }
.filter-chip small { font-size: 0.75rem; opacity: 0.6; }

.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.catalog-count { font-size: 0.9rem; color: var(--gris-calido); }
.catalog-sort { display: flex; align-items: center; gap: var(--s-2); }
.catalog-sort select { font-family: inherit; font-size: 0.9rem; padding: 9px 14px; border-radius: 100px; border: 1px solid var(--gris-linea); background: var(--blanco-puro); color: var(--texto); cursor: pointer; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.catalog-empty { text-align: center; padding: var(--s-8) 0; color: var(--gris-calido); grid-column: 1 / -1; }

.filters__mobile-toggle { display: none; }

@media (max-width: 980px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; background: var(--blanco-puro); border: 1px solid var(--gris-linea); border-radius: var(--radio); padding: var(--s-4); margin-bottom: var(--s-4); }
  .filters.is-open { display: block; }
  .filters__mobile-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .catalog-grid { grid-template-columns: 1fr; }
}