header, footer{
    background-color: black; /* Um fundo escuro para o cabeçalho */
    width: 100%;
    display: block;
    text-align: center;
}

/* Mostra o header de desktop por padrão */
.header-desktop { display: block;}

/* Esconde o header de celular por padrão */
.header-mobile, #menuUser a.loginMobile {display: none;}

.header-desktop img {
    height: 5rem; /* Tamanho do logo no desktop */
    width: auto;
    margin: 0 auto; 
}

.linha {
    text-align: center; /* Centraliza o texto dentro das colunas */
    width: 100%;
    text-align: center;
    display: flex;
    margin: 2px 0px;
    padding: 0.4% 0%;
    border-bottom: 3px solid black;
}

.menu a, .espaco2 a{
    display: inline-block;
    width: 13%;
    font-weight: 500;
    letter-spacing: 3%;
    padding: 0.30% 1.8% ;
    background-color: #06061a;
    letter-spacing: 2px;
    border-bottom:2px solid #06061a;
    border-top:2px solid #06061a;
}

.espaco1{ width: 18%; } .espaco2 { width: 22%; }
.menu{width: 60%; }

.menu, .linha {
    background-color: #272727; /*COR DO BODY*/
}

.espaco2 a:hover, .espaco2 a.headUserAct1, .espaco2 a.headUserAct2, .mobile-auth a:hover{border-color:whitesmoke;}
.espaco2 a{
    min-width: 48%;
    padding: 0.50% 3%;
    
}

a.menuHomeOff:hover, a.menuHome, h2.chamadaHome {border-color: var(--hoForte);}
a.menuSearOff:hover, a.menuSear {border-color: var(--seForte);}
a.menuAtorOff:hover, a.menuAtor {border-color: var(--atForte);}
a.menuSiteOff:hover, a.menuSite {border-color: var(--siForte);}
a.menuTemaOff:hover, a.menuTema {border-color: var(--teForte);}
a.menuCenaOff:hover, a.menuCena {border-color: var(--ceForte);}
a.menuFilmOff:hover, a.menuFilm {border-color: var(--fiForte);}