/* @group Site Nav
------------------------------------ */


.site-nav {
    position: fixed;
    z-index: var(--z-index-site-nav);
    top: 0;
    width: 100%;
    background: var(--background);
    padding-block: var(--paddingBlock);
    transition: opacity var(--transitionDelay), transform var(--transitionDelay);
    isolation: isolate;

    /* Promo Bar */
    transform: translateY(var(--heightPromotional));

    /* General */
    --paddingBlock: 1.1rem;
    --transitionDelay: .6s;
    /* Background */
    --background: var(--darkest-purple);
    /* Links Menú */
    --gapLinksMenu: 2rem;
    --colorLinks: var(--white);
    --colorLinksHover: var(--white);
    --colorLinkActive: var(--white);
    --colorLinksLightMenuHover: var(--white);
    /* Bttn Menú */
    --colorIconMenu: var(--white);
    --sizeIconMenu: 2rem;
    /* CTA */
    --buttonText: var(--white);
    --buttonBackground: var(--brown);
    --buttonBorder: var(--white);
    --buttonTextHover: var(--white);
    --buttonBackgroundHover: transparent;
    --buttonBorderHover: var(--white);
    --buttonHeightMobile: 3.5rem;
    /* Logo */
    --widthLogo: 5.5rem;
}

.site-nav *:not(a, button, .menu-main-menu-container) {
    transition: opacity var(--transitionDelay);
}

.site-nav .main-menu a {
    text-decoration: none;
    font: inherit;
    --transitionDelay: .3s;

    font-weight: var(--fw);
    font-size: var(--fs);
    line-height: var(--lh);
    letter-spacing: var(--ls);

    font-family: var(--font-berthold-ex);

    text-transform: uppercase;

    --fw: 400;
}

.site-nav .main-menu a:hover {
    text-decoration: underline;
}

.site-nav .logo-col {
    text-align: center;
}

.site-nav .logo {
    width: var(--widthLogo);
    height: auto;
}

.site-nav .logo img {
    object-fit: contain;
}

.site-nav .button-menu {
    font-size: var(--sizeIconMenu);
    color: var(--colorIconMenu);
}

.site-nav .button-menu i {
    pointer-events: none;
}
body[data-menu="openedMenu"] .site-nav .button-menu i {
    margin-right: .8rem;
}

.site-nav .toggle-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}

.site-nav .menu-col {
    --_w: 100%;
    --_h: 100vh;
    /* --_h: 100svh; */
    isolation: isolate;
}

.site-nav .menu-col .main-menu {
    display: flex;
    gap: var(--gapLinksMenu);
    position: relative;
}

.site-nav .menu-col .main-menu li {
    color: var(--colorLinks);
    --transitionDelay: .3s;
}

.site-nav .menu-col .main-menu li:is(.current_page_item) {
    color: var(--colorLinkActive);
}

.site-nav .menu-col .bg {
    z-index: 1;
}

.site-nav .menu-col .main-menu {
    position: relative;
    z-index: 2;
}

.site-nav .buttons-col .bp-button {
    --_bg: var(--buttonBackground);
    --_color: var(--buttonText);
    --_icon: var(--buttonText);
    --_border: var(--buttonBorder);
    align-items: center;
    justify-content: center;

}


.site-nav .buttons-col .bp-button:hover {
    --_bg: var(--buttonBorder);
    --_color: var(--darkest-purple);
    --_icon: var(--darkest-purple);
    --_border: var(--buttonBorder);
}

.site-nav .menu-main-menu-container {

    --background: var(--light-purple);
    transition: 0.5s;


    padding-inline: calc(var(--p-inline) * 1.4);
    padding-top: 16rem;



    background: var(--background);
    overflow-y: auto;

}

.site-nav :is(.bg, .menu-main-menu-container) {
    position: absolute;
    left: calc((var(--p-inline,0) + (var(--gap-desktop) * 0.5)) * -1);
    top: calc(var(--paddingBlock) * -1);

    width: var(--_w);
    height: var(--_h);

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* isolation: isolate; */
}


.site-nav .logo-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-nav .phone-wrapper {
    font-size: 2.7rem;
    display: flex;
    align-items: center;
    color: var(--white);
}

/* Sticky Version
------------------------------------ */
/* body:is(.pinedHeader) .site-nav {
    --widthLogo: 8rem;
    --paddingBlock: 1.1rem;
} */

/* Light Version
------------------------------------ */
body:is(.has-light-nav):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav {
    --background: transparent;
    --colorLinks: var(--cream);
    --colorIconMenu: var(--cream);
}

body:is(.has-light-nav):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav .light {
    display: inline-block;
}

body:not(.has-light-nav) .site-nav .light,
body:is(.has-light-nav):is(.pinedHeader, [data-menu="openedMenu"]) .site-nav .light,
body:is(.has-light-nav):not(.pinedHeader, [data-menu="openedMenu"]) .site-nav .dark {
    display: none;
}



