/* Modelo 2 — Vidro editorial. Ajusta somente o primeiro item do menu no computador. */
@media (min-width: 721px) {
    .site-header .nav-items a.active {
        position: relative;
        height: 52px;
        margin: 0 7px;
        padding: 6px 44px 6px 68px;
        justify-content: flex-start;
        gap: 0;
        color: #fff;
        border: 1px solid rgba(242, 11, 56, .38);
        border-radius: 12px;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, .035), rgba(242, 11, 56, .035)),
            rgba(13, 11, 14, .96);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .045),
            0 0 0 1px rgba(242, 11, 56, .055),
            -5px 0 18px rgba(242, 11, 56, .15),
            0 8px 20px rgba(0, 0, 0, .34);
    }

    .site-header .nav-items a.active::before {
        content: "";
        position: absolute;
        left: 6px;
        top: 9px;
        width: 4px;
        height: 34px;
        border-radius: 3px;
        background: #f20b38;
        box-shadow: 0 0 9px rgba(242, 11, 56, .34);
    }

    .site-header .nav-items a.active::after {
        display: none;
    }

    .site-header .nav-items a.active svg {
        position: absolute;
        left: 20px;
        top: 10px;
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        padding: 6px;
        color: #f20b38;
        border: 1px solid rgba(242, 11, 56, .52);
        border-radius: 9px;
        background: rgba(242, 11, 56, .055);
        stroke-width: 1.85;
    }

    .site-header .nav-items a.active span {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        color: #fff;
        font-size: 13px;
        line-height: 1.05;
        font-weight: 700;
    }

    .site-header .nav-items a.active span::before {
        content: "CATÁLOGO";
        margin-bottom: 4px;
        color: #f20b38;
        font-size: 6.5px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .16em;
    }

    .site-header .nav-items a.active b {
        position: absolute;
        right: 17px;
        top: 50%;
        margin: 0;
        color: #f20b38;
        font-size: 22px;
        line-height: 1;
        font-weight: 500;
        transform: translateY(-52%);
    }

    .site-header .nav-items a.active:hover {
        border-color: rgba(242, 11, 56, .55);
        background:
            linear-gradient(120deg, rgba(255, 255, 255, .045), rgba(242, 11, 56, .055)),
            rgba(15, 12, 16, .98);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .06),
            0 0 0 1px rgba(242, 11, 56, .07),
            -5px 0 20px rgba(242, 11, 56, .19),
            0 9px 22px rgba(0, 0, 0, .38);
    }

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

@media (min-width: 721px) and (max-width: 1000px) {
    .site-header .nav-items a.active {
        margin-inline: 5px;
        padding: 5px 25px 5px 49px;
        border-radius: 10px;
    }

    .site-header .nav-items a.active::before {
        left: 5px;
        top: 10px;
        height: 32px;
    }

    .site-header .nav-items a.active svg {
        left: 14px;
        top: 12px;
        width: 28px;
        height: 28px;
        padding: 5px;
        border-radius: 8px;
    }

    .site-header .nav-items a.active span {
        font-size: 10px;
    }

    .site-header .nav-items a.active span::before {
        margin-bottom: 3px;
        font-size: 5.3px;
    }

    .site-header .nav-items a.active b {
        right: 8px;
        font-size: 17px;
    }
}