/* A tela de escolha de acesso: os cinco cartões e o fundo.

   Carregada depois de tokens.css e base.css, e só por esta tela. O que
   vale para mais de um painel não entra aqui: vai para o base.css, que
   é o lugar onde as telas se parecem. */

/* `minmax(0, 1fr)`: a trilha da grade não cresce além da tela por causa do
   conteúdo mais largo dentro dela. Com a trilha automática, as três etapas do
   /assinar (que não quebram linha) alargavam a coluna para 330px num telefone
   de 320, e o formulário inteiro saía cortado pela direita. */
body { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 48px 24px; }
@media (max-width: 600px) { body { padding: 28px 14px; } }
.caixa { width: 100%; max-width: 940px; }

.cabecalho { text-align: center; margin-bottom: 40px; }
.cabecalho .marca-icone { width: 54px; height: 54px; margin: 0 auto 16px; }
.cabecalho .marca-icone svg { width: 28px; height: 28px; }
.cabecalho .marca-logo { width: 54px; height: 54px; }
.cabecalho h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.cabecalho h1 span { color: var(--roxo-escuro); }
.cabecalho p { color: var(--cinza); margin-top: 6px; font-size: 14px; }

.titulo-grupo {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza-fraco); margin: 0 2px 14px;
}
.titulo-grupo::after { content: ""; flex: 1; height: 1px; background: var(--borda-forte); }

.grupo + .grupo { margin-top: 34px; }

.acessos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.acesso {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  padding: 18px;
  text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.acesso::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cor); }
.acesso:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cor) 40%, var(--borda)); box-shadow: var(--sombra-alta, 0 12px 32px -14px rgb(30 27 46 / .22)); }

.acesso-icone {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  color: var(--cor);
}
.acesso-icone svg { width: 20px; height: 20px; }

.acesso b { font-size: 15px; font-weight: 600; display: block; }
.acesso .papel { font-size: 12px; color: var(--cinza); margin-top: 2px; display: block; }
.acesso .desc { font-size: 12px; color: var(--cinza-fraco); line-height: 1.55; margin-top: 8px; }

.acesso .entrar {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--cor);
}
.acesso .entrar svg { width: 14px; height: 14px; }

.nota { text-align: center; font-size: 12px; color: var(--cinza-fraco); margin-top: 34px; }

/* A entrada por e-mail e senha. Fica antes dos cartões porque é o caminho que
   vai sobrar quando houver servidor — os cartões é que são o provisório. */
.entrada { display: grid; gap: 12px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: 12px; padding: 18px 20px; }
.entrada .linha-campo { display: grid; gap: 5px; }
.entrada .linha-campo > span { font-size: 12.5px; font-weight: 500; color: var(--tinta); }
.entrada input {
  width: 100%; font: inherit; font-size: 14px; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 10px; padding: 10px 12px;
}
.entrada input:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }

/* O aviso sobre a senha do e-mail não é rodapé: é a informação mais importante
   da tela para quem vai digitar, e por isso tem cor e borda. */
.aviso-senha {
  font-size: 12px; line-height: 1.55; color: var(--tinta);
  background: color-mix(in srgb, #B45309 8%, transparent);
  border-left: 3px solid #B45309; border-radius: 8px; padding: 10px 12px;
}
.aviso-senha b { display: block; margin-bottom: 2px; }

/* A tela de entrar: o formulário e o que ele diz quando não dá para entrar. */
.cartao-entrada {
  display: grid; gap: 12px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); padding: 18px 20px;
}
.cartao-entrada b { font-size: 15px; font-weight: 600; }
.cartao-entrada .linha-campo { display: grid; gap: 6px; }
.cartao-entrada .linha-campo span { font-size: 12.5px; color: var(--cinza); }
.cartao-entrada input {
  font: inherit; font-size: 14px; color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-botao);
  padding: 11px 13px; width: 100%;
}
.cartao-entrada input:focus { outline: 2px solid var(--roxo); outline-offset: -1px; border-color: var(--roxo); }
.cartao-entrada .comando {
  font: inherit; font-size: 12.5px; line-height: 1.7; white-space: pre;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 9px;
  padding: 11px 13px; margin: 0; overflow-x: auto;
}
.cartao-entrada.entrou { border-color: color-mix(in srgb, #16A34A 45%, var(--borda)); }
.acoes-entrada { display: flex; gap: 9px; flex-wrap: wrap; }
.acoes-entrada .btn-primario { text-decoration: none; display: inline-flex; align-items: center; }

/* O cartão virou botão: ele não abre o painel, preenche o e-mail. */
button.acesso { width: 100%; text-align: left; font: inherit; cursor: pointer; }

/* O cartão de perfil, no segundo passo: quem você escolheu ser. */
.quem-entra {
  display: flex; align-items: center; gap: 12px;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 10px; padding: 12px 13px;
}
.quem-entra b { font-size: 14px; font-weight: 600; display: block; }
.quem-entra .desc { font-size: 12px; color: var(--cinza); line-height: 1.45; margin-top: 2px; }
.cartao-entrada.aviso { background: var(--fundo); border-style: dashed; }

/* Na versão em JavaScript o cartão de acesso era um <button>, porque ele não
   navegava: preenchia o e-mail na mesma tela. Aqui ele leva para a página de
   entrar daquele perfil, e link que navega é <a> — inclusive para abrir em
   outra aba, que com botão não dá. */
a.acesso { text-decoration: none; color: inherit; }

/* "Escolher outro acesso": no sistema pronto é um <button>, que no grid do
   cartão ocupa a linha inteira com o texto no meio e sem sublinhado. Aqui é
   um link, porque volta para outra página — então ele imita o botão. */
.cartao-entrada > a.link-discreto { display: block; text-align: center; text-decoration: none; }
.cartao-entrada > a.link-discreto:hover { text-decoration: underline; }

/* A tela de status: os quatro blocos ocupam o mesmo lugar, e só um aparece. */
.cartao-entrada .desc { font-size: 12.5px; color: var(--cinza); line-height: 1.55; margin-top: 6px; }
.cartao-entrada [hidden] { display: none; }

/* ================= A porta de entrada da assinatura =================
   Duas colunas: as quatro perguntas à esquerda, numeradas na ordem da
   decisão, e o resumo à direita, com o aceite e o botão — é lá que a pessoa
   confere o que vai pagar antes de pagar. No celular o resumo desce para o
   fim, depois da última pergunta. O fundo e a marca são os da página de
   pagamento, que é o passo seguinte. */
body:has(.caixa.assinar) {
  background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--roxo) 8%, transparent), transparent 40%),
    radial-gradient(circle at 104% 96%, color-mix(in srgb, var(--roxo) 9%, transparent) 0 18%, transparent 18.2%),
    #F8F6FE; background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--roxo) 8%, transparent), transparent 40%),
    radial-gradient(circle at 104% 96%, color-mix(in srgb, var(--roxo) 9%, transparent) 0 18%, transparent 18.2%),
    light-dark(#F8F6FE, #221c34);
  padding-top: 24px;
}
.caixa.assinar { max-width: 960px; display: grid; gap: 18px; }
.assinar [hidden] { display: none !important; }

