/* ==========================================================
   FROSTVOID REBORN — HEADER V3
   ========================================================== */

.fv3-header {
    position: absolute;
    z-index: 10000;
    top: 26px;
    left: 0;

    width: 100%;
    height: 90px;

    font-family: Georgia, "Times New Roman", serif;
}

.fv3-bar {
    position: relative;

    width: min(1640px, calc(100% - 70px));
    height: 90px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        420px
        minmax(0, 1fr);

    align-items: stretch;

    background:
        linear-gradient(
            180deg,
            rgba(6, 12, 21, .97),
            rgba(2, 6, 12, .98)
        );

    border-top:
        1px solid rgba(112, 161, 202, .18);

    border-bottom:
        1px solid rgba(82, 102, 174, .32);

    box-shadow:
        0 15px 38px rgba(0,0,0,.56);
}

.fv3-bar::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -2px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4fa9dd 22%,
            #72c9f7 38%,
            transparent 49%,
            transparent 51%,
            #7040a4 67%,
            #984bd0 84%,
            transparent
        );

    opacity: .8;

    pointer-events: none;
}


/* ==========================================================
   NAVEGACIÓN
   ========================================================== */

.fv3-nav {
    display: grid;

    height: 90px;

    align-items: stretch;
}

.fv3-nav-left {
    grid-template-columns:
        repeat(3, minmax(130px, 1fr));
}

.fv3-nav-right {
    grid-template-columns:
        repeat(4, minmax(115px, 1fr));
}

.fv3-link {
    position: relative;

    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 18px;

    box-sizing: border-box;

    color: #b3c0cf !important;

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

    text-decoration: none !important;

    text-transform: uppercase;

    font-size: 13px;
    font-weight: 400;

    letter-spacing: .08em;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease;
}

.fv3-link:last-child {
    border-right:
        1px solid rgba(255,255,255,.04);
}

.fv3-link:hover {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            rgba(46,110,160,.06),
            rgba(24,71,112,.18)
        );
}

.fv3-link::after {
    content: "";

    position: absolute;

    left: 20%;
    right: 20%;
    bottom: 0;

    height: 2px;

    opacity: 0;

    background: #69c7f8;

    box-shadow:
        0 0 10px rgba(76,177,235,.65);

    transition: opacity .2s ease;
}

.fv3-link:hover::after {
    opacity: 1;
}

.fv3-register i {
    color: #63b7e9;
}

.fv3-login {
    color: #cdb7df !important;
}

.fv3-login i {
    color: #9b59d0;
}

.fv3-login::after {
    background: #9850cf;

    box-shadow:
        0 0 10px rgba(144,68,203,.7);
}


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

.fv3-logo {
    position: relative;

    z-index: 50;

    height: 185px;

    margin-top: -47px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible;
}

.fv3-logo::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 170px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(49,99,154,.14),
            rgba(77,44,123,.08) 45%,
            transparent 72%
        );

    filter: blur(16px);

    z-index: -1;
}

.fv3-logo img {
    display: block;

    width: 405px;
    height: auto;

    max-height: 180px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 24px rgba(0,0,0,.78)
        );
}


/* ==========================================================
   CUENTA
   ========================================================== */

.fv3-account {
    display: flex;

    align-items: center;
    justify-content: center;
}

.fv3-account img {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    border:
        1px solid rgba(93,166,215,.32);
}


/* ==========================================================
   MOBILE
   ========================================================== */

.fv3-mobile {
    display: none !important;
}


@media (max-width: 1350px) {

    .fv3-bar {
        grid-template-columns:
            minmax(0,1fr)
            340px
            minmax(0,1fr);
    }

    .fv3-logo img {
        width: 330px;
    }

    .fv3-nav-left {
        grid-template-columns:
            repeat(3, minmax(100px,1fr));
    }

    .fv3-nav-right {
        grid-template-columns:
            repeat(4, minmax(95px,1fr));
    }

    .fv3-link {
        padding: 0 10px;

        font-size: 11px;
    }
}


