:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ffc107;
    --secundario: #0097a7;
    --gris: #757575;
    --grisClaro:#DFE9F3;
    --gaby:#ff0083;
    --verde:#627d4d;
    --grisocuro:#2F4F4F;
    --verdeclarito:#adffdc;

}

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

*, *:before, *:after{
    box-sizing: inherit;
}
body{
    font-size: 16px; /* 1rem=10px */
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisClaro)5%, var(--grisocuro)75%, var(--blanco)50% );
    
}

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

.sombra{
    -webkit-box-shadow: 0px 5px 14px 0px rgba(125,119,125,0.95);
    -moz-box-shadow: 0px 5px 14px 0px rgba(125,119,125,0.95);
    box-shadow: 0px 5px 14px 0px rgba(125,119,125,0.95);
    background-color: var(--blanco);
    border-radius: 1rem;
}

.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: 4rem;
    
}

/* Tipografia */
h1{
    font-size: 3.8rem;
    }

h2{
    font-size: 2.8rem;
}

h3{
    font-size: 1.8rem;
}

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

.curu{
    color: var(--blanco);
}
 .pie{
    text-align: center;
    font-style: oblique;
 }

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

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

/* Navegacion principal */
.nav-bg{
    background: rgba(175,230,9,1);
    background: -moz-linear-gradient(left, rgba(175,230,9,1) 0%, rgba(135,207,10,1) 24%, rgba(94,183,11,1) 48%, rgba(34,148,12,1) 84%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(175,230,9,1)), color-stop(24%, rgba(135,207,10,1)), color-stop(48%, rgba(94,183,11,1)), color-stop(84%, rgba(34,148,12,1)));
    background: -webkit-linear-gradient(left, rgba(175,230,9,1) 0%, rgba(135,207,10,1) 24%, rgba(94,183,11,1) 48%, rgba(34,148,12,1) 84%);
    background: -o-linear-gradient(left, rgba(175,230,9,1) 0%, rgba(135,207,10,1) 24%, rgba(94,183,11,1) 48%, rgba(34,148,12,1) 84%);
    background: -ms-linear-gradient(left, rgba(175,230,9,1) 0%, rgba(135,207,10,1) 24%, rgba(94,183,11,1) 48%, rgba(34,148,12,1) 84%);
    background: linear-gradient(to right, rgba(175,230,9,1) 0%, rgba(135,207,10,1) 24%, rgba(94,183,11,1) 48%, rgba(34,148,12,1) 84%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#afe609', endColorstr='#22940c', GradientType=1 );
}
.navegacion-principal{ 
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
}

@media (min-width:768px ){
    .navegacion-principal{
        flex-direction: row;
    }
}
.navegacion-principal a {
 color:var(--blanco);  
 font-size: 1,5rem;
 font-weight: bold;
 padding: 1rem;
}
 

.navegacion-principal a:hover{
    background-color: rgb(26, 252, 146);
    color: var(--oscuro);
    box-shadow:inset 0px 0px 15px 0px rgba(0,129,255,0.5);  
    -webkit-box-shadow:inset 0px 0px 15px 0px rgba(0,129,255,0.5); 
   
}

/* Hero imagen de fondo */
.hero {
    background-image: url(../img/escritorio6.jpeg);
    background-size: cover;
    height: 650px; 
    position: relative;
    
}




.contenido-hero{
    position: absolute;
    background-color: rgba(0,0,0, .6) ;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.contenido-hero h2{
    color: var(--blanco);
}

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

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

}

.servicio h3{
    color: var(--secundario);
    font-weight: bold;
    text-align: center;

}
.servicio p{
    line-height: 2;
}
.servicios .iconos{
    height: 15rem;
    width: 15rem;
    background-color: var(--primario);
    border-radius: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* Contacto */
.formulario{
background-color:var(--grisocuro);
width: min( 60rem, 100% ); /** utiliza el valor más pequeño **/
margin: 0 auto;
border-radius: 1rem;

}
.contactenos{
    padding-top: 2rem;
}

.formulario fieldset{
    border: none;
}

.formulario legend{
    color:var(--verdeclarito);
    text-align: center;
    font-size: 1.7rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 2rem;
    
}
/* formulario de contacto*/


@media (min-width:768px )
    {
        .contenedor-campos{
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: auto auto 20rem;
            column-gap: 1rem;

        } 
        .campo:nth-child(3),
        .campo:nth-child(4){
            grid-column: 1 / 3;
        }
    }


.campo{
margin-bottom: 1rem;


}

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

.campo input[type="text"],
       input[type="tel"],
       input[type="email"]
       
{
    background-color:var(--grisClaro);
    width: 100%;
    height: 55%;
    border: none;
    padding: 1.3rem;
    border-radius: .5rem;
    box-shadow: 0 0 20px rgb(68, 202, 255);
   
}

.campo textarea{
    background-color:var(--grisClaro);
    width: 100%;
    height: 20rem;
    border: none;
    padding-bottom: 5.5rem;
    border-radius: .5rem;
    resize:none;
    box-shadow:inset 0px 0px 10px 0px rgba(0,129,255,0.5);  
    -webkit-box-shadow:inset 0px 0px 10px 0px rgba(0,129,255,0.5); 
    
}

.campo input[type="submit"]
{
    background-color: var(--secundario);
    color: var(--blanco);
    font-size: 12px;
    padding: 1rem 3rem;
    margin-top: 5rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
    cursor: pointer;
    display: flex; 
    
}

/*Parte del link Acerca de mi*/
.contenedor-p{
    display: inline-block;
    margin-bottom: 10%;
    font-weight: bold; 
  
}
.perfil{
  float: left;
  border-image: none;
  image-resolution: inherit;
  width: 236px;
  height: 236px;
  border-radius: 50%;
  margin-top: .5rem;
  
}
 



/*Lin de agradecimiento*/


/*Link de Cliente*

.servi{
    display: grid;
    grid-template-columns: repeat(3, 1fr) ;
    column-gap: 3rem;
    padding-left: 3rem;
}

.servi2{
    text-align:center;
    display: flex;
    justify-content: end;

}
/