:root {
    --primary-blue: #314b97;
    --secondary-blue: #3548b4;
    --nav-bg: #3952c4;
    --light-blue: #719dee;
    --dark-blue-btn: #2a2080;
    --white: #ffffff;
    --black: #000000;
    --gray-dark: #333333;
    --gray-medium: #b6b6b6;
    --gray-light: #d9d9d9;
    --gray-text: #424242;
    --overlay-black: rgba(0, 0, 0, 0.534);
    --modal-shadow: rgba(0, 0, 0, 0.7);
}

html {
    font-family: "Roboto", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    width: 100%;
    background-color: var(--white);
}

#image_header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

#image_header img {
    max-width: 300px;
    height: auto;
    padding: 1rem;
}

nav {
    /* border-bottom: 1px solid #b6b6b6;*/
    background-color: var(--nav-bg);
    transition: transform 0.5s ease;
    will-change: transform;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

nav li {
    display: flex;
}

nav a {
    text-decoration: none;
    font-size: 0.9em;
    display: flex;
    background-color: var(--secondary-blue);
    color: white;
    padding: 1rem 1rem;
    transition: background-color, color, 0.4s ease;
    text-align: center;
}

.active_link {
    background-color: var(--secondary-blue);
    border-bottom: 4px solid var(--white);
}

nav a:hover {
    background-color: #e6eaff;
    color: var(--secondary-blue);
}

#open_sidebar_button {
    display: none;
    background: none;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    padding: 1rem;
    cursor: pointer;
}

#open_sidebar_button svg {
    fill: var(--dark-blue-btn);
    /* color de boton para abrir menu */
}

#close_sidebar_button {
    display: none;
    background: none;
    border: none;
    padding: 1rem;
    cursor: pointer;
}

#close_sidebar_button svg {
    fill: var(--white);
    /* color de boton para cerrar menu */
}

#overlay {
    background-color: var(--overlay-black);
    /*color de overlay al arbrir sidebar*/
    position: fixed;
    width: 100vw;
    inset: 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}


/* Estilos de Index*/
.index_welcome_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    width: 100%;
    min-height: 700px;
    color: rgb(255, 255, 255);
    background-image: url("./img/serene_edit_wood.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.index_welcome_container h2 {
    max-width: 850px;
    text-align: right;
    margin-right: 8vw;
    font-size: 3.2em;
    font-weight: 1000;
    color: var(--white);
}

.index_welcome_container p {
    max-width: 550px;
    text-align: right;
    font-size: 1.4em;
    font-weight: lighter;
    margin-right: 8vw;
    margin-top: 0.7em;
}

#index_products_title {
    width: 50vw;
    font-size: 2rem;
    padding-left: 8rem;
    padding-right: 1rem;
    color: var(--primary-blue);
    text-align: left;
}

#index_products_title p {
    font-size: 1.4rem;
    color: var(--gray-text);
}


.index_products_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    min-height: 750px;
}

.index_products_wrapper {
    width: 50vw;
    min-height: 600px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 15px 7vw 15px 0;
}

.index_product_card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    gap: 10px;
    color: white;
    overflow: hidden;
}

.index_product_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    z-index: -1;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.index_product_card:hover::before {
    filter: blur(5px) brightness(0.5);
    transform: scale(1.1);
}

.index_product_card h3 {
    font-size: 1.5rem;
}

.index_p_button {
    border: solid 2px white;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    background-color: white;
    border-radius: 50px;
    transition: background-color, color, 0.4s ease;
}

.index_p_button:hover {
    background-color: transparent;
    color: rgb(255, 255, 255);
}

.index_mercados_title {
    text-align: center;
    padding: 4rem 2rem 1rem 2rem;
    color: var(--primary-blue);
    font-size: 1.7rem;
}

.index_mercados_title p {
    font-size: 1.4rem;
    color: var(--gray-text);
}

.index_mercados_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px 100px 20px;
}

.index_mercado_card a {
    color: white;
    font-weight: 750;
}

.index_mercado_card {
    position: relative;
    width: 200px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    gap: 10px;
    color: white;
    overflow: hidden;
}

.index_mercado_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    z-index: -1;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.index_mercado_card:hover::before {
    filter: blur(5px) brightness(0.5);
    transform: scale(1.1);
}

/*Estilos para mercados*/

.categories_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1rem 4rem 1rem 4rem;
}

