/* APLICAÇÃO — multi-step, dark sólido, inputs refinados */

/* ============================================================
   PALETA LOCAL — sólidos derivados do iron
   ============================================================ */
.app-body,
.app-page,
.progress{
  --surface:        #2C2A26; /* iron — input/opt bg */
  --surface-2:      #38352F; /* hover lift */
  --surface-border: #3A3833; /* borda padrão */
  --surface-border-hi: #4A4842; /* borda hover */
  --surface-tint:   #2A1F1D; /* opt selected (iron + crimson sutil) */
  --text-mute:      #8C8780; /* texto secundário sólido */
  --text-mute-2:    #B7B2A9; /* texto bone-ish */
  --err-fg:         #ff8a86;
}

/* ============================================================
   ESCOPO ESCURO
   ============================================================ */
.app-body{
  background:var(--obsidian);
  color:var(--linen);
  min-height:100vh;
}

.app-body .skip{
  background:var(--crimson);
  color:var(--linen);
}

/* ============================================================
   BARRA DE PROGRESSO (inline, acima da pergunta)
   ============================================================ */
.progress{
  display:block;
  margin-bottom:var(--s-5);
  background:transparent;
}
.progress__bar{
  position:relative;
  height:6px;
  background:var(--iron);
  border-radius:999px;
  overflow:hidden;
}
.progress__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:var(--crimson);
  box-shadow:0 0 12px rgba(122,22,18,0.65);
  border-radius:999px;
  transition:width 360ms var(--ease);
}
.progress__meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 0 10px;
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--text-mute-2);
}
.progress__bloco{
  font-weight:var(--w-medium);
  color:var(--linen);
  transition:color var(--dur) var(--ease);
}

@media (max-width:640px){
  .progress{margin-bottom:var(--s-4)}
  .progress__meta{font-size:11px;padding-bottom:8px}
  .progress__bar{height:5px}
}

/* ============================================================
   PÁGINA + CONTAINER
   ============================================================ */
.app-page{
  background:var(--obsidian);
  color:var(--linen);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-block:var(--s-6) var(--s-6);
}
.app-page__container{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding-inline:clamp(20px,4vw,40px);
}
@media (max-width:640px){
  .app-page{padding-block:var(--s-4) var(--s-5)}
}

/* ============================================================
   STEP — uma pergunta por tela
   ============================================================ */
.step{
  display:none;
  flex-direction:column;
  gap:var(--s-3);
  animation:stepIn 420ms var(--ease) both;
}
.step.is-active{display:flex}

@keyframes stepIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

.step.is-leaving{
  animation:stepOut 200ms var(--ease) both;
}
@keyframes stepOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-8px)}
}

@media (prefers-reduced-motion: reduce){
  .step,.step.is-leaving{animation:none}
  .progress__fill{transition:none}
}

/* Step kicker */
.step__kicker{display:none}
.step__num{
  color:var(--crimson);
  font-weight:var(--w-bold);
  font-variant-numeric:tabular-nums;
  position:relative;
  padding-right:14px;
}
.step__num::after{
  content:"";
  position:absolute;
  right:0;top:50%;
  width:1px;height:10px;
  background:var(--surface-border);
  transform:translateY(-50%);
}
.step__bloco{
  font-weight:var(--w-medium);
  color:var(--text-mute-2);
}

/* Intro */
.step--intro{
  text-align:left;
  gap:var(--s-3);
  padding-block:var(--s-4);
}
.step--intro .eyebrow{
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--crimson);
  font-weight:var(--w-medium);
}
.step--intro h1{
  font-family:var(--font-ed);
  font-weight:var(--w-semibold);
  font-size:clamp(40px,7vw,72px);
  line-height:0.98;
  letter-spacing:-0.02em;
  color:var(--linen);
  margin:0;
}
.step--intro .lede{
  font-family:var(--font-ed);
  font-size:var(--t-ed-lg);
  line-height:var(--lh-ed);
  color:var(--text-mute-2);
  max-width:520px;
  margin-top:var(--s-2);
}

/* ============================================================
   QUESTÃO (.q)
   ============================================================ */
