/* ===========================================================
   VANGUARD — formulário de aplicação
   Preto, ciano, tipografia. Sem enfeite.
   =========================================================== */

:root{
  /* Identidade Vanguard: preto + ciano. Os neutros sao ciano dessaturado,
     nao cinza puro, para tudo ficar na mesma familia de cor. */
  --bg:#000;
  --text:#eafbfd;          /* branco levemente ciano */
  --muted:#7fa3a9;         /* apoio, ciano dessaturado */
  --line:#12262a;          /* linha padrao, ciano bem escuro */
  --line-2:#1d444c;        /* linha em destaque/hover */
  --cyan:#2ee6f6;          /* cor da marca */
  --cyan-dim:#0d5a64;      /* ciano escuro para trilhos */
  --cyan-wash:rgba(46,230,246,.08);
  --danger:#ff6b6b;
  --gutter:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(32px + env(safe-area-inset-top)) var(--gutter)
    calc(32px + env(safe-area-inset-bottom));
}

.shell{width:100%;max-width:520px}

.screen{display:none}
.screen.active{display:block;animation:in .35s ease}
@keyframes in{from{opacity:0}to{opacity:1}}

/* ---------- marca ---------- */
.wordmark{width:128px;height:auto;display:block;margin:0 0 40px}
.mark{width:26px;height:26px;object-fit:contain;display:block}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.topbar span{font-size:13px;color:var(--cyan);font-variant-numeric:tabular-nums}

/* ---------- tipografia ---------- */
h1{
  font-size:28px;line-height:1.25;letter-spacing:-.025em;
  font-weight:600;margin:0 0 14px;color:#fff;
}
h1 em{font-style:normal;color:var(--cyan)}
.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 28px}
.note{
  color:var(--muted);font-size:14.5px;margin:28px 0 0;
  padding:16px 18px;border-left:2px solid var(--cyan);background:var(--cyan-wash);
}

.perks{list-style:none;padding:0;margin:0 0 36px}
.perks li{
  font-size:15px;color:var(--muted);
  display:flex;align-items:center;gap:12px;
  padding:13px 0;border-top:1px solid var(--line);
}
.perks li:last-child{border-bottom:1px solid var(--line)}
.perks li::before{
  content:"";width:5px;height:5px;flex:0 0 5px;
  background:var(--cyan);border-radius:50%;
}

/* ---------- progresso ---------- */
.progress-track{height:2px;background:var(--cyan-dim);margin-bottom:40px}
.progress-bar{height:100%;width:0;background:var(--cyan);transition:width .35s ease}

/* ---------- pergunta ---------- */
.q-title{font-size:21px;font-weight:600;line-height:1.35;letter-spacing:-.02em;margin:0 0 8px}
.q-hint{font-size:14.5px;color:var(--muted);margin:0 0 24px}
.q-title + .q-body{margin-top:24px}
.q-body{display:grid;gap:8px}

.opt{
  display:flex;align-items:baseline;gap:14px;
  border:1px solid var(--line);border-radius:8px;
  padding:16px;cursor:pointer;min-height:54px;
  transition:border-color .15s, background .15s;
  -webkit-tap-highlight-color:transparent;
}
.opt .dot{
  flex:0 0 auto;font-size:12.5px;color:var(--cyan);opacity:.55;
  font-variant-numeric:tabular-nums;transition:color .15s;
}
.opt.selected{border-color:var(--cyan);background:var(--cyan-wash)}
.opt.selected .dot{color:var(--cyan);opacity:1}
.opt-text{font-size:15.5px;font-weight:400;line-height:1.45}
.opt-desc{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}

/* campos — 16px evita zoom automático no iOS */
input[type=text],input[type=tel],input[type=number],textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);
  background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:16px;outline:none;transition:border-color .15s;
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:120px;line-height:1.55;resize:vertical}
input::placeholder,textarea::placeholder{color:#4a6b70}
input:focus,textarea:focus{border-color:var(--cyan)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.error{color:var(--danger);font-size:14px;margin:16px 0 0}

/* ---------- botões ---------- */
.nav{display:grid;gap:8px;margin-top:32px}
.btn{
  font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;
  border-radius:8px;padding:16px 24px;min-height:54px;width:100%;
  border:1px solid transparent;
  transition:opacity .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn.primary{color:#000;background:var(--cyan)}
.btn.primary:active{opacity:.8}
.btn.primary:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{color:var(--muted);background:transparent;border-color:transparent}
.btn.ghost:active{color:var(--text)}
.btn.ghost[hidden]{display:none}

/* ---------- desktop ---------- */
@media (min-width:600px){
  :root{--gutter:24px}
  body{padding:56px var(--gutter)}
  .wordmark{width:148px}
  h1{font-size:34px}
  .q-title{font-size:24px}
  .opt:hover{border-color:var(--line-2)}
  .opt.selected:hover{border-color:var(--cyan)}
  .btn.primary:hover{opacity:.88}
  .btn.ghost:hover{color:var(--text)}
}

@media (max-height:700px){
  body{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}