/*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");
}
/*Quitar el padding y el margin que viene por defecto en el body*/
body{
    margin: 0;
    padding: 0;
}
/* Definimos el ancho y altura de los elementos */
header>div:last-of-type, header>div:last-of-type>img{
    width: 100%;
    height: 20rem;
}
/* Los elementos dentro del bloque están centrados */
header>div:last-of-type{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos la posición, la adaptamos a su sección padre y le damos un tono gris a la imagen */
header>div:last-of-type>img{
    object-fit: cover;   
    position: absolute;
    z-index: 0;
    filter: grayscale(60%);
}
/* Los textos están centrados y de color blanco en la sección de la información principal*/
header>div:last-of-type>section{
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
}
/* Tamaño, fuente y grosor del título principal */
header>div:last-of-type>section>h1{
    font-family: Dosis;
    font-size: 50px;
    font-weight: 100;
    margin: 0;
}
/* La primera sección tiene un ancho completo en cuanto a la pantalla, los elementos que contiene estarán centrados, así como el texto*/
#seccionFormularioAdopcion1{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* Definimos la fuente, tamaño, color y ancho máxima del párrafo, dándole un pequeño relleno*/
#seccionFormularioAdopcion1 p{
    font-family: Poppins;
    font-size: 12px;
    color: #353535;
    padding: 2rem 1rem;
    max-width: 30rem;
}
/* El ancho completo, los elementos dentro están centrados verticalmente */
#seccionFormularioAdopcion2, #seccionFormularioAdopcion2 form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Definimos el ancho principal y el ancho máximo y el color del bloque principal,  añadimos un pequeño relleno superior e inferior también redondeamos sus esquinas */
#seccionFormularioAdopcion2>main{
    background-color: #F0F5E0;
    max-width: 30rem;
    width: 100%;
    border-radius: 40px;
    padding: 2rem 0;
}
/* Eliminamos el borde y relleno del grupo de campos y le damos un pequeño margen superior e inferior */
#seccionFormularioAdopcion2 form>fieldset{
    border: none;
    padding: 0;
    margin: 1rem 0;
}
/* Fuente, grosor, tamaño y color de la leyenda, que se encuentra centrada y con un pequeño margen inferior */
#seccionFormularioAdopcion2 form>fieldset>legend{
    font-family: Dosis;
    font-size: 20px;
    font-weight: bold;
    color: #5D6B20;
    margin-bottom: 2rem;
    text-align: center;
}
/* Este bloque tiene un pequeño margen inferior */
#seccionFormularioAdopcion2 form>fieldset>div{
    margin-bottom: 1rem;
}
/* Fuente, grosor, tamaño y color del texto*/
#seccionFormularioAdopcion2 form>fieldset>div>:first-child{
    font-family: Dosis;
    font-size: 16px;
    font-weight: bold;
    color: #353535;
}
/* Altura y anchura completa en el area de texto */
#seccionFormularioAdopcion2 form>fieldset>div>textarea{
    width: 100%;
    height: 8rem;
}
/* Ancho completo con un pequeño relleno en el tercer grupo de campos */
#seccionFormularioAdopcion2 form>fieldset:nth-child(3){
   width: 100%;
   padding: 1rem;
   box-sizing: border-box;
}
/* Clase que atribuye la fuente Poppins, un tamaño y color para el texto */
.opciones{
    font-family: Poppins;
    font-size: 12px;
    color: #353535;
}
/* Clase que atribuye una altura de 32 px, un pequeño margen inferior, un borde redondeado y color marrón en el texto y borde */
.recuadro{
    height: 32px;
    margin-bottom: 1rem;
    color: #353535;
    border-radius: 5px;
    border: 1px solid #353535;
}
/* Clase que atribuye un ancho de 17rem */
.anchoRem{
    width: 17rem;
}
/*Un pequeño relleno en el bloque */
#seccionFormularioAdopcion2 form>div:first-of-type{
    padding: 1rem;
}
/*Los botones dentro del bloque están centrados, con un pequeño espaciado y un pequeño margen superior e inferior*/
#seccionFormularioAdopcion2 form>div:last-child{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin: 1rem 0;
}
/*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*/
#seccionFormularioAdopcion2 form>div>input, #seccionFormularioAdopcion2 form>div>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 */
#seccionFormularioAdopcion2 form>div>input{
    background-color: transparent;
    color: #5D6B20;
}
/* En este botón el fondo es verde y la letra anaranjada */
#seccionFormularioAdopcion2 form>div>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: "";
}
/* éste será el estilo de comillas de la cita */
q{
    quotes: "“" "”";
}
/* DISPOSITIVO TABLET */
@media (min-width: 767px) and (max-width: 1023px){
    /* Definimos la altura de los lementos*/
    header>div:last-of-type, header>div:last-of-type>img{
        height: 30rem;
    }
    /* Tamaño de la letra del título principal */
    header>div:last-of-type>section>h1{
        font-size: 65px;
    }
    /* Tamaño de letra */
    .opciones, #seccionFormularioAdopcion1 p{
        font-size: 13px;
    }
    /* Tamaño máximo de los elementos */
    #seccionFormularioAdopcion1 p, #seccionFormularioAdopcion2>main{
        max-width: 50rem;
    }
    /* /* Tamaño de letra del texto */ */
    #seccionFormularioAdopcion2 form>fieldset>legend{
        font-size: 21px;
    }
    /* Usando el Grid (cuadrícula) le damos 2 columnas y un espaciado entre ellas */
    #seccionFormularioAdopcion2 form>fieldset:first-child, #seccionFormularioAdopcion2 form>fieldset:nth-child(2){
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }
    /* Añadimos 2 filas a la cuadrícula */
    #seccionFormularioAdopcion2 form>fieldset:first-child{
        grid-template-rows: 1fr 1fr;
    }
    /* Ancho máximo del grupo de campos */
    #seccionFormularioAdopcion2 form>fieldset:nth-child(3){
        max-width: 35rem;
    }
    /* Tamaño de letra del texto */
    #seccionFormularioAdopcion2 form>fieldset>div>:first-child{
        font-size: 17px;
    }
    /*Ancho máximo del contenedor*/
    #seccionFormularioAdopcion2 form>div:last-child{
        max-width: 15rem;
    }
     /* 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 de la letra del título principal */
    header>div:last-of-type>section>h1{
        font-size: 80px;
    }
    /* Tamaño de letra */
    .opciones, #seccionFormularioAdopcion1 p{
        font-size: 14px;
    }
    /* Tamaño máximo de los elementos*/
    #seccionFormularioAdopcion1 p, #seccionFormularioAdopcion2>main{
        max-width: 60rem;
    }
    /* /* Tamaño de letra del texto */ 
    #seccionFormularioAdopcion2 form>fieldset>legend{
        font-size: 22px;
    }
    /* Usando el Grid (cuadrícula) le damos 2 columnas y un espaciado entre ellas */
    #seccionFormularioAdopcion2 form>fieldset:first-child, #seccionFormularioAdopcion2 form>fieldset:nth-child(2){
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
    }
    /* Añadimos 2 filas a la cuadrícula */
    #seccionFormularioAdopcion2 form>fieldset:first-child{
        grid-template-rows: 1fr 1fr;
    }
    /* Ancho máximo del grupo de campos */
    #seccionFormularioAdopcion2 form>fieldset:nth-child(3){
        max-width: 37rem;
    }
    /* Tamaño de letra del texto */
    #seccionFormularioAdopcion2 form>fieldset>div>:first-child{
        font-size: 18px;
    }
    /*Ancho máximo del contenedor*/
    #seccionFormularioAdopcion2 form>div:last-child{
        max-width: 15rem;
    }
    /* El color de la letra y del fondo del botón cambia en un lapso de tiempo cuando pasamos el ratón por encima */
    #seccionFormularioAdopcion2 form>div>input:hover{
        background-color: #5D6B20;
        color: #F0F5E0;
        transition: all 0.5s;
    }
     /* El color de la letra cambia cuando hacemos click en los botones*/
     #seccionFormularioAdopcion2 form>div>input:active, #seccionFormularioAdopcion2 form>div>button:active{
        color: #F0F5E0;
        transition: none;
    }
    /* El color del fondo y del borde del botón cambia cuando pasamos hacemos click */
    #seccionFormularioAdopcion2 form>div>input:active{
        background-color: red;
        border: 2px solid red;
    }
    /* El color del fondo y del borde del botón cambia cuando pasamos hacemos click */
    #seccionFormularioAdopcion2 form>div>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ño margen superior e inferior */
    p#cita{
        max-width: 50rem;
        font-size: 20px;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}