.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 */
}
.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 */
}

.div-podcasts{
    padding:40px 0px;
}


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

 

  .div-podcasts 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;
     margin-bottom:3rem;
  }




.lista-podcasts{
    display:flex;
    flex-direction:column;
    gap:90px;
}

.caja-principal-podcast{
      display:flex;
    gap:50px;
}

.lado-izquierdo{
    width:30%;
}

.lado-derecho{
    width:70%;
}

.card-imagen {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex
;

    justify-content: center;
    width: 403px;
    height: 467px;
}

.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-gradient {
    position: absolute; /* Lo posiciona sobre la imagen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background: rgb(42 81 134 / 75%);
    pointer-events: none; /* No interfiere con otros eventos */
}

.card-gradient.par{
     background: rgb(190 22 34 / 75%);
}

.container-texto {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column; /* Esto alinea las secciones verticalmente */
    align-items:center;
    justify-content: center; /* Esto centra el contenido (logo) */
    width: 100%; /* Esto asegura que el contenedor ocupe el 100% del ancho */
    height: 100%; /* Esto asegura que el contenedor ocupe el 100% de la altura */
}

.seccion-logo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo y el nombre del profesor */
    justify-content: center; /* Centra el logo y el nombre del profesor */
    gap: 20px;
}

.seccion-info {
  display: flex
;
 
    flex-direction: column;
    justify-content: flex-start;
    width: 60%;
    gap: 10px;
    margin:1rem;
}

.logo-podcast{
    width:228px;
}


.logo-podcast 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 */   
}

.profesor-nombre{
        display: flex
;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 10px;
    border-radius: 20px;
}

.profesor-nombre.par{
       background: #F2F2F2;
}

.profesor-nombre p{
    margin:0px;
    color:#0E2B6D;
    font-weight:600;
    font-size:15px;
    font-style:italic;
}

.profesor-nombre.par p{
    color:#1D1D1B;
}

.caja-info{
    display: flex
;
    align-items: center;
    gap: 10px;
    background: #15F5BA;
    padding: 5px 10px;
    border-radius: 20px;
}

.caja-info.par{
   background: #F2F2F2;
}

.info-svg svg{
    width:20px;
    height:20px;
}

.info-texto p{
    color:#2A5186;
    font-weight:700;
    font-size:17px;
    margin:0;
}
.caja-info.par p{
    color:#333333;
}

.caja-info.par   .cls-podcast {
    fill:#333333 !important;
    
}
.seccion-pie{
    display: flex
;
    align-items: center;
    justify-content: center;
}

.seccion-pie a{
    text-decoration:none;
}

.button-podcast{
        background: #F2F2F2;
    display: flex
;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    border-radius: 50px;
}

.button-podcast p{
    margin:0;
    color:#333333;
    font-size:17px;
    font-weight:600;
}

.descripcion-parrafo{
   padding:0px 50px;
}
.descripcion-parrafo p{
    color:#333333;
    font-size:18px;
    font-weight:400;
 
    
}

.descripcion-parrafo span{
    color:#333333;
    font-size:18px;
    font-weight:600;
    
}
.caja-container-podcasts{
        display: flex
;
    align-items: center;
    justify-content: center;
    gap: 10px;
}




.lista-videos {
    display: flex;
    gap: 20px;
    overflow: hidden; /* Ocultar las cajas que están fuera del área visible */
    position: relative;
    scroll-snap-type: x mandatory; /* Para un desplazamiento "a saltos" */
    padding-bottom: 20px;
   
}

.caja-video {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    width: 388px; /* Ancho de cada caja */
    scroll-snap-align: start; /* Alineación para el desplazamiento en saltos */
}

/* Asegurarse de que el cuarto y las siguientes cajas no se vean al principio */
.lista-videos .caja-video:nth-child(n+4) {
    display: none; /* Ocultar las cajas a partir de la cuarta */
}

.caja-imagen img {
    width: 100%;
    height: 100%;
}

/* Mostrar solo 3 cajas y media */
.lista-videos .caja-video:nth-child(3) {
    position: relative;
    overflow: hidden;
    
}



/* Desvanecimiento en la tercera caja */
/* Desvanecimiento en la caja */



.div-slide-derecha{
    background: #F2F2F2;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:40px;
    cursor: pointer;
}
.div-slide-derecha svg{
    width:10px;
   
}



.div-slide-izquierda{
    background: #F2F2F2;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:50px;
    height:40px;
    cursor: pointer;
}
.div-slide-izquierda svg{
    width:10px;
       transform: rotate(180deg);
}



#scroll-bar {
    margin-top: 20px;
    background-color: #F2F2F2;
    height: 15px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    position: relative;
}

#scroll-wheel {
    background-color: #333333;
    height: 10px;
    width: 60px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#scroll-wheel:hover {
    background-color: #555;
}



.caja-imagen {
    width: auto;
}

.caja-imagen img{
    width:100%;
    height:100%;
}

