/**
 * Página /assinar — entrada na Formação continuada Nós.
 *
 * O padrão de passos (.passo, .assinar-botao, .assinar-erro) espelha de
 * propósito o de certificado.css. Extrair um CSS de formulário compartilhado
 * seria mexer numa página que está em produção e emitindo certificado — não a
 * quatro dias do lançamento. Se um dia alguém unificar, unifique os dois.
 */

.assinar {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 4rem;
}

.assinar-selo {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0 0 0.75rem;
}

.assinar h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  color: var(--petrol);
}

.assinar-sub {
  color: var(--muted);
  margin: 0 0 2rem;
  font-size: 1.0625rem;
}

/* ── O cartão do plano ──────────────────────────────────────────────── */

.plano {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.375rem;
  margin: 0 0 2rem;
}

.plano-preco {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  font-family: var(--font-display);
  color: var(--petrol);
  margin: 0 0 0.25rem;
}

.plano-valor {
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1;
  font-weight: 600;
}

.plano-por {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--muted);
}

.plano-nota {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.plano-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.plano-lista li {
  position: relative;
  padding-left: 1.625rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* O traço é decorativo, então --sage passa: não é texto. */
.plano-lista li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.55em;
  width: 0.75rem;
  height: 2px;
  background: var(--sage);
  border-radius: 2px;
}

/* ── Passos ─────────────────────────────────────────────────────────── */

.passo[hidden] {
  display: none !important;
}

.passo-conta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.passo h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--petrol);
  margin: 0 0 0.5rem;
}

