/* Faixa de categorias com scroll horizontal */

.categorias-faixa {
  background: var(--branco);
  border-bottom: 3px solid var(--preto);
  padding: 1.1rem 0 1.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.categorias-faixa::-webkit-scrollbar { display: none; }

.categorias-trilha {
  display: flex;
  gap: 1.2rem;
  padding: 0 1rem;
  width: max-content;
  margin-inline: auto;
}

.categoria-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0;
}

.categoria-circulo {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  background: var(--amarelo);
  border: 3px solid var(--preto);
  border-radius: 50%;
  box-shadow: 3px 3px 0px var(--preto);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.categoria-emoji {
  font-size: 1.75rem;
  line-height: 1;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.categoria-nome {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--preto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.categoria-item:hover .categoria-circulo {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px var(--preto);
}

.categoria-item:active .categoria-circulo {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--preto);
}

/* Categoria selecionada: círculo preto + emoji invertido */
.categoria-item.ativa .categoria-circulo { background: var(--preto); }
.categoria-item.ativa .categoria-emoji { filter: invert(1); transform: scale(1.05); }
.categoria-item.ativa .categoria-nome { color: var(--preto); }