/* ==========================================================
   PW INFIERNO - UNIFIED NAVBAR V1

   Base visual:
   descargas.php

   images/pwi.png:
   EXCLUSIVO DE ESTA BARRA.
   ========================================================== */

.pwi-main-nav {
    position: relative;
    z-index: 1000;

    width: 100%;
    min-height: 76px;

    background:
        linear-gradient(
            180deg,
            rgba(18, 20, 25, 0.98) 0%,
            rgba(8, 10, 14, 0.98) 100%
        );

    border-bottom: 1px solid rgba(255, 92, 25, 0.34);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025);
}

.pwi-main-nav *,
.pwi-main-nav *::before,
.pwi-main-nav *::after {
    box-sizing: border-box;
}

.pwi-main-nav-inner {
    width: min(1500px, calc(100% - 44px));
    min-height: 76px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(205px, 290px)
        minmax(0, 1fr)
        auto;

    align-items: center;

    column-gap: 28px;
}


/* ==========================================================
   LOGO EXCLUSIVO DE LA BARRA
   ========================================================== */

.pwi-main-nav-brand {
    display: flex;
    align-items: center;

    min-width: 0;

    text-decoration: none !important;
}

.pwi-main-nav-brand img {
    display: block;

    width: 235px;
    max-width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 2px 5px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 8px rgba(255, 79, 20, 0.08));
}


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

.pwi-main-nav-links {
    min-width: 0;

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

    gap: 5px;
}

.pwi-main-nav-link {
    position: relative;

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

    min-height: 42px;

    padding: 0 13px;

    border: 1px solid transparent;
    border-radius: 3px;

    color: #c8c8c8 !important;

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

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .08em;
    line-height: 1;

    text-transform: uppercase;
    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.pwi-main-nav-link:hover {
    color: #ffffff !important;

    border-color: rgba(255, 83, 20, 0.38);

    background:
        linear-gradient(
            180deg,
            rgba(255, 82, 18, 0.10),
            rgba(255, 82, 18, 0.035)
        );

    box-shadow:
        inset 0 0 14px rgba(255, 76, 15, 0.05);
}

.pwi-main-nav-link.is-active {
    color: #ff6730 !important;

    border-color: rgba(255, 91, 29, 0.46);

    background:
        linear-gradient(
            180deg,
            rgba(255, 91, 29, 0.15),
            rgba(255, 91, 29, 0.045)
        );

    box-shadow:
        inset 0 -2px 0 #ff5c1b,
        0 0 14px rgba(255, 73, 12, 0.08);
}


/* ==========================================================
   CUENTA / REGISTRO
   Inspirado en los controles de descargas.php.
   ========================================================== */

.pwi-main-nav-account {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 8px;

    white-space: nowrap;
}

.pwi-main-nav-account a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 13px;

    border-radius: 3px;

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

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;
    text-decoration: none !important;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.pwi-main-nav-login {
    color: #d4d4d4 !important;

    border: 1px solid rgba(255, 255, 255, 0.11);

    background: rgba(255, 255, 255, 0.025);
}

.pwi-main-nav-login:hover {
    color: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.22);

    background: rgba(255, 255, 255, 0.06);
}

.pwi-main-nav-register {
    color: #ffffff !important;

    border: 1px solid #d74b17;

    background:
        linear-gradient(
            180deg,
            #e95b20 0%,
            #bd3710 100%
        );

    box-shadow:
        0 3px 12px rgba(185, 45, 6, 0.24);
}

.pwi-main-nav-register:hover {
    border-color: #ff7137;

    background:
        linear-gradient(
            180deg,
            #f36a2c 0%,
            #cf4316 100%
        );
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1260px) {

    .pwi-main-nav-inner {
        width: min(1180px, calc(100% - 28px));

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

        column-gap: 14px;
    }

    .pwi-main-nav-brand img {
        width: 195px;
    }

    .pwi-main-nav-links {
        gap: 1px;
    }

    .pwi-main-nav-link {
        padding-left: 8px;
        padding-right: 8px;

        font-size: 11px;
    }

    .pwi-main-nav-account a {
        padding-left: 9px;
        padding-right: 9px;
    }
}


@media (max-width: 1000px) {

    .pwi-main-nav-inner {
        display: flex;
        flex-wrap: wrap;

        justify-content: center;

        padding-top: 10px;
        padding-bottom: 10px;

        row-gap: 8px;
    }

    .pwi-main-nav-brand {
        flex: 1 1 220px;
    }

    .pwi-main-nav-brand img {
        width: 205px;
    }

    .pwi-main-nav-account {
        flex: 0 0 auto;
    }

    .pwi-main-nav-links {
        order: 3;

        flex: 1 0 100%;

        flex-wrap: wrap;
    }
}


@media (max-width: 640px) {

    .pwi-main-nav-inner {
        width: calc(100% - 20px);
    }

    .pwi-main-nav-brand {
        flex: 1 0 100%;
        justify-content: center;
    }

    .pwi-main-nav-brand img {
        width: 190px;
    }

    .pwi-main-nav-account {
        flex: 1 0 100%;
        justify-content: center;
    }

    .pwi-main-nav-links {
        gap: 4px;
    }

    .pwi-main-nav-link {
        min-height: 36px;

        padding: 0 8px;

        font-size: 10px;
    }
}

/* FIN PW INFIERNO UNIFIED NAVBAR V1 */


/* ==========================================================
   PWI_NAVBAR_POSITION_FIX_V1_1
   Logo más hacia la izquierda.
   ========================================================== */

@media (min-width: 1001px) {

    .pwi-main-nav-inner {
        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin-left: 20px !important;
        margin-right: 20px !important;

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

    .pwi-main-nav-brand {
        justify-content: flex-start !important;
    }

    .pwi-main-nav-brand img {
        width: 255px !important;
        max-width: 100% !important;
    }

}

/* FIN PWI_NAVBAR_POSITION_FIX_V1_1 */