/*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");
}
/* Opción para que el scroll sea más suave */
html {
    scroll-behavior: smooth;
}
/* Clase que define el texto con la fuente Dosis, el tamaño y letra en negrita */
.inicioTitulo{
    font-family: Dosis;
    font-size: 22px;
}
/* Clase que define el texto con la fuente Poppins y el tamaño de la letra*/
.inicioParrafo{
    font-family: Poppins;
    font-size: 12px;
}
/* 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 que se aplica a la lista para cambiar la vista a vertical en tablet y móvil*/
.show{
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s linear;
}  
/*Quitar el padding y el margen que viene por defecto en el body. Adicionalmente ponemos el overflow-x como hidden para evitar que se desplace horizontalmente la página */
body{
	margin: 0;
	padding: 0;
    overflow-x: hidden;
}
/*clase que da una anchura del 100%*/
#sectionInicio1>div>div, #sectionInicio1 article, header>section>section, header #videoIntro, header>section, header, header .headerFixed, header>section>div {
    width: 100%;
}
/* Definimos el color de fondo y la altura de la cebecera */
header{
    background: white; 
    height: 100vh;
}	
/* Eliminamos el relleno por defecto en los enlaces de la cabecera */
header a {
    padding: 0px;
}
/* Definimos la altura del vídeo, eliminamos cualquier margen y lo adaptamos a su contenedor */
header #videoIntro { 
    height: 100vh;
    margin: 0; 
    object-fit: cover; 
} 
/* Definimos la posición de esta sección por encima de otros elementos, su color de fondo y su altura. También ponemos el color con cierta cantidad de alpha para que se transparente y se vea el vídeo en el fondo con cierto tinte. */
header>section{
    position:absolute;
    background-color:#A3BD3155;
    top: 0px; 
    height: 100vh; 
} 
/* La posición de este bloque está en el centro */
header>section>div{ 
    display: flex;
    justify-content: center;
}
/* Dispersamos los elementos a los lados en la cabecera y definimos su relleno, altura y ancho*/
header>section>div>div{
    padding: 0px 1rem;
    width: 70rem; 
    height: 80px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
} 
/* Esta sección tiene esta altura del video menos la altura del header, está en el centro y el color de los textos en su interior es blanco*/
header>section>section {  
    height: calc(100vh - 80px); 
    display: flex;
    justify-content: center;
    align-items: center; 
    color:white;
}
/* Definimos la la fuente, el tamaño, el grosor, el margen superior e inferior del encabezado principal y lo centramos*/
header>section>section h1{ 
    font-size: 50px;
    font-weight: 100;
    margin-top: 0px;
    margin-bottom: 6px;
    font-family: Dosis;
    text-align: center;
}
/* Definimos el relleno inferior del bloque*/
header>section>section>div{
    padding-bottom: 50px;
}
/* Definimos el tamaño, la fuente, el grosor, el margen superior del parrafo del vídeo y lo centramos */
header>section>section p{
    font-size: 15px;
    font-weight: 100;
    margin-top: 0px;                     
    font-family: Poppins;
    text-align: center;
}
/* 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: absolute;
    display: none;
    z-index: 5;
    right: 0px;
    top: 60px; 
    width: 100%;
    height: auto; 
} 
/* 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 ul{ 
    display: none;
    padding: 0px;
    list-style: none;
    background-color: white;
    width: 100%;
    margin: 0; 
    opacity: 1;
    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 #353535;
    box-shadow: 10px 10px 5px 0px #00000055;
}
/* El enlace se muestra y el texto que contiene está centrado  */
header>section>section a{
    display: block;
    text-align: center;
}
/* 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  li{
    cursor: pointer;
    padding: 10px;
} 
/* Los enlaces pirden el estilo por defecto */
header nav ul a{
    text-decoration: none;
}
/* El primer elemento de la lista tiene las esquinas superiores redondeadas */
header a:hover:first-of-type>li{
    border-radius: 10px 10px 0px 0px;
}
/* El último elemento de la lista tiene las esquinas inferiores redondeadas */
header a:hover:last-of-type>li{
    border-radius: 0px 0px 10px 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{
    background-color: #E9A219;
}
/* Definimos el relleno, color de fondo y de borde del botón. Definimos la fuente, texto y color del texto que contiene y hacemos que el cursor se transforme en una mano cuando lo pasamos por encima  */
header>section>section button{
    background-color: transparent;
    border: 2px solid white;
    padding: 9px 30px;
    color: white;
    font-size: 18px;
    font-family: Poppins;
    cursor: pointer;
}
/* Al pasar el cursor por encima, el color de fondo y letra del botón cambian mediante una pequeña transición */
header>section>section button:hover{
    background-color: white;
    transition: all 0.5s;
    color: #A3BD31;
}
/* Al clicar en el botón el color de fondo y el del borde cambian */
header>section>section button:active{
    background-color: #E9A219;
    border: 2px solid #E9A219;
    transition: none
}
/* Al pasar el cursor por encima del logo toma un tono sepia */
header #logo:hover{
    filter: sepia(20);
}
/* Al clicar en el logo aparce en blanco y negro */
header #logo:active{
    filter: grayscale(10);
}
/* Cuando la pantalla se desplaza, cambiamos el estilo, cambiando su tamaño, la distancia del top, le ponemos el display como block y le quitamos el greyscale */
header .imgLogoFixed{ 
    width : 140px;
    padding-top: 0px;
    height: auto;
    display: block;
    filter : grayscale(0%);
    transition: all 1s; 
}
/* Fuente del header cuando la pantalla ha sido desplazada, cambiamos su color y tamaño con una transición para el tamaño de fuente */
header .fontHeader {
    color: #353535;
    font-size: 24px;
    transition: font-size 1s, color 0.3s;
} 
/* Asignamos ancho y posición al logo cuando la pantalla no ha sido desplazada. También le ponemos un filtro para que esté en blanco y negro y sea visible sobre el vídeo. Por último le ponemos transicciones para todo para cuando cambie el header a headerFixed*/
header .imgLogo {
    width: 180px;
    padding-top: 5px;
    height: auto;
    display: block;
    filter:  brightness(175%) grayscale(80%);
    transition: all 1s; 
} 
/* Clase del header cuando hemos desplazado, ponemos el color de fondo y le damos una pequeña transicción, también lo ponemos como fixed pegado arriba y le damos un gran z index para que siempre salga por encima de todo lo demás */
header .headerFixed{
    position: fixed;
    top: 0; 
    background-color: white;
    z-index: 30;
    transition: background-color 0.5s ease-in;
} 
/* Clase del header cuando no hemos desplazado, eliminamos el color de fondo y le damos una pequeña transicción */
header .headerFixedOut{
    background-color: none;
    transition: background-color 0.5s ease-out;
}
/* Definimos la fuente para cuando está desplazada la página. Cambiamos color, tamaño, fuente y le damos un tiempo de transicción */
header .fontHeaderFixed{
    color: #353535;
    font-size: 18px;
    font-family: Dosis;
    transition: font-size 1s, color 1s;
} 
/* Color cuando el header esta en active tanto cuando estamos arriba del todo como si no*/
header .fontHeader:hover, #sectionInicio3>div>a>article:active{
    color: #E9A219;
}