@media (max-width: 959px) {

    .fv3-header {
        top: 12px;
    }

    .fv3-bar {
        width:
            calc(100% - 24px);

        height: 70px;

        display: flex;

        justify-content: center;
    }

    .fv3-nav {
        display: none !important;
    }

    .fv3-logo {
        width: 260px;

        height: 130px;

        margin-top: -30px;
    }

    .fv3-logo img {
        width: 250px;
    }

    .fv3-mobile {
        position: absolute;

        right: 15px;
        top: 14px;

        width: 42px;
        height: 42px;

        display: flex !important;

        align-items: center;
        justify-content: center;

        color: #dce7ef;

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

        background:
            rgba(3,8,15,.95);

        cursor: pointer;
    }
}


/* ==========================================================
   FROSTVOID REBORN — LOGO CENTRAL FORZADO
   ========================================================== */

.fv3-bar {
    overflow: visible !important;
}

.fv3-logo {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -42%) !important;

    width: 520px !important;
    height: 220px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 300 !important;

    pointer-events: auto !important;
}

.fv3-logo::before {
    content: "" !important;

    position: absolute !important;

    width: 520px !important;
    height: 180px !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(58, 109, 177, .16),
            rgba(95, 56, 156, .10) 46%,
            transparent 74%
        ) !important;

    filter: blur(14px) !important;

    z-index: -1 !important;
}

.fv3-logo img {
    display: block !important;

    width: 470px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;

    opacity: 1 !important;
    visibility: visible !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 16px 24px rgba(0,0,0,.78)) !important;
}


/* tablet / móvil */
@media (max-width: 1350px) {
    .fv3-logo {
        width: 390px !important;
        height: 170px !important;
        transform: translate(-50%, -38%) !important;
    }

    .fv3-logo img {
        width: 350px !important;
    }
}

@media (max-width: 959px) {
    .fv3-logo {
        width: 270px !important;
        height: 120px !important;
        transform: translate(-50%, -34%) !important;
    }

    .fv3-logo img {
        width: 240px !important;
    }
}


/* Desktop: nunca mostrar hamburguesa */
@media (min-width: 960px) {
    .fv3-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

.fv3-logo img {
    position: relative !important;
    z-index: 99999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================
   HEADER FINAL — MOBILE BUTTON
   ========================================================== */

.fv3-mobile {
    display: none !important;
}

@media screen and (max-width: 959px) {
    .fv3-mobile {
        position: absolute !important;
        right: 15px !important;
        top: 14px !important;

        width: 42px !important;
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #dce7ef !important;

        border: 1px solid rgba(255,255,255,.12) !important;

        background: rgba(3,8,15,.95) !important;

        z-index: 500 !important;
    }
}


/* ==========================================================
   FROSTVOID — AJUSTE FINAL DE LOGO CENTRAL
   ========================================================== */

@media (min-width: 1360px) {

    .fv3-bar {
        grid-template-columns:
            minmax(0, 1fr)
            520px
            minmax(0, 1fr) !important;
    }

    .fv3-logo {
        width: 520px !important;
        height: 185px !important;
    }

    .fv3-logo img {
        width: 430px !important;
        max-width: 430px !important;
    }

    .fv3-nav-left {
        padding-right: 22px;
    }

    .fv3-nav-right {
        padding-left: 22px;
    }
}


/* pantallas medianas */
@media (min-width: 960px) and (max-width: 1359px) {

    .fv3-bar {
        grid-template-columns:
            minmax(0, 1fr)
            400px
            minmax(0, 1fr) !important;
    }

    .fv3-logo {
        width: 400px !important;
        height: 165px !important;
    }

    .fv3-logo img {
        width: 340px !important;
        max-width: 340px !important;
    }

    .fv3-nav-left {
        padding-right: 12px;
    }

    .fv3-nav-right {
        padding-left: 12px;
    }
}


/* ==========================================================
   FROSTVOID — LOGO CENTRAL SIN SUPERPOSICIÓN
   ========================================================== */

@media (min-width: 960px) {

    .fv3-bar {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            500px
            minmax(0, 1fr) !important;

        align-items: center !important;

        overflow: visible !important;
    }


    /* izquierda */
    .fv3-nav-left {
        grid-column: 1 !important;

        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(110px, 1fr)) !important;
    }


    /* LOGO:
       deja de ser absoluto y ocupa físicamente el centro */
    .fv3-logo {
        position: relative !important;

        grid-column: 2 !important;

        top: auto !important;
        left: auto !important;

        transform: none !important;

        width: 500px !important;
        height: 180px !important;

        margin: -46px 0 -46px 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        z-index: 50 !important;

        overflow: visible !important;

        background: transparent !important;
    }


    .fv3-logo img {
        position: relative !important;

        width: 455px !important;
        max-width: 455px !important;

        height: auto !important;
        max-height: 180px !important;

        margin: 0 !important;

        display: block !important;

        object-fit: contain !important;

        z-index: 51 !important;

        filter:
            drop-shadow(0 15px 24px rgba(0,0,0,.78)) !important;
    }


    /* derecha */
    .fv3-nav-right {
        grid-column: 3 !important;

        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(110px, 1fr)) !important;
    }


    /* cada botón se queda dentro de su celda */
    .fv3-nav .fv3-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        box-sizing: border-box !important;
    }

}


