/* 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. */

body { display: grid; place-items: center; padding: 48px 24px; }
.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 h1 { font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.cabecalho h1 span { color: var(--roxo); }
.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 porta de entrada da assinatura ---------- */

/* Os três perfis que a porta vende. Rádio e não <select>: são três, cabem na
   tela, e escolher num toque vale mais que a lista fechada — esta tela é o
   último passo antes de a pessoa pagar. */
.escolha-perfil { border: 0; padding: 0; margin: 0; display: grid; gap: 7px; }
.escolha-perfil legend { font-size: 12.5px; color: var(--cinza); padding: 0; margin-bottom: 2px; }
.opcao-perfil {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 10px; padding: 10px 12px;
}
.opcao-perfil:has(input:checked) {
  border-color: var(--roxo);
  background: color-mix(in srgb, var(--roxo) 6%, transparent);
}
.opcao-perfil:has(input:focus-visible) { outline: 2px solid var(--roxo); outline-offset: 1px; }
.opcao-perfil input { width: auto; accent-color: var(--roxo); margin: 0; }
.opcao-perfil > span { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.opcao-perfil b { font-size: 14px; font-weight: 600; }
.opcao-perfil i { font-style: normal; font-size: 12.5px; color: var(--cinza); margin-left: auto; }

/* O aceite. A caixa não estica junto com o texto de três 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: 10px; cursor: pointer; }
.linha-aceite input { width: auto; margin: 2px 0 0; accent-color: var(--roxo); 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); }

/* 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 escolha do plano, na tela de assinar.
   O preço aparece uma vez no topo e uma nos termos, e os dois acompanham o que
   está marcado — antes o topo vinha da URL e o cobrado do formulário. */
.escolha-plano { border: 0; padding: 0; margin: 4px 0 0; }
.escolha-plano legend { font-size: 13px; font-weight: 500; color: var(--cinza); padding: 0 0 8px; }

.opcao-plano {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--borda-forte); border-radius: 12px;
  cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.opcao-plano:hover { border-color: var(--roxo-claro); }
.opcao-plano:has(input:checked) { border-color: var(--roxo); background: #FAF7FF; }
/* `width: auto` porque a regra geral de formulário desta tela dá `width: 100%`
   a todo input, e num flex isso empurrava o texto do plano para fora do card.
   A opção de perfil, logo acima, já desfazia isso — esta tinha ficado de fora. */
.opcao-plano input { width: auto; margin-top: 3px; accent-color: var(--roxo-escuro); flex-shrink: 0; }
/* `minmax(0, 1fr)`: sem isso a coluna do grid nunca encolhe abaixo do tamanho
   natural do texto, e a descrição do plano vaza no celular. */
.opcao-plano span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.opcao-plano b { font-size: 15px; }
.opcao-plano i { font-style: normal; font-weight: 600; color: var(--roxo-escuro); font-size: 14px; }
.opcao-plano small { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }

.planos-do-perfil[hidden] { display: none; }

/* ================= Os adicionais e a conta =================

   O adicional empresta a caixa do plano — mesma altura de linha, mesma
   margem, mesmo jeito de marcar — porque é a mesma decisão: escolher o que
   comprar. Inventar um cartão diferente para ele faria parecer outra coisa.

   O que muda é a cor do marcado: âmbar em vez de roxo. Plano é um; adicional
   é quantos ela quiser, e a cor diferente diz isso antes do texto. */
.escolha-adicional { border: 0; padding: 0; margin: 16px 0 0; }
.escolha-adicional legend { font-size: 13px; font-weight: 500; color: var(--cinza); padding: 0 0 2px; }
.escolha-adicional .desc { font-size: 12.5px; color: var(--cinza); margin: 0 0 8px; }

.opcao-adicional {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--borda-forte); border-radius: 12px;
  cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.opcao-adicional:hover { border-color: #F0B45E; }
.opcao-adicional:has(input:checked) { border-color: #D97706; background: #FFFBF3; }
.opcao-adicional input { width: auto; margin-top: 3px; accent-color: #B45309; flex-shrink: 0; }
.opcao-adicional span { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.opcao-adicional b { font-size: 15px; }
.opcao-adicional i { font-style: normal; font-weight: 600; color: #B45309; font-size: 14px; }
.opcao-adicional small { font-size: 12.5px; color: var(--cinza); line-height: 1.5; }
.opcao-adicional[hidden] { display: none; }

/* A conta aberta. Um total sozinho obriga a confiar; a conta linha a linha
   deixa conferir — e somar plano, mensalidade do adicional e taxa única de
   cabeça é exatamente o tipo de conta que se faz errado. */
.conta-do-mes {
  margin: 16px 0 4px; padding: 12px 14px;
  border: 1px solid var(--borda-forte); border-radius: 12px; background: var(--fundo, #FAFAFB);
}
.linha-conta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13.5px; padding: 3px 0; color: var(--cinza);
}
.linha-conta b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto, #1A1A1F); }
.linha-conta[hidden] { display: none; }
.linha-conta.total {
  border-top: 1px solid var(--borda-forte); margin-top: 6px; padding-top: 8px;
  font-size: 15px; font-weight: 600; color: var(--texto, #1A1A1F);
}
.linha-conta.total b { font-size: 17px; color: var(--roxo-escuro); }
/* 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. */
.linha-conta.agora b { color: #B45309; }