/*Importación de la fuente Dosis*/
@font-face {
    font-family: Dosis;
    src: url("../fuentes/Dosis-VariableFont_wght.ttf");
}
/*Importación de la fuente Dosis en bold*/
@font-face {
    font-family: Dosis;
    src: url("../fuentes/Dosis-VariableFont_wght.ttf");
    font-weight: bold;
}
/* Importación de la fuento Poppins */
@font-face {
    font-family: Poppins;
    src: url("../fuentes/Poppins-Regular.ttf");
}
/*Eliminamos el padding y margen que hay por defecto */
body {
    margin: 0;
    padding: 0;
}
/* Definimos el tamaño y altura del bloque y la posición de los elementos centrados dentro él */
header>div:last-of-type{
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos el ancho, altura, posición, la adapatamos a su sección padre y le damos un tono gris a la imagen */
header>div:last-of-type>img{
    width: 100%;
    height: 20rem;
    object-fit: cover;   
    position: absolute;
    z-index: 0;
    filter: grayscale(60%);
}
/* Los textos están centrados y de color blanco en la sección*/
header>div:last-of-type>section{
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}
/* Tamaño, fuente y grosor del título principal, sin margen  */
header>div:last-of-type>section>h1{
    font-family: Dosis;
    font-size: 50px;
    font-weight: 100;
    margin: 0;
}
/* Tamaño y fuente del parrafo */
header>div:last-of-type>section>p, main>section>div>article p{
    font-family: Poppins;
    font-size: 15px;
}
/* Los elementos dentro de estos bloque estarán centrados*/
main, main>section{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos el ancho y color de la sección */
main{
    background-color: #F0F5E0;
    width: 100%;
}
/* La sección tiene un pequeño margen superior y los elementos dentro de ella no son obligados a permanecer en la misma línea  */
main>section{
    margin-top: 3rem;
    flex-wrap: wrap;
}
/* Definimos la fuente, tamaño, grosor, ancho, color y posición del título de la información principal, eliminamos el margen por defecto */
main>section>h2{
    font-family: Dosis;
    font-size: 22px;
    font-weight: bold;
    color: #E9A219;
    text-align: center;
    width: 100%;
    margin: 0;
}
/* Definimos el ancho del bloque de la información de contacto y le añadimos un pequeño margen y posicionamos cada elemento en el centro y mediante una columna*/
main>section>div{
    width: 100%;
    margin: 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* Centramos los textos y damos margen en la parte inferior y superior del artículo*/
main>section>div>article{
    text-align: center;
    margin: 1rem 0;
}
/* Definimos la fuente, tamaño, grosor y color del título, con un pequeño margen superior e inferior */
main>section>div>article h3{
    font-family: Dosis;
    font-size: 20px;
    font-weight: bold;
    color: #5D6B20;
    margin: 20px 0;
}
/* ancho y margen de los lados de los iconos */
main>section>div article img{
    width: 30px;
    margin: 0 10px;
}
/* Eliminamos el estilo por defecto del enlace */
main>section>div article a{
    text-decoration: none;
}
/* La imagen toma una tonalidad sepia al pasar el ratón por encima y el puntero toma forma de mano para indicar que se puede clicar en él*/
main>section>div article a>img:hover{
    cursor: pointer;
    filter: sepia(20);
}
/* Al hacer click en el icono se vuelve blanco */
main>section>div article a>img:active{
    filter: brightness(15);
}
/* Centramos horizontalmente los iconos con la información los elementos que contiene el bloque */
main>section>div>article:first-of-type>div>div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/* Definimos el alto y ancho del cuadro de GoogleMaps y le añadimos un pequeño borde */
main>section>div>article:nth-child(3)>div>iframe{
    width: 100%;
    height: 20rem;
    border: 1px solid #353535;
}
/* Clase que define el margen inferior, el color del texto, el radio y color del borde, en las areas de texto del formulario */
.borde{
    margin-bottom: 1rem;
    color: #353535;
    border-radius: 5px;
    border: 1px solid #353535;
}
/* Clase que define el ancho y la altura en las areas de texto del "nombre" y "correo electrónico" */
.anchoLargo{
    width: 70%;
    height: 32px;
}
/* Definimos el ancho y le añadimos un borde al area de texto */
main>section>div>article:nth-child(4)>form>div>textarea{
    border: 1px solid #353535;
    width: 80%;
}
/*Se define el ancho y la altura de los botones con bordes redondeados en color verde, el tamaño de letra y tipo de fuente con grosor, además al pasar el ratón por encima cambia el puntero a tener forma de mano, para indicar que se puede clicar*/
main>section>div>article:nth-child(4)>form>div:last-of-type>input, main>section>div>article:nth-child(4)>form>div:last-of-type>button{
    height: 3rem;
    width: 6rem;
    font-family: Dosis;
    font-size: 18px;
    border: 2px solid #5D6B20;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
}
/* En este botón el fondo es transparente y la letra color verde */
main>section>div>article:nth-child(4)>form>div:last-of-type>input{
    background-color: transparent;
    color: #5D6B20;
}
/* En este botón el fondo es verde y la letra anaranjada */
main>section>div>article:nth-child(4)>form>div:last-of-type>button{
    background-color: #5D6B20;
    color: #F0F5E0;
}
/* Definimos la fuente y tamaño del texto, la ponemos en cursiva, le damos un color grisaceo, le damos un ancho y la ubicamos en el centro */
p#cita{
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    max-width: 22rem;
    width: 100%;
    margin: 2rem auto;
    color: #847964;
    font-size: 16px;
}
/* Definimos el ancho para el salto de línea*/
#cita>br{
    display: block;
    margin: 1rem;
    content: "";
}
/* Este será el estilo de comillas de la cita */
q{
    quotes: "“" "”";
}
/* DISPOSITIVO TABLET */
@media (min-width: 767px) and (max-width: 1023px){
    /* Definimos la altura*/
    header>div:last-of-type, header>div:last-of-type>img{
        height: 30rem;
    }
    /* Tamaño del título principal */
    header>div:last-of-type>section>h1{
        font-size: 65px;
    }
    /* Tamaño del parrafo */
    header>div:last-of-type>section>p{
        font-size: 18px;
    }
    /* Definimos el margen superior de la sección*/
    main>section{
        margin-top: 3rem;
    }
    /* Definimos el tamaño del encabezado */
    main>section>h2{
        font-size: 26px;
    }
    /* Definimos el tamaño del encabezado */
    main>section>div>article h3{
        font-size: 22px;
    }
    /* Tamaño de la letra del texto */
    main>section>div>article p{
        font-size: 16px;
    }
    /* Posicionamos cada elemento dentro del bloque mediante el grid en 3 columnas y 3 lineas, dejando un epqueño margen entre columnas */
    main>section>div{
        display: grid;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
        grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3];
        align-items: initial;
        flex-direction: initial;
        column-gap: 1rem;
    }
    /* Los elementos empiezan a la izquierda */
    main>section>div>article{
        text-align: initial;
    }
    /* Tamaño y margen de los iconos */
    main>section>div article img{
        margin: 0 20px 0 0;
    }
    /* Se define la posición del bloque "Contáctanos" en el grid: primera columna y primera fila*/
    main>section>div>article:first-of-type{
        grid-column: x0 / x1;
        grid-row: y0 / y1;
    }
    /* Se define la posición del bloque "Síguenos en nuestras redes sociales" en el grid: segunda columna y primera fila*/
    main>section>div>article:nth-child(2){
        grid-column: x1 / x2;
        grid-row: y0 / y1;
        text-align: center;
    }
    /* Se define la posición del bloque "Estamos aquí" en el grid: última columna, ocupando las 3 filas*/
    main>section>div>article:nth-child(3){
        grid-column: x2 / x3;
        grid-row: y0 / y3;
    }
    /* Se define la posición del bloque "Envíanos un mensaje" en el grid: Ocupa la s 2 primeras columnas y las 2 últimas filas*/
    main>section>div>article:nth-child(4){
        grid-column: x0 / x2;
        grid-row: y1 / y3;
    }
    /* Definimos el alto y ancho del cuadro de GoogleMaps y le añadimos un pequeño borde */
    main>section>div>article:nth-child(3)>div>iframe{
        width: 100%;
        height: 34rem;
    }
    /* Clase que define el ancho en las areas de texto del "nombre" y "correo electrónico" */
    .anchoLargo{
        width: 20rem;
    }
    /* Ancho máximo y tamaño de la letra de la cita */
    p#cita{
        max-width: 40rem;
        font-size: 17px;
    } 
}
/* ORDENADOR */
@media (min-width: 1024px) {
    /* Definimos la altura de los elementos*/
    header>div:last-of-type, header>div:last-of-type>img{
        height: 40rem;
    }
    /* Tamaño del título principal */
    header>div:last-of-type>section>h1{
        font-size: 80px;
    }
    /* Tamaño del parrafo */
    header>div:last-of-type>section>p{
        font-size: 20px;
    }
    /* Definimos el margen superior de la sección*/
    main>section{
        margin-top: 3rem;
    }
    /* Definimos el tamaño del encabezado */
    main>section>h2{
        font-size: 28px;
    }
    /* Definimos el tamaño del encabezado */
    main>section>div>article h3{
        font-size: 24px;
    }
    /* Tamaño de la letra del texto */
    main>section>div>article p{
    font-size: 17px;
    }
    /* Posicionamos cada elemento dentro del bloque mediante el grid en 3 columnas y 3 lineas, dejando un epqueño margen entre columnas */
    main>section>div{
        display: grid;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
        grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3];
        align-items: initial;
        flex-direction: initial;
        column-gap: 1rem;
    }
    /* Los elementos empiezan a la izquierda */
    main>section>div>article{
        text-align: initial;
    }
    /* margen de los iconos en la derecha */
    main>section>div article img{
        margin: 0 20px 0 0;
    }
    /* Se define la posición del bloque "Contáctanos" en el grid: primera columna y primera fila*/
    main>section>div>article:first-of-type{
        grid-column: x0 / x1;
        grid-row: y0 / y1;
    }
    /* Se define la posición del bloque "Síguenos en nuestras redes sociales" en el grid: segunda columna y primera fila*/
    main>section>div>article:nth-child(2){
        grid-column: x1 / x2;
        grid-row: y0 / y1;
        text-align: center;
    }
    /* Se define la posición del bloque "Estamos aquí" en el grid: última columna, ocupando las 3 filas*/
    main>section>div>article:nth-child(3){
        grid-column: x2 / x3;
        grid-row: y0 / y3;
    }
    /* Se define la posición del bloque "Envíanos un mensaje" en el grid: Ocupa la s 2 primeras columnas y las 2 últimas filas*/
    main>section>div>article:nth-child(4){
        grid-column: x0 / x2;
        grid-row: y1 / y3;
    }
    /* Definimos el alto y ancho del cuadro de GoogleMaps y le añadimos un pequeño borde */
    main>section>div>article:nth-child(3)>div>iframe{
        width: 100%;
        height: 34rem;
    }
    /* Clase que define el ancho en las areas de texto del "nombre" y "correo electrónico" */
    .anchoLargo{
        width: 20rem;
    }
    /* El color de la letra y del fondo del botón cambia en un lapso de tiempo cuando pasamos el ratón por encima de este botón */
    main>section>div>article:nth-child(4)>form>div:last-of-type>input:hover{
    background-color: #5D6B20;
    color: #F0F5E0;
    transition: all 0.5s;
    }
    /* El color de la letra cambia cuando hacemos click en los botones*/
    main>section>div>article:nth-child(4)>form>div:last-of-type>input:active, main>section>div>article:nth-child(4)>form>div:last-of-type>button:active{
    color: #F0F5E0;
    transition: none;
    }
    /* El color del fondo y del borde del botón cambia cuando pasamos hacemos click */
    main>section>div>article:nth-child(4)>form>div:last-of-type>input:active{
        background-color: red;
        border: 2px solid red;
    }
    /* El color del fondo y del borde del botón cambia cuando pasamos hacemos click */
    main>section>div>article:nth-child(4)>form>div:last-of-type>button:active{
        background-color: #E9A219;
        border: 2px solid #E9A219;
    }
    /* Definimos el tamaño del texto, le damos un ancho máximo y le damos un pequeños margen superior e inferior */
    p#cita{
        max-width: 50rem;
        font-size: 20px;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}