/* __________________________________________________REGLAS GENERALES__________________________________________________ */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Poppins', sans-serif;
    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{
    /* elimina bullets, números etc. */
    list-style: none;
    /* retira el relleno izquierdo predeterminado */
    padding: 0;
  }
  
  /*-----------------------------------------------------------------------------------------------------------------------------------*/
  
  /*********
  MOBILE FIRTS
  *********/
  
  /*----------------------------
      HEADER PARA TODOS
  ------------------------------*/
  
  .logoheader{
    text-align: center;
  }

  header{
      justify-content: space-between;
      align-items:center;
      padding: .5em;
      background-color: #A769B1;
    }
  
  #logo {
      width: 6em;
      padding: 20px 20px;
    }

   #logoAcumar{
       padding: .2em;
       width: 12em;
    }
      
  
  /*--------------  Barra de Navegación ----------------*/
  
  header nav ul {
      display: flex;
      flex-wrap: wrap;
      font-weight: 500; 
      font-size: 22px;
      justify-content: center;
    }
  
  header nav ul li {
      min-width: 4em;
    }
  
  
  header nav ul li a {
      color: white;
      font-weight:300;
      padding: .25em .5em;
      text-align:center;
      display:block;
      padding-top: .1em;
    }

    header nav ul a:hover {
      background-color: black;
      }
  
  /*--------------  FOOTER PARA TODOS ----------------*/
  
  footer { 
      background-color: black;
      padding: 2em;
    }
  
  h5 {
    color: #f1f1f3;
    font-weight: 300; 
    font-size: 12px; 
    text-align: center;
 }
  
  /*-----------------------------------------------------------------------------------------------------------------------------------*/
  
  /*--------------  MAIN ----------------*/
  
  /*--------------  Seccion 1----------------*/
  
  section:first-child {
      padding-top: 2em;
      padding-left: 2em;
      background-color: #FFF3E7;
    }
      
  
  h1{ 
      margin:0 auto;
      font-size: 35px;
      font-family: 'kalam';
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 0.4em;
    }

  h2{
    font-family: 'kalam';

  }


  h4 {
      font-weight: 500;
      font-size: 20px;
      color: #E47500;
    }
  
  p {
      font-weight: 400;
      font-size: 15px;
    }
  
  /*--------------  Seccion 2 ----------------*/
  .integrantes{
      width: 20em;
      display: flex;
      flex-flow: column wrap;
      justify-content: space-evenly;
      align-items: center;
      margin:0 auto;
      padding: 2em;
      text-align: center;
    }
      
  .integrantesH2{
      padding-top: 2em;
      text-align: center;
      margin:0 auto;
      font-weight: 700; 
      font-size: 30px;
      font-family: 'kalam';
    }
  
  
  .alumnos {
      padding: 1em;
      width:12em;
      height: 18em;
      flex-direction: column;
      text-align: center;
      background-color: #F5F5F5;
      border-radius: 1em;
          margin-bottom: 2em;
    }
  
  .alumnos img {
      width: 90%;
      height: 9em;;
    }
  
  .integrantes article h3 {
      margin-top: .5em;
      font-weight: 600; 
      font-size: 1.1em; 
      margin-bottom: 0.3em;
    }
  
  .integrantes article a { 
      color: #8B8B8B;
      font-weight:500;
      padding: .5em 1em;
      margin: auto 0 0 auto;
    }
  
  .integrantes p {
      font-weight: 300;
      font-size: 1em;
      margin-top: 0.1em;
    }

  
    #logoacumar {
      width: 7em;
    }
  
  
  
    /*--------------  Bocetos ----------------*/
  
  
  .bocetos {
      text-align: center;
      display: flex;
      justify-content: center;
    }
  
  #boceto h2 {
      padding-top: 1em;
      font-size: 1.6em;
    }
  
  #boceto button a {
      color: black;
    }

  #boceto img{
    max-width: 50%;
    height: auto;
  }
  
  
  /*--------------  Seccion 4----------------*/


  section:last-child{
    text-align: left;
    padding: 3em;
    display: flex;
    flex-flow: column wrap;
    background-color: #F5F5F5;
    
  }
  
  .datos-academicos h2 { 
      font-weight: 500; 
      border-bottom: .2rem solid #645f5f;
      font-size: 1.6em;
      font-family: 'kalam';
    }
  
  .datos-academicos h3 { 
      font-weight: 100; 
      font-size: 1.2em;
      margin-top: 1.8em;
    }
  
  .datos-academicos li { 
      font-weight: 100; 
      font-size: 0.8em;
    }
  
  .datos-academicos img {
      width: 15em;
    }
  
  
  .mvp{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    }
  
  .protopersona{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    }
    
  .bocetomapa{
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      }

      .faduimg{
        margin-bottom: 2em;
      }

      .textfadu{
        margin-top: 2em;
      }




  /*--------------  Para Escritorio ----------------*/
  
  @media(min-width:1024px) {
      
  /*--------------  Header para todas las paginas ----------------*/   

  header {
    display: flex;
    }
      
  header .contenedora {
      padding: .3em;
      margin:2em;
      max-height: 2em;
      max-width:100%;
      margin: 1em;
      padding: 1em;
    }
  
  #logo {
      width: 6em;
    }

    #logoacumar {
      width: 7em;
    }

      
  nav ul li a {
      font-size: 20px;
    }

    .logoheader{
      text-align: left;
    }
      
     /*--------------  Footer para todas las paginas ----------------*/ 
  footer {
      font-size: .8em;
      padding:2em; 
    }
      
      
     /*--------------  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;
    }



    .textoplan{
      width: 50%;
    text-align: center;
    justify-content: center;
    margin: auto;
    }
      
      /*--------------  Seccion 2 ----------------*/

      .integrantes{
          flex-direction: row;
          width: 100%;
          justify-content: space-evenly;
          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;
        }
  
  
  /*--------------  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-size: 1em
    }
  
  .datos-academicos img {
      width: 20em;
      margin-bottom: -.5em;
    }

        
  .mvp{
    width: 50%;
    }
  
  .protopersona{
    width: 50%;
    }

  .bocetomapa{
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      }

   /*--------------  Barra de Navegación ----------------*/
  
  header nav ul {
    display: flex;
    flex-wrap: wrap;
    font-weight: 500; 
    font-size: 16px;
    justify-content: right;
  }
    
  section:last-child{
    text-align: center;
    padding: 3em;
    display: flex;
    background-color: #F5F5F5;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
    
  }

  .textfadu{
    text-align: left;
  }
  

  }