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

body {
  /*FAMILIA TIP*/
  font-family: sans-serif;

  /* TEXTOS - COLOR*/
  color: #1D1D1B;

  /* COLOR DE FONDO */
  background-color: #ffffff;

  /* altura mínima igual a la altura del navegador */
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/*SUBTITULOS*/

h2 {
  color: #c07d9d;
}

h3 {
  text-align: -webkit-center;
}

/*----------Texto y párrafos--------------*/

.parrafo {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/*IMAGENES*/
#logo img {
  max-width: 100%;
  background-color: hsl(0, 0%, 100%);
  padding: .5rem;
  border-radius: .5rem;
}

/* VINCULOS */
a {
  /* Quitar el subrayado */
  text-decoration: none;
  /* serán de un color diferente */
  color: #1D1D1B;
  /* negrita */
  font-weight: bold;

  background-color: hsl(0deg 0% 87.89%);
  border-radius: .50rem;
  padding-block: .60em;
  padding-inline: 1em 0.75em;
  display: inline-block;
  margin-top: 1em;
}

/* HOVER */
a:hover,
a:focus-visible {
  color: #c07d9d;
}

/* ESTILO LISTAS*/
ul,
ol {
  list-style: none;
  padding: 0;
  text-align: -webkit-center;
}

/*CAJA CONTENEDORA*/
.contenedora {
  width: min(75rem, calc(100% - 2rem));
  margin-inline: auto;
}

/*ESTILO FOOTER*/
footer {
  background-color: #EAA7C7;
  color: #1D1D1B;
  /* relleno vertical */
  padding-block: 1rem;
}

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

/* HEADER */
header {
  box-shadow: 0 4px 4px hsl(0 0% 0% / 25%);
}

/* lista */
header nav ul {
  margin-block: 0;
  /* caja flexible */
  display: flex;
  /* vínculos separados 1/2 renglón */
  gap: 0.5em;
}

/* VINCULOS NAV */
header nav a {
  /* fondo */
  background-color: #1D1D1B;

  /* tipografia */
  color: #EAA7C7;
  display: block;
  width: fit-content;

  /* espacio entre el borde del elemento y su contenido */
  padding-block: .5rem;
  padding-inline: 1rem;

  /* borde redondeado */
  border-radius: .25rem;
}

/* cambios cuando se pasa el cursor sobre los vínculos de la navegación */
header nav a:hover,
header nav a:focus-visible {
  /* fondo */
  background-color: #000000;
}

/* en el header, el diseño indica que el logo quede a la izquierda y el menú a la derecha*/
header .contenedora {
  /* caja flexible */
  display: flex;
  /* separa sus elementos  horizontal */
  justify-content: space-between;
  /* centra sus elementos hijos en la vertical */
  align-items: center;
  /* si los elementos hijos de "header .contenedora" no caben en una línea, van a la línea siguiente */
  flex-wrap: wrap;
  /* separación mínima de los elementos: 1 renglón */
  gap: 1em;
}

/* ------------------------SECCION PRESENTACION ---------------------------------------*/
.presentacion-micaela {
  background-color: #ddb1c6;
  padding: 2em;
  border-radius: .25em;
  text-align: center;
}

.presentacion-micaela a {
  display: inline-block;
  margin-top: 1.5rem;
}
/* links - PRESENTACIÓN */

/* links INTEGRANTES */
.integrantes-vm34 ul {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  list-style: none;
  margin-bottom: 2rem;
}
/* links INTEGRANTES */

/* ------------------------trayectoria ---------------------------------------*/
.trayectoria-academica {
  padding: 2rem 1.5rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.trayectoria-academica h3 {
  margin-top: 2rem;
}

.trayectoria-academica ul {
  margin-bottom: 1.5rem;
  padding-left: 1.2rem;
}

.trayectoria-academica li {
  margin-bottom: 0.3rem;
  line-height: 1.6;
}
/* ------------------------trayectoria ---------------------------------------*/

/* ------------------------ SECCIÓN ACADÉMICOS ------------------------ */
.academicos {
  padding: 2rem 0;
  color: #000;
}

.tituloacademicos {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #fff;
  text-align: left;
  width: min(75rem, calc(100% - 2rem));
  margin-inline: auto;
}

.academicos .contenedora {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.academicos ul.contenedora > li {
  display: grid;
  gap: 1.5em;
  grid-template-rows: auto 1fr auto;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 20px;
  padding: 1.5rem;
  flex: 1 1 300px;
  max-width: 400px;
  transition: transform 0.3s ease;
  align-items: flex-start;
}

.academicos ul.contenedora > li > *,
.academicos ul.contenedora > li h3 {
  margin-block: 0;
}

.academicos ul.contenedora > li h3 + * {
  margin-block-start: 1lh;
}

.academicos ul.contenedora > li a {
  justify-self: start;
  margin-inline-end: auto;
}

.academicos figure {
  margin: 0 0 1rem 0;
  width: 100%;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.academicos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.academicos h3,
.academicos h4 {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #c07d9d;
  text-align: left;
  width: 100%;
}

.academicos ul li ul {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
  background-color: #fff;
  width: 100%;
  color: #000;
  line-height: 1.2;
  border: none;
  box-shadow: none;
}

.academicos ul li ul li {
  margin-bottom: 0.1rem;
  line-height: 1.2;
  border: none;
  padding: 0;
  box-shadow: none;
  text-align: left;
}

.academicos p {
  margin: 0.5rem 0;
  text-align: left;
  line-height: 1.2;
}

.botonesacademicos {
  background-color: hsl(0deg 0% 87.89%);
  border-radius: 0.5rem;
  color: #000;
  padding-block: 0.6em;
  padding-inline: 1em 0.75em;
  text-align: center;
}

.botonesacademicos:hover {
  background-color: #ddb1c6;
  color: #000;
}
/* ---------------------- FIN SECCIÓN ACADÉMICOS ---------------------- */

/* COMPONENTES PRINCIPALES Y LOS CONTENIDOS*/
section {
  padding-block: 2rem;
}

/* Títulos de secciones */
section h1 {
  background-color: #ddb1c6;
  padding: 1rem;
  text-align: center;
}

section h2 {
  border-block-end: 1px solid #EAA7C7;
  text-align: center;
}

h4 {
  text-align: -webkit-center;
}

/* -------------------- */
img.perfil {
  width: 20em;
  border-radius: 15%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* -------------------- */

.prototipos img {
  width: 800px;
  max-width: 100%;
  background-color: #fff;
  padding: .5rem;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 auto;
}