/*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");
}
/* CLASES */
/* Clase del primer span del menú hamburguesa. Al clicar, mueve el span 45 grados */
.primera{
    transition: all .4s;
    transform: translateY(.5rem) rotate(45deg);
}
/* Clase del segundo span del menú hamburguesa. Al clicar, desaparece */
.segunda{
    opacity: 0;
}
/* Clase del tercer spam del menú hamburguesa. Al clicar, mueve el span -45 grados */
.tercera{
    transition: all .4s;
    transform: translateY(-.5rem) rotate(-45deg);
}
/* Clase para mostrar o no la lista en el nav desde el js. Se pone en block y le ponemos la opacidad y visibilidad para que se vea y con una transicción para estos campos */
.show{
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s linear;
} 
/* MÓVIL */
/*Eliminamos el padding y margin que hay por defecto */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/*Definimos el color de fondo de la cabecera, y los elementos hijo posicionados en el centro verticalmente*/
header {
    background: white;
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}	
/*Definimos el ancho y ancho máximo del bloque y los elementos dentro del contenedor se alinean en el centro verticalmente y se dirigen a los extremos horizontalmente*/
header>div:first-of-type{
    width: 100%;
    max-width: 70rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/*Definimos el ancho y altura y desabilitamos el display flex*/
header #logo img {
    padding-left: 1rem;
    width: 150px;
    height: auto;
    display: block;
}
/* Al logo le aplica el filtro sepia al pasar el ratón por encima */
header #logo:hover{
    filter: sepia(20);
}
/* Al logo se le aplica el filtro gris al hacer click en él */
header #logo:active{
    filter: grayscale(10);
}
/* Este contenedor tendrá 3 lineas en forma de menú de hamburguesa. Para ello definimos la altura y el ancho del bloque, lo posiconamos con un pequeño margen a la derecha y posicionamos las 3 líneas una encima de la otra. Al pasar el cursor por encima éste toma forma de mano */
header div#menuHamburguesa {
    width: 2.2rem;
    height: 1.5rem;
    margin-right: 1rem;
    display: flex; 
    visibility: visible;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
}
/* Definimos cada línea del bloque, su anchura, altura, redondeamos las esquinas y les damos color, también definimos la transición de su animación a .4s*/
header div#menuHamburguesa span{
    background-color: #353535;
    width: 2.2rem;
    height: 0.1rem;
    display: block;
    border-radius: 10px;
    transition: all .4s;
} 
/* Ponemos el nav para que no se muestre  y lo reposicionamos para que esté debajo del menú hamburguesa. También le asignamos un ancho pero le dejamos la altura automática para que se adapte al contenido */
header nav {
    height: 100%;
    font-family: Dosis;
    font-size: 18px;
    font-weight: 600;
    position: absolute;
    display: none;
    z-index: 5;
    right: 0px;
    top: 60px;
    width: 100%; 
}
/* La lista desordenada permanece oculta, eliminamos el estilo, margen y relleno que tiene por defecto. Definimos su ancho, opacidad y color. Su posición pegada a la derecha, le añadimos un borde con las esquinas redondeadas y  una sombra. Definimos la fuente, tamaño, grosor, color del texto que contiene y los centramos. Creamos una pequeña transición para cuando aparezca */
header nav ul{ 
    display: none;
    visibility: hidden;
    padding: 0px;
    list-style: none;
    background-color: white;
    width: 100%;
    margin: 0; 
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s linear;
    font-family: Dosis;
    font-size: 18px;
    font-weight: 600;
    color: #353535;
    text-align: center;
    border-radius: 10px;
    right: 0;
    border: 1px solid black;
    box-shadow: 10px 10px 5px 0px #00000055;
}
 /* Le damos un pequeño relleno al elemento de la lista y hacemos que el cursor se transforme en una mano cuando lo pasamos por encima*/
 header nav a li{
    cursor: pointer;
    padding: 10px;
}
/* El color de la letra y el de fondo cambian al pasar el cursor por encima del elemento de la lista */
header a:hover>li{
    background-color: #A3BD31;
    color: white;
}
/* El color de fondo del elemento de la lista cambia al clicar en él  */
header a:active>li{
    color: white;
    background-color: #E9A219;
}
/* Eliminamos el estilo por defecto del enlace, le añadimos un pequeño relleno y definimos el color del textp que contiene */    
header nav ul a {
    padding: 0px;
    display: block;
    text-decoration: none;
    color: #353535
}
/*cuando pasamos el ratón por encima cada elemento de la lista cambia el color a verde*/ 
header nav ul a:hover {
    color: #A3BD31;
}
/* Cuando hacemos click el elemento de la lista cambia de color a naranja */
header nav ul a:active{
    color: #E9A219;
}
/* Cuando hemos visitado el elemento de la lista cambia de color a negro */
header nav ul a:visited{
    color: #353535;
}
/* El primer elemento de la lista tiene las esquinas superiores redondeadas */
header nav ul a:hover:first-of-type>li{
    border-radius: 10px 10px 0px 0px;
}
/* El último elemento de la lista tiene las esquinas inferiores redondeadas */
header nav ul a:hover:last-of-type>li{
    border-radius: 0px 0px 10px 10px;
}
/*Propiedades básicas del footer, quitando márgenes y padding, determinando una altura dada, en position absolute, en flex y forzando a que esté lo más a la izquierda disponible*/
footer{ 
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0px;
    color: white;
    width: 100%;
    height: 700px;
    display: flex;
    overflow: hidden;
    justify-content: center;
}
/* Ponemos el section que contienen las imagenes en position absolute y con la altura y anchura determinada */
footer>section{
   position: absolute; 
   height: 702px;
   width: 100%;
   overflow: hidden; 
}
/* Activamos la primera imagen para las vistas de tablet y movil */
footer>section>img:first-of-type{
   object-fit: cover;
   overflow: hidden;
   align-self: flex-end;
   width: 100%;
   height: 100%;  
}
/* Esta imagen se oculta */
footer>section>img:last-of-type{
    display: none;
}
/* Creamos el tamaño para contener los articles del footer, dandole un padding, poniendole el flex y poniendole un width y max-width para que funcione en todas las pantallas */
footer>div{
    overflow: hidden;
    padding: 2rem;
    width: 100%;
    max-width: 85rem;
    position: absolute;
    height: 94%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
}
/* Dentro de ese contenedor tendremos dos bloques con elementos posicionados en el centro verticalmente*/
footer>div article{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}
/* Definimos el tamaño y el márgen derecho de los iconos */
footer>div article img{
    width: 30px;
    margin-right: 20px;
}
/* A su vez, estos elementos estarán centrados */
footer>div>article:first-of-type>div>div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/* Definimos la fuente, tamaño, grosor, ancho y posición de los títulos del pie de página */
footer>div h5{ 
    font-family: Dosis;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}
