/*
================================
  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 */
* {
  /*
  para que el ancho de
  los elementos html
  se calculen hasta los bordes y
  NO sólo por sus contenidos,
  cambiando lo que viene predeterminado */
  box-sizing: border-box;
  margin-block: 0.65em;
  margin-left: 2%;
  margin-right: 2%;
}


/* ------------------
  paleta de diseño
 ------------------
"variables" css (propiedades personalizadas css):
son "recipientes con nombre" que guardan
valores css que se repetirán permanentemente
pq son parte de la paleta de diseño
(colores, tipografías, espacios entre los contenidos y los bordes de los elementos, entre los elementos,
tipos de sombras, bordes, espesores, etc
*/

/* selector "raiz" para que las "variables" estésn disponibles en todo el html */
:root {

  /* se guardan los colores del proyecto */

/* --color-textos: hsl(0 0% 0%); */

/* --color-textos-secundarios:

rgba(0, 0, 0, 0.5); */

/* --color-textos-alfa:

hsl(0 0% 0% / .2); */

/* --color-fondos:

hsl(0 0% 100%); */

/* --color-1:

hsl(210 92% 36%); */

/* --color-2:

hsl(38 100% 47%); */

/* --color-3:

hsl(280 29% 44%); */

/* --color-3-alfa:

hsl(280 29% 44% / .15); */

/* --color-4:

hsl(198 100% 44%); */

  /* se guardan las tipografías */

--tipo-titulos: sans-serif;

/* --tipo-textos: serif; */

  /*
  se guardan otras variables
  ...
  */

--sombras:
    0 /* desplazamiento horizontal;;
    4px /* desplazamiento vertical */
    2px /* desenfoque */

var(--color-textos-alfa);  /* color */

}


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

hr{
  background-color: rgb(255, 4, 0);
}

body {
  font-family: var(--tipo-textos);
  margin: 0;
  color: rgb(255 153 0);
}



h1,
h2,
h3,
h4 {
  font-family: var(--tipo-titulos);
}

h1{
  font-size:40px;
  text-shadow: 2px 2px 9px #00255b;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
  color: #007b70;
}


header, footer{
  /*background-color: rgb(39, 82, 173);*/
  color:aliceblue;
  padding-block: 0.25em;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

header, body, footer{
  background-color: #006366;
  /* background-image: url("../imagenes/fondo.jpg");*/
}
header .contenedor{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


header nav a {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  background-color: hsl(198deg 100% 16%);
  width: max-content;
  margin: 0.125rem;
  padding-block: 0.25em;
  padding-inline: 1em;
  border-radius: 0.25em;
}

header nav ul{
display: flex;
}

main{
  background-color: hsl(198deg 100% 16%);
}

a{
    font-weight:bold;
    text-decoration: none;
}

p{
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #cddedf;
}

.descripcion_equipo a{
  text-decoration: underline;
  color: #13f7b8;
}
.compañeras article{
  box-shadow: 0 7px 10px rgb(0 99 102 / 32%);
}



.perfil img{
  width: 20em;
  border-radius: 50em;
}

.equipo article{
  width: 20em;
  background-color: hsl(0deg 0% 0% / 43%);
  margin-block: 1.5em;
  padding: 1em;
  border-radius: 1.25em;
  text-align: center;
}

.equipo article img{
  width: 10em;
  border-radius: 5em;

}

.academicos img{
  width: 9em;
}


.datos {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.compañeras{
  display: flex;
}

.datosuniversidad {
  display: flex;

}
.materias {
  display: flex;
}

.datosuniversidad img{
  height: 4em;
  margin: 1em 0;
  align-items: center;
}

.subtitulo {
  margin-top: 2em;
  margin-bottom: 1em;
  text-align: center;
}

footer p {
  /* elimina el margen inferior que viene predeterminado */
  margin-block-end: 0;
  color: white;
}

.boceto a{
  color: #13f7b8;
  text-decoration:underline;
}


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

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

  img {
    max-width: 100%;
  }

  .contenedor ul {
    flex-direction: column;
    margin: 0;
  }

  .rotulo > div{
    flex-direction: column;
  }



  .compañeras{
    /* caja flexible */
    flex-direction: column;
    /* elementos separados por una "calle" */
    gap: 1em;
  }
  .compañeras article {
    /* se eliminan los márgenes
    definidos para celulares */
    margin: 0;
    /* caben 2 en la misma línea */
    width: 100%;
  }

}

@media (max-width: 40em) {

img {
  max-width: 100%;
}

.contenedor ul {
  flex-direction: column;
  margin: 0;
}

.rotulo > div{
  flex-direction: column;
}
}



@media (min-width: 40em) {

  /* sección equipo como "caja flexible"
  para que quepan integrantes en la misma línea */
  .compañeras {
    /* caja flexible */
    display: flex;
    /* si los elementos no caben,
    van a la siguiente línea */
    flex-wrap: wrap;
    /* elementos separados por una "calle" */
    gap: 1em;
  }
  .compañeras article {
    /* se eliminan los márgenes
    definidos para celulares */
    margin: 0;
    /* caben 2 en la misma línea */
    width: calc(50% - .5em);
  }

}




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


  /* caben los datos académicos en una línea */
  .academicos > ul {
    /* caja flexible */
    display: flex;
    /* elementos separados por una "calle" */
    gap: 1em;
  }

  /*las tres instituciones del mismo tamaño */
  .academicos > ul > li {
    width: calc(33% - .7em);
  }
}