/*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 las fuente Poppins*/
@font-face {
    font-family: Poppins;
    src: url("../fuentes/Poppins-Regular.ttf");
}
/*Importación de las fuente Indie Flower*/
@font-face {
    font-family: Indie;
    src: url("../fuentes/IndieFlower-Regular.ttf");
}
/* Opción para que el scroll sea más suave */
html {
    scroll-behavior: smooth;
}
/* Reducir y comentar */
body{
    margin: 0;
    padding: 0;
}
/* Definimos el tamaño y altura de la sección y la posición de los elementos centrados dentro de la sección */
header>div:last-of-type{
    width: 100%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos el tamaño, 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 información principal, por encima del elemento padre*/
header>div:last-of-type section{
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
/* Tamaño, fuente y grosor del título principal, eleminamos el margen por defecto */
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 p{
    font-family: Poppins;
    font-size: 15px;
}
/* Clase que define el tamaño, fuente y color del texto y lo centra*/
section h2{
    font-family: Dosis;
    font-size: 22px;
    color: #A3BD31;
    text-align: center;
}
/* Definimos la posición de los elementos dentro de la sección centrados vertical y horizontalemnte con pequeños márgenes a los lados */
#seccionIntro, section#carePreguntas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* Añadimos un margen superior en el título, eliminandolo en los otros lados */
#seccionIntro h2 {
    margin: 2rem 0 0 0;
}
/* Definimos el color, fuente, tamaño y relleno de los párrafos */
#seccionIntro>p, section#careCuidados p, section#careReferencias p{
    color: #353535;
    font-family: Poppins;
    font-size: 12px;
    padding: 1rem;
}
/* Estos elementos tienen un 100% de ancho en cuanto al padre */
#seccionIntro>p, section#careCuidados, section#careReferencias>article, section#careReferencias>div {
    width: 100%;
}
/* Eliminamos el margen por defecto de estos textos */
#seccionIntro>p, section#careCuidados h3{
    margin: 0;
}
/* Definimos en ancho en la sección y añadimos un margen superior e inferior  */
section#carePreguntas{
    width: 100%;
    margin: 1rem 0 1rem 0; 
} 
/* Eliminamos el margen inferior por defecto que trae el encabezado */
section#carePreguntas h2{
    margin-bottom: 0;
} 
/* Definimos el ancho, tamaño, fuente y color de este los encabezados */
section#carePreguntas h3{
    width: 75px;
    font-size: 15px;
    color: white;
    font-family: Indie;
    text-align: center;
}
/* Eliminamos el posible overflow que el bloque tenga, le ponemos un ancho máximo, lo ponemos en flex, separamos los elementos en cada línea, permitiendo que el flex pase a la siguiente línea. Por último añadimos un pequeño margen superior e inferior*/
section#carePreguntas>div{
    overflow: hidden;
    max-width: 30rem; 
    display: flex; 
    justify-content: space-around;
    flex-wrap: wrap; 
    margin: 3rem 0 1rem 0;   
}
/* A cada botón le asignamos un color de fondo y también le asignamos el ancho y redondeamos sus esquinas para que el botón sea circular */
section#carePreguntas>div>div>div{ 
    width: 8rem;
    border-radius: 50%;
    background-color: #E9A219;
}
/* A las columnas impares las ponemos primeras en el orden y cada uno de estas columnas las mostramos como grid en tres filas con un espaciado. Adicionalmente le añadimos un relleno en la zona inferior y hacemos que ocupen estrictamente lo necesario */
section#carePreguntas>div>div:nth-child(odd){
    order: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;   
    gap: 1rem;
    width: auto;  
    padding-bottom: 12px;
} 
/* Cambiamos el orden de la imagen del loro y forzamos que solo ocupe lo estrictamente necesario */
section#carePreguntas>div>div:nth-child(even){
    order: 1;
    width: auto;
}
/* Definimos el ancho del loro */
section#carePreguntas>div>div:nth-child(even)>img{
    width: 20rem;
}
/* Definimos el ancho de estos bloques y cposicionamos a sus elementos hijo en el centro */
section#careCuidados, section#careCuidados article{
    display: flex;
    justify-content: center;
    width: 100%; 
}
/* Definimos el ancho y añadimos un pequeño relleno a estos bloques, posicionamos a sus elementos hijo en el centro verticalmente */
section#careCuidados main, section#careReferencias{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}
/* Definimos la fuente, color y tamaño del encabezado */
section#careCuidados h3{
    font-family: Dosis;
    font-size: 20px;
    color: #5D6B20;
}
/* Definimos la altura del artículo, redondeando sus esquinas, añadiéndo un pequeño margen superior e inferior y una sombra. Sus elementos hijo estarán centrados verticalmente */
section#careCuidados article{
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    margin: 1rem 0;
    box-shadow: 5px 5px 5px 0px #00000055;
    box-sizing: border-box;
    height: 100%;
}
/* Definimos el ancho máximo y la altura máxima del bloque, lo redondeamos convirtiéndolo en un círculo, le añadimos un pequeño margen y escondemos cualquier aoverflow que pueda crear */
section#careCuidados article>div:first-of-type{
    border-radius: 50%;
    overflow: hidden;
    margin: 1rem;
    max-width: 15rem;
    max-height: 15rem;
}
/* La imagen se redimensiona para adaptarse a su contenedor */
section#careCuidados article>div:first-of-type>img{
    object-fit: cover;
}
/* Con box-sizing, los rellenos y margenes se incluirán en la medida de los bloques, manteniendo su tamaño original */
section#careCuidados article>div:last-of-type, #seccionIntro>p, section#careCuidados, section#careCuidados article, section#careReferencias {
    box-sizing: border-box;
}
/* El texto está justificado */
section#careCuidados article>div:last-of-type>p{
    text-align: justify;
}
/* Definimos el color, fuente y tamaño de la lista desordenada */
section#careCuidados article>div:last-of-type>ul{
    color: #353535;
    font-family: Poppins;
    font-size: 12px;
}
/* Definimos el color de fondo de los artículos impares */
section#careCuidados article:nth-of-type(odd){
   background-color: #F0F5E0;
}
/* Definimos el color de fondo de los artículos pares */
section#careCuidados article:nth-of-type(even){
    background-color: #FFFAEF;
}
/* Eliminamos el estilo por defecto de los enlaces, al pasar el cursor por encima éste toma forma de mano, indicando que se puede clicar */
section a{
    text-decoration: none;
    cursor: pointer;
}
/* Definimos el color de la letra */
section#careCuidados a:active, section#careReferencias p>a{
    color: #E9A219;
}
/* Definimos a los elemntos hijo de la sección en el centro */
section#careReferencias{
    justify-content: center;
}
/* Definimos el ancho máximo del bloque, sus elementos hijo se posicionana centrados en una linea y se desplegarán un pequeño margen según el tamaño de su padre */
section#careReferencias>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 80%;
    justify-content: space-evenly;
}
/* Los textos se encuentran centrados */
section#careReferencias>article, section h3, #seccionIntro>p{
    text-align: center;
}
/* Aumentamos el grosor del texto*/
section#careReferencias p>a{
    font-weight: 600;
}
/* Definimos el ancho, la altura, color de fondo del enlace, redondeamos sus esquinas hasta darle forma de huevo, añadimos un borde. Eliminamos el overflow que pueda tener. Definimos la fuente y tamaño de los textos que contiene y los centramos. */
section#careReferencias>div>a{
    font-family: Indie;
    font-size: 14px;
    text-align: center;
    width: 5rem;
    height: 7rem;
    background-color: #f7e06e;
    border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
    overflow: hidden;
    color: #353535;
    border: solid  #353535 1px;
}
/* Estos elementos rotan 20 grados */
section#careReferencias>div>a:first-of-type,
section#careReferencias>div>a:last-of-type,
section#careReferencias>div>a:nth-of-type(2)>div{
    transform: rotate(20deg);
}
/* Estos elementos rotan -20 grados */
section#careReferencias>div>a:nth-of-type(2),
section#careReferencias>div>a:first-of-type>div,
section#careReferencias>div>a:last-of-type>div{
    transform: rotate(-20deg);
}
/* Estos bloques tienen a sus elementos hijos posicionados y alineados en el centro */
section#careReferencias>div>a>div, section#carePreguntas>div>div>div{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos la altura y ancho de estos elementos */
section#careReferencias>div>a>div, section#careCuidados article>div:first-of-type, section#careCuidados article>div:first-of-type>img, section#careCuidados article>div:last-of-type{
    width: 100%;
    height: 100%; 
}
/* DISPOSITIVO TABLET */
@media (min-width: 767px) and (max-width: 1023px){
    /* Definimos la altura de la sección*/
    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 p{
        font-size: 18px;
    }
    /* Definimos el tamaño del título de la información principal */
    section h2{
        font-size: 26px;
    }
    /* tamaño del texto */
    #seccionIntro>p{
        font-size: 13px;
    }
    /* Añadimos un relleno al párrafo */
    #seccionIntro>p, section#careCuidados article>div:last-of-type>p, section#careReferencias p{
        padding: 1rem 2rem;
    }
    /* Redondeamos las esquinas del artículo */
    section#careCuidados article{
        border-radius: 30px;
    }
    /* Definimos la altura y ancho mñáximo de estos elementos */
    section#careCuidados article>div:first-of-type, section#careCuidados article>div:first-of-type>img{
        max-height: 20rem;
        max-width: 20rem;
    }
    /* Definimos el tamaño de este encabezado */
    section#careCuidados h3{
        font-size: 22px;
    }
    /* Definimos el tamaño de la letra  */
    section#careCuidados article>div:last-of-type>p, section#careReferencias p, section#careCuidados article>div:last-of-type>ul{
        font-size: 13px;
    }
    /* Definimos el ancho y altura del enlace y definimos el tamaño de texto que contiene */
    section#careReferencias>div>a{
        font-size: 17px;
        width: 7rem;
        height: 10rem;
    }
    /* Cambiamos el bloque que contiene el lorito, eliminado el orden asignado para que esté en el centro de ambas columnas*/
    section#carePreguntas>div>div:nth-child(even){    
        order: unset;
    } 
    /* Tamaño máximo del bloque */
    section#carePreguntas>div{
        max-width: 40rem; 
    }
}
/* ORDENADOR */
@media (min-width: 1024px) {
    /* Definimos la altura de la sección*/
    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 p{
        font-size: 20px;
    }
    /* Definimos el tamaño del título de la información principal */
    section h2{
        font-size: 28px;
    }
    /* Definimos el ancho del párrafo añadiéndo un pequeño relleno */
    #seccionIntro>p{
        width: 100%;
        padding: 1rem 2rem;
        font-size: 14px;
    }
    /* Definimos el ancho máximo, el ancho y la altura del bloque. También cambiamos la vista a grid, creando tres columnas equivalentes.*/
    section#carePreguntas>div{
        max-width: 70rem;
        width: 100%; 
        height: 42rem;
        display: grid;
        grid-template-columns: [x0] 1fr [x1] 1fr [x2] 1fr [x3];
    }
    /* Posicionamos los elementos de este bloque centrados verticalmente y con un espaciado que se despliega en función del tamaño */
    section#carePreguntas>div>div{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    /* Definimos el ancho del bloque y alineamos a sus elemntos hijos verticalmente */
    section#carePreguntas>div>div:nth-child(even){
        width: 27rem;
        flex-direction: column;
        order: unset;
    } 
    /* Definimos el ancho de la imagen */
    section#carePreguntas>div>div:nth-child(even)>img{
        width: 100%;
    }
    /* Le asignamos la primera columna*/
    section#carePreguntas>div>div:first-of-type{
        grid-column: x0 / x1;   
    }
    /* Le asignamos la segunda columna al lorito */
    section#carePreguntas>div>div:nth-of-type(2){
        grid-column: x1 / x2;
    }  
    /* Le asignamos la tercera columna */
    section#carePreguntas>div>div:last-of-type{
        grid-column: x2 / x3;  
    }
    /* Le cambiamos el tamaño de la fuente, el ancho y el texto no se selecciona */
    section#carePreguntas h3{ 
        font-size: 20px; 
        width: 100%;
        user-select: none;
    }
    /* Definimos el ancho del bloque y su posición por encima de otros elementos */
    section#carePreguntas>div>div>div{    
        width: 100%; 
        position: relative;
        z-index: 140;
    }
    /* Estos elementos los rotamos a la izquierda */
    section#carePreguntas>div>div:first-of-type>div:nth-of-type(odd)>a>h3, section#carePreguntas>div>div:last-of-type>div:nth-of-type(even)>a>h3,     section#carePreguntas>div>div:first-of-type>div:nth-of-type(2),     section#carePreguntas>div>div:last-of-type>div:first-of-type,     section#carePreguntas>div>div:last-of-type>div:last-of-type{
        transform: rotate(-20deg);
    }
    /* Estos elementos los rotamos a la derecha */
    section#carePreguntas>div>div:first-of-type>div:nth-of-type(even)>a>h3, section#carePreguntas>div>div:last-of-type>div:nth-of-type(odd)>a>h3, section#carePreguntas>div>div:first-of-type>div:first-of-type, section#carePreguntas>div>div:first-of-type>div:last-of-type, section#carePreguntas>div>div:last-of-type>div:nth-of-type(2){
        transform: rotate(20deg);
    }



    /* Definimos el ancho máximo y la altura del contenedor y le añadimos un margen a la izquierda, lo desplzamos a la derecha*/
    section#carePreguntas>div>div:first-of-type>div:first-of-type{
        max-width: 11rem;
        height: 10rem; 
        margin: 0px;
        left: 10rem;
    }
    /* Definimos el ancho máximo y la altura del contenedor y le añadimos un margen a la derecha, lo desplamos a la derecha*/
    section#carePreguntas>div>div:first-of-type>div:nth-of-type(2){
        max-width: 10rem;
        height: 9rem;
        margin-right: 7rem;
        left:10%
    }
    /* Definimos el ancho máximo y la altura del contenedor, lo desplamos a la derecha*/
    section#carePreguntas>div>div:first-of-type>div:last-of-type{
        max-width: 14rem;
        height: 13rem; 
        left: 20%; 
    }
    /* Definimos el ancho máximo y la altura del contenedor y le añadimos un margen a la derecha*/
    section#carePreguntas>div>div:last-of-type>div:first-of-type{
        max-width: 10rem;
        height: 9rem;
        margin-right: 20%;
    }
      /* Definimos el ancho máximo y la altura del contenedor y llo desplazamos a la izquierda*/
    section#carePreguntas>div>div:last-of-type>div:nth-of-type(2){
        left: 30%;
        max-width: 14rem;
        height: 13rem;  
    }
    /* Definimos el ancho, ancho máximo y la altura del contenedor y le añadimos un margen a la derecha*/
    section#carePreguntas>div>div:last-of-type>div:last-of-type{
        max-width: 12rem;
        width: 100%;
        height: 11rem; 
        margin-right: 5rem;
    }
    /* Al pasar el ratón por encima, le añadimos otro color de fondo y sombra en un pequeño lapso de tiempo, también modificamos el ancho, altura y eliminamos los márgenes */
    section#carePreguntas>div>div:first-of-type>div:hover, section#carePreguntas>div>div:last-of-type>div:hover{
        box-shadow: 5px 5px 5px 0px #00000055;
        background-color: #A3BD31;
        max-width: 13rem;
        max-height: 14rem;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        margin: 0;
    }
    /* Al clicar, le añadimos otro color de fondo y eliminamos su transicción */
    section#carePreguntas>div>div:first-of-type>div:active, 
    section#carePreguntas>div>div:last-of-type>div:active{ 
        background-color: white;
        transition: none;
    }
    /* Al clicar, le añadimos otro color y eliminamos su transicción */
    section#carePreguntas>div>div:first-of-type>div:active h3,
    section#carePreguntas>div>div:last-of-type>div:active h3{
        color: #A3BD31;
        transition: none;
    } 
    /* Definimos el ancho máximo del bloque principal */
    section#careCuidados main{
        max-width: 85rem;
    }
    /* Definimos el ancho máximo del artículo, redondeamos sus esquinas, añadimos un relleno y añadimos un margen superior e inferior y sus elementos hijo se alinean horizontalmente */
    section#careCuidados article{
        max-width: 80rem;
        flex-direction: row;
        border-radius: 80px;
        margin: 3rem 0 3rem 0;
        padding: 1rem;
    }
    /* Difinimos el ancho máximo y la altura máxima de los elementos */
    section#careCuidados article>div:first-of-type, section#careCuidados article>div:first-of-type>img{
        max-height: 25rem;
        max-width: 25rem;
    }
    /* Añadimos un pequeno relleno dentro del box-sizing. Los elementos hijo se colocan en el principio */
    section#careCuidados article>div:last-of-type{
        align-self: flex-start;
        box-sizing: border-box;
        padding: 1rem;
    }
    /* Definimos el tamaño del encabezado */
    section#careCuidados h3{
        font-size: 24px;
    }
    /* Definimos el tamaño de los textos */
    section#careCuidados article>div:last-of-type>p, section#careCuidados article>div:last-of-type>ul{
        font-size: 14px;
    }
    /* El propio artículo se alinea verticalmente en el principio */
    section#careCuidados article:nth-of-type(odd){
        align-self: flex-start;
    }
    /* El propio artículo se alinea verticalmente en el final. Sus elementos hijo se alinean de forma inversa en una linea */
    section#careCuidados article:nth-of-type(even){
        align-self: flex-end;
        display: flex;
        flex-direction: row-reverse;
    }
    /* Al pasar el ratón en enlace cambia de color */
    section#careCuidados a:hover{
        color: white;
    }
    /* Al clicar en el botón, éste cambia de color */
    section#careCuidados a:active{
        color: #E9A219;
    }
    /* Definimos el ancho máximo de los elementos */
    section#careReferencias>article, #seccionIntro>p{
        max-width: 60rem;
    }
    /* Definimos el tamaño del texto */
    section#careReferencias p{
        font-size: 14px;
    }
    /* Definimos el ancho máximo del bloque */
    section#careReferencias>div{
        max-width: 50%;
    }
    /* Definimos el ancho, altura y el tamaño de letra del enlace */
    section#careReferencias>div>a{
        font-size: 19px;
        width: 8rem;
        height: 11rem;
    }
    /* El enlace (el huevo) rota y se queda firme en un lapso de tiempo al pasar el cursor por encima */
    section#careReferencias>div>a:hover{
        transform: rotate(0deg);
        transition: .4s;
    }
    /* Eliminamos cualquier transición y el enlace cambia de color al hacer clicar en él */
    section#careReferencias>div>a:active{
        background-color: #E9A219;
        transition: none;
    }
}