.site-header {
    position: relative;
    z-index: 1000;
}


/* ==========================================================
   TOP BAR
========================================================== */

.topbar {
    background: var(--primary);
    color: rgba(255,255,255,.85);
    font-size: .82rem;
}

.topbar-content {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-info,
.topbar-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-info i {
    margin-right: 4px;
}

.topbar-social a {
    color: inherit;
    text-decoration: none;

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

.topbar-social a:hover {
    color: var(--secondary);
    transform: translateY(-1px);
}

.nav-link-aovivo {
    position: relative;
    color: #b84f70 !important;
    font-weight: 700 !important;
}

.nav-link-aovivo::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #d94b6a;
    box-shadow: 0 0 0 0 rgba(217, 75, 106, .5);
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 75, 106, .5);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(217, 75, 106, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 75, 106, 0);
    }
}
/* ==========================================================
   NAVBAR
========================================================== */

#main-navbar {
    min-height: 82px;

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

    transition:
        background-color .3s ease,
        box-shadow .3s ease,
        min-height .3s ease;
}

#main-navbar.scrolled {
    min-height: 68px;

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

    box-shadow:
        0 5px 25px rgba(0,0,0,.08);
}


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

.navbar-brand {
    text-decoration: none;
    color: var(--primary);
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 52px;
    height: 52px;

    object-fit: contain;

    transition:
        width .3s ease,
        height .3s ease;
}

.scrolled .brand-logo {
    width: 44px;
    height: 44px;
}

.brand-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.brand-text span {
    font-family: 'Inter', sans-serif;

    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;

    color: var(--muted);
}

.brand-text strong {
    font-family: 'Lora', serif;

    font-size: 1rem;
    font-weight: 600;

    color: var(--primary);
}


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

.navbar-nav {
    gap: 4px;
}

.nav-link {
    color: var(--text);

    font-size: .91rem;
    font-weight: 500;

    padding: .65rem .7rem !important;

    position: relative;
}

.nav-link::after {
    transition: all .2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary);
}


/* Linha inferior */

.nav-link:not(.dropdown-toggle)::before {
    content: '';

    position: absolute;

    left: .7rem;
    right: .7rem;
    bottom: .25rem;

    height: 2px;

    background: var(--secondary);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .25s ease;
}

.nav-link:not(.dropdown-toggle):hover::before,
.nav-link.active:not(.dropdown-toggle)::before {
    transform: scaleX(1);
}


/* ==========================================================
   DROPDOWN
========================================================== */

.dropdown-menu {
    border: 0;

    border-radius: 12px;

    padding: 8px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);
}

.dropdown-item {
    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 8px;

    padding: 10px 12px;

    font-size: .9rem;
}

.dropdown-item i {
    color: var(--secondary);
}

.dropdown-item:hover {
    color: var(--primary);
    background: #f4f7fb;
}


/* ==========================================================
   BOTÃO AO VIVO
========================================================== */

.btn-live {
    display: inline-flex;

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

    gap: 8px;

    background: #b4232f;
    color: #fff;

    border: 0;

    border-radius: 50px;

    padding: 9px 18px;

    font-size: .85rem;
    font-weight: 600;

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

.btn-live:hover {
    background: #941d27;
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(180,35,47,.25);
}

.live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #fff;

    animation: livePulse 1.5s infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.75);
    }

}


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

.navbar-toggler {
    border: 0;

    padding: 8px;

    box-shadow: none !important;
}

.navbar-toggler-icon {
    width: 1.6em;
    height: 1.6em;
}


/* ==========================================================
   OFFCANVAS
========================================================== */

.mobile-menu {
    width: min(360px, 90vw);

    border: 0;

    background: #fff;
}

.mobile-menu .offcanvas-header {
    padding: 25px;
    border-bottom: 1px solid #eee;
}

.mobile-menu-title {
    display: block;

    font-size: .7rem;

    text-transform: uppercase;
    letter-spacing: .15em;

    color: var(--muted);
}

.mobile-menu strong {
    display: block;

    margin-top: 3px;

    font-family: 'Lora', serif;

    color: var(--primary);
}

.mobile-nav {
    list-style: none;

    padding: 0;
    margin: 0;
}

.mobile-nav li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav a {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 4px;

    color: var(--text);

    text-decoration: none;

    font-weight: 500;
}

.mobile-nav a i {
    width: 22px;

    color: var(--primary);

    font-size: 1.1rem;
}

.mobile-nav a:hover {
    color: var(--primary);
}


/* ==========================================================
   MOBILE AO VIVO
========================================================== */

.mobile-live {
    margin-top: 25px;
}


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

.mobile-social {
    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 28px;
}

.mobile-social a {
    display: flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: #f4f6f9;

    color: var(--primary);

    text-decoration: none;

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

.mobile-social a:hover {
    background: var(--primary);
    color: #fff;
}


/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 991.98px) {

    .topbar {
        display: none;
    }

    #main-navbar {
        min-height: 70px;
    }

    .brand-logo {
        width: 46px;
        height: 46px;
    }

    .brand-text strong {
        font-size: .9rem;
    }

}