@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

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

body {
    color: #4d4d4d;
    background-color: #ffffff;
    font-family: 'Rubik', sans-serif;
}
 

img {
    max-width: 100%;
}

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

ul,
ol {
    list-style: none;
}

.contenedor{
    max-width: 65rem;
    margin-inline:auto;
    padding: 1rem;
}

header,
footer {
    background-color: #9568AD;
    color: #f2f2f2;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, 0.164);
}

#logo a {
    display: block;
    width: 4.5rem;
    color: #262626;
    text-align: center;
    font-size: 1.25rem;
    text-transform: uppercase;
    border: solid 4px #262626;
  }

#logo a:hover,
#logo a:focus-visible {
    color: #F9C823;
    border:  solid 4px #F9C823;
}

header nav ul {
    margin-block: 0;
}

  header nav a {
    color: #262626;
    border: solid 4px #262626;
    display: block;
    width: 5em;
    padding-block: .50em;
    border-radius: 0.50em;
    text-align: center;
}

header nav a:hover,
header nav a:focus-visible {
  background-color: #F9C823;
  border:  solid 4px #F9C823;
  outline: none;
}

section {
    padding-block-end: 2rem;
}
   
.comitente {
    font-size: 1.25em;
}
  
.titulo {
    border-block-end: 4px solid #9568AD;
    padding-block-end: 0.35rem;
    max-width: 65rem;
    margin-bottom: 1rem;
    margin-inline: auto;
}
 
.equipo_articulos {
    margin-inline: auto;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
    max-width: 65rem;
}

.equipo_articulos article {
    background-color: #9568AD;
    margin-block: 0.5em;
    padding: 1em;
    border-radius: 1em;
}
  
.equipo_articulos img {
    width: 8em;
    aspect-ratio: 1;
    border: solid .4em #262626;
    border-radius: 50%;
}

.equipo_texto a {
    background-color: #F9C823;
    border-radius: .50rem;
    color: #262626;
    padding-block: .25em;
    padding-inline: 1em;
}

.equipo_texto {
    color: #f2f2f2;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
}

.equipo_texto p {
    margin-top: .25rem;
}
  
.equipo_texto a:hover,
.equipo_texto a:focus-visible {
    color: #f2f2f2;
    background-color: #ec2d2d;
    outline: none;
}

.academicos {
    max-width: 100%;
    margin: auto;
}

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

.academicos > ul > li{
    background-color: #f2f2f2;
    border-bottom: solid 1px hsl(280 29% 44% / .15);
    padding-block-end: 1.5em;
    margin-block-end: 1.5em;
    border-radius: 1rem;
    padding: 20px;
}
  
.academicos img {
    display: block;
    width: 8em;
    background-color: white;
    padding: .5rem;
    border-radius: .25rem;
    box-shadow: 0 4px 4px transparent;
    transition: box-shadow .6s ease;
}
  
.academicos a:hover img {
    box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
    transition: box-shadow .3s ease;
}

footer img {
    max-width: 10rem;
}

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

footer .contenedor {
    display: grid;
}

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

#logo a {
    display: grid;
    place-items: center;
}

header nav ul {
    display: flex;
    gap: .25em;
}

main > article > .equipo_contenedor {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1rem;
}

h4 {
    display: block;
    margin-block-start: .50em;
    margin-block-end: .50rem;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}