@charset "utf-8";

@import url('https://fonts.googleapis.com/css2? family= Kanit:ital,wght@0,900;1,900 & family= Lemonada:wght@300 & display=swap');
@import url('https://fonts.googleapis.com/css2? family= Antonio:wght@500;700 & family= Kanit:ital,wght@0,900;1,900 & family= Lemonada:wght@300 & mostrar=cambiar');


* {
    margin: 0%;
    padding: 0%;
box-sizing: border-box;
}

body {
    background-color: rgba(0, 0, 0, 0.804);
    color: white;
    font-family: "lato";
   
}

html{
    scroll-behavior: smooth;
}
/*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*//*portada*/
    
.transparente{
height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.714),rgba(0, 0, 0, 0.016)),url(imagenes/caratulaphone.jpg);
background-size: cover;
background-position: center;
}


.menu{
    position: fixed;
    display: grid;
    grid-template-columns: 12% 20% auto 12%;
    grid-row: repeat(8 1fr);
    align-items: center;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Antonio', sans-serif;
    background-color: rgba(0, 0, 0, 0.13);
    
}
.menu .coimg  {
    height: 110px;
    width: 110px;
    display: grid;
    grid-template-columns: 25% 50 25%;
    grid-column: 2 / 3;
    align-items: center;
   

}

.menu .menunav {
 
    display: flex;
     justify-content: space-between;
     font-weight: bold;
     justify-items: end;
}
div[id] {
    scroll-margin-top: 13vh ;
}
article[id] {
    scroll-margin-top: 13vh ;
}



.menuhb{
    width: 70px;
    height: 70px;
   justify-items: end;
}

.menu .menunav {
 
   display: none;

   

}
.menu .menunav li{
    list-style: none;
    cursor: pointer;
}

.menu .menunav a{
    text-decoration: none;
    color: orangered;
    

}
.menu .menunav a:hover{
    color: white;
}

.menu ol li{
    position: relative;
}

.menu ol li::before{
    content: "";
    height: 3px;
    width: 0%;
    background-color: white;
    position: absolute;
    left: 0%;
    bottom: -10px;
    transition: 0.4s ease-out;
 
}
.menu ol li:hover::before{
    width: 100%;
    
}
.menu ol li.active::after{
    opacity: 1;
}


.alumno{
    display: grid;
    grid-template-columns: 12% 1fr 1fr 1fr 12%;
    grid-template-rows:  repeat(8,1fr);

    height: 80vh;

}
header section h1{
 
   
    grid-column: 2 / 5;
    grid-row: 7 / 8;
    font-size: 5em;
    font-weight: bold;
   
    

}
.descripcion{
    grid-column: 2/5;
    grid-row: 8/9;
    font-size: 2em;
}

/*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS *//*MATERIAS */



.pregrado{
    margin-top: 10vh;
    max-width: 100%;
    display: grid;
    height: 83vh;
    grid-template-columns: 12% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 12%;
    grid-template-rows: repeat(8, 1fr);

}
.carrera{
    grid-column: 2 / 10;
  grid-row: 1/2;
  color: orangered;
   font-size: 6em;
   font-weight: bold;
   text-align: center;
}

.iconomaterias{
    justify-content: center;
}

.vermas a{
    display: flex;
    text-decoration: none;
    font-weight:bolder ;
    text-transform: uppercase;
    color: white;
    font-size: 2em;
    padding: 1em;
    justify-content: space-evenly;
    margin-bottom: 2rem;
}

.cuarenta{
 font-size: 4em;
 text-align: center;
}
.vermas a:hover{
color: orangered;
padding: 1em;
border-radius: 1em;
background-color:white ;
transition: 0.8s;

}

.porcentaje{
 display: grid;
    grid-column: 2 / 10;
  justify-content: center;
  color: white;
   font-size: 1,5em;
   font-weight: bold;
   margin-top: 2vh;

}

