@charset "UTF-8";

:root {
  --color-primario: hsl(0, 41%, 68%);
  --color-secundario: hsl(329, 73%, 65%);  
  --color-terciario: hsl(330, 29%, 97%); 
  --texto: black; 
  --sombras: 0 4px 2px var(--color-primario)
}
* {
    box-sizing: border-box;
  }

body {
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin: 0;
  background-color: var(--color-terciario);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  justify-content: space-between;
  align-content: space-around;
  }

html {
  height: -webkit-fill-available;
}
h1 {
  margin: 0em 1.8em 0.2em 1.8em;
  color: #9c5262;
  text-transform: uppercase;
  width: 100%;
}

h2
h3 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 2em;
  margin: 2em;
  padding: 1 1 1em 1;
  text-transform: uppercase;
  width: 100%;
}
img {
  max-width: 100%;
}
.imagenlinavina img {
  max-width: 50%;
  border-radius: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  display: flex;
  margin: 10px 10px;
  height: 100%;
  border-top: solid 0.2em #c56881;

}

a {
  text-decoration: none;
  font-weight:  bold;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #e94c6e;
  
}
ul,
ol {
  list-style: none;
  padding: 0;
}
.contenedora {
  width: min( 100%, 75rem );
  margin-inline: auto;
  padding: 1rem;
}

header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;

}
header {
  box-shadow: 0 5px 3px hsl(0, 41%, 68%);
  display: flex;
  gap: 1em;
  align-items: flex-start;
  border-radius: .25em;
}
header,
footer {
    background-image: url(../imagenes/pink-background-260nw-681562687.webp);
    background-size: 100%;
    max-width: 100%;
    height: 100%;
}
footer p {
  margin-block-end: 0;
}

#logo img {
    background-color: var(--color-terciario);
    padding: .5em;
    border: solid 5px var(--color-secundario);
    border-radius: .5em;
    width: 8em;
}
.menu-btn {
    background: var(--color-secundario);
}

.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: var(--color-terciario);
}
header nav a {
  color: #c56881;
  background-color: var(--color-secundario);
  display: block;
  width: 5em;
  padding-block: 0.25em;
  text-align: center;
}
header nav ul {
  margin-block: 0;
  display: none;
  flex-wrap: wrap;
}

header ul li {
  display: flex;
}
header nav li a {
  color: var(--color-terciario);
  background-color: var(--color-secundario);
  display: block;
  width: max-content;
  margin: .125em;
  padding-block: .25em;
  padding-inline: 1em;
  border-radius: .25em;

  display: flex;
  justify-content: center;
  align-items: center;
}

header nav a:hover {
  background-color: var(--color-secundario);
  color: var(--color-primario);
}
.titulo {
  border-block-end: 3px solid var(--color-primario);
  padding-bottom: .25rem;
  color:#e94c6e;;
}
    
index .btn_grupo,
.plan .btn_plan,
.mapa .btn_mapa {
  background-color: var(--color-secundario);
  color: var(--color-primario);
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.academicos {
  font-size: 1.25em;
}

.equipo article {
  background-color:hsl(329, 39%, 66%);
  margin-block: .5em;
  padding: 1em;
  border-radius: .25em;
  
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: flex-start;
}
.equipocontenedora {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.equipocontenedora img {
  border: double .4em rgb(161, 106, 163);
  object-fit: cover;
  border-radius: 50%;
  max-width: 50%;
  height: 100%;
  width: 150px;
  aspect-ratio: 1;
  
}

.equipo_textos {
  width: max-content;
  margin: .125em;
  padding-block: .20em;
  padding-inline: .50em;

}

.equipo_textos a {
  background-color: var(--color-terciario);
  display: block;
  margin-block-start: 0;
  width: max-content;
  margin: .125em;
  padding-block: .20em;
  padding-inline: 0.50em;
  border-radius: 0.25em;
}

.equipo_textos a:hover {
  color: var(--color-primario);
 background-color: rgb(148, 54, 54);
}
div.equipo_textos {
  text-align: center;
}
.equipocontenedora {
  background-color: rgb(229, 153, 153);
  background-position: center;
  background-size: 0px 45px;
  margin: 10px 20px;
  padding: 10px 0px;
  border-radius: 30px;
  justify-content: center;
}

.academicos > ul > li:not(:last-of-type) {
  border-bottom: solid 1pxhsl(0 0% 0% / .1);
  padding-block-end: 1.5em;
  margin-block-end: 1.5em;
}

.academicos img {
  width: 8em;
}


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

  .menu-btn {
    display: none;
  }

  header nav,
  header nav ul {
    display: contents;
    margin-block: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  header nav ul li:first-of-type {
    margin-inline-start: auto;
  }
  header .contenedora {
    gap: .5em;
  }
  .comitente img {
    width: 10em;
    float: left;
    margin-inline-end: 1em;
  
}
/* cambios a partir de los 640px*/
@media (min-with: 40em) {
  .equipo {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: flex-start;
    }
  .equipo article {
    margin: 0;
    width: calc(50% - .5em);
  }
  .equipo h2 {
    width: 100%;
  }
  .academicos h3 {
    margin-block-start: 0;
  }

  .equipo_textos {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .equipo_textos a {
    margin: auto 0 0 auto;
  }
  .academicos > ul > li {
    display: flex;
    gap: 1em;
    align-items: flex-start;
  }
  .academicos h3 {
    margin-block-start: 0;
  }
}
@media (min-width:60em) {
  .academicos > ul {
    display: flex;
    gap: 6em;
  }
  .academicos > ul > li:not(:last-of-type) {
    border-bottom: none;
  }
}

@media (prefers-color-scheme:dark) {
  :root {
  --color-primario: hsl(0, 41%, 68%);
  --color-secundario: hsl(329, 73%, 65%);  
  --color-terciario: hsl(330, 29%, 97%); 
  --texto: black; 
  --sombras: 0 4px 2px var(--color-primario)
  }
  .academicos img {
    -web-filter: invert(1);
    filter: invert(1);
  }
  #logo img {
    background-color:  black; ;
  }
}
/*cambios a partir de los 960px */
@media (min-width: 60em) {
  .equipo article {
  width: calc(33% - .7em);
  }
  .academicos > ul {
    display: flex;
    gap: 1em;
  }
  .academicos > ul > li {
    width: calc(33% - .7em);
  }
}
}