@charset "utf-8";

:root {
  --color-primario: hsl(355, 100%, 88%);
  --color-secundario: hsl(0, 0%, 98%);  
  --color-terciario: hsl(335, 100%, 56%);  
  --texto: black; 
}


* {
  box-sizing: border-box;
}

body {
  font-family: "Manrope", Helvetica, Verdana, Arial, sans-serif;
  margin: 0;
  background-color: var(--color-secundario);
  color: var(--texto);

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

html {
  height: -webkit-fill-available;
}

h1,
h2,
h3,
h4 {
  font-family: "Familjen Grotesk", Helvetica, Verdana, Arial, sans-serif; 
}

h1 {
  text-transform: uppercase;
  width:100%;
}


img {
  max-width: 100%;
}


a {
  text-decoration: none;
  color: hsl(0, 0%, 50% / .75%);
  font-family: "Familjen Grotesk", Helvetica, Verdana, Arial, sans-serif;
  font-weight: bold;
}

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

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

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

header,
footer {
  background-color: var(--color-primario);
  color: black;
}

header {
  box-shadow: 0 5px 3px hsl( 0 0% 0% / .20%);
}

#logo img {
  background-color: var(--color-secundario);
  padding: .5em;
  border: solid 4px var(--color-primario);
  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);
  transition: all 0.3s ease-out;
}

header nav ul {
  margin-block: 0;
  display: none;
}


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-terciario);
  color: var(--color-secundario);
}

.index .btn_grupo,
.plan .btn_plan,
.mapa .btn_mapa {
    /* fondo claro */
    background-color: var(--color-terciario);
    /* letra azul */
    color: var(--color-primario);
}


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


.titulo {
  border-block-end: 4px solid var(--color-primario);
  padding-bottom: .25rem;
}

.equipo article {
  background-color: var(--color-secundario);
  margin-block: .5em;
  padding: 1em;
  max-width: 254px ;

  display: flex;
  flex-direction: column;
}

.equipo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.equipo_img {
  display: flex;
  justify-content: center;
} 

.equipo img {
  border: double .4em var(--color-primario);
  border-radius: 50%;
  box-shadow:
    0 
    4px 
    2px 
    hsl(0 0% 0% / .2),
    0 4px 2px hsl(0 0% 0% / .2) inset;
  aspect-ratio: 1;
  object-fit: cover;
}

.equipo_textos {
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.equipo_textos a {
  color: rgb(100, 96, 98);
  background-color: var(--color-primario);
  width: max-content;
  margin: auto;
  padding-block: .20em;
  padding-inline: .50em;
  border-radius: .25em;  
}

.equipo_textos a:hover {
  color: var(--color-secundario);
  background-color: black;
  border-radius: 0em;
}

.comitente_img {
  display: flex;
  justify-content: center;
}

.comitente_img img {
  background-color: var(--color-primario);
  padding: .5em;
  padding-block: .20em;
  padding-inline: .50em;
  border-radius: .25em;
  max-width: 100%;
}

.comitente h3 {
  text-align: center;
}

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

.academicos img {
  width: 10em;
}

.planes h2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.planes ul li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.planes p {
  margin-bottom: 15px;
}

.planes a {
  color: rgb(100, 96, 98);
  background-color: var(--color-primario);
  width: max-content;
  margin: auto;
  padding-block: 0.2em;
  padding-inline: 0.5em;
  border-radius: 0.25em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 70%;
  margin-bottom: 15px;
}

.planes a:hover {
  color: var(--color-secundario);
  background-color: black;
  border-radius: 0em;
}

.planes .comitente figure {
  padding: .5em;
  padding-block: .20em;
  padding-inline: .50em;
  border-radius: .25em;
  max-width: 100%;
  display: block;
  text-align: center;
}

.planes .comitente figure img {
  filter: invert(100%);
}


footer p {
  margin-block-end: 0;
}

footer p.contenedora {
  padding-bottom: 1.5em;
}



@media (min-width: 30em) {

  .menu-btn {
    display: none;
  }
  header nav ul {
    display: contents;
  }
  header nav ul {
    margin-block: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (min-width: 40em) {
  .equipo article {
    margin: 0;
    width: calc(50% - .5em);
  }
  .academicos h3 {
    margin-block-start: 0;
  }
  .contenido-comitente {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    max-width: 70%;
  }
  section.planes p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    max-width: 70%;
  }
}

@media (min-width:60em) {
  .academicos > ul {
    display: flex;
    gap: 6em;
  }
  .academicos > ul > li {
    width: calc(33% - .7em);
}
.academicos > ul > li:not(:last-of-type) {
  border-bottom: none;
}
}


@media (prefers-color-scheme:dark) {
  :root {
  --color-primario: hsl(355, 100%, 88%);
  --color-secundario: hsl(0, 0%, 14%);  
  --color-terciario: hsl(335, 100%, 56%);
  --texto: whitesmoke; 
}
  .academicos img {
    -webkit-filter: invert(1);
    filter: invert(1);
    }
  #logo img {
    background-color: whitesmoke;
  }
  .planes .comitente figure img {
    filter: invert(0%);
  }
}