.header-new {
    &.relative {
        position: relative;
    }

    &__nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        @media (--viewport-ms-max) {
            flex-direction: column;
            align-items: flex-end;
            justify-content: unset;
        }

        .link {
            /* Mientras no se aplique la definición de DS a los links (CA.R.) */
            font-family: var(--font-family-sans-low);
            font-weight: 400px;
        }

        .logo {
            max-height: 20px;
            width: auto;
        }

        .brandWrap {
            @media (--viewport-ms-max) {
                display: flex;
            }

            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding-left: 20px;
            height: 50px;

            .hamburger {
                margin-right: 20px;
                line-height: 0;

                &:hover,
                &:focus {
                    .icon {
                        fill: var(--color-accent-dark);
                    }
                }
            }
        }

        .header-new__overlay {
            display: flex;
            width: 100%;

            @media (--viewport-ms-max) {
                display: none;
            }

            .header-new__wrap {
                display: flex;
                flex-direction: column;
                width: 100%;

                .close {
                    display: none;
                    justify-content: flex-end;
                    margin-bottom: 30px;
                    width: 100%;
                }

                .header-new__top {
                    display: flex;
                    justify-content: space-between;
                    height: 50px;
                    align-items: center;

                    @media (--viewport-ms-max) {
                        height: auto;
                        flex-direction: column-reverse;
                        align-items: flex-start;
                        gap: 48px;
                        margin-top: 48px;
                    }

                    .innerWrap {
                        @media (--viewport-sm-min) {
                            display: flex;
                        }

                        justify-content: flex-start;
                        align-items: center;
                        gap: 40px;
                        margin-left: 40px;

                        @media (--viewport-ms-max) {
                            margin: 0;
                        }

                        .contactInfo {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            gap: 10px;

                            &>.bodycopy-xs {
                                color: var(--color-accent-dark);
                                line-height: 0;

                                a,
                                a:visited,
                                a:focus {
                                    color: var(--color-text);
                                }

                                &+.bodycopy-xs {
                                    color: var(--color-text);
                                }
                            }

                            >.bodycopy-xs,
                            >.bodycopy-xs+.bodycopy-xs {
                                @media (--viewport-ms-max) {
                                    display: none;
                                }
                            }

                            >.icon {
                                top: -2px;
                            }

                            .tooltip {
                                position: relative;
                                top: 2px;
                                left: 0;
                                z-index: 99999;

                                @media (--viewport-ms-max) {
                                    top: unset;
                                    right: unset;

                                    .icon-16_tooltip {
                                        display: none;
                                    }

                                    .msg-tooltip.contact-info {
                                        span.arrow {
                                            display: none;
                                        }

                                        width: auto;
                                        left: unset;
                                        padding: unset;
                                        top: unset;
                                        visibility: visible;
                                        opacity: 1;
                                        position: relative;
                                        background-color: transparent;
                                        box-shadow: none;

                                        .contact-info__logo {
                                            margin-bottom: 20px;
                                        }

                                        .wrap-tel {
                                            display: flex;
                                            flex-wrap: wrap;
                                            align-items: flex-start;
                                            row-gap: 32px;
                                            column-gap: 48px;
                                            margin-top: 32px;
                                            max-width: 75%;

                                            @media (--viewport-xs-max) {
                                                max-width: 64%;
                                            }

                                            @media (max-width: 500px) {
                                                max-width: 90%;
                                            }

                                            .tel {
                                                width: auto;
                                                padding-top: unset;

                                                &::before {
                                                    height: 0;
                                                    margin: 0;
                                                }

                                                &+.tel {
                                                    padding-top: unset;
                                                }

                                                .tel_detail {
                                                    padding-top: unset;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    ul.secondary-nav {
                        display: flex;
                        gap: 24px;
                        margin-right: 40px;

                        @media (--viewport-ms-max) {
                            flex-direction: column;
                            margin: 0;
                            gap: 16px;
                        }

                        li {
                            @media (--viewport-ms-max) {
                                line-height: 0;
                            }

                            .link {
                                font-size: 11px;
                                line-height: 16px;

                                .icon {
                                    top: -3px;
                                }

                                /* Emulando bodycopy-xs para la navegación superior CA.R. */
                                @media (--viewport-ms-max) {
                                    padding: 0;

                                    .icon {
                                        display: none;
                                    }

                                    &.fixed-mobile {
                                        position: fixed;
                                        bottom: 0;
                                        background-color: var(--color-background-cta-primary);
                                        width: calc(100% - 90px);
                                        margin-left: -50px;
                                        z-index: 100000;
                                        font-size: var(--font-size-3);
                                        line-height: var(--font-line-height-3);
                                        padding: 13px 30px;
                                    }
                                }
                            }

                            .popup {
                                position: relative;

                                &__window {
                                    @media (--viewport-ms-max) {
                                        left: unset;
                                        position: relative;
                                        box-shadow: none;
                                        transform: none;
                                        padding: 16px 0 0;
                                    }
                                }
                            }
                        }
                    }
                }

                .header-new__bottom {
                    display: flex;
                    justify-content: flex-end;
                    height: 50px;
                    align-items: center;

                    @media (--viewport-ms-max) {
                        height: auto;
                        width: 100%;
                    }

                    ul.main-nav,
                    ul.extra-nav {
                        display: flex;
                        gap: 30px;
                        margin: 0 80px;

                        @media (--viewport-ms-max) {
                            flex-direction: column;
                            margin: 0;
                            gap: 20px;
                            width: 100%;
                        }

                        li {

                            &>.link {
                                font-size: 16px;
                                line-height: 24px;

                                @media (--viewport-ms-max) {
                                    width: 100%;
                                }

                                .icon {
                                    @media (--viewport-ms-max) {
                                        fill: var(--color-icon-accent);
                                    }
                                }

                                /* Emulando bodycopy-m para la navegación inferior CA.R. */
                                span:after {
                                    width: 0;
                                }

                                &:hover span:after {
                                    width: 100%;
                                }

                            }

                            &.active>.link {
                                span:after {
                                    @media (--viewport-sm-min) {
                                        width: 100%;
                                    }
                                }

                                .icon {
                                    transform: rotate(180deg);
                                }
                            }

                            .submenu {
                                display: none;
                                text-align: left;

                                @media (--viewport-sm-min) {
                                    position: absolute;
                                    z-index: 10;
                                    top: 100px;
                                    left: 0;
                                    width: 100%;
                                    background-color: var(--color-primary);
                                }

                                .header-submenu__sidebar-text {
                                    .title-m {
                                        font-size: 16px;
                                    }
                                }
                            }

                            &.active .submenu {
                                display: block;
                            }

                            .dropdown-menu--open {
                                display: flex;
                            }
                        }

                        &>li {

                            @media (--viewport-ms-max) {
                                border-bottom: solid 1px var(--color-border);
                                width: 100%;
                                padding-bottom: 16px;
                            }
                        }


                    }

                    &.has-extra {
                        @media (--viewport-sm-min) {
                            justify-content: space-between;

                            ul.main-nav,
                            ul.extra-nav {
                                margin: 0 40px;
                            }

                            ul.extra-nav {
                                li {
                                    .link {
                                        position: relative;

                                        .icon {
                                            top: -12px;
                                        }

                                        span {
                                            display: none;
                                        }
                                    }

                                    &:last-of-type {
                                        .link {
                                            .icon {
                                                top: unset;
                                            }

                                            span {
                                                display: inline;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        @media (--viewport-ms-max) {
                            flex-direction: column;

                            ul.extra-nav {
                                margin-top: 20px;

                                li>.link {
                                    width: unset;
                                    padding: 0;

                                    .icon {
                                        display: none
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.mobile-menu-is-open {
                @media (--viewport-ms-max) {
                    display: flex;
                    position: fixed;
                    overflow: auto;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    background-color: var(--color-blanket);
                    z-index: 10;

                    .header-new__wrap {
                        background-color: var(--color-background);
                        height: min-content;
                        min-height: 100vh;
                        right: 0;
                        z-index: 11;
                        top: 0;
                        width: calc(100% - 90px);
                        margin-left: 90px;
                        transition: transform .5s;
                        flex-direction: column-reverse;
                        align-items: flex-start;
                        padding: 30px 50px 80px;
                        /* debe llevar 50px extra abajo por si hay botón fijo  (CA.R.) */
                        justify-content: flex-end;

                        .close {
                            display: flex;
                        }
                    }

                    .dropdown-menu__btn {
                        @media (--viewport-ms-max) {
                            justify-content: flex-start;

                            .icon {
                                display: none;
                            }
                        }
                    }

                    .dropdown-menu {
                        position: relative;
                        width: auto;
                        box-shadow: none;

                        &__list {
                            padding-bottom: 0;
                        }

                        .dropdown-menu__close {
                            display: none;
                        }
                    }

                    .dropdown-menu--open {
                        top: unset;
                    }
                }

                @media (--viewport-xs-max) {
                    .header-new__wrap {
                        width: 100%;
                        margin-left: 0;
                    }
                }
            }

            &.accent:not(.mobile-menu-is-open) {
                @media (--viewport-ms-max) {
                    display: flex;

                    .header-new__top,
                    .innerWrap {
                        display: none;
                    }

                    .header-new__bottom {
                        margin-top: -70px;
                        padding-right: 70px;

                        ul.main-nav {
                            display: none;
                        }

                        ul.extra-nav {
                            flex-direction: row;
                            gap: 30px;
                            justify-content: flex-end;

                            li {
                                border: 0;
                                width: auto;
                                padding: 0;

                                .link {
                                    span {
                                        display: none;
                                    }

                                    .icon {
                                        display: block;
                                        filter: brightness(0) invert(1) grayscale(100%);
                                    }
                                }

                                .dropdown-menu__btn {
                                    .btn {
                                        top:15px;
                                        position: relative;
                                        span {
                                            display: none;
                                        }

                                        .icon {
                                            display: block;
                                            filter: brightness(0) invert(1) grayscale(100%);
                                        }
                                    }
                                }
                                .dropdown-menu--open{
                                    @media (--viewport-xs-max) {
                                        right: 0;
                                        width: 250px;
                                        z-index: 10;
                                        top: 35px;
                                        bottom:unset;
                                        left: unset;
                                        height: auto;
                                        max-width: unset;
                                        .dropdown-menu__close{display: none;}
                                    }
                                }
                                .dropdown-menu__overlay.dropdown-menu--open{
                                    @media (--viewport-xs-max){
                                    height: auto;
                                    position: unset;
                                    width: auto;
                                    z-index: 10;
                                    }
                                }
                                .dropdown-menu{
                                    @media (--viewport-xs-max){
                                    position: absolute;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .ctas {
            width: 180px;

            .btn {
                width: 180px;
                overflow: hidden;
                justify-content: center;
            }

            @media (--viewport-ms-max) {
                display: flex;
                justify-content: flex-end;
                width: auto;
            }
        }

        .hidden-mobile {
            @media (--viewport-ms-max) {
                display: none;
            }
        }

        .hidden-desktop {
            @media (--viewport-sm-min) {
                display: none;
            }
        }
    }

    &.sticky {
        position: sticky;
        top: 0;

        nav {
            justify-content: flex-end;

            .header-new__overlay,
            .brandWrap {
                display: none;
            }

            .ctas {
                display: flex;
                justify-content: flex-end;
                width: auto;

                .btn {
                    width: auto;
                }
            }
        }
    }

    &.accent {
        nav {
            .header-new__overlay {
                .header-new__wrap {
                    .header-new__top {
                        @media (--viewport-sm-min) {
                            background-color: var(--color-background-accent-bold);
                        }


                        .innerWrap {
                            img.logo {
                                @media (--viewport-sm-min) {
                                    filter: brightness(0) invert(1) grayscale(100%);
                                }

                            }

                            .contactInfo {
                                .icon {
                                    @media (--viewport-sm-min) {
                                        filter: brightness(0) invert(1) grayscale(100%);
                                    }
                                }

                                &>.bodycopy-xs {
                                    @media (--viewport-sm-min) {
                                        color: var(--color-text-inverse);

                                        a,
                                        a:visited,
                                        a:focus {
                                            color: var(--color-text-inverse);
                                        }

                                        &+.bodycopy-xs {
                                            color: var(--color-text-inverse);
                                        }
                                    }
                                }
                            }

                            .tooltip {
                                .msg-tooltip {

                                    img,
                                    .icon {
                                        @media (--viewport-sm-min) {
                                            filter: none;
                                        }
                                    }
                                }
                            }
                        }

                        ul {
                            li {

                                .link,
                                .popup button {
                                    @media (--viewport-sm-min) {
                                        color: var(--color-text-inverse);

                                        .icon {
                                            filter: brightness(0) invert(1) grayscale(100%);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .brandWrap {
                @media (--viewport-ms-max) {
                    background-color: var(--color-background-accent-bold);
                }

                img.logo,
                .hamburger .icon {
                    @media (--viewport-ms-max) {
                        filter: brightness(0) invert(1) grayscale(100%);
                    }
                }
            }
        }
    }
}