/* =================================================
           RESET
        ================================================= */

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


        a{
            text-decoration:none;
            color:inherit;
        }


        /* =================================================
           NAVBAR
        ================================================= */

        .hu-navbar{

            width:100%;

            height:76px;

            background:#050505;

            display:flex;

            align-items:center;

            position:relative;

            z-index:9999;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            animation:
                navbarDown
                .8s
                cubic-bezier(.22,1,.36,1)
                forwards;

        }


        @keyframes navbarDown{

            from{

                opacity:0;

                transform:
                    translateY(-100%);

            }

            to{

                opacity:1;

                transform:
                    translateY(0);

            }

        }


        /* =================================================
           CONTENEDOR
        ================================================= */

        .hu-nav-container{

            width:100%;

            max-width:1250px;

            margin:auto;

            padding:0 25px;

            display:flex;

            align-items:center;

            justify-content:space-between;

        }


        /* =================================================
           LOGO
        ================================================= */

        .hu-logo{

            display:flex;

            align-items:center;

            gap:10px;

            color:#ffffff;

            font-size:21px;

            font-weight:900;

            letter-spacing:-.5px;

            white-space:nowrap;

            opacity:0;

            animation:
                logoReveal
                .8s
                .35s
                cubic-bezier(.22,1,.36,1)
                forwards;

        }


        @keyframes logoReveal{

            from{

                opacity:0;

                transform:
                    translateX(-45px)
                    scale(.9);

            }

            to{

                opacity:1;

                transform:
                    translateX(0)
                    scale(1);

            }

        }


        .hu-logo i{

            color:#ffffff;

            font-size:25px;

            transition:.4s ease;

        }


        .hu-logo:hover i{

            transform:
                rotate(-12deg)
                scale(1.15);

        }


        .hu-logo span{

            color:#ffd400;

        }


        /* =================================================
           MENU
        ================================================= */

        .hu-menu{

            display:flex;

            align-items:center;

            gap:4px;

            list-style:none;

        }


        .hu-menu > li{

            position:relative;

            opacity:0;

            animation:
                menuReveal
                .65s
                cubic-bezier(.22,1,.36,1)
                forwards;

        }


        .hu-menu > li:nth-child(1){
            animation-delay:.50s;
        }

        .hu-menu > li:nth-child(2){
            animation-delay:.58s;
        }

        .hu-menu > li:nth-child(3){
            animation-delay:.66s;
        }

        .hu-menu > li:nth-child(4){
            animation-delay:.74s;
        }

        .hu-menu > li:nth-child(5){
            animation-delay:.82s;
        }

        .hu-menu > li:nth-child(6){
            animation-delay:.90s;
        }


        @keyframes menuReveal{

            from{

                opacity:0;

                transform:
                    translateY(-20px);

            }

            to{

                opacity:1;

                transform:
                    translateY(0);

            }

        }


        /* =================================================
           LINKS
        ================================================= */

        .hu-menu > li > a{

            display:flex;

            align-items:center;

            gap:7px;

            color:#ffffff;

            padding:12px 15px;

            font-size:14px;

            font-weight:700;

            border-radius:9px;

            position:relative;

            transition:
                color .3s ease,
                background .3s ease,
                transform .3s ease;

        }


        .hu-menu > li > a::after{

            content:"";

            position:absolute;

            left:15px;

            right:15px;

            bottom:5px;

            height:2px;

            background:#ffd400;

            transform:
                scaleX(0);

            transform-origin:center;

            transition:.3s ease;

        }


        .hu-menu > li > a:hover::after,
        .hu-menu > li > a.hu-active::after{

            transform:
                scaleX(1);

        }


        .hu-menu > li > a:hover,
        .hu-menu > li > a.hu-active{

            color:#ffd400;

            background:
                rgba(255,212,0,.07);

            transform:
                translateY(-2px);

        }


        /* =================================================
           BLOG
        ================================================= */

        .hu-arrow{

            font-size:9px;

            transition:
                transform .35s ease,
                color .3s ease;

        }


        .hu-blog:hover .hu-arrow{

            transform:
                rotate(180deg);

            color:#ffd400;

        }


        /* =================================================
           SUBMENU
        ================================================= */

        .hu-submenu{

            position:absolute;

            top:
                calc(100% + 15px);

            left:0;

            min-width:220px;

            background:#0b0b0b;

            border:
                1px solid
                rgba(255,212,0,.18);

            border-radius:14px;

            padding:8px;

            list-style:none;

            opacity:0;

            visibility:hidden;

            transform:
                translateY(-12px)
                scale(.96);

            transform-origin:
                top left;

            transition:
                opacity .3s ease,
                transform .3s
                cubic-bezier(.22,1,.36,1),
                visibility .3s;

            box-shadow:
                0 20px 45px
                rgba(0,0,0,.45);

        }


        .hu-submenu::before{

            content:"";

            position:absolute;

            top:-5px;

            left:25px;

            width:10px;

            height:10px;

            background:#0b0b0b;

            border-left:
                1px solid
                rgba(255,212,0,.18);

            border-top:
                1px solid
                rgba(255,212,0,.18);

            transform:
                rotate(45deg);

        }


        .hu-blog:hover .hu-submenu{

            opacity:1;

            visibility:visible;

            transform:
                translateY(0)
                scale(1);

        }


        .hu-submenu li{

            opacity:0;

            transform:
                translateX(-10px);

        }


        .hu-blog:hover .hu-submenu li{

            animation:
                submenuItem
                .35s
                ease
                forwards;

        }


        .hu-blog:hover
        .hu-submenu li:nth-child(1){

            animation-delay:.05s;

        }


        .hu-blog:hover
        .hu-submenu li:nth-child(2){

            animation-delay:.10s;

        }


        .hu-blog:hover
        .hu-submenu li:nth-child(3){

            animation-delay:.15s;

        }


        @keyframes submenuItem{

            to{

                opacity:1;

                transform:
                    translateX(0);

            }

        }


        .hu-submenu li a{

            display:flex;

            align-items:center;

            gap:11px;

            padding:13px 14px;

            color:#eeeeee;

            font-size:13px;

            font-weight:600;

            border-radius:9px;

            transition:.25s ease;

        }


        .hu-submenu li a i{

            width:18px;

            color:#ffd400;

            transition:.25s ease;

        }


        .hu-submenu li a:hover{

            background:#ffd400;

            color:#050505;

            transform:
                translateX(4px);

        }


        .hu-submenu li a:hover i{

            color:#050505;

        }


        /* =================================================
           REDES SOCIALES
        ================================================= */

        .hu-social{

            display:flex;

            align-items:center;

            gap:8px;

            margin-left:12px;

            padding-left:15px;

            border-left:
                1px solid
                rgba(255,255,255,.14);

        }


        .hu-social a{

            width:34px;

            height:34px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:50%;

            color:#ffffff;

            font-size:14px;

            background:
                rgba(255,255,255,.06);

            position:relative;

            overflow:hidden;

            transition:
                .35s
                cubic-bezier(.22,1,.36,1);

        }


        .hu-social a::before{

            content:"";

            position:absolute;

            width:100%;

            height:100%;

            background:#ffd400;

            border-radius:50%;

            transform:
                scale(0);

            transition:.35s ease;

        }


        .hu-social a i{

            position:relative;

            z-index:2;

        }


        .hu-social a:hover::before{

            transform:
                scale(1);

        }


        .hu-social a:hover{

            color:#050505;

            transform:
                translateY(-4px)
                rotate(5deg);

        }


        /* =================================================
           HAMBURGUESA
        ================================================= */

        .hu-toggle{

            width:45px;

            height:45px;

            display:none;

            align-items:center;

            justify-content:center;

            border:none;

            outline:none;

            background:transparent;

            color:#ffffff;

            cursor:pointer;

            font-size:22px;

            border-radius:10px;

            position:relative;

            z-index:10001;

            transition:.3s ease;

        }


        .hu-toggle:hover{

            background:
                rgba(255,212,0,.10);

            color:#ffd400;

        }


        .hu-toggle i{

            position:absolute;

            transition:
                transform .45s
                cubic-bezier(.22,1,.36,1),
                opacity .25s ease;

        }


        .hu-toggle .hu-close{

            opacity:0;

            transform:
                rotate(-90deg)
                scale(.5);

        }


        .hu-toggle.hu-open .hu-bars{

            opacity:0;

            transform:
                rotate(90deg)
                scale(.5);

        }


        .hu-toggle.hu-open .hu-close{

            opacity:1;

            transform:
                rotate(0)
                scale(1);

        }


        /* =================================================
           OVERLAY
        ================================================= */

        .hu-overlay{

            display:none;

        }


        /* =================================================
           MOVIL
        ================================================= */

        @media(max-width:950px){

            .hu-navbar{

                height:70px;

            }


            .hu-nav-container{

                padding:
                    0 18px;

            }


            .hu-toggle{

                display:flex;

            }


            .hu-overlay{

                display:block;

                position:fixed;

                inset:
                    70px 0 0 0;

                background:
                    rgba(0,0,0,.55);

                backdrop-filter:
                    blur(4px);

                opacity:0;

                visibility:hidden;

                transition:.35s ease;

                z-index:9990;

            }


            .hu-overlay.hu-visible{

                opacity:1;

                visibility:visible;

            }


            .hu-menu{

                position:fixed;

                top:70px;

                right:0;

                width:100%;

                max-width:380px;

                height:
                    calc(100vh - 70px);

                background:#050505;

                padding:
                    25px 20px;

                display:flex;

                flex-direction:column;

                align-items:stretch;

                gap:6px;

                overflow-y:auto;

                transform:
                    translateX(105%);

                transition:
                    transform .55s
                    cubic-bezier(.22,1,.36,1);

                box-shadow:
                    -20px 0 50px
                    rgba(0,0,0,.45);

                z-index:10000;

            }


            .hu-menu.hu-open{

                transform:
                    translateX(0);

            }


            .hu-menu > li{

                opacity:0;

                transform:
                    translateX(35px);

                animation:none;

            }


            .hu-menu.hu-open > li{

                animation:
                    mobileItem
                    .5s
                    cubic-bezier(.22,1,.36,1)
                    forwards;

            }


            .hu-menu.hu-open
            > li:nth-child(1){

                animation-delay:.12s;

            }


            .hu-menu.hu-open
            > li:nth-child(2){

                animation-delay:.18s;

            }


            .hu-menu.hu-open
            > li:nth-child(3){

                animation-delay:.24s;

            }


            .hu-menu.hu-open
            > li:nth-child(4){

                animation-delay:.30s;

            }


            .hu-menu.hu-open
            > li:nth-child(5){

                animation-delay:.36s;

            }


            .hu-menu.hu-open
            > li:nth-child(6){

                animation-delay:.42s;

            }


            @keyframes mobileItem{

                to{

                    opacity:1;

                    transform:
                        translateX(0);

                }

            }


            .hu-menu > li > a{

                width:100%;

                padding:16px;

                border-radius:11px;

                font-size:15px;

            }


            .hu-menu > li > a::after{

                left:16px;

                right:auto;

                width:0;

                bottom:8px;

            }


            .hu-menu > li > a:hover::after,
            .hu-menu > li > a.hu-active::after{

                width:35px;

            }


            /* SUBMENU MOVIL */

            .hu-submenu{

                position:static;

                width:100%;

                display:none;

                opacity:1;

                visibility:visible;

                transform:none;

                background:#101010;

                border:none;

                border-radius:11px;

                margin-top:4px;

                padding:5px;

                box-shadow:none;

            }


            .hu-submenu::before{

                display:none;

            }


            .hu-blog.hu-sub-open
            .hu-submenu{

                display:block;

                animation:
                    blogOpen
                    .35s
                    ease
                    forwards;

            }


            @keyframes blogOpen{

                from{

                    opacity:0;

                    transform:
                        translateY(-8px);

                }

                to{

                    opacity:1;

                    transform:
                        translateY(0);

                }

            }


            .hu-blog.hu-sub-open
            .hu-arrow{

                transform:
                    rotate(180deg);

            }


            .hu-submenu li{

                opacity:1;

                transform:none;

                animation:
                    none !important;

            }


            .hu-submenu li a{

                padding:
                    14px 18px;

            }


            /* REDES */

            .hu-social{

                margin:
                    15px 0 0;

                padding:
                    20px 0 5px;

                border-left:none;

                border-top:
                    1px solid
                    rgba(255,255,255,.12);

                justify-content:center;

                gap:12px;

            }


            .hu-social a{

                width:44px;

                height:44px;

                font-size:16px;

            }

        }


        /* =================================================
           MOVIL PEQUEÑO
        ================================================= */

        @media(max-width:480px){

            .hu-logo{

                font-size:17px;

            }


            .hu-logo i{

                font-size:21px;

            }


            .hu-menu{

                max-width:100%;

            }

        }


        /* =================================================
           REDUCIR ANIMACIONES
        ================================================= */

        @media(prefers-reduced-motion:reduce){

            *,
            *::before,
            *::after{

                animation-duration:
                    .01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    .01ms !important;

            }

        }