/* === CONTENEDOR DEL BANNER + BOTONES === agencia*/
.contenedor-banner-agencia {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1118px;
  margin: 60px auto;
  gap: 20px; /* espacio entre banner y botones */
  flex-wrap: nowrap; /* en desktop no se apilan */
margin-left: 110px;
  height: 450px;
  margin-bottom: 20px;
}

/* ====== BANNER ====== */

.carrusel-banner {
  position: relative;       /* Permite colocar elementos hijos (nav, overlays) de manera absoluta */
  max-width: 1118px;         /* Limita el ancho máximo del banner */
  margin: 20px auto;        /* Centra el carrusel horizontalmente con margen superior/inferior */
  overflow: hidden;         /* Oculta lo que se salga del contenedor (transiciones del slide) */
  border: 0px solid #ccc;   /* Borde gris alrededor del carrusel */
  margin-left: 0px;       /* Desplaza el carrusel un poco hacia la derecha */
  height: 450px;
}

/* Cada slide debe ocupar el 100% del carrusel */
.carrusel-track-banner {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* asegura que el track se adapte al contenedor */
}

.slide-banner {
  flex: 0 0 100%;  /* cada slide ocupa exactamente el 100% del carrusel */
  position: relative;
}

.slide-banner img {
  width: 100%;     /* imagen ocupa todo el ancho del slide */
  height: auto;    /* mantiene proporción */
  display: block;
}

/* === BOTONES DE NAVEGACIÓN === */
.carrusel-nav-banner {
  position: absolute;   /* 👈 se posicionan sobre el banner */
  bottom: 15px;         /* 👈 a 15px del borde inferior */
  left: 50%;
  transform: translateX(-50%); /* centra horizontalmente */
  display: flex;
  gap: 8px;
  z-index: 5;           /* asegúrate de que queden por encima */
}

.carrusel-nav-banner a {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
}


/* === BOTONES DE NAVEGACIÓN === */
.carrusel-nav-banner {
  position: absolute;   /* en escritorio se superponen */
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}

.carrusel-nav-banner a {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
}

.carrusel-nav-banner a.active {
  background: #ff00aa;
}

/* === RESPONSIVE: en móviles los puntos van debajo del banner === */
@media (max-width: 768px) {
  .carrusel-nav-banner {
    position: static;       /* 👈 ya no absoluto, se ubican en el flujo */
    transform: none;        /* resetea el translate */
    justify-content: center;
    margin-top: 10px;       /* espacio con el banner */
  }
}