/* Estilo Base */
body {
    font-family: 'Be Vietnam Pro', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #444;
  }
  
  main{
    margin: 25px;
  }

  h2, h3 {
    color: #444;
  }
  
  a {
    text-decoration: none;
    color: #007BFF;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* Estilo do Container Principal */
  .main-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  /* Estilo do Título */
  h2 {
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  /* Estilo dos Parágrafos */
  p {
    margin-bottom: 20px;
  }
  
  /* Estilo dos Links */
  a {
    color: #007BFF;
  }
  
  /* Estilo da Lista de Compromisso */
  .compromisso-container ul {
    padding-left: 20px;
  }
  
  /* Estilo do Rodapé */
  footer {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #777;
  }
  
  .footer-text {
    margin: 0;
  }
  
  .plp-link {
    color: #007BFF;
  }
  
  .plp-link:hover {
    text-decoration: underline;
  }
  

/* Estilo básico para o botão WhatsApp */
.whatsapp-btn {
  position: fixed;
  /* Define a posição fixa para que o botão permaneça fixo na tela enquanto rola a página */
  bottom: 20px;
  /* Define a distância em pixels do fundo da janela do navegador */
  right: 10px;
  /* Define a distância em pixels da margem direita da janela do navegador */
  z-index: 999;
  /* Define a ordem de empilhamento do botão sobre outros elementos */
  transition: transform 0.1s ease-in-out;
  /* Adiciona uma transição suave ao movimento do botão */
}

/* Estilo para a mensagem que aparecerá ao passar o mouse */
.whatsapp-btn span {
  visibility: hidden;
  /* Inicialmente, a mensagem está oculta */
  width: 120px;
  /* Define a largura da mensagem */
  background-color: #000;
  /* Define a cor de fundo da mensagem */
  color: #fff;
  /* Define a cor do texto da mensagem */
  text-align: center;
  /* Centraliza o texto da mensagem */
  border-radius: 6px;
  /* Adiciona cantos arredondados à caixa da mensagem */
  padding: 5px 0;
  /* Adiciona espaçamento interno à mensagem */
  position: absolute;
  /* Posiciona a mensagem de forma absoluta em relação ao elemento pai */
  z-index: 1;
  /* Define a ordem de empilhamento da mensagem sobre o botão */
  bottom: 30px;
  /* Define a distância em pixels do fundo da janela do navegador para a mensagem */
  right: 65px;
  /* Define a distância em pixels da margem direita da janela do navegador para a mensagem */
  opacity: 0;
  /* Define a opacidade inicial da mensagem como transparente */
  transition: opacity 0.3s;
  /* Adiciona uma transição suave para a opacidade da mensagem */
}

.whatsapp-btn:hover span {
  visibility: visible;
  /* Ao passar o mouse sobre o botão, a mensagem se torna visível */
  opacity: 1;
  /* A opacidade da mensagem muda para 1 (totalmente visível) */
}

/* Redimensionar a imagem para 80x80 pixels */
.whatsapp-btn img {
  width: 80px;
  /* Define a largura da imagem do botão */
  height: 80px;
  /* Define a altura da imagem do botão */
}


@media only screen and (max-width: 600px) {
  .whatsapp-btn {
    bottom: 10px; /* Ajusta a posição na parte inferior da tela para telas menores */
    right: 10px; /* Ajusta a posição na margem direita para telas menores */
  }

  .whatsapp-btn img {
    width: 60px; /* Reduz o tamanho da imagem para telas menores */
    height: 60px; /* Reduz o tamanho da imagem para telas menores */
  }
}
