.cabecera-seccion { padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.cabecera-seccion__titulo { font-size: clamp(34px, 7vw, 96px); line-height: 1.08; margin-block: 6px 10px; }
.cabecera-seccion__titulo sup { font-family: var(--ff-texto); font-size: clamp(14px, 1.6vw, 22px); font-weight: 800; letter-spacing: 0.04em; vertical-align: top; position: relative; top: 0.6em; margin-left: 0.5em; padding: 4px 10px; background: var(--oro); color: var(--tinta); }

.catalogo { padding-block: 22px 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: 14px; margin-bottom: 26px; background: rgba(10, 10, 11, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.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; padding: 9px 16px; border: 1px solid var(--linea-fuerte); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.15s; }
.filtro-chip small { opacity: 0.6; margin-left: 4px; font-weight: 700; }
.filtro-chip.activo { background: var(--oro); border-color: var(--oro); color: var(--tinta); }
.barra-filtros__acciones { display: flex; gap: 10px; align-items: center; flex: none; }
.orden select { min-height: 38px; padding: 0 34px 0 14px; background: var(--tinta-2); border: 1px solid var(--linea-fuerte); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; 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% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.contador--inline { position: static; }

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

.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: 1px 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: 24px; }
.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; }
.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: 1px 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(--oro); }
.color-op input:focus-visible + .color-op__punto { outline: 2px solid var(--oro); 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 (hover: hover) and (pointer: fine) {
  .filtro-chip:hover { border-color: var(--papel); }
}

@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%; }
}