#nav{
    width: 430px; 
    height: 151.62px; 
    left: 0px; 
    top: 0px; 
    position: absolute; 
}

/*nav_bar.css*/
.NavBar{
    width: 430px; 
    height: 151.62px; 
    left: 0.24px; 
    top: 0px; 
    position: absolute; 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.RectangleNavBar{
    width: 429.87px; 
    height: 151.38px; 
    left: 0.13px; 
    top: 0.24px; 
    position: absolute; 
    background: linear-gradient(89deg, #542853 0%, #542853 17%, #954B97 98%, #954B97 100%);
}

.MarcaMicael{
    width: 269.15px; 
    height: 112.07px; 
    left: 21px; 
    top: 19.77px; 
    position: absolute; 
    overflow: hidden;
}

.Menu{
    left: 336.97px; 
    top: 67.15px; 
    position: absolute;
    width: 50px;
}

.MicaelMarca1{
    width: 263.55px; 
    height: 106.30px; 
    left: 2.80px; 
    top: 2.89px; 
    position: absolute;
}

/*menu.css*/

.Menu2{
    width: 430px; 
    height: 235px; 
    left: 0px; 
    top: 151.62px;
    position: absolute; 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
    overflow: hidden;
    background: rgba(52, 52, 52, 0.9);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;

}

.Rectangle10{
    width: 430px; 
    height: 234.84px; 
    left: 0px; 
    top: 0.08px; 
    position: absolute; 
    background: rgba(52.72, 52.72, 52.72, 0.90);
    background-blend-mode: multiply;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.menu_item{
    left: 43px; 
    position: absolute; 
    justify-content: center; 
    display: flex; 
    flex-direction: column; 
    color: white; 
    font-size: 20px; 
    font-family: Montserrat; 
    font-weight: 600; 
    word-wrap: break-word;
}

/*                           */


/* =========================
   MENU DESPLEGABLE
   ========================= */

/* Menú visible */
.Menu2.show {
    width: 430px; 
    height: 235px; 
    left: 0px; 
    top: 151.62px;
    position: absolute; 
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
    overflow: hidden;
    background: rgba(52, 52, 52, 0.9);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 1 !important;
    pointer-events: auto !important;
    
}
/* Hacer que el botón sea clickeable */
#menuButton {
  position: relative;
  z-index: 10001;
  cursor: pointer;
}

/* Por si algo tiene pointer-events y tapa el botón */
.RectangleNavBar, .MarcaMicael {
  pointer-events: none;
}

/* Convertimos los textos en botones */
.menu_button {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    font-family: Montserrat;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

.menu_button:hover {
    color: #D5A6E6;
}