/* Color cuando el header esta en active tanto cuando estamos arriba del todo como si no*/
header .fontHeader:active, header .fontHeaderFixed:active{
    color: yellow;
}
/* Forzamos una duración de transicción para los eventos hover y active */
header .fontHeaderFixed:hover, header .fontHeaderFixed:active{
    transition: 0.5s all;
}
/* Color de la fuente en hover cuando el header está desplazado */
header .fontHeaderFixed:hover{
    color: #A3BD31;
}
/* Este contenedor tendrá 3 lineas en forma de menú de hamburguesa. Para ello definimos la altua 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 */
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 el color, ancho y altura de las líneas del menú hamburguesa, con bordes redondeados y cambiando a display block para que cada linea muestre un solo span */
div#menuHamburguesa span{
    background-color: white;
    width: 2.2rem;
    height: .1rem;
    display: block;
    border-radius: 10px;
    transition: all .4s;
} 
/* Definimos el relleno de la sección y lo posicionamos en el centro */
#sectionInicio1{
    padding: 1rem;
    display: flex;
    justify-content: center;
} 
/*Posicionamos en el centro los elementos que contienen ambos bloques*/
#sectionInicio1>div, #sectionInicio3>div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Ancho máximo del bloque y color de los textos que contiene */
#sectionInicio1 article{
    max-width: 30rem;
    color:#353535;
} 
/* Definimos el color del encabezado y lo centramos */
#sectionInicio1 h2{
    text-align: center;
    color: #A3BD31;
}
/* Relleno del texto */
#sectionInicio1 article p{
    padding: 1rem;
}
/* Los elementos de la lista desordenada tendrán una altura en cada línea del 180% */
#sectionInicio1 ul{
    line-height: 180%;
} 
/*Posicionamos los elementos dentro del bloque mediante el grid en 2 columnas y 3 filas, centrandose horizontalmente y hacia abajo horizontalmente. También desplazamos el grid entero hacía arriba con la propiedad margin-top*/
#sectionInicio1>div>div{ 
    display: grid;
    grid-template-columns: [x0] 1fr [x1] 1fr [x2];
    grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3];  
    justify-items: center;
    align-items: flex-end;
    margin-top: -60px;
}
/* El contenedor de las imágenes es circular porque el borde tiene un radio del 50%, y le damos la posición relative para poder modificar su posión sin sobresalir del DOM*/
#sectionInicio1>div>div>div{ 
    border-radius: 50%;
    position: relative;
} 
/* Definimos el ancho y la altura del círculo y lo posicionamos en las 2 columnas y las 2 primeras filas, desplazandolo hacia abajo con la propiedad TOP */
#sectionInicio1>div>div>div#circulo1{
    width: 18rem;
    height: 18rem; 
    top: 30px;
    grid-column: x0 / x2;
    grid-row: y0 / y2;
} 
/* Definimos el ancho y la altura del círculo y lo posicionamos en la segunda columna y la última fila, alineandolo al principio de la fila y desplazandolo hacia arriba con la propiedad TOP */
#sectionInicio1>div>div>div#circulo2{
    width: 11rem;
    height: 11rem; 
    grid-column: x1 / x2;
    grid-row: y2 / y3;
    top:-60px;
    align-self: flex-start;
} 
/* Definimos el ancho y la altura del círculo y lo posicionamos en la primera columna y la última fila , alineandolo al principio de la fila y desplazandolo hacia abajo con la propiedad TOP */
#sectionInicio1>div>div>div#circulo3{
    width: 7rem;
    height: 7rem; 
    grid-column: x0 / x1;
    grid-row: y2 / y3;
    align-self: flex-start;
    top:30px;
}
/* Las imágenes dentro de los círculos ocupan el 100% y también les damos forma de círculo para que se adapten al bloque padre */
#sectionInicio1>div>div>div>img{
    object-fit: cover;
    border-radius: 50%;
    height: 100%;
    width: 100%;
}
/* Estos bloque tienen un ancho del 100% y los elementos que contienen están ubicados en el centro verticalmente. */
#sectionInicio2, #sectionInicio4, #sectionInicio4>article{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
/* Definimos el color de fondo y el relleno de la sección, centrándola. Los textos que contiene serán de color blanco y estarán centrados */
#sectionInicio2{
    padding: 1rem 0;
    background-color: #A3BD31;
    align-items: center;
    text-align: center;
    color: white;
}
/* El ancho del encabezado es del 100% y se encuentra posicionado en el centro */
#sectionInicio2>h2{
    width: 100%;
    display: flex;
    justify-content: center;  
}
/* Elminamos el margen que tiene por defecto */
#sectionInicio2>h2, #sectionInicio4>article>h2, #sectionInicio2>p{
    margin: 0;
}
/* El párrafo de la sección tiene un ancho maxímo de 23rem y ningún relleno, tiene pequeños margenes en cada lado*/
#sectionInicio2>p{
    max-width: 30rem;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
