:root {
  --primaria: #0b6bcb;
  --fundo: #f4f6f9;
  --texto: #1c2430;
  --suave: #5b6676;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cartao {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
.logo { display: block; max-height: 64px; max-width: 70%; margin: 0 auto 12px; }
h1 { font-size: 1.4rem; text-align: center; margin: 0 0 4px; }
.subtitulo { text-align: center; color: var(--suave); margin: 0 0 16px; }
button {
  width: 100%;
  padding: 14px;
  margin: 6px 0;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--primaria);
  cursor: pointer;
}
button.secundario { background: transparent; color: var(--primaria); border: 2px solid var(--primaria); }
button.link { background: none; color: var(--suave); font-weight: 400; }
button:disabled { opacity: .6; }
input, textarea {
  width: 100%;
  padding: 12px;
  margin: 6px 0;
  border: 1px solid #ccd3dd;
  border-radius: 10px;
  font-size: 1rem;
}
.plano {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}
.plano small { display: block; font-weight: 400; opacity: .85; }
.separador { text-align: center; color: var(--suave); margin: 16px 0 8px; font-size: .9rem; }
.abas { display: flex; gap: 6px; }
.abas button { padding: 10px; font-size: .9rem; background: #e7ecf3; color: var(--texto); }
.abas button.ativa { background: var(--primaria); color: #fff; }
.bloco-termos { border-radius: 10px; padding: 4px 8px; margin: 0 -8px 8px; transition: background .3s; }
.bloco-termos.destaque { background: #fff4d6; box-shadow: 0 0 0 2px #f2b705; }
.aceite { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--suave); margin: 8px 0; }
.aceite input { width: auto; margin: 2px 0 0; }
.termos { font-size: .8rem; color: var(--suave); max-height: 160px; overflow: auto; white-space: pre-wrap; border-top: 1px solid #eee; padding-top: 8px; }
.mensagem { background: #fdecec; color: #a12121; padding: 10px; border-radius: 8px; font-size: .9rem; }
.qr { width: 240px; margin: 8px auto; }
.qr svg { width: 100%; height: auto; }
.codigo-pix { font-size: .75rem; font-family: monospace; resize: none; }
.plano-escolhido { text-align: center; font-weight: 600; }
.aguardando { text-align: center; color: var(--suave); }
.dica { font-size: .8rem; color: var(--suave); text-align: center; }
.sucesso { text-align: center; font-size: 1.2rem; color: #18794e; }
.codigo-acesso {
  text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 2rem; font-weight: 700;
  letter-spacing: .12em; background: #f1f4f8; border-radius: 10px; padding: 14px; margin: 8px 0 12px;
}
.girando {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--suave); border-top-color: transparent;
  animation: girar 1s linear infinite; vertical-align: middle;
}
@keyframes girar { to { transform: rotate(360deg); } }