/* Denisson Design System v4 — Naval + Mostarda */
:root{
  --papel:#ECEAE2; --papel-claro:#F4F2EB; --papel-sombra:#DEDBD0;
  --tinta:#141414; --tinta-suave:#3D5170; --tinta-discreta:#6B7687;
  --linha:#D8D2C2; --linha-forte:#B8B0A0;
  --naval:#14365A; --naval-escuro:#0D2440; --naval-fundo:#D4DAE3;
  --mostarda:#E0A634; --mostarda-escura:#B8841F; --mostarda-fundo:#F6E8C4;
  --sombra-cartao:0 2px 6px rgba(20,54,90,.06),0 1px 2px rgba(20,54,90,.04);
  --sombra-elevada:0 8px 24px -8px rgba(20,54,90,.22);
  --display:"Fraunces",Georgia,serif; --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  --mao:"Caveat","Bradley Hand",cursive; --assinatura:"Homemade Apple","Caveat",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body); color:var(--tinta); background:var(--papel);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh;
}
.wrap{max-width:640px; margin:0 auto; padding:24px 20px 56px; min-height:100dvh; display:flex; flex-direction:column}
.brand{font-family:var(--display); font-weight:600; letter-spacing:.04em; font-size:15px; color:var(--naval); text-transform:uppercase}
.brand span{color:var(--mostarda-escura)}
.eyebrow{font-family:var(--body); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600; color:var(--tinta-discreta)}
h1{font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(30px,7vw,44px); color:var(--naval)}
h2{font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.12; font-size:clamp(23px,5.5vw,30px); color:var(--tinta)}
.lead{font-size:18px; color:var(--tinta-suave); margin-top:14px}
.muted{color:var(--tinta-discreta)}
.em{font-family:var(--display); font-style:italic; color:var(--naval)}

/* progress */
.progress{height:6px; background:var(--papel-sombra); border-radius:99px; overflow:hidden; margin:18px 0 26px}
.progress>i{display:block; height:100%; background:var(--mostarda); width:0; transition:width .35s ease}

/* cards / steps */
.step{flex:1; display:flex; flex-direction:column; justify-content:center; animation:fade .35s ease}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.qhelp{color:var(--tinta-discreta); font-size:15px; margin-top:8px}
.qtitle{font-family:var(--display); font-weight:500; letter-spacing:-.01em; line-height:1.2; font-size:clamp(22px,5vw,28px); color:var(--tinta); margin-top:4px}

/* options */
.opts{display:flex; flex-direction:column; gap:12px; margin-top:24px}
.opt{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  background:var(--papel-claro); border:1px solid var(--linha); border-radius:14px;
  padding:16px 18px; font:inherit; color:var(--tinta); cursor:pointer;
  box-shadow:0 1px 2px rgba(20,54,90,.04); transition:border-color .15s, box-shadow .15s, background .15s;
}
.opt:hover{border-color:var(--linha-forte)}
.opt .mark{flex:0 0 22px; height:22px; margin-top:1px; border:2px solid var(--linha-forte); border-radius:50%; position:relative; transition:.15s}
.opt.multi .mark{border-radius:6px}
.opt.sel{border-color:var(--naval); background:#fff; box-shadow:var(--sombra-elevada)}
.opt.sel .mark{border-color:var(--naval); background:var(--naval)}
.opt.sel .mark::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;background:#fff;border-radius:50%}
.opt.multi.sel .mark::after{width:6px;height:11px;background:transparent;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);margin-top:2px;border-radius:0}
.opt .t{flex:1}

/* open / inputs */
/* inputs de texto = estilo caderno (underline, sem caixa) */
input[type=text],input[type=email]{
  width:100%; font:inherit; font-size:17px; color:var(--tinta); background:transparent;
  border:0; border-bottom:1px solid var(--linha-forte); border-radius:0; padding:12px 2px; margin-top:16px;
  outline:none; transition:border-color .18s;
}
input[type=text]:focus,input[type=email]:focus{border-bottom-color:var(--naval); box-shadow:none}
input::placeholder{color:var(--tinta-discreta)}
/* a pergunta aberta continua sendo caixa (precisa de área pra escrever) */
textarea{
  width:100%; font:inherit; color:var(--tinta); background:var(--papel-claro);
  border:1px solid var(--linha-forte); border-radius:13px; padding:15px 16px; margin-top:20px;
  outline:none; min-height:130px; resize:vertical; line-height:1.5; transition:border-color .15s, box-shadow .15s;
}
textarea:focus{border-color:var(--naval); box-shadow:0 0 0 3px rgba(20,54,90,.12)}

