/* Menu */
.menu {
    background-color: #11273D;/*#1A202C;*/
    color: #FFFFFF;
    height: 10vh;
    position: relative;
    z-index: 1;
}

.menu__container {
 display: flex;
 justify-content: space-between; /* Coloca horizontalmente los elementos en las esquinas */
 align-items: center; /* Centrado verticalmente */
 width: 90%;
 margin: 0 auto;  /* Centrar el 90% gracias al display: flex */
 height: 100%;
}

.menu__links {
    height: 100%;
    transition: transform .5s; /* Animacion */
    display: flex; /* Colocar los elementos uno al lado del otro */
}

.menu__item {
    list-style: none;
    position: relative; /* Colocar los hijos de forma absoluta a ellos */
    height: 100%;
    --clip: polygon(0 0, 100% 0, 100% 0, 0 0); /* Esconder los elementos */
    --transform: rotate(90deg); /* Rotación de la flecha */
}

.menu__item:hover {
    --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Mostrar los elementos */
    --transform: rotate(180deg); /* Rotación de la flecha */
}

.menu__link { /* Colocación de los elementos padres */
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 30px;
    display: flex;
    height: 100%;
    align-items: center;
}

.menu__link:hover {
    background-color: #23507D;/*#5E7094;*/
}

.menu__arrow {
    transform: var(--transform); /* Animación de la flecha */
    transition: transform .3s; /* Tiempo de animación */
    display: block;
    margin-left: 3px;
}

.menu__nesting {
    list-style: none;
    clip-path: var(--clip); /* Animación del desplegable */
    transition: clip-path .3s; /* Tiempo de animación */
    position: absolute; /* Posicionamos absolutamente al padre */
    right: 0; /* Lo situamos a la derecha */
    bottom: 0; /* Lo situamos hacia abajo */
    width: max-content;
    transform: translateY(100%); /* Lo posicionamos en la parte inferior */
    background-color: #000000;
}

.menu__link--inside {
    padding: 30px 100px 30px 20px;
}

.menu__link--inside:hover {
    background-color: #3579BD;/*#798499;*/
}

.menu__hamburguer {
    height: 100%;
    align-items: center; /* Centrado vertical */
    padding: 0 15px;
    cursor: pointer;
    display: none;
}

.menu__img {
    display: block;
    width: 36px;
}


@media (max-width: 800px) {
    .menu__hamburguer{
        display: flex;
    }

    .menu__item {
        --clip: 0; /* Eliminamos la opción de hacer clip */
        overflow: hidden;
    }

    .menu__item--active {
        --transform: rotate(0);
        --background: #23507D/*#5E7094;*/
    }

    .menu__item--show {
        background-color: var(--background);
    }

    .menu__links {
        position: fixed; /* Para que salga del flujo */
        max-width: 400px;
        width: 100%; /* Solo se aplica si el ancho es menos a 400px */
        top: 10vh;
        bottom: 0;
        right: 0; /* Lo colocamos a la derecha */
        background-color: #000000;
        overflow-y: auto;
        display: grid;
        grid-auto-rows: max-content; /* Colocamos en una columna */
        transform: translateX(100%);
    }

    .menu__links--show {
        transform: unset;
        width: 100%;
    }

    .menu__link {
        padding: 25px 0;
        padding-left: 30px;
        height: auto;
    }

    .menu__arrow {
        margin-left: auto; /* Lo colocamos a la derecha*/
        margin-right: 20px; /* Lo separamos del borde */
    }

    .menu__nesting {
        display: grid;
        position: unset; /* Regresamos a la posición original */
        width: 100%;
        transform: translateY(0); /* Regresamos al valor original */
        height: 0;
        transition: height .3s;
    }

    .menu__link--inside {
        width: 90%;
        margin-left: auto;
        border-left: 1px solid #3579BD;/*#798499;*/
    }
}