/* Filter chips — marca, talle, línea, in that order. Links, not buttons:
   filtering is navigation, so every state has a URL and none of it needs
   JavaScript. */
.chips { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-top: var(--sp-xs); }
.chips:first-of-type { margin-top: var(--sp-lg); }

.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 52px; padding: 8px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
/* Only the ones that go somewhere respond to the pointer: the apagadas below
   and the subscribe band's inert chips are spans, and lighting them up would
   promise a click that isn't there. */
a.chip:hover { background: var(--surface); color: var(--ink); }

.chip[aria-current="true"] {
  background: var(--primary); border-color: var(--primary);
  color: var(--bg); font-weight: 600;
}

/* A línea this talle doesn't carry: it stays in the row and dimmed, because
   its absence is information about the pañal, not an option we hide. */
.chip[aria-disabled="true"] {
  color: var(--muted); border-style: dashed; cursor: default; font-weight: 400;
}

/* Why some chips are dimmed, in Apagado — except the fact that answers "where
   did my línea go?", which goes in Tinta. */
.chips-note { margin: var(--sp-xs) 0 0; max-width: 60ch; }
.chips-note-fact { color: var(--ink); }

@media (max-width: 640px) {
  /* One scrolling row per axis: wrapped, the three rows took six lines and
     pushed the answer below the fold — and the answer up top, one-handed, is
     the whole point of the portada. The padding leaves room for the focus ring
     inside the scrolling container. */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    padding: var(--sp-2xs); margin-inline: calc(var(--sp-2xs) * -1);
    margin-top: var(--sp-2xs);
  }
  .chips:first-of-type { margin-top: var(--sp-sm); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
}