/* ============================================================
   Minha Sorte - página-assistente de contato (wizard)
   Estilo simulador (Mycon) na identidade Minha Sorte
   ============================================================ */
:root {
  --lime:      #91FB17;
  --lime-2:    #8BF412;
  --lime-soft: #B4FF5C;
  --ink:       #08122E;
  --ink-soft:  #1C3160;
  --royal:     #0B2FA8;
  --royal-2:   #123DBC;
  --navy:      #040A1C;
  --navy-2:    #0A1B3D;
  --paper:     #FCFCF6;
  --fg:        #F2F6FF;
  --fg-muted:  #9FB2D8;
  --line:      rgba(159,176,216,.18);
  --card-brd:  rgba(255,255,255,.10);
  --coral:     #FF5A5F;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  font-family: var(--font-body); color: var(--fg); line-height: 1.6;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(18,61,188,.32), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(145,251,23,.08), transparent 55%),
    linear-gradient(180deg, var(--navy), var(--navy-2) 60%, var(--navy));
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--royal); color: var(--paper); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }

/* ---------- Header ---------- */
.wz-header {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: 16px clamp(16px,4vw,32px);
  background: rgba(4,10,28,.7); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.wz-brand { justify-self: center; display: inline-flex; }
.wz-brand img { height: 26px; width: auto; }
.wz-back {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; border: 1px solid var(--card-brd); background: rgba(255,255,255,.05); color: var(--fg);
  transition: background .2s;
}
.wz-back:hover { background: rgba(255,255,255,.1); }
.wz-back[hidden] { visibility: hidden; }
.wz-back svg { width: 22px; height: 22px; }

/* ---------- Progress ---------- */
.wz-progress { height: 4px; background: rgba(255,255,255,.08); }
.wz-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--lime-2), var(--lime)); transition: width .4s var(--ease); }

/* ---------- Main / step ---------- */
.wz-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(28px,6vw,64px) clamp(20px,5vw,40px); }
.wz-step { width: 100%; max-width: 600px; }
.wz-step.is-anim { animation: stepIn .4s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-step.is-anim { animation: none; } .wz-progress__fill { transition: none; } }

.wz-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.wz-q { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.wz-help { color: var(--fg-muted); font-size: 1.05rem; margin: 0 0 32px; max-width: 46ch; }

/* ---------- Input sublinhado ---------- */
.wz-field { position: relative; margin-bottom: 30px; }
.wz-input {
  width: 100%; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--fg);
  background: transparent; border: 0; border-bottom: 2px solid var(--line);
  padding: 8px 2px; transition: border-color .2s;
}
.wz-input::placeholder { color: var(--fg-muted); opacity: .55; font-weight: 500; }
.wz-input:focus { outline: none; border-bottom-color: var(--lime); }
.wz-input.is-invalid { border-bottom-color: var(--coral); }
.wz-error { color: var(--coral); font-size: .9rem; margin-top: 10px; min-height: 1.2em; }
/* prefixo tel */
.wz-tel { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--line); transition: border-color .2s; }
.wz-tel:focus-within { border-bottom-color: var(--lime); }
.wz-tel .wz-input { border: 0; }
.wz-tel__ddi { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem,3.4vw,2rem); color: var(--fg-muted); }

/* ---------- Opções (cards/chips) ---------- */
.wz-opts { display: grid; gap: 12px; margin-bottom: 8px; }
.wz-opts.is-2 { grid-template-columns: 1fr 1fr; }
.wz-opt {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--fg);
  padding: 18px 22px; min-height: 60px; border-radius: 16px;
  border: 1.5px solid var(--card-brd); background: rgba(255,255,255,.04);
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.wz-opts.is-2 .wz-opt { justify-content: center; font-size: 1.2rem; }
.wz-opt:hover, .wz-opt:focus-visible { border-color: var(--lime); background: rgba(145,251,23,.1); }
.wz-opt.is-selected { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.wz-opt:active { transform: scale(.98); }

/* ---------- CTA continuar ---------- */
.wz-actions { margin-top: 34px; }
.wz-continue {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.08rem;
  padding: 16px 32px; border-radius: 999px; border: 0;
  background: var(--lime); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(145,251,23,.4), 0 16px 40px -12px rgba(145,251,23,.5);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.wz-continue:hover { background: var(--lime-soft); transform: translateY(-2px); }
.wz-continue:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.wz-continue svg { width: 20px; height: 20px; }

/* ---------- Tela final ---------- */
.wz-done { text-align: center; }
.wz-done__badge { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); box-shadow: 0 20px 50px -18px rgba(145,251,23,.5); }
.wz-done__badge svg { width: 42px; height: 42px; }
.wz-done h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem,4.4vw,2.8rem); letter-spacing: -.02em; margin: 0 0 14px; }
.wz-done p { color: var(--fg-muted); font-size: 1.1rem; max-width: 44ch; margin: 0 auto 28px; }
.wz-done__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--lime); border-bottom: 2px solid transparent; }
.wz-done__link:hover { border-bottom-color: var(--lime); }

/* ---------- Passo counter ---------- */
.wz-count { font-size: .9rem; color: var(--fg-muted); margin-bottom: 18px; font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }

@media (max-width: 520px) {
  .wz-opts.is-2 { grid-template-columns: 1fr; }
}