/*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*//*alumnos*/
.jt22titulo{
    display: flex;
   text-align: center;
   justify-content: center;
   font-size: 4em;
   font-weight: bold;
   background-color: orangered;
   margin: 1rem;
   margin-left: 0;
   margin-right: 0;
}
.datosjt22{
    background-color: orangered;
    display: flex;
    justify-content: center;
    align-items: center;
   



}


.datosjt22 ol{

    justify-content: space-between;
    list-style: none;
    column-gap: 8vh;
    row-gap: 6vh;
    margin: 2rem
}

.datosjt22 ol li a img{
   border-radius: 20px;
   

   
}
.recorrido{
  
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
    display: grid;
    justify-items: center;
    font-size: 2em;

    text-align: center;
    place-items: center;

    
}

.sj{
    
    object-fit: cover;
    overflow: hidden;
    border-radius: 20px;
}
.sj img:hover{

    transition: 2s;
    transform: scale(1.2);
    opacity: 40%;
}
.sj p{
    grid-column: 1/2;
    grid-row: 1/2;
    justify-content: center;
    justify-items: center;
    font-weight: bold;
    transition: 0.4s;
    
}

.rl{
  
    text-decoration: none;
    color: aliceblue;
    display: grid;
    justify-items: center;
    font-size: 2em;
    font-weight: bold;

    text-align: center;
    place-items: center;

    
}

.lg {
    
    object-fit: cover;
    overflow: hidden;
    border-radius: 20px;
}
.lg img:hover{

    transition: 2s;
    transform: scale(1.2);
    opacity: 40%;
}
.lg p{
    grid-column: 1/2;
    grid-row: 1/2;
    justify-content: center;
    justify-items: center;
    transition: 0.4s;
    
}

.rc{
  
    text-decoration: none;
    color: aliceblue;
    font-weight: bold;
    display: grid;
    justify-items: center;
    font-size: 2em;

    text-align: center;
    place-items: center;

    
}
.cg{
    
    object-fit: cover;
    overflow: hidden;
    border-radius: 20px;
}
.cg img:hover{

    transition: 1.7s;
    transform: scale(1.2);
    opacity: 40%;
}
.cg p{
    grid-column: 1/2;
    grid-row: 1/2;
    justify-content: center;
    justify-items: center;
    transition: 0.5s;
    
}

/* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO *//* PORTAFOLIO */

.h1pf{
    
    padding-top: 10vh;
    text-align: center;
    font-size: 4em;
    margin-bottom: 2rem;

}
.portafolio{
 
    margin-top: 7em;
    margin-bottom: 7em;
    padding-top: 7vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.871),rgba(0, 0, 0, 0.115)),url(imagenes/tps.jpg);

}
.portafolio h2{
    font-size: 4em;
    font-weight: bold;
    text-align: center;
}
.portafolio a{
    text-decoration: none;
    font-weight:bolder ;
    text-transform: uppercase;
    color: white;
    font-size: 2em;
    padding: 1em;
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    
}
.portafolio a:hover{
color: orangered;
padding: 1em;
margin-left: 18em;
margin-right: 18em;
border-radius: 1em;
background-color:white ;
transition: 0.4s;

}
.trabajos{
   display: flex;
   flex-direction: column;
   gap: 3rem;
   align-items: center;
}

.trabajos img{
    border-radius: 1rem;

}

.redes{
    display: grid;
    grid-template-columns: 12% 1fr 1fr 1fr 1fr 12% ;
    grid-template-rows: 1fr 1fr;
    margin-top: 5rem;
    justify-items: center ;
    padding-top: 4rem;
    background-color: rgba(0, 0, 0, 0.24);
}
.be{
    grid-column: 3/4;
    grid-row: 1/2;
    width: 12vh;
}
.ig{
    grid-column: 4/5;
    grid-row: 1/2;
    width: 12vh;
    justify-content: end;
}
.redes h3{
grid-row: 2/3;
grid-column: 3/5;
font-size: 4em;
text-align: center;
margin-top: 1rem;
margin-bottom: 4rem;

}



/* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS *//* CATEDRAS */


.h1catedras{
    font-size: 4em;
    text-transform: uppercase;
    color: orangered;
    margin-bottom: 3rem;
    text-align: center;
    padding-top: 20vh;
    
}

