/* Paleta de colores */

/* ir de lo mas general a lo mas basico */
/* aqui se hara una paleta de colores que se usaran en la pagina */
:root {
    --primario: #ffc107;
    --secundario: #0097A7;
    --blanco: #FFFFFF;
    --oscuro: #000000;
    --gris: #757575;
    --grisclaro: #DFE9F3;
}

/* Globales */

/* se hace esta parte del html y el body para que sea mas facil de manpular el rem siendo que ahora q rem es 10 px */
/* es mejor usar rem ya que se ajusta al documento desde donde se este viendo */
html {
    font-size: 62.5%;
    /* esto es para el boxmodel para que el padding ya no afecte el tamaño del elemento */
    box-sizing: border-box;
    scroll-snap-type: y mandatory; /* esto hace que al hacer scroll se mueva solo en el eje y */
}

/* Scroll snap*/

.servicios,
.navegacionPrincipal,
.formulario {
    scroll-snap-align: center;/* para que se alinie siempre en el centro cuando pasa por esta seccion y se le da scroll */
    scroll-snap-stop: always;/* para que siempre pare cuando hace scroll en esta seccion */
}

/* Complemento para el boxmodel para ponerle a todo el boxmodel */
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-size: 16px; /* 1 rem = 10 px */
    font-family: 'Krub', sans-serif;
    background-image: linear-gradient(to top, var(--grisclaro) 0%, var(--blanco) 100%);/* para hacer el degradado de la pagina web */
}
.contenedor {
    /* se le dice a la barra de navegacion que tome 120 rem que es toda la pantalla que tiene dispuesta pero como */
    /* se le quiere cambiar el valor para cuando el sitio se quiera ver desde otra plataflorma que no sera 120 rem */
    /* se le pone max al principio para que tome ese valor como maximo y se valla adaptando si no es el maximo asi no se */
    /* corren los textos */
    max-width: 120rem;
    margin: 0 auto 0 auto; 
}
.botoncito {
    background-color: var(--secundario);
    /* Cambiar el color del texto */
    color: var(--blanco);
    /* padding para que tenga mas espacio en cada lado */
    padding: 1rem 3rem;
    /* para separarlo con el elemento de arriba */
    margin-top: 1rem;
    font-size: 1.5rem;
    text-decoration: none;
    /* es para hacer el texto en mayuscula */
    text-transform: uppercase;
    font-weight: bold;
    /* para redondear los botones */
    border-radius: 0.5rem;
    /* para que el boton ocupe el 90 porciento del espacio */
    width: 90%;
    text-align: center;
    border: none;
}
.botoncito:hover {
    cursor: pointer; /* es para que al pasar sobre un boton salga una mano referenciando que es boton */
}
@media (min-width: 768px) {
    .botoncito{
        /* para que se reinicie a su tamaño normal */
        width: auto;
    }
}
.sombra{
    box-shadow: 1px 1px 15px 0px rgba(102,102,102,0.50);/* esta sombra fue sacada de https://www.cssmatic.com/box-shadow */
    background-color: var(--blanco); /* es para darle el color de fondo a main*/
    padding: 2rem;/* para separar un poco la margen interna en todas las direcciones */
    margin-top: 2rem; /* para darle una distancia de la margen externa de la figura de arriba con el main */
}

/* Tipografia */

h1 {
    font-size: 3rem;
}
h2 {
    font-size: 2.1rem;
}
h3{
    font-size: 1.5rem;
}
h1, h2, h3 {
    text-align: center;
}

/* Utilidades */

.w-100 {/* es un modificador */
    width: 100%; /* quiere decir que requiere todo lo del boton pero si tiene la clase de enviar tome el ancho de 100% */
}
@media (min-width: 768px) {
    .w-100 {
        width: auto;/**/
    }
}
.flex {
    display: flex;
}
.alinear-derecha {
    justify-content: flex-end;
}


/* Titulos */

.titulo a {
    font-size: 1.5rem;
}

/* Navegacion principal */

