.modal-menu {
     position: fixed;
     color: #757474;
     top: 0;
     right: -103%;
     /* Fuera de la vista */
     width: 100%;
     max-width: 500px;
     height: 100vh;
     background-color: white;
     z-index: 9999999;
     opacity: 0;
     /* Inicialmente invisible */
     visibility: hidden;
     /* Ocultado del usuario */
     transition: opacity 0.5s ease, visibility 0s 0.5s, right 0.5s ease;
     /* Transición suave */
     display: flex;
     flex-direction: column;
 }

 .modal-menu.active {
     right: 0%;
     /* Entra a la vista */
     opacity: 1;
     /* Visible */
     visibility: visible;
     /* Ahora se muestra */
     transition: opacity 0.5s ease, visibility 0s 0s, right 0.5s ease;
 }

 /* Botón de cierre */
 .modal-menu .modal-menu-close {
     font-size: 28px;
     cursor: pointer;
 }

 .modal-menu .modal-menu-header {
     padding: 20px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #333;
     flex-shrink: 0;
     /* Mantiene el header fijo sin reducción */
 }

 .modal-menu .modal-menu-image {
     width: 100%;
     height: 200px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     flex-shrink: 0;
     /* Mantiene la imagen fija sin reducción */
 }

 .modal-menu .modal-menu-content {
     padding: 20px 32px;
     overflow-y: auto;
     scrollbar-gutter: stable;
     box-sizing: border-box;
     flex-grow: 1;
     /* Permite que este contenedor ocupe el espacio disponible */

     /* Oculta la barra de scroll en navegadores modernos */
     /*   scrollbar-width: none; */
     /* Firefox */
     /*  -ms-overflow-style: none; */
     /* Internet Explorer 10+ */
 }



 .modal-menu .modal-menu-content ul {
     list-style-type: disc;
     margin-left: 26px;
     margin-bottom: 12px;
 }

 .modal-menu .modal-menu-content::-webkit-scrollbar {
  /*   display: none; */
     /* Chrome, Safari y Edge */
 }

 .modal-menu .modal-menu-footer {
     padding: 20px 32px;

     text-align: right;
     flex-shrink: 0;
     /* Fija el footer en la parte inferior */
     border-top: 1px solid #ddd;
 }

 /* Overlay para el fondo oscuro */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.5);
     z-index: 9998;
     opacity: 0;
     visibility: hidden;
     transition: opacity 1s ease;
 }

 .modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }