:root {
    --family-headings: 'Kaushan Script', 'Poppins', sans-serif;
    --family-body: 'Open Sans', sans-serif;

    /* Primary */
    --white: #ffffff;
    --black: #000000;

    --claro: #e4e4e4;
    --gris: #302f2f;
    --gris-dark: #282726;
    --golden: #c79c60;

    /* Neutral */
    --very-dark-cyan: hsl(192, 100%, 9%);
    --very-pale-blue: hsl(207, 100%, 98%);
    --grayish-blue: hsl(208, 11%, 55%);

    --padding-section: 90px 0;
}

* {
    margin: 0;
    box-sizing: border-box;
    /* outline: 1px solid red; */
}

body {
    font-family: var(--family-body);
    color: var(--white);

    /* position: relative; */
    background-image: url('../images/fondo-pantalla-1920x1080-GrayRock.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    /*filter: brightness(100%);*/  /* Ajusta la altura según necesites */
}


/* CONTENEDORES */
.container {
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding: var(--padding-section); /* Padding solo para el section de 90px 0 */
}



/* NAV */

/* Si quiero el nav en negro tengo que crear un contenedor que contenga el nav y aplicar esto */
.contenedor_nav {
    background-color: black;
} 

.nav {
    background-color: black;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    --padding-section: 0; /* Lo ponemos así por el border-box, no suma el padding (esta propiedad se aplica a todos los de la clase container) */
}

.nav_figure {
    /* Imagen Logo y Título */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.nav_logo, .footer_logo {
    width: 100%;
    max-height: 30px;   
    display: block;
} 

.logo {
    width: 100%;
    height: 40px;
    max-width: 40px;
    height: auto;
}


.tit_logo {
    width: 100%;
    height: 60px;
    max-width: 200px; /* Imagen del título del nav  */
    height: auto;
}

.nav_cta {
    text-decoration: none;
    color: var(--very-dark-cyan);
    font-weight: 700;
    background-color: var(--very-pale-blue);
    padding: .5em 1.5em;/* No va a cambiar el tamaño, su padre no tiene font-size */
    border-radius: 30px;
    box-shadow: 0 0 10px -3px hsl(207, 100%, 98% / .4);
    margin-right: 2px;
}



/* HEADER */
.hero {
    /* background-color: var(--gris); */
    
    --padding-section: 0 0 60px 0; /* Padding en el header solo del bottom */
}


/* Contenido principal del header */
.hero_main {
    /* border: 1px solid white; */
    border-radius: 8px;

    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.9);
    padding-top: 60px; 
    display: flex; /* Para el espaciado entre columnas utilizamos flex-box con gap*/
    flex-direction: column;
    gap: 40px;
    padding-left: 1em;
    padding-right: 1em;
}   

.hero_texts {
    text-align: center;
}


.hero_title {
    font-size: 2rem;
    font-family: var(--family-headings);
    font-weight: 400;
}

.hero_paragraph {
    margin: 1rem 0;
    line-height: 1.5;
}

.button {
    display: inline-block;
    background-color: var(--claro);
    text-decoration: none;
    color: var(--black);
    padding: .7em 2.8em;
    border-radius: 25px;
    box-shadow: 0 0 3px hsl(35, 48%, 58%, .3);
}

.hero_img {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}



/* MAIN */
.main {
    display: flex;
    flex-direction: column;
    gap: 80px;
}



.section {
    /* border: 1px solid white; */
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--claro);
    width: 98%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 60px;

    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.9);
    
    border-radius: 8px;
    /* padding: 2em 1em;  */
}

.section_img {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
    /* border-radius: 8px; */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}



.section_texts {
    text-align: center;
    padding: 0em 1em 2em 1em
    
}

.section_title {
    /* color: var(--white); */
    font-size: 1.8rem;
    font-family: var(--family-headings);
}

.section_paragraph {
    margin-top: 1em;
    line-height: 1.5;
    /* color: var(--white); */
}

/* Seccion redes */
.section-instagram {
    width: max-content;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.section-instagram {
    margin: auto;
    width: 100%;
}

/* EMAIL */
.email {
    padding: var(--padding-section);
    /* background-color: #fff;
    background-image:linear-gradient(
        #fff 50%, 
        var(--gris) 50%
    ); */
    background-image:linear-gradient(
        rgba(255, 255, 255, 0.0) 50%, 
        var(--gris) 50%
    ); 
}

.email_container {
    color: var(--gris-dark);
    max-width: 700px;
    background-color: #fff;
    text-align: center;
    padding: 3em 2em;
    box-shadow: 0 0 3px hsl(192, 100%, 9%, .3);
    border-radius: 8px;
} 

.email_title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
    font-family: var(--family-headings);
}

.email_submit.button {
    background-color: var(--gris);
    color: white;
}