.mercado_seccion {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.mercado_seccion_img {
    width: 300px;
    height: 600px
}

.mercado_seccion_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mercado_text_wrapper {
    display: flex;
    width: 300px;
    height: 600px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 4rem 1rem 1rem 1rem;
    gap: 3rem;
    background-color: var(--light-blue);
}

.mercado_text_wrapper h3 {
    font-size: 1.5rem;
    color: var(--white);
}

.mercado_text_wrapper p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--white);
}

.btn_abrir {
    
    padding: 0.7rem 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    width: fit-content;
    color: var(--white);
    background-color: var(--primary-blue);
    border-radius: 50px;
    transition: background-color, color, 0.4s ease;
    cursor: pointer;
}

.btn_abrir:hover {
    background-color: var(--gray-light);
    color: var(--primary-blue);
}

/* El fondo oscuro del modal */
.modal_overlay {
    position: fixed;
    inset: 0;
    /* top, left, right, bottom = 0 */
    background-color: var(--modal-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    /* Efecto de desaparición/aparición */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Cuando el modal está activo */
.modal_overlay.active {
    opacity: 1;
    visibility: visible;
}

/* La caja blanca del contenido */
.modal_content {
    background: white;
    padding: 2.5rem;
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    position: relative;
    transform: translateY(-20px);
    /* Empieza un poco más arriba */
    transition: transform 0.4s ease;
}

.modal_content h2 {
    font-size: 2rem;
}

.modal_overlay.active .modal_content {
    transform: translateY(0);
}

.btn_cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 2rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-dark);
}

.categorias_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.categoria ul {
    list-style: none;
}

.categoria ul li {
    margin-bottom: 8px;
}

.categoria a {
    color: #555;
    text-decoration: none;
    font-size: 1.4rem;
}

.categoria a:hover {
    color: var(--secondary-blue);
    text-decoration: underline;
}

footer {
    background-color: var(--primary-blue);
    font-size: 1.2rem;
    color: white;
    text-align: center;
    line-height: 1.5rem;
    padding: 3rem 2rem;
    margin-top: auto;
}

footer img {
    width: 125px;
    margin-bottom: 0.7rem;
}

#location_footer {
    font-size: 1.4rem;
    color: var(--white);
}

#phone_footer {
    font-size: 1.4rem;
    color: var(--white);
}

/*NUEVO ESTILOS PRODUCTOS */

.product_header_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 550px;
    background-color: var(--light-blue);
}

.product_image_header_cotainer {
    width: 50%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.product_image_header_cotainer img {
    max-width: 400px;
    height: auto;
}

.product_text_header_container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1rem 15vw 1rem 1rem;
    gap: 1rem;
    color: white;
}

.product_text_header_container h2 {
    font-size: 4rem;
}

.product_text_header_container p {
    font-size: 1.4rem;
    line-height: 2rem;
}

.product_marketing_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
    height: auto;
    width: 100%;
}

.product_marketing_text {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4rem;
}

.product_marketing_text h3 {
    font-size: 3rem;
    color: var(--primary-blue);
}

.product_marketing_text p {
    font-size: 1.4rem;
    line-height: 2rem;
    color: var(--gray-dark);
}

.product_marketing_text_alt {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4rem;
}

.product_marketing_text_alt h3 {
    font-size: 3rem;
    color: var(--primary-blue);
}

.product_marketing_text_alt p {
    font-size: 1.4rem;
    line-height: 2rem;
    color: var(--gray-dark);
}

.product_marketing_image {
    width: 50%;
    height: 650px;
    overflow: hidden;
}

.product_marketing_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    overflow: hidden;
}

.product_characteristics {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 7rem 3rem;
    background-color: var(--light-blue);
    color: white;
}

.product_characteristics h2 {
    font-size: 3rem;
    padding-bottom: 1rem;
    text-align: center;
}

.characteristics_list {
    list-style-type: disc;
    column-count: 2;
    column-gap: 10vw;
}

.characteristics_list li {
    break-inside: avoid;
    font-size: 1.4rem;
    line-height: 1.8rem;
    max-width: 30vw;
    padding-top: 0.5rem;
}

.product_options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 7rem 1rem;
}

.product_options_text {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding-bottom: 2rem;
    text-align: center;
}

.product_options_text h3 {
    font-size: 3rem;
    color: var(--primary-blue);
    padding-bottom: 1rem;
}

.product_options_text p {
    font-size: 1.4rem;
    line-height: 2rem;
}

.product_options_images {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding: 3rem 2rem;
}

.lever_container {
    transition: transform 0.3s ease;
}

.lever_container:hover {
    transform: scale(1.2);
}

.lever_container img {
    width: 200px;
    height: auto;
}

