.banners {
  width: 100%;
  position:relative;
display: flex
;
    align-items: center;
    justify-content: center;
}

/* Contenedor del carrusel, se usa flex para alinear las imágenes horizontalmente */
.div-banner {
  display: flex;
  flex-direction: row; /* Alineamos las imágenes en una fila horizontal */
  width: 100%;
  transition: transform 1s ease-in-out; /* Animación para el deslizamiento */
    align-items: center;
    justify-content: center;
}
.banners-mobile{
    display:none;
}





/* Estilo para cada imagen de banner */
.img-banner {
  width: 100%; /* Cada imagen ocupará un 100% del ancho del contenedor */
  display: block; /* Las imágenes se mostrarán de forma continua */
  cursor:pointer;
}
.img-banner img {
  width: 100%;
  height: auto; /* Mantiene la proporción de las imágenes */
}
.imagen-for-mobile{
    display:none;
}

h1{
    font-size:49px !important;
    color:#333333;
    text-align: center;
    font-weight: 700 !important;
  }

  .div-docentes{
    padding:40px 10px;
    
    
  }

  .div-docentes h1 span{
    color:#18A74F;
    border-bottom:4px solid #18A74F;
  }
  
  .parrafo-central-curso p{
       color:#333333;
    text-align: center;
    font-weight: 400;
    margin:2rem;
    font-size:17px;
  }
  
  
  
  .lista-docentes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-docentes {
    display: grid; /* Usamos CSS Grid */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
    gap: 40px; /* Espacio entre las tarjetas */
    padding: 70px 0px;
  
}

/* Estilo para cada tarjeta */
.docente-card {
  
    padding:0px;
   
}


.card-info-docente{
     border-radius: 25px;
    overflow: hidden;
    display: flex
;
    flex-direction: column;
   
  
      transition: transform 0.3s ease, background-color 0.3s ease; 
    box-shadow: 1px 1px 10px gray;
    width:406px;
         
         transition: height 0.5s ease-out;
          position: relative;
}
.card-info-docente.active {
  height: auto; /* Permite que la altura se ajuste al contenido cuando se abre */
}
.card-info-docente:hover {
    cursor: pointer;
    border:2px solid #18A74F;
  
    
}

.card-info-docente:not(.active) {
  height: 520px;
}

.card-imagen {
  position: relative;
    overflow: hidden;
        border-radius: 20px 20px 0px 0px;
    display: flex
;
    align-items: center;
    justify-content: center;
}

.card-imagen img {
    width: 100%; /* La imagen ocupará todo el ancho del contenedor */
    height: 100%; /* La imagen ocupará todo el alto del contenedor */
    object-fit: cover; /* La imagen cubrirá el área sin distorsionarse */
}