.email_submit.button:hover {
    color: #c79c60;
}




/* main::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0; */
    /*background-color: rgba(0, 0, 0, 0.5); *//* Cambia el valor de 0.5 para más o menos oscuridad  */
    /*z-index: 1;*/ /* Asegúrate de que esté por encima de la imagen */
/* } */


/* FOOTER */
.footer {
    background-color: var(--gris);
}

.footer_logo {
    max-width: 275px;
    max-height: auto;
    display: block;
    margin-bottom: 30px;
}

.footer_directions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer_paragraph {
    color: #fff;
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.footer_icon {
    position: relative;
    top: 4px;
}

.footer_list {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer_list_first {
    margin: 30px 0 20px;
}

.footer_item {
    color: #fff;
}

.footer_link {
    color: #fff;
    text-decoration: none;
}

.footer_contact {
    margin-top: 30px;
    color: #fff;
    text-align: center;
}

.footer_socialmedia {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer_media {
    display: inline-flex;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.footer_copy {
    margin-top: 30px;
}

.footer_figure {
    /* Imagen Logo y Título (igual a nav_figure excepto width y justify-content) */
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer_socialmedia a:hover {
    border: 1px solid #c79c60;
}


/* PÁGINA CONTACTO */

.section-contacto iframe {
    margin: auto;
    width: 100%;
    border-radius: 8px;
    max-width: 440px;
}

.main-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
}

.section-contacto {
    border-radius: 12px;
    margin: 20px auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.4);
}





#iconh1 {
    font-size: 16px;
}

/* video */
video {
    width: 90%;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.4);
    display: block;
}

/* PÁGINA CARTA */
.main.carta {
    gap: 10px;
    /* width: 55%; */
    --padding-section: 40px 0;
}






/* Mediaquery */
@media (min-width: 768px) {
    /* NAV */
    .logo {
        width: 100%;
        height: 47px;
        max-width: 47px;
        height: auto;
    }
    
    
    .tit_logo {
        width: 100%;
        height: 60px;
        max-width: 280px; /* Imagen del título del nav  */
        height: auto;
    }

    .nav_cta {
        padding: .8em 3.5em;/* No va a cambiar el tamaño, su padre no tiene font-size */
    }

    .nav_figure {
        /* Imagen Logo y Título */
        gap: 20px;
    }

    /* Contenido principal del header */
    .hero_main {
        flex-direction: row-reverse;
        align-items: center;
        gap: 70px;
    }   

    .hero_texts {
        text-align: left;
        width: 50%;
    } 

    .hero_title {
        font-size: 2.5rem;
    }

    .hero_figure {
        width: 50%;
        display: flex;
        align-items: center;
    }

    .hero_img {
        max-width: unset; /* Vuelve a su valor original*/
    }

    /* Sección */
    .main {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .section {
        padding: 4em 2.5em;
        flex-direction: row;
        align-items: center;
        text-align: left;
    }


    /* Revertimos la imagen del segundo contenedor  (Para ser más escalable, sería mejor .section:nth-child(odd)) */
    /* .section--reverse {
        flex-direction: row-reverse; 
    } */

    /* Revertimos la imagen del segundo contenedor  (Para ser más escalable, sería mejor .section:nth-child(odd)) */
    main .section:nth-child(even) {
        flex-direction: row-reverse; 
    }

    .section_img {
        border-radius: 8px;
        width: 100%;
        max-width: 400px;
        display: block;
        margin: 0 auto;
    }

    .section_figure {
        width: 50%;
    }

    .section_texts {
        text-align: inherit; /* Hereda de su padre */
        width: 50%;
    }

    .section_title {
        color: var(--claro);
        font-size: 1.8rem;
        font-family: var(--family-headings);
    }

    .section_paragraph {
        margin-top: 1em;
        line-height: 1.5;
        
    }

    /* Email */


    /* Footer */

    .footer_container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer_figure {
        width: 100%;
        justify-content: start;
    }

    .footer_logo {
        margin-bottom: 0;
        max-width: 300px;
    }

    .footer_directions {
        width: min-content;
    }

    .footer_list {
        width: max-content;
    }

    .footer_list_first {
        margin: 0;
    }

    .footer_contact {
        display: flex;
        flex-direction: column;
        width: 30%;
        margin-top: 0;
    }

    .footer_socialmedia {
        justify-content: flex-start;
    }

    .footer_media {
        display: inline-flex;
        border: 1px solid #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
    }

    .footer_copy {
        margin-top: auto;
    }

    /* PÁGINA CONTACTO */

    .main-contacto {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }



    .nav_logo, .footer_logo {
        width: auto;  
        max-height: 35px;
    } 

    /* PÁGINA CARTA */
    .main.carta {
        width: 55%;
    }

    /* video */
    video {
        max-width: 450px;
    }


    }