*{box-sizing: border-box;}

body {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin: 0;
color: #323232;
background-color: #E8E8E8;
background-image: radial-gradient(#C4ACF5 1.5px, transparent 1px);
background-size: 35px 35px;
background-position: 0 0, 15px 15px;
display: grid;
}

p {
    line-height: 1.6;
}

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

h1,
h2,
h6 {
  color: hsl(0 0% 10%);

  line-height: 1.1;
  text-wrap: balance;

  background: #A4EEB8;

  padding: 1rem;
}

h3, h4 {  border-block-end: 4px solid #A4EEB8;
  
    padding-block-end: .35rem;

}

img {
      max-width: 100%;
    }


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

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


figure {
  margin: 0;
}

.contenedora {
        width: min(65rem, calc(100% - 3rem));
        margin-inline: auto;
      }

footer {
    width: min(75rem, calc(100% - 3rem));
    margin-inline: auto;
    background-color: #323232;
    color: #E8E8E8;
    margin-block-end: 0;
}

header, footer {
    margin-block: 1.5rem;
    padding: 1rem;
}

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

header{
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  align-items: center;
  background-color:#323232;
  position: sticky;
  top: 0;
  z-index: 29;
}


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

header nav ul {
    margin-block: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: .5rem;
    margin-inline-start:auto;
    width: min(100%, 30rem);
}

header nav a {
    text-decoration: none;

    background-color: #C4ACF5;
  
    color: #323232;

    font-weight: bold;

    border: 2px solid #A4EEB8;
  
    display: block;
  
    padding-block: 0.25em .5em;
  
    text-align: center;
  }

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: #E8E8E8;
    color:#323232;
    outline: none;
}

.integrantes article {

    background-color: #C4ACF5;

    margin-block: .5em;

    padding: 1em;  
}

.integrantes img {
    width: 10em;
  padding-block: 1em;
  object-fit: contain;
  padding: 0;
}

.equipo_textos a {
    margin-block-start: 0;

    padding-left: 0.25em;

    padding-right: 0.25em;
    
    padding-block: 0.25em 0.25em;
  
    text-align: center;

    text-decoration: none;

    background-color: #323232;
    
    color: #A4EEB8;

    font-weight: bold;

    border: 2px solid #A4EEB8;

    display: block;

    width: 10em;
}

.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  color: #323232;
  background-color: #E8E8E8;
  outline: none;
}

.datos img {
    display: block;
    width: 8em;
    aspect-ratio: 1;
    object-fit: contain;
    background-color: #ffffff;
    padding: .5rem;
  }



@media (width>= 50em) {

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

}

@media (width>= 66em) {

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

}

@media (width<= 54em) {

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

}

@media (width<= 45em) {

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

}

@media (width<= 28em) {

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

}

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

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

.integrantes article{
  display: grid;
  grid-template-rows: auto 1fr;
}

#mapa_de_contenidos{
  display: block;
}