.menu {
    display: grid;
    grid-template-columns: 125px minmax(200px, 800px);
    align-items: center;
    position: relative;
    gap: 5px;
    margin: 0 auto;
    max-width: 900px;
    /* justify-content: center;*/
    justify-content: space-between;
    z-index: 1500;
}

.menu-imagen {
    display: grid;
    grid-column-start: 1;
}

.menu-imagen img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.menu-botones {
    display: grid;
    grid-column-start: 2;
    inline-size: max-content;
    justify-content: start;
}

.menu-botones ul {
    height: max-content;
    list-style-type: none;
    display: flex;
    gap: 5px;
    margin-left: -20px;
}

.menu-botones ul li {
    position: relative;
}

.menu-botones ul li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color, scale 0.6s cubic-bezier(0.4, -0.29, 0.42, 0.83);
    scale: 1;
    background-color: var(--ColorMenuFondo);
}

.menu-botones ul li:hover>a,
.menu-botones ul li a.open {
    background-color: var(--ColorMenuFondo2);
    scale: 1.07;
}


.menu-botones ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    list-style-type: none;
}

.menu-botones ul ul li {
    width: 167px;
}

.menu-botones ul ul li:hover>ul {
    display: block;
    margin-top: -39px;
}

.menu-botones ul ul li a {
    padding: 10px 20px;
    margin-left: 20px;
}

.menu-botones ul ul ul li {
    width: 317px;
}

.menu-botones ul ul ul li a {
    padding: 10px;
    margin-left: 191px;
}

.arrow {
    margin-left: 5px;
    color: var(--FlechaMenu);
}

.menu-botones ul ul.open {
    display: block;
    animation: slideDown 0.4s ease-in-out;
}

.mobile-date {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Estilo para el menú cuando está fijo */
.menu.fixed {
    position: fixed;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 125px minmax(200px, 1000px);
    justify-content: center;
}

.menu.fixed .menu-botones {
    justify-content: center;
}

/* Estilos para el ícono de hamburguesa */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 38px;
    /*30px*/
    height: 38px;
    /*27px*/
    margin-bottom: 9px;
    /*agregado*/
    cursor: pointer;
}

.hamburger-menu span {
    display: block;
    height: 4px;
    width: 100%;
    background-color: var(--ColorMenuHamburgesa);
    border-radius: 4px;
    transition: transform 0.3s ease;
}


#nav-menu.active {
    display: flex;
    /* Mostrar el menú cuando se activa */
    flex-direction: column;
    width: 100%;
}



/*@media (max-width: 768px) {*/
@media (max-width: 1025px) {
    .menu {
        grid-template-columns: 114px minmax(200px, 800px);
        /* grid-template-columns: 1fr 1fr;*/
        justify-content: space-between;
        display: grid;
        gap: 0;
        flex-direction: column;


    }

    .menu.fixed {
        position: fixed;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1500;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

        display: grid;
        grid-template-columns: 125px minmax(200px, 800px);

    }

    .menu-botones {
        grid-column-start: 0;
        display: none;
        flex-direction: column;
        width: 100%;
        inline-size: max-content;
        justify-content: center;
        /* Cambiado de start a center */
        position: absolute;
        /* Posición absoluta para poder centrarlo mejor */
        top: 60px;
        /* Ajusta según sea necesario */
        left: 50%;
        /* Centrado horizontalmente */
        transform: translateX(-50%);
        /* Ajuste para centrar correctamente */
        transition: top 0.5s ease-in-out;
    }

    .menu-botones ul {
        list-style-type: none;
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 0;
        margin: 0;

    }

    .hamburger-menu.active~.menu-botones {
        top: 20px;
        margin: 0 auto;

        /* Mueve el menú desplegable más cerca de la "X" */
    }


    .menu-botones ul a {
        width: 150px;
        margin: 0 auto;
    }


    .menu-botones ul li {
        width: 100%;
    }

    .menu-botones ul li a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 7px 10px;
        transition: background-color, scale 0.6s cubic-bezier(0.4, -0.29, 0.42, 0.83);
        scale: 1;
        margin: -1px;
        background-color: var(--ColorMenuFondo);
    }

    .menu-botones ul ul {
        /*
        position: relative;
 direction: rtl;
 */
        display: none;
        /* Submenús ocultos por defecto */


        padding: 0;
        margin: 0;
        background-color: var(--ColorMenuFondo);
    }

    .menu-botones ul ul.open {
        display: block;

        /* Submenú se muestra cuando se añade la clase 'open' */
    }

    .menu-botones ul ul ul li a {
        padding: 5px 10px;
        margin-left: 0px;
        background-color: var(--ColorMenuFondo4);
    }


    .menu-botones ul ul li:hover>ul {
        display: block;
        margin-top: 0px;
        position: relative;

    }

    .menu-botones ul li:hover>a,
    .menu-botones ul li a.open {
        background-color: var(--ColorMenuFondo3);
        scale: 1.07;
    }






    .menu-botones ul ul li {
        position: relative;
    }

    .menu-botones ul ul ul {
        display: none;
        position: absolute;
        top: 0;
        /* left: 100%;*/
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: var(--ColorMenuFondo);
    }

    .menu-botones ul ul ul li {
        width: 0px;
        margin: 0px;
    }

    .menu-botones ul ul li {
        width: 0px;
        margin: -1px;
    }

    .menu-botones ul li {
        width: 0px;
    }

    .menu-botones ul ul ul.open {
        display: block;
    }

    .menu-botones ul ul,
    .menu-botones ul ul ul {
        z-index: 1000;
    }




    .menu-botones ul ul li a {
        padding: 10px 10px;
        margin-left: 0px;
        background-color: var(--ColorMenuFondo2);
    }


    .menu-imagen {
        justify-self: start;
        grid-row-start: 1;

    }

    .menu-imagen.hidden {
        transform: translateX(-150%);
        opacity: 0;
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    }

    /* Cuando el menú hamburguesa está activo, el logo se sale de la pantalla */
    .hamburger-menu.active~.menu-imagen {
        transform: translateX(-150%);
        opacity: 0;
        grid-template-columns: 1fr auto;

    }

    .hamburger-menu {
        transition: transform 0.5s ease-in-out, margin 0.5s ease-in-out;
        /* Añade la transición para transformar y margin */
    }

    .hamburger-menu.move {
        grid-column-start: 1;
        grid-row-start: 1;
        grid-template-columns: 1fr auto;
        transform: translateX(40);
        margin: 40px;
        align-items: start;
        align-self: baseline;
        grid-template-columns: 125px minmax(200px, 800px);
        transform: translateX(14px) translateY(-10px) scale(1.8);
        /* Ajusta la posición y escala */

    }

    .hamburger-menu.active {
        align-items: start;

    }

    .menu-imagen img {

        margin-left: 10px;
    }


    .hamburger-menu {
        margin-left: 24px;
        /*20px*/
        display: flex;
        /*  justify-self: end;*/
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .menu-botones.active {

        display: flex;
        grid-row-start: 1;
    }

    .mobile-date {
        display: block;
    }



    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-16px) rotate(-45deg);
        /*translate -9px*/
    }
}







