/* Estilo para esconder o cabeçalho quando o usuário rola para baixo. */
.header-hidden {
    transform: translateY(-100%); /* Move o cabeçalho para cima, fora da tela. */
    box-shadow: none; /* Remove a sombra quando escondido. */
}
/* Estilos para a seta (triângulo) dos menus pop-up (mobile e flutuante). */
#mobile-menu::before, #floating-mobile-menu::before { /* Aplicado a ambos os popups. */
    content: ''; /* Conteúdo vazio para criar o triângulo. */
    position: absolute; /* Posiciona absolutamente. */
    bottom: 100%; /* Acima do elemento pai. */
    right: 1.25rem; /* Alinhado à direita. */
    border-width: 8px; /* Largura da borda do triângulo. */
    border-style: solid; /* Estilo da borda. */
    border-color: transparent transparent white transparent; /* Cria um triângulo apontando para baixo. */
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05)); /* Adiciona uma sombra sutil. */
}

/* Estilos para a seta (triângulo) do dropdown de idioma flutuante. */
#floating-controls .lang-dropdown::before {
    content: ''; /* Conteúdo vazio para criar o triângulo. */
    position: absolute; /* Posiciona absolutamente. */
    bottom: 100%; /* Acima do elemento pai. */
    right: 0.625rem; /* Ajusta a posição horizontal. */
    border-width: 8px; /* Largura da borda do triângulo. */
    border-style: solid; /* Estilo da borda. */
    border-color: transparent transparent white transparent; /* Cria um triângulo apontando para baixo. */
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05)); /* Adiciona uma sombra sutil. */
}

/* --- CORREÇÃO PARA O MENU FLUTUANTE EM DISPOSITIVOS MOBILE --- */
/* Ajusta a posição do controle flutuante. */
#floating-controls {
    top: 1rem; /* Distância do topo. */
    right: 1.5rem; /* Distância da direita. */
}
/* Ajusta a posição do menu pop-up flutuante para que apareça abaixo do botão. */
#floating-mobile-menu {
    top: calc(1rem + 52px); /* 1rem (top do botão) + ~52px (altura do botão + margem). */
    right: 1.5rem; /* Alinhado à direita. */
}