.card-docente{
    display: flex
;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
  
.docente-nombres p{
    font-size:24px;
    font-weight:600;
    color:#282244;
    margin:0px;
} 


  
  .docente-nombres span{
    font-size:24px;
    font-weight:600;
    color:#18A74F;
} 
 .docente-abrir{
       display: flex
;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    background: #18A74F;
    width: 30px;
    height: 30px;
 }
.docente-abrir svg{
  width:100%;
}
  
 .cv-docente {
  display: none;               /* Inicialmente oculto */
    max-height: 0;            /* Sin altura inicial */
  overflow: hidden;            /* Para evitar desbordamiento durante la transición */
 transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cv-docente.active {
  display: block; /* Mostrar cuando esté activo */
  max-height: 1000px; /* Altura máxima para la expansión */
}
.caja-cv {
  padding: 20px;
}
.cv-docente.active .docente-abrir{
    transform: rotate(180deg)
}
.caja-impar {
  background: #F2F2F2;
}

.caja-cv p {
  color: #333333;
  font-size: 17px;
  margin: 0;
  font-weight: 500;
}

.docente-abrir.active svg {
  transform: rotate(180deg); /* Gira el ícono cuando el CV esté abierto */
  transition: transform 0.3s ease; /* Transición suave al girar */
}
 @media (min-width: 992px) and (max-width: 1300px) {
 
     .card-docentes {
    display: grid
;
    grid-template-columns: repeat(2, 1fr);
     }
 }
   @media (max-width: 991px) {
       .card-info-docente:not(.active) {
  height: auto;
}.div-about h1 span {
    color: #18A74F;
    border-bottom: 4px solid #18A74F;
}
   .imagen-for-mobile{
    display:block;
}
.imagen-for-web{
    display:none;
}
       .container{
           padding:20px !important;
       }
       
       .div-docentes{
           margin:0px 0px 50px 0px;
       }
   }
 
 @media (min-width: 768px) and (max-width: 991px) {
        .texto-portada {
            flex-direction: column;
          padding: 0px 20px;
    }
    
  .texto-titulo-portada {
        flex-direction: column-reverse;
        align-items: center;
        gap: 5px;
    }
.lista-dirigido{
    flex-direction: column;
}
    
    .container-sub-objetivo{
            flex-direction: column;
    }
    
    .texto-titulo-portada span{
        font-size:30px;
    }
    
       .texto-titulo-portada p{
           font-size:18px;
           text-align:center;
       }
        .div-banner {
    width: 100%; /* Mantén el 100% del ancho */
   
  }

  .img-banner img {
        width: 100%; /* Ocupa todo el ancho */
        height: 100%; /* Ocupa todo el alto */
      
    }


    

h1 {
    font-size: 30px !important;
}




.parrafo-central-curso p {

    font-size: 14px;
}

.card-docentes {
    padding:0px;
    grid-template-columns: repeat(1, 1fr);
}


.card-info-docente {
  
    width: auto;
   
}
  
  .docente-nombres p {
    font-size: 20px;
  }
  .docente-nombres span {
    font-size: 20px;

}

.caja-cv {
    padding: 10px;
}

.caja-cv p {
    
    font-size: 14px;
}
 } 
    @media (min-width: 768px) and (max-width: 991px) {
         .texto-portada {
            flex-direction: column;
          padding: 0px 20px;
    }
    
    .texto-titulo-portada{
            flex-direction: column-reverse;
             align-items: center;
    }
.lista-dirigido{
    flex-direction: column;
}
    
    .container-sub-objetivo{
            flex-direction: column;
    }
    
    .texto-titulo-portada span{
        font-size:30px;
    }
    
       .texto-titulo-portada p{
           font-size:18px;
           text-align:center;
       }
        .div-banner {
    width: 100%; /* Mantén el 100% del ancho */
   
  }
       .img-banner {
        width: 100%; /* Ocupa todo el ancho disponible */
     
    
        display: block;
        cursor: pointer;
    }
  .img-banner img {
        width: 100%; /* Ocupa todo el ancho */
        height: 100%; /* Ocupa todo el alto */
     
    }




h1 {
    font-size: 30px !important;
}




.parrafo-central-curso p {

    font-size: 14px;
}

.card-docentes {
    padding:0px;
    grid-template-columns: repeat(1, 1fr);
}


.card-info-docente {
  
    width: auto;
  
}
  
  .docente-nombres p {
    font-size: 20px;
  }
  .docente-nombres span {
    font-size: 20px;

}

.caja-cv {
    padding: 10px;
}

.caja-cv p {
    
    font-size: 14px;
}
    }
  
  @media (min-width: 530px) and (max-width: 768px) {
     .texto-portada {
            flex-direction: column;
          padding: 0px 20px;
    }
    
    .texto-titulo-portada{
            flex-direction: column-reverse;
             align-items: center;
    }
.lista-dirigido{
    flex-direction: column;
}
    
    .container-sub-objetivo{
            flex-direction: column;
    }
    
    .texto-titulo-portada span{
        font-size:30px;
    }
    
       .texto-titulo-portada p{
           font-size:18px;
           text-align:center;
       }
        .div-banner {
    width: 100%; /* Mantén el 100% del ancho */
   
  }
       .img-banner {
        width: 100%; /* Ocupa todo el ancho disponible */
     
        display: block;
        cursor: pointer;
    }
  .img-banner img {
        width: 100%; /* Ocupa todo el ancho */
        height: 100%; /* Ocupa todo el alto */
        
    }



h1 {
    font-size: 30px !important;
}




.parrafo-central-curso p {

    font-size: 14px;
}

.card-docentes {
    padding:0px;
    grid-template-columns: repeat(1, 1fr);
}


.card-info-docente {
  
    width: auto;
  
}
  
  .docente-nombres p {
    font-size: 20px;
  }
  .docente-nombres span {
    font-size: 20px;

}

.caja-cv {
    padding: 10px;
}

.caja-cv p {
    
    font-size: 14px;
}
      
  }
  
    @media (max-width: 530px) {
           .texto-portada {
            flex-direction: column;
          padding: 0px 20px;
    }
    
  .texto-titulo-portada {
        flex-direction: column-reverse;
        align-items: center;
        gap: 5px;
    }
.lista-dirigido{
    flex-direction: column;
}
    
    .container-sub-objetivo{
            flex-direction: column;
    }
    
    .texto-titulo-portada span{
        font-size:30px;
    }
    
       .texto-titulo-portada p{
           font-size:18px;
           text-align:center;
       }
        .div-banner {
    width: 100%; /* Mantén el 100% del ancho */
   
  }

  .img-banner img {
        width: 100%; /* Ocupa todo el ancho */
        height: 100%; /* Ocupa todo el alto */
      
    }

    

h1 {
    font-size: 30px !important;
}




.parrafo-central-curso p {

    font-size: 14px;
}

.card-docentes {
    padding:0px;
    grid-template-columns: repeat(1, 1fr);
}


.card-info-docente {
  
    width: auto;

}
  
  .docente-nombres p {
    font-size: 20px;
  }
  .docente-nombres span {
    font-size: 20px;

}

.caja-cv {
    padding: 10px;
}

.caja-cv p {
    
    font-size: 14px;
}
    }
   @media (min-width: 450px) and (max-width: 530px) {
   
       .img-banner {
        width: 100%; /* Ocupa todo el ancho disponible */
     
        display: block;
        cursor: pointer;
    }
     .card-info-docente {
  
    width: auto;
  
}
 

  }
  
  @media (min-width: 375px) and (max-width: 450px) {
       
       .img-banner {
        width: 100%; /* Ocupa todo el ancho disponible */
     
        display: block;
        cursor: pointer;
    }
    
    .card-info-docente {
  
    width: auto;
   
}
 
  }
  
  
  @media (max-width: 375px) {
    
  
       .img-banner {
        width: 100%; /* Ocupa todo el ancho disponible */
      
        display: block;
        cursor: pointer;
    }

  }