/* ===== Quick Filters styles ===== */
#filtros .qf-head{
  display:flex; align-items:center; gap:12px;
  background: var(--color-surface, #FFFDF5);
  border-radius:12px; padding:12px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  margin-bottom:18px;
}
#filtros .qf-head h2{
  margin:0; font-weight:800;
  color: var(--color-on-surface, #1C1C1C);
  font-size: clamp(18px, 2.2vw, 22px);
}
#filtros .btn{
  margin-left:auto; display:inline-block;
  padding:10px 14px; border-radius:10px;
  background: var(--color-surface, #FFFDF5);
  color: var(--color-primary, #0D1B2A);
  border: 1px solid color-mix(in srgb, var(--color-primary, #0D1B2A) 20%, transparent);
  font-weight:700; text-decoration:none;
}

/* Grid responsivo: 3 cols móvil, 5 desktop */
#filtros .qf-grid{
  display:grid; gap:12px; justify-content:center;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width:640px){
  #filtros .qf-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Item (círculo + etiqueta) */
#filtros .qf-item{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; padding:8px;
  border-radius:16px;
  color: var(--color-on-surface, #1C1C1C);
}
#filtros .qf-item:focus-visible{
  outline: 2px solid var(--color-secondary, #F4D35E);
  outline-offset: 4px;
}

#filtros .qf-circle{
  width: clamp(72px, 10vw, 88px);
  height: clamp(72px, 10vw, 88px);
  border-radius: 999px;
  background: var(--color-primary, #0D1B2A);
  display:grid; place-items:center;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
#filtros .material-symbols-outlined{
  font-size: clamp(28px, 4vw, 32px);
  color: var(--color-on-primary, #FFFFFF);
}
#filtros .qf-label{
  margin-top:10px; font-weight:700;
  text-align:center;
  color: var(--color-on-surface, #1C1C1C);
}

/* Hover */
@media (hover:hover){
  #filtros .qf-item:hover .qf-circle{
    transform: translateY(-2px);
    transition: transform .18s ease;
  }
}