:root{
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #FFC107;
    --secundario: #0097A7;
    --gris: #757575;
    --grisClaro: #DFE9F3;
    --tamañoFuentePrincipal: 3.8rem;
}

/*  Globales **/
html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model **/
    scroll-snap-type: y mandatory;
}

.misServicios, 
.navegacion_principal,
.footer{
    scroll-snap-align: center;
    scroll-snap-type: y mandatory;
}
*, *:before, *:after{
    box-sizing: inherit;
}
.encabezado{
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr;
}

@media(min-width: 768px){   
.encabezado{
    width: 100%;
    display: grid;
    grid-template-columns: 10% 90%;
    grid-template-rows: auto;
}
}

.logoencabezado{
    background-image: url(../images/logo1grandedrrolp.com-192x94.jpg);
    width: 20%;
    min-width: 210px;
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--blanco);
    
}

.TituloEncabezado h1 detalletitulo{
    font-size: 1.2rem;
    text-align: left;
}

@media(min-width: 768px){   
    .TituloEncabezado h1 detalletitulo{ 
        font-size: 2rem;
        text-align: right;
    }
}
/*
@media(min-width: 400px){
    .encabezado{
        width: 100%;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .logoencabezado{
        background-image: url(../images/logo1grandedrrolp.com-192x94.jpg);
        width: 20%;
        min-width: 210px;
        background-repeat: no-repeat;
        background-size: contain;
        color: var(--blanco);
    }
}    
*/

body{
    font-size: 16px; /* 1rem = 10px*/
    font-family: 'Krub', sans-serif;
    background-color: #212121;
    color: var(--blanco);
    /*background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100% );*/
}
.contenedor {
    max-width: 120rem;
    margin: 0 auto;
}

/* Tipografia */
h1 {
    font-size: 3.8rem;
}
h2 {
    font-size: 2.8rem;
}
h3 {
    font-size: 1.8rem;
}
h1,h2,h3 {
    text-align: center;
}

/*
.titulo{
    text-align: center;
    color: var(--blanco);
    font-size: 3.8rem;
    font-family: 'Krub', sans-serif ;
    font-weight: 700;
}
*/

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

.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%;

}

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

.navegacion_principal{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

@media(min-width: 768px){    
    .navegacion_principal {
        flex-direction: row;
        justify-content: space-between;
    }
}

.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(--primario);
    color: var(--oscuro);
}
/*
.navegacion_principal a:visited{
    color: red;
}
*/

.hero{
    background-image: url(../images/background4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    padding: 20px;
    color: var(--blanco);
}
.contenido-hero {
    /*
    position: absolute;
    background-color: rgba( 0,0,0, .7 ); ** Anterior ***
    background-color: rgb( 0 0 0 / 70% );
    */
    width: 100%;
    height: 100%;

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

}
.contenido-hero h2, 
.contenido-hero p {
    color: var(--blanco);
}
.contenido-hero .ubicacion {
    display: flex;
    align-items: flex-end;
}

.misServicios{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 3rem;
    font-weight: normal;
    text-align: justify;
}

@media(min-width: 768px){    
    .misServicios{
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
        grid-template-rows: auto;
        column-gap: 3rem;
    }
}

.misServicios .iconos{
    /*background-color: var(--primario);
    height: 15rem;
    width: 15rem;
    border-radius: 50%;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.sistemasoperativos{
    display: grid;
    grid-template-columns: 25% 25% 25% 25% ;
    grid-template-rows: auto;
    column-gap: 2rem;
    justify-content: center;
    align-items: center;
}
.iconoprogress{
     max-width: 33.33%;
}

.enviacorreo{
    display: grid;
    grid-template-columns: 1% 98% 1%;
}
.enviacorreo .formulario{
    background-color: var(--gris);

}
@media(min-width: 768px){  
    .enviacorreo{
        display: grid;
        grid-template-columns: 20% 60% 20%;
    }
}

.contenedor_campos{
   border-radius: 1rem;
}

.campo{
    margin-bottom: 1rem;
    width: 100%;
}

.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;
}
.footer{
    text-align: center;
}