@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Oswald:wght@500;700&display=swap');
* {
  margin: 0em;
  padding: 0em;
  box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    background-color: rgb(235, 235, 235);
    background-color:hsl(202, 100%, 83%);
}

ul {list-style: none;}

header {    background-color:hsl(231, 74%, 29%)}

header .contenedora {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 80%;
    margin-inline: auto;
    padding: 1em;

}
#logo a {
    display: grid;
    justify-items: center;
    align-items: center;
    justify-content: normal;
    padding-block: 0 0.125em;
}
#logo a {
    display: grid;
    place-items: center;
    padding-block: 0.15em;
    border-radius: 50%;
    width: 3em;
    aspect-ratio: 1;
    text-align: center;
    font-size: 2em;
    background-color:hsl(202, 100%, 83%) ;
}

header a {
    text-decoration: none;
    color:hsl(0, 0%, 0%);
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}
header nav a {
    background-color: hsl(202, 100%, 83%);
    display: block;
    width: 5em;
    padding-block: 0.5em;
    margin-bottom: 0.3em;
    border-radius: 6em;
    text-align: center;
    font-size: 1em;
}

main {

    color: hsl(0, 0%, 0%) ;
    padding: 3em 1em;
    display: block; 
    justify-content: center;
    max-width: 80%;
    margin-inline: auto;
}
    section h1 {
    color : hsl(231, 74%, 29%) ;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size : 1.5em ;
    text-transform: uppercase;
    margin-bottom: 0.5em;
    padding-right: 1em;
    margin-right: 1em;
    border-right: hsl(231, 74%, 29%);
    border-right-width: 0.15em;
    border-right-style: solid;
    text-align: right;}
    
h1 {
        color : hsl(231, 74%, 29%) ;
        font-family: 'Oswald', sans-serif;
        font-weight: 700;
        font-size : 1.5em ;
        text-transform: uppercase;
        margin-bottom: 0.5em;
        padding-right: 1em;
        margin-right: 1em;}

    section h2 {
        color : hsl(0, 0%, 0%) ;
        font-family: 'Oswald', sans-serif;
        font-weight: 500;
        font-size : 1.5em ;
        margin-bottom: 0.5em;
        text-align: left;
    }

    
.mapayplan {
        color : hsl(0, 0%, 0%) ;
        font-family: 'Oswald', sans-serif;
        font-weight: 500;
        font-size : 1.5em ;
        padding-bottom: 1em;
        margin-bottom: 1em; 
        border-color:  hsl(231, 74%, 29%);
        border-bottom-style: solid;
        border-width: 0.15em;}

    #puente section {
        display: flex;
        flex-direction:row;
        display:flex;
        justify-content: center;
        margin-bottom: 2em; 
        border-color:  hsl(231, 74%, 29%);
        border-bottom-style: solid;
        border-width: 0.15em;
        align-items: center;
        padding: 1em

    }

      
    article {
        border-width: 0.15em;
        margin-bottom: 1em;
      }
        
    article div { max-width: 100%;}
    article p { padding: 0.5em; color: #000000;font-weight: 400;  font-size: 1em;
      } 
    #puente span{ color: hsl(231, 74%, 29%);font-weight: 700;
      } 


.equipo ul { 
        display:grid; 
        grid-template-columns: auto;
        box-sizing: border-box;
      }
      
.equipo img {
        width: 100%;
        max-width: 100%;
      }

.equipo li {background-color:  hsl(231, 74%, 29%);
    padding: 1em; margin-bottom: 0.5em;}
      
.equipo a {text-decoration: none;}
      
.equipo figcaption {
        padding-top: 0.5em;
        color: hsl(0, 0%, 100%) ;
        line-height: 1em;
        font-weight: 400;
        font-size: 1em;
        
      }
      
.equipo figcaption h3{
        color: hsl(202, 100%, 83%);
          font-weight: 700;
          display: block;
          margin-block-start: 0.5em;
          text-transform: uppercase;
          font-family: 'Oswald', sans-serif;
          margin-bottom: 0.5em;
          font-size: 1em;
      }


#datos {
    margin-top: 2em;
    padding-top: 1em ;
    border-color:  hsl(231, 74%, 29%);
    border-top-style: solid;
    border-width: 0.2em;
    }

.datosacademicos {
    display: flex;
    flex-wrap: wrap
}
.academicos {
    flex-basis: 33.33%; 
    padding: 1em;
    box-sizing: border-box;
    align-items: center;
}
#ubalogo img{
    display: block;
    max-width: 30%;
    padding: 1%;
}
#fadulogo img{
    display: block;
    padding: 4%;
}
#dgpclogo img {
    display: block;
    padding: 4%;
    min-width: 50%;
}
nav ul {
    list-style: none;
  }

  footer {
    border-color:  hsl(231, 74%, 29%);
    border-top-style: solid;
    border-width: 0.2em;
    
    padding: 2em 1em;
    display: block; 
    justify-content: center;
    max-width: 80%;
    margin-inline: auto;
    font-size: 0.7em;
    color: hsl(231, 74%, 29%);
}

img {width: 100%;
    max-width: 100%;}

h3 { 
    margin-top: 1em;
    margin-bottom:1em}

@media (min-width: 780px) {
    .equipo ul {grid-template-columns: auto auto auto;
    }
    .equipo ul li {margin-left: 0.5em;}
        article {
      display:grid;  
      grid-template-columns: 3fr 2fr;
    }
  
  
  }