@charset "utf-8";


*{
    box-sizing: border-box;
}


body{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0rem;
    color: hsl(0, 0, 30%);
    background-color: hsl(0, 0%, 95%);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}


main{
    margin-left: 11rem;
    margin-right: 11rem;
}


h1,
h2,
h3,
h4 {
    color: hsl(0 0% 15%);
    line-height: 1.1;
}


img{
    max-width: 100%;
}


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


header,
footer{
  background-color: hsl(146, 50%, 36%);
  color: hsl(0 0% 95%);
}


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

.imagen {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.imagen_mapa {
    text-align: center;
}

#mapa_pantalla {
    width: 200vh;
}

#logo a{
    display: block;
    border-radius: 50%;
    width: 6rem;
    aspect-ratio: 1;
    text-align: center;    
    font-size: 1.75rem;    
    background-color: hsl(120, 100%, 20%);
    border: solid 4px hsl(0 0% 95%);
    font-weight: bold;
    text-decoration: none;
}


#logo a:hover,
#logo a:focus-visible {
  background-color: hsl(0, 0%, 95%);
  border:  solid 4px hsl(120, 100%, 20%);
  color: hsl(120, 100%, 20%); 
}


.menu-btn {
    background-color: hsl(120, 100%, 20%);
    border: none;
    outline: none;
    width: 3rem;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
}


.menu-btn .btn-linea {
    width: 1.5em;
    height: 3px;
    margin: 4px auto;
    background-color: hsl(0 0% 95%);
    transition: all 0.3s ease-out;
}


header nav a {
    color: hsl(0, 0%, 95%);
    background-color: hsl(120, 100%, 20%);
    display: block;
    width: 6rem;
    padding-block: 0.25rem;
    text-align: center;
    
    
    text-decoration: none;
    font-weight: bold;
    border-radius: 0.25rem;
    
    
    cursor: pointer;
}


header nav a:hover,
header nav a:focus-visible {
    background-color: hsl(0, 0%, 95%);
    color: hsl(120, 100%, 20%);
    outline: none;
}



section{
    padding-block-end: 2rem;
}


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


.comitente img{
    border-radius: .50rem;
    width: clamp(5rem, 5rem + 25vw, 30rem);
    background: hsl(120, 100%, 20%);
    box-shadow:
      0 4px 2px hsl(0 0% 0% / 20%),
      0 4px 2px hsl(0 0% 0% / 20%) inset;
    margin-right: 2rem;
}


.comitente p{
    font-size: larger;
}



.equipo_articulos img{
    background: hsl(120, 100%, 20%);
    width: 6rem;
    border-radius: 50%;
    box-shadow:
      0 4px 2px hsl(0 0% 0% / 20%),
      0 4px 2px hsl(0 0% 0% / 20%) inset;
}


.equipo_articulos h3{
    margin-block-start: 0;
}


.equipo_articulos a{
    margin-inline-start: auto;
    background-color: hsl(120, 100%, 20%);
    border-radius: .25rem;
    color: hsl(0, 0%, 95%);
    padding-block: .125em .25em;
    padding-inline: 1em .75em;
}


.equipo_articulos a:hover,
.equipo_articulos a:focus-visible{
    color: hsl(120, 100%, 20%);
    background-color: hsl(0, 0%, 95%);
    outline: 0.20rem;
    outline-style: solid;
    outline-color:  hsl(120, 100%, 20%);
}


.academicos_contenedora>ul>li{
    border-bottom: solid 1px hsl(280 29% 44% / .15);
    padding-block-end: 1.5em;
    margin-block-end: 1.5em;
    
    display: flex;
    flex-wrap:wrap;
    gap: 1rem;
    align-items: flex-start;
    align-content: flex-start;
} 


.academicos_contenedora img{
    display: block;
    width: 8rem;
    aspect-ratio: 1;
    background-color: white;
    padding: .5rem;
    border-radius: .80rem;
    box-shadow: 0 4px 4px transparent;
    transition: box-shadow .6s ease;
}


.academicos_contenedora a:hover img {
    box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
    transition: box-shadow .3s ease;
}

.academicos_contenedora>ul>li{
    margin: 0;
}



footer img{
    max-width: 10rem;
}


footer p{
    margin-block-end: 0;
    color: hsl(0, 0, 30%);
}




body {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}



.menu-btn{
    display: none;
}



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


#logo a{
    display: grid;
    place-items: center;
    padding-block: 0.125;
    color: hsl(0, 0%, 95%);
}


header.menu{
    display: flex;
    gap: .25rem;
}


header .menu {
    display: flex;
    gap: .25rem;
}


.menu{
    list-style: none;
}




header{
    padding-left: 2rem;
}



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


.equipo_articulos article{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}


.equipo_articulos a{
    background-color: hsl(120, 100%, 20%);
    color: hsl(0, 0%, 95%);
    text-decoration: none;
    font-size: 1.75;
    font-weight: bold;
    width: 6rem;
    border-radius: 0.25rem;
    padding-block: .125rem .25rem;
    text-align: center;
    display: grid;
    margin-inline-start: auto;
}



.equipo_textos{
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.25rem;
}


.equipo_textos>*{
    margin-block: 0;
}


.equipo_textos h3{
    margin-block-start: 0; 
}


.equipo_textos a {
    margin-inline-start: auto;
}


.equipo_textos article {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}


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


.academicos_contenedora>ul>li{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    align-content: flex-start;
}


.academicos_contenedora>ul>li{
    margin: 0;
}


.academicos_contenedora{
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.25rem;
}


.academicos_contenedora a:hover img {
    box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
    transition: box-shadow .3s ease;
}


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




footer.contenedora {
    display: grid;
    gap: 1rem;
    place-content: center;
    font-size: smaller;
}
  
footer.contenedora p {
    margin-block: 0;
}





div{
    padding-bottom: 1rem;
}




h1{
    font-size: 30px; 
}


h2{
    font-size: 25px;
}


h3{
    font-size: 20px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-block-end: 2px solid hsl(120, 100%, 20%);
    padding-block-end: .35rem;
}


h4{
    font-size: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}


.logos ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}