/* __________________________________________________REGLAS GENERALES__________________________________________________ */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  list-style: none;
  box-sizing: border-box;
}

img {
  /* para que una imagen nunca sea mayor
        que la caja que las contiene */
  max-width: 100%;
  height: auto;
}


/* selector múltiple */
h1,
h2,
h3,
h4,
p {
  /* redefine los márgenes inferiores
    para que midan el tamaño de la tipografía */
  margin-bottom: 1em;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
}

/* TODAS las listas */
ul,
ol {
  /* elimina bullets, números etc. */
  list-style: none;
  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*********
MOBILE FIRTS
*********/

/*----------------------------
    HEADER PARA TODOS
------------------------------*/
header{box-shadow:0px 2px 0px rgba(0,0,0,1);
    margin-left: 0.3em;
    font-family: sans-serif;}

header .contenedora {
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: .5em;
    margin:1em;
}

#logo {
    border-radius: .35em;
    padding: .2em;
    width: 4em;}
    

/*--------------  Barra de Navegación ----------------*/

header nav ul 
{display: flex;
flex-wrap: wrap; 
font-size: 0.7em}

header nav ul li {
min-width: 4em;}


header nav ul li a {
    color: black;
    font-weight:100;
    padding: .25em .5em;
    text-align:center;
    display:block;
padding-top: .1em;}

/*--------------  FOOTER PARA TODOS ----------------*/

footer { 
    margin-top:4em;
    margin-bottom: -1em;
    background-color: gainsboro;
    font-weight: 100; 
    font-family: sans-serif;
    font-size: 0.7em; 
    text-align: center;}


/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*--------------  MAIN ----------------*/

/*--------------  Seccion 1----------------*/
section:first-of-type {margin: 0 auto;}

.comitente  {
    width: 22em;
    margin: auto;
    padding: 2em;}

