/* Cabecera: título serif grande, línea fina y debajo los filtros en pastillas */
.cabecera-seccion { padding-top: 6px; }
.cabecera-seccion .contenedor { border-bottom: 1px solid var(--linea); padding-bottom: clamp(16px, 2vw, 24px); }
.cabecera-seccion__titulo { font-family: var(--ff-titulo); font-weight: 400; font-size: clamp(42px, 5vw, 64px); line-height: 1.05; margin-block: 4px 0; }
/* La cantidad la siguen usando los filtros (y los lectores de pantalla), pero no se ve */
.cabecera-seccion__cantidad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.catalogo { padding-block: 0 40px; }
.barra-filtros { position: sticky; top: var(--alto-header); z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; margin-bottom: 22px; background: var(--tinta); }
.barra-filtros__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.barra-filtros__chips::-webkit-scrollbar { display: none; }
.filtro-chip {
  flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border: 1px solid var(--linea-fuerte); border-radius: 999px; background: transparent;
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papel);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filtro-chip small { display: none; }
.filtro-chip:hover { border-color: var(--papel); }
.filtro-chip.activo { background: var(--papel); border-color: var(--papel); color: #fffdfa; font-weight: 500; }
.barra-filtros__acciones { display: flex; gap: 10px; align-items: center; flex: none; }
.filtros-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px;
  border: 1px solid var(--papel-2); border-radius: 999px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.15s, color 0.15s;
}
.filtros-btn svg { width: 18px; height: 18px; }
.filtros-btn:hover { background: var(--papel); color: #fffdfa; }
.orden select {
  height: 36px; min-width: 160px; padding: 0 38px 0 16px; background-color: transparent;
  border: 1px solid var(--linea-fuerte); border-radius: 999px; outline: 0; cursor: pointer;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--papel) 50%), linear-gradient(135deg, var(--papel) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.orden select:hover, .orden select:focus { border-color: var(--papel); }
.contador--inline { position: static; }

.vacio { text-align: center; padding-block: 90px; display: grid; gap: 14px; justify-items: center; }
.vacio__titulo { font-size: clamp(40px, 7vw, 90px); }
.grilla-productos .tarjeta[hidden] { display: none; }

/* Panel lateral de filtros */
.panel-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.6); }
.panel-filtros { position: fixed; z-index: 85; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--tinta-2); border-left: 2px solid var(--papel); transform: translateX(100%); transition: transform 0.4s var(--ease); }
.panel-filtros.abierto { transform: none; }
.panel-filtros__cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linea); }
.panel-filtros__cab h2 { font-size: 40px; }
.panel-filtros__cuerpo { flex: 1; overflow-y: auto; padding: 8px 22px 22px; display: grid; gap: 4px; align-content: start; }
.filtro-bloque { border: 0; border-bottom: 1px solid var(--linea); margin: 0; padding: 20px 0; }
.filtro-bloque legend { padding: 0; margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); float: left; width: 100%; }
.filtro-bloque > div { clear: both; }
.talles-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.talle input { position: absolute; opacity: 0; pointer-events: none; }
.talle span { display: grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px; border: 2px solid var(--linea-fuerte); font-weight: 800; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.talle:hover span { border-color: var(--papel); }
.talle input:checked + span { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.talle input:focus-visible + span { outline: 2px solid var(--volt); outline-offset: 2px; }
.talle input:disabled + span { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }
.colores-filtro { display: grid; gap: 4px; }
.color-op { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; }
.color-op input { position: absolute; opacity: 0; pointer-events: none; }
.color-op__punto { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea-fuerte); transition: box-shadow 0.15s; }
.color-op input:checked + .color-op__punto { box-shadow: 0 0 0 2px var(--tinta-2), 0 0 0 4px var(--volt); }
.color-op input:focus-visible + .color-op__punto { outline: 2px solid var(--volt); outline-offset: 4px; }
.color-op__nombre { font-weight: 600; }
.color-op__nombre small { color: var(--apagado); margin-left: 4px; }
.precio-filtro { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel-filtros__cuerpo > .tilde { padding-top: 20px; }
.panel-filtros__pie { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--linea); }

@media (max-width: 700px) {
  .barra-filtros { flex-direction: column; align-items: stretch; gap: 10px; }
  .barra-filtros__acciones { justify-content: space-between; }
  .orden { flex: 1; }
  .orden select { width: 100%; min-width: 0; }
}