/* ── personalidade: greeting, fórmula mono (pegada IA), marginalia ── */
.greeting{font-family:var(--mao); font-size:30px; font-weight:500; color:var(--naval); line-height:1; display:inline-block; transform:rotate(-2deg) translateX(-3px); margin-bottom:10px}
.formula{display:inline-flex; flex-direction:column; gap:3px; margin-top:26px; padding:10px 14px; background:var(--papel-sombra); border-left:2px solid var(--mostarda); border-radius:0 4px 4px 0; font-family:var(--mono); font-size:13px; color:var(--tinta-suave); align-self:flex-start}
.formula .c{color:var(--tinta-discreta)}
.formula .e{color:var(--tinta); font-size:14px; letter-spacing:.01em}
.formula .e em{color:var(--naval); font-style:normal; font-weight:500}
.marginalia{display:inline-flex; align-items:center; gap:7px; font-family:var(--mao); font-size:21px; color:var(--naval); transform:rotate(-3deg); margin-top:18px}
.marginalia svg{flex-shrink:0}
.mono-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-discreta)}
.consent{display:flex; gap:11px; align-items:flex-start; margin-top:18px; font-size:14px; color:var(--tinta-suave)}
.consent input{margin-top:3px; width:18px; height:18px; accent-color:var(--naval); flex:0 0 auto}
.consent a{color:var(--naval)}

/* buttons */
.row{display:flex; gap:12px; align-items:center; margin-top:28px}
.btn{
  font:inherit; font-weight:600; border:0; border-radius:13px; padding:15px 26px; cursor:pointer;
  background:var(--naval); color:#fff; box-shadow:var(--sombra-elevada); transition:.15s; font-size:16px;
}
.btn:hover{background:var(--naval-escuro)}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn.ghost{background:transparent; color:var(--tinta-discreta); box-shadow:none; padding:15px 8px}
.btn.gold{background:var(--mostarda); color:var(--naval-escuro)}
.btn.gold:hover{background:var(--mostarda-escura); color:#fff}
.btn.block{width:100%; justify-content:center; text-align:center}
.back{background:none;border:0;color:var(--tinta-discreta);font:inherit;cursor:pointer;padding:8px 0;font-size:14px}

/* hero / start */
.hero .eyebrow{margin-bottom:14px}
.assina{font-family:var(--assinatura); color:var(--naval); font-size:22px; margin-top:26px; display:inline-block; transform:rotate(-3deg)}
.note{font-size:13px;color:var(--tinta-discreta);margin-top:18px}

/* result */
.result .badge{display:inline-block; background:var(--mostarda-fundo); color:var(--mostarda-escura); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:99px}
.result h1{margin-top:14px}
.block{margin-top:26px}
.block .lbl{font-family:var(--body); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:600; color:var(--tinta-discreta)}
.block p{margin-top:7px; font-size:17px; color:var(--tinta)}
.gargalo{background:var(--naval); color:var(--papel); border-radius:16px; padding:22px; margin-top:26px; box-shadow:var(--sombra-elevada)}
.gargalo .lbl{color:var(--mostarda)}
.gargalo p{color:#fff; font-size:18px}
.movimento{background:var(--papel-claro); border:1px solid var(--linha); border-radius:16px; padding:22px; margin-top:18px; box-shadow:var(--sombra-cartao)}
.movimento .lbl{color:var(--mostarda-escura)}
.bars{display:flex; gap:8px; margin-top:14px}
.bars .b{flex:1; text-align:center; font-size:12px; color:var(--tinta-discreta)}
.bars .b i{display:block; height:8px; border-radius:99px; background:var(--papel-sombra); margin-bottom:6px}
.bars .b.on i{background:var(--mostarda)}
.bars .b.on{color:var(--naval); font-weight:600}

.gate{background:var(--papel-claro); border:1px solid var(--linha); border-radius:16px; padding:22px; margin-top:30px; box-shadow:var(--sombra-cartao)}
.gate h2{font-size:22px}
.ok{text-align:center; padding:14px 0}
.ok .big{font-family:var(--display); font-size:48px; color:var(--mostarda)}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{margin-top:auto; padding-top:34px; font-size:12px; color:var(--tinta-discreta)}
.footer a{color:var(--tinta-discreta)}
.err{color:#8B1A1A; font-size:14px; margin-top:10px; min-height:18px}