/* Pantallas algo menores */
@media (min-width: 960px) and (max-width: 1400px) {

    .fv3-bar {
        grid-template-columns:
            minmax(0, 1fr)
            390px
            minmax(0, 1fr) !important;
    }

    .fv3-logo {
        width: 390px !important;
        height: 155px !important;

        margin-top: -33px !important;
        margin-bottom: -33px !important;
    }

    .fv3-logo img {
        width: 355px !important;
        max-width: 355px !important;
    }

    .fv3-nav .fv3-link {
        font-size: 10px !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}


/* ==========================================================
   FROSTVOID — USER DROPDOWN
   ========================================================== */

.fv3-user-menu {
    position: relative;
    height: 100%;
}

.fv3-user-menu > summary {
    list-style: none;
}

.fv3-user-menu > summary::-webkit-details-marker {
    display: none;
}

.fv3-account {
    width: 110px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    cursor: pointer;

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

    transition: background .2s ease;
}

.fv3-account:hover,
.fv3-user-menu[open] .fv3-account {
    background:
        linear-gradient(
            180deg,
            rgba(49,107,156,.08),
            rgba(67,37,104,.16)
        );
}

.fv3-account img {
    width: 40px;
    height: 40px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid rgba(90,176,224,.45);

    box-shadow:
        0 0 13px rgba(70,151,210,.13);
}

.fv3-account-chevron {
    color: #8294a8;
    font-size: 9px;

    transition: transform .2s ease;
}

.fv3-user-menu[open] .fv3-account-chevron {
    transform: rotate(180deg);
}


/* PANEL */

.fv3-user-dropdown {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width: 285px;

    padding: 10px;

    z-index: 99999;

    background:
        linear-gradient(
            145deg,
            rgba(7,14,25,.99),
            rgba(5,8,16,.99)
        );

    border:
        1px solid rgba(103,137,175,.25);

    box-shadow:
        0 24px 55px rgba(0,0,0,.62),
        0 0 25px rgba(74,91,172,.07);
}


/* Frost/Void top line */

.fv3-user-dropdown::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #55b8ec,
            rgba(70,120,170,.25),
            rgba(114,62,153,.25),
            #9850cb
        );
}


/* HEADER */

.fv3-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 10px 13px;
}

.fv3-user-dropdown-head img {
    width: 46px;
    height: 46px;

    object-fit: cover;

    border-radius: 50%;

    border:
        1px solid rgba(91,176,224,.38);
}

.fv3-user-dropdown-head strong {
    display: block;

    color: #e0e7ee;

    font-family: Georgia, serif;

    font-size: 14px;
    font-weight: 400;

    letter-spacing: .04em;
}

.fv3-user-dropdown-head span {
    display: block;

    margin-top: 3px;

    color: #67798e;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .10em;
}


/* LINKS */

.fv3-user-dropdown > a {
    display: flex;

    align-items: center;
    gap: 11px;

    min-height: 43px;

    padding: 0 11px;

    color: #9fb0c2 !important;

    text-decoration: none !important;

    font-size: 12px;

    transition:
        background .18s ease,
        color .18s ease;
}