.app-page .q{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin:0;
}
.app-page .q__label{
  font-family:var(--font-ed);
  font-weight:var(--w-semibold);
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--linen);
  margin:0;
  text-transform:none;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}
.app-page .q__hint{
  display:block;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:var(--w-regular);
  letter-spacing:var(--tr-cap);
  text-transform:none;
  color:var(--text-mute);
  margin-top:6px;
}
.app-page .q .err{
  display:none;
  font-family:var(--font-ui);
  color:var(--err-fg);
  font-size:13px;
  letter-spacing:var(--tr-cap);
  margin-top:var(--s-1);
  padding-left:14px;
  border-left:2px solid var(--crimson);
}
.app-page .q[data-invalid="true"] .err,
.app-page .field[data-invalid="true"] .err{display:block}

/* ============================================================
   INPUTS — sólidos
   ============================================================ */
.app-page .field{
  margin-bottom:0;
  gap:var(--s-2);
}
.app-page .field>label,
.app-page .field>.label{
  color:var(--text-mute);
  font-size:12px;
}
.app-page .field input[type="text"],
.app-page .field input[type="tel"],
.app-page .field input[type="number"],
.app-page .field input[type="email"],
.app-page .field textarea{
  background:var(--surface);
  color:var(--linen);
  border:1px solid var(--surface-border);
  border-radius:6px;
  padding:18px 20px;
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:var(--w-regular);
  line-height:1.4;
  width:100%;
  appearance:none;
  transition:border-color 200ms var(--ease),background 200ms var(--ease),box-shadow 200ms var(--ease);
}
.app-page .field textarea{
  min-height:104px;
  resize:vertical;
  line-height:1.5;
}
.app-page .field input::placeholder,
.app-page .field textarea::placeholder{
  color:#6B6862;
  font-weight:var(--w-regular);
}
.app-page .field input:hover,
.app-page .field textarea:hover{
  border-color:var(--surface-border-hi);
  background:var(--surface-2);
}
.app-page .field input:focus,
.app-page .field textarea:focus{
  border-color:var(--crimson);
  background:var(--surface);
  outline:none;
  box-shadow:0 0 0 3px rgba(122,22,18,0.28);
}
.app-page .field input[aria-invalid="true"],
.app-page .field textarea[aria-invalid="true"]{
  border-color:var(--crimson);
  background:var(--surface-tint);
}

/* ============================================================
   OPÇÕES — pílulas sólidas
   ============================================================ */
.app-page .options{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:var(--s-2);
}
.app-page .opt{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  cursor:pointer;
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:var(--w-medium);
  color:var(--linen);
  line-height:1.3;
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:6px;
  transition:border-color 180ms var(--ease),background 180ms var(--ease),transform 120ms var(--ease);
  user-select:none;
}
.app-page .opt:hover{
  border-color:var(--surface-border-hi);
  background:var(--surface-2);
}
.app-page .opt:active{transform:scale(0.995)}

/* Indicator custom */
.app-page .opt input[type="radio"],
.app-page .opt input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  flex-shrink:0;
  width:22px;
  height:22px;
  margin:0;
  border:1.5px solid #5C5852;
  background:transparent;
  cursor:pointer;
  position:relative;
  transition:border-color 180ms var(--ease),background 180ms var(--ease);
}
.app-page .opt input[type="radio"]{border-radius:50%}
.app-page .opt input[type="checkbox"]{border-radius:4px}

.app-page .opt input[type="radio"]:checked{
  border-color:var(--crimson);
  background:transparent;
}
.app-page .opt input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--crimson);
  box-shadow:0 0 8px rgba(122,22,18,0.7);
}
.app-page .opt input[type="checkbox"]:checked{
  background:var(--crimson);
  border-color:var(--crimson);
}
.app-page .opt input[type="checkbox"]:checked::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23F5F5F2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 11.5 9 16 18 6.5'/></svg>");
  background-size:16px 16px;
  background-position:center;
  background-repeat:no-repeat;
}
.app-page .opt input:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:3px;
}

