/*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 fuente IndieFlower*/
@font-face {
    font-family: IndieFlower;
    src: url("../fuentes/IndieFlower-Regular.ttf");
}
/*Importación de la fuente 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; 
    overflow-x: hidden;
}
/* Definimos el ancho y altura del bloque y la posición de los elementos centrados dentro del mismo */
header>div:last-of-type {
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;  
}
/* Definimos el ancho, altura, posición (al fondo), la adaptamos 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(80%);
}
/* Los textos que contiene la sección están centrados y de color blanco*/
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 párrafo */
header>div:last-of-type p{
    font-family: Poppins;
    font-size: 15px;
}
/* Hacemos la primera sección para que ocupe el 100% de la página  y centran su contenido vertical y horizontalmente */
#seccionAdopcion1{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Contenedor  de ambos textos, se le asigna el ancho y la alineación del texto, añadimos un pequeño relleno */
#seccionAdopcion1>div{
    width: 30rem;
    text-align: center;
    padding: 1rem;
}
/* Asignamos al h2 la fuente Dosis, tamaño de fuente y la ponemos en negrita y con otro color */
#seccionAdopcion1>div>h2{
    font-family: Dosis;
    font-size: 22px;
    color: #A3BD31;
} 
/* Asignamos al texto la fuente Poppins, tamaño de fuente, margen vertical, quitamos el padding y cambiamos el calor */
#seccionAdopcion1>div>p{
    font-family: Poppins;
    font-size: 13px;
    margin: 2rem 0;
    padding: 0;
    color: #353535;
}
/* Definimos el color y grosor del enlace y eliminamos su estilo por defecto */
#seccionAdopcion1>div>p>a{
    color: #E9A219;
    font-weight: 600;
    text-decoration: none;
}
/* Segunda sección del body. Forzmos a que tenga cierta altura y ancho. Ponemos el contenedor como flex en columna, pegando los elementos arriba verticalmente y centrado horizzontalmente. También cambiamos el color de fondo. */
#seccionAdopcion2{
    width: 100%;
    height: auto; 
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center; 
    background-color: #F0F5E0;
}
/* Dejammos el filtro sin que se muestre. Le cambiamos el box-sizing para evitar un overflow, le asignamos el color de fondo, ancho, sombra y relleno. */
#seccionAdopcion2>aside{
    display: none; 
    background-color: #A3BD31;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%; 
    box-shadow: 10px 10px 5px 0px #00000055;
    
}
/* Cambiamos el título del filtro. Cambiamos la fuente a Dosis, el tamaño de la fuente, la ponemos en negrita y de color blanco sin margen ni relleno centrada horizontalmente. */
#seccionAdopcion2>aside>h3{
    font-size: 24px;
    font-family: Dosis;
    color: white;
    text-align: center;
    padding: 0;
    margin: 0;
}
/* Título para cada uno de los filtros. Cambiamos la fuente a Dosis, el tamaño de la fuente, la ponemos en negrita y de color blanco, le asignamos un margey y la dejamos centrada horizontalmente.  */
#seccionAdopcion2>aside>h4{
    font-family: Dosis;
    font-size: 22px; 
    color: #5D6B20;
    margin: 0 0 7px 0;
}
/* Css para todos los selectores del filtro, le asignamos altura y anchura, margen hacia abajo, borde y redondeamos un poco el borde */
#seccionAdopcion2>aside select{
    height: 35px;
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid #353535;
    border-radius: 5px;
}
/* Solo se amplica a los selectores de edadMinima y edad máxima. Le cambiamos el ancho para que quepen dos en la pantalla.  */
#seccionAdopcion2>aside>div>select{
    width: 49%; 
}
/* Cambiamos la fuente de las opciones a Poppins, su tamaño de fuente y su color. */
#seccionAdopcion2>aside select>option{
    font-family: Poppins;
    font-size: 15px;
    color: #353535;
} 
/* Esta clase la usaremos en JavaScript para mostrar el filtrado o no. Se pone en bloque, con opacidad al máximo y visible */
#seccionAdopcion2>aside.showAdopcion{
    display: block;
    opacity: 1;
    visibility: visible; 
}
/* Dejamos  la sección de avesAdopcion con un ancho y altura, luego se pisarán con el js */
section#AvesAdopcion{
    max-width: 55rem;
    height: 70rem;
} 
/* Dejamos el contenedor en absolute, pegado a la izquierda y ocupando todo el ancho disponible. También le asingamos un margen vertical y le cambiamos el ejez para que esté al frente , por último la hacemos flex y centrada horizontalmente */
section#AvesAdopcion>div:first-of-type{
    position: absolute;
    left: 0px;
    width: 100vw;
    margin-top: 45px;
    z-index: 25;
    display: flex;
    justify-content: center;

}
/* Titulo del sectionm AveAdopcion, centramos el texto horizontalmente y le cambiamos la fuente a IndieFlower, le cambiamos la fuente, el color, el color de fondo, el relleno, la sombra y lo inclinamos a la izquierda */
section#AvesAdopcion>div>h3{
    text-align: center;
    font-family: IndieFlower;
    font-size: 25px;
    color: white;
    background-color: #5D6B20;
    padding: 10px;
    box-shadow: 10px 10px 5px 0px #00000055;
    transform: rotate(-2.5deg);
}
/* Imagen de fondo, se pone en absoluta, pegada a la izquierda, ocupando todo el ancho y poniendolo en modo cover. Adicionalmente le ponemos un filtro para un mayor brillo. */
section#AvesAdopcion>img{
    position: absolute;
    object-fit: cover;
    left: 0px;
    width: 100%;
    height: 70rem;
    filter: brightness(150%);
}
/* Css para todas las fotitos de las aves, se le asigna ancho, altura, color de fondo, se le pone el cursor como si fuese un botóin y le ponemos sombra. */
section#AvesAdopcion>div>article {
    width: 8rem;
    height: 11rem;
    background-color: white;
    cursor: pointer;
    box-shadow: 10px 10px 5px 0px #00000055;
}
/* contenedor que tiene la imagen en cada fichita de las aves, se le asigna anchura, altura y margen. */
section#AvesAdopcion>div>article>div{
    width: 7rem;
    height: 7rem;
    margin: 8px auto;
}
/* Imagen dentro del contenedor antes mencionado. Se pone para que cubra todo y con el 100% de ancho y altura. */
section#AvesAdopcion>div>article>div>img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* Los que tengan esta clase los rotamos a la izquierda */
section#AvesAdopcion>div>article.left {
    transform: rotate(2.5deg);
}
/* Al poner el ratón encima lo centramos */
section#AvesAdopcion>div>article.left:hover {
    transform: rotate(0deg);
}
/* Los que tengan esta clase los rotamos a la derecha */
section#AvesAdopcion>div>article.right {
    transform: rotate(-2.5deg);
}
/* Al poner el ratón encima lo centramos */
section#AvesAdopcion>div>article.right:hover {
    transform: rotate(0deg);
}
/* Texto dentro cada articulo. Centramos el texto, le ponemos márgenes, fuente y tamaño de fuente */
section#AvesAdopcion p{
    text-align: center;
    margin-top: 14px;
    margin-bottom: 14px;
    font-family: IndieFlower;
    font-size: 20px;
} 
/* Cogemos el enlace, le cambiamos el ejez, su ancho, fuente, lo alineamos al centro, le cambiamos el tama de fuente, lo redondeamos, le cambiamos el color, el color de fondo, le quitamos el borde y le añadimos márgenes y la sombra*/
a#botonFiltrar{ 
    width: 10rem;
    font-family: Dosis;
    text-align: center;
    border-radius: 40px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    cursor: pointer; 
    background-color: #5D6B20;
    padding: 10px;
    margin-bottom: 2rem;
    margin-top: 2rem;
    box-shadow: 10px 10px 5px 0px #00000055; 
}
/* Para los divs padres de los botones, la dejamos circular, asignamos ancho y alto, le ponemos margen, lo ponemos borde y alineamos su contenido central vertical y horizontalmente */
#AveDetallada>div:first-of-type,#AveDetallada>div:last-of-type{
    aspect-ratio: 1;
    width: 50px;
    height: 50px;
    margin: 0.5rem;
    border-radius: 50%; 
    border: 2px solid #FFFFFFFF; 
    display: none;
    justify-content: center;
    align-items: center;
}
/* Iconos de avance y atrás solo visibles en pc, cambiamos el tamaño de la fuente y lo centramos */
button#AtrasAveDetallada, button#SiguienteAveDetallada{
    font-size: xx-large;
    color: #FFFFFF;
    border:none;
    box-shadow: none;
    background-color: #00000000;
    text-align: center;
}
/* Creamos el div para contener los artículos. Lo dejamos en grid con 2 columnas, centramos los elementos vertical y horizontalmente, le añadimos borde, y la dejamos con la posición absoluta sobrepasando la imagen de fondo , asignandole sombra, ancho y lo pegamos a la izquierda. Por último, le añadimos hueco tanto entre columnas como entre filas.*/
section#AvesAdopcion>div:last-of-type{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    border: 15px solid #f1d5ac;
    box-shadow: 10px 10px 5px 0px #00000055;
    position: absolute;
    width: 100%; 
    left:0px;  
    grid-gap: 3px;
    min-height: 30rem;
    gap: 1rem;
    box-sizing: border-box;
    padding: 9rem 2rem 2rem 2rem; 
}
/* Definamos el espacio de la sección de la ficha. Por defecto no se muestra, ocupa toda la página con un gran ejez, dejandola pegajosa con position fixed, el color de fondo y centramos todo lo que contiene vertical y horizontalmente. Le añadimos un relleno en todas las direcciones. */
section#AveDetallada{
    display: none;
    width: 100%;
    height: 100%;
    z-index:  30;
    top: 0px;
    left: 0px;
    background-color: #00000077;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden; 
    position:fixed;
    padding: 1rem; 
}
/* Definimos la anchura máxima, anchura base de la sección, cuyas esquinas están redondeadas, tiene un color de fondo verde claro, una sombra y un pequeño relleno. Los elementos hijos están centrados vertical y horizontalmente. */
#ficha{
    width: 81vw;
    border-radius: 40px;
    background-color: #F0F5E0;
    box-shadow: 10px 10px 5px 0px #00000055;
    position: absolute;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    padding-top: 2rem; 
}
/* Tamaño y anchura completa */
#ficha>main, #foto>div>img{
    width: 100%;
    height: 100%;
}
/* botón para cerrar que se pone arriba a la derecha de la ficha. Para ello se alinea con la posición absoluta y le añadimos borde, lo redondeamos, le cambiamos el color de fondo y centramos su contenido. */ 
#ficha>button#SalirPantalla{
    position: absolute;
    z-index: auto;
    width: 3rem;
    height: 3rem;
    line-height: 2px;
    font-size: 20px;
    top: -15px; 
    right: -15px;
    border-radius: 50%;
    color: #353535;
    background-color: white;
    padding: auto;
    border: 2px solid #353535;
    display: flex;
    justify-content: center;
    align-items: center;  
}
/* Al texto de dentro del botón le quitamos el margen */
#ficha>button#SalirPantalla>p{
    margin: 0px;
}
/* Los elementos dentro del contendor principal están centrados */
#ficha>main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Definmos la fuentes y la letra será negrita */
#ficha>main>article>h2, #ficha>main>article dt, #ficha>main a{
    font-family: Dosis; 
}
/* Definimos el tamaño de fuente y el color de título eliminando el margen que viene por defecto */
#ficha>main>article>h2{
    font-size: 22px;
    color: #A3BD31;
    margin: 0;
}
/* Definimos en tamaño y color del término de la lista descriptiva, quitándole el estilo que tenía por defecto y añadiédole un pequeño margen superior */
#ficha>main>article dt{
    font-size: 20px;
    color: #E9A219;
    text-decoration: none;
    margin-top: 8px;
}
/* Definimos la fuente y el color */
#ficha>main>article dd, .textoFicha{
    font-family: Poppins;
    color: #353535;
}
/* Definimos el tamaño de la letra y eliminamos el margen por defecto del elemento descriptivo */
#ficha>main>article dd{
    font-size: 15px;
    margin: 0;
}
/* Definimos el tamaño de la letra */
.textoFicha{
    font-size: 12px;
}
/* Definimos la altura y ancho máximo, ancho base, margen y relleno, delimitándolo y predifiniendo una medida con el aspect-ratio. Además, al pasar el cursor por encima, éste se transformará en una mano, dando a entender que se puede hacer clcik en el elemento */
#foto{
    width: 100%;
    max-height: 26rem;
    max-width: 20rem;
    cursor: pointer;
    aspect-ratio: 1 / 1.4;
    padding: 1rem;
    box-sizing: border-box;
    margin: 0 auto;
}
/* Definimos la altura y ancho máximo, ancho base, margen y predifinimos una medida con el aspect-ratio*/
#foto>div{
    max-width: 16rem;
    max-height: 16rem;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}