@media (min-width: 1025px) {
    .menu {
        display: grid;
        grid-template-columns: 125px minmax(200px, 1000px);
        align-items: center;
        position: relative;
        gap: 5px;
        margin: 0 auto;
        max-width: 1500px;
        /* justify-content: center;*/
        justify-content: space-between;
        z-index: 1500;
    }

    .menu-imagen img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .menu-imagen {
        display: grid;
        grid-column-start: 1;
    }

    .menu-botones {
        display: grid;
        /* display: none;*/
        flex-direction: column;
        width: 100%;
        grid-column-start: 2;
        inline-size: max-content;
        justify-content: start;
    }

    .menu-botones ul {
        height: max-content;
        list-style-type: none;
        display: flex;
        gap: 5px;
        margin-left: -20px;
    }

    .menu-botones ul li {
        position: relative;
    }

    .menu-botones ul li a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 5px 10px;
        transition: background-color, scale 0.6s cubic-bezier(0.4, -0.29, 0.42, 0.83);
        scale: 1;
        background-color: var(--ColorMenuFondo);
    }

    .menu-botones ul li:hover>a,
    .menu-botones ul li a.open {
        background-color: var(--ColorMenuFondo2);
        scale: 1.07;
    }



    .menu-botones ul ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 0;
        list-style-type: none;
    }


    .menu-botones ul ul li {
        width: 167px;
    }

    .menu-botones ul ul li a {
        padding: 10px 20px;
        margin-left: 20px;
    }

    /*ver aqui abajo
    .menu-botones ul ul ul {
        position: relative;
        direction: ltr;
    }
    */

    .menu-botones ul li:hover>ul {
        display: block;
    }

    .menu-botones ul ul ul li {
        width: 317px;
    }

    .menu-botones ul ul ul li a {
        padding: 10px;
        margin-left: 191px;
    }


    .menu-botones ul ul li:hover>ul {
        display: block;
        margin-top: -39px;
    }

    /*TODO ESTO ESTA AGREGADO ----->*/
    .arrow {
        margin-left: 5px;
        color: var(--FlechaMenu);
    }

    .menu-botones ul ul.open {
        display: block;
        animation: slideDown 0.4s ease-in-out;
    }

    .mobile-date {
        display: none;
    }


    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

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

    /*<----- TODO ESTO ESTA AGREGADO*/
    /* Estilo para el menú cuando está fijo */
    .menu.fixed {
        position: fixed;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1500;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        width: 100%;
        max-width: none;
    }

    .menu.fixed .menu-botones {
        justify-content: center;
    }

    /* Estilos para el ícono de hamburguesa */
    .hamburger-menu {
        display: none;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        cursor: pointer;
    }

    .hamburger-menu span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--ColorMenuHamburgesa);
        border-radius: 3px;
        transition: transform 0.3s ease;
    }

    /* Menú desplegable para móviles */
    .nav-menu {
        display: flex;
    }

    .menu-botones.active {
        display: flex;
    }


}