/* paleta de colores */
/* los que  inician con dos puntos (:) se les conoce como pseudoselectores son una elemento que no existe en html
 root es  una forma de almacenar variables de css que se les conoce con custom properties*/ 
:root {
    --blanco:#FFFFFF;
    --oscuro: #212121;
    --primario: #ffc107;
    --secuandario: #0097A7;
    --gris:#757575;
    --grisclaro: #DFE9F3;
    
}
/* Globales */ 
html{
    font-size: 62.5%;
    box-sizing: border-box; /* Hack para Box Model */
    scroll-snap-type: y mandatory; /*scroll de arriba hacia abajo */
}

/** Scroll Snap **/
.servicios,
.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-color: cornflowerblue; */
    background-image: linear-gradient(to top, var(--grisclaro) 0%, var(--blanco) 100%);
}

.contenedor{
    max-width: 120rem; /* toma 1200px como máximo y solamente si hay ese espacio disponible sino toma 100% 
    que es el ancho que toma por default */
    /* margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto; */
    /* margin: 0 auto 0 auto; */
    margin: 0 auto;
}

.boton{
    background-color: var(--secuandario);
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 2rem;
    text-decoration: none; /* quitar subrayado del texto */
    text-transform: uppercase; /* transformar el texto de minuscula a mayuscula*/
    font-weight: bold;
    border-radius: .5rem;
    width: 90%;
    text-align: center;
    border: none;

}

/* regresar la manito sobre el botón */
.boton:hover{
    cursor: pointer;
}

@media (min-width: 768px) {
    .boton{
        width: auto; /* con esto se reseteara el boton*/
    }
}   

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

    /* 026 Introducción a CSS Grid */
}

/* Design System - Tipografía */
h1{
    font-size: 3.8rem;
}

h2{
    font-size: 2.8rem;
}

h3{
    font-size: 1.8rem;
}

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

/* .titulo {
    
     /* 3.8rem = 38px */ /* los rem se adaptan mucho mejor si estas creando una página web para una TV, smartwatch, tablet o pantalla que tenga una densidad de pixeles muy alta */
    /* font-weight: 400; */
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */

    
    /* text-align: right;
    color: blue;
     text-transform: uppercase; 
}
*/

/* Titulos */
.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;
}


/* Navegación Principal */
.nav-bg{
    background-color: var(--secuandario);   
}

.navegacion-principal{
   /* background-color: var(--secuandario);  */
   
   /* margin-top: 10rem; */
   
   display: flex; /* nos habilita flexbox en este elemento  */
   flex-direction: column;
   /* flex-direction: row;  viene por defecto */
   /* justify-content: space-between ;  permite mover o distriburir el contenido horizontalmente */
   /* align-items: center;  alinear verticalmente */
}

/* cambiara cuando sea un telefono */
/* @media (min-width: 480px) {
    
}
*/

/* media querie para una tablet */
@media (min-width: 768px) {
    .navegacion-principal{
        flex-direction: row;
        justify-content: space-between;
        
    }
}




/* sirve bien para una laptop o una computadora de escritorio */
/* @media (min-width: 1140px) {
    
} 

@media (min-width: 1400px) {
    
}
*/



.navegacion-principal a{
    /* background-color: var(--primario);
    display: inline;
    display: block; 
    display: inline-block;
    display: flex; 
    display: grid; */
    display: block;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;  /* line-through tacha el texto */  /* underline le agrega un subrayado */
    font-size: 2rem;
    font-weight: bold;
    padding: 1rem; /* padding: 1rem = 1rem 1rem 1rem 1rem */
    
}

/* pseudoclases ya mas bien en los selectores porque no son clases como tal sino que son clases que se
crean al momento */
.navegacion-principal a:hover{
    background-color: var(--primario);
    color:var(--oscuro)
}

/* Hero */
.hero{
    background-image: url(../img/hero.jpg); /* agregar imagen vía CSS*/
    background-repeat: no-repeat; /* para que no se repita la imagen */
    background-size: cover ; /* para llenar el espacio vacío de una imagen */
    height:450px;
    /* padding: 20px; */
    position: relative;
    margin-bottom: 2rem;

}

