/* Contenedor del botón y el menú */
    .menu-container {
        position: fixed;
        /* display: flex; */
        /* mantiene el menú alineado al botón */
        top: 3.5vh;
        right: 20px;
        /* 👈 lo coloca a la derecha */
        z-index: 10000;
        /* z-index: 9999; */
    }

    .hamburger {
        /* display: flex; */
        flex-direction: column;
        cursor: pointer;
        justify-content: space-between;

        /* width: 50px; */
        /* height: 22px; */
        cursor: pointer;
        display: none;

        /* 
       display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 22px;
      cursor: pointer; */
    }

    .bar {
        width: 28px;
        height: 3.5px;
        background-color: white;
        margin: 3px 0px 3px 0px;
        transition: 0.4s;
        border-radius: 5px;

    }




    /* .hamburger div {
        width: 100%;
        height: 4px;
        background-color: #ffffff;
        margin: 5px 0;
        transition: 0.4s;
        height: 4px;

        border-radius: 2px;
        transition: 0.3s;
    } */

    /* Menú oculto por defecto */
    .toogle-menu {
        /* display: none;
        flex-direction: column;
        background-color: #f5f5f5;
        position: absolute;
        top: 50px;
        left: 15px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px; */



        display: none;
        position: absolute;
        top: 120%;
        /* justo debajo del botón */
        right: 0;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /* padding: 10px 0; */
        min-width: 160px;
        z-index: 29999;
        animation: slideDownLeft 0.55s ease forwards;

        display: none;
        position: absolute;
        top: 120%;
        right: 0;
        min-width: 180px;
        border-radius: 10px;
        padding: 10px 0;
        border: 1px solid rgba(255, 255, 255, 0.15);

        /* 💎 efecto de vidrio */
        background: rgba(19, 41, 75, 0.55);
        /* azul oscuro translúcido */
        background: rgba(1, 41, 102, 0.55);
        /* azul oscuro translúcido */
        background: linear-gradient(90deg, rgba(2, 45, 100, 0.55), rgba(5, 73, 161, 0.55), rgba(2, 45, 100, 0.55));

        backdrop-filter: blur(10px) saturate(160%);
        -webkit-backdrop-filter: blur(10px) saturate(160%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        color: #007bff;

    }

    .toogle-menu a {
        text-decoration: none;
        color: #333;
        padding: 8px 0;
        display: block;
        color: #ebebeb;
    }

    .toogle-menu a:hover {
        color: #75b7fd !important;
    }

    /* Mostrar menú activo */
    .toogle-menu.active {
        display: flex;

        display: block;
        animation: fadeIn 0.2s ease-in-out;
    }

    /* Animación de entrada: hacia abajo e izquierda */
    @keyframes slideDownLeft {
        from {
            opacity: 0;
            transform: translate(20px, -10px);
        }

        to {
            opacity: 1;
            transform: translate(0, 0);
        }
    }

    /* Animación suave al abrir */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* .toogle-menu a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      color: #333;
  } */

    /* .toogle-menu a:hover {
      background-color: #a50000;
  } */

    @media (max-width: 768px) {
        .hamburger {
            display: flex;
        }
    }