body[data-menu="openedMenu"] .site-nav .menu-col :is(.menu-main-menu-container, .bg) {
    opacity: 1;
    visibility: visible;
}

body[data-menu="openedMenu"] .site-nav .menu-col .menu-main-menu-container {
    pointer-events: all;
}

body[data-menu="openedMenu"] .site-nav .button-menu i::before {
    content: "\e908";
    color: var(--darkest-purple);
}
.site-nav .bttn-wrapper a p {
    font-weight: 500;
}


@media only screen and (min-width: 961px) {
    .site-nav {
        --gapLinksMenu: 5.1rem;
        --widthLogo: 9.341rem;
        --paddingBlock: 2.2rem;
        --p-inline: calc(var(--row-desktop-padding) - var(--gap-desktop));
        padding-inline: var(--p-inline);
        box-shadow: 0 3px 7px 2px rgba(0, 0, 0, 0.25);
        --sizeIconMenu: 2.7rem;

    }

    .site-nav .menu-main-menu-container {
        left: calc(var(--p-inline) * -1);
    }


    .site-nav .menu-col {
        --_w: 26.3vw;
    }

    .site-nav .menu-col .main-menu {
        flex-direction: column;
    }

    .site-nav .buttons-col {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--gapLinksMenu);
    }

    .site-nav .nav-wrapper {
        justify-content: space-between;
    }

    .site-nav .bttn-wrapper {
        display: flex;
        gap: 3.1rem;
    }

    .site-nav a {
        --fs: 2.4rem;
        --ls: 0.166em;
        --lh: 1em;
    }

    .site-nav .nav-wrapper {
        position: relative;
    }

    .site-nav .phone-wrapper {
        position: absolute;
        right: 0;
        top: 50%;
        translate: 0 -50%;
        width: unset;
    }

    .site-nav .buttons-col {
        translate: -5rem 0;
    }
    .site-nav .logo-col { height: 7.7rem; }
    .site-nav .logo { position: fixed; left: calc(50% - 4.6rem); }
    /* Light & Dark Version
	------------------------------------ */
    body:is(.has-light-nav):not(.pinedHeader) .site-nav {
        --buttonText: var(--brown);
        --buttonBackground: var(--cream);
        --buttonBorder: var(--cream);
    }

    body:not(.has-light-nav) .site-nav .menu-col .main-menu li:not(.current_page_item):hover {
        color: var(--colorLinksHover);
    }

    body:is(.has-light-nav):not(.pinedHeader) .site-nav .menu-col .main-menu li:not(.current_page_item):hover {
        color: var(--colorLinksLightMenuHover);
    }

    /* Sticky Version
	------------------------------------ */
    /* body:is(.pinedHeader) .site-nav {
        --widthLogo: 12rem;
    } */
}

@media only screen and (min-width: 1728px) {
    .site-nav {
        --p-inline: 3.8vw;
        padding-inline: calc(var(--p-inline) + (var(--gap-desktop) * 0.5));
    }

    .site-nav .menu-main-menu-container {
        left: calc((var(--p-inline) + (var(--gap-desktop) * 0.5)) * -1);
    }
}

@media only screen and (min-width: 0) and (max-width: 960px) {

    .site-nav {
        padding-bottom: 0rem;
    }

    .site-nav .mobile-row {
        justify-content: space-between;
        padding-inline: var(--row-mobile-padding);

    }

    .site-nav .menu-col {
        position: absolute;
        flex: 0;
    }


    .site-nav .menu-col .menu-main-menu-container {
        left: calc(var(--row-mobile-padding) * -1);
        right: 0;
    }

    .site-nav .menu-col .main-menu {
        flex-direction: column;
        align-items: center;
    }

    .site-nav :is(.toggle-col, .logo-col, .phone-wrapper) {
        flex: 0 0 fit-content;
    }

    .site-nav .buttons-col {
        flex: 1 0 100vw;
        left: 50%;
        translate: -50%;
        max-width: none;
        margin-top: 1rem;
    }

    .site-nav .buttons-col .bp-button {
        border-inline: none;
    }

    .site-nav .buttons-col .bttn-wrapper {
        bottom: -3.1rem;
        inset-inline: 0;
        z-index: calc(var(--z-index-site-nav) - 1);
    }

    .site-nav .buttons-col .bttn-wrapper .bp-button {
        height: var(--buttonHeightMobile);
        width: 100%;
        text-align: center;
    }

    .site-nav .main-menu a {
        --fs: 2.4rem;
    }

    body[data-menu="openedMenu"] {
        overflow: hidden;
    }
}

#wrapper>section.container:first-of-type {
    margin-top: calc(var(--heightNav, 9.3rem) + var(--heightPromotional,0px));
}

/* @end */

.home:not(.preloaded) .site-nav {
    opacity: 0;
}

.home:not(.preloaded) .promo-bar {
    opacity: 0;
}