/* ---------- Abas de categoria (fixas no topo, como a navbar da landing) ---------- */
.m-tabs {
  position: sticky; top: 0; z-index: 20; margin-top: 20px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Abas + busca na mesma barra fixa (no celular a busca fica acima das abas) */
.m-tabs-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.m-tabs-scroll { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
@media (max-width: 767px) {
  .m-tabs-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .m-search { flex: none; order: -1; }
  .m-tabs-scroll { margin: 0 -20px; padding: 2px 20px; }
}
.m-tabs-scroll::-webkit-scrollbar { display: none; }
.m-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.m-chip:hover { border-color: var(--line2); }
.m-chip-ic {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--soft-2); display: grid; place-items: center; font-size: 17px;
}
.m-chip.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.m-chip-ic.star { background: rgba(245,158,11,.15); color: #f59e0b; }
.m-chip-ic.all { background: var(--soft-2); color: var(--txt2); }
.m-chip.active .m-chip-ic.all { background: var(--brand); color: #fff; }
.m-tabs-scroll { position: relative; } /* referência para centralizar a aba ativa */

/* Troca de categoria: cada item "nasce" com fade + leve subida, em cascata */
@keyframes m-rise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* fill-mode "backwards": não prende o transform depois, então o hover dos cards continua funcionando */
.m-anim .m-sec-title { animation: m-rise .35s ease backwards; }
.m-anim .m-item, .m-anim .m-feat-card { animation: m-rise .42s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .m-anim .m-sec-title, .m-anim .m-item, .m-anim .m-feat-card { animation: none; }
}

/* Ícone de categoria (desenho, sem emoji) */
.m-chip-ic.cat { color: var(--txt2); }
.m-chip.active .m-chip-ic.cat { background: var(--brand); color: #fff; }