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


/* Reseteamos los enlaces para funcionar como cajas... */
a {
  display: block;
}
/* ... excepto los que se encuentran en párrafos */
p a {
  display: inline;
}

li {
  list-style-type: none;
}

ul,
ol {
  /* elimina bullets, numeros etc. */
  list-style: none;

  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

/* Configuramos anclas suaves, para que el scroll sea sutil */
html {
  scroll-behavior: smooth;
}

/*navegación*/

header nav ul {
  /* caja flexible */
  display: flex;
  /* elementos que no caben van a otra linea */
  flex-wrap: wrap;
  /* eje principal */
  justify-content: flex-end;
  margin-top: 0.8em;
}

/* items de lista  que contienen los vínculos del menu */
header nav ul li {
  /* que no midan menos que: */
  min-width: 5em;
  /* separados */
  margin: 0.25em 0 0.25em 0.25em;
}

/* vínculos del menu principal */
header nav ul li a {
  color:white ;
  padding: 0.25em 0.5em;
  text-align: center;
  /* para que estas etiquetas "a" sean "cajas" */
  display: block;
}

/* cuando el cursor se posiciona sobre los vínculos y le agrega color/subrayado */
header nav ul li a:hover {
  color: black;
  text-decoration: underline;
}

/*CONFIGURACIONES GENERALES - MOBILE FIRTS*/
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: sans-serif;
  min-height: 100vh;
}

/* Configuraciónes que van a compartir el header y el footer */
header,
footer {
  background: skyblue;
  color: white;
  padding: 0.5em;
}

header {
  box-shadow: 0 4px 2px #0000003f;
  position: sticky;
  top: 0;
  z-index: 8000;
}

main {
  background-color: white;
}

img {
  margin:0;
  width: 100%;
}

.contenedora {
  max-width: 75em;
  margin: 0 auto;
}

.rotulosIndividuales {
  max-width: 75em;
  margin: 0 auto;
}

.rotulosIndividuales .infoEquipo {
  max-width: 75em;
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: black;
  font-family: 'Poppins', sans-serif;
}

section .contenedorRotulos a:hover {
  color: #0353a4;
}

.datosAcademicos {
  max-width: 75em;
  margin: 0 auto;
}

/*-----Todos los titulos-----*/
.titulos {
  display: block;
  margin: 2em auto 2em auto;
  padding: 1em;
  background-color:black;
  color: #ffffff;
  font-weight: bold;
  font-size: 25px;
  border-radius: 0.25em;
  max-width: 90%;
  text-align: left;
}




/*-------------------------------------------------------------HEADER-------------------------------------------------------------*/

header .contenedora {
  display: flex;
  justify-content: space-between;
}

.imagenLogo {
  height: 4em;
  margin: 0.5em;
  padding: 0.5rem;
  border-radius: 0.5rem;
}





/* ------------------------------------------------------INFORMACIÓN DE FADU -----------------------------------*/