.assinar-seguro {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1px solid var(--borda-forte); border-radius: 999px;
  background: rgb(255 255 255 / .7); background: light-dark(rgb(255 255 255 / .7), #1b152cb2); font-size: 12px; color: var(--tinta);
}
.assinar-seguro svg { width: 16px; height: 16px; }

/* As três etapas. Só a primeira acende: esta tela é o passo 1. */
.assinar-etapas { list-style: none; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 0; margin: 0; }
.assinar-etapas li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--cinza); }
.assinar-etapas li + li::before { content: ""; width: 28px; height: 1px; background: var(--borda-forte); margin-right: 12px; }
.assinar-etapas span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--borda-forte); background: var(--lavanda); color: var(--tinta); font-weight: 500;
}
.assinar-etapas .atual { color: var(--roxo-escuro); font-weight: 500; }
.assinar-etapas .atual span { background: var(--roxo-forte); border-color: var(--roxo-forte); color: #fff; }

.assinar .cabecalho { margin: 10px 0 8px; }
.assinar .cabecalho h1 { font-size: 46px; font-weight: 700; letter-spacing: -.035em; color: var(--tinta); }
.assinar .cabecalho h1 span {
  background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.assinar .cabecalho p { font-size: 15.5px; max-width: 480px; margin: 8px auto 0; line-height: 1.5; }

.assinar-grade { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.assinar-secoes { display: grid; gap: 16px; }

.assinar-secao, .assinar-resumo {
  background: rgb(255 255 255 / .85); background: light-dark(rgb(255 255 255 / .85), #1b152cd9); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao);
}
.assinar-secao { padding: 18px 20px 20px; display: grid; gap: 16px; scroll-margin-top: 20px; }
.assinar-secao > header { display: flex; align-items: center; gap: 20px; }
.assinar-numero {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro); font-weight: 600; font-size: 17px;
}
.assinar-secao h2 { font-size: 19px; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; }
.assinar-secao > header p { font-size: 13px; color: var(--cinza); margin-top: 1px; }

/* Os campos: ícone à esquerda, e o rótulo pequeno em cima quando o campo
   precisa dizer o formato (telefone com DDD, CPF). */
.assinar-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.assinar-campo {
  display: flex; align-items: center; gap: 14px; min-height: 54px;
  padding: 8px 16px; background: #fff; background: light-dark(#fff, #1b152c); cursor: text;
  border: 1px solid var(--borda-forte); border-radius: 10px;
}
.assinar-campo:focus-within { border-color: var(--roxo); outline: 2px solid color-mix(in srgb, var(--roxo) 25%, transparent); }
.assinar-campo > svg { width: 20px; height: 20px; flex: none; color: var(--tinta); }
.assinar-campo-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.assinar-campo small { font-size: 13px; color: var(--tinta); }
.assinar-campo input {
  width: 100%; border: 0; padding: 0; background: transparent; outline: none;
  font: inherit; font-size: 13.5px; color: var(--tinta);
}
.assinar-campo input::placeholder { color: var(--cinza); }

/* Perfil e plano: cartões lado a lado, com o rádio escondido e o check no
   canto do marcado. O rádio continua lá — teclado e leitor de tela usam. */
.escolha-perfil, .escolha-plano, .escolha-adicional { border: 0; padding: 0; margin: 0; min-width: 0; }
.assinar-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.assinar-cartao {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  text-align: center; padding: 18px 14px; cursor: pointer; background: #fff; background: light-dark(#fff, #1b152c);
  border: 1px solid var(--borda-forte); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.assinar-cartao:hover { border-color: var(--roxo-claro); }
.assinar-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.assinar-cartao:has(input:checked) { border-color: var(--roxo-escuro); background: color-mix(in srgb, var(--lavanda) 70%, white); background: color-mix(in srgb, var(--lavanda) 70%, light-dark(white, #1b152c)); }
.assinar-cartao:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 2px; }
.assinar-cartao:has(input:checked)::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--roxo-escuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; background: var(--roxo-escuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='light-dark(white, #1b152c)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.assinar-cartao-icone {
  width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro); margin-bottom: 6px;
}
.assinar-cartao-icone svg { width: 24px; height: 24px; }
.assinar-cartao b { font-size: 16px; font-weight: 600; color: var(--tinta); }
.assinar-cartao i { font-style: normal; font-size: 17px; font-weight: 600; color: var(--tinta); }
.assinar-cartao:has(input:checked) i { color: var(--roxo-escuro); }
.assinar-cartao small { font-size: 12.5px; color: var(--cinza); line-height: 1.45; }

/* Os adicionais: uma linha, e a chave à direita. É quantos ela quiser, e a
   chave diz isso melhor que um cartão para escolher um só. */
.escolha-adicional { display: grid; gap: 12px; }
.opcao-adicional {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 16px 18px; background: #fff; background: light-dark(#fff, #1b152c); cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: 12px;
}
.opcao-adicional:has(input:checked) { border-color: var(--roxo-escuro); background: color-mix(in srgb, var(--lavanda) 40%, white); background: color-mix(in srgb, var(--lavanda) 40%, light-dark(white, #1b152c)); }
.opcao-adicional .assinar-cartao-icone { width: 48px; height: 48px; border-radius: 12px; margin: 0; align-self: start; }
.adicional-texto { display: grid; gap: 4px; }
.adicional-texto b { font-size: 15px; font-weight: 600; color: var(--tinta); }
.adicional-texto small { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.adicional-preco { display: grid; font-size: 12.5px; color: var(--cinza); white-space: nowrap; align-self: start; padding-top: 2px; }
.adicional-preco b { font-size: 15px; font-weight: 600; color: var(--tinta); }


/* ---- O resumo: acompanha a rolagem, para o botão estar sempre à mão. ---- */
.assinar-resumo {
  position: sticky; top: 20px; display: grid; gap: 16px; padding: 22px 14px 14px;
  background: linear-gradient(180deg, #F1EDFD, rgb(255 255 255 / .9) 40%); background: linear-gradient(180deg, light-dark(#F1EDFD, #2a213d), light-dark(rgb(255 255 255 / .9), #1b152ce6) 40%);
}
.assinar-resumo > h2, .assinar-resumo-sub, .conta-do-mes, .linha-aceite, .assinar-rodape { margin-inline: 12px; }
.assinar-resumo > h2 { font-size: 19px; font-weight: 600; color: var(--tinta); }
.assinar-resumo-sub { font-size: 12.5px; color: var(--cinza); margin-top: -12px; }

.assinar-escolhidos { display: grid; gap: 6px; background: #fff; background: light-dark(#fff, #1b152c); border-radius: 12px; padding: 8px 14px; }
.assinar-escolhido { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 8px 0; }
.assinar-escolhido .assinar-cartao-icone { width: 44px; height: 44px; border-radius: 10px; margin: 0; }
.assinar-escolhido b { display: block; font-size: 13px; font-weight: 600; color: var(--tinta); margin-top: 4px; }
.assinar-escolhido small { display: block; font-size: 11.5px; color: var(--cinza); line-height: 1.5; }
.assinar-escolhido a { font-size: 11.5px; color: var(--roxo-escuro); margin-top: 6px; }

.conta-do-mes { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--borda-forte); }
/* `.assinar` na frente porque o base.css tem outra `.linha-conta`, a das
   telas de conta, com fundo, padding e quebra de linha. */
.assinar .linha-conta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: nowrap; padding: 0; background: none; font-size: 13.5px; color: var(--tinta);
}
.assinar .linha-conta b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* A taxa única não entra no "por mês": ela é outra coisa, e somar as duas num
   número só faria a mensalidade parecer maior do que é para sempre. */
.assinar .linha-conta.agora b { color: #B45309; color: light-dark(#B45309, #f68f53); }

.assinar-total { display: grid; gap: 4px; background: var(--lavanda); border-radius: 12px; padding: 18px 20px; }
.assinar-total > span { font-size: 14px; font-weight: 500; color: var(--tinta); }
.assinar-total b { font-size: 34px; font-weight: 700; color: var(--roxo-escuro); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.assinar-total p { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }

/* O aceite. A caixa não estica junto com o texto de duas linhas ao lado, e o
   alinhamento é pelo topo — com `center` a marca fica no meio do parágrafo. */
.linha-aceite { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.linha-aceite input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--roxo-escuro); flex-shrink: 0; }
.linha-aceite span { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.linha-aceite b { font-size: inherit; color: var(--tinta); }

.assinar-enviar {
  justify-content: center; gap: 12px; padding: 15px 18px; font-size: 14.5px;
  background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo)); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--roxo-escuro) 60%, transparent);
}
.assinar-enviar svg { width: 18px; height: 18px; }

.assinar-rodape { display: flex; gap: 14px; align-items: flex-start; font-size: 12px; color: var(--cinza); line-height: 1.55; }
.assinar-rodape svg { width: 22px; height: 22px; flex: none; color: var(--tinta); margin-top: 2px; }
.assinar-rodape a { color: var(--roxo-escuro); }

.assinar-formas { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--borda-forte); }
.assinar-formas li {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 12px 6px; background: #fff; background: light-dark(#fff, #1b152c); border-radius: 10px; font-size: 11px; color: var(--tinta);
}
.assinar-formas svg { width: 24px; height: 24px; }
.assinar-formas .icone-forma-pagamento { width: 24px; height: 24px; object-fit: contain; }
.assinar-formas .pix-losango { width: 16px; height: 16px; margin: 4px 0; background: var(--tinta); box-shadow: inset 0 0 0 3px var(--tinta), inset 0 0 0 5px #fff; }

@media (max-width: 860px) {
  .assinar-grade { grid-template-columns: 1fr; }
  .assinar-resumo { position: static; }
  .assinar-seguro { position: static; transform: none; }
  .assinar .pagamento-topo { flex-direction: column; gap: 10px; }
}
/* No celular os cartões de perfil e de plano deitam: ícone à esquerda, texto
   à direita. Em pé, um embaixo do outro, as seis escolhas somavam mais de
   uma tela e meia de rolagem antes de chegar aos adicionais. */
@media (max-width: 600px) {
  body:has(.caixa.assinar) { padding: 16px 16px 32px; }
  .assinar .pagamento-logo { font-size: 30px; }
  .assinar .pagamento-marca { width: 46px; }
  .assinar .cabecalho { margin: 4px 0 2px; }
  .assinar .cabecalho h1 { font-size: 30px; line-height: 1.15; }
  .assinar .cabecalho p { font-size: 14px; }

  .assinar-etapas { gap: 8px; flex-wrap: wrap; row-gap: 6px; }
  .assinar-etapas li { font-size: 11px; gap: 6px; white-space: nowrap; }
  .assinar-etapas li + li::before { width: 10px; margin-right: 2px; }
  .assinar-etapas span { width: 24px; height: 24px; font-size: 12px; }

  .assinar-secao { padding: 16px 14px; gap: 14px; }
  .assinar-secao > header { gap: 12px; align-items: flex-start; }
  .assinar-numero { width: 32px; height: 32px; font-size: 15px; }
  .assinar-secao h2 { font-size: 17px; }
  .assinar-campos { grid-template-columns: 1fr; gap: 10px; }
  /* 16px: abaixo disso o Safari do iPhone dá zoom na página ao tocar no campo. */
  .assinar-campo input { font-size: 16px; }

  .assinar-cartoes { grid-template-columns: 1fr; gap: 10px; }
  .assinar-cartao {
    grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left;
    column-gap: 14px; row-gap: 2px; padding: 14px 44px 14px 14px;
  }
  .assinar-cartao .assinar-cartao-icone { grid-row: 1 / span 3; margin: 0; align-self: center; }
  .assinar-cartao b { font-size: 15px; }
  .assinar-cartao i { font-size: 14px; }
  .assinar-cartao:has(input:checked)::after { top: 50%; right: 14px; transform: translateY(-50%); }

  .opcao-adicional { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px; }
  .opcao-adicional .assinar-cartao-icone { width: 40px; height: 40px; grid-row: 1 / span 2; }
  .opcao-adicional .assinar-cartao-icone svg { width: 20px; height: 20px; }
  .adicional-preco { grid-column: 2; grid-row: 2; display: flex; gap: 6px; align-items: baseline; padding: 0; }
  .opcao-adicional .chave { grid-column: 3; grid-row: 1; }

  .assinar-resumo { padding: 18px 10px 10px; }
  .assinar-total b { font-size: 30px; }
}
/* O celular do Figma (390px): a marca à esquerda e o "Ambiente seguro" à
   direita, o passo a passo aberto na largura, e as escolhas com o preço na
   linha do nome e a bolinha do rádio à direita. */
@media (max-width: 600px) {
  .assinar .pagamento-topo { flex-direction: row; justify-content: space-between; gap: 10px; min-height: 40px; }
  .assinar .pagamento-logo { font-size: 22px; gap: 4px; }
  .assinar .pagamento-marca { width: 36px; }
  .assinar-seguro { position: static; transform: none; padding: 8px 13px; white-space: nowrap; }
  .assinar-etapas { justify-content: space-between; flex-wrap: nowrap; gap: 4px; width: 100%; }
  .assinar-etapas li { min-width: 0; font-size: 10.5px; gap: 5px; }
  .assinar-etapas li + li::before { width: 8px; margin-right: 0; }
  .assinar .cabecalho h1 { font-size: 26px; }
  .assinar .cabecalho h1 span { display: block; }
  .assinar .cabecalho p { font-size: 12.5px; line-height: 1.5; }
  .assinar-resumo h2 { font-size: 17px; }

  .assinar-secao { padding: 16px 14px; border-radius: 14px; }
  .assinar-secao > header { align-items: center; gap: 10px; }
  .assinar-numero { width: 26px; height: 26px; font-size: 13px; }
  .assinar-secao h2 { font-size: 17px; }
  .assinar-secao > header p { font-size: 11.5px; line-height: 1.4; }
  .assinar-campo { min-height: 46px; padding: 6px 14px; gap: 12px; border-radius: 8px; }
  .assinar-campo small { font-size: 10.5px; color: var(--cinza); }

  .assinar-cartao { border-radius: 10px; padding: 12px 46px 12px 12px; column-gap: 12px; }
  .assinar-cartao .assinar-cartao-icone { width: 36px; height: 36px; margin: 0; }
  .assinar-cartao .assinar-cartao-icone svg { width: 19px; height: 19px; }
  .assinar-cartao b { font-size: 14px; }
  .assinar-cartao small { font-size: 11.5px; line-height: 1.4; }
  /* Plano: o nome e o preço na mesma linha, a frase embaixo. */
  .opcao-plano { grid-template-columns: auto minmax(0, 1fr) auto; }
  .opcao-plano b { grid-column: 2; grid-row: 1; }
  .opcao-plano i { grid-column: 3; grid-row: 1; justify-self: end; font-size: 13px; }
  .opcao-plano small { grid-column: 2 / -1; grid-row: 2; }
  /* O rádio à direita: um círculo vazio, e no marcado o anel com o miolo. */
  .assinar-cartao::before {
    content: ""; position: absolute; top: 50%; right: 14px; width: 20px; height: 20px;
    transform: translateY(-50%); border: 1.5px solid var(--borda-forte); border-radius: 50%;
    background: #fff; background: light-dark(#fff, #1b152c);
  }
  .assinar-cartao:has(input:checked)::before { display: none; }
  .assinar-cartao:has(input:checked)::after {
    width: 20px; height: 20px; background: radial-gradient(circle, #fff 0 3.5px, var(--roxo-escuro) 4px); background: radial-gradient(circle, light-dark(#fff, #1b1430) 0 3.5px, var(--roxo-escuro) 4px);
  }
}

/* Em 320px, logo e selo somavam mais que a largura interna do cartão. Esta
   redução é exclusiva dos telefones estreitos; em 390px permanece a escala
   do layout de referência. */
@media (max-width: 360px) {
  .assinar .pagamento-topo { gap: 6px; }
  .assinar .pagamento-logo { flex: 1 1 auto; min-width: 0; font-size: 19px; }
  .assinar .pagamento-marca { width: 30px; flex: none; }
  .assinar-seguro { flex: none; gap: 5px; padding: 7px 8px; font-size: 10px; }
  .assinar-seguro svg { width: 14px; height: 14px; }

  .assinar-etapas { gap: 3px; }
  .assinar-etapas li { gap: 3px; font-size: 9px; }
  .assinar-etapas li + li::before { width: 5px; }
  .assinar-etapas span { width: 22px; height: 22px; font-size: 10px; }
}


/* ================= A página de pagamento =================
   Uma tela de uma coisa só, pagar: o plano em cima, as três formas em abas, e
   o "esperando" embaixo lembrando que ninguém precisa recarregar nada. Na
   largura de celular tudo vira uma coluna. */
/* As duas páginas começam no topo. O `place-items: center` do body serve à
   tela de acessos, que é curta; estas são mais altas que um celular, e
   centralizar na altura só as empurrava para baixo quando sobrava tela. */
body:has(.caixa.pagamento), body:has(.caixa.assinar) { place-items: start center; }
body:has(.caixa.pagamento) {
  background: radial-gradient(circle at -8% 62%, color-mix(in srgb, var(--roxo) 10%, transparent) 0 24%, transparent 24.2%),
    radial-gradient(circle at 108% 78%, color-mix(in srgb, var(--roxo) 8%, transparent) 0 22%, transparent 22.2%),
    radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--roxo) 8%, transparent), transparent 45%),
    #F8F6FE; background: radial-gradient(circle at -8% 62%, color-mix(in srgb, var(--roxo) 10%, transparent) 0 24%, transparent 24.2%),
    radial-gradient(circle at 108% 78%, color-mix(in srgb, var(--roxo) 8%, transparent) 0 22%, transparent 22.2%),
    radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--roxo) 8%, transparent), transparent 45%),
    light-dark(#F8F6FE, #221c34);
  padding-top: 28px;
}
.caixa.pagamento { max-width: 800px; display: grid; gap: 14px; }

.pagamento-topo { position: relative; display: flex; justify-content: center; align-items: center; min-height: 56px; }
.pagamento-seguro {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: 1px solid var(--borda-forte); border-radius: 999px;
  background: rgb(255 255 255 / .72); color: var(--tinta); font-size: 13px;
}
.pagamento-seguro svg { width: 18px; height: 18px; }
.pagamento-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 38px; font-weight: 600; letter-spacing: -.03em; color: var(--tinta);
}
.pagamento-marca { width: 60px; height: auto; }
.pagamento-voltar {
  position: absolute; right: -150px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border: 1px solid var(--roxo); border-radius: 999px;
  background: rgb(255 255 255 / .7); background: light-dark(rgb(255 255 255 / .7), #1b152cb2);
  font-size: 13.5px; font-weight: 600; color: var(--roxo-escuro); text-decoration: none;
  white-space: nowrap;
}
.pagamento-voltar:hover { background: var(--lavanda); }
.pagamento-voltar svg { width: 16px; height: 16px; }

.pagamento .cabecalho { margin: 4px 0 6px; }
.pagamento .cabecalho h1 { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--tinta); }
.pagamento .cabecalho h1 span {
  background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pagamento .cabecalho p { font-size: 15px; max-width: 380px; margin: 8px auto 0; line-height: 1.45; }
/* O título curto do celular é escuro; o degradê é só do destaque do título longo. */
.pagamento .cabecalho h1 .so-no-estreito { background: none; color: var(--tinta); }
.pagamento-etapas .concluida { color: var(--tinta); font-weight: 500; }
.pagamento-etapas .concluida span { background: var(--roxo-forte); border-color: var(--roxo-forte); color: #fff; }
.pagamento-etapas .concluida svg { width: 15px; height: 15px; }

.pagamento-corpo { display: grid; gap: 10px; }

/* Os cartões brancos, todos com a mesma moldura. */
.pagamento-plano, .pagamento-formas .pagamento-painel, .pagamento-esperando, .pagamento-abas, .pagamento-ok {
  background: rgb(255 255 255 / .85); background: light-dark(rgb(255 255 255 / .85), #1b152cd9);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

.pagamento-plano { display: grid; grid-template-columns: auto minmax(250px, 1fr) auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 22px 36px; }
.pagamento-plano-icone {
  width: 80px; height: 80px; border-radius: 16px; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro);
}
.pagamento-plano-icone svg { width: 40px; height: 40px; }
.pagamento-plano-texto { display: grid; gap: 2px; }
.pagamento-plano-nome { font-size: 22px; font-weight: 600; color: var(--tinta); }
.pagamento-plano-preco { white-space: nowrap; font-size: 27px; font-weight: 700; color: var(--roxo-escuro); line-height: 1.15; }
.pagamento-plano-preco small { font-size: 19px; font-weight: 600; }
.pagamento-plano .desc { font-size: 13px; color: var(--cinza); line-height: 1.45; margin-top: 4px; }
.pagamento-inclui {
  list-style: none; display: grid; gap: 8px; padding-left: 30px;
  border-left: 1px solid var(--borda-forte); font-size: 13px; color: var(--cinza);
}
.pagamento-inclui li { display: flex; align-items: center; gap: 12px; }
.pagamento-inclui svg { width: 17px; height: 17px; flex: none; color: #fff; fill: var(--roxo-escuro); }

.pagamento-subtitulo { text-align: center; font-size: 22px; font-weight: 600; color: var(--tinta); margin: 12px 0 4px; letter-spacing: -.01em; }

/* ---- As abas: rádios. O painel da marcada aparece, e só ele. ---- */
.pagamento-formas { display: grid; gap: 8px; }
.pagamento-abas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; }
.pagamento-abas input { position: absolute; opacity: 0; pointer-events: none; }
.pagamento-abas label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 10px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--tinta);
  border-bottom: 3px solid transparent;
}
.pagamento-abas label svg { width: 24px; height: 24px; }
.pagamento-abas .icone-forma-pagamento { width: 24px; height: 24px; object-fit: contain; flex: none; }
.pagamento-abas input:checked + label {
  background: var(--lavanda); color: var(--roxo-escuro); font-weight: 600;
  border-bottom-color: var(--roxo-escuro);
}
.pagamento-abas input:focus-visible + label { outline: 2px solid var(--roxo); outline-offset: 2px; }

.pagamento-painel { display: none; padding: 22px 26px; }
.pagamento-formas:has(#forma-pix:checked) .painel-pix,
.pagamento-formas:has(#forma-cartao:checked) .painel-cartao { display: block; }

/* O losango do Pix, desenhado em CSS: quatro cantos arredondados girados. */
.pix-losango {
  width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg);
  background: #32BCAD; display: inline-block; flex: none;
  box-shadow: inset 0 0 0 3px #32BCAD, inset 0 0 0 5px #fff;
}
.pagamento-abas input:checked + label .pix-losango { background: var(--roxo-escuro); box-shadow: inset 0 0 0 3px var(--roxo-escuro), inset 0 0 0 5px var(--lavanda); }

.pix-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.pix-codigo { display: grid; justify-items: center; gap: 10px; text-align: center; margin: 0; }
.pix-qr {
  width: 200px; height: 200px; padding: 10px; background: #fff; background: light-dark(#fff, #1b152c);
  border: 1px solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-cartao);
}
.pix-codigo figcaption { font-size: 12.5px; color: var(--cinza); line-height: 1.4; max-width: 230px; }
.pix-codigo figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: 2px; }

.pix-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 300; color: #6B7280; color: light-dark(#6B7280, #a6aebd); letter-spacing: -.02em; }
.pix-passos h3 { font-size: 23px; font-weight: 600; color: var(--tinta); margin: 2px 0 12px; letter-spacing: -.02em; }
.pix-passos ol { list-style: none; counter-reset: passo; display: grid; gap: 12px; padding: 0; }
.pix-passos li {
  counter-increment: passo; position: relative; padding-left: 62px; min-height: 42px;
  font-size: 13px; color: var(--cinza); line-height: 1.4;
}
.pix-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro); font-weight: 600; font-size: 16px;
}
/* Os pedaços de texto que mudam com a largura: "ao lado" só é verdade quando
   o QR Code está ao lado. */