/* Selected pílula — sólido com tint crimson */
.app-page .opt:has(input:checked){
  border-color:var(--crimson);
  background:var(--surface-tint);
  box-shadow:inset 3px 0 0 0 var(--crimson),0 4px 16px -8px rgba(122,22,18,0.5);
}
.app-page .opt:has(input:checked)::after{
  content:"";
  position:absolute;
  right:18px;top:50%;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--crimson);
  transform:translateY(-50%);
  box-shadow:0 0 10px var(--crimson);
}

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.step-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-2);
  margin-top:var(--s-5);
  padding-top:var(--s-4);
  border-top:1px solid var(--surface-border);
}
.step-nav .btn{
  font-size:14px;
  padding:16px 28px;
  min-height:52px;
  gap:10px;
  letter-spacing:0.08em;
}
.btn-ghost{
  background:transparent;
  color:var(--text-mute-2);
  border:1px solid var(--surface-border);
}
.btn-ghost:hover{
  color:var(--linen);
  border-color:var(--surface-border-hi);
  background:var(--surface);
  opacity:1;
}
.app-page .btn-primary{
  background:var(--crimson);
  color:var(--linen);
  border-color:var(--crimson);
  box-shadow:0 8px 24px -10px rgba(122,22,18,0.7);
}
.app-page .btn-primary:hover{
  opacity:1;
  background:#8c1916;
  box-shadow:0 10px 28px -8px rgba(122,22,18,0.8);
}
.btn__arrow{
  font-family:var(--font-ui);
  font-weight:var(--w-regular);
  font-size:18px;
  line-height:1;
  display:inline-block;
  transition:transform 200ms var(--ease);
}
.btn-primary:hover .btn__arrow{transform:translateX(3px)}
.btn-ghost:hover .btn__arrow{transform:translateX(-3px)}

.step-nav #btn-prev[hidden]+#btn-next,
.step-nav #btn-prev[hidden]~#submit-btn{margin-left:auto}

.form-error{
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--err-fg);
  text-align:center;
  margin:var(--s-3) 0 0 0;
  padding:12px 16px;
  background:var(--surface-tint);
  border:1px solid var(--crimson);
  border-radius:4px;
}
.form-error[hidden]{display:none}

/* ============================================================
   HONEYPOT
   ============================================================ */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ============================================================
   OBRIGADO
   ============================================================ */
.obrigado{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--linen);
  padding:var(--s-5);
  text-align:center;
}
.obrigado__inner{
  max-width:640px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-4);
}
.obrigado h1{
  font-size:var(--t-h4);
  font-weight:var(--w-bold);
  color:var(--iron);
  line-height:var(--lh-snug);
}
.obrigado__sub{
  font-family:var(--font-ed);
  font-size:var(--t-ed);
  font-style:italic;
  color:var(--graphite);
  line-height:var(--lh-ed);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:640px){
  .app-page .q__label{font-size:22px}
  .app-page .opt{font-size:16px;padding:16px 18px;gap:14px}
  .app-page .opt input[type="radio"],
  .app-page .opt input[type="checkbox"]{width:20px;height:20px}
  .app-page .field input[type="text"],
  .app-page .field input[type="tel"],
  .app-page .field input[type="number"],
  .app-page .field input[type="email"],
  .app-page .field textarea{font-size:16px;padding:16px 18px}
  .step-nav{flex-direction:row;gap:10px}
  .step-nav .btn{padding:14px 20px;font-size:13px;flex:1;min-width:0}
}

/* ---------- Entry-level Android, iPhone SE ---------- */
@media (max-width:480px){
  .app-page__container{padding-inline:16px}
  .app-page .q__label{font-size:19px;line-height:1.3}
  .app-page .opt{padding:14px 16px;font-size:15px;gap:12px}
  .app-page .opt input[type="radio"],
  .app-page .opt input[type="checkbox"]{width:18px;height:18px}
  .step-nav{gap:8px}
  .step-nav .btn{padding:13px 14px;font-size:13px;min-height:48px}
}

/* ---------- Landscape em celular ---------- */
@media (orientation:landscape) and (max-height:500px){
  .app-page{padding-block:var(--s-4)}
  .step-nav{padding-block:12px}
  .step{gap:var(--s-2)}
  .app-page .q__label{font-size:20px}
}