/* ============================================================================
   CATALOG — home: hero, filtros y grilla
============================================================================ */

/* ----------------------------------------------------------------------------
   HERO — tipografía a sangre, sin imagen de fondo
---------------------------------------------------------------------------- */

.hero {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: var(--border);
}

.hero__titulo {
  font-family: var(--f-title);
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero__titulo em {
  font-style: normal;
  color: var(--c-accent);
}

.hero__bajada {
  max-width: 46ch;
  margin-top: var(--sp-4);
  color: var(--c-text-dim);
  font-size: var(--t-md);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--sp-3);
  border-left: var(--bw-thick) solid var(--c-accent);
}

.hero__stat b {
  font-family: var(--f-mono);
  font-size: var(--t-md);
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   BARRA DE FILTROS
   Sticky bajo el header. En mobile, cada fila scrollea horizontal.
---------------------------------------------------------------------------- */

.filters {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: var(--c-bg);
  border-bottom: var(--border);
  padding-block: var(--sp-3);
}

.filters__grupo + .filters__grupo { margin-top: var(--sp-3); }

.filters__grupo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.filters__label {
  flex: 0 0 auto;
  width: 52px;
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-text-dim);
}

/* En mobile los grupos secundarios se colapsan detrás de "FILTROS" */
.filters__extra { display: none; }
.filters__extra.is-open { display: block; }

.filters__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border);
}

.filters__resultado {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
  letter-spacing: var(--tracking-wide);
}

.filters__acciones { display: flex; gap: var(--sp-2); }

@media (min-width: 900px) {
  .filters { padding-block: var(--sp-4); }
  .filters__extra { display: block; }
  .filters__toggle { display: none; }
}

/* Orden: select desnudo, sin caja */
.sort-select {
  appearance: none;
  padding: var(--sp-1) var(--sp-5) var(--sp-1) 0;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-text-dim) 50%),
                    linear-gradient(135deg, var(--c-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 8px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-text);
  cursor: pointer;
}

.sort-select option { background: var(--c-bg-alt); }

/* ----------------------------------------------------------------------------
   GRILLA
   Sin gap: las cards comparten borde. Grilla marcada, estilo tabla.
---------------------------------------------------------------------------- */

.grid-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: var(--sp-5);
  border-top: var(--bw) solid var(--c-border);
  border-left: var(--bw) solid var(--c-border);
}

.grid-products > .card {
  border-top: none;
  border-left: none;
}

@media (min-width: 700px)  { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid-products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .grid-products { grid-template-columns: repeat(5, 1fr); } }

/* Card destacada: ocupa dos columnas en desktop */
@media (min-width: 700px) {
  .card--destacado { grid-column: span 2; }
  .card--destacado .card__media { aspect-ratio: 16 / 11; }
}

/* Fila divisoria entre disponibles y vendidos */
.grid-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  border-bottom: var(--bw) solid var(--c-border);
  border-right: var(--bw) solid var(--c-border);
  font-family: var(--f-title);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-text-dim);
}

.grid-divider::after {
  content: '';
  flex: 1;
  height: var(--bw);
  background: var(--c-border);
}

/* ----------------------------------------------------------------------------
   PAGINADO
---------------------------------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.pager__info {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-text-dim);
}

/* ----------------------------------------------------------------------------
   SECCIÓN GENÉRICA
---------------------------------------------------------------------------- */

.seccion { padding-block: var(--sp-7); }

.seccion__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-thick) solid var(--c-text);
}

.seccion__titulo {
  font-family: var(--f-title);
  font-size: var(--t-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  line-height: 1;
}