/* A este enlace le hemos dado forma de botón mediante el relleno, le hemos eliminado el estilo por defecto, su color de fondo es transparente y el borde de 2px el tamaño de la letra es de 18 px y la fuente Poppins, al pasar el cursor por encima éste se transforma en una mano indicando que se puede hacer click en él*/
#sectionInicio2>a , #sectionInicio4>article>a{
    background-color: transparent;
    border: 2px solid white;
    padding: 7px 28px;
    font-size: 16px;
    font-family: Poppins;
    cursor: pointer;
    text-decoration: none;
    margin: 1rem 0;
    color: white;
}
/* Al pasar el cursor por encima en una corta transición el color de fondo cambia a blanco y el de la letra a verde */
#sectionInicio2>a:hover{
    background-color: white;
    transition: all 0.5s;
    color: #A3BD31;
}
/* Al hacer click el color de fondo cambia a naranja */
#sectionInicio2>a:active{
    background-color: #E9A219;
    border: 2px solid #E9A219;
    transition: none;
}
/* La sección está centrada */
#sectionInicio3{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Definimos el ancho del bloque, dándoles un pequeño margen y dejando un pequeño hueco entre las filas */
#sectionInicio3>div{
    width: 20rem;
    row-gap: 10px;
    margin: 4rem 1rem;
}
/* Dentro de este artículo el tamaño de los títulos de 28px, las imágenes están en blanco y negro, los elementos hijo en el centro, al pasar el cursor por encima este parará a tener forma de mano indicando que se puede hacer click */
#sectionInicio3>div>a>article{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 28px;
    filter: grayscale(60%);
    justify-content: center;
    color: white;
}
/* El título está centrado, con la fuente Dosis y posicionado por encima de su padre, hereda el tamaño de fuente de su padre */
#sectionInicio3>div>a>article>h3{
   text-align: center;
   font-family: Dosis;
   font-size: inherit;
   position: absolute;
   z-index: 20;
}
/* Al pasar el cursor por encima del artículo el tamaño de la letra se agranda durante un pequeño lapso y la imagen recupera su color original*/
#sectionInicio3>div>a>article:hover{
    font-size: 36px;
    transition: font-size 0.5s;
    filter: none;
}
/* La imagen ocupa el tamaño del padre y se coloca relativa a su posición normal, hereda el filtro de su padre*/
#sectionInicio3>div>a>article>img{
    position: relative;
    filter: inherit;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* Definimos la altura, el relleno y el color de fondo de la sección. Los textos que contienen están centrados y son de color blanco */