/* Definimos la fuente y tamaño los textos del pie de página */
footer>div>article>div>div p{ 
    font-family: Poppins;
    font-size: 16px;
}
/* El texto está centrado*/
footer>div>p{ 
    text-align: center; 
}
/* Eliminamos el estilo por defecto del enlace */
footer 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*/
footer a>img:hover{
    cursor: pointer;
    filter: sepia(20);
}
/* Al hacer click en el icono se vuelve blanco */
footer a>img:active{
    filter: brightness(15);
}
/* DISPOSITIVO TABLET */
@media (min-width: 767px) and (max-width: 1023px){
    /* Cambiamos el tamaño del nav para que no ocupe el 100% */
    header nav {
        width: 20rem;
    }
    /*Definimos tamaño y altura del pie de página y el color blanco para el texto dentro de éste*/
    footer { 
        margin: 0;
        padding: 0;
        color: white;
        width: 100vw;
        height: 700px;
        display: flex;
        overflow: hidden;
        justify-content: center;
    }
    /* La ponemos en posición absoluta paera que los elementos queden por encima */
    footer>section{
        position: absolute; 
        height: 700px;
        width: 100vw;
        overflow: hidden;
    }
    /* La imagen no se muestra */
    footer>section>img:last-of-type{
        display: none;
    }
    /* Activamos la primera imagen del section para las vistas de móvil y tablet, ponemos la foto para que la alineamos arriba verticalmente y forzamos que el ancho sea el ancho de la página. */
    footer>section>img:first-of-type{
        display: block;
        object-position: center top;  
        object-fit: cover; 
        align-self: flex-start;
        width: 100vw;
        height: 100%;
    }
    /* Eliminamos el relleno, definimos la altura del bloque y damos un pequeño hueco entre los bloques */
    footer>div{
        padding: 0px;
        height: 700px; 
        gap: 50px;
    }
    /* Dentro de ese contenedor tendremos dos bloques con elementos posicionados en el centro */
    footer>div article{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Posicionamos con celdas los elementos en el bloque de "Contáctanos" el 2 columnas y 2 filas, las cuales tienen un pequeño margen entre las columnas */
    footer>div>article:first-of-type>div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 4rem;
    }
    /* Definimos el ancho del párrafo y lo centramos */
    footer>div>p{ 
        text-align: center;
        width: 100%;
    } 
}
/* ORDENADOR */
@media (min-width: 1024px){
    /* Cambiamos el header para que la dirección esté en columna  y forzamos a que cada elemento esté en una línea*/
    header { 
        flex-direction: column;
        flex-wrap: nowrap;
    }
    /* Ocultamos el menuHamburguesa */
    header div#menuHamburguesa{
        visibility: hidden;
    }
    /* Ponemos el nav para que no se muestre  y lo reposicionamos para que esté debajo del menú hamburguesa. También le asignamos un ancho pero le dejamos la altura automática para que se adapte al contenido */
    header nav { 
        position: relative;
        display: block;
        z-index: 5;
        right: unset;
        top: unset;
        width: 100%;
        height: 80px; 
    } 
    /*Eliminamos el estilo por defecto de la lista desordenada, así como el margen y relleno, los elementos descendientes están centrados verticalmente y ocupando el 100% de la altura de la barra de navegación. También eliminamos los bordes y la sombra que aparece en las otras vistas.*/
    header nav ul {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        visibility: visible;
        opacity: 1;
        height: 100%;
        border: none;
        box-shadow: none;
    } 
    /* Cambiamos el padding que tenía la lista por margen */
    header nav a li{
        padding: 0px;
        margin: 10px;
    }
    /* Cambiamos el padding que tenía la lista por margen para reducir el tamaño del área de clicado en la cabecera */
    header nav ul a {
        padding: 0px;
        margin: 0px 10px;
    }
    /* El color de la letra y el de fondo cambian al pasar el cursor por encima del elemento de la lista. Dejamos los colores por defecto pero le quitamos el color de fondo*/
    header a:hover>li{
        color: inherit;
        background-color: transparent;
    }
    /* El color de fondo del elemento de la lista cambia al clicar en él, respetando su color original */
    header a:active>li{
        color: inherit;
        background-color: transparent;
    }
    /*Definimos la altura de la sección y el pie de página*/
    footer, footer>section { 
        height: 569px;
    }
    /* La imagen se oculta */
    footer>section>img:first-of-type{
        display: none;
    }
    /* Definimos el ancho y altura de la imagen ocultando el overflow que pudiese generar. Si el cover tiene que elegir posición , le añadimos align-self con flex-end para que se pegue al final de la página. */
    footer>section>img:last-of-type{
        display: block;
        object-fit: cover;
        overflow: hidden; 
        align-self: flex-end;
        width: 100%;
        height: 100%;
    }
    /* Ponemos el contenedor de la información del footer con la misma altura que las imágenes, para evitar overflows, ponemos el contenido como border box y mostramos los items como flex */
    footer>div{
        padding: 0px;
        height: 569px; 
        box-sizing: border-box;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        align-content: flex-end;
    }
    /* Definimos el ancho del artículo */
    footer>div article{
        width: 49%;
    }
    /* Definimos la posición del bloque de forma relativa a la normal */
    footer>div>article:first-of-type{
        position: relative; 
    }
    /* En el primer article, ponemos los elementos de correo, ubicación, teléfono y móvil  en un grid 2x2 para su correcta visualización*/
    footer>div>article:first-of-type>div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 1rem;
        /* Ponemos esta propiedad para que ocupen el 100% de la altura disponible.  */
        align-items: stretch; 
        /* Añadimos  un padding para que no esté pegado a la parte inferior */
        padding: 0rem 1rem 5rem 1rem;
    }
    /* Movemos el segundo bloque del footer, ya que la imagen presenta unas montañas, el texto debe estár un poco más bajo */
    footer>div>article:last-of-type{
        width: 50%;
        position: relative;
        top: 20px;
        right: -80px; 
    }
    /* Definimos el tamaño los textos*/
    footer>div>article>div>div p{ 
        font-size: 18px;
    }
    /* Definmos el ancho del texto*/
    footer>div>p{ 
        width: 100%;
    }
    /* Ejecutamos una segunda media query para pantallas muy grandes para evitar un corte en la imagen establecida en el background del footer. */
    @media (min-width: 2048px){
        footer, footer>section, footer>div{
            height: 750px;
        }
    }
}