.orden-video{
    border: 1px solid #2A5186;
    padding: 10px;
    border-radius: 15px;
    width:50%;
}

.orden-video.par{
      border: 1px solid #CD0001; 
}
.orden-video span{
    color:#2A5186;
    font-size:17px;
    font-weight:600;
}
.orden-video.par span{
      color:#CD0001;
}

.parrafo-titulo{
    height:3rem;
}
.parrafo-titulo p{
     color:#333333;
    font-size:17px;
    font-weight:600;
    margin:0px;
}

.video-informacion{
    display: flex
;
    flex-direction: column;
    gap: 15px;
}
.parrafo-boton {
    background: #F2F2F2;
    padding: 10px;
    border-radius: 50px;
    display: flex
;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.parrafo-boton span{
     color:#333333;
    font-size:17px;
    font-weight:600;
}



.container-gran-video{
    padding:0px 30px 40px;
    display:flex;
}

.container-azul{
    background:#191E3A;
}

.izquierdo-gran-video{
    width:70%;
}

.derecho-gran-video{
    width:30%;
}


.box-video{
   
}

.box-informacion{
     display: flex
;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2.5px solid #fff;
}

.box-texto-youtube span{
    font-size:17px;
    font-weight:700;
    color:#fff;
}

.box-texto-youtube p{
    font-size:17px;
    font-weight:700;
    color:#fff;
    margin:0px;
}



.box-imagen-youtube{
    width:75px;
    height:75px;
    
}

.box-imagen-youtube img{
    width:100%;
}



.box-izquierdo-informacion{
        display: flex
;
    align-items: center;
    gap: 10px;
}

.box-derecho-informacion{
    border-left: 2px solid #fff;
    padding: 0px 0px 0px 10px;
    display: flex
;
    gap: 10px;
}

.box-derecho-informacion svg{
    width:18px;
}



.box-derecho-informacion span{
      font-size:17px;
    font-weight:600;
    color:#fff;
}


.box-abajo-informacion{
           margin-top: 1rem;
    display: flex
;
    align-items: center;
    gap: 8px;
}
.box-abajo-informacion span{
      font-size:17px;
    font-weight:600;
    color:#fff;
}

.box-abajo-informacion svg{
    width:32px;
    height:32px;
}



.menu-opciones{
         display: flex
;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 20px;
}

.caja-opcion{
        display: flex
;
    background: #FFF;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 15px;
    width:250px;
    gap: 5px;
    cursor:pointer;

}

.caja-opcion.active{
    background:#18A74F;
    
}

.caja-opcion.active .cls-opcion{
    fill:#fff !important;
}

.caja-opcion svg{
    width:29px;
    
}


.caja-opcion span{
    color:#0E2B6D;
    font-size:17px;
    font-weight:600;
}
.caja-opcion.active span{
    color:#fff;
}
.container-general-comentario{
  
    height: 690px;
  overflow:auto;
   
}

.contenido-opciones{
        display:flex;
        flex-direction:column;
     background: #fff;
      border-radius: 25px;
    padding: 40px;
  
   margin: 0px 20px;
   min-height: 800px;
          justify-content: space-between;
}



.container-general-comentario::-webkit-scrollbar {
    width: 8px; /* Define el grosor de la barra de desplazamiento */
       border-radius:20px;
}

.container-general-comentario::-webkit-scrollbar-thumb {
    background-color: #ffffff; /* Color de la "ruedita" (thumb) de la barra */
}

.container-general-comentario::-webkit-scrollbar-track {
    background-color: transparent; /* Sin color de fondo en el track */
    border:1px solid #fff;
    border-radius:20px;
    padding: 10px;
}

.parrafo-enlace{
    text-decoration:none;
}


.recomendacion-comentario p{
    color:#666666;
    font-weight:600;
    font-style:italic;
    margin:0px;
    font-size:17px;
    
}

.lista-comentarios{
        display: flex
;
    flex-direction: column;
    gap: 20px;
    margin: 50px 0px;
}

.caja-comentario{
        display: flex
;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 25px;
}
.comentario-autor{
    display: flex
;
    align-items: center;
    justify-content: space-between;
}

.comentario-cabecera{
  
    display: flex
;
    align-items: center;
    gap: 10px;
}


.comentario-cabecera span{
     font-weight: 600;
    font-size: 16px;
    color: #0E2B6D;
}
.comentario-fecha span{
     font-weight: 600;
    font-size: 16px;
    color: #0E2B6D;
}

.comentario-abajo p{
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin: 0px;
    text-align: justify;
}

.caja-envio-respuesta p{
       color:#666666;
    font-weight:600;
 
    margin:0px;
    font-size:17px;
}


.container-descripcion-episodio{
        display:flex;
        flex-direction:column;
     background: #fff;
      border-radius: 25px;
    padding: 40px;
  
   margin: 0px 20px;
       gap: 30px;
     height: auto;
}




.imagen-descripcion{
     position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex
;

    justify-content: center;
    width:auto;
}


.imagen-descripcion img{
    width:100%;
    height:100%;
        object-fit: cover; /* La imagen cubrirá el área sin distorsionarse */
}




.logo-podcast-2{
    width:128px;
}




.container-texto-2{
        display: flex;
 
    flex-direction: row;
    align-items: center;
   
    justify-content: space-around;
}




.orden-episodio-descripcion span{
    color:#fff;
    font-weight:700;
    font-size:20px;
}
.descripcion-episodio{
    padding:40px 0px;
}

.descripcion-episodio p{
        color: #000000;
    font-size: 16px;
    text-align: justify;
}

.imagen-for-mobile{
    display:none;
}



@media (max-width: 991px) {

 .container-gran-video {
        padding: 40px 0px;
        display: flex
;
        flex-direction: column;
                margin-bottom: 3rem;
    }

.izquierdo-gran-video {
    width: 100%;
}

.descripcion-parrafo{
    padding:0px;
}

.box-texto-youtube span {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.box-imagen-youtube {
    width: 40px;
    height: 40px;
}
.box-derecho-informacion span {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}


.box-abajo-informacion span {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.box-abajo-informacion svg {
    width: 20px;
    height: 20px;
}


.derecho-gran-video {
    width: 100%;
}
.caja-opcion span{
    font-size:14px;
    text-align:center;
}
.box-gran-video{
        display: flex
;
    flex-direction: column;
    gap: 3px;
}

.menu-opciones {
    display: flex
;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
    gap: 20px;
}
.contenido-opciones {
    display: flex
;
    flex-direction: column;
    background: #fff;
    border-radius: 25px;
    padding: 15px;
    margin: 0px;
    justify-content: space-between;
    height: auto;
            gap: 0px;
}

.caja-certificado-taller {
    display: flex
;
    align-items: center;
    justify-content: center;
    background: #0E2B6D;
    border-radius: 15px;
    padding: 15px;
    flex-direction: column-reverse;
}
.button-taller span {
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}
.boton-taller-abajo {
    display: flex
;
    align-items: center;
    justify-content: center;
}

.container-descripcion-episodio {
    display: flex
;
    flex-direction: column;
    background: #fff;
    border-radius: 25px;
    padding: 20px;
    margin: 0px;
    gap: 30px;
    height: auto;
}
    .box-texto-youtube p {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0px;
}

.recomendacion-comentario p {
    color: #666666;
    font-weight: 600;
    font-style: italic;
    margin: 0px;
    font-size: 14px;
}
.comentario-cabecera span {
    font-weight: 600;
    font-size: 14px;
    color: #0E2B6D;
}


.comentario-fecha span {
    font-weight: 600;
    font-size: 14px;
    color: #0E2B6D;
}
.comentario-autor {
    display: flex
;
     align-items: start; 
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.comentario-abajo p {
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    margin: 0px;
    text-align: justify;
}

.caja-envio-respuesta p {
    color: #666666;
    font-weight: 600;
    margin: 0px;
    font-size: 14px;
}
.container-general-comentario {
  
    padding-right: 0.5rem;
}
.descripcion-episodio p {
    color: #000000;
    font-size: 14px;
    text-align: justify;
}
.imagen-for-mobile{
    display:flex;
}

.imagen-for-web{
    display:none;
}

.div-podcasts h1 span{
    border-bottom:none;
}

h1{
    font-size:30px !important;
}
.parrafo-central-curso p {
    color: #333333;
    text-align: center;
    font-weight: 400;
    margin: 2rem;
    font-size: 14px;
    margin-bottom: 3rem;
}

.caja-principal-podcast {
    display: flex
;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 20px;
}.card-imagen {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex
;
    justify-content: center;
    width: 335px;
    height: 414px;
}

.logo-podcast {
    width: 165px;
}

.info-texto p {
    color: #2A5186;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

.button-podcast p {
    margin: 0;
    color: #333333;
    font-size: 15px;
    font-weight: 600;
}

.lado-derecho{
    width:100%;
}

.descripcion-parrafo p {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
  
}
.descripcion-parrafo span {
    color: #333333;
    font-size: 14px;
    font-weight: 600;
}

.lista-videos .caja-video:nth-child(n+1) {
    display: none; /* Ocultar las cajas a partir de la cuarta */
}

.lado-izquierdo{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.profesor-nombre p {
    margin: 0px;
    color: #0E2B6D;
    font-weight: 600;
    font-size: 14px;
    font-style: italic;
}

.lista-podcasts {
    display: flex
;
    flex-direction: column;
    gap: 20px;
}

.div-slide-derecha {
    background: #F2F2F2;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    right: 0rem;
}


.div-slide-izquierda {
    background: #F2F2F2;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    left: 0rem;
    z-index:2;
}


.logo-podcast-2 {
    width: 100px !important;
}

}