/* Base do botão */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 15px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  border: none;
  /* Remover outline padrão para aplicar foco customizado */
  outline: none;
}

/* Botão Banner */
.button-banner {
  width: 180px;
  font-style: normal;
  height: 40px;
  background-color: #6478FF;
  color: white;
  border-radius: 30px;
}

.button-banner:hover,
.button-banner:focus {
  opacity: 0.8;
}

/* Botão List */
.button-list {
  background-color: #6478FF;
  font-style: normal;
  width: 400px;
  height: 40px;
  border-radius: 30px;
  color: white;
  font-weight: 700;
}

.button-list:hover,
.button-list:focus {
  opacity: 0.8;
}

/* Botão Content */
.button-content {
  width: 198px;
  height: 41px;
  border-radius: 5px;
  background-color: #00A8E1;
  color: white;
  line-height: 30px;
}

.button-content a {
  font-family: "Nunito Sans", sans-serif !important;
}

.button-content:hover,
.button-content:focus {
  opacity: 0.8;
}

/* Botão About */
.button-about {
  background-color: #6478FF;
  font-style: normal;
  width: 400px;
  height: 40px;
  border-radius: 30px;
  color: white;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 15px;
  font-family: Poppins, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.button-about:hover,
.button-about:focus {
  opacity: 0.8;
}

/* Foco acessível para todos os botões */
.button:focus-visible {
  outline: 2px dashed #FFD700; /* Contorno dourado para destaque */
  outline-offset: 4px;
}

/* Responsividade */
@media screen and (max-width: 768px) {
  .button-banner {
    height: 35px;
  }

  .button-list {
    width: 320px;
  }

  .button-content {
    width: 100px;
    height: 30px;
    font-size: 12px;
    line-height: 12px;
  }
}

@media screen and (max-width: 500px) {
  .button-about {
    width: 180px;
    height: 40px;
    border-radius: 30px;
    background: #6478FF;
    color: #FFF;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
}