@charset "utf-8" ;

/*----PRIMERO REGLAS PARA CELULAR - MOBILE FIRST */

* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}


body{
    background-color: #F7EDE2;
    min-width: 250px;
    margin-bottom: 0px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

figure img{
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}
 
 
#logo {
    margin: auto; 
    background-color: #ffcfb7;
    display: block;
}

#logo img{
    width: auto;
    display: block;
    margin: auto;
}
/* ---- header ----*/

header {
    display: block;
}

 /*---------nav--------*/

header { 
    height: 3em;
}

.navegacion_principal {
    background-color: #F28482;
    height: 4em;
    width: 100%;
    position: fixed;
    z-index: 9999;

}

.navegacion_principal ul {
    position: fixed;
    width: 100%;
    background-color: #F28482;
    top: 4em;
    right: -100%;
    text-align: center;
    transition: all .5s;
    float: left;
    margin-l: 20px;
    z-index: 9999;
    border-radius: 0.1em;

}

.navegacion_principal ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
}

.navegacion_principal ul li a {
    color: #ffffff;
    font-size: 20px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;

}

li a.active,
.navegacion_principal ul li a:hover {
    background-color: rgb(255, 255, 255);
    transition: .5s;
    color: black;
}
 
.checkbtn {
    font-size: 1.8em;
    color: rgb(255, 255, 255);
    float: right;
    line-height: 80px;
    margin: -0.3em 0.8em 0 1em;
    cursor: pointer;
    display: block;

}

#hamburguesa {
    background-color:  #455E58;
    padding: 0.3em 0.5em 0.3em 0.5em;
    border-radius: 0.1em;
}

#check {
    display: none;
}
 
.navegacion_principal ul li a:hover,
li a.active {
    background-color: #455E58;
    transition: .5s;
    color: #ffffff;
}

#check:checked~ul {
    right: 0;
}
 
/*----- FIN NAV -----*/

 
 / 

.aviso{
    background-color: #F28482;
    color: black;
    width: auto;
    font-family:sans-serif ;
    font-size: 0.8em;
    margin: 3em 3em 3em 3em;
    padding: .2em;
    text-align: center;
    
}
/*------- datos academicos------*/

#datosacademicos{
    font-family: sans-serif;
    text-align: center;
    display: block;  
    line-height: 2em;
    color: rgb(41, 41, 41); 
}

 
h5{
    color: white;
    text-align: center;   
    width: auto;
    background-color: #84a59d;
    width: 20em;
    border-radius: 2em;
    text-align: center;
    display: block;
    margin: auto;
}
 

h1{
    color: #455E58;
    text-align: center;
    background-color: transparent;
    font-family: sans-serif;
    display: block;
    margin: auto;
    padding: 1em;
  
 }
  
 /*------- cursando------*/ 
 .cursando{
    font-family: sans-serif;
    line-height: 1.5em;
    display: block;
    margin: 2em;
      
}

 h4{
     color: white;
     background-color:#84a59d ; 
     font-size: 1em;
     font-family: sans-serif;
     border-radius: 2em;
     padding: 0.5em 0 0.5em 0;  
     letter-spacing: 0.2em;
     text-align: center; 
     margin: 0 0 1em 0;
 }
 
 
 #logo {
     margin: auto; 
     padding: 2em 0 0 0;
     background-color: #ffcfb7;
     display: block;
 }
 
 .fotoanalisis{
    margin: 2em;
}

figure {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
     
}
 
 
 
 /*------- footer------*/
 .aviso{
     background-color: #F5CAC3;
     color: black;
     width: auto;
     font-family:sans-serif ;
     font-size: 0.8em;
     margin: 3em 3em 3em 3em;
     padding: .2em;
     text-align: center;
     
 }
   
 
/* ----- REGLAS GENERALES ----- */

/* REGLAS PARA DISPOSITIVOS DE ESCRITORIOS */

/* Escritprio pequeño /tablet */

@media screen and (min-width:768px){

body{
    background-color: #F5CAC3;
}

h1{
   color: #455E58; 
   font-family: sans-serif;  
   display: block;
   padding: 0.5em;  
} 

#logo {
    margin: auto; 
    background-color: #ffcfb7;
    display: block;
}
 

h5 h4{
    color: #455E58;
    text-align: center; 
    width: auto;
    text-align: center;
     
}
  
.cursando{
     font-family: sans-serif;
     border-radius: 10em;
     line-height: 1.5em;
     display: block;  
     margin: 2em;  
}


