/* ===============================
   CONTENEDOR DE DOTS
   =============================== */
.carrusel-dots,
.mod16-dots,
.mod17-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: rgba(41, 88, 190, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  z-index: 30;
}

/* ===============================
   DOT BASE
   =============================== */
.carrusel-dots .dot,
.mod16-dots .dot,
.mod17-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(34, 211, 238, 0.45);
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

/* ===============================
   HOVER
   =============================== */
.carrusel-dots .dot:hover,
.mod16-dots .dot:hover,
.mod17-dots .dot:hover {
  background-color: rgba(34, 211, 238, 0.9);
}

/* ===============================
   ACTIVE
   =============================== */
.carrusel-dots .dot.active,
.mod16-dots .dot.active,
.mod17-dots .dot.active {
  width: 18px;
  background-color: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
}