.balao-container {
    position: relative; /* Permite o posicionamento absoluto do balão */
    display: inline-block; /* Para que o balão seja exibido corretamente */
  }

  .balao-flutuante {
    display: none; /* Oculto por padrão */
    position: relative;
    bottom: 100%; /* Posiciona o balão acima do texto */
    left: 50%;
    width: 600px;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 40px;
    border-radius: 5px;
    z-index: 10; /* Garante que fique sobre outros elementos */
  }

  .balao-container:hover .balao-flutuante {
    display: block; /* Torna visível ao passar o mouse */
  }