body { font: 16px/1.5 system-ui, sans-serif; margin: 0; background: #f6f7fb; color: #1f2333; }
main { max-width: 36rem; margin: 2rem auto; padding: 0 1rem; }
main.larga { max-width: 60rem; }
h1 { color: #3d4ec2; }
textarea { width: 100%; box-sizing: border-box; font-family: monospace; }
fieldset { border: 1px solid #cfd3e6; border-radius: 6px; margin: 1rem 0; }
fieldset label { display: block; padding: .25rem 0; }
button { background: #3d4ec2; color: #fff; border: 0; border-radius: 6px; padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
pre { white-space: pre-wrap; word-break: break-all; background: #fff; border: 1px solid #cfd3e6; border-radius: 6px; padding: 1rem; }
.erro { color: #b00020; }
.dica, .rodape { font-size: .9rem; color: #555b70; }
.nota-plano { color: #555b70; }
.aviso-conta { color: #b00020; font-weight: 600; }

/* Comparativo de planos */
.titulo-secao { margin: 1.5rem 0 .5rem; }
.periodo { display: inline-flex; gap: .25rem; background: #e6e8f3; border-radius: 999px; padding: .25rem; margin-bottom: 1rem; }
.periodo label { padding: .35rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600; }
.periodo label:has(input:checked) { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.periodo input { position: absolute; opacity: 0; width: 0; height: 0; }
.economia { font-size: .75rem; font-weight: 600; color: #0a7d3e; background: #d9f5e4; border-radius: 999px; padding: .1rem .5rem; margin-left: .25rem; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; }
.cartao { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid #dfe2ee; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(31,35,51,.06); }
.cartao header { padding: 1.25rem 1.25rem 1rem; color: #fff; }
.cartao h2 { margin: 0 0 .25rem; font-size: 1.3rem; }
.cartao .preco { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.cartao .cobranca { margin: .25rem 0 0; font-size: .85rem; opacity: .9; min-height: 1.3em; }
.cartao.gratis header { background: #6b7280; }
.cartao.basico header { background: #3d4ec2; }
.cartao.pro header { background: linear-gradient(135deg, #7c3aed, #db2777); }
.cartao.escolhido { border-color: #3d4ec2; box-shadow: 0 0 0 4px rgba(61,78,194,.18); }
.cartao.pro.escolhido { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.selo { position: absolute; top: .75rem; right: -2.4rem; transform: rotate(35deg); background: #ffd166; color: #4a3000; font-size: .7rem; font-weight: 700; letter-spacing: .03em; padding: .2rem 3rem; }
.itens { list-style: none; margin: 0; padding: .75rem 1rem; flex: 1; }
.itens li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0 .4rem 1.5rem; border-bottom: 1px solid #eef0f6; font-size: .9rem; position: relative; }
.itens li:last-child { border-bottom: 0; }
.itens li::before { position: absolute; left: 0; font-weight: 700; }
.itens li.ok::before { content: "✓"; color: #0a7d3e; }
.itens li.limite::before { content: "•"; color: #b45309; }
.itens li.nao::before { content: "✗"; color: #b00020; }
.itens .valor { text-align: right; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.itens li.limite .valor { color: #b45309; }
.itens li.nao .valor { color: #8a8f9f; font-weight: 400; }
.itens li.ok .valor { color: #0a7d3e; }
.rodape-cartao { padding: 0 1rem 1rem; }
.rodape-cartao .aviso-pacote { font-size: .85rem; margin: 0 0 .75rem; }
.rodape-cartao .escolher { width: 100%; }
.cartao.pro .escolher { background: linear-gradient(135deg, #7c3aed, #db2777); }
.cartao.escolhido .escolher { background: #0a7d3e; }
.pagamento { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.resumo { margin: 0; font-weight: 600; }
#pagar { font-size: 1.1rem; padding: .75rem 2rem; }

/* Passo a passo para quem chega pelo site, sem o Pedido de chave */
.passos { background: #fff; border: 2px solid #3d4ec2; border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.passos h2 { margin: 0 0 .5rem; font-size: 1.3rem; color: #3d4ec2; }
.passos ol { margin: .75rem 0 0; padding-left: 1.4rem; }
.passos li { margin: .5rem 0; }
.botao-loja { display: inline-block; margin-left: .5rem; background: #3d4ec2; color: #fff; font-weight: 600; text-decoration: none; border-radius: 6px; padding: .3rem .8rem; }
.botao-loja:hover { background: #2f3da0; }