.menu ul {
    transition: 0.3s;
}

#menu-icon {
    
    font-size: 36px;
    margin: 10px 10px 0px 15px;
    display: none;
}

.mobile-menu {
    display: none;
}

@media (max-width: 768px) {    

    #menu-icon {        
        display: block;        
    }

    .menu {
        display: none;        
    }
    
    .mobile-menu {
        position: absolute;
        top: 40px;
        left: 10px;
        width: 90%;
        height: fit-content;
        background-color: var(--color-principal);        
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);        
        z-index: 11;
        display: none;
    }
    
    .mobile-menu.active {
        display: block;
        border: 1px solid var(--color-principal);
        background-color: var(--general-bg1-color);
        border-radius: 10px;
        transition: ease-in .4s;
        top: 35px;
        left: 10px;
        opacity: 0.9;
    }
    
    .mobile-menu.active ul{
        display: flex;
        flex-direction: column; 
        padding: 5px 2px 5px 10px;
        list-style: none;
    }
    
    .mobile-menu.active ul .mytoo{
        display: inline-flex;
        position: fixed;
        z-index: 10;
        max-width: 280px;
        min-width: 240px;
        margin-left: 80px;
        z-index: 10;
        top: 0;
    }        
    
    
    .mobile-menu.active a {
        color: var(--color-texto2);
        text-decoration: none;
        font-size: 14px;
        text-transform: uppercase;
        line-height: 25px;
    }
    
    .mobile-dropdown-arrow {
        font-size: 12px;
        cursor: pointer;
    }
    
    .areaMb {
        background-color: var(--color-principal);
        border-radius: 10px;
        border: 1px solid var(--genera-bg1-color);
        margin: 1px;
        padding: 10px;
        font-size: 12px;  
        line-height: 25px;
        text-transform: lowercase;
    }
    
    .areaMbSub {    
        /*background-color: var(--color-principal);*/
        border-radius: 10px;
        border: 1px solid var(--general-bg1-color);
        margin: 1px;
        padding: 10px;
        line-height: 25px;        
/*        font-size: 12px;
        letter-spacing: 2px;*/
    }
    
    .mobile-menu.active .areaMb  a {
        text-transform: capitalize;
    }    
    
    .mobile-menu.active .areaMbSub  p {
        text-transform: lowercase;
    }
    
    .mobile-menu.active .areaMbSub  p:first-letter {
        text-transform: uppercase;
    }
    

    
}