:root {
  --blanco: #ffffff;
  --oscuro: #212121;
  --primerio: #ffc107;
  --secundario: #0097a7;
  --gris: #757575;
  --grisclaro: #DFE9F3; 
}
/* globales*/ 
html {

  font-size: 62.5%;
  box-sizing: border-box;
  scroll-snap-type: y mandatory ;
}
*, *:before, *:after {
  box-sizing:inherit;
}
body {
  font-size: 16px;
  font-family: "Krub", sans-serif;
background-image: linear-gradient(to top, --grisclaro 20%, var--(blanco)80%);
}

.contendor {
  max-width: 120rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size:x-large
}
.sombra{ 
 
    -webkit-box-shadow: 0px 5px 15px 1px rgba(143,143,143,0.58);
    -moz-box-shadow: 0px 5px 15px 1px rgba(143,143,143,0.58);
    box-shadow: 0px 5px 15px 1px rgba(143,143,143,0.58);
    padding: 2rem;
    border-radius: 1rem;
    max-width: 120rem;
    margin: 0 auto; 
    }
 
.boton{
  background-color: var(--secundario);
  color:var(--blanco);
  padding:1rem 3rem;
  margin-top: 1rem;
  font-size: 2rem;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5rem;
  width: 90%;
  text-align: center;
  border: none;
  font-family: "Krub", sans-serif;
  background: rgba(255,193,7,0.84);
background: -moz-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,193,7,0.84)), color-stop(100%, rgba(255,193,7,0)));
background: -webkit-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -o-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -ms-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: linear-gradient(to right, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ffc107', GradientType=1 );
}

}



/*tipografia*/  
h1 {font-size: 3.8rem;

}
h2{font-size: 2.8rem;

}
h3{ font-size: 1.8rem;

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

/* titulos */   
.titulo span {
  font-size: rem;
}
span {
  color: var(--oscuro);
}




@media (min-width: 480px) {
  .boton { width: auto;}
  
}
.boton:hover{ 
  cursor:pointer;
}
/** Utilidades**/
@media (min-width: 768px) {
  
}
.w-100{ 
width: auto;
 }
 .flex{ 
   display: flex;

  
}
@media (min-width: 768px) {
  

.alinear-derecha { 
justify-content: center;





 }

}

/*navegacion principal*/ 

.nav-bg {
  background: rgba(0,151,167,0.84);
  background: -moz-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,151,167,0.84)), color-stop(56%, rgba(0,151,167,1)), color-stop(94%, rgba(0,151,167,1)), color-stop(100%, rgba(255,193,7,1)));
  background: -webkit-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: -o-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: linear-gradient(to bottom, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097a7', endColorstr='#ffc107', GradientType=0 );   
 } 

