:root {  /* variables css*/
    --blanco: #ffffff;
    --oscuro: #212121;
    --primario: #ffc107;
    --secundario: #0097a7;
    --gris: #757575; 
    --grisClaro: #dfe9f3;
}

html{  /*esto lo ponemos para usar rem en vez de px para una pantalla adaptable , segun pantalla*/
    font-size: 62.5%;
    box-sizing: border-box; /*hackbox*/
    scroll-snap-type: y mandatory; /* aqui activo a mi pagina el scrol para mover de arriba para bajo pensando ya en los 
    usuarios que van a ver en su movil*/
}

*, *:before, *:after{     /* este para que la caja no varie su px*/
    box-sizing: inherit;
}

/*controlando el scroll*/
.servicios, 
.navegacion-principal,
.formulario{
scroll-snap-align: center;
scroll-snap-stop: always;
} /*fin control scoll*/

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

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;
           font-size: 3.8rem; 
  /*  color: rgb(52, 0, 173); 
    
} */

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

    .contenedor {
  /* width: 120rem; /* 1200 pixeles*/
  /* margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto; 
   en vez de usar estos 4 podes usar uno solo linea de codigo 
   que es margin: 0 auto 0 auto ; cuando estos valos se repiten pudes eliminar 1
   margin: 0 auto ; queda asi y  css ya sabe */
   max-width: 100rem;
   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; /*uso con mi boton submit*/

    }
    @media (min-width: 768px) {
         .boton{
             width:auto;
         }
    } 
    .boton:hover{
        cursor: pointer;
    }

    .nav-bg{
        background-color: var(--secundario);
        /* var(--secundario) asi llamo a mis variables */
    }

    .navegacion-principal  {
       /* padding: 1rem;  pasamos al otro*/
        display: flex;
        flex-direction: column;
        
      /*  background-color: var(--secundario);
         var(--secundario) asi llamo a mis variables */
    }
    @media (min-width: 768px) {
        .navegacion-principal  {
           flex-direction: row;
           justify-content: space-between;
        }
    } 

    .navegacion-principal a {
        display: block;
        text-align: center;
       /* background-color: var(--primario);
        display: inline;
         /* inline singnica que va de seguido 
        no necesito especificar a menos que quiera que funcione de otra manera 
        por defecto ya se ordena 
        display: block; ordena uno abajo de otro*/
        color: var(--blanco);
        text-decoration: none;
        font-size: 2rem;
        font-weight: 700;
        /*padding: 1rem; me parecio muy grande ya */
        padding: .7rem;
    }

    .navegacion-principal a:hover{
        background-color: var(--primario); 
        color: var(--oscuro);
        /*esto hace cuando el boton esta encima */
    }

.hero {
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 410px;
    /*padding: 20px;*/
    position: relative; /* en el padre*/
    margin-bottom: 2rem; /* para que el cuadro de abajo no se le pegue*/
}

   .contenido-hero{
       position: absolute;  /*hijo*/
       background-color: rgba(0,0,0, .7); /*anterior */
       background-color: rgb(0 0 0 / 70%);
       width: 100%;
       height: 100%;
     /*codig para centrar el contenido*/
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center; /*horizontal y verticalmente*/
   }

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


   .sombra{
   /* -webkit-box-shadow: 0px 5px 15px 0px rgba(97,93,97,0.55);
    -moz-box-shadow: 0px 5px 15px 0px rgba(97,93,97,0.55);  codigo que se usana en navegaodres antes*/
    box-shadow: 0px 5px 15px 0px rgba(97,93,97,0.55);
background-color: var(--blanco);
padding: 2rem;
border-radius: 1rem;
   }


/* Servicios*/

@media (min-width: 768px) {
    .servicios{
        display: grid;
        grid-template-columns: repeat(3,1fr);
       /* grid-template-columns: 1fr 1fr 1fr; es igual al de arriba*/
       column-gap: 1.5rem; /* espacios entre las columnas para que no se peguen las letras*/
    }   
} 
  

.servicio{
display: flex;
flex-direction: column;
align-items: center;
}
.servicio h3{
color: var(--secundario);
font-weight: normal;
}
.servicio p{
    line-height: 2;
    text-align: center;
}

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

/*FORMULARIO */
.formulario{
background-color: var(--gris);
width: min(60rem, 100%); /*utilizar el valor mas peque;o*/
margin: auto;
padding: 2rem;
border-radius: 1rem;
}

.formulario fieldset{
border: none;  /*le sacamos el borde feo que tenia por defecto*/
}

.formulario legend{
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primario);
}


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

.input-text{
   /* background-color: blueviolet;*/
   width: 100%;
   border: none;
   padding: 1.5rem;
   border-radius: .5rem;
}

/* utilidades */
.w-sm-100{
width: 100%;
}
.flex{
display: flex;
}
.alinear-derecha{
justify-content: flex-end;
}
@media (min-width: 768px) {
     .w-sm-100{
         width:auto;
     }
} 


.campo textarea {
    height: 20rem;
}

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

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

.fo{
    text-align: center;
}