.contenido-hero{
    position: absolute;
    background-color:rgb(0, 0, 0, .7); /**  Anterior **/
    background-color: rgb(0 0 0 / 70%);
    width: 100%;
    height: 100%;

    /* alinear tanto verticalmente como horizontalmente */
    /* centrar horizontal */
    display: flex; /* habilitamos para posicionar ciertos elementos */
    flex-direction: column; /* hace que se vaya de arriba hacia abajo */
    align-items: center; /* cuando cambias a column ya no puedes alinar con justify-content */
    justify-content: center;



}

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

.contenido-hero .ubicacion{
    display: flex;
    align-items: flex-start;
    
}



/** Servicios **/

@media (min-width: 768px) {
    .servicios{
    display: grid; /* habilitar CSS Grid */ 
    /* grid-template-columns: 300px 300px;
    grid-template-rows: 200px 800px; */

    /* grid: 200px 800px / 300px 300px; */

    /* grid-template-columns: 33.3% 33.3% 33.3%; */
    /* grid-template-columns: 1fr 1fr 1fr;  cada columna toma un fracción */ 
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    }
}

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


.servicio h3{
    color: var(--secuandario);
    font-weight: normal;
}

.servicio p{
    line-height: 2; /* interlineado de texto */
    text-align: center;
}

.servicio .iconos{
    height: 15rem;
    width: 15rem;
    background-color: var(--primario);
    border-radius: 50%;

    /* Posicionar los iconos horizontal y verticalmente */
    display: flex;  
    justify-content: center;
    align-items: center; /* permite alinear verticalmente */
}

/** Contacto **/

.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.5rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    color:var(--primario);
}

@media (min-width: 768px) {
    .contenedor-campos{
        display: grid;
        grid-template-columns: 1fr 1fr; /* repeat (2, 1fr); -- 50% 50%; Para definir areas de las columnas */
        grid-template-rows: auto auto 20rem;
        column-gap: 1rem; /* separación de columnas */
    }
    
    
    .campo:nth-child(3),
    .campo:nth-child(4) /* pseudoselector nth-child si hay 4 que se llaman selecciona uno de ellos */
    {
        grid-column: 1 / 3; /* posicionar un elemento */
        /* grid-row: 3 / 4; */
    }
    
}
.campo{
    margin-bottom: 1rem;
}

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

.campo textarea{
    height: 18rem;
}

/* selector de atributo [type="text"] */
/* .campo input[type="text"],
.campo input[type="tel"] 
background-color: red; */

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

    /* Video 030 04:00 - CSS a los inputs */
}

/* .enviar .boton{
    width: 100%;
} */

/* Footer */
.footer{
    text-align: center;
}


    
/* @media luego entre parentesis defines una condición. Es decir, es siguiente código CSS 
se va aplicar bajo las siguientes condiciones. */

/* body{
    background-color: yellow;
    font-size: 3rem;
} */


/* lo que hace este código es que llegado a los 480px  ejecute lo siguiente */
/* @media (min-width: 480px){
    body{
        background-color: blue;
    }
}

@media (min-width: 768px){
    body{
        background-color: cornflowerblue;
    }
} */

/* @media (min-width: 480px) {
    h1{

    }
}

@media (min-width: 768px) {
    h1{
        
    }
} */



/* p{
    background-color: var(--primario);
} */

/* span{
    color: green;

    color: green!important;  el !important hace que omita todos y sea éste el mas especifico. No es muy recomendable
}
*/


/* h1.titulo span{
     font-size: 20px; 
    color: peru;
    font-family: cursive; 
    
    font-size: 2rem;
    color: blue;
} */




/* 006 Especificidad en CSS */

/* .titulo span{
    font-size: 20px; 
    color: peru;
    font-family: cursive; 


    font-size: 2rem;
    color: red;
}*/



















/* span{
    font-size: 6rem;
    color: red;
} */


/* 016 Introducción a Responsive 04:31 min*/