.fv3-user-dropdown > a i {
    width: 17px;

    color: #6f91ae;

    text-align: center;
}

.fv3-user-dropdown > a:hover {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(43,104,150,.12),
            rgba(81,49,119,.08)
        );
}

.fv3-user-dropdown-separator {
    height: 1px;

    margin: 7px 5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.09),
            transparent
        );
}

.fv3-user-dropdown > a.fv3-user-logout {
    color: #bd899f !important;
}

.fv3-user-dropdown > a.fv3-user-logout i {
    color: #b16583;
}

.fv3-user-dropdown > a.fv3-user-logout:hover {
    color: #e7aec6 !important;

    background:
        rgba(139,50,84,.10);
}


/* móvil */

@media (max-width: 959px) {

    .fv3-user-menu {
        display: none;
    }

}


/* ==========================================================
   FROSTVOID — MENÚ DE CUENTA
   ========================================================== */

.fv3-user-menu {
    position: relative;
    height: 90px;
    min-width: 125px;
    z-index: 99999;
}

.fv3-user-menu > summary {
    list-style: none;
}

.fv3-user-menu > summary::-webkit-details-marker {
    display: none;
}

.fv3-user-menu .fv3-account {
    width: 100%;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    cursor: pointer;

    background: transparent;

    border-left: 1px solid rgba(255,255,255,.035);
    border-right: 1px solid rgba(255,255,255,.035);
}

.fv3-user-menu .fv3-account:hover,
.fv3-user-menu[open] .fv3-account {
    background:
        linear-gradient(
            180deg,
            rgba(51,116,169,.07),
            rgba(62,32,97,.16)
        );
}

.fv3-user-menu .fv3-account img {
    width: 40px;
    height: 40px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid rgba(83,175,225,.42);

    box-shadow:
        0 0 14px rgba(68,154,211,.12);
}

.fv3-account-chevron {
    color: #8597aa;

    font-size: 9px;

    transition: transform .2s ease;
}

.fv3-user-menu[open] .fv3-account-chevron {
    transform: rotate(180deg);
}


/* dropdown */

.fv3-user-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 275px;

    padding: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(7,14,25,.995),
            rgba(3,7,14,.995)
        );

    border: 1px solid rgba(91,127,162,.28);

    box-shadow:
        0 25px 60px rgba(0,0,0,.68),
        0 0 25px rgba(70,80,160,.08);

    z-index: 100000;
}

.fv3-user-dropdown::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #52b4e8,
            rgba(65,118,169,.25),
            rgba(112,62,155,.25),
            #9850cd
        );
}

.fv3-user-dropdown-title {
    padding: 11px 12px 13px;
}

.fv3-user-dropdown-title span {
    display: block;

    color: #62768b;

    font-family: Georgia, serif;

    font-size: 9px;

    letter-spacing: .18em;
}

.fv3-user-dropdown-title strong {
    display: block;

    margin-top: 4px;

    color: #d8e1e9;

    font-family: Georgia, serif;

    font-size: 14px;
    font-weight: 400;

    letter-spacing: .08em;
}

.fv3-user-dropdown > a {
    min-height: 43px;

    padding: 0 12px;

    display: flex;
    align-items: center;

    gap: 11px;

    color: #9eafc0 !important;

    font-size: 12px;

    text-decoration: none !important;

    transition:
        color .18s ease,
        background .18s ease;
}

.fv3-user-dropdown > a i {
    width: 18px;

    color: #6e8ba7;

    text-align: center;
}

.fv3-user-dropdown > a:hover {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(42,105,151,.13),
            rgba(87,47,126,.08)
        );
}

.fv3-user-separator {
    height: 1px;

    margin: 7px 4px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.09),
            transparent
        );
}

.fv3-user-dropdown > .fv3-user-logout {
    color: #c1889e !important;
}

.fv3-user-dropdown > .fv3-user-logout i {
    color: #b4607e;
}

.fv3-user-dropdown > .fv3-user-logout:hover {
    color: #efb4c9 !important;

    background: rgba(137,47,80,.10);
}

@media (max-width: 959px) {
    .fv3-user-menu {
        display: none;
    }
}