/* ════════════════════════════════════════════════════════════════════════
🧾 form.css — Formulário Caracol
Responsivo, claro, elegante e focado em conversão e acessibilidade
═══════════════════════════════════════════════════════════════════════ */

.formulario-container {
  background-color: #0e0e0e;
  color: #eee;
  padding: 3rem 1.5rem;
  max-width: 800px;
  margin: 0 auto;
  border-top: 3px solid #5f27cd;
  border-bottom: 3px solid #10ac84;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(95, 39, 205, 0.2);
  text-align: center;
}

.formulario-container h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #5f27cd;
}

.formulario-container .legenda {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #ccc;
}

/* 🧱 Grade de campos */
.form-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  text-align: left;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  font-size: 0.95rem;
  color: #ddd;
}

.form-grid input,
.form-grid select {
  margin-top: 0.5rem;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1px solid #444;
  background-color: #1c1c1c;
  color: #fff;
  font-size: 1rem;
  transition: border 0.2s ease;
}

.form-grid input:focus,
.form-grid select:focus {
  outline: none;
  border-color: #10ac84;
}

/* ⚠️ Validação com erro */
.erro {
  border: 2px solid #ff4d4d !important;
  background-color: #2a0000;
  color: #fff;
}

/* 📤 Botão de envio */
#btn-enviar {
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  background-color: #10ac84;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

#btn-enviar:hover {
  background-color: #1dd1a1;
}

/* 📥 Botão de download liberado */
.botao-download {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  background-color: #5f27cd;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}

.botao-download:hover {
  background-color: #8e44ad;
}

/* 🙈 Container oculto */
.oculto {
  display: none;
}

/* ♿ Responsividade para mobile */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .formulario-container {
    padding: 2rem 1rem;
  }
}