.navegacion-principal {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .navegacion-principal {
    flex-direction: row;
    justify-content: space-around;
  }
}
.navegacion-principal a {
  display: block;
  text-align: center;
  color:var(--blanco); 
  text-decoration: none;
  font-size: 2rem;
  font-weight: 700;
  padding: 1rem;

}
.navegacion-principal a:hover {
  background-color: var(--primerio);
  justify-content: center;
  color: var(--oscuro);
  background: rgba(210,255,82,0.84);
background: -moz-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,0.84)), color-stop(100%, rgba(255,193,7,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -o-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -ms-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: linear-gradient(to right, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#ffc107', GradientType=1 );
}
/* HERO */   
.hero {
  background-image: url(../img/hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 45rem;
  position: relative;
  margin-bottom: 2rem;

}
.contenido-hero {
  position: absolute;
  background-color:rgba(138, 55, 55, 0.6); /** anterior**/ 
  background-color: rgb(0 0 0/ 60%);

    height: 100%;
    width:100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size:x-large 
    
}
.contenido-hero h2, .contenido-hero p {
  color: var(--blanco);
}
.span {
  color: var(--primerio);
}

.main{  max-width: 120rem;
  box-shadow: rgba(143, 143, 143, 0.58) 0px 5px 15px 0px;
  margin: 0px auto;
  display: block;
}
/*servicios*/ 
@media (min-width: 768px) {
  

.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(--oscuro);
        font-weight: bold;

}

.servicio p {
  line-height: 2;
  text-align: center;
}
.servicio .iconos { 
height: 15rem;
width: 15rem;
background-color: var(--primerio);
border-radius: 50%;
display: flex;
justify-content: space-evenly;
align-items: center;
-webkit-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
-moz-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);

background: rgba(210,255,82,0.84);
background: -moz-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,0.84)), color-stop(100%, rgba(255,193,7,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -o-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -ms-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: linear-gradient(to right, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#ffc107', GradientType=1 );
}
/*contacto*/
.form{ 
    width: min(60rem, 100%);
 margin: 0 auto;
 padding: 2rem;
 border-radius: 2rem; 
 background: rgba(0,151,167,0.84);
  background: -moz-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 90%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,151,167,0.84)), color-stop(56%, rgba(0,151,167,1)), color-stop(94%, rgba(0,151,167,1)), color-stop(90%, rgba(255,193,7,1)));
  background: -webkit-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: -o-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 90%);
  background: -ms-linear-gradient(top, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  background: linear-gradient(to bottom, rgba(0,151,167,0.84) 0%, rgba(0,151,167,1) 56%, rgba(0,151,167,1) 94%, rgba(255,193,7,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0097a7', endColorstr='#ffc107', GradientType=0 );   
 } 

 
.form fieldset {
  border: none;
}
.form legend {
  
  text-align: center;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--primerio);


} 
@media (min-width: 768px) {
  
}
.contendor-campos{ 
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto 20rem ;
column-gap: 1rem;




}

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

.label{ 
  width: 100%; 
  font-size: 2rem;
  font-family:"Krub", sans-serif;
  display: flex;
  height: 4rem;
  text-align: center;}


.input-text{ 
width: 100%;
background-color: background: rgba(255,193,7,0.84);
background: -moz-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,193,7,0.84)), color-stop(100%, rgba(255,193,7,0)));
background: -webkit-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -o-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: -ms-linear-gradient(left, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
background: linear-gradient(to right, rgba(255,193,7,0.84) 0%, rgba(255,193,7,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc107', endColorstr='#ffc107', GradientType=1 );; 
border: none;
padding: .5rem;
border-radius: 1.5rem;
font-size: 2rem;
font-family:"Krub", sans-serif;
display: flex;
height: 8rem;
text-align: center;
-webkit-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
-moz-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);

background: rgba(210,255,82,0.84);
background: -moz-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,0.84)), color-stop(100%, rgba(255,193,7,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -o-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -ms-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: linear-gradient(to right, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#ffc107', GradientType=1 );


}
.enviar .boton { 
  width: 100%;
  justify-content:center;
  text-align: center;
  text-transform: uppercase;
  border-radius: 2rem;
  -webkit-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
-moz-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);

background: rgba(210,255,82,0.84);
background: -moz-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,0.84)), color-stop(100%, rgba(255,193,7,1)));
background: -webkit-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -o-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: -ms-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
background: linear-gradient(to right, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#ffc107', GradientType=1 );

}
.campo textarea{ 
  height: 20rem;
  -webkit-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
  -moz-box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
  box-shadow: 1px 17px 15px 0px rgba(163,163,163,0.24);
  
  background: rgba(210,255,82,0.84);
  background: -moz-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(210,255,82,0.84)), color-stop(100%, rgba(255,193,7,1)));
  background: -webkit-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
  background: -o-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
  background: -ms-linear-gradient(left, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
  background: linear-gradient(to right, rgba(210,255,82,0.84) 0%, rgba(255,193,7,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#ffc107', GradientType=1 );
  } 

}
.campo:nth-child(3){

  grid-column: 1/3; 
}
.campo.label{ font-size: 8rem;} 

.footer{
  text-align: center;
  text-decoration-color: var(--primerio);
  text-decoration-style: wavy;
  text-decoration-line: underline;
  font-size: 1rem;
  
  font-
}