/*MOBILE*/

/*----------------------------GENERAL----------------------------*/

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

:root {
    --color-1: #e3d1cb;
    --color-4: #373e72b6;
    --color-3: #fbeae3;

}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Poppins', sans-serif;
  }
  
  header,
  footer {
    background-color: var(--color-1);
    color: white;
    padding: 1em;
  }
  
  main {
    background-color:var(--color-3);
    

  }
  
  img {
    max-width: 100%;
    margin: 0 0 0 0;
  }
  
  a {
    text-decoration: none;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .contenedor{ 
    margin: 4em auto;
    width: 80%;
}

.portafolio{ 
    margin: 4em auto;
    width: 80%;
    
}

.contenedor4{ 
    margin: 4em auto;
    width: 80%;
}

.rotulos_individuales{ 
    margin: 4em auto;
    width: 80%;
}

.titulos{
    padding: 0.5em;
    border-bottom: 4px solid var(--color-4);
    margin-bottom: 1em;
    color:var(--color-4) ;
    font-size: 1.5em;
}




  /*----------------------------HEADER----------------------------*/
  
  
  /*----- para que el menu desplegable no se vea---------*/
  #nav-desplegable ul {
    display: none;
  }
  /*----------------------------------------*/

.menu-btn .btn-linea{
    width: 1.5em;
    height: 3px;
    margin-block: 0.25em;
    transition: all 0.3s ease-out;
    background: white 
  
}
    

  header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 75%;
  }

  nav ul li a {
    display: block;
    background-color: #373e72b6;
    border: solid 3px #373e72b6;
    text-align: center;
    color: hsl(0, 75%, 97%);
    font-weight: 700;
    margin: 0.5em;
    padding: 0.25em 1em;
    border-radius: 0.25em;
  
  }
  
nav ul li a:hover {
    background-color: hsl(0, 0%, 100%);
  border: solid 3px #373e72b6;
  color: #373e72b6;
}

.activo{
    color: #373e72b6;
    background-color: white


}

.imglogo {
    height: 4em;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: white
  }
  

/*----------------------------PERFIL YOO----------------------------*/
   

   .contenedor2 img {
    width: 380px;
    border: solid 7px var(--color-1);
    border-radius: 50%;
    align-items: center;
}

.contenedor{

    margin: 20px auto;
    padding: 20px;
    border-radius:10px;
}

.perfil{
    margin-top: 1em;
}


.materias{
    display: flex;
    justify-content: space-between;
    max-width: 25em;
    }

.materias ul li {

    font-size: 80%;
} 

.materias-aprobadas h3 {
    color:#373e72;
    font-size: 1em;
} 

.materias-aprobadas h4 {
        color:#373e72;
        font-size: 1em;
        text-align: center;
} 


  /*----------------------------LINK REDES----------------------------*/ 
   .links-redes ul li{
        margin: 0.5em;
    
    }
    .links-redes ul{
        display: flex;
        align-items: center;
    }

    .links-redes img {
        width: 70px;
        border: solid 3px var(--color-1);
    
    }
  
    

    /*----------------------------PORTAFOLIO----------------------------*/ 
 
    .titulo-portafolio{
        margin: 2em 0 1em 0;
        padding: 0em;
        color:#373e72;
        font-size: 1em;
    }

   .portafolio p{
    margin: 2em 0 1em 0;
    padding: 0 0 0 2em;
    border-left: solid 6px var(--color-4);
    font-size: 55%;
}
   

.portafolioimg ul li {
    display: block;
    margin: 1em .5em 0em .5em;
    padding: 0em;
    text-align: center;
}

.portafolioimg img {
    width: 250px;
    margin: 0em;
    border: solid 7px var(--color-3);
    text-align: center;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.10);
    
   
    
   
}



.titulo-portafolio{
    color:  #373e72;
    margin: 0.5em;
    text-align: center;
}



   /*----------------------------BOCETO WEBAPP----------------------------*/ 


   .botones-links{
    display: flex;
}


.botones-links a{
    padding: 0.5em;
    background:#373e72;
    color: white;
    margin: 0.5em;
    padding: 0.5em 1em;
    border: solid 3px #373e72b6;

    border-radius: 0.25em;
    align-items: center;

}

.botones-links a:hover {
background-color: hsl(0, 0%, 100%);
border: solid 3px #373e72b6;
border-radius: 0.25em;
color: #373e72b6;
}


/*----------------------------EQUIPO JT----------------------------*/ 



    .jt41 ul li {
        display: block;
        margin: 1em .5em 0em .5em;
        background-color: var(--color-1);
        box-shadow: 0 7px 10px rgba(0, 0, 0, 0.10);
        padding: 3em;
        text-align: center;
    }
    
    .jt41 img {
        width: 150px;
        margin: 0em;
        border: solid 7px var(--color-3);
        border-radius: 8em; 
        text-align: center;
        background-color: white
    }
    
  
  
    .jt41 h3 {
        color:  #373e72;
        margin: 0.5em;
        text-align: center;
    }
   
   
   
   
 

  
  /*----------------------------DATOS ACADEMICOS----------------------------*/ 
  .academicos{ 
    margin: 4em auto;
    width: 80%;
}
   
  
  .logos ul {
        margin: 0 0 0 1em;
    }
    
    .logos img {
        text-align: center;
        height: 4em;
    }
    
    .logos ul li {
        margin: 1em 1em 3em 0em;
        padding: 0 0 0 1em;
    }
    
    
    .textos {
        font-size: 0.8em;
    }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  /*RESPONSIVE-DESKTOP*/
  
  @media screen and (min-width: 992px) {
  
  
  /*----------NAV -----------------*/
    #nav-desplegable ul {
        display: flex;
    }
  
    header nav ul {
      display: block;
    }
  
/*----- para que el boton de hamburguesa no se vea---------*/

    .menu-btn .btn-linea{
            display: none;
    }
  /*-------------*/

  
    .contenedora {
        max-width: 80em;
        width: 100%;
    }
  
    .titulos {
        font-size: 22px;
    }
  
    
    .contenedor2 > div {
        width: 50%;    
    }
    .contendor3 {
        width: 50%;
    } 
   
  
    .parrafos {
        max-width: 50%;
        margin: 1em;
        padding: 3em;
    }
    

    .contenedor2{
        display: flex;

    }

 /*----------MATERIAS -----------------*/
 .materias{
    display: flex;

    justify-content: space-between;
   
    max-width: 22em;
    }
   
    .materiasaprobadas {
        width: 50%;
    } 
/*----------PORTAFOLIO -----------------*/
    
.portafolioimg ul  {
    display: flex;
       justify-content: space-between;
       width: 100%
    
}


.portafolioimg img {
    width: 80%;
}

.portafolio p{
    margin: 2em 0 1em 0;
    padding: 0 0 0 2em;
    border-left: solid 6px var(--color-4);
    font-size: 100%;
}

/*----------EQUIPO -----------------*/
  
    .jt41 ul {
        display: flex;
        justify-content: space-between;
    }
  
    .jt41 ul li {
        width: 100%;
    }
    
    .jt41 img {
        width: 200px;
    }
  
  
    /*DATOS ACADEMICOS---------------*/
    .logos ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 0 0 1em;
    }
  
}