/* Menu em cascata exclusivo da versão mobile. O recorte de desktop permanece intacto. */
@media (max-width: 720px) {
    .site-header .brand-row {
        height: 186px;
        grid-template-columns: 150px 1fr;
        grid-template-rows: 68px 48px 58px;
        grid-template-areas:
            "brand quick"
            "search search"
            "menu menu";
        gap: 5px 8px;
    }

    .site-header .mobile-menu {
        grid-area: menu;
        position: relative;
        z-index: 4;
        display: flex;
        opacity: 1;
        visibility: visible;
        align-items: center;
        width: 100%;
        height: 54px;
        margin: 2px 0 0;
        padding: 0 11px;
        color: #fff;
        border: 1px solid rgba(255, 56, 89, .34);
        border-radius: 16px;
        background:
            linear-gradient(100deg, rgba(242, 11, 56, .16), transparent 42%),
            linear-gradient(135deg, #17191d, #090a0c 70%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .08),
            0 10px 25px rgba(0, 0, 0, .28);
        text-align: left;
        transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    }

    .site-header .mobile-menu::after {
        content: "";
        position: absolute;
        left: 54px;
        right: 54px;
        bottom: 7px;
        height: 1px;
        background: linear-gradient(90deg, rgba(242, 11, 56, .78), rgba(242, 11, 56, 0));
        pointer-events: none;
    }

    .site-header .mobile-menu:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
    }

    .site-header .mobile-menu[aria-expanded="true"] {
        border-color: rgba(255, 65, 98, .7);
        background:
            linear-gradient(100deg, rgba(242, 11, 56, .24), transparent 52%),
            linear-gradient(135deg, #1c1e22, #090a0c 72%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .1),
            0 0 0 1px rgba(242, 11, 56, .12),
            0 12px 28px rgba(0, 0, 0, .34);
    }

    .site-header .mobile-menu-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        color: #ff3157;
        border: 1px solid rgba(255, 73, 105, .32);
        border-radius: 12px;
        background: rgba(255, 255, 255, .04);
    }

    .site-header .mobile-menu-icon svg {
        width: 21px;
        height: 21px;
        stroke-width: 2;
    }

    .site-header .mobile-menu-copy {
        min-width: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        padding: 0 11px;
    }

    .site-header .mobile-menu-copy small,
    .site-header .mobile-menu-copy strong {
        display: block;
    }

    .site-header .mobile-menu-copy small {
        color: #aeb0b6;
        font-size: 8px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 1.8px;
    }

    .site-header .mobile-menu-copy strong {
        margin-top: 3px;
        font-size: 15px;
        line-height: 1;
        font-weight: 700;
    }

    .site-header .mobile-menu-arrow {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 50%;
        background: rgba(255, 255, 255, .04);
        font-size: 0;
        line-height: 1;
        transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    }

    .site-header .mobile-menu-arrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .24s ease;
    }

    .site-header .mobile-menu[aria-expanded="true"] .mobile-menu-arrow {
        border-color: rgba(255, 49, 87, .58);
        background: rgba(242, 11, 56, .075);
        box-shadow: 0 0 12px rgba(242, 11, 56, .13);
    }

    .site-header .mobile-menu[aria-expanded="true"] .mobile-menu-arrow::before {
        transform: translateY(2px) rotate(225deg);
    }

    .site-header .main-nav {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        background:
            radial-gradient(circle at 12% 0, rgba(242, 11, 56, .16), transparent 38%),
            linear-gradient(180deg, #14161a, #07080a 86%);
        background-image:
            radial-gradient(circle at 12% 0, rgba(242, 11, 56, .16), transparent 38%),
            linear-gradient(180deg, #14161a, #07080a 86%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
        transform: translateY(-7px);
        transition: max-height .34s ease, opacity .22s ease, transform .28s ease, visibility 0s linear .34s;
    }

    .site-header .main-nav.open {
        height: auto;
        max-height: 405px;
        width: 100%;
        overflow: hidden;
        visibility: visible;
        opacity: 1;
        background:
            radial-gradient(circle at 12% 0, rgba(242, 11, 56, .16), transparent 38%),
            linear-gradient(180deg, #14161a, #07080a 86%);
        background-image:
            radial-gradient(circle at 12% 0, rgba(242, 11, 56, .16), transparent 38%),
            linear-gradient(180deg, #14161a, #07080a 86%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
        transform: translateY(0);
        transition: max-height .38s ease, opacity .22s ease, transform .28s ease, visibility 0s;
    }

    .site-header .main-nav::before,
    .site-header .main-nav::after,
    .site-header .nav-glow {
        display: none;
    }

    .site-header .nav-items {
        position: relative;
        width: calc(100% - 24px);
        height: auto;
        margin-inline: auto;
        padding: 8px 0 12px;
        display: grid;
        grid-template-columns: 1fr;
        opacity: 1;
    }

    .site-header .nav-items a,
    .site-header .nav-items a.active {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        height: 54px;
        margin: 0;
        padding: 0 11px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        color: #f8f8f9;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        font-weight: 600;
        opacity: 0;
        transform: translateY(-9px);
        transition: opacity .2s ease, transform .25s ease, background-color .2s ease;
    }

    .site-header .nav-items a:nth-child(n) {
        left: auto;
        width: 100%;
    }

    .site-header .nav-items a:last-child {
        border-bottom: 0;
    }

    .site-header .nav-items a.active {
        color: #fff;
        border-radius: 13px;
        background: linear-gradient(90deg, rgba(242, 11, 56, .2), rgba(242, 11, 56, .03));
    }

    .site-header .nav-items a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
        border-radius: 12px;
    }

    .site-header .nav-items a svg {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        padding: 8px;
        color: #ff3157;
        border: 1px solid rgba(255, 73, 105, .28);
        border-radius: 12px;
        background: rgba(255, 255, 255, .035);
        stroke-width: 1.9;
    }

    .site-header .nav-items a span {
        flex: 1 1 auto;
    }

    .site-header .nav-items a b {
        flex: 0 0 24px;
        color: #bfc1c6;
        font-size: 22px;
        font-weight: 400;
        text-align: center;
    }

    .site-header .main-nav.open .nav-items a {
        opacity: 1;
        transform: translateY(0);
    }

    .site-header .main-nav.open .nav-items a:nth-child(1) { transition-delay: .02s; }
    .site-header .main-nav.open .nav-items a:nth-child(2) { transition-delay: .055s; }
    .site-header .main-nav.open .nav-items a:nth-child(3) { transition-delay: .09s; }
    .site-header .main-nav.open .nav-items a:nth-child(4) { transition-delay: .125s; }
    .site-header .main-nav.open .nav-items a:nth-child(5) { transition-delay: .16s; }
    .site-header .main-nav.open .nav-items a:nth-child(6) { transition-delay: .195s; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .mobile-menu,
    .site-header .mobile-menu-arrow,
    .site-header .mobile-menu-arrow::before,
    .site-header .main-nav,
    .site-header .nav-items a {
        transition: none !important;
    }
}