header{
    position: relative;
    height: 150px;
    background: var(--azul);
}
header .topo{
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    justify-content: space-between;
    height: 150px;
}
header .topo .logo{
    width: 300px;
}
header .topo .logo a{
    display: block;
}
header .topo nav{

}
header .topo .menu-mobile{
    display: none;
}

header nav{
    z-index: 9999;
}
header nav ul{
    display: flex;
    flex-flow: nowrap;
}
header nav ul li{
    position: relative;
    white-space: nowrap;
}
header nav ul li a{
    display: block;
    padding: 0.5em 1em 0.5em 1em;
    color: #B9C0D4;
    background: var(--azul);
}
header nav ul li a:hover{
    color: #fff;
    text-decoration: none;
}
header nav ul li a.ultima{
    margin-left: 1em;
    border: 1px solid #B9C0D4;
    border-radius: 8px;
}

@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    header .topo .menu-mobile{
        display: flex;
    }
    header .menu-mobile a{
        display: block;
        padding: 0.6em;
        color: var(--azul_contraste);
        background: var(--azul);
        border-radius: 5px;
        line-height: 0;
    }
    header .menu-mobile a:hover,
    header .menu-mobile a.ativo{
        background: var(--azul_hover);
    }
    header .menu-mobile img{
        width: 30px;
        height: 30px;
    }
    header .topo nav{
        display: none;
        position: absolute;
        width: auto;
        right: 1em;
        top: 50%;
        transform: translateY(calc(15px + 0.6em)); /* Metade da altura da imagem do menu hamburguer + padding-bottom */
        padding: 0.3em;
        background: #5d608b;
        border-radius: 5px;
        z-index: 9999;
    }
    header .topo  nav ul{
        display: block;
    }
    header .topo nav ul li a{
        margin-bottom: 0.3em;
        color: white;
        background: var(--azul);
        border-radius: 5px;
    }
    header .topo nav ul li a:hover{
        background: var(--azul_hover);
    }
    header .topo nav ul li a.ultima{
        margin: 0;
        border: none;
    }

}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    header .topo .logo{
        width: 280px;
    }
}

header .topo .logo,
header .topo .menu-mobile{
    position: relative;
    z-index: 1;
}