/*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");
}
/* Clase que define el texto con la fuente Poppins y el tamaño de la letra en 14px */
.santuarioParrafo{
    font-family: Poppins;
    font-size: 12px;
    color: #353535;
}
/* Ocupa el ancho completo */
.santuarioAnchoCompleto{
    width: 100%;
}
/* Texto de color blanco */
.colorBlanco{
    color: white;
}
/* Texto de color verde */
.colorVerde{
    color: #A3BD31;
}
/*Eliminamos el padding y margin que viene por defecto */
body{
    margin: 0;
    padding: 0;
}
/* Definimos la altura de la sección y el bloque interno está posiconado en el centro */
header>div.santuarioAnchoCompleto{
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Definimos la altura y posición, la imagen está adaptada al tamaño del padre y le damos un tono gris a la imagen */
header>div.santuarioAnchoCompleto img{
    height: 20rem;
    object-fit: cover;   
    position: absolute;
    z-index: 1;
    filter: grayscale(60%);
}
/* Los textos están centrados y posicionados por encima */
header>div.santuarioAnchoCompleto section{
    text-align: center;
    position: absolute;
    z-index: 2; 
}
/* Tamaño, fuente y grosor del título principal, sin márgenes */
header>div.santuarioAnchoCompleto h1{
    font-family: Dosis;
    font-size: 50px;
    font-weight: 100;
    margin: 0;
}
/* Tamaño y fuente del parrafo */
header>div.santuarioAnchoCompleto p{
    font-family: Poppins;
    font-size: 15px;
}
/* Definimos la posición de los elementos dentro de la sección centrados verticalmente con pequeños márgenes a los lados y el texto centrado*/
#seccionSantuario1, #seccionSantuario2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
/* Definimos la fuente, el tamaño y centramos el título de la información principal sin márgenes, añadiéndole un pequeño relleno superior*/
section h2{
    font-family: Dosis;
    font-size: 22px;
    text-align: center;
    margin: 0;
    padding-top: 1rem;
}
/* Definimos el ancho del texto, centrándolo y añadiendo un pequeño relleno inferior */
#seccionSantuario1>p{
    text-align: center;
    width: 100%;
    padding-bottom: 2rem;
}
/* Eliminamos el estilo por defecto del enlace y definimos su color y grosor. Al pasar el cursor por encima éste toma forma de mano indicando que se puede clicar en él */
#seccionSantuario1 p>a{
    color: #E9A219;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
/* Al clicar en el enlace este cambia de color */
#seccionSantuario1 p>a:active{
    color: #A3BD31;
}
/* Definimos el color de fondo del enlace, definimos su altura y su ancho, distribuimos las medidas dentro del contenedor sin que sobresalgan y añadimos un pequeño margen inferior*/
#seccionSantuario2{
    background-color: #A3BD31;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 3rem;
}
/* Definimoas altura, ancho, altura máxima y ancho máximo del artículo, redondeamos las esquinas y añadimos un pequeño margen superior e inferior*/
#seccionSantuario2 article{
    border-radius: 15px;
    max-width: 20rem;
    max-height: 30rem;
    margin: 1rem 0;
    width: 100%;
    height: 100%;
}
/* Ancho y altura del bloque, los textos que contiene están justificados */
#seccionSantuario2 article>div{
    height: 100%;
    width: 100%;
    text-align: justify;
}
/* Definimos el ancho máximo y redondeamos las esquinas superiores del bloque, lo colocamos en el centro horizontalmente y abajo verticalmente */
#seccionSantuario2 article>div:first-child{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-radius: 15px 15px 0px 0px;
    max-width: 20rem;
}
/* Hacemos que la iamgen cubra a su elemento padre, definimos su altura maxima y redondeamos sus esquinas superiores*/
#seccionSantuario2 article>div>img{
    object-fit: cover;
    border-radius: 15px 15px 0px 0px;
    max-width: 100%;
}
/* Definimos el color de fondo del contenedor y redondeamos sus esquinas inferiores*/
#seccionSantuario2 article>div:last-child{
    border-radius: 0px 0px 15px 15px;
    background-color: #F0F5E0;
}
/* Eliminamos el margen por defecto, definimos el color, tamaño y fuente del título y le añadimos un pequeño relleno en la perte superior*/
#seccionSantuario2 h3{
    font-family: Dosis;
    font-size: 20px;
    padding-top: 1rem;
    color: #E9A219;
    text-align: center;
    margin: 0;
}
/* Eliminamos el margen por defecto y le añadimos un pequeño relleno*/
#seccionSantuario2 article>div:last-child>p{
    padding: 1rem;
    margin: 0;
}
/* 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){
    /* Clase que define el tamaño del texto */
    .santuarioParrafo{
        font-size: 13px;
    }
    /* Definimos la altura de los elementos*/
    header>div.santuarioAnchoCompleto, header>div.santuarioAnchoCompleto img{
        height: 30rem;
    }
    /* Tamaño del título principal */
    header>div.santuarioAnchoCompleto h1{
        font-size: 65px;
    }
    /* Tamaño del parrafo */
    header>div.santuarioAnchoCompleto p{
        font-size: 18px;
    }
    /* Tamaño de encabezado */
    section h2{
        font-size: 26px;
    }
    /* Definimos el ancho máximo del texto */
    #seccionSantuario1>p{
        max-width: 40rem;
    }
    /* Altura máxima del artículo */
    #seccionSantuario2 article{
        max-height: 36rem;
    }
    /* Ancho máximo de los contenedores*/
    #seccionSantuario2 article, #seccionSantuario2 article>div:first-child{
        max-width: 26rem;
    }
    /* Tamaño del encabezado */
    #seccionSantuario2 h3{
        font-size: 22px;
    }
    /* 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) {
    /* Clase que define el tamaño del texto */
    .santuarioParrafo{
        font-size: 14px;
    }
    /* Definimos la altura de los elementos*/
    header>div.santuarioAnchoCompleto, header>div.santuarioAnchoCompleto img{
        height: 40rem;
    }
    /* Tamaño del título principal */
    header>div.santuarioAnchoCompleto h1{
        font-size: 80px;
    }
    /* Tamaño del parrafo */
    header>div.santuarioAnchoCompleto p{
        font-size: 20px;
    }
    /* Tamaño de encabezado */
    #seccionSantuario1>h2, #seccionSantuario2>h2{
        font-size: 28px;
    }
    /* Definimos el ancho máximo del texto */
    #seccionSantuario1>p{
        max-width: 60rem;
    }
    /* Los elementos dentro de la sección estás posicionados en fila y se despliegan ocupando el espacio que se les permita */
    #seccionSantuario2{ 
        flex-direction: row;
        flex-wrap: wrap;
    }
    /* Desabilitamos el ancho máximo y altura máxima del artículo, definimos un ancho y altura y le añadimos un pequeño margen */
    #seccionSantuario2 article{
        max-width: unset;
        max-height: unset;
        margin: 1rem;
        width: 22rem;
        height: 31rem;
    }
    /* Tamaño del encabezado */
    #seccionSantuario2 h3{
        font-size: 24px;
    }
    /* Desabilitamos el ancho máximo del bloque, definimos un ancho y altura */
    #seccionSantuario2 article>div:first-child{
        max-width: unset;
        width: 22rem;
        height: 55%;
        display: block;
    }
    /* Definimos el ancho y la altura de la imagen*/
    #seccionSantuario2 article>div>img{
        width: 100%;
        height: 100%;
    }
    /* Definimos la altura del bloque */
    #seccionSantuario2 article>div:last-child{
        height: 45%; 
    }
    /* 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;
    }
}