/* Código Kid Eusébio — Formulários online | Design mobile-first, amigável */
:root{
  --azul:#0066FF; --azul-esc:#0052D9; --roxo:#6D28D9; --roxo-esc:#4C1D95;
  --tinta:#0F172A; --corpo:#475569; --suave:#64748B;
  --borda:#E2E8F0; --bg:#F8FAFC; --branco:#FFFFFF;
  --ok:#10B981; --erro:#EF4444; --aviso:#F59E0B;
  --raio:14px; --sombra:0 6px 24px rgba(15,23,42,.08);
  color-scheme: light only;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:'DM Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--corpo); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px;margin:0 auto;padding:16px}

/* Cabeçalho temático */
.hero{
  background:linear-gradient(135deg,var(--roxo-esc),var(--azul));
  color:#fff;border-radius:var(--raio);padding:28px 22px;margin-bottom:18px;
  box-shadow:var(--sombra);position:relative;overflow:hidden;
}
.hero h1{margin:0 0 6px;font-size:1.55rem;font-weight:800;letter-spacing:-.02em}
.hero p{margin:0;opacity:.92;font-size:.98rem}
.hero .emoji{font-size:2rem;display:block;margin-bottom:6px}
.brand{display:block;max-height:60px;max-width:200px;margin:0 auto 16px;background:#0B0B0F;padding:10px 16px;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.2)}

/* Cartões de seção */
.card{
  background:var(--branco);border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px 18px;margin-bottom:16px;box-shadow:var(--sombra);
}
.card h2{
  margin:0 0 4px;font-size:1.05rem;color:var(--tinta);font-weight:800;
  display:flex;align-items:center;gap:9px;
}
.card .step{
  background:var(--azul);color:#fff;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex:none;
}
.card .hint{font-size:.86rem;color:var(--suave);margin:0 0 14px}

/* Campos */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
label{display:block;font-weight:600;color:var(--tinta);margin-bottom:6px;font-size:.93rem}
label .req{color:var(--erro)}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--borda);border-radius:10px;
  font-size:1rem;font-family:inherit;color:var(--tinta);background:#fff;transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,102,255,.12)}
.row{display:flex;gap:12px} .row .field{flex:1}
@media(max-width:480px){.row{flex-direction:column;gap:0}}

/* Opções (radio/checkbox em cartão clicável) */
.opts{display:grid;gap:10px}
.opts.grid2{grid-template-columns:1fr 1fr}
@media(max-width:480px){.opts.grid2{grid-template-columns:1fr}}
.opt{
  border:1.5px solid var(--borda);border-radius:10px;padding:13px 14px;cursor:pointer;
  display:flex;align-items:center;gap:11px;transition:.15s;background:#fff;
}
.opt:hover{border-color:var(--azul)}
.opt input{accent-color:var(--azul);width:19px;height:19px;flex:none}
.opt.sel{border-color:var(--azul);background:rgba(0,102,255,.05)}
.opt .t{font-weight:600;color:var(--tinta);font-size:.95rem}
.opt .d{font-size:.82rem;color:var(--suave)}

/* Assinatura */
.sigbox{border:2px dashed var(--azul);border-radius:12px;background:#fff;position:relative}
.sigbox canvas{width:100%;height:180px;display:block;touch-action:none;border-radius:12px}
.sigbox .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--suave);font-size:.9rem;pointer-events:none}
.sig-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.btn-clear{background:none;border:none;color:var(--azul);font-weight:600;cursor:pointer;font-size:.9rem}

/* Aceite */
.accept{display:flex;gap:11px;align-items:flex-start;background:var(--bg);border-radius:10px;padding:14px}
.accept input{margin-top:3px;width:19px;height:19px;accent-color:var(--ok);flex:none}
.accept label{font-weight:500;font-size:.88rem;color:var(--corpo);margin:0}

/* Botão enviar */
.submit{
  width:100%;padding:16px;background:var(--azul);color:#fff;border:none;border-radius:12px;
  font-size:1.08rem;font-weight:700;cursor:pointer;box-shadow:var(--sombra);transition:.15s;
}
.submit:hover{background:var(--azul-esc)} .submit:disabled{opacity:.55;cursor:not-allowed}

/* Mensagens */
.msg{padding:13px 15px;border-radius:10px;font-size:.9rem;margin-bottom:14px;display:none}
.msg.err{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA;display:block}
.foot{text-align:center;color:var(--suave);font-size:.8rem;padding:18px 0}
.lock{font-size:.8rem;color:var(--suave);text-align:center;margin-top:10px}

/* Tela de sucesso */
.done{display:none;text-align:center;padding:40px 20px}
.done.show{display:block}
.done .ico{font-size:3.5rem} .done h2{color:var(--tinta);margin:10px 0}
.done p{color:var(--corpo)}
.spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:r .7s linear infinite;vertical-align:-3px;margin-right:8px}
@keyframes r{to{transform:rotate(360deg)}}