/*Globales*/

:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ffc107;
    --secundario: #0091a7;
    --gris: #757575;
    --grisclaro: #dfe9f3;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-size: 16px;
    /* 1px = 10rem*/
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisclaro) 0%, var(--blanco) 100%);
}

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

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

.boton {
    background-color: var(--secundario);
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 2rem;
    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;
}


/* tipografia*/

h1 {
    font-size: 3.8rem;
}

h2 {
    font-size: 2.8rem
}

h3 {
    font-size: 1.8rem;
}

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

span {
    font-size: 2rem;
}


/*Navegacion principal*/

.navegacion-principal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

@media (min-width: 768px) {
    .navegacion-principal {
        flex-direction: row;
    }
}

.navegacion-principal a {
    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);
}

.sombra {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.54);
    -moz-box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.54);
    box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.54);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 2rem;
}


/*imagen de fondo hero*/

.hero {
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    position: relative;
    margin-bottom: 2rem;
    /* poniendo el heigh con el pading hace que el padding este 
    dentro de la imagen, pero con la posicion relativa en el padre hara que en el hijo con 
    el absolute se quite el pading y se ajute a los px*/
}

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

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

.servicio,
.navegacion-principal,
.formulario {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}


/*servicios*/

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

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

.servicio h3 {
    color: var(--secundario);
    font-weight: 400;
}

.servicio p {
    line-height: 2;
}

.servicio .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(--gris);
    width: min( 60rem, 100%);
    /*utiliza el valor mas pequeño*/
    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);
}


/* utilidades**/

.w-100 {
    width: 100%;
}

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

.flex {
    display: flex;
}

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

@media (min-width: 768px) {
    .contenedor-campos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 20rem;
        column-gap: 1rem;
        /* separacion de columna*/
    }
    .campo:nth-child(3),
    .campo:nth-child(4) {
        grid-column: 1/3;
    }
}

.campo {
    margin-bottom: 1rem;
}

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

.campo textarea {
    height: 20rem;
}

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

.enviar .boton {
    width: 100%;
}

.footer {
    text-align: center;
}