.so-no-estreito { display: none; }
.pix-passos li b { display: block; font-weight: 500; font-size: 14px; color: var(--tinta); }

.pix-copia-cola { margin-top: 18px; background: color-mix(in srgb, var(--lavanda) 60%, white); background: color-mix(in srgb, var(--lavanda) 60%, light-dark(white, #1b152c)); border-radius: 12px; padding: 12px 16px 14px; display: grid; gap: 8px; }
.pix-copia-cola label { font-size: 13.5px; font-weight: 500; color: var(--tinta); }
.pix-copia-linha { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.pix-copia-linha input {
  font-size: 14px; color: var(--cinza); text-overflow: ellipsis;
  background: #fff; background: light-dark(#fff, #1b152c); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 10px 16px; min-width: 0;
}
.pix-copiar {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 26px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--lavanda); color: var(--roxo-escuro); font: 600 14px var(--fonte);
}
.pix-copiar:hover { background: color-mix(in srgb, var(--lavanda) 80%, var(--roxo)); }
.pix-copiar svg { width: 20px; height: 20px; }

/* O Pix sem QR Code: um texto e o botão para a fatura. */
.pagamento-fatura { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 14px 0; }
.pagamento-fatura h3 { font-size: 20px; font-weight: 600; color: var(--tinta); }
.pagamento-fatura .desc { font-size: 13.5px; color: var(--cinza); line-height: 1.5; max-width: 440px; }
/* `border-box` porque o botão é <a>, e <a> soma o padding à largura. */
.pix-fatura { justify-content: center; box-sizing: border-box; text-decoration: none; min-width: 220px; }

.pagamento-esperando { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 14px 26px; }
.pagamento-esperando-icone {
  width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center;
  background: var(--lavanda); color: var(--roxo-escuro);
}
.pagamento-esperando-icone svg { width: 44px; height: 44px; stroke-width: 2.2; }
.pagamento-esperando p { font-size: 13px; color: var(--cinza); line-height: 1.5; }
.pagamento-esperando p b { display: block; font-size: 16px; font-weight: 600; color: var(--tinta); }
.pagamento-girando {
  width: 26px; height: 26px; border-radius: 50%; margin-right: 8px;
  border: 2.5px solid var(--lavanda); border-top-color: var(--roxo);
  animation: pagamento-gira 1s linear infinite;
}
@keyframes pagamento-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pagamento-girando { animation: none; } }

.pagamento-confianca {
  list-style: none; display: grid; grid-template-columns: repeat(3, auto); justify-content: center;
  padding: 10px 0 0; margin: 0 -80px;
}
.pagamento-confianca span { white-space: nowrap; }
.pagamento-confianca li { display: flex; align-items: center; gap: 14px; padding: 0 32px; font-size: 11.5px; color: var(--cinza); }
.pagamento-confianca li + li { border-left: 1px solid var(--borda-forte); }
.pagamento-confianca svg { width: 26px; height: 26px; color: var(--roxo-escuro); flex: none; }
.pagamento-confianca b { display: block; font-size: 12px; font-weight: 500; color: var(--tinta); }

.pagamento-ok { display: grid; gap: 12px; text-align: center; justify-items: center; padding: 28px; }
.pagamento-ok-titulo { font-size: 20px !important; }
.pagamento-etapas[hidden] { display: none; }
.pagamento [data-pagamento-target="confirmado"]:not([hidden]) { display: grid; gap: 16px; }
/* Só do celular (ver _confirmado): selo, e-mail em pílula e o cartão do plano. */
.pagamento-ok-selo { display: none; }
.pagamento-ok-email { display: none; }
.pagamento-ok-plano { display: none; }
.pagamento-ok .desc { font-size: 13.5px; color: var(--cinza); line-height: 1.55; overflow-wrap: anywhere; max-width: 480px; }

/* O botão de voltar sai da lateral quando a tela não tem lateral. */
@media (max-width: 1120px) {
  .pagamento-topo { flex-direction: column; gap: 12px; }
  .pagamento-voltar { position: static; transform: none; }
}
@media (max-width: 720px) {
  body:has(.caixa.pagamento) { padding: 18px 16px 34px; }
  .caixa.pagamento { max-width: 520px; gap: 18px; }
  /* A marca à esquerda e o "Ambiente seguro" à direita, na mesma linha. */
  .pagamento .pagamento-topo { flex-direction: row; justify-content: space-between; gap: 10px; min-height: 40px; }
  .pagamento-logo { font-size: 22px; gap: 4px; }
  .pagamento-marca { width: 36px; }
  .pagamento-seguro { position: static; transform: none; padding: 8px 13px; font-size: 12px; white-space: nowrap; }
  .pagamento-seguro svg { width: 15px; height: 15px; }
  .pagamento-etapas { justify-content: flex-start; gap: 7px; flex-wrap: nowrap; overflow: hidden; }
  .pagamento-etapas li { font-size: 11px; gap: 6px; white-space: nowrap; }
  .pagamento-etapas li + li::before { width: 12px; margin-right: 1px; }
  .pagamento-etapas span { width: 27px; height: 27px; font-size: 12px; }
  .pagamento .cabecalho { margin: 8px 0 18px; }
  .pagamento .cabecalho h1 { font-size: 24px; }
  .pagamento .cabecalho p { max-width: 430px; font-size: 14px; line-height: 1.5; margin-top: 8px; }
  .pagamento-corpo { gap: 16px; }
  .pagamento-plano { grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 20px; gap: 14px; border-radius: 14px; }
  .pagamento-plano-icone { width: 48px; height: 48px; border-radius: 12px; }
  .pagamento-plano-icone svg { width: 25px; height: 25px; }
  .pagamento-plano-nome { font-size: 14px; }
  .pagamento-plano-preco { grid-column: 3; grid-row: 1; align-self: center; font-size: 16px; }
  .pagamento-plano .desc { font-size: 12px; margin-top: 0; }
  .pagamento-inclui { display: none; }
  .pagamento-subtitulo { font-size: 22px; margin: 10px 0 2px; }
  .pagamento-abas { padding: 5px; background: var(--lavanda); border: 0; box-shadow: none; }
  .pagamento-abas label { flex-direction: row; gap: 8px; font-size: 14px; padding: 14px 6px; white-space: nowrap; border: 0; }
  .pagamento-abas input:checked + label { background: #fff; background: light-dark(#fff, #1b1430); border-bottom-color: transparent; box-shadow: var(--sombra-cartao); }
  .pagamento .so-no-largo { display: none; }
  .pagamento .so-no-estreito { display: inline; }
  .pix-copia-linha input { font-size: 16px; }
  .pagamento-painel { padding: 22px 20px; }
  /* No celular quem paga está com o banco no MESMO aparelho: apontar a
     câmera para a própria tela não dá. O copia e cola sobe para logo depois
     dos passos, e o QR Code fica por último, para quem abriu no computador
     de outra pessoa ou quer pagar de outro telefone. */
  .pagamento-formas:has(#forma-pix:checked) .painel-pix { display: flex; flex-direction: column; gap: 20px; }
  .pix-colunas { display: contents; }
  .pix-passos { display: none; }
  .pix-codigo { order: 1; }
  .pix-codigo::before { content: "Escaneie o QR Code no app do seu banco"; color: var(--tinta); font-size: 18px; font-weight: 600; }
  .pix-qr { width: min(250px, 74vw); height: min(250px, 74vw); border-style: dashed; box-shadow: none; }
  .pix-codigo figcaption { display: none; }
  .pix-copia-cola { order: 2; margin-top: 0; padding: 0; background: transparent; }
  .pix-copia-cola label { text-align: center; color: var(--cinza); font-size: 15px; font-weight: 400; }
  .pix-copia-cola label::first-letter { text-transform: lowercase; }
  .pix-copia-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 0; border: 1px solid var(--borda-forte); border-radius: 12px; padding: 5px; background: var(--lavanda); }
  .pix-copia-linha input { border: 0; background: transparent; padding: 10px 12px; }
  .pix-copiar { padding: 11px 16px; color: #fff; background: var(--roxo-forte); }
  .pix-copiar span { font-size: 0; }
  .pix-copiar span::after { content: "Copiar"; font-size: 14px; }
  .pagamento-esperando { grid-template-columns: auto 1fr; padding: 16px 18px; background: var(--lavanda); box-shadow: none; border: 0; }
  .pagamento-esperando-icone { width: auto; height: auto; background: transparent; }
  .pagamento-esperando-icone svg { width: 26px; height: 26px; }
  .pagamento-esperando p b { color: var(--roxo-escuro); }
  .pagamento-girando { display: none; }
  .pagamento-confianca { grid-template-columns: 1fr; gap: 12px; margin: 0; justify-content: start; padding: 4px 2px 0; }
  .pagamento-confianca li { padding: 0; }
  .pagamento-confianca span { white-space: normal; }
  .pagamento-confianca li + li { border-left: 0; }
  .pagamento-confianca li:not(:first-child) { display: none; }
  .pagamento-confianca li:first-child b { display: none; }
  .pagamento-confianca li:first-child span { font-size: 0; }
  .pagamento-confianca li:first-child span::after { content: "Pagamento seguro. Depois da confirmação, o acesso chega no seu e-mail."; font-size: 13px; line-height: 1.5; }
}

/* Telefones estreitos: logo, selo e trilha precisam caber sem criar rolagem
   horizontal. A redução é só de escala; a hierarquia e os três passos ficam
   visíveis por inteiro. */
@media (max-width: 400px) {
  body:has(.caixa.pagamento) { padding-inline: 14px; overflow-x: hidden; }
  .pagamento .pagamento-topo { gap: 16px; justify-content: space-between; }
  .pagamento-logo { gap: 4px; min-width: 0; font-size: 20px; }
  .pagamento-marca { width: 31px; }
  .pagamento-seguro {
    position: static; transform: none; flex: none; gap: 6px;
    padding: 7px 9px; font-size: 10px;
  }
  .pagamento-seguro svg { width: 14px; height: 14px; }

  .pagamento-etapas { width: 100%; gap: 4px; justify-content: space-between; }
  .pagamento-etapas li { min-width: 0; gap: 4px; font-size: 10px; }
  .pagamento-etapas li + li::before { width: 8px; margin-right: 0; }
  .pagamento-etapas span { width: 25px; height: 25px; flex: none; }

  .pagamento .cabecalho h1 { font-size: 32px; }
  .pagamento .cabecalho p { font-size: 14px; }
  .pagamento-plano { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 12px; }
  .pagamento-plano-preco { grid-column: 2; grid-row: 2; justify-self: start; font-size: 20px; }
  .pagamento-plano-nome { font-size: 14px; }
  .pagamento-plano .desc { font-size: 12px; }
  .pagamento-abas label { font-size: 13px; }
  .pagamento-painel { padding: 20px 14px; }
  .pix-codigo::before { font-size: 16px; }
  .pix-copia-linha input { font-size: 14px; }
  .pix-copiar { padding-inline: 12px; }
}

/* Celular de 390px (o do desenho do Figma): o bloco de cima, feito para telas de
   320 a 360, deixaria o título grande e o preço embaixo do plano. Daqui a 361px
   volta a medida do desenho. */
@media (min-width: 361px) and (max-width: 400px) {
  .pagamento-logo { font-size: 22px; gap: 4px; }
  .pagamento .cabecalho h1 { font-size: 24px; }
  .pagamento-plano { grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 20px; gap: 14px; }
  .pagamento-plano-preco { grid-column: 3; grid-row: 1; justify-self: auto; font-size: 16px; }
  .pagamento-abas label { font-size: 14px; }
}

/* A confirmação no celular: selo roxo, título, o e-mail numa pílula e o plano. */
@media (max-width: 720px) {
  .pagamento-ok { gap: 14px; padding: 26px 20px; border-radius: 14px; border-color: var(--borda); }
  .pagamento .pagamento-ok .pagamento-ok-selo {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    background: var(--roxo-forte); color: #fff;
  }
  .pagamento-ok-selo svg { width: 34px; height: 34px; }
  .pagamento-ok-selo circle { display: none; }
  .pagamento-ok-titulo { font-size: 18px !important; line-height: 1.3; max-width: 300px; }
  .pagamento .pagamento-ok .pagamento-ok-email {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    padding: 9px 16px; border-radius: 999px; background: var(--lavanda);
    color: var(--roxo-escuro); font-size: 13px;
  }
  .pagamento-ok-email svg { width: 17px; height: 17px; flex: none; }
  .pagamento-ok-email span { overflow-wrap: anywhere; }
  .pagamento-ok .desc { font-size: 13px; }
  .pagamento .pagamento-ok-plano { display: block; }
}

/* ---- O cartão, digitado aqui: os campos são os do /assinar. ---- */
.cartao-form { display: grid; gap: 16px; }
.cartao-topo { display: grid; gap: 6px; text-align: center; justify-items: center; }
.cartao-topo h3 { font-size: 20px; font-weight: 600; color: var(--tinta); }
.cartao-topo .desc { font-size: 13.5px; color: var(--cinza); line-height: 1.5; max-width: 460px; }
.cartao-largo { grid-column: 1 / -1; }
.cartao-campos .assinar-campo > svg { color: var(--roxo-escuro); }
.cartao-pagar { justify-self: center; gap: 10px; padding: 14px 28px; font-size: 14.5px;
  background: linear-gradient(90deg, var(--roxo-escuro), var(--roxo));
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--roxo-escuro) 60%, transparent); }
.cartao-pagar svg { width: 18px; height: 18px; }
.cartao-pagar[disabled] { opacity: .7; cursor: progress; }
.cartao-nota { text-align: center; font-size: 12px; color: var(--cinza); line-height: 1.5; }

/* O motivo da recusa fica DENTRO da aba, onde a pessoa está olhando, e não
   no topo da página — de lá ela não veria. */
.cartao-recado {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px;
  background: var(--lavanda); color: var(--tinta); font-size: 13px; line-height: 1.5;
}
.cartao-recado.erro { background: #FEF2F2; background: light-dark(#FEF2F2, #241d35); color: #991B1B; color: light-dark(#991B1B, #fea499); }
.cartao-recado svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cartao-recado span { display: grid; gap: 2px; }
.cartao-recado b { font-weight: 600; }
.cartao-recado:not(.erro) b { display: none; }
.cartao-recado.erro { border: 1px solid #F3C6C0; border: 1px solid light-dark(#F3C6C0, #5b2b36); }


@media (max-width: 720px) {
  .cartao-campos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cartao-campos .assinar-campo { padding: 8px 12px; gap: 10px; border-radius: 12px; }
  .cartao-campos .assinar-campo small { font-size: 11px; color: var(--cinza); }
  /* 16px: abaixo disso o iPhone dá zoom ao tocar no campo. */
  .cartao-campos .assinar-campo input { font-size: 16px; }
  .cartao-topo { display: none; }
  .cartao-pagar { justify-self: stretch; }
  .cartao-nota { font-size: 11.5px; }
  /* O "esperando" é do Pix. No cartão ele só aparece se houver um recado da
     análise do banco (relógio), que é quando a página de fato espera. */
  .pagamento-corpo:has(#forma-cartao:checked):not(:has(.cartao-recado)) .pagamento-esperando { display: none; }
}

/* ================= Páginas legais =================
   Privacidade, termos e exclusão de dados. Texto longo, então a medida da linha
   é a de leitura (≈ 70 caracteres), e não a da página de pagamento. */
.caixa.legal { max-width: 780px; display: grid; gap: 18px; }
.legal-topo { display: grid; justify-items: center; gap: 10px; text-align: center; }
.legal-logo { font-size: 30px; }
.legal-topo h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--tinta); margin: 6px 0 0; }
.legal-data { font-size: 13px; color: var(--cinza); margin: 0; }
.legal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.legal-nav a {
  padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px;
  font-size: 13px; color: var(--cinza); text-decoration: none; background: var(--superficie);
}
.legal-nav a:hover { border-color: var(--roxo-claro); color: var(--roxo-escuro); }
.legal-nav a[aria-current="page"] { background: var(--roxo-forte); border-color: var(--roxo-forte); color: #fff; }
.legal-texto {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao); padding: 32px 40px;
  font-size: 15px; line-height: 1.65; color: var(--tinta);
}
.legal-texto h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 28px 0 8px; }
.legal-texto p { margin: 0 0 12px; }
.legal-texto ul, .legal-texto ol { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.legal-texto a { color: var(--roxo-escuro); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal-lead { font-size: 16px; color: var(--cinza); padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
@media (max-width: 720px) {
  .legal-texto { padding: 22px 18px; font-size: 14px; }
  .legal-topo h1 { font-size: 24px; }
}

/* O "Voltar" do topo do /assinar: só no celular, no lugar da marca (pedido
   dela, 16/10). O mesmo desenho do "Voltar" da Avaliação (.entrada-botao). */
.assinar-voltar { display: none; }
@media (max-width: 600px) {
  .assinar-voltar {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    min-height: 40px; padding: 0 14px;
    border: 1px solid var(--borda-forte); border-radius: 10px;
    color: var(--tinta); background: var(--superficie);
    font-size: 14px; font-weight: 500; text-decoration: none;
  }
  .assinar-voltar svg { width: 18px; height: 18px; }
  .assinar-voltar:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
  .assinar .pagamento-topo .pagamento-logo { display: none; }
}