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

    /* ====== BANNER ====== */
    .carrusel-banner {
      position: relative;
      flex: 1 1 100%;          /* Banner ocupa 70% en pantallas grandes */
      max-width: 920px;
      margin: 20px auto;
      overflow: hidden;
      border: 0px solid #ccc;
      height: auto;
    }

    .carrusel-track-banner {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }

    .slide-banner {
      flex: 0 0 100%; 
      position: relative;
    }

    .slide-banner img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* ====== NAV DEL BANNER ====== */
    .carrusel-nav-banner {
      text-align: center;
      margin-top: 10px;
    }

    .carrusel-nav-banner a {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 5px;
      border-radius: 50%;
      background: #ccc;
      text-decoration: none;
    }

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

    /* ====== BOTONES DERECHA ====== */
    .columna-derecha {
      flex: 1 1 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      
    }

    .columna-derecha img {
      width: 100%;
      max-width: 220px;
      height: auto;
      border-radius: 10px;
    }

    /* ================== RESPONSIVE ================== */
   /* en móviles: botones laterales ocupan todo el ancho del contenedor y usan fondo */
@media (max-width: 600px) {
  /* apila banner arriba y botones debajo */
  .contenedor-banner1 {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
   
  }

  /* columna de botones toma 100% dentro del contenedor */
  .columna-derecha {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 12px; /* opcional: respiración interna en los laterales */
  }

  /* cada botón: fondo, ocupa todo el ancho del contenedor */
  .columna-derecha .overlay-wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0px 0px;
    box-sizing: border-box;
    text-align: center;
    /*background-color: #ff00aa;*/
    background-image: url("images/imagenes_index/fondo_bot_boton1_agencia.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin: 0;          /* ya hay gap en .columna-derecha */
    height: 100%;
     justify-content: center; /* Centra horizontalmente */
  align-items: center; 
  }

  /* imagen del botón: centrada y con tamaño controlado */
  .columna-derecha .overlay-wrapper img {
    display: inline-block;
    width: auto;
    max-width: 160px;   /* ajusta según tu diseño */
    height: auto;
    margin: 0 auto;
    vertical-align: middle;
    
  }
}

      /*----------------------------*/
      

/* ====== GALERÍA MENTORÍAS ====== */
.carrusel-container-mentoria {
  position: relative;
  overflow: hidden;
  max-width: 1118px;
  margin: 40px auto;
  background: #e3e3e3;
  padding: 20px;
  border-radius: 2px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%; /* ahora ocupa todo el ancho disponible */
}

.carrusel-wrapper-mentoria {
  overflow: hidden;
}

.carrusel-mentoria {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.card-mentoria {
  flex: 0 0 20%; /* por defecto: 5 visibles en desktop */
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.card-content-mentoria {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /*se recorta el boton*/
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.card-content-mentoria img {
  width: 100%;
  height: 300px;
  object-fit: contain;
}

.btn-registro-mentoria {
  display: block;
  background: #ff00aa;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.3s, color 0.3s;
}

.btn-registro-mentoria:hover {
  background: #aaa;
  color: #e4007f;
}

/* ====== BOTONES DE NAVEGACIÓN ====== */
.carrusel-btn-mentoria {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ff00aa;
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 1px;
  border-radius: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
}
.carrusel-btn-mentoria.prev { left: 10px; }
.carrusel-btn-mentoria.next { right: 10px; }
.carrusel-btn-mentoria:hover {
  background: #555;
}

/* ====== RESPONSIVE ====== */

/* Tablets (3 visibles) */
@media (max-width: 992px) {
  .card-mentoria {
    flex: 0 0 33.33%;
  }
  .card-content-mentoria img {
    height: 220px;
  }
}

/* Celulares grandes (2 visibles) */
@media (max-width: 768px) {
  .card-mentoria {
    flex: 0 0 15%;
  }
  .card-content-mentoria img {
   
    height: auto;
  
  }
}

/* Celulares pequeños (1 visible) */
@media (max-width: 480px) {
  .card-mentoria {
    flex: 0 0 15%; /*para cambiar el tamaño de las imagenes den formato pequeño de galeria mentorias index*/
  }
  .card-content-mentoria img {
    height: auto;
  }
  .carrusel-btn-mentoria {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

/*---------------------------------*/



}