nav {
    column-gap: 1rem;
    padding-inline: 1rem;
    position: sticky;
    top:0;
    z-index: 99;
    height: 10vh;
}

nav .logo a, nav .container-login, nav .logo {
    color: white;
}

nav a {
    font-weight: bold;
    text-decoration: none;
}

nav .logo a:hover {
    color: white;
}

nav menu {
    position: absolute;
    left: -100vw;
    top: 10vh;
    height: calc(90vh);
    align-items: center;
    transition: left 500ms;
    background-color: rgba(255, 255, 255, 0.9);
}

.desplazar {
    transition: left 500ms;
    left: 0 !important;
}

menu .itemMenu {
    position:relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    color: black;
    border-bottom: 1px lightgray solid;
}
menu .itemMenu .element-principal{
    padding: 1rem;
}
menu .element:hover {
    color: black;
    background-color: lavender;
}

.menuSecundario{
    transition: visibility 1s, height 1s;
}
.itemMenu .menuSecundario{
    height: 0;
    width: 0;
    position: relative;
    bottom: 0;
    background-color: var(--atm-azul);
    z-index: 10;
    font-weight: bolder;
    color:white;
    overflow: hidden;
    transition: height 1s;
}
.visible:hover .menuSecundario{
    height: max-content;
    width: auto;
}
.itemSecundarios{
    padding: 1rem;
    border: 2px solid white;
}
.itemSecundarios:hover{
    color:var(--atm-amarillo);
    cursor:pointer;
}

nav .logo {
    display: flex;
    min-width: 6rem;
    align-items: center;
    height: 100%;
}

nav .container-login {
    padding: 5px;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    border: white solid 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}




@media (min-width: 768px) {

    menu .itemMenu .element-principal{
        padding: 0;
    }

    .itemMenu:hover .menuSecundario{
        position:absolute;
        top:9vh;
        width: max-content;
    }

    menu .itemMenu {
        display: flex;
        justify-content: center;
        height: 150%;
        color: white;
        position: relative;
        border-bottom: none;
    }
    menu .itemMenu:hover{
        background-color: transparent;
    }

    menu .itemMenu:hover .element-principal a:hover, .itemSecundarios a:hover {
        color: var(--atm-amarillo);
        background-color: transparent;
    }

    nav menu {
        display: flex;
        align-items: center;
        height: 6vh;
        column-gap: 1rem;
        margin: 0;
        padding-inline: 4rem;
        position: relative;
        top: 0;
        left: 0;
        background-color: transparent;
    }

    nav menu .itemMenu:hover .element-principal a::after {
        content: "";
        background: rgba(255, 241, 0, 1);
        border-radius: 2.5px;
        height: 5px;
        position: absolute;
        bottom: -12px;
        left: 0;
        animation: ensanchar 0.5s forwards;
    }

    @keyframes ensanchar {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

}
.escudo{
    width:37px;
    height: 37px;
    background-image: url("../../img/EscudoAntiguo.png");
    background-size: contain;
    background-repeat: no-repeat;
}
#tituloPagina{
    min-width: max-content;
    font-weight: bolder;
    color:yellow;
}
.icon-login{
    height: 100%;
    display: flex;
    align-items: center;
}
.text-xl{
    font-size: large;
}