/*
ESTRUCTURA BÁSICA
{propiedad: valor;} 

EJEMPLO
{background: #afe1fe}

*/

/*GENERAL*/
* {margin: 0; padding: 0; box-sizing: border-box;}
h3 {font-family: 'IBM Plex Sans'; font-weight: 700; font-size: 1.3rem;}


.logo {
    margin: auto;
    padding: 0.5rem;

}

.menu-desktop {
    display: none; }

.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

nav{
    display: flex;
    backdrop-filter: blur(20px);
    padding: 1rem;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    height: 50px;
    width: 100%;
    position: fixed;
}


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;700&family=Roboto+Slab&display=swap');

body {background: rgb(255, 255, 255);}


ul {    padding: 0.5rem;
    display: flex;
    justify-content: space-between;}

h1 {size: 20rem;font-family: 'IBM Plex Sans'; font-weight: 700; font-size: 2.5rem; color: white; height: fit-content;}
.h1_reg {font-family: 'IBM Plex Sans'; font-weight: 300; font-size: 2.5rem;}

h2 {font-family: 'IBM Plex Sans', bold; font-weight: 700; font-size: 1.5rem ; color: rgb(0, 0, 0);}
.h2_reg {font-family: 'IBM Plex Sans'; font-weight: 400; font-size: 1.5rem;}
a {text-decoration: none; font-family: 'IBM Plex Sans', bold}
li {list-style: none}
p {font-family: 'Roboto Slab', bold;}

header nav a {color: white; 
    font-family: 'IBM Plex Sans'; 
    font-weight: 700; 
    font-size: 0.7rem;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 10px;
}

header nav ul li {
    display: flex;
    padding: 0 20px;
    width: 90px;
    height: 30px;
    justify-content: center;
    align-items: center;
}

header nav ul li a:hover {
color: #00F800;
}

.boton {background-color: #00F800;
    font-weight: 700;
    color: #000000;
    padding: 7px 30px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    background: #00F800;

}

