:root{
  --roxo:#f5365c;--roxo-escuro:#d61f45;--fundo:#fff6f7;--texto:#1f1830;
  --cinza:#6b6580;--card:#fff;--borda:#f6dde3;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--fundo);color:var(--texto);min-height:100vh}
a{text-decoration:none;color:inherit}

/* topo */
.wz-top{display:flex;align-items:center;gap:18px;padding:18px 6vw}
.wz-back{font-size:1.4rem;color:var(--cinza);width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.wz-back:hover{background:#ece7f7}
.wz-progress{flex:1;height:8px;background:#f6dde3;border-radius:999px;overflow:hidden}
.wz-progress span{display:block;height:100%;background:var(--roxo);border-radius:999px}

/* conteúdo */
.wz{max-width:980px;margin:0 auto;padding:10px 4vw 60px}
/* balão e cards continuam mais estreitos e centralizados */
.wz-bubble,.wz-options{max-width:780px;margin-left:auto;margin-right:auto}

/* balão do mascote */
.wz-bubble{display:flex;align-items:center;gap:18px;margin:20px auto 40px}
.wz-mascote{
  width:96px;height:96px;background:#ffe4e9;border-radius:50%;padding:8px;flex:0 0 auto;
  animation:wz-pop .55s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes wz-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.wz-speech{
  position:relative;background:#fff;border:1px solid var(--borda);border-radius:16px;
  padding:20px 24px;font-size:1.15rem;font-weight:500;box-shadow:0 8px 22px rgba(150,28,64,.06);
  min-height:62px;display:flex;align-items:center;
  animation:wz-fade .4s ease .45s both;
}
@keyframes wz-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cursor piscando enquanto digita */
.wz-speech.typing::after{
  content:'';display:inline-block;width:2px;height:1.15em;margin-left:2px;
  background:var(--roxo);vertical-align:-.18em;animation:wz-blink .9s steps(1) infinite;
}
@keyframes wz-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* cards */
.wz-options{display:flex;flex-direction:column;gap:18px}
.wz-card{
  position:relative;display:flex;align-items:center;gap:18px;
  background:var(--card);border:1.5px solid var(--borda);border-radius:18px;padding:24px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.wz-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(150,28,64,.12);border-color:var(--roxo)}
.wz-card-best{border-color:var(--roxo);box-shadow:0 14px 34px rgba(245,54,92,.16)}
.wz-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--roxo);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.5px;padding:5px 14px;border-radius:999px}
.wz-ico{width:54px;height:54px;border-radius:50%;background:#ffe4e9;display:grid;place-items:center;font-size:1.5rem;flex:0 0 auto}
.wz-card-body{flex:1}
.wz-card-body h3{font-size:1.2rem;color:var(--roxo-escuro)}
.wz-card-body p{color:var(--cinza);font-size:.95rem;margin:2px 0 6px}
.wz-extra{color:var(--roxo);font-size:.72rem;font-weight:700;letter-spacing:.5px}
.wz-go{background:#fff;border:1px solid var(--borda);color:var(--roxo-escuro);font-weight:600;font-size:.9rem;padding:10px 16px;border-radius:10px;white-space:nowrap}
.wz-card:hover .wz-go{background:var(--roxo);color:#fff;border-color:var(--roxo)}

/* botão primário (usado em wrapped/pagamento) */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--roxo);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:1rem;padding:14px 26px;border-radius:14px;
  box-shadow:0 10px 24px rgba(245,54,92,.3);transition:background .15s,transform .15s;text-decoration:none;
}
.btn-primary:hover{background:var(--roxo-escuro)}
.btn-primary:active{transform:scale(.98)}

/* divisória + chips */
.wz-or{text-align:center;color:var(--cinza);font-size:.78rem;font-weight:600;letter-spacing:.5px;margin:40px 0 18px}
.wz-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.wz-chip{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:10px 15px;font-weight:500;font-size:.9rem;white-space:nowrap;transition:all .15s ease}
.wz-chip:hover{border-color:var(--roxo);color:var(--roxo-escuro);transform:translateY(-2px)}

@media(max-width:600px){
  .wz-bubble{flex-direction:column;align-items:flex-start}
  .wz-mascote{width:72px;height:72px}
  .wz-speech{font-size:1rem}
  .wz-card{flex-wrap:wrap}
  .wz-go{width:100%;text-align:center}
}