/* ==========================================================================
   style.css
   Estilos do formulário centralizado (uma pergunta por vez, em um cartão
   no meio da tela). Diferente do "chat-funil" usado em outros sites:
   aqui não tem balões nem indicador de digitando — é um formulário comum,
   igual em PC e no celular.
     1. Variáveis de tema
     2. Reset básico
     3. Fundo + centralização
     4. Cabeçalho (logo + nome do escritório)
     5. Cartão da pergunta atual
     6. Campo de texto
     7. Botões de opção (múltipla escolha)
     8. Botão "Continuar"
     9. Tela de cálculo (transição)
     10. Botão final (CTA WhatsApp)
     11. Responsividade
   ========================================================================== */

/* ---------- 1. VARIÁVEIS DE TEMA ---------- */
:root {
  --cor-primaria-1: #c9962b;
  --cor-primaria-2: #e0b559;
  --cor-primaria-gradiente: linear-gradient(135deg, var(--cor-primaria-1), var(--cor-primaria-2));

  --cor-whatsapp: #22c55e;
  --cor-whatsapp-escuro: #16a34a;

  --cor-fundo: #f6f2ea;
  --cor-texto: #2b2420;
  --cor-texto-suave: #6b6157;
  --cor-borda: #e6ddcd;

  --fonte-base: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- 2. RESET BÁSICO ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--fonte-base);
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

/* ---------- 3. FUNDO + CENTRALIZAÇÃO ---------- */
#form-wrapper {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 16px 48px;
}

/* ---------- 4. CABEÇALHO ---------- */
.form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 28px;
  max-width: 480px;
}

.form-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-gradiente);
  box-shadow: 0 4px 16px rgba(201, 150, 43, 0.3);
}

.form-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.form-avatar-iniciais {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.3rem;
}

#form-titulo {
  font-size: 1.15rem;
  font-weight: 700;
}

#form-subtitulo {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* ---------- 5. CARTÃO DA PERGUNTA ATUAL ---------- */
#form-conteudo {
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
}

.form-card {
  width: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(43, 36, 32, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.form-card--visivel {
  opacity: 1;
  transform: translateY(0);
}

.form-texto {
  font-size: 1.05rem;
  line-height: 1.5;
}

.form-texto-sub {
  font-size: 0.88rem;
  color: var(--cor-texto-suave);
  margin-top: -8px;
}

/* ---------- 6. CAMPO DE TEXTO ---------- */
.form-input {
  width: 100%;
  border: 1.5px solid var(--cor-borda);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  color: var(--cor-texto);
  margin-top: 4px;
}

.form-input:focus {
  border-color: var(--cor-primaria-1);
}

/* ---------- 7. BOTÕES DE OPÇÃO (múltipla escolha) ---------- */
.grupo-opcoes-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.btn-opcao-form {
  width: 100%;
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 0.98rem;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-opcao-form:hover:not(:disabled) {
  border-color: var(--cor-primaria-1);
  background: #fdf8ee;
}

.btn-opcao-form:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- 8. BOTÃO "CONTINUAR" ---------- */
.btn-continuar {
  margin-top: 6px;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--cor-primaria-gradiente);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.btn-continuar:hover:not(:disabled) {
  opacity: 0.92;
}

.btn-continuar:active:not(:disabled) {
  transform: scale(0.99);
}

.btn-continuar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- 9. TELA DE CÁLCULO (transição entre perguntas com desvio) ---------- */
.form-calculando {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--cor-borda);
  border-top-color: var(--cor-primaria-1);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- 10. BOTÃO FINAL (CTA WhatsApp) ---------- */
.btn-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--cor-whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 4px;
  transition: background 0.15s ease;
  text-align: center;
}

.btn-cta-whatsapp:hover {
  background: var(--cor-whatsapp-escuro);
}

.btn-cta-whatsapp--secundario {
  background: #fff;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-borda);
}

.btn-cta-whatsapp--secundario:hover {
  background: #fdf8ee;
  border-color: var(--cor-primaria-1);
}

/* ---------- 11. RESPONSIVIDADE ---------- */
@media (max-width: 420px) {
  .form-card {
    padding: 26px 20px;
    border-radius: 14px;
  }

  #form-wrapper {
    padding: 24px 12px 36px;
  }
}

@media (min-width: 700px) {
  #form-wrapper {
    padding-top: 8vh;
  }
}