.materias{
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 2em;
   
}

.materias h2{
    margin-bottom: 1rem;
}
.niveluno{
   border-style: solid;
   margin: 2rem;
   width: 16em;
   height: 20em;
   padding: 2rem;
   border-radius: 1em;
   box-shadow: 1em 1em orangered;
}

.niveluno ul{
   
    list-style: none;
  
 }

.niveldos{
    border-style: solid;
    margin: 2rem;
    width: 16em;
    padding: 2rem;
    height: 20em;
    border-radius: 1em;
    box-shadow: 1em 1em orangered;
}

.niveldos ul{
   
    list-style: none;
  
 }
.encurso{
    border-style: solid;
    margin: 2rem;
    width: 16em;
    padding: 2rem;
    height: 20em;
    border-radius: 1em;
    box-shadow: 1em 1em orangered;
}
.encurso ul{
   
    list-style: none;
  
 }
/*comitente*//*comitente*//*comitente*//*comitente*//*comitente*//*comitente*//*comitente*//*comitente*//*comitente*//*comitente*/

.comitente{
   
    display: grid;
    grid-template-columns: 12% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 12%;

}
.imgcomitente{
    margin-top: 6em;
    margin-bottom: 3em;
}
.acumar{
    grid-column: 2/10;
}
/* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*//* footer*/

.footer{
display: grid; 
grid-template-columns: 12% 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 12%;
/*justify-items: center;*/
padding-top: 3rem;

}

.legales{
    font-size:small ;
    font-weight: lighter;
    grid-row: 2/3;
    grid-column: 2/10;
    margin-top: 1rem;
    color: rgb(227, 223, 223);
}


.log1{
    grid-column: 2/4;
}

.log2{
    grid-column: 5/7;
}
.log3{
    grid-column: 8/10;
}



/*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*/


@media  screen and(min-width:789px) {
    .porcentaje{
        height: 220vh;
        margin-bottom: 200px;
    }
}

/* NEST HUB  */
@media screen and (min-width:1024px) {
    .transparente{
        background-image: linear-gradient(rgba(0, 0, 0, 0.714),rgba(0, 0, 0, 0.016)),url(imagenes/caratula.svg.jpg);
       }
      

        
    .menu .coimg  {
        height: 110px;
        width: 110px;
        display: grid;
        grid-template-columns: 25% 50 25%;
        grid-column: 2 / 3;
        align-items: center;
        
}

.menu .menunav {
 
    display: flex;
     justify-content: space-between;
     font-weight: bold;
     justify-items: end;
    
}
.menuhb{
    display: none;
}
    
    .pregrado{
        height: 110vh;
    }
    .porcentaje{
        width: 40vh;
        grid-column: 5/7;

    }
    .cuarenta{
            font-size: 4vh;
    }
    
    header section h1{
 
   
        grid-column: 3 / 5;
        grid-row: 5 / 8;
        font-size: 3em;
        text-align: end;
        
    
    }
    .descripcion{
 
   
        grid-column: 3 / 5;
        grid-row: 7 / 9;
        font-size: 1em;
        text-align: end;
        
    
    }
    .materias{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .trabajos{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-left: 3em;
        padding-right: 3em;
    
     }
}
/* NEST HUB max */

@media screen and (min-width:1275px) {
    
header section h1{
 
   
    grid-column: 3 / 5;
    grid-row: 3 / 6;
    font-size: 5em;
    

}
.descripcion{
    grid-column: 3/5;
    grid-row: 5/7;
    font-size: 2em;
    margin-top: 3rem;
}


/* materias */

.pregrado{
    margin-top: 13vh;
    height: 680px;
}
.carrera{
   font-size: 5em;
}

.iconomaterias{
    width: 20rem;
    justify-content: center;
}



.cuarenta{
 font-size: 2em;

}

.porcentaje{
    width: 20vh;;
    grid-column: 5/7;
    justify-content: normal;
}
/* fin materias */
/* almunos */

    .datosjt22 ol{
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
    }
    

}