.passo > p {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ── Campos ─────────────────────────────────────────────────────────── */

.assinar label {
  display: block;
  font-weight: 600;
  color: var(--petrol);
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

.assinar .ajuda {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  line-height: 1.45;
  font-weight: 400;
}

.assinar .campo {
  margin: 0 0 1.375rem;
}

/* 16px é obrigatório: menos que isso faz o Safari do iOS dar zoom ao focar,
   e 99% das inscrições vêm de celular. Ver CLAUDE.md. */
.assinar input[type="text"],
.assinar input[type="email"],
.assinar input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 0.8125rem 0.875rem;
  min-height: var(--touch);
  color: var(--petrol);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.assinar input:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 2px;
  border-color: var(--sage-ink);
}

/* ── membra / membro ───────────────────────────────────────────────── */

/* Esta pergunta ia morar no perfil do Circle. O plano Professional não tem
   campo personalizado, então ela vive aqui e vai para membros.tratamento. */
.tratamento {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

/* Esconde o radio sem tirá-lo da árvore de acessibilidade: quem clica no
   label ativa o input, e o leitor de tela continua anunciando o grupo.
   `clip-path` em vez de position:absolute solto, que ancorava os dois radios
   no mesmo ponto de 1x1px em qualquer ancestral posicionado. */
.tratamento input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tratamento label {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0.75rem;
  text-align: center;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.tratamento input:checked + label {
  border-color: var(--sage-ink);
  background: var(--sage-light);
  color: var(--petrol-deep);
  font-weight: 600;
}

.tratamento input:focus-visible + label {
  outline: 2px solid var(--sage-ink);
  outline-offset: 2px;
}

/* ── Botões ─────────────────────────────────────────────────────────── */

.assinar-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
  background: var(--petrol);
  border: 1px solid var(--petrol);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.assinar-botao:hover:not(:disabled) {
  background: var(--petrol-deep);
}

.assinar-botao:disabled {
  opacity: 0.6;
  cursor: progress;
}

.assinar-botao.secundario {
  color: var(--petrol);
  background: transparent;
  font-weight: 500;
}

.assinar-botao.secundario:hover:not(:disabled) {
  background: var(--paper-card);
}

.assinar-acoes {
  display: grid;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

/* ── Avisos ─────────────────────────────────────────────────────────── */

.assinar-erro,
.assinar-nota {
  border-radius: 10px;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.assinar-erro {
  color: #7a2e2e;
  background: #f7e9e6;
  border: 1px solid #e3c4bd;
}

.assinar-nota {
  color: var(--petrol);
  background: var(--paper-card);
  border: 1px solid var(--line);
}

.assinar-erro[hidden],
.assinar-nota[hidden] {
  display: none !important;
}

/* ── Conferir o e-mail ─────────────────────────────────────────────── */

/* Este passo parece redundante e não é. O Zapier responde 200 ao RECEBER o
   gatilho, não ao concluir: se o e-mail não existir no Circle, o Zap falha
   lá dentro e não ficamos sabendo. Conferir aqui é mais barato. */
.confere-email {
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 4vw, 1.125rem);
  word-break: break-all;
  color: var(--petrol-deep);
  background: var(--sage-light);
  border-radius: 10px;
  padding: 1rem;
  margin: 0 0 1.5rem;
  text-align: center;
}

.confere-lista {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.confere-lista dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8125rem;
}

.confere-lista dd {
  margin: 0 0 0.5rem;
  color: var(--petrol);
}

/* ── O Pix ──────────────────────────────────────────────────────────── */

.pix-qr {
  display: block;
  width: min(15rem, 70vw);
  height: auto;
  margin: 0 auto 1.25rem;
  background: #fff;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pix-copia {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-all;
  color: var(--muted);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem;
  margin: 0 0 0.75rem;
  max-height: 5.5rem;
  overflow-y: auto;
}

.pix-prazo {
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
  margin: 1.25rem 0 0;
}

.pix-passos {
  counter-reset: pix;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.875rem;
}

.pix-passos li {
  counter-increment: pix;
  position: relative;
  padding-left: 2.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

.pix-passos li::before {
  content: counter(pix);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 1.625rem;
  height: 1.625rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--sage-ink);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .assinar-botao,
  .tratamento label {
    transition: none;
  }
}

/* O navegador põe borda e padding em fieldset por conta própria. O grupo
   membra/membro usa fieldset por acessibilidade, não por moldura. */
.assinar fieldset.campo {
  border: 0;
  padding: 0;
  margin: 0 0 1.375rem;
  min-width: 0;
}

.assinar fieldset.campo legend {
  padding: 0;
  font-weight: 600;
  color: var(--petrol);
  font-size: 0.9375rem;
  margin: 0 0 0.25rem;
}

/* ── Aviso de privacidade e socorro ────────────────────────────────────── */

.assinar-privacidade {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.assinar-socorro {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.assinar-privacidade a,
.assinar-socorro a,
.plano-nota a,
.pix-passos a {
  color: var(--sage-ink);
}

/* A caixa do código do Pix é focável (ela rola), então precisa de foco
   visível como qualquer outro alvo de teclado. */
.pix-copia:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 2px;
}

/* ── A espera pelo pagamento ───────────────────────────────────────────── */

.pix-relogio {
  text-align: center;
  margin: 0 0 1rem;
  font-family: var(--font-mono);
}

.pix-relogio span:first-child {
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  color: var(--petrol);
  font-variant-numeric: tabular-nums; /* o número não dança a cada segundo */
}

.pix-relogio-nota {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.pix-relogio.apertado span:first-child {
  color: #b4544a;
}

.pix-relogio.vencido span:first-child {
  font-size: 1rem;
  color: #b4544a;
}

.pix-como {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.875rem;
  margin: 0 0 0.875rem;
}

.pix-como b {
  color: var(--petrol);
}

.pix-esperando {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 1rem 0 0;
}

.pix-pulso {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sage-ink);
  animation: pulso 1.6s ease-in-out infinite;
}

@keyframes pulso {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Movimento em loop é o caso mais claro de prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .pix-pulso { animation: none; opacity: 0.8; }
}

/* ── Pagamento confirmado ──────────────────────────────────────────────── */

.pronto-selo {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f5d47;
  background: #e4efe8;
  border: 1px solid #b9d5c5;
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  display: inline-block;
  margin: 0 0 1rem;
}

#pixPronto h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--petrol);
  margin: 0 0 0.5rem;
}

#pixPronto > p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

.pronto-nota {
  font-size: 0.8125rem !important;
  margin: 1.25rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}


/* ── Espaço na primeira tela do celular ────────────────────────────────── *
 * O selo e o subtítulo apresentam o produto — trabalho que termina quando
 * ela decide continuar. Deixá-los em todos os passos empurrava o botão de
 * copiar o Pix para fora da primeira tela num Android de 664px de altura:
 * ela via o código e não via como copiá-lo.
 *
 * O <h1> FICA, menor: página sem h1 é página sem título para leitor de tela.
 * ------------------------------------------------------------------------ */
.assinar.andando .assinar-selo,
.assinar.andando .assinar-sub {
  display: none;
}

.assinar.andando h1 {
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
}

/* ── O outro meio de pagamento ─────────────────────────────────────────── */

/* ── Os dois meios de pagamento ─────────────────────────────────────────
   O Pix é o preferido e leva o botão cheio. O cartão é alternativa legítima:
   contorno, não link minúsculo. Já esteve minúsculo, ao lado de um botão
   gigante de "corrigir dados", e a hierarquia ficava invertida — a saída rara
   pesando mais que a decisão da tela. */
.assinar-botao.alternativo {
  color: var(--petrol);
  background: transparent;
  border: 1px solid var(--petrol);
  font-weight: 600;
}

.assinar-meios-nota {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.assinar-corrigir {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* Botão com cara de link: é uma alternativa, não um concorrente do Pix. */
.assinar-link {
  display: inline;
  background: none;
  border: 0;
  padding: 0.25rem;
  font: inherit;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.assinar-link:hover {
  color: var(--sage-ink);
}

.assinar-link:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.assinar-outromeio-nota {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ── A confirmação do passo 1 ──────────────────────────────────────────── */

.confirma-detalhe {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0.5rem 0 1.125rem;
}

.confirma-voltar {
  margin: 0.75rem 0 0;
  text-align: center;
}

/* ── Ajuda, sempre visível na página de pagamento ──────────────────────── */

.assinar-ajuda {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.assinar-ajuda-titulo {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--petrol);
  margin: 0 0 0.625rem;
}

.assinar-ajuda-linha {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
}

/* 44px de alvo: estes links são tocados com o polegar, no meio de um
   pagamento, muitas vezes com pressa. */
.assinar-ajuda-linha a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 0.5rem;
  color: var(--sage-ink);
}

/* ── Conferir se ela tem conta, em vez de pedir que se lembre ──────────── */

/* ⚠️ O respiro de cima é MAIOR que o vão entre os dois botões (0,625rem), e
   isso é o ponto: ela mora DEPOIS do par de escolhas, e precisa se ler como
   outra coisa, não como legenda do último botão. Com o mesmo espaçamento,
   grudava no "Não, ainda não criei meu login" e parecia explicá-lo. */
/* ⚠️ O seletor precisa de DUAS classes. `.passo > p` (0,1,1) já define
   `margin: 0 0 1.5rem` e vence `.assinar-conferir-conta` sozinha (0,1,0) — a
   regra existia e a margem de cima continuava zero. Com `.assinar` na frente
   vira (0,2,0), que ganha. */
.assinar .assinar-conferir-conta {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 1.5rem 0 1.25rem;
}

.assinar-conferir-conta a {
  color: var(--sage-ink);
  font-weight: 600;
}

/* O aviso na confirmação: quem erra aqui paga e não entra. */
.confirma-atencao {
  color: #7a2e2e;
}

/* ── O aviso de não fechar a tela, no passo do Pix ──────────────────────────
 *
 * Só aparece para quem marcou "ainda não tenho conta". É uma caixa, e não
 * mais um parágrafo solto, porque o que ela precisa comunicar não é uma
 * informação — é uma instrução com consequência: fechar aqui custa o caminho
 * de entrada. Texto corrido no meio de outros parágrafos não segura ninguém.
 */
.pix-aguarda {
  margin: 1.5rem 0 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sage-ink);
  border-radius: 0.5rem;
  background: var(--paper-card);
}

.pix-aguarda p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}

.pix-aguarda-titulo {
  font-weight: 700;
  color: var(--petrol);
}

/* O botão desativado ocupa o lugar do que vai chegar. `cursor: not-allowed`
   em vez do `progress` do padrão: ali o clique está mesmo indisponível, e não
   em andamento. */
.pix-aguarda .assinar-botao {
  width: 100%;
  margin: 0 0 0.75rem;
}

.pix-aguarda .assinar-botao:disabled {
  cursor: not-allowed;
}

.pix-aguarda .pronto-nota {
  margin-bottom: 0;
}

/* ── "O que está incluído", recolhido ───────────────────────────────────────
 *
 * A lista é a mesma da /comunidade, por onde essa pessoa passou há pouco.
 * Aberta, ela empurra a pergunta do login para baixo da dobra a 390px — e é
 * nessa pergunta que duas de quatro erraram em 12/09/2026.
 *
 * `<details>` nativo, sem JavaScript: se o script falhar, a lista continua
 * abrindo.
 */
.plano-inclui {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

/* ⚠️ PRECISA PARECER BOTÃO, e não rótulo.
   A primeira versão era só o texto com um triangulinho: ninguém entende que
   dá para clicar, e a lista — que é o que responde "o que eu levo por R$
   49,90" — fica invisível. Caixa com borda, fundo e seta à direita é o
   desenho que a pessoa já reconhece como "abre aqui". */
.plano-inclui summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--touch);
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--sage);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--petrol);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  /* O triângulo padrão do navegador some; a seta é nossa, e fica à direita. */
  list-style: none;
}

.plano-inclui summary::-webkit-details-marker {
  display: none;
}

.plano-inclui summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--sage-ink);
  border-bottom: 2px solid var(--sage-ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s;
}

.plano-inclui[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.plano-inclui summary:hover {
  background: var(--paper-card);
  border-color: var(--sage-ink);
}

.plano-inclui summary:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 3px;
}

.plano-inclui[open] summary {
  border-color: var(--sage-ink);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Aberta, a lista continua a mesma caixa: borda que fecha embaixo do botão. */
.plano-inclui[open] .plano-lista {
  margin-top: 0;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--sage-ink);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .plano-inclui summary,
  .plano-inclui summary::after {
    transition: none;
  }
}

/* ── Uma escolha entre iguais ───────────────────────────────────────────────
 *
 * Para pergunta cuja resposta é um FATO sobre a pessoa, e não uma ação
 * recomendada. Aqui nenhum dos dois pode parecer "o botão a apertar": o
 * desenho anterior — um cheio, um de contorno — empurrava para o primeiro, e
 * duas de quatro responderam errado em 12/09/2026.
 *
 * Mesma decisão do portão do certificado, onde as duas saídas também são
 * legítimas.
 */
.assinar-botao.escolha {
  color: var(--petrol);
  background: var(--paper-card);
  border: 2px solid var(--line);
  font-weight: 600;
}

.assinar-botao.escolha:hover:not(:disabled) {
  background: var(--paper);
  border-color: var(--sage-ink);
}

.assinar-botao.escolha:focus-visible {
  outline: 2px solid var(--sage-ink);
  outline-offset: 3px;
}