*{box-sizing: border-box;}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
color: #000000;
background-color: #ffcebe;
min-height: 100dvh;
display: grid;
grid-template-rows: auto 1fr;
}

p {
    line-height: 1.3;}

p, li, figcaption {text-wrap: pretty;}

h1 {
  padding: 0;
}

h2 {
    background-color: #cd2c6c;
    border-radius: .45rem;
    padding: 1rem;
}

h3 {
  line-height: 1;
  text-wrap: balance;
  border-block-end: 4px solid #5f023a;
  padding-block-end: .35rem;
  color: #5f023a;
}

h4 {
  margin: 0;
}

h5 {
  line-height: 1;
  text-wrap: balance;
  padding-block-end: .35rem;
  color: #5f023a;
  margin: 0;
}

img {
  max-width: 100%;
}

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

ul {
    list-style: none;
    padding: 0;
  }

li {
  list-style: none;
}

figure {
  margin: 0;
}

.contenedora {
    width: min(65rem, calc(100% - 3rem));
    margin-inline: auto;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    padding-top: .5rem;
    padding-bottom: 1.6rem;
}

header, footer {
  background-color: #5f023a;
  color: hsl(0 0% 95%);
  margin-block: 0rem;
  padding: 0.8rem;
}

header {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .25rem;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 29;
}

header *, header nav ul li{
  margin: 0;
  }


#logo {
    width: min(100%, 7.5rem);
    background-color: #ffffff;
    margin-inline: auto;
    display: block;
    padding: .5rem .75rem;
    width: 5rem;
  }


header nav ul {
    margin-block-end: 0;
    padding: 1.6em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: .75rem;
    align-items: center;
    margin-inline-start:auto;
    width: min(100%, 30rem);
  }
  
header nav li {
    margin-block-start: .4rem;
  }
  
header nav a {
    background-color: #cd2c6c;
    color: #ffffff;
    display: block;
    height: 2rem;
    padding-block: .25em .15em;
    text-align: center;
    border-radius: 100vw;
  }

header nav a:hover,
header nav a:focus-visible,

.index nav li:first-of-type a,
.plan nav li:nth-of-type(2) a,
.mapa nav li:nth-of-type(3) a {
 
  background-color: #ffcebe;
  color: #5f023a;
  border-color: #cd2c6c;
  outline: auto;
}

.bio div {
    padding: 1.6em;
    background-color: #cd2c6c;
    border-radius: .45rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem 2rem;
}

.bioprofesion {
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: .25rem .25rem;
  justify-items: start;
  align-items: start;
}

.biodescripcion {
display: grid;
align-content: center;
justify-items: start;
}

.biodescripcion a {
  color: #ffcebe;
}

.biodescripcion a:hover,
.biodescripcion a:focus-visible {
  color: #5f023a;
  background-color: #ffcebe00;
  outline: none;
}

.equipo img {
    max-width: 140px;
    width: 10em;
    object-fit: contain;
    border-radius: 1.1rem;
}

.bio img {
    width: 250px;
    object-fit: contain;
    border-radius: .45rem;
}

.equipo_textos a {
    margin-block-start: 0;
    text-align: center;
}

.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  color: #5f023a;
  background-color: #ffcebe00;
  outline: none;
}

.datos img {
    display: block;
    max-width: 200px;
    aspect-ratio: 1;
    width: 150px;
    margin-top: 1em;
    margin-bottom: 1em;
    object-fit: contain;
    background-color: #ffffff;
    border-radius: .45rem;
  }

.historia div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, -0.0435rem + 5.2174vw, 4rem);
  align-items: start;
}

.equipo > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: .75rem;
}

.datos > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 1.5rem;
}

.bio h4 {
  color: #ffffff;
}

.equipo article {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .25rem;
}

@media (width<= 28em) {

  .equipo article {
   grid-template-areas:
   "figure"
    "div";
   grid-template-columns: 1fr ;
   gap: 1rem;
  }

}

@media (width<= 54em) {

  .equipo article {
   grid-template-areas:
   "figure"
    "div";
   grid-template-columns: 1fr ;
   gap: 1rem;
  }

}

@media (width<= 38em) {

  .equipo article {
   grid-template-areas:
   "figure div";
   grid-template-columns: 1fr 1fr auto;
   gap: 1rem;
  }

}

@media (width<= 36em) {

  .bio div {
   grid-template-areas:
   "article article";
   grid-template-columns: 1fr 1fr auto;
   gap: 1rem;
  }

}

@media (width<= 34em) {

  .bio div {
   grid-template-areas:
   "article"
   "article";
   grid-template-columns: 1fr;
   gap: 1rem;
  }

}

@media (width<= 34em) {

  .historia div {
   grid-template-areas:
   "article"
   "article";
   grid-template-columns: 1fr;
   gap: 1rem;
  }

}