:root {

    --blanco: #ffffff;

    --oscuro: #212121;

    --primario: #FFC107;

    --secundario: #0097A7;

    --gris: #757575;

    --grisClaro: #DFE9F3;

}





html{

    font-size: 62.5%;

    box-sizing: border-box;

    scroll-snap-type: y mandatory;

}

/** Scroll Snap**/
.header,
.formulario {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}





*, *::before, *::after{

    box-sizing: inherit;

}





body{

    font-size: 16px; /* 1rem = 10px */

    font-family: 'Krub', sans-serif;



}



h1{

    font-size: 3.8rem;

}

h2 {

    font-size: 2.8rem;

}

h3 {

    font-size: 1.8rem;

}

h1,h2,h3 {

    text-align: center;

}

/** Utilidades **/
.w-sm-100 {
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100 {
        width: auto;
    }

}

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

input:focus {
    background: #FFC107;
  }



.header{

    display: flex;
    justify-content: center;

}



.logo{



    width: 30rem;

   

}



.boton {

    background-color: var(--secundario);

    color: var(--blanco);

    padding: 1rem 3rem;

    margin-top: 4rem;

    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;

}



.hero{

    background-image: url(../img/Black\ and\ Yellow\ Under\ Construction\ Banner.png);

    background-repeat: no-repeat;

    background-size: cover;

    height: 780px;

    position: relative;

    margin-bottom: 2rem;

    

}





.contenido-hero {

    position: absolute;

    background-color: rgb( 0 0 0 / 40% );

    width: 100%;

    height: 100%;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



}

.contenido-hero h2, 

.contenido-hero p {

    color: var(--oscuro);

}

.contenido-hero .ubicacion {

    display: flex;

    align-items: flex-end;

}


.titulo-hero{
    background-color: var(--grisClaro);
    border-radius: 10px;
    padding: 10px;

}


/** Contacto **/

.contacto{

    margin-bottom: 5rem;
}
.formulario {
    background-color: var(--gris);
    width: min( 60rem, 100% ); /** Utilizar el valor más 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);
}

@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);
    font-weight: bold;
    margin-bottom: .5rem;
    display: block;
}
.campo textarea {
    height: 20rem;
}

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

.result_fail{
    margin-top: 5px;
    background: none repeat scroll 0 0 #BC1010;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}
.result_ok{
    margin-top: 5px;
    background: none repeat scroll 0 0 #1EA700;
    border-radius: 20px 20px 20px 20px;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
}


/** Footer **/
.footer {
    text-align: center;
    margin-top: 5rem;
    width: 100%;
	position:fixed;
	bottom: 0px;
    /* color: #FFF; */
    

	background: var(--grisClaro);
	height: 30px;
	display: -webkit-flex; 
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center; 
	align-items: center;
	padding: 10px;
   

}

.footer p img {
    width: 70px;
}