:root {
    --white: hsl(0, 0%, 100%);
    --background-color: hsl(205deg 80% 10%);
    --accent-gradient: linear-gradient(0.25turn, hsl(164, 55%, 70%) 0, hsl(204, 75%, 70%) 100%);
    --accent-text-c: hsl(204, 75%, 10%);
    --accent-glow: 0px 0px 18px rgba(107, 205, 178, 0.6705882353);
}

/* Estilos nuevo hero */

.header {
    height: 5rem;

    .header__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        background-color: var(--background-color);
        padding-inline: 1rem;

        @media screen and (min-width: 768px) {
            padding-inline: 2rem;
        }

        a {
            width: 33%;
        }

        .header__logo-left {
            visibility: hidden;

            @media screen and (min-width: 768px) {
                visibility: unset;
            }

            img {
                width: 10rem;
            }
        }

        .header__logo {
            display: flex;
            justify-content: center;

            img {
                width: 3rem;
            }
        }

        /* Buttton menu header */
        .button-bar {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            @media (min-width: 768px) {
                display: inherit;
            }

            img {
                height: 2rem;
                width: auto;

                &:hover {
                    filter: drop-shadow(0px 0px 18px rgba(107, 205, 178, 0.6705882353));
                }
            }
        }

        /* Menu header */
        .header-2__menu {
            display: none;
            position: absolute;
            top: 5rem;
            right: 0;
            left: 0;
            z-index: 9999;
            background: var(--background-color);
            padding: 1rem 2rem;
            height: calc(100dvh - 5rem);

            @media (min-width: 768px) {
                width: max-content;
                right: 0;
                left: unset;
                height: fit-content;
                border-radius: 0 0 1rem 1rem;
                box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
            }

            &.header-2__menu--desktop ul {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: flex-end;
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    position: relative;
                    width: 100%;
                    text-align: right;

                    &:not(:last-child) {
                        margin-bottom: 0.5rem;

                        &::after {
                            content: "";
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            background: linear-gradient(to right, #65D4B0, #4CB7CF, #39A0E6);
                            width: 100%;
                            height: 1px;
                        }
                    }

                    a.item {
                        text-decoration: none;
                        color: white;
                        display: inline-block;
                        padding: 0.5rem;
                        background: center center/contain;
                        background-repeat: no-repeat;
                        transition: all 0.3s ease-in-out;
                        font-size: 0.8rem;
                        white-space: nowrap;
                        width: fit-content;

                        @media (min-width: 768px) {
                            font-size: 1.2rem;
                        }

                        &:hover {
                            transition: all 0.3s ease-in-out;
                            color: #6BCDB2;
                        }
                    }
                }
            }
        }

        .header-2__menu.active {
            display: block;
        }
    }
}