/*
 * Wizard de /planos (plano → conta → pagamento). Mobile-first (390 px).
 * Linguagem do checkout expresso: branco sobre off-white, linha fina quente, sem moldura grossa.
 * Sem style inline (CSP). Só carrega com planos_wizard ligado ($assetsTela em views/layout.php).
 */

.wz {
  width: min(1040px, 100% - 2 * var(--margem-lateral));
  margin: 0 auto;
  padding: var(--esp-5) 0 var(--esp-8);
}
.wz .ico { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .wz-sem-js { display: none; }
.wz [hidden] { display: none !important; }

/* Topo: o benefício (contato dos organizadores) é a primeira coisa lida */
.wz-topo { max-width: 46rem; margin-bottom: var(--esp-5); }
.wz-etiqueta {
  margin: 0 0 0.4rem;
  font-size: var(--fs-xs);
  font-weight: var(--peso-black);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--cor-laranja-texto);
}
.wz-titulo { margin: 0 0 0.6rem; font-size: clamp(1.85rem, 1.4rem + 2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.01em; }
.wz-lead { margin: 0; font-size: var(--fs-lg); line-height: 1.5; color: var(--cor-grafite); }
.wz-origem { display: flex; align-items: center; gap: 0.45rem; margin: var(--esp-3) 0 0; color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 700; }
.wz-origem .ico { color: var(--cor-laranja-texto); }
.wz-origem a { color: var(--link); text-underline-offset: 2px; }

.wz-retomada {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.6rem;
  margin: 0 0 var(--esp-4); padding: 0.6rem 0.9rem;
  border-radius: var(--raio-sm); background: var(--cor-creme);
  font-size: var(--fs-sm); font-weight: 700;
}
.wz-retomada .ico { color: var(--cor-laranja-texto); }
.wz-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: var(--peso-forte); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Progresso 1-2-3, discreto */
.wz-progresso { display: flex; gap: var(--esp-2); margin: 0 0 var(--esp-5); padding: 0; list-style: none; counter-reset: none; }
.wz-progresso li { display: flex; align-items: center; gap: 0.45rem; flex: none; min-width: 0; color: var(--texto-suave); font-size: var(--fs-sm); font-weight: var(--peso-forte); }
.wz-progresso li + li::before { content: ""; flex: 0 1 2.5rem; height: 1px; background: var(--cor-linha); margin-right: 0.15rem; }
.wz-num {
  display: inline-grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--cor-creme); color: var(--cor-grafite);
  font-size: 0.8rem; font-weight: var(--peso-black);
}
.wz-progresso .is-atual { color: var(--cor-grafite); }
.wz-progresso .is-atual .wz-num { background: var(--cor-amarelo); }
.wz-progresso .is-feito .wz-num { background: var(--cor-amarelo-claro); }
.wz-progresso li.is-feito + li::before, .wz-progresso li.is-atual::before { background: var(--cor-amarelo); }
@media (max-width: 380px) { .wz-progresso li:not(.is-atual) .wz-rotulo { display: none; } }

/* Passos */
.wz-passo { display: flex; flex-direction: column; gap: var(--esp-4); }
.wz-passo-titulo { margin: 0; font-size: var(--fs-h3); line-height: 1.15; }
.wz-passo-titulo:focus { outline: none; }
.wz-passo-titulo:focus-visible { outline: none; box-shadow: var(--foco-anel); border-radius: 6px; }
.wz-nota { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 700; }
.wz-nota .ico { margin-top: 0.15rem; }
.wz-nota b { color: var(--cor-grafite); overflow-wrap: anywhere; }
.wz-nota a { color: var(--link); }
.wz-avulso, .wz-painel [data-pix-etapa] > .wz-nota { display: block; }

