html,
body {
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #f8faff;
}


/* --- ESTILO BASE DO BOTÃO (ATRAÇÃO VISUAL) --- */
.button {
  position: relative;
  overflow: hidden;
  width: 330px; /* Levemente maior */
  height: 60px; /* Levemente maior */
  display: block; 
  margin: 0 auto;
  border-radius: 8px; /* Mais arredondado */
  border: 0;
  color: #ffff;
  background: #e08e0b; /* Amarelo Dourado Brilhante (Cor de Alerta/Novidade) */
  font-family: "Source Sans Pro", sans-serif;
  cursor: pointer;
  text-decoration: none; 
  cursor: pointer;
  
  /* Sombra de destaque forte: faz o botão saltar da tela */
  box-shadow: 0 8px 15px rgba(175, 160, 115, 0.5); 
  
  transition: all 0.3s ease;
  
  /* Animação sutil de pulsação para chamar a atenção */
  animation: pulse 2s infinite; 
}

.button-text,
.button-links {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  justify-content: center; 
  text-align: center;
}

/* --- ESTILOS DE TEXTO E HOVER --- */

.button-text {
  gap: 10px;
  justify-content: center;
  color: #ffff; /* Mantém o texto escuro */
  font-size: 20px; /* Maior e mais legível */
  font-weight: 800; /* Mais pesado para destaque */
  text-transform: uppercase;
}

.button-links a {
  opacity: 0;
  justify-content: center;
  padding: 0 28px;
  transition: 0.2s;
  font-size: 20px;
  font-weight: 800;
  color: #212121; /* Mantém o texto escuro no hover */
  text-transform: uppercase;
  text-decoration: none;
  color: inherit; 
}

.button:hover {
  border-radius: 10px; /* Suaviza a transição do hover */
  background: #E5A800; /* Escurece ligeiramente o fundo no hover */
  box-shadow: 0 4px 10px rgba(228, 178, 30, 0.7); /* Sombra mais contida no hover */
  animation: none; /* Para a pulsação no hover */
}

/* Garante que os ícones fiquem escuros no hover também */
.button-links i {
  color: #212121;
}

/* --- KEYFRAMES PARA A ANIMAÇÃO DE PULSAÇÃO --- */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 15px rgba(224, 183, 60, 0.5);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(201, 169, 75, 0.7); /* Pulsa a sombra */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 15px rgba(255, 193, 7, 0.5);
  }
}