.boton:hover {
    background: #00e500; 
    filter: drop-shadow(0.5px 0.5px 2.5px #00F800);
    color: #ffffff;
    font-weight: 700;
}

header img {width: 3rem;}

/*SECCIÓN PORTADA*/
.portada_estudiante {
    background-position: center;
    display: flex; 
    min-height: 24rem;
    align-items: center;
    padding: 5rem;
}
.titular {
    padding: 1rem;
    margin: 2rem;
}
.volanta {
    color: white;
}

.franc {width: 200px; border-radius: 100%;}

/*SECCIÓN PROYECTOS*/
/*.proyectos_behance {display: grid; grid-template-columns: 25% 25% 25% 25%;}*/

.proyects {
    margin: 1rem;
}

.carrousell {
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-color: rgb(255, 255, 255);
    /*display: grid; grid-template-columns: 25% 25% 25% 25%;*/
}
    

.elemento {
    flex: 1 0 auto;
    margin: 0.5rem;
    width: 16rem;
    background-blend-mode: screen;
    }

.carrousell img {
    width: 100%;
    }
.behance {    
    width: 90%;
    overflow-clip-margin: content-box;
    border-radius: 15px;
}



/*SECCIÓN MATERIAS*/
.carre {
    margin: 1rem;

}

.materias {display: flex;
justify-content: space-around;
padding-top: 1rem;
padding-bottom: 1rem;
}

.caja_nivel {    background: #000000;
    width: 30%; height:20rem ; padding: 2%; border-radius: 15px;}

.periodo_nivel {
    color: white;
    font-weight: 300; font-size: 0.8rem;
}
.h3_nivel {color: #6601FF;
text-decoration: none;
font-family: 'IBM Plex Sans'; font-weight: 700; font-size: 1.5rem;
}

.listado_materia {color: white; font-family: 'IBM Plex Sans'; font-weight: 500;}
.listado_materia_cursando {color: #00F800; font-family: 'IBM Plex Sans'; font-weight: 500;} 
.listado_materia_proximamente {color: #898989; font-family: 'IBM Plex Sans'; font-weight: 500;}
.listado_textochico {font-family: 'IBM Plex Sans'; font-weight: 300;  font-size: 0.8rem }

/*SECCION GRUPO*/


                    /*inicio prueba card*/

                        .card2 {
                            position: relative;
                            width: 300px;
                            height: 400px;
                            
                        }

                        .card2 .card_landing {
                            position: relative;
                            width: 100%;
                            height: 100%;
                            border-radius: 15px;
                            /*box-shadow: 0 5px 10px #000;*/
                            background: linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%), var(--i);
                            background-position: center;
                            background-size: cover;
                            /*background-image: url(../../1/avatar.jpg);*/
                        }

                        .card2 :hover {
                            background-position: center;
                            background-size: 26rem;
                        }

                        
                        .card2 .card_landing article {
                            display: flex;
                            justify-content: center;
                        }
                        
                        .card2 .card_landing h3 {
                            position: absolute;
                            bottom: 10px;
                            padding: 2rem;
                            text-decoration: none;
                            color: #fff;
                            text-align: center;
                        }

                        .card2 .card_landing p {
                            position: absolute;
                            bottom: 10px;
                            padding: 0.5rem;
                            color: #fff;
                            text-align: center;
                        }


                    /*fin prueba card*/


.seccion_estudiantes {
    background: black;
    padding: 1rem;
}
.h2_estudiante {
    color: white; text-decoration: none;
    margin: 2rem;
}
.seccion_estudiantes_2 {display: flex;
    justify-content: space-around;
        margin: 1rem;
        padding: 1rem;
        gap: 1rem;
}






.h3_estudiante {
    color:white; 
    text-decoration: none;
}
.p_estudiante {color: white; 
    text-decoration: none;
    
}
.foto_estudiantes {width: 200px; border-radius: 5px;}

.card-text {bottom: 2rem;
}

    .ivo {
        background-image: 
        linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%),
        url('../../1/avatar.jpg');
        background-blend-mode: overlay;
        bottom: 0rem;
    }

    .gise {
        background-image: 
        linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%),
        url('../../2/avatar.jpg');
    }

    .sofi {
        background-image: 
        linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%),
        url('../../3/avatar.jpg');
    }

    .francoq {
        background-image: 
        linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%),
        url('../avatar.jpg');
    }

    .andre {
        background-image: 
        linear-gradient(to bottom, rgba(102,1,255,0) 68%, rgba(102,1,255,1) 100%),
        url('../../5/avatar.jpg');
    }






footer {background: black;}
footer p {
    color: rgb(255, 255, 255); 
    font-size: 0.8rem; 
    text-align: center; 
    padding: 0.5rem; 
    margin-left: 4rem; 
    margin-right: 4rem;
}

.foo_sec {
    padding-bottom: 4rem;

}



/*Bloque responsive*/
@media (max-width: 850px) {

    .titular {
        text-align: center;
    }
    .titular span {display: none;}

    .portada_estudiante {
        flex-direction: column;
        align-items: center;
    }

    .carre .materias{
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .caja_nivel {
        width: 100%;
        padding: 5%;
    }

    .seccion_estudiantes .seccion_estudiantes_2 {
        flex-direction: column;
        align-items: center;
    }

    /**/

    .checkbtn {
        display: block;
        margin-right: 30px;
    }
    
    .menu_hamburguesa {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: black;
        top: 80px;
        left: -100%;
        text-align: center;
        padding-left: 0;
        transition: all 0.5s;
        margin-top: 0;
        border-top: 1px solid;
    }
    
    
    .menu-desktop {
        display: none;
    }
    
    .menu-top h1 {
        margin-left: 30px;
    }
    
    .menu-top {
        padding-right: 0;
        width: 100%;
        align-items: center;
    }
    
    nav .menu-hamburguesa li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    
    /*mostrar menu h*/
    #check:checked~.menu-hamburguesa {
        left: 0;
    }
    
    #check:checked~.menu-hamburguesa li a {
        font-size: 20px;
    }
    

}