.related-classes { position: relative; }
/* Carrusel deslizable en todos los tamaños: desktop muestra 3 por vista,
   móvil 1; las demás se navegan con las flechas. */
.related-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  padding-bottom: 0.25rem;
}
.related-track::-webkit-scrollbar { display: none; } /* WebKit */
/* Desktop: tres tarjetas por vista (gap 1.5rem = 2 gaps = 3rem). */
.related-slide { flex: 0 0 calc((100% - 3rem) / 3); min-width: 0; scroll-snap-align: start; }

/* Flechas: solo cuando el carrusel desborda (lo activa el JS con is-scrollable). */
.related-nav {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 38%;                       /* a la altura de la imagen, no del texto */
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(33, 37, 41, 0.55);
  color: #fff;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.related-classes.is-scrollable .related-nav { display: flex; }
.related-nav:disabled { opacity: 0.3; }
.related-prev { left: 4px; }
.related-next { right: 4px; }
.related-nav i { font-size: 1.1rem; }

/* Móvil: una tarjeta por vista. */
@media (max-width: 767.98px) {
  .related-track { gap: 0.75rem; }
  .related-slide { flex: 0 0 100%; scroll-snap-align: center; }
}