html {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 100vh;
    width: 100vw;
}


header{
    background-color: blueviolet;
    display: flex;
    flex-direction: row;
    padding: 2vmin 10vmin;
    justify-content: space-between;
}

header img {
    height: 5vmin;
}

nav{
    display: flex;
}

nav ul{
    display: flex;
    flex-direction: row;
    gap: 5vmin;
    list-style: none;
    margin: auto;
}

nav ul li{
    font-size:clamp(1rem,10vh,1rem);
    list-style: none;
}


a{
    color: white;
    list-style-type: none;
    text-decoration: none;
    text-decoration: none;
}

body{
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}


section { 
    display: grid;
    gap: 10vmin;
    grid-template-columns: repeat(auto-fit, minmax(70vmin, 2fr));
    margin: auto;
    padding: 5vmin;
   
}
.comitente{
    display: flex;
    margin: 2rem auto 0;
    padding: 0;
    width: 50%;
    font-size: clamp(.75rem, 1vw, 2rem);
    text-align: center;
}

.comitente h1{
    margin: auto;
}

.integrantes {
    display: flex;
    flex-direction: row;
    margin: auto;
}

.integrante {
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    padding: 3vmin 5vmin ;
    border-radius: 2vmin;
    background-color: blueviolet;
}

.integrante h1 {
    color: white;
    text-align: center;
}

.integrante img{
    width: 25vmin;
    margin: auto;
    border-radius: 50%;
}

.integrante a{
    margin:  2vmin auto auto;
    color: white;
    border: 1px solid white;
    border-radius: 1.5vmin;
    padding: 1vmin 5vmin;
    background-color: blueviolet;
}

.integrante a:hover{
    color: blueviolet;
    border: 1px solid white;
    background-color: white;
}

.academica{
    display: flex;
    background-color: blueviolet;
    margin: auto; 
    color: white;
    padding: 0;
    width: 100%;
}

.academica p{
    color: white;
    padding:2rem 2rem;
    font-size: .75rem;
}


.plan {
    background-color:blueviolet;
    margin: auto;
    padding: 3vmin 3vmin;
    height: 95%;
    border-radius: 2vmin;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-title {
 display: flex;
 flex-direction: row;
 height: fit-content;
 gap: 2vmin;
 margin: 0vmin 1vmin 2vmin;
}




.plan-title img{
    width: 15%;
    height: 1%;
    margin: auto 0;
   }
   
   
.plan-title h1{
    color: white;
    font-size: clamp(1rem,10vh,1.5rem);
   }
   

   .persona-grid {
    display: flex;
    flex-direction: row;
    gap: 2vmin;
   }
   .persona-column{
    display: flex;
    flex-direction: column;
    gap: 2vmin;
   }

.persona-column div {
    background-color: white;
    padding: 1vmin;
    border-radius: 1vmin;
}



    .persona-column.first{
    width: 35%;
   }

   .persona-column.first div:first-child{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2vmin;
    padding: 2.5vmin;
   }

   .persona-column.first div:nth-of-type(2) p{
    background-color: rgb(207, 207, 207);
    width: 35%;
    padding: 0.5em 2em;
    border-radius: 1vmin;
   }

   .persona-column  div{ 
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    padding: 2vmin;
   }

   .persona-column  div i{ 
    margin-right: 1vmin;
   }

   p, li{
    padding-top: .5vmin;
   }


   .persona-column.first div:first-child h2{
    color: blueviolet;
   }

   .persona-column.first div:first-child img{
    width: 20vmin;
    margin: auto;
    border-radius: 50%;
   }

   .persona-info{
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 70%;
   }

   .persona-info h3 {
    font-size: clamp(.1rem,10vw,.6rem);
    display: flex;
    gap: 2vmin;
    color: blueviolet;
   }

   
   .persona-info h3 p {
    color: black ;
    padding: 0;
    font-size: clamp(.1rem, 10vw,.7rem);
   }


   .persona-column.second{
    width:65%;
   }




   .web-grid {
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 2vmin;
   }
   .web-row{
    display: flex;
    flex-direction: row;
    gap: 2vmin;
   }

.web-row.first  {
    background-color: white;
    border-radius: 1vmin;
    margin: auto;
    width: 100%;
}


.web-row.first  h1{
    font-size: 2.5vmin;
}

.web-row.second  {
    background-color: white;
    border-radius: 1vmin;
    margin: auto;
    width: 100%;
}

.web-row div {
    background-color: white;
    padding: 2vmin;
    border-radius: 1vmin;
}



.span-green{
    color: green;
}

.span-red{
    color: red;
}

.boton-mapa {
    display: flex;
    margin: 0 auto;
}

.boton-mapa a{
    padding: 0 5vmin;
    color: black;
}

.boton-mapa a:hover{
    color: blueviolet;
    font-weight: 1000;

}


 footer p{
    color: white;
    margin-top: 2vmin;
    padding: 1vmin;
 }
 
 .web-row.third div, .web-row.forth div {
    width: 50%;
 }

 h2{
   font-size: clamp(.75rem,10vh,1rem);
   margin: 0 ;
 }

p, li {
    font-size: clamp(.5rem,10vh,.75rem);
    margin: 0;
}

@media (max-width: 600px) {

   
.integrantes {
    display: flex;
    flex-direction: column;
    margin: auto;
}

.comitente{
    width: 80%;
}

}