/* =========================================
   1. BASE: COR DA BARRA (TODAS AS TELAS)
   ========================================= */
.menu.superior {
    background-color: #26014F !important; /* Roxo Escuro */
    border-bottom: none !important;
}

/* =========================================
   2. REGRAS SÓ PARA COMPUTADOR (TELAS GRANDES)
   ========================================= */
@media screen and (min-width: 768px) {
    /* Barra infinita no PC */
    .menu.superior { 
        width: 100vw !important; 
        position: relative; 
        left: 50%; 
        margin-left: -50vw; 
        display: flex; 
        justify-content: center; 
    }
    .menu.superior .nivel-um { 
        display: flex; 
        flex-wrap: wrap; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        max-width: 1200px; 
        width: 100%; 
        justify-content: center; 
    }

    /* Links principais */
    .menu.superior .nivel-um > li > a { 
        color: #FFFFFF !important; 
        padding: 15px 20px; 
        display: block; 
        text-decoration: none; 
        font-weight: 600; 
        text-transform: uppercase; 
        font-size: 14px; 
        transition: background-color 0.3s ease; 
    }
    .menu.superior .nivel-um > li:hover > a { 
        background-color: #EF2356 !important; 
        color: #FFFFFF !important; 
    }

    /* Submenus dropdown (Escondidos por padrão, abrem ao passar o mouse) */
    .menu.superior li { position: relative; }
    .menu.superior .nivel-dois, .menu.superior .nivel-tres { 
        display: none; position: absolute; background-color: #FFFFFF !important; 
        list-style: none; padding: 0; margin: 0; min-width: 240px; 
        box-shadow: 0px 5px 15px rgba(0,0,0,0.15); z-index: 999; 
    }
    .menu.superior .nivel-dois { top: 100%; left: 0; border-top: 3px solid #EF2356 !important; }
    .menu.superior .nivel-tres { top: 0; left: 100%; }
    .menu.superior li:hover > .nivel-dois, .menu.superior .nivel-dois li:hover > .nivel-tres { display: block; }

    /* Links dos submenus no PC */
    .menu.superior .nivel-dois a, .menu.superior .nivel-tres a { 
        color: #26014F !important; background-color: #FFFFFF !important; 
        padding: 12px 18px; display: block; text-decoration: none; 
        font-size: 14px; border-bottom: 1px solid #f2f2f2 !important; transition: all 0.2s ease; 
    }
    .menu.superior .nivel-dois li:hover > a, .menu.superior .nivel-tres li:hover > a { 
        background-color: #EF2356 !important; color: #FFFFFF !important; padding-left: 25px !important; 
    }
    .menu.superior .nivel-dois li:last-child > a, .menu.superior .nivel-tres li:last-child > a { border-bottom: none !important; }

    /* Setas no PC */
    .menu.superior i, .menu.superior span, .menu.superior strong, .menu.superior b, .menu.superior [class*="icon-"] { 
        background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; 
    }
    .menu.superior .nivel-um > li > a i::before, .menu.superior .nivel-um > li > a [class*="icon-"]::before { color: #FFFFFF !important; }
    .menu.superior .nivel-dois a i::before, .menu.superior .nivel-tres a i::before, .menu.superior .nivel-dois a [class*="icon-"]::before, .menu.superior .nivel-tres a [class*="icon-"]::before { color: #26014F !important; }
    .menu.superior li:hover > a i::before, .menu.superior li:hover > a [class*="icon-"]::before { color: #FFFFFF !important; }
}

/* =========================================
   3. REGRAS SÓ PARA O CELULAR (MOBILE)
   ========================================= */
@media screen and (max-width: 767px) {
    
    /* Garante o fundo Roxo para o menu e submenus abertos no celular */
    .menu.superior .nivel-um,
    .menu.superior .nivel-dois,
    .menu.superior .nivel-tres {
        background-color: #26014F !important;
    }

    /* Força TODAS as letras (principais e subcategorias) a ficarem BRANCAS */
    .menu.superior .nivel-um > li > a,
    .menu.superior .nivel-dois a,
    .menu.superior .nivel-tres a {
        color: #FFFFFF !important;
        font-weight: 600;
        background-color: transparent !important;
    }

    /* Limpa os fundos vermelhos das setas no celular e pinta elas de branco */
    .menu.superior a i,
    .menu.superior a [class*="icon-"] {
        background: transparent !important;
        border: none !important;
    }
    .menu.superior a i::before,
    .menu.superior a [class*="icon-"]::before {
        color: #FFFFFF !important;
    }
}

/* =========================================
   4. MENU LATERAL E TÍTULOS (TODAS AS TELAS)
   ========================================= */
.menu.lateral, .menu.lateral ul, .menu.lateral li, .menu.lateral a { border: none !important; box-shadow: none !important; }
.menu.lateral a, .menu.lateral a strong, .menu.lateral a b, .menu.lateral a span { color: #26014F !important; background-color: transparent !important; transition: all 0.3s ease; }
.menu.lateral li:hover > a, .menu.lateral li:hover > a strong, .menu.lateral li:hover > a b, .menu.lateral li:hover > a span { background-color: #EF2356 !important; color: #FFFFFF !important; }
.menu.lateral a i, .menu.lateral a [class*="icon-"] { background: transparent !important; background-color: transparent !important; border: none !important; }
.menu.lateral a i::before, .menu.lateral a [class*="icon-"]::before { color: #26014F !important; }
.menu.lateral li:hover > a i::before, .menu.lateral li:hover > a [class*="icon-"]::before { color: #FFFFFF !important; }
.coluna .titulo { color: #26014F !important; border-bottom: 2px solid #26014F !important; }


/* =========================================
   8. MATANDO O FUNDO VERMELHO DOS SUBMENUS (AGORA VAI!)
   ========================================= */

/* Força a transparência no fundo de qualquer ícone/seta dentro do submenu */
.menu.superior .nivel-dois li a i,
.menu.superior .nivel-dois li a span,
.menu.superior .nivel-dois li a b,
.menu.superior .nivel-dois li a strong,
.menu.superior .nivel-dois li a [class*="icon-"] {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pinta apenas o desenho da setinha com o Roxo Escuro da marca */
.menu.superior .nivel-dois li a i::before,
.menu.superior .nivel-dois li a span::before,
.menu.superior .nivel-dois li a b::before,
.menu.superior .nivel-dois li a [class*="icon-"]::before {
    color: #26014F !important;
}

/* Quando passar o mouse, a setinha acompanha o texto e fica Branca */
.menu.superior .nivel-dois li:hover > a i::before,
.menu.superior .nivel-dois li:hover > a span::before,
.menu.superior .nivel-dois li:hover > a b::before,
.menu.superior .nivel-dois li:hover > a [class*="icon-"]::before {
    color: #FFFFFF !important;
}