/* Estilos para a página "Em Construção" */
:root {
  --background-color: #f0f2f5;
  --primary-text-color: #1c1e21;
  --secondary-text-color: #606770;
  --accent-color: #ffc107; /* Amarelo construção */
  --container-bg: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.1);
}

/*
  Aplica o flexbox ao <main> para centralizar o conteúdo,
  permitindo que o body use o estilo de "sticky footer" do navbar.css.
*/
main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1; /* Essencial para ocupar o espaço e empurrar o rodapé para baixo */
  padding: 1rem;
  background-color: var(--background-color);
  text-align: center;
}

.em-construcao-container {
  max-width: 550px;
  padding: 3rem 2rem;
  background-color: var(--container-bg);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow-color);
}

.icon {
  font-size: 4.5rem;
  line-height: 1;
  margin-bottom: 1.5rem;
  animation: bounce 2s infinite ease-in-out;
}

/* Aplicando o estilo apenas ao h1 dentro do container para evitar conflitos */
.em-construcao-container h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--primary-text-color);
  margin: 0 0 0.75rem;
}

/* Aplicando o estilo apenas ao p dentro do container para evitar conflitos */
.em-construcao-container p {
  font-size: 1.1rem;
  color: var(--secondary-text-color);
  line-height: 1.6;
  margin: 0;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}