#sectionInicio4{ 
    align-items: center;
    background-color: #E9A219;
    padding: 1rem 0;
    text-align: center;
    height: 100%;
    color: white;
}
/* Definimos el ancho máximo del artículo, los elementos demtro del bloque están centrados*/
#sectionInicio4>article{
    align-items: center;
    max-width: 30rem;
}
/* Ambos elementos ocupan el ancho completo */
#sectionInicio4>article>h2, #sectionInicio4 img{
    width: 100%;
}
/* Eliminamos el rellno por defecto del texto y le añadimos un pequeño texto*/
#sectionInicio4>article>p{
    margin: 1rem;
    padding: 0;
}
/* Definimos el ancho y el ancho máximo del contenedor*/
#sectionInicio4>div{
   max-width: 22rem;
   width: 100%;
}
/* Al pasar el cursor por encima del enlace en una corta transición el color de fondo cambia a blanco y el de la letra a naranja */
#sectionInicio4>article>a:hover{
    background-color: white;
    transition: all 0.5s;
    color: #E9A219;
}
/* Al hacer click en el enlace el color de fondo cambia a verde y la letra a color blanco */
#sectionInicio4>article>a:active{
    background-color: #A3BD31;
    border: 2px solid #A3BD31;
    transition: none;
}
/* 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: "“" "”";
}
/*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;
}
/* 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);
}
/* 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 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; 
}
/* DISPOSITIVO TABLET */
@media (min-width: 768px) and (max-width: 1023px){ 
    /* Cambiamos el tamaño del nav para que no ocupe el 100% */
    header nav {
        width: 20rem;
    }
    /* Tamaño del encabezado */
    header>section>section h1{
        font-size: 65px;
    }
    /* Tamaño del encabezado */
    header>section>section h2{
        font-size: 18px;
    }
    /* Tamaño del texto */
    .inicioTitulo{
        font-size: 26px;
    }
    /* Tamaño del encabezado */
    .inicioParrafo{
        font-size: 13px;
    }
    /* Los elementos hijo del bloque se posiconan en fila*/
    #sectionInicio1>div{
        flex-direction: row;
    }
    /* El artículo ocupa el 50% del ancho dentro del bloque */
    #sectionInicio1 article{
        max-width: 50%;
    }
    /* El encabezado empieza desde la izquierda y tiene un pequeño relleno en ese lado*/
    #sectionInicio1 h2{
        text-align: left;
        padding-left: 1rem;
    }
    /* Tamaño del texto */
    header>section>section p{
        font-size: 18px;
    }
    /*Eliminamos el margen supeior del bloque*/
    #sectionInicio1>div>div{
        margin-top: 0px;
    }
    /* Definimos el ancho y la altura del círculo, lo posicionamos dentro de su elemento padre */
    #sectionInicio1>div>div>div#circulo1{
        width: 18rem;
        height: 18rem;
        left: 0px;
        top: -20px;
    }
    /* Definimos el ancho y la altura del círculo, lo posicionamos dentro de su elemento padre */
    #sectionInicio1>div>div>div#circulo2{
        width: 11rem;
        height: 11rem;
        top: -100px;
        left: 0px;
    }
    /* Definimos el ancho y la altura del círculo, lo posicionamos dentro de su elemento padre */
    #sectionInicio1>div>div>div#circulo3{
        width: 7rem;
        height: 7rem;
        left: 0%;
    }
    /* Definimos el ancho y el ancho máximo del párrafo*/
    #sectionInicio2>p{
        max-width: 45rem;
        width: 100%;
    }
    /* el bloque tiene un ancho de 50rem, y un pequeño margen en la parte superior e inferior, con el display grid hubicamos sus elementos hijo en 2 columnas y 3 filas*/
    #sectionInicio3>div{
        width: 50rem;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 10px;
        margin-top: 3rem 3rem;
    }
    /* Definimos la altura del artículo */
    #sectionInicio3>div>a>article{
        height: 23rem;
    }
    /* Definimos el ancho máximo del artículo */
    #sectionInicio4>article{
        max-width: 50rem;
    }
    /* Ancho máximo y tamaño de la letra de la cita */
    p#cita{
       max-width: 40rem;
       font-size: 17px;
    }   
    /* 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;
    }
    /* 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){
    /* Eliminamos el color del fondo, manteniendo el color heredado del elemento de lista cuando pasamos el cursor por encima*/
    header a:hover>li{
        background-color: transparent;
        color: inherit;
    }
    /* Eliminamos el color del fondo, cambiando al color seleccionado del elemento de lista cuando hacemos clicamos en él*/
    header a:active>li{
        background-color: transparent;
        color: #E9A219;
    }
    /* Cambia el color de texto del elemento de la lista al pasar el cursor por encima */
    header .fontHeaderFixed:hover>li{
        color: #A3BD31;
    }
    /* Cambia el color de texto del elemento de la lista al pasar clicar en él*/
    header .fontHeaderFixed:active>li{
        color: #E9A219;
    }
    /* Cambiamos la fuente por defecto a color blanco */
    header .fontHeader {
        color: white; 
    } 
    /* Cambiamos la fuente del ul a color blanco  */
    header div.headerFixed nav>ul .fontHeaderFixed {
        color: white;
    }
    /* Cambiamos la fuente del ul a color blanco  */
    header div.headerFixed nav>ul  .fontHeader {
        color: #353535;
    }
    /* Tamaño de fuente para el H1 que está por encima del video */
    header>section>section h1{
        font-size: 80px;
    }
    /* Tamaño del subtitulo que está encima de vídeo */
    header>section>section p{
        font-size: 20px;
    }
    /* La hamburguesa no estará en la versión de escritorio, así que la ocultamos*/
    div#menuHamburguesa {
        display: none
    }
    /* Ponemos el nav como display block y quitamos la posición absoluta que traía de la versión de móvil */
    header nav {
        height: 100%;
        display: block;
        position: relative;
        top: 0px;
        width: unset;
    }
    /* Ponemos la lista desordenada sin estilo (list-style) y ponemos sus elementos como flex para mostrarlos todos en una fila centrados verticalmente */
    header nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        background-color: transparent;
        height: 100%;
        box-shadow: none;
        border: none;
    } 
    /* Ponemos los anchor como display block en lugar de inline y le añadimos padding y color */
    header nav ul a {
        display: block;
        padding: 0 10px;
        color: white;
    }
    /* Clase que define el tamaño del texto */
    .inicioTitulo{
        font-size: 28px;
    }
    /* Clase que define el tamaño del texto */
    .inicioParrafo{
        font-size: 14px;
    }
    /*Definimos el ancho y ancho máximo, Los elementos hijo del bloque se posiconan en fila */
    #sectionInicio1>div{
        width: 100%;
        max-width: 70rem;
        flex-direction: row;
    }
    /* El artículo ocupa el 50% del ancho dentro del bloque */
    #sectionInicio1 article{
        max-width: 50%;
    }
    /* El encabezado empieza desde la izquierda y le damos un pequeño relleno en el lado izquierdo */
    #sectionInicio1 h2{
        text-align: left;
        padding-left: 1rem;
    }
    /* Debido a la distribución con el grid y los imágenes, tenemos que poner un tamaño mínimo  para su correcta visulacización y le ponemos margen negativo para pegarlo más a la parte superior del div padre.*/
    #sectionInicio1>div>div{
        min-width: 20rem;
        margin-top: -20px;
    }
    /* Definimos el ancho y la altura del círculo */
    #sectionInicio1>div>div>div#circulo1{
        width: 19rem;
        height: 19rem; 
    }
    /* Definimos el ancho y la altura del círculo */
    #sectionInicio1>div>div>div#circulo2{
        width: 11rem;
        height: 11rem; 
    }
    /* Definimos el ancho y la altura del círculo */
    #sectionInicio1>div>div>div#circulo3{
        width: 7rem;
        height: 7rem; 
    }
    /*Definimos el relleno superior e inferior de la sección*/
    #sectionInicio2{
        padding: 2rem 0 1rem 0;
    }
     /* Definimos el ancho máximo del párrafo*/
    #sectionInicio2>p{
        max-width: 70rem;
    }
    /* Les damos un relleno a los contenedores y la letra tendrá un tamaño de 18px*/
    #sectionInicio2>a , #sectionInicio4>article>a{
        padding: 9px 30px;
        font-size: 18px;
    }
    /* el bloque tiene un ancho de 70 rem, con márgenes a los lados, con el display grid hubicamos sus elementos hijo en 2 filas y 3 columnas con un margen de 10px entre ellos*/
    #sectionInicio3>div{
        width: 70rem;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    /* Definimos la altura del bloque y el tamaño de los textos dentro del mismo*/
    #sectionInicio3>div>a>article{
        height: 21rem;
        font-size: 28px;
    }
    /* Definimos la altura y un relleno superior e inferior, los elemntos hijo están colocados en fila */
    #sectionInicio4{
        height: 22rem;
        flex-direction: row;
        padding: 3rem 0;
    }
    /* la anchura del artículo es de 50rem */
    #sectionInicio4>article{
        max-width: 50rem;
    }
    /* Definimos el ancho máximo del texto*/
    #sectionInicio4>article>p{
        max-width: 47rem;
    }
    /* 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;
    }
    /*Definimos la altura de la sección y el pié 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%;
    }
    /* JAVI */
    /* 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 un valle, 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: 2000px){
        /* Se define la altura del footer, la sección y el bloque que contiene */
        footer, footer>section, footer>div{
            height: 750px;
        }
    }
}