/* La imagen cubre a su su elemento padre */
#foto>div>img{
    object-fit: cover;
}
/* Definimos la fuente, el tamaño del párrafo y lo centramos */
#foto>p{
    text-align: center;
    font-family: IndieFlower;
    font-size: 32px;
}
/* El fondo del artículo es verde clarito, tiene una compra y un pequeño margen superior */
#ficha>main>article{
    margin-bottom: 2rem;
    background-color: white;
    box-shadow: 10px 10px 5px 0px #00000055;
}
/* El texto está centrado */
#ficha>main>article:nth-child(2){
    text-align: center;
}
/* Mantenemos el tamaño de los artículos delimitádolo en el border-box, y añadimos un pequeño relleno */
#ficha>main>article:nth-child(2), #ficha>main>article:nth-child(3), #ficha>main>article:nth-child(4){
    padding: 1rem;
    box-sizing: border-box;
}
/* Definimos la altura, ancho, margen y color de fondo del botón. Eliminamos el borde y redondeamos las esquinas. Definimos el tamaño y color de letra y centramos el texto. Además, al pasar el cursor por encima, éste se transformará en una mano, señalando que se puede hacer clcik en el elemento */
#ficha>main a{
    background-color: #E9A219;
    position: relative;
    z-index: 40;
    height: 3rem;
    line-height: 3rem;
    width: 12rem;
    color: white;
    font-size: 20px;
    text-decoration: none;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    text-align: center;
    display: block;
    margin: 0 auto;
}
/* No la mostramos por defecto y al igual que la ficha, hacemos que ocupe toda la pantalla en fixed. La pegamos a la izquierda y hacia arriba y le ponemos el mimso sombreado. Le añadimos un ejez aún más grande */
section#sectorImgPantallaCompleta{
    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
    background-color: #00000077;
    z-index: 50;
}
/* Forzamos que la imagen mida el 100% */
section#sectorImgPantallaCompleta>img#imgPantallaCompleta{
    height: 100%;
}
/* Definimos la fuente y tamaño del texto, la ponemos en cursiva, le damos un color grisaceo, le damos un ancho y ancho máximo 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 de los lementos*/
    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;
    }
    /* Ahora dejamos el botón a la izquierda con un poco de margen */
    a#botonFiltrar{
        align-self: flex-start;
        margin-left: 20px;
        margin-bottom: 5px;
    }
    /* Ancho del contenedor */
    #seccionAdopcion1>div{
        width: 50rem;
    }
    /* Definimos el tamaño del texto */
    #seccionAdopcion1>div>h2{
        font-size: 26px;
    } 
    /* Definimos el tamaño del texto */
    #seccionAdopcion1>div>p{
        font-size: 14px;
    }
    /* Ahora el filtro se mostrará como grid, no como block */
    #seccionAdopcion2>aside.showAdopcion{
        display: grid;
    }
    /* Cambiamos las propiedades del filtro, ahora tendrá titulo, 5 filas y 3 columnas, solo le añadimos espaciado entre las columnas y le asignamos ancho, margen y le ponemos el otra vez el border-box para evitar overflows. */
    #seccionAdopcion2>aside#filtrosAvesAdopcion{
        background-color: #A3BD31;
        padding: 1rem;
        box-shadow: 10px 10px 5px 0px #00000055;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
        grid-template-rows: [y0] 3.5rem [y1] 1fr [y2] 1fr [y3] 1fr [y4] 1fr [y5];
        column-gap: 1rem;
        box-sizing: border-box;
        margin: 0 auto;
        margin-bottom: 1rem;
        width: 95%;
    }
    /* El titulo ocupará  la primera fila completa */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h3{
        grid-column: x0 / x3;
        grid-row: y0 / y1;
    }
    /* El primer texto del filtro la primera columna, segunda fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h4:nth-of-type(1){
        grid-column: x0 / x1;
        grid-row: y1 / y2; 
    }
    /* El primer selector del filtro la primera columna, tercera fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>select:nth-of-type(1){
        grid-column: x0 / x1;
        grid-row: y2 / y3;
    }
    /* El segundo texto del filtro la segunda columna, segunda fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h4:nth-of-type(2){
        grid-column: x1 / x2;
        grid-row: y1 / y2; 
    } 
    /* El segundo selector del filtro la segunda columna, tercera fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>select:nth-of-type(2){
        grid-column: x1 / x2;
        grid-row: y2 / y3;
    }
    /* El cuarto texto del filtro la primera columna, cuarta fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h4:nth-of-type(4){
        grid-column: x0 / x1;
        grid-row: y3 / y4; 
    }
    /* El tercer selector del filtro la primera columna, quinta fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>select:nth-of-type(3){
        grid-column: x0 / x1;
        grid-row: y4 / y5;
    } 
    /* El quinto texto del filtro la segunda columna, cuarta fila */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h4:nth-of-type(5){
        grid-column: x1 / x2;
        grid-row: y3 / y4;
    }
    /* El cuarto selector del filtro la segunda columna, quinta fila */ 
    #seccionAdopcion2>aside#filtrosAvesAdopcion>select:nth-of-type(4){
        grid-column: x1 / x2;
        grid-row: y4 / y5;
    }
    /* Alineamos todos los textos abajo vericalmente */
    #seccionAdopcion2>aside#filtrosAvesAdopcion>h4{
        align-self: flex-end; 
    }
    /* Quitamos todos los margenes a  los selectores */
    #seccionAdopcion2>aside#filtrosAvesAdopcion select{
        margin: 0px;
    }
    /* En este caso el grid tendrá cuatro columnas */
    section#AvesAdopcion>div:last-of-type{ 
        grid-template-columns: 1fr 1fr 1fr 1fr;
    } 
    /* Definimos el ancho, la posición absolute y le damos un pequeño relleno a la sección */
    #ficha{
        position: absolute;
        width: 40rem;
        padding: 2rem; 
    } 
    /* En el bloque principal, utilizando la cuadricula de grid posicionamos los elementos hijo en 4 columnas y 3 filas con sus respectivos márgenes */
    #ficha>main{
        display: grid;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3] 1fr [x4];
        grid-template-rows: [y0] auto [y1] auto [y2] 3rem [y3];
        column-gap: 1rem;
        row-gap: 2rem;
    }
    /* Eliminamos el margen inferior de los artículos */
    #ficha>main>article{
        margin-bottom: 0;
    }
    /* Definimos el tamaño letra del título */
    #ficha>main>article>h2{
        font-size: 26px;
    }
    /* Definimos el tamaño letra de los términos */
    #ficha>main>article dt{
        font-size: 22px;
    }
    /* Definimos el tamaño letra de los elementos descriptivos */
    #ficha>main>article dd{
        font-size: 16px;
    }
    /* Esta clase define el tamaño la letra*/ 
    .textoFicha{
        font-size: 13px;
    }
    /* Eliminamos el ancho máximo y desactivamos el aspect ratio, hacemos que abarque la primera y segunda columna y le damos la altura completa */
    #foto{
        max-width: none;
        grid-column: x0 / x2;
        aspect-ratio: unset;
        height: 100%;
    }
    /*Ambos bloques se posicionan en la primera fila*/
    #foto,  #ficha>main>article:nth-child(2){
        grid-row: y0 / y1;
    }
    /* Definimos el tamaño de letra y el margen del párrafo */
    #foto>p{
        font-size: 33px;
        margin: 1rem 0 0 0;
    }
    /*Hacemos que el bloque abarque la tercera y cuarta columna y le damos la altura completa*/
    #ficha>main>article:nth-child(2){
        grid-column: x2 / x4;
        height: 100%;      
    }
    /* Los bloque se posicionen en la segunda fila */
    #ficha>main>article:nth-child(3), #ficha>main>article:nth-child(4){
        grid-row: y1 / y2;
    }
    /* El bloque se posiciona en la primera columna y definimos su ancho y altura */
    #ficha>main>article:nth-child(3){
        grid-column: x0 / x1;
        width: 13rem;
        height: 100%;
    }
    /* El bloque abarca desde la segunda na la cuarta columna */
    #ficha>main>article:nth-child(4){
        grid-column: x1 / x4;
    }
    /* El botón está colocado en la última fila y última columna*/
    #ficha>main a{
        grid-column: x3 / x4;
        grid-row: y2 / y3;
    }
    /* 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 tamaño del contenedor */
    #seccionAdopcion1>div{
        width: 70rem;
    }
    /* Definimos el tamaño del texto */
    #seccionAdopcion1>div>h2{
        font-size: 28px;
    } 
    /* Definimos el tamaño del texto */
    #seccionAdopcion1>div>p{
        font-size: 15px;
    }
    /* Cambiamos ahora a dirección fila, centrado horizontalmente y pegado arriba verticalmente, también añadimos relleno y ancho para mayor claridad */
    #seccionAdopcion2{
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        padding-top: 60px;
        width: 100vw;
    }
    /* Ahora el filtro siempre se vé tendrá un ancho determinado y se ve en bloque. Le quitamos la posición absoluta */
    #seccionAdopcion2>aside{
        display: block;
        width: 20rem; 
        position: static; 
        margin-right: 1rem;
    }
    /* Cambiamos el overflow de tipo escroll a tipo oculto */
    section#AveDetallada{
        overflow: hidden;
    }
    /* Al igual que en tablet, ponemos 4 columnas */
    section#AvesAdopcion>div:last-of-type{ 
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    /* Mostramos los botones en la ficha para avanzar y retroceder */
    #AveDetallada>div:first-of-type,#AveDetallada>div:last-of-type{
        display: flex;   
    }
    /*  Asignamos un ancho, ancho máximo y lo quitamos del borde izquierdo de la pantalla */
    section#AvesAdopcion, section#AvesAdopcion>div:last-of-type,  section#AvesAdopcion>img, section#AvesAdopcion>div:first-of-type{
        width: 77%; 
        max-width: 39rem;
        left: unset;
    }
    /* Como se muestra el filtro todo el rato, el botón no tiene sentido ahora */
    a#botonFiltrar{
        display: none;
    } 
    /* Definimos el ancho máximo, definimos la altura y le damos un pequeño relleno a la sección */
    #ficha{
        max-width: 55rem;
        width: 100%;
        padding: 1rem;
        position: relative;
        top: unset !important;
    }
     /* En el bloque principal, utilizando la cuadricula de grid posicionamos los elementos hijo en 3 columnas y 3 filas con sus respectivos márgenes */
    #ficha>main{
        display: grid;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
        grid-template-rows: [y0] 27rem [y1] auto [y2] 3rem [y3];
        row-gap: 1rem;
        column-gap: .5rem;
    }
    /* Eliminamos el margen inferior de los artículos */
    #ficha>main>article{
        margin-bottom: 0;  
    }
    /* Definimos el tamaño letra del título */
    #ficha>main>article>h2{
        font-size: 28px;
    }
    /* Definimos el tamaño letra de los términos */
    #ficha>main>article dt{
        font-size: 23px;
    }
    /* Definimos el tamaño letra de los elementos descriptivos */
    #ficha>main>article dd{
        font-size: 18px;
    }
    /* Esta clase define el tamaño la letra*/ 
    .textoFicha{
        font-size: 14px;
    }
    /* Estos artículos están poscionados en la primera fila y ocupan la altura completa */
    #foto, #ficha>main>article:nth-child(2), #ficha>main>article:nth-child(3){
        height: 100%;
        grid-row: y0 / y1;
    }
    /* Eliminamos el ancho máximo, definimos un ancho y desactivamos el aspect ratio y se posiona en la primera columna */
    #foto{
        width: 20rem;
        max-height: none;
        grid-row: y0 / y1;
        aspect-ratio: unset;
    }
    /* Definimos el tamaño de letra y el margen del párrafo */
    #foto>p{
        font-size: 33px;
    }
    /* Los elementos tienen un pequeño relleno */
    #ficha>main>article:nth-child(2), #ficha>main>article:nth-child(3), #ficha>main>article:nth-child(4){
        padding: 1rem;
    }
    /*El boque se posiciona en la segunda columna y le damos la altura completa*/
    #ficha>main>article:nth-child(2){
        grid-column: x1 / x2;
        width: 100%;
    }
    /* Este elemento y el botón están poscionados en la última columna  */
    #ficha>main>article:nth-child(3), #ficha>main a{
        grid-column: x2 / x3;
    }
    /* Definimos el ancho, alto, ancho máximo. eliminamos la altura máxima del artículo, lo posiconamos en la segunda abarcando todas las columnas */
    #ficha>main>article:nth-child(4){
        width: 100%;
        max-height: 18rem;
        grid-column: x0 / x3;
        grid-row: y1 / y2;
        max-height: none;
    }
    /*Definimos el ancho y la altura del botón y lo posicionamos en la última fila*/
    #ficha>main a{
        height: 3rem;
        width: 15rem;
        grid-row: y2 / y3;
    }
    /* El color de fondo del botón se vuelve verde transcurrido un pequeño lapso de tiempo */
    #ficha>main a:hover{
        background-color: #A3BD31;
        transition: all 0.5s;
    }
    /* El color de fondo del ratón se vuelve verde oscuro al clicar de inmediato */
    #ficha>main a:active{
        background-color: #5D6B20;
        transition: none;
    }
    /* Definimos el tamaño del texto, le damos un ancho máximo y le damos un margen superior e inferior */
    p#cita{
        max-width: 50rem;
        font-size: 20px;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}