/* Planos: blocos do mesmo tamanho, nome acima do número */
.wz-planos { display: grid; gap: var(--esp-4); align-items: stretch; }
@media (min-width: 760px) {
  .wz-planos { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--esp-5); }
  .wz-planos--um { grid-template-columns: minmax(0, 26rem); }
}
.wz-plano {
  position: relative;
  display: flex; flex-direction: column; gap: var(--esp-3);
  min-width: 0;
  padding: var(--esp-5);
  border-radius: var(--raio-md);
  background: var(--cor-branco);
  box-shadow: 0 0 0 1px var(--cor-linha), 0 12px 32px rgba(60, 35, 10, 0.05);
  transition: box-shadow 160ms var(--curva), transform 160ms var(--curva);
}
.wz-plano:hover { box-shadow: 0 0 0 1px var(--cor-amarelo-escuro), 0 14px 34px rgba(60, 35, 10, 0.08); }
.wz-plano.is-escolhido { box-shadow: 0 0 0 2px var(--cor-amarelo), 0 14px 34px rgba(60, 35, 10, 0.08); }
.wz-plano-radio { position: absolute; opacity: 0; pointer-events: none; }
.wz-plano-alvo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.wz-plano-radio:focus-visible ~ .wz-plano-alvo { box-shadow: var(--foco-anel); }
.wz-plano-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding-right: 2rem; }
.wz-plano-nome { margin: 0; font-size: 1.25rem; line-height: 1.15; }
.wz-plano-selo {
  padding: 0.18rem 0.6rem; border-radius: var(--raio-pilula);
  background: var(--cor-creme); color: var(--cor-laranja-texto);
  font-size: 0.75rem; font-weight: var(--peso-black);
}
.wz-plano-marca {
  position: absolute; top: var(--esp-5); right: var(--esp-5);
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--cor-borda-campo);
  color: transparent;
}
.wz-plano.is-escolhido .wz-plano-marca { background: var(--cor-amarelo); box-shadow: none; color: var(--cor-grafite); }
.wz .wz-plano-marca .ico { width: 0.9rem; height: 0.9rem; stroke-width: 3; }
.wz-plano-preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.wz-plano-preco b { font-family: var(--fonte-titulo); font-weight: 600; font-size: 2.2rem; line-height: 1; color: var(--cor-grafite); }
.wz-plano-preco span { color: var(--texto-suave); font-weight: var(--peso-forte); }
.wz-plano-chave { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: var(--peso-black); }
.wz-plano-chave .ico { color: var(--cor-laranja-texto); }
.wz-plano-itens { display: grid; gap: 0.35rem; margin: 0; padding: var(--esp-3) 0 0; list-style: none; border-top: 1px solid var(--cor-linha); color: var(--texto-suave); font-size: var(--fs-sm); font-weight: 700; }
.wz-plano-itens li { position: relative; padding-left: 1rem; }
.wz-plano-itens li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--cor-amarelo); }
.wz-ciclo { position: relative; z-index: 2; display: inline-flex; align-self: flex-start; padding: 3px; border-radius: var(--raio-pilula); background: var(--cor-creme); }
.wz-ciclo input { position: absolute; opacity: 0; pointer-events: none; }
.wz-ciclo label { padding: 0.3rem 0.9rem; border-radius: var(--raio-pilula); font-size: 0.85rem; font-weight: var(--peso-forte); cursor: pointer; }
.wz-ciclo input:checked + label { background: var(--cor-branco); box-shadow: var(--sombra-1); }
.wz-ciclo input:focus-visible + label { box-shadow: var(--foco-anel); }
.wz-carregando { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--texto-suave); font-weight: 700; }
.wz-giro { width: 1rem; height: 1rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wz-girar 700ms linear infinite; }

/* Ações */
.wz-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.wz-acoes .wz-principal { flex: 1 1 100%; }
.wz-acoes .btn-ghost .ico { width: 1rem; height: 1rem; }
@media (min-width: 560px) {
  .wz-acoes { justify-content: flex-end; }
  .wz-acoes .wz-principal { flex: 0 1 auto; min-width: 16rem; }
  .wz-acoes .btn-ghost[data-wz-voltar] { margin-right: auto; }
}
@media (max-width: 559px) { .wz-acoes .btn-ghost { flex: 1 1 100%; order: 2; } }
.wz-acoes-centro { justify-content: center !important; }
.wz-principal.is-carregando, .wz .btn.is-carregando { pointer-events: none; opacity: 0.75; }
.wz .btn.is-carregando::before { content: ""; width: 1rem; height: 1rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wz-girar 700ms linear infinite; }
@keyframes wz-girar { to { transform: rotate(360deg); } }