.lever_container h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.color_container {
    transition: transform 0.3s ease;
}

.color_container:hover {
    transform: scale(1.2);
}

.color_container img {
    width: 60px;
    height: auto;
}

.color_container h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-blue);
}

/* Modificador para Imagen Vertical */
.product_cerradura.is_vertical .product_image_container img {
    width: auto;
    height: 100%;
}

/* Estilos para iconos google*/
.material-symbols-outlined {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-blue);
}

/* Estilos Upgrade */

#key {
    color: var(--white);
    font-size: 5rem;
}

#update {
    color: var(--white);
    font-size: 5rem;
}

#search { 
    color: var(--primary-blue);
    font-size: 5rem;
}

.upgrade_welcome_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 700px;
    color: rgb(255, 255, 255);
    background-image: url("./img/upgrade_header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.upgrade_welcome_container h2 {
    max-width: 90vw;
    text-align: center;
    font-size: 3.2em;
    font-weight: 1000;
    color: var(--white);
}

.upgrade_welcome_container p {
    max-width: 90vw;
    text-align: center;
    font-size: 1.4em;
    font-weight: lighter;
}

.upgrade_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center; 
}

.upgrade_block {
    height: stretch;
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14rem 10%;
}

.upgrade_block p{
    font-size: 1.4rem;
    line-height: 2rem;
}

#upgrade_text_1 {
    background-color: var(--primary-blue);
    color: #ffffff;
}

#upgrade_text_2 {
    background-color: #4f6dc7;
    color: #ffffff;
}

.upgrade_block_image {
    height: stretch;
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 14rem 10%;
}

.upgrade_divider {
    margin-left: auto;
    margin-right: auto;
    width: 35%;
    height: 2px;
    background-color: var(--white);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#divider_negative {
    background-color: var(--primary-blue);
}

.contact_container {
    display: block;
    text-align: center;
    padding: 6rem;
    background-color: #4f6dc7;
    color: white;
}

.contact_container h3{
    font-weight: 500;
}

.upgrade_container a{
    color: var(--gray-medium);
    font-weight: 900;
    transition: color 0.5s ease;
}

.upgrade_container a:hover{
    color: var(--dark-blue-btn);
}

#upgrade_image_1 {
    background-image: url(../assets/img/upgrade_image_1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#upgrade_image_2 {
    background-image: url(../assets/img/upgrade_image_2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Estilos de NOSOTROS */
.upgrade_block h2{
    font-size: 3rem;
}

/* Estilos de CONTACTO */

.contacto_pais_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5rem;
    gap: 3rem;
}


.contacto_text_block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bandera_maps {
    display: flex;
    width: 50vw;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 1rem;
}

.nombre_pais {
    display: none;
}

.bandera_pais img {
    width: 300px;
    height: auto;
    border: 2px solid var(--gray-light);
}

.contacto_title {
    color: var(--primary-blue);
    font-size: 1rem;
}

.contacto_gerente {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-blue);
}

.contacto_pais_text_container {
    width: 50vw;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contacto_pais_text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
}

.contacto_divider {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: 2px;
    background-color: var(--gray-medium);
    margin-top: 1rem;
    margin-bottom: 1rem;
}



/* el breakingpoint 800px es debido al font size de los enlaces (en nav a), se puede usar un breaking point menor si se ajusta eso, o el padding de los enlaces del navbar, precaución: los paddings de los enlaces se mantienen en el breakingpoint */

