/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/




/*  reseteo: selector universal */
* {
  box-sizing: border-box;
}



/* ----------------
     reglas generales
     ---------------- */


body {
  background-color: #fff5f5;
  font-family: sans-serif;
  margin: 0;
}


h1,
h2,
h3,
h4 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #98B6EC
}

h2,
h4 {
  color: #fff5f5
}


img {
  max-width: 100%;
}


/* "TODOS" los vínculos */
a {
  text-decoration: none;
  color: hsl(0 0% 50% / .75);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 1.1em;
}


/* "TODAS" las listas */
ul,
ol {
  list-style: none;
  padding-inline: 0;
}

.contenedora {
  width: min(100%, 75rem);
  margin-inline: auto;
  padding: 1rem;
}



/* -------------------
     componente superior
     y sus contenidos
     ------------------- */

/* tanto header como footer */
header,
footer {
  background-color: #FF9F97;
  color: whitesmoke;
}


/* el componente dentro de header
   que contiene el logo y el menú */
header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* "logo" */
#logo img {
  padding: .5em;
  aspect-ratio: 2 / 1;
  width: 8em;
}


/*
  botón del menu
  */

.menu-btn {
  background: #FF9F97;
}

.menu-btn,
.menu-fondo {
  border-radius: 50%;
  padding: .75rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}


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


/*
  menu 
  */

/* lista del menú en el encabezado */
header nav ul {
  margin-block: 0;
  display: none;
}


header nav a {
  color: white;
  background-color: #FF9F97;
  display: block;
  width: 5em;
  margin: .25em;
  padding-block: .25em;
  text-align: center;
  border-radius: .25em;

}


header nav a:hover {
  background-color: #fff5f5;
  color: #FF9F97;
}



/* ------------------
     componente central
     y sus contenidos
     ------------------ */


/* TODAS las secciones */
section {
  padding-bottom: 2rem;
}


/* YO */

.cuadrado {
  background-color: #FF9F97;
  border-radius: 2em;
  padding: 1em;
  max-width: 50em;
  margin: auto;
}

.fotoerika {
  object-fit: cover;
  display: block;
  align-items: center;
  margin: auto;
  border-radius: 2em;
}

.titulo {
  border-block-end: 3px solid #FF9F97;
  /* separa el "subrayado" del texto 1/4 del tamaño del texto */
  padding-bottom: .25rem;
}

.titulo2 {
  font-size: 1.2em;
  color: #fff5f5;
  margin: 0
}



/*
  sección equipo
  */

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.cuadradointe {
  background-color: #FF9F97;
  border-radius: 1.5em;
  width: 8em;
  margin: 10px auto;
}

.fotointe {
  object-fit: cover;
  aspect-ratio: 1/1;
  margin: auto;
  border-radius: 1em;
  display: flex;
  align-items: center;
}

.nombreinte {
  text-align: center;
  font-size: 1.2em;
  color: white;
}




/*
  sección datos académicos
  */

.academicos>ul>li:not(:last-of-type) {
  padding-block-end: 1.5em;
  margin-block-end: 1.5em;
}

.academicos img {
  width: 12em;
}


/* -------------------
     componente inferior
     y sus contenidos
     ------------------- */


/* párrafo/s contenidos en la etiqueta "footer" */
footer p {
  margin-block-end: 0;
}



/* --------------------------
     media queries,
     para cambiar la apariencia
     en la medida en que el
     navegador se ensancha
     (mobile first)
     -------------------------- */

/* cambios a partir de los 480px */
@media (min-width: 30em) {


  .menu-btn {
    display: none;
  }


  header nav,
  header nav ul {
    display: contents;
  }


  header nav ul li:first-of-type {
    margin-inline-start: auto;
  }


  header .contenedora {
    gap: .5em;
  }

  .cuadrado {
    background-color: #fff5f5;
    border-radius: 2em;
    padding: 1em;
    max-width: 50em;
    margin: auto;
  }

  .fotoerika {
    object-fit: cover;
    display: block;
    align-items: center;
    margin: auto;
    border-radius: 2em;
  }


  .cuadrado {
    background-color: #FF9F97;
    display: flex;
    align-items: center;
    gap: 5em;
  }

  .cuadradointe {
    background-color: #FF9F97;
    border-radius: 2em;
    width: 15em;
    margin: 10px auto;
  }

  .nombreinte {
    font-size: 20px;
  }

}

/* cambios a partir de los 640px */
@media (min-width: 40em) {


  .academicos>ul>li {

    display: flex;

    gap: 1em;

    align-items: flex-start;
  }

  .academicos h3 {

    margin-block-start: 0;
  }

}

/* cambios a partir de los 960px */
@media (min-width: 60em) {




  .academicos>ul {

    display: flex;

    gap: 1em;
  }


  .academicos>ul>li {
    width: calc(33% - .7em);
  }
}