.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; }

  /* La flecha, centrada y absoluta, quedaba ENCIMA del texto de la tarjeta
     ahora que ésta ocupa todo el ancho. Acá se desliza con el dedo: sobra, y el
     aviso de que hay más lo da la tarjeta siguiente asomando. El asomo se limita
     a `is-scrollable` porque con una sola tarjeta no hay nada que asomar y se
     vería cortada por gusto. Mismo criterio que el carrusel de paquetes
     (partials/public_packages_block.html). */
  .related-nav { display: none !important; }
  .related-classes.is-scrollable .related-slide { flex-basis: 88%; }
  /* Clásica (carrusel_movil): asoma más la siguiente, con puntos y "1 de N". */
  .related-classes.carrusel-movil.is-scrollable .related-slide { flex-basis: 78%; scroll-snap-align: start; }
}
.related-count { font-size: 0.8rem; font-weight: 500; color: #8592a3; white-space: nowrap; }
.related-dots { display: flex; justify-content: center; gap: 6px; margin-top: 0.75rem; }
.related-dot { width: 7px; height: 7px; border-radius: 50%; background: #d9d4e8; transition: width .2s ease, background-color .2s ease; }
.related-dot.is-active { width: 18px; border-radius: 4px; background: var(--brand, #6D28D9); }

/* Contraste: el texto gris y el violeta de Sneat (#7367f0 sobre su fondo claro) no llegan a 4,5:1. */
.related-classes .card-text.text-muted { color: #6d6b77 !important; }
.related-classes .bg-label-primary { color: #5a4ec9 !important; }