.cursando ul {
    padding: 0 0 0 2em;
} 
 

.aviso{
    background-color: #F7EDE2;
    color: black;
    width: auto;
    font-family:sans-serif ;
    font-size: 0.8em;
    margin: 3em 3em 3em 3em;
    padding: .2em;
    text-align: center;
    
}
#datosacademicos{
    font-family: sans-serif;
    text-align: center;
    display: block;
    width: auto;
    text-decoration: none;
    line-height: 1.5em;

}
figure img{
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}



}

/* Escritorio grande */
@media screen and (min-width:992px){

    body{
        background-color: wheat;
    }

    h1{
        color: #455E58;
        font-size: 2em;
        text-align: center; 
        font-family: sans-serif;
     
     }  
    

     h5{
        color: white;
        text-align: center;   
        width: auto;
        background-color: #84a59d;
        width: 20em;
        border-radius: 2em;
        text-align: center;
        display: block;
        margin: auto;
    }
    
 /* ---- Nav ----*/

 .navegacion_principal ul li a {
    font-size: 16px;
}

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

}

#check {
    display: none;
}
 

.navegacion_principal ul {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: -29em;
    position: initial;
    background: none;
    margin: auto;
    margin-left: -0.4em;
    height: initial;
    text-align: end;
    float: none;
}

.navegacion_principal ul li {
    display: inline-block;
    margin: 1em 0.3em;
}

.navegacion_principal ul li a:hover {
    background-color: #84a59d ;
    color: #ffffff;
}

.navegacion_principal ul li a {
    color: #283618;
    font-size: 1em;
    margin: 0 0 0 0;
    padding: -1em 0.8em;
    border-radius: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #84a59d ;
}
  
.cursando{
    font-family: sans-serif;
    line-height: 1.5em;
    display: block;
    margin: 2em;
    width: auto;      
}

.cursando ul {
    padding: 0 0 0 2em;
} 


.links{
    font-family: sans-serif;
    border-radius: 2em;
    margin: auto;
    text-align: right;
    background-color: #F28482;
    
    
}

}
  

/* Escritorio extra grande*/
@media screen and (min-width:1200px){

body{
    background-color: wheat;
}

h1{
   color: #455E58;
   text-align: center;
   background-color: transparent;
   font-family: sans-serif;
   font-size: 2em; 
   display: block;
   margin: auto;
   padding: 0.5em 0 0.5em 0;
 
}

h3{
   color: black;
   font-family: sans-serif;
   display: block;
   width: auto;
}

h4{
    color: white;
    background-color:#84a59d ; 
    font-size: 1em;
    font-family: sans-serif;
    border-radius: 2em;
    padding: 0.8em;
    text-align: start;
    letter-spacing: 0.2em;
 
}

h5{
    color: white;
    text-align: center;   
    width: auto;
    background-color: #84a59d;
    width: 20em;
    border-radius: 2em;
    text-align: center;
    display: block;
    margin: auto;
}


#logo {
    margin: auto; 
    background-color: #ffcfb7;
    display: block;
    padding: 3em 0 0 0;
}

 
 
/*--------nav------*/
.navegacion_principal ul li a{
    color: white;
    background-color:#455E58; 

}

.navegacion_principal ul  {
      background-color: #F1807E;
      margin: 0;
      text-align:center;
}


header nav{
    background-color: transparent;
    margin: trasparent ;
}

header nav ul{
    display: block;
    margin: auto;
    text-align: center;
    padding: 0em;
}

header nav ul li{
    margin: 2em 2em 2em 2em; 
    color: transparent;
    display: inline-block;
 
}
 
header nav ul li a{ 
    background-color: #F1807E;
    display: block;
    width: auto;
    text-align: center;
    width: 10em;
    font-family: sans-serif;
    border-radius: 1em;
    padding: 0.2em;
    color: white;
    text-decoration: none;
    
}

.aviso{
    background-color: #F5CAC3;
    color: black;
    width: auto;
    font-family:sans-serif ;
    font-size: 0.8em;
    margin: 3em 3em 3em 3em;
    padding: .2em;
    text-align: center;
    
}
#datosacademicos{
    font-family: sans-serif;
    text-align: center;
    display: block;
    width: auto;  
    line-height: 1.5em;
    color: rgb(41, 41, 41);

}
figure {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    justify-content: center;
    align-items:center;
    margin-right: auto;
     
}
 

.propuesta img{
    max-width: 100%;
    height: 100vw;
    display: block;
    width: 100%; 
     
    
  }


}