:root{
    --colorNegro: #585858;
    --colorRojo: #e01d44;
    --colorAzul:#20a4cc ;
}

body{
    font-family: 'Roboto Condensed', sans-serif;
    overflow-x: hidden;   
    background-color: #f7f7f7;
}

.contenedor-header-2{
    display: flex;
    width: 100%;
    /* height: 50vh; */
    position: relative;
    background-color: var(--colorAzul);    
    /* padding-left:5%; */
    padding-bottom: 5%;
    padding-top: 5%;
    z-index: -2;
}

.header-video{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    /* object-position: center; */
}

.contenedor-header-elementos{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    padding-left: 5%;
}

.item-header{
    background-color: aliceblue;
    opacity: 0.8;
    border-radius: 1rem;
    width: 30%;
    text-align: center;
    padding: 15px;
    -webkit-box-shadow: 10px 11px 9px -7px rgba(0,0,0,0.68);
    -moz-box-shadow: 10px 11px 9px -7px rgba(0,0,0,0.68);
    box-shadow: 10px 11px 9px -7px rgba(0,0,0,0.68);
}

.titulo-header{
    font-size: 30px;
    font-weight: 900;
    color: var(--colorAzul);
}

.p-header{
    font-size: 18px;
    font-weight: 600;
    color: var(--colorNegro);
}

/* ***********************Titulo pagina********** */

.titulo-general{
    display:flex;
    flex-direction:column;
    align-items: center;
    text-align: center;
}

.titulo-pagina{
    
    color:var(--colorRojo);
    font-size: 48px;
    font-weight: 800;
}

.subtitulo-pagina{
    display:flex;
    align-items: center;
    
    margin-bottom: -3rem;
}

.l-p{
    margin-right: 10px;
    margin-left:10px;
}


/* ***********Card********************** */

.contenedor-cursos{
    margin: auto; 
    justify-content: center; 
    display: grid;
    grid-template-columns: repeat(3, 28%);
    gap: 3%;        
}

.contenedor-cursos2{
    margin: auto; 
    justify-content: center; 
    display: grid;
    grid-template-columns: repeat(2, 40%);
    gap: 3%;        
}



.contenedor-curso{    
    pointer-events: all;
    margin: auto;
    display: flex;
    flex-direction: column;
    background: #f7f7f7;
    box-shadow: inset -5px -5px 10px #d9d9d9,inset 5px 5px 10px #ffffff;
    border-radius: 1rem;
    align-items: center;
}
main{
    z-index: -2;
}

.img-curso{    
    height: 100%;
    width: 100%;
    border-radius: 1rem 1rem 8px 8px;
}
.img-curso > img {
    object-fit: cover;
    left: 0;
    height: 100%;
    position: absolute;
      width: 100%;
    top: 0;
    z-index: 1;
  }


.figura-curso a{
    width:100%;
    padding: 0;
}
.figura-curso img{
    width: 100%;

}

.contenedor-curso-info{
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.curso-titulo{
    width: 100%;
    color:var(--colorAzul);
}

.curso-autor{
    color:#707070;
    margin-top: -1rem;
    
}
.curso-puntaje{
    display: flex;
    align-items: center;
    

}

.puntaje{
    color: var(--colorRojo);
    font-weight: 600;
    margin-right: 20px;
    /* margin-left: 5%; */
    
}

.estrellas{
    width: 140px;
    height: 25px;
}

.curso-extra{
    display: flex;
    align-items: center;
    color: var(--colorRojo);
    font-weight: 600;

}
.extra-usuarios{
    display: flex;
    margin-right:20px ;
}

.usuario-svg{
    width: 25px;
}

.extra-duracion{
    display: flex;
}
.duracion-svg{
    width: 25px;
}

.curso-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.footer-precio{
    color: #1dbe17;
    font-weight: 700;
    font-size: 22px;
}

.footer-ir{
    text-align: center;
    width: 50%;
    height: 40px;
    padding-top: 20px;
    border-radius: 1rem;
    color:white;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(145deg, #26C1F0, #1A87A8);
     box-shadow: 1.8px 1.8px 7px #156A84, -1.8px -1.8px 7px #2BDEFF;
     transition: all 1s ease-in-out;
}

.footer-ir:hover{
    background: linear-gradient(145deg, #26C1F0, #22aad3);
     box-shadow: 1.8px 1.8px 7px #23acd6, -1.8px -1.8px 7px #43e3ff;
     transition: all 1s ease-in-out;
    }

    .boton{
        font-size: 17px;
    }

   

    @media (max-width:800px){
        .contenedor-cursos{
            grid-template-columns: repeat(2,45%); 
            margin-bottom: 100px;   /** Para 4 curso **/         
        }
        .footer-ir{
            width: 50%;
            font-size: 16px;
        }

        .titulo-pagina{
            color:var(--colorRojo);
            font-size: 25px;
            font-weight: 800;
        }
        .subtitulo-pagina{
            display:flex;
            align-items: center;
            
            margin-bottom: -1rem;
        }
    }

    @media (max-width:520px){
        .contenedor-cursos2{
            grid-template-columns: 95%;
            margin-bottom: 150px;   /** Para 3 curso **/       
        }
        
        .contenedor-cursos{
            grid-template-columns: 95%;
            margin-bottom: 150px;   /** Para 3 curso **/         
        }

        .contenedor-cursos{
            justify-content: center;
            align-items: center;
        }

        .contenedor-curso{
            width: 95%;
        }
        .footer-ir{
            width: 50%;
            font-size: 16px;
        }

        .item-header{
            width: 60%;
        }

    }

    @media (max-width:290px){
        .footer-ir{
            width: 40%;
            font-size: 12px;
            margin-left: 5px;
        }
        .titulo-pagina{
            color:var(--colorRojo);
            font-size: 10px;
            font-weight: 800;
        }
        .item-header{
            width: 80%;
        }

    }