/* AtlasForm · motor de formulário conversacional
   Uma pergunta por tela. Tokens da marca IOHÁ (brand-tokens.md).
   Nada aqui é específico de um formulário: só troque os tokens para outra marca. */

.af-root{
  /* Paleta IOHÁ */
  --af-bg:#F5EFE6;        /* ivory   */
  --af-surface:#FAF7F2;   /* warm-white */
  --af-sand:#E3D5C0;
  --af-camel:#C9A77C;
  --af-gold:#C2A24B;      /* acento fino, nunca base */
  --af-ink:#1A1410;       /* dark */
  --af-ink-soft:#5A3D28;  /* chocolate */
  --af-muted:#8a7d74;
  --af-error:#C8102E;

  --af-serif:"Cormorant Garamond",Georgia,serif;
  --af-sans:"Montserrat",system-ui,-apple-system,sans-serif;

  --af-radius:4px;
  --af-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  background:var(--af-bg);
  color:var(--af-ink);
  font-family:var(--af-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.af-root *,.af-root *::before,.af-root *::after{box-sizing:border-box}

/* ---------- Progresso ---------- */
.af-progress{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:var(--af-sand);z-index:20;
}
.af-progress__bar{
  height:100%;width:0;
  background:var(--af-gold);
  transition:width .45s var(--af-ease);
}

/* ---------- Cabeçalho ---------- */
.af-head{
  padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.af-logo{
  font-family:var(--af-serif);
  font-size:1.1rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--af-ink-soft);text-decoration:none;
}
.af-counter{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--af-muted);font-variant-numeric:tabular-nums;
}

/* ---------- Palco ---------- */
.af-stage{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:24px 24px 40px;
}
.af-step{
  width:100%;max-width:620px;
  animation:af-in .5s var(--af-ease) both;
}
.af-step[data-leaving="true"]{animation:af-out .28s var(--af-ease) both}

@keyframes af-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes af-out{from{opacity:1}to{opacity:0;transform:translateY(-14px)}}

@media (prefers-reduced-motion:reduce){
  .af-step,.af-step[data-leaving="true"]{animation:none}
  .af-progress__bar{transition:none}
}

/* ---------- Tipografia da pergunta ---------- */
.af-eyebrow{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--af-camel);margin-bottom:14px;
}
.af-title{
  font-family:var(--af-serif);
  font-weight:400;
  font-size:clamp(1.75rem,4.6vw,2.6rem);
  line-height:1.2;letter-spacing:.01em;
  margin:0 0 12px;
}
.af-title em{font-style:italic;color:var(--af-ink-soft)}
.af-help{
  color:var(--af-ink-soft);
  font-size:.95rem;
  margin:0 0 28px;max-width:46ch;
}

/* ---------- Campos ---------- */
.af-field{margin:0 0 8px}
.af-input{
  width:100%;
  font-family:var(--af-sans);
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  color:var(--af-ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--af-camel);
  border-radius:0;
  padding:12px 2px;
  outline:none;
  transition:border-color .25s var(--af-ease);
}
.af-input::placeholder{color:var(--af-muted);opacity:.65}
.af-input:focus-visible{border-bottom-color:var(--af-gold);border-bottom-width:2px}
.af-input[aria-invalid="true"]{border-bottom-color:var(--af-error)}

/* Escolhas */
.af-choices{display:grid;gap:10px;margin:0 0 8px}
.af-choice{
  display:flex;align-items:center;gap:14px;
  width:100%;text-align:left;
  font-family:var(--af-sans);font-size:1rem;color:var(--af-ink);
  background:var(--af-surface);
  border:1px solid var(--af-sand);border-radius:var(--af-radius);
  padding:15px 18px;cursor:pointer;
  transition:border-color .2s var(--af-ease),background .2s var(--af-ease);
}
.af-choice:hover{border-color:var(--af-camel)}
.af-choice:focus-visible{outline:2px solid var(--af-gold);outline-offset:2px}
.af-choice[aria-pressed="true"]{border-color:var(--af-gold);background:#fff}
.af-choice__key{
  flex:none;
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--af-camel);border-radius:3px;
  font-size:.72rem;color:var(--af-ink-soft);
}
.af-choice[aria-pressed="true"] .af-choice__key{
  background:var(--af-gold);border-color:var(--af-gold);color:#fff;
}

/* Consentimento */
.af-consent{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--af-surface);
  border:1px solid var(--af-sand);border-radius:var(--af-radius);
  padding:18px;margin:0 0 8px;
  font-size:.88rem;color:var(--af-ink-soft);line-height:1.55;
  cursor:pointer;
}
.af-consent input{
  flex:none;margin-top:3px;width:18px;height:18px;
  accent-color:var(--af-gold);cursor:pointer;
}

/* ---------- Rodapé de ação ---------- */
.af-actions{
  display:flex;align-items:center;gap:16px;
  margin-top:26px;flex-wrap:wrap;
}
.af-btn{
  font-family:var(--af-sans);
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--af-surface);background:var(--af-ink-soft);
  border:1px solid var(--af-ink-soft);border-radius:var(--af-radius);
  padding:14px 30px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:opacity .2s var(--af-ease);
}
.af-btn:hover{opacity:.86}
.af-btn:focus-visible{outline:2px solid var(--af-gold);outline-offset:3px}
.af-btn[disabled]{opacity:.5;cursor:progress}
.af-btn--ghost{background:transparent;color:var(--af-ink-soft)}
.af-hint{font-size:.74rem;color:var(--af-muted);letter-spacing:.04em}
.af-hint kbd{
  font-family:var(--af-sans);font-size:.7rem;
  border:1px solid var(--af-sand);border-radius:3px;
  padding:1px 5px;background:var(--af-surface);
}
@media (max-width:520px){.af-hint{display:none}}

/* ---------- Erro ---------- */
.af-error{
  color:var(--af-error);font-size:.82rem;
  min-height:1.3em;margin:8px 0 0;
}

/* ---------- Voltar ---------- */
.af-back{
  position:fixed;left:24px;bottom:24px;
  background:none;border:0;padding:8px;
  font-family:var(--af-sans);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--af-muted);cursor:pointer;
}
.af-back:hover{color:var(--af-ink-soft)}
.af-back[hidden]{display:none!important}

/* ---------- Honeypot ---------- */
.af-hp{
  position:absolute!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Tela final ---------- */
.af-end .af-title{margin-bottom:18px}
.af-rule{
  width:64px;height:1px;background:var(--af-gold);
  border:0;margin:0 0 24px;
}

.af-notice{margin:18px 0 0;font-size:.74rem;line-height:1.5;color:var(--af-muted)}