@charset "utf-8";



/* propiedades generales*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


body {
  
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-inline: auto;
}

h1,
h2,
h3 {
  color: hsl(0, 47%, 45%);
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: hsl(0, 40%, 57%);
  font-weight: bold;
}

ul,
ol {
  list-style: none;
  padding: 0em;
}




.contenedora {

  /* ancho máximo 1040px */
  max-width: 65em;
  margin-inline: auto;
  padding: 1em;
}

header,
footer {
  background-color: hsl(0, 33%, 85%);
  color: hsl(0, 59%, 26%);
}




#logo a {
  /* cambiar de etiqueta tipo en linea
  a etiqueta tipo bloque para poder darle
  propiedades de bloque */
  display: block;

  /* redondeo de bordes */
  border-radius: 50%;

  /* ancho */
  width: 6rem;
  
  /* proporción */
  aspect-ratio: 1;
  
  /* centrar contenidos */
  text-align: center;
  
  /* tamaño de la tipografía */
  font-size: 1.75rem;
  
  /* color del fondo */
  background-color: hsl(38 100% 47%);
  
  /* borde */
  border: solid 4px hsl(0 0% 95%);
}

/* cuando se pasa el cursor sobre el logo
o se usa el teclado para llegar */
#logo a:hover,
#logo a:focus-visible {
  /* se invierten los colores de fondo y borde */
  background-color: hsl(0 0% 95%);
}


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

header {
  padding-top: 1rem;
}

header nav a {
  color: hsl(0 0% 95%);
  background-color: hsl(0, 53%, 34%);
  display: block;
  width: 5em;
  padding-block: 0.25em .5em;
  border-radius: 0.25em;
  text-align: center;
}

header nav ul {
  display: flex;  
}

header li {
  padding-right: .5em;  
}

header nav a:hover,
header nav a:focus-visible {
  background-color: hsl(0 0% 95%);
  color: hsl(0, 54%, 30%);
  outline: none;
}


/* TODAS las secciones */

section {
  padding-bottom: 4rem;
}

/*-------------- sección evelyn ---------------*/



/* sección materias */

.materias ul {
  padding-bottom: 1rem;
}

.cursadas-tit {
  color:rgb(131, 145, 109);
  font-weight: 700;
  padding-bottom: 2rem;
}

.curso-tit {
  color:rgb(94, 124, 180);
  font-weight: 700;
  padding-bottom: 2rem;
}

.cursadas {
  color:darkolivegreen;
}

.curso {
  color:cornflowerblue;
}



/* sección equipo */

.equipo_articulos {
  padding-top: 1em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

.equipo_articulos article {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.equipo article {
  background-color: hsl(0, 33%, 85%);
  padding: 1em;
  border-radius: .5rem;
}

.equipo img {
  width: 10em;
  aspect-ratio: 1;
  border: solid .4em hsl(0, 47%, 45%);
  border-radius: 50%;
}

.contenedor {
  width: 65em;
}


.equipo_textos a {
  background-color: hsl(0, 0%, 100%);
  border-radius: .5rem;
  color: hsl(0, 47%, 45%);
  padding: .51rem;
}


.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  color: hsl(0 0% 95%);
  background-color: hsl(0, 47%, 45%);
  outline: none;
}

.equipo_textos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}


/* sección datos académicos */

.datos-acad {
  padding-top: 1.5rem;
  padding-bottom: .5rem;
  border-bottom: solid 2px hsl(0, 26%, 57%);
}

.datos-acad a:hover {
  color: hsl(0, 54%, 30%);

}




/* footer */
footer p {
  text-align: center;
  padding: 2em;

}

.menu-btn {
  /* ocultamos provisoriamente el botón que llama al menú */
  display: none;
}

/* para que el logo quede a la izquierda y el menu se corra al extremo derecho */
.menu {
  /* caja contenedora flexible */
  display: flex;

  /* elementos de la caja flexible separados según el eje principal (horizontal) */
  justify-content:space-around;

  /* elementos centrados en el eje secundario (vertical) */
  align-items: center;

  /* si un elemento no cabe, baja a la siguiente línea */
  flex-wrap: wrap;

  /* separación mínima entre elementos de la caja */
  gap: 1rem;
}



/* en componente "footer", contenedor con logo a la izquierda y texto a la derecha, si cabe */
footer .contenedora {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem;
  align-items: center;
}