.barraNavegacion {
    /* como esta en el div abarca todo el ancho de la pagina no se le restringe */
    background-color: var(--secundario);  
     
}
.navegacionPrincipal { 
    /* Para definir que va a trabajar con flexbox*/
    display: flex;
    /* esto es para que la navegacion se muestre en columnas*/
    flex-direction: column;
}
@media (min-width: 768px) {
    .navegacionPrincipal { 
        /*aqui se le dice que si es mayor de 780px debe volver a la direccion flex por defecto row */
        flex-direction: row;
        justify-content: space-between;
    }
}
.navegacionPrincipal a{
    display: block;
    text-align: center;
    color: var(--blanco);
    /* para quitarle la linea debajo del texto */
    text-decoration: none;
    /* Se le aumenta un poco el tamaño */
    font-size: 1.5rem; 
    /* para hacerlo un poco mas grueso el texto es con font-weight: ; */
    font-weight: bold;
    padding: 1rem 1rem 1rem 1rem;
}
/* :hover es para cuando el mouse pasa por encima */
.navegacionPrincipal a:hover{
    /* Background es color de fondo */
    background-color: var(--primario);
    color: var(--oscuro);
}
.imagen{
    /* para referenciar que la imagen va de fondo tambien se le pasa la ubicacion de la imagen que esta en una url */
    background-image: url(../imagenes/hero.jpg);
    /* para que no se repita la imagen */
    background-repeat: no-repeat;
    /* Para darle el tamaño a una imagen */
    background-size: cover;
    /* esto le da el tamaño casi no funciona por esto */
    height: 45rem;
    /* se le pone posicion relative porque es el padre */
    position: relative;
}
.contenidoImagen{
    /* se le pone posicion absolute porque es el hijo y al que se quiere ubicar */
    position: absolute;
    /* los 3 primeros valores son para el color el ultimo es para la transparencia va de 1 a 0 */
    background-color: rgba(0, 0, 0, 0.7);
    /* son cordenadas para que tome todo */
    /*bottom: 0;
    top: 0;
    left: 0;
    right: 0;*/
    /*para que tome todo el campo pero como tiene padding lo afecta y no toma todo pero se quito el padding */ 
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* para alinear columnas es con align-items: ; */
    /* se usan los dos para alinear horizontal y verticalmente*/
    align-items: center;
    justify-content: center;
}
.contenidoImagen h2, .contenidoImagen p {
    color: var(--blanco);
}
.contenidoImagen .ubicacion {
    /* para ir alineando se pone un display flex*/
    display: flex;
    /* para alinear hacia abajo en horizontal */
    align-items: flex-end;
}

/*Servicios*/

@media (min-width: 768px) {
    .servicios {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;/* 1fr es una fraccion donde una columna toma una fraccion de todo el espacio va sin comas */
        column-gap: 1rem;
        text-align: center;
    }
}
.fondoIcono {
    display: flex;
    flex-direction: column;
    align-items: center;/* para alinear horizontalmente */
}
.fondoIcono h3 {
    color: var(--secundario);
    font-weight: normal;/* es igual a 400 */
}
.fondoIcono p {
    line-height: 2;
    text-align: center;
}
.fondoIcono .iconos{
    height: 15rem;/* height es la altura */
    width: 15rem;/* width es la anchura */
    background-color: var(--primario);/* es el color de fondo */
    border-radius: 50%;/* para hacerlo circular ya que un cuadrado con bordes de 50% es un circulo */
    display: flex;
    justify-content: space-evenly;/* esto es para centrarlos tanto vertical como horizontalmente con flexbox */
    align-items: center;
}

/* Contacto */
.formulario {
    background-color: var(--gris);
    width: min(60rem, 100%); /* min compara dos valores y escoge el mas pequeño asi ya no se tiene que adaptar la pantalla para telefono */
    margin: 0 auto;/* es para que centre el formulario */
    padding: 3rem;
}
.formulario fieldset {
    border: none;
}
.formulario legend {
    text-align: center;
    font-size: 1.8rem;
    text-transform: uppercase;/* para volver mayuscula el texto */
    font-weight: 700;/* es para el tamaño de la fuente que sea bold */
    margin-bottom: 2rem;
    color: var(--primario);
}
@media (min-width: 768px) {
    .contenedorCampos {
        display: grid;
        grid-template-columns: 50% 50%; /* aca se le dice que le de el 50% a dos columnas */ 
        grid-template-rows: auto auto 20rem;/* la ultima es de 20rem porque el textarea es de 20rem height */
        column-gap: 1rem; /* para separar las columnas */
    }   
    .campos:nth-child(3), .campos:nth-child(4) { /* se selecciona la 3 clase con el nombre campo para separarla en una columna sola */ 
        grid-column: 1 / 3;/* para que valla de la columna 1 a la 3 para que asi ocupe todo el espacio y quede solo el correo en una fila*/
    }
}
.campos {
    margin-bottom: 1rem;
}
.campos label {/* label es el titulo o nombre de la entrada de texto que se ingresara */
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;/* sirve para que cada label tome todo el espacio disponible */
}
.campos textarea {
    height: 20rem; 
}
.inputEstilos {
    width: 100%; /* para que coja todo el espacio disponible */ 
    border: none;
    padding: 1.5rem;
    border-radius: 0.5rem;/* para darle esquinas redondeadas */
}

/* Pie de pagina */

.piePagina {
    text-align: center;
}