/* Formulário */
.wz-form { display: grid; gap: var(--esp-4); max-width: 40rem; }
.wz-campo { display: grid; gap: 0.35rem; min-width: 0; }
.wz-campo-par { display: grid; gap: var(--esp-4); }
@media (min-width: 480px) { .wz-campo-par { grid-template-columns: 1fr 1fr; } }
.wz-campo label, .wz-rotulo { font-size: 0.92rem; font-weight: var(--peso-black); }
.wz-campo input, .wz-copia input {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-sm);
  background: var(--cor-branco); color: var(--cor-grafite);
  font: inherit; font-size: 1rem; font-weight: 700;
}
.wz-campo input[readonly] { background: var(--cor-offwhite); color: var(--texto-suave); }
.wz-campo input::placeholder { color: #8C8178; font-weight: 600; }
.wz-campo input:focus, .wz-copia input:focus { outline: none; border-color: var(--cor-grafite); box-shadow: 0 0 0 3px var(--cor-amarelo-claro); }
.wz-campo input[aria-invalid="true"] { border-color: var(--cor-erro); background: #FFFBFA; }
.wz-erro { margin: 0; color: var(--cor-erro); font-size: 0.88rem; font-weight: var(--peso-forte); }
.wz-aceite { display: flex; align-items: flex-start; gap: 0.65rem; min-height: var(--alvo-toque); font-size: 0.92rem; font-weight: 700; cursor: pointer; }
.wz-aceite input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.1rem 0 0; accent-color: var(--cor-grafite); }
.wz-aceite a { color: var(--link); }
.wz-form > .wz-erro { margin-top: calc(-1 * var(--esp-3)); }

.wz-alerta { margin: 0 0 var(--esp-4); padding: 0.75rem 0.9rem; border-radius: var(--raio-sm); background: var(--cor-erro-fundo); color: var(--cor-erro); font-weight: var(--peso-forte); font-size: 0.94rem; }
.wz-alerta:focus { outline: none; }
.wz-alerta-suave { margin: 0; background: var(--cor-creme); color: var(--cor-grafite); }

/* E-mail já cadastrado: link enviado, sem abrir sessão */
.wz-link-enviado { display: grid; gap: var(--esp-3); max-width: 40rem; padding: var(--esp-5); border-radius: var(--raio-md); background: var(--cor-creme); }
.wz-link-enviado p { margin: 0; }
.wz-link-titulo { display: flex; align-items: center; gap: 0.5rem; font-family: var(--fonte-titulo); font-size: 1.15rem; }
.wz-link-titulo .ico { width: 1.3rem; height: 1.3rem; color: var(--cor-laranja-texto); }
.wz-link-enviado b { overflow-wrap: anywhere; }

/* Pagamento */
.wz-resumo { display: grid; margin: 0; max-width: 40rem; border-top: 1px solid var(--cor-linha); }
.wz-resumo > div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--cor-linha); }
.wz-resumo dt { font-size: 0.72rem; font-weight: var(--peso-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
.wz-resumo dd { margin: 0; min-width: 0; font-weight: var(--peso-forte); overflow-wrap: anywhere; }

.wz-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); max-width: 40rem; margin: 0; padding: 0; border: 0; }
.wz-metodos legend { margin-bottom: var(--esp-2); padding: 0; font-size: 0.92rem; font-weight: var(--peso-black); }
.wz-metodo { position: relative; }
.wz-metodo input { position: absolute; opacity: 0; pointer-events: none; }
.wz-metodo span {
  display: grid; place-items: center; min-height: 48px; padding: 0.5rem;
  border-radius: var(--raio-sm); background: var(--cor-branco);
  box-shadow: 0 0 0 1px var(--cor-linha);
  font-weight: var(--peso-forte); text-align: center; cursor: pointer;
}
.wz-metodo input:checked + span { box-shadow: 0 0 0 2px var(--cor-amarelo); background: var(--cor-offwhite); }
.wz-metodo input:focus-visible + span { box-shadow: var(--foco-anel); }
.wz-metodo input:disabled + span { cursor: default; opacity: 0.55; }
.wz-metodo input:disabled:checked + span { opacity: 1; }

.wz-painel { max-width: 40rem; }
.wz-painel > div { display: grid; gap: var(--esp-4); }
.wz-status { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-weight: var(--peso-forte); }
.wz-status b { font-variant-numeric: tabular-nums; }
.wz-pulso { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cor-laranja); animation: wz-pulsar 1.6s ease-in-out infinite; }
@keyframes wz-pulsar { 50% { opacity: 0.3; transform: scale(0.8); } }
.wz-qr { display: grid; place-items: center; padding: var(--esp-4); border-radius: var(--raio-md); background: var(--cor-branco); box-shadow: 0 0 0 1px var(--cor-linha); }
.wz-qr img { display: block; width: min(220px, 100%); height: auto; aspect-ratio: 1; }
.wz-painel .wz-rotulo { margin-bottom: calc(-1 * var(--esp-3)); }
.wz-copia { display: flex; gap: var(--esp-2); }
.wz-copia input { flex: 1; min-width: 0; font-size: 0.85rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--texto-suave); }
.wz-copia .btn { flex: none; min-width: 7.5rem; }
.wz-copia .btn.is-copiado { --btn-fundo: var(--cor-ok-fundo); --btn-texto: var(--cor-ok); }
.wz-confianca { display: flex; align-items: flex-start; gap: 0.5rem; max-width: 40rem; margin: var(--esp-2) 0 0; color: var(--texto-suave); font-size: 0.85rem; font-weight: 700; }
.wz-confianca .ico { margin-top: 0.1rem; }

/* Sucesso */
.wz-sucesso { align-items: center; text-align: center; max-width: 34rem; margin: 0 auto; }
.wz-sucesso > p { margin: 0; }
.wz-sucesso .wz-resumo { width: 100%; text-align: left; }
.wz-sucesso .wz-nota { justify-content: center; }
.wz-check { width: 4.5rem; height: 4.5rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wz-check circle { fill: var(--cor-amarelo-claro); stroke: var(--cor-amarelo); stroke-width: 2; transform-origin: center; animation: wz-surgir 420ms var(--curva) both; }
.wz-check path { stroke: var(--cor-grafite); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: wz-tracar 420ms 260ms var(--curva) forwards; }
@keyframes wz-surgir { from { transform: scale(0.6); opacity: 0; } }
@keyframes wz-tracar { to { stroke-dashoffset: 0; } }
@media (max-width: 559px) { .wz-sucesso .wz-acoes .btn { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) {
  .wz-plano, .wz-giro, .wz-pulso, .wz-check circle, .wz-check path, .wz .btn.is-carregando::before { animation: none; transition: none; }
  .wz-check path { stroke-dashoffset: 0; }
}