.seccionFadu{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.infoFadu {
  max-width: 90%;
  min-height: 20em;
  margin: 1em auto 0em auto;
  padding: 1em;
  background:black;
  border-radius: 0.25em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.infoFadu p {
  margin: 0.5em auto 0em auto;
  font-family: 'Poppins', sans-serif;
  color: white;
}


.logoFadu {
  max-width: 90%;
  height: 14em;
  background-color: skyblue;
  border-radius: 0.25em;
}

.logoFadu a{
  width: 100%;
  height: 100%;
}

.logoFadu a img{
  width: 100%;
  height: 100%;
}










/*----------------------------------ROTULOS -------------------------------------------*/

.contenedorRotulos {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  margin: 2em auto 0em auto;
  padding: 1em;
  text-align: center;
  border-radius: 0.25em;
}


.rotulosIndividuales{
  min-height: 30em;
  margin: 1em;
  background:skyblue;
}

.rotulosIndividuales img {
  width:100%;
  height: 18em;
  text-align: center;
  
}


.rotulosIndividuales h3 , h4 {
  margin: 1em;
  text-align: center;

}

.rotulosIndividuales p {
  color: black;
  font-weight: normal;
  color: #ffffff;
}

section .contenedorRotulos a {
  background-color: #171c3c;
}

section .contenedorRotulos h3 {
 color:#171c3c;
}

/*-----Boton de los rótulos-------*/
.css-button-gradient--5 a{
  color: #edeae6;
}


.css-button-gradient--5:hover {
background-position: right center;
}
.css-button-gradient--5:active {
top: 2px;
}

.infoEquipo h3, h4{
  color: #edeae6;
  font-weight: 200;
}







/* DATOS ACADEMICOS ---------------------------------------------*/


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


.logos img {
  text-align: center;
  height: 4em;
  margin: .5em 0 2em 0;
}

.logos ul li {
  margin: 1em 1em 3em 1em;
  padding: 0 0 0 1em;
  border-radius: 0.25em;
}

.textosFadu {
  font-size: 0.8em;

}







/*FOOTER
--------------------------------------*/

footer p {
  margin: 1em 2em 1em 2em;
  font-family: 'Poppins', sans-serif;
}


/*MAPA */

.contenedoraMapa{
  margin: 2em;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.mapaWeb {
  margin: auto;
  background-color: #181c16;
  border-radius: 0.25em;
  box-shadow: 5px 5px 5px #181c16a9;
}

.mapaWeb img {
  width: 100%;
}



/* PLAN  */

.contenedoraPlan{
  margin: 2em;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}


.analisis{
  padding: 2em;
  display: flex;
  flex-flow: column wrap;

}

.analisis h2{
  text-align: center;
  margin-bottom: 2em ;
}

.analisis figure{
  width: 17em;
  
}

.analisis figure img{
  width: 100%;
  border: solid .1em black;
}



/*RESPONSIVE-TABLET*/

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

  /*Indicaciones Responsive -------------------------------------------*/

  .contenedorRotulos ul li {
      display: flex;
      align-items: flex-start;
      gap: 1em;
  }

  .rotulosIndividuales h3 {
      text-align: left;
      padding: 1em 0 0 0;
      margin: 0 0 1em 0;
  }

  .rotulosIndividuales a {
      padding-block: .25em;
      padding-inline: 1.5em;
      text-align: left;
  }

  /*DATOS ACADEMICOS---------------*/

  .logos ul {
      display: flex;
      margin: 0 1.5em;
  }

  .logoFadu{
          max-width: 90%;
          height: 15em;
  }
  
  /*FOOTER
  --------------------------------------*/

  footer p {
      margin: 1em 2em 1em 2em;
  }

  .analisis figure{
      width: 60em;
      
  }

  .mapaWeb{
      max-width: 90%;
      padding: 1em;
  }

}



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

  /*HEADER----------------------------*/

  header nav {
      margin-bottom: 0.5em;
      width: 100%;
  }

  .menu-btn {
      display: none;
  }

  header nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: right;
      align-items: center;
      margin-top: .5em;
      position: inherit;
      padding-top: 0;
      width: 100%;
      transition: none;
      visibility: visible;
      opacity: 1;
  }

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

  header nav ul li a {
      border-radius: .25em;
      font-size: 1rem;
      width: auto;
      padding: .35em 1.2em;
  }





  /*NAV---------------------------*/
  #nav-desplegable ul {
      display: flex;
      justify-content: space-between;
      gap: 0.5em;
      margin: 0 2em;
  }

  #boton-nav {
      display: none;
  }

  .imagenLogo {
      margin: 0 0 0 2em;
  }

  header .contenedora {
      margin: 2em auto 2em auto;
  }

  .encabezado {
      display: flex;
      justify-content: space-evenly;
      flex-wrap: nowrap;
      margin: 0 auto;
      align-items: center;
      max-width: 80em;
      width: 100%;
  }

  .rotulosIndividuales {
      max-width: 80em;
  }

  .datosAcademicos {
      max-width: 80em;
      width: 100%;
  }

  .titulos {
      font-size: 20px;
  }



      /*ROTULOS-------------------------------------------*/

      .contenedorRotulos ul li {
          display: block;
          padding: 3em;
          text-align: center;
          margin: 0em;
      }
  
      .contenedorRotulos ul {
          display: flex;
          max-width: 90%;
          gap: 3em;
          justify-content: space-evenly;
      }
  
      .rotulosIndividuales h3 {
          margin: 1em;
          text-align: center;
      }
  
      .rotulosIndividuales a {
          padding-block: .25;
          padding-inline: 1.5em;
          text-align: center;
      }


  /*TEMA*/

  .seccionFadu {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      max-width: 90%;
      margin: 1em auto 1em auto;
  }



  

  

  .infoFadu {
      max-width: 50%;
      margin: 0em 0em 0em 1em;
      padding: 1em;
  }




  /*DATOS ACADEMICOS---------------*/

  .logos img {
      height: 5em;
  }

  .logos ul {
      display: flex;
      margin: 0 2.5em;
  }

  /*FOOTER
  --------------------------------------*/

  footer p {
      margin: 1em 2em 1em 2em;
  }

  
}