.comitente h1 { padding-bottom: .7em;
    font-family: sans-serif;
    border-bottom: .2rem solid #000000;}

.comitente h2{font-weight: 100;
    font-family: sans-serif;
    font-size: 1.2em;}

.comitente p{font-weight: 100;
    font-family: sans-serif;
    font-size: .7em;}

/*--------------  Seccion 2 ----------------*/
.integrantes{width: 20em;
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-items: center;
   margin:0 auto;
    padding: 2em;
text-align: center;}
    
.integrantes h2{padding-bottom: .7em;
    font-weight: 100; 
    font-size: 1.2em;
    font-family: sans-serif; 
    border-bottom: .2rem solid #000000;}


.alumnos {border: .01rem solid #000000;
    margin-top: .5em;
    border-radius: 1em;
    padding: 1em;
    width:12em;
    height: 18em;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-family: sans-serif;
}

.alumnos img {
    width: 90%;
    height: 9em;;
border-radius: 1em;}

.integrantes article h3 {
    margin-top: .5em;
    font-weight: 400; 
    font-size: 1em; 
    margin-bottom: 0.3em;
}

.integrantes article a {

    color: black;
    font-weight:300;
    padding: .5em 1em;
    margin: auto 0 0 auto;
}

.integrantes p {font-weight: 100;
    font-size: 0.7em;
    margin-top: 0.1em;}



/*-------------- Seccion 3 ----------------*/

.usuario {
    max-width: 20em;
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    margin: auto;
    padding: 2em;
}

.usuario a{color:black;}


.usuario h2 {padding-bottom: .7em;
    font-weight:100%;
    font-family: sans-serif; 
    font-size: 1.5em;
    border-bottom:.2rem solid #000000;
text-align: center;}


.protopersona{display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.boton{width:11em;
height: 3em;
background:none;
border: .1em solid black;
border-radius: 1em;
margin-bottom: 1em;
}

/*--------------  Bocetos ----------------*/


.bocetos{text-align: center;
display: flex;
justify-content: center;}

#boceto h2 {font-size: 1.5em;
}

#boceto button a{color: black;}


/*--------------  Seccion 4----------------*/
.datos-academicos {text-align: center;
margin:3em 1em;
display: flex;
flex-flow: column wrap;
}

.datos-academicos h2 { padding-bottom: .7em;
    font-weight: 100%; 
    font-family: sans-serif;
    border-bottom: .2rem solid #000000;
font-size: 1.5em}

.datos-academicos h3 { font-weight: 100; 
    font-family: sans-serif;
    font-size: 1.2em;
margin-top: 1.8em;}

.datos-academicos li { font-weight: 100; 
    font-family: sans-serif;
    font-size: 0.8em}

.datos-academicos img{width: 15em;
    margin-bottom: -.5em;
}


/*--------------  Para Escritorio ----------------*/

@media(min-width:1024px){
    
/*--------------  Header para todas las paginas ----------------*/    
header{height: 3em;}
    
header .contenedora{
    padding: .3em;
    margin:2em;
    max-height: 2em;
    max-width:100%;
    margin: 1em;
    padding: 1em;}

#logo{
    width: 6em;}
    
nav ul li a{font-size: 1.3em;}
    
/*--------------  Footer para todas las paginas ----------------*/ 
      footer {font-size: .8em;
    padding:1em; 
}
    
    
/*--------------  Body ----------------*/
    body{text-align: center;}
    
   /*--------------  Main ----------------*/ 
    
    main{
    display: flex;
    flex-flow: column wrap;}
    
    /*--------------  Seccion 1----------------*/
.comitente  {
    width: 50em;
    margin: auto;
    padding: 2em;}

.comitente h1 {font-size: 2em;}

.comitente h2{font-size: 1.8em;}

.comitente p{font-size: 1em;}
    
    /*--------------  Seccion 2 ----------------*/
    .integrantes{flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 4em;}
    .alumnos{margin-top: 3em;}
    article h2{margin-top: 2em;
    text-transform: uppercase;}
    
    /*--------------  Seccion 3 ----------------*/
    
    .usuario {
    width:100%;
    flex-flow: row wrap;
        padding: 0;
}

.usuario h2 {font-size: 1.8em;
  }


.protopersona{justify-content: center;
    margin-bottom: 3em;
}


/*--------------  Seccion 4----------------*/
.datos-academicos {margin-top:5em;
}

.datos-academicos h2 {margin-bottom: 2em;
    font-size: 1.8em;}

.datos-academicos h3 {font-size: 1.6em;
margin-top: 3em;}
    
    .datos-academicos h4{font-size: 1.4em;}

.datos-academicos li { font-weight: 100; 
    font-family: sans-serif;
    font-size: 1em}

.datos-academicos img{width: 20em;
    margin-bottom: -.5em;
}

}
  
/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------
             MAPA
------------------------------*/

/*-------------- Mapa ----------------*/

.mapa{display: flex;
flex-flow: column wrap;
align-items: center;
}

.mapa h1{font-size: 1.5em;}

.mapa ul{font-size: 1.2em;}

.mapaNav{display: flex;
flex-direction: column;
margin: 4em 0;
text-align: center;}

.mapaNav img{width:90%;}

.mapaNav h2 {font-size: 1.2em;
    padding-bottom: .7em;
    font-weight:100%;
    font-family: sans-serif; 
    border-bottom:.2rem solid #000000;}

/*--------------  Para Escritorio ----------------*/

@media(min-width:1024px){
    #mainMapa{margin:2em 0;
    display: flex;
    flex-direction: column;}
    
    .mapa{
    width: 100%;
    margin-top:8em;}
    
   .mapaNav{display: flex;
       align-items: center;
margin: 5em 0;}

    .mapaNav figure{width:50em;
    margin-top: 2em;
}
    .mapaNav img{height: 50em;}

.mapaNav h2 {font-size: 1.2em;
    padding-bottom: .7em;
    font-weight:100%;
    font-family: sans-serif; 
    border-bottom:.2rem solid #000000;} 
    
}

/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------
             PLAN
------------------------------*/
#comitentePlan h1{font-size: 1.3em;
text-align: center;}
.datos{display: flex;
flex-flow: column wrap;
align-items: center;}
.datos h2{font-size: 1.3em;}

.mockups{display: flex;
    flex-flow: column wrap;
    align-items: center;
    text-align: center;}
.mockups h3{font-size: 1em;}
.imagenMockups{width:90%;
margin: 0 1em 2em 1em;}


/*--------------  Para Escritorio ----------------*/

@media(min-width:1024px){
    #comitentePlan{margin-bottom: 4em;}
.datos h2{font-size: 1.8em;}
}
.mockups h3{font-size: 1.3em;}
.imagenMockups{width:90%;
margin: 0 1.5em 5em 1.5em;}
     
}