@media screen and (max-width: 800px) {
    #close_sidebar_button {
        display: block;
    }

    #open_sidebar_button {
        display: block;
        z-index: 9;
    }

    /* Originalmente seguí un tutorial que sugería usar right -100% para poner el sidebar por defecto fuera de la pantalla, y después en nav.show simplemente poner right "0", y después transition: right en nav, pero resulta que este metodo de animación es demasiado demandante en términos de procesamiento, y si en cambio utilizamos transform: translateX para manejar la transición de posición para cualquier cosa, la animación es muy fluida incluso en pc's de muy baja gama. Muy recomendado. */

    nav {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(15rem, 100%);
        z-index: 10;
        border-left: 1px solid var(--gray-medium);
        border-bottom: none;
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }

    .show {
        transform: translateX(0);
    }

    /* Comentario relevante debugger: inicialmente este selector era solo .overlay_show, pero esto presentaba el problema que los selectores de ID (#) toman prioridad por sobre clases en CSS, entonces, a pesar de que la clase estaba siendo agregada correctamente, el estilo ID previo toma prioridad. Este problema no surge con el estilo de cosas como nav, porque en CSS el orden de prioridad es ID>CLASS>TAGS (es mas profundo el grupo de cada priporidad, pero es para entender este caso). La solución simple es agregar el selector del id original más la clase overlay_show, de esta forma le agregas mayor prioridad a este selector. Un selector con solo ID tiene prioridad 1.0.0, un selector de id mas clase tiene prioridad 1.1.0, de esta forma se antepone al estilo del id declarado antes del breakingpoint */

    #overlay.overlay_show {
        opacity: 1;
        visibility: visible;
        cursor: pointer;
    }

    nav ul {
        width: 100%;
        flex-direction: column;
    }

    nav a {
        width: 100%;
    }

    .active_link {
        border-bottom: none;
    }

    .index_welcome_container {
        align-items: center;
        background-image: url(../assets/img/serene_edit_wood_center.jpg);
    }

    .index_welcome_container h2 {
        font-size: 2rem;
        text-align: center;
        margin-left: 35px;
        margin-right: 35px;
        color: white;
    }

    .index_welcome_container p {
        font-size: 0.9rem;
        text-align: center;
        margin-left: 35px;
        margin-right: 35px;
    }

    /*Este ajuste es para eliminar delay de animaciones en móvil sin romper las animaciones en desktop*/
    .index_product_card[data-aos] {
        transition-delay: 0s !important;
    }

    .index_products_container {
        flex-direction: column;
    }

    #index_products_title {
        width: 100%;
        padding: 50px 35px 10px 35px;
        text-align: center;
    }

    .index_products_wrapper {
        gap: 10px;
        width: 90vw;
        min-height: 0px;
        grid-template-columns: repeat(1, 1fr);
        padding: 15px 35px 15px 35px;
    }

    /* Mercados */

    .mercado_seccion_img {
        width: 50vw;
        height: 600px
    }

    .mercado_text_wrapper {
        display: flex;
        width: 50vw;
        height: 600px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        padding: 4rem 1rem 1rem 1rem;
        gap: 3rem;
        background-color: var(--light-blue);
    }


    /* Estilos para productos en mobile */
    .product_header_container {
        flex-direction: column;
        padding: 0;
    }

    .product_image_header_cotainer {
        width: 100%;
        justify-content: center;
        padding: 2rem 0 0.5rem 0;
    }

    .product_image_header_cotainer img {
        max-width: 80%;
    }

    .product_text_header_container {
        width: 100%;
        padding: 0 1rem 4rem 1rem;
        align-items: center;
        text-align: center;
    }

    .product_marketing_container {
        flex-direction: column;
    }

    .product_marketing_text {
        width: 100%;
        padding: 4rem 3rem;
        align-items: center;
        text-align: center;
    }

    .product_marketing_text_alt {
        width: 100%;
        padding: 4rem 3rem;
        align-items: center;
        text-align: center;
        background-color: var(--light-blue);
    }

    .product_marketing_text_alt h3,
    .product_marketing_text_alt p {
        color: white;
    }

    .product_options_images {
        flex-direction: column;
    }

    .product_marketing_image {
        display: none;
    }

    .product_characteristics {
        background-color: white;
        color: black;
    }

    .product_characteristics h2 {
        color: var(--primary-blue);
    }

    .characteristics_list {
        column-count: 1;
    }

    .characteristics_list li {
        max-width: 70vw;
        color: var(--gray-dark);
    }

    .product_options_text {
        width: 80%;
    }

    /*Este ajuste es para eliminar delay de animaciones en móvil sin romper las animaciones en desktop*/
    .product_cerradura[data-aos] {
        transition-delay: 0s !important;
    }

    /* Estilos para upgrade en mobile */
    .upgrade_container {
        flex-direction: column;
    }

    .upgrade_block {
        width: 100%;
    }

    .upgrade_block_image {
        display: none;
    }

    /* Estilos para contacto en mobile */
    .contacto_pais_container {
        flex-direction: column;
        padding: 3rem;
    }

    .bandera_maps {
        width: 100%;
        align-items: center;
        flex-direction: column;
        gap: 0;
    }

    .nombre_pais {
        display: block;
        color: var(--primary-blue);
        font-size: 2rem;
        padding: 1rem;
    }

    .bandera_pais {
        display: none;
    }

    iframe {
        width: 250px;
        height: 150px;
    }

    .contacto_title {
        text-align: center;
    }

    .contacto_pais_text_container {
        width: 100%;
    }

    .upgrade_container {
        flex-direction: column;
    }
}