.scroll-container {
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 20px;
  margin-inline: 0px;
}

.scroll-wrapper {
  display: flex;
  gap: 5px;
  scroll-snap-type: x mandatory;
  padding: 20px 0;
}

.scroll-wrapper > li {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 272px; /* o el tamaño que mejor se adapte a tus cards */
}

.scroll-container::-webkit-scrollbar {
  height: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: var(--AJsystem-blue);
  border-radius: 10px;
}

.scroll-controls {
  position: relative;
  display: flex;
  align-items: center;
}

.scroll-btn {
  background-color: var(--AJsystem-blue);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
  transition: background 1s;
}

.scroll-btn:hover {
  background-color: var(--AJsystem-glow);
}

.scroll-btn.left {
  margin-right: 5px;
}

.scroll-btn.right {
  margin-left: 5px;
}

.scroll-container {
  overflow-x: scroll;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
}

.scroll-container::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

.category-label {
  display: inline-block;
  background-color: var(--AJsystem-blue); /* O cualquier color que estés usando */
  color: white;
  padding: 8px 20px;
  font-size: 2rem;
  font-weight: bold;
  border-radius: 0px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: var(--ff-calibri);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}