/* Mobile Menu - Estilos simplificados e diretos */
@media (max-width: 992px) {
    /* Reset de algumas propriedades que podem estar causando problemas */
    .menu {
        position: fixed;
        top: 0;
        right: -100%; /* Começa fora da tela */
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: #E07A5F;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1000;
        transition: right 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Quando o menu estiver ativo, mova-o para dentro da tela */
    .menu.active {
        right: 0 !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-color: #E07A5F !important;
    }
    
    /* Estilo dos itens do menu */
    .menu ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 20px;
    }
    
    .menu.active ul {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menu li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }
    
    .menu.active li {
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Botão de menu mobile */
    .menu-mobile {
        display: block;
        position: relative;
        z-index: 1002;
        cursor: pointer;
        font-size: 24px;
        color: white;
        background-color: #E07A5F;
        padding: 10px 12px !important;
        border-radius: 4px !important;
        transition: all 0.3s ease;
    }
    
    /* Mudar o ícone quando o menu estiver ativo */
    .menu-mobile.active i:before {
        content: "\f00d"; /* Ícone "X" */
    }
    
    /* Estilo dos links do menu */
    .menu a {
        font-size: 1.2rem;
        color: white;
        width: 100%;
        display: block;
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transition: background-color 0.3s ease;
    }
    
    .menu a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    
    /* Overlay para quando o menu estiver aberto */
    body::after {
        content: '';
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    body.menu-open::after {
        display: block;
    }
    
    /* Esconde o scrollbar quando o menu estiver aberto */
    body.menu-open {
        overflow: hidden;
    }
}