:root{
   --blanco: #ffffff;
   --oscuro: #212121;
   --primario: #FFC107;
   --secundario: #0098A7;
   --gris: #757575;
   --grisClaro: #DFE9F3;
}

/* Globales */
html {
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model */
   scroll-snap-type: y mandatory;
 }
 
 /* Scroll Snap */
.servicios,
.acercademi,
.navegacion-principal,
.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;
    background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100%);
 }

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

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

 /* Tipografía */
 h1 {
   font-size: 3.8rem;
 }
 h2 {
   font-size: 2.8rem;
 }
 h3 {
   font-size: 1.8rem;
 }

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

 /* Títulos */
 .titulo span{
    font-size: 2rem;
 }

 /* Utilidades */
.w-sm-100{
   width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100{
      width: auto;
    }
}
.flex{
   display: flex;
}
.alinear-derecha{
   justify-content: flex-end;
}
 
 .nav-bg{
   background-color: var(--secundario);
 }
 .navegacion-principal{
   display: flex;
   flex-direction: column;
 }
 @media (min-width: 768px) {
     .navegacion-principal{
      flex-direction: row;
      justify-content: space-between;
     }
 }
 /* Navegación Principal */
 .navegacion-principal a {
   display: block;
   text-align: center;
   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);
 }
/* Header */
.header{
   background-image: url(../img/header.png);
   background-size: cover;
   height: 150px;
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
}

.contenido-titulo{
   position: absolute;
   margin: 0 auto;
   padding: 5rem;
   color: var(--blanco);
   bottom: 0;
   left: 0;
   top: 0;
   right: 0;
   background-color: rgba( 0,0,0, .5);
}


 /* Hero */
 .hero {
   background-image: url(../img/hero.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   height: 450px;
   position: relative;
   margin-bottom: 0rem;
 }

 .contenido-hero {
   position: absolute;
   background-color: rgba( 0,0,0, .7); /**Anterior Sintaxis**/
   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;
 }

/* Cards */
 .herocards {
   background-image: url(../img/hero.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
   position: relative;
   margin-bottom: 0rem;
 }

 
.herocards .padding{
   padding: 1rem;
   width: 100%;
   height: 100%;
}

 /* Servicios */
@media (min-width: 768px) {
   .servicios{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
   }    
}

.servicio{
   display: flex;
   flex-direction: column ;
   align-items: center;
}
.servio h3{
   color: var(--secundario);
   font-weight: normal;
}
.servicio p{
   line-height: 2;
   text-align: center;
}
.servicio .iconos{
   height: 15rem;
   width: 15rem;
   background-color: var(--primario);
   border-radius: 50%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}
 /* Servicios - Acerca de mí*/
 .acercademi{
   background-image: url(/img/header.png);
   background-repeat: no-repeat;
   background-size: cover;   
   
   width: 85%;
   margin: 0 auto;
   margin-top: 4%;
   padding: 20px;
   color: var(--blanco);
   text-align: center;
   border-radius: 2%;
   margin-bottom: 5rem;
}

.acercademi p{
   text-align: center;
   margin: 0 auto;
   width: 80%;
   margin-top: 5rem;
   line-height: 2;
}

.acercademi-img {
   border-radius: 50%;
}

/* Contacto */
.formulario{
   background-image: url(../img/fondoFormulario.jpg);
   /*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: repeat(1fr 1fr);
      grid-auto-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;
}
/* Footer */
.footer{
   text-align: center;
}