:root{
---blanco:#ffffff;
---oscuro:#212121;
---primario:#ffc107;
---secundario:  #0097a7;
---gris:#757575;
---funte-principal: 3.8rem;


}
html{
    font-size: 62.5%;
    box-sizing: border-box;
   
}

.servicios,
.navegacion-principal
,
.formulario{
    scroll-snap-align: center;
  
}

*, *:before, *:after{

    box-sizing: inherit;
}
body{
    font-size: 16px;
    font-family: "Fira",sans-serif;
    background-image: linear-gradient(to top, #dfe9f3, var(---blanco) 100%);
}

h1{
font-size: 3.8rem;

}

h2{
    font-size: 2.8rem;
}

h3{

    font-size: 1.8rem;
}

h1,h2,h3{
     text-align: center;
}

.titulo span{
    font-size: 2rem;
}



.contenedor{
  max-width: 120rem;
  margin: 0 auto;
}

.boton{
    background-color: var(---secundario);
    color: var(---blanco);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
   width: 90%;
    text-align: center;
    border: none;
}

@media (min-width: 768px) {
    .boton{
        width: auto;
    }
}

.boton:hover{
    cursor: pointer;
}
.sombra{

-webkit-box-shadow: 2px 0px 13px 0px rgba(176,173,176,0.69);
-moz-box-shadow: 2px 0px 13px 0px rgba(176,173,176,0.69);
box-shadow: 2px 0px 13px 0px rgba(176,173,176,0.69);
background-color: var(---blanco);
padding: 2rem;
border-radius: 1rem;
}

.w-100{
    width: 100%;
}

@media (min-width: 768px){
    .w-100{
        width: auto;
    }
}

.flex{
    display: flex;
}
.alinear-derecha{
justify-content: flex-end;
}

.nav-bg{
    background-color: var(---secundario);
   
}

.navegacion-principal{
    display: flex;
    flex-direction: column;
   
}


.navegacion-principal a{
    display: block;
    text-align: center;
    color: var(---blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem;
}

.navegacion-principal a:hover{
 background-color: var(---primario);
 color: var(---oscuro);
}

@media(min-width: 780px){

  .navegacion-principal{
    
    flex-direction: row; 
    justify-content: space-between;
  }

}

.cafe{
    background-image: url("../img/UnidadDePosgrado.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    height: 450px; 
  
   position: relative;
   margin-bottom: 2rem;

}
.contenido-cafe{ 

position: absolute;
background-color: rgba(0,0,0, .5);

width: 100%;
height: 100%;

display: flex;
flex-direction: column   ;
align-items: center;
justify-content: center;
}

.contenido-cafe h2, 
.contenido-cafe p{
    color: var(---blanco);
}

.ubicacion{
    display: flex;
    align-items: flex-start;
}



@media (min-width: 780px) {
    .servicios{
display: grid;
grid-template-columns: repeat(3, 1fr) ;
column-gap: 1rem;
}

}

.servicio{
display: flex;
flex-direction: column;
align-items: center;
}

.servicio h3{

    color: var(---secundario);
}

.servicio p{
    line-height: 2;
}

.servicio .iconos{

height: 15rem;
width: 15rem;
background-color: var(---primario);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}

.formulario{
  
 background-color: var(---gris);
 width: min(60rem, 100%);
 margin: 0 auto;
 padding: 2rem;
 border-radius: 1rem;
}
.formulario fieldset{
    border: none;  
}

.formulario legend{
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(---primario);
}

.campo{
 margin-bottom: 1rem;
}
.campo label{
color: var(---blanco);
font-weight: bold;
margin-bottom: .5rem;
display: block;
}

.input-text{
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: .5rem;
}