/*!
 * Kit de Assinatura Neurion · v1.4.1 · 01/10/2026
 * Telas de cadastro e pagamento do Neurion Pulse e do Neurion Core.
 * Este arquivo é IDÊNTICO nos dois sistemas: mude aqui, copie para o outro
 * e suba a versão. Padrão documentado no vault:
 * 30 - Neurion Tecnologias em Saúde/38 - Produtos/Padrão de Cadastro e Assinatura.md
 */

/* ── Identidade (mesma de neurion.com.br) ─────────────────────────────── */
:root {
  --ass-roxo: #572d84;
  --ass-roxo-escuro: #46246b;
  --ass-roxo-profundo: #22103f;   /* "breu" do site */
  --ass-roxo-claro: #b98ce0;
  --ass-roxo-fundo: #faf6fe;
  --ass-roxo-anel: #f1e6fb;
  --ass-magenta: #ad36e4;
  --ass-tinta: #170e21;
  --ass-texto: #4b3d59;
  --ass-texto-suave: #5a4c67;
  --ass-cinza: #75668a;
  --ass-cinza-claro: #8a7b9c;
  --ass-linha: #ebe4f3;
  --ass-verde: #1d7a4a;
  --ass-verde-fundo: #effaf4;
  --ass-erro: #a03f24;
  --ass-erro-fundo: #fdf1ee;
  --ass-erro-borda: #e8ab9d;
  --ass-aviso: #9a6a12;
  --ass-aviso-fundo: #fdf7e8;
  --ass-raio-campo: 10px;
  --ass-raio-cartao: 18px;
  --ass-fonte: "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[x-cloak] { display: none !important; }

/* ── Base ─────────────────────────────────────────────────────────────── */
body.assinatura {
  margin: 0; background: #fff; color: var(--ass-tinta);
  font-family: var(--ass-fonte); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.assinatura *, .assinatura *::before, .assinatura *::after { box-sizing: border-box; }
.assinatura h1, .assinatura h2, .assinatura h3, .assinatura p, .assinatura ul, .assinatura fieldset { margin: 0; }
.assinatura ul { padding: 0; list-style: none; }
.assinatura fieldset { border: 0; padding: 0; min-width: 0; }
.assinatura legend { padding: 0; }
.assinatura a { color: inherit; }
.assinatura img { max-width: 100%; display: block; }
.assinatura button { font: inherit; cursor: pointer; }
.assinatura input, .assinatura select, .assinatura textarea { font: inherit; color: inherit; }

/* ── Moldura: topo, conteúdo, rodapé ──────────────────────────────────── */
.ass-conteiner { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.ass-topo { border-bottom: 1px solid var(--ass-linha); }
.ass-topo .ass-conteiner { height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ass-topo img { height: 2rem; width: auto; }
.ass-topo-acao { font-size: .875rem; color: var(--ass-cinza); text-align: right; }
.ass-principal { padding: 2.5rem 0 3.5rem; }
.ass-rodape { border-top: 1px solid var(--ass-linha); }
.ass-rodape .ass-conteiner { padding-top: 1.5rem; padding-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .875rem; color: var(--ass-cinza-claro); }
.ass-rodape a { text-decoration: none; }
.ass-rodape a:hover { text-decoration: underline; }
@media (min-width: 768px) {
  .ass-conteiner { padding: 0 2rem; }
  .ass-principal { padding: 3.5rem 0 4.5rem; }
}

/* Grade: resumo à esquerda (5/12), formulário à direita (7/12) */
.ass-grade { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .ass-grade { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
  .ass-lateral { position: sticky; top: 2rem; }
}
.ass-centro { max-width: 36rem; margin: 0 auto; text-align: center; }

/* ── Tipografia ───────────────────────────────────────────────────────── */
.ass-sobretitulo { font-size: .875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ass-roxo); }
.ass-titulo { margin-top: .75rem !important; font-size: 2.25rem; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.ass-titulo strong { font-weight: 500; color: var(--ass-roxo); }
@media (min-width: 768px) { .ass-titulo { font-size: 3rem; } .ass-centro .ass-titulo { font-size: 2.25rem; } }
.ass-lead { margin-top: 1.25rem !important; font-size: 1.125rem; font-weight: 300; color: var(--ass-texto-suave); }
.ass-centro .ass-lead { font-size: 1rem; }
.ass-pequeno { font-size: .875rem; }
.ass-mini { font-size: .75rem; }
.ass-suave { color: var(--ass-cinza); }
.ass-roxo { color: var(--ass-roxo); }
.ass-link { color: var(--ass-roxo); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.ass-link-discreto { background: none; border: 0; padding: 0; font-size: .875rem; color: var(--ass-cinza-claro); text-decoration: underline; }

/* ── Cartão ───────────────────────────────────────────────────────────── */
.ass-cartao { background: #fff; border: 1px solid var(--ass-linha); border-radius: var(--ass-raio-cartao); padding: 1.5rem; }
@media (min-width: 768px) { .ass-cartao-folgado { padding: 2rem; } }
.ass-mt { margin-top: 2rem !important; }
.ass-mt-pequena { margin-top: 1.25rem !important; }

/* Preço */
.ass-preco { display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap; }
.ass-preco .moeda { font-size: 1.125rem; color: var(--ass-cinza); }
.ass-preco .valor { font-size: 3rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.ass-preco .periodo { color: var(--ass-cinza); }
.ass-preco-riscado { color: var(--ass-cinza-claro); text-decoration: line-through; font-size: .9375rem; margin-right: .25rem; }
.ass-preco-legenda { margin-top: .25rem !important; font-size: .875rem; color: var(--ass-cinza); }

/* Lista com ✓ */
.ass-lista-check { margin-top: 1.5rem !important; display: grid; gap: .75rem; font-size: .9375rem; color: var(--ass-texto); }
.ass-lista-check li { display: flex; gap: .75rem; }
.ass-lista-check li::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .125rem;
  background: var(--ass-roxo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bloco de notas no fim do resumo */
.ass-notas { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--ass-linha); display: grid; gap: .5rem; font-size: .875rem; color: var(--ass-texto-suave); }
.ass-notas strong { font-weight: 500; color: var(--ass-tinta); }

/* ── Etapas (1 Sua conta · 2 Pagamento) ───────────────────────────────── */
.ass-etapas { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--ass-cinza-claro); margin-bottom: 1.5rem !important; }
.ass-etapa { display: inline-flex; align-items: center; gap: .5rem; }
.ass-etapa .num { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 500; border: 1px solid var(--ass-linha); }
.ass-etapa.atual { color: var(--ass-roxo); font-weight: 500; }
.ass-etapa.atual .num { background: var(--ass-roxo); border-color: var(--ass-roxo); color: #fff; }
.ass-etapa.feita .num { background: var(--ass-roxo-anel); border-color: var(--ass-roxo-anel); color: var(--ass-roxo); }
.ass-etapas .traco { flex: 0 0 1.5rem; height: 1px; background: var(--ass-linha); }

/* ── Formulário ───────────────────────────────────────────────────────── */
.ass-form { display: grid; gap: 2rem; }
.ass-grupo { display: grid; gap: 1rem; }
.ass-legenda { font-size: 1.125rem; font-weight: 500; margin-bottom: 1rem; }
.ass-linha-2, .ass-linha-3, .ass-linha-cartao { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .ass-linha-2 { grid-template-columns: 1fr 1fr; }
  .ass-linha-3 { grid-template-columns: 1fr 1fr 1fr; }
  .ass-linha-cartao { grid-template-columns: 2fr 1fr; }
}
.ass-linha-validade { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr; }
.ass-rotulo { display: block; margin-bottom: .375rem; font-size: .8125rem; font-weight: 500; color: var(--ass-texto); }
.ass-rotulo .opcional { font-weight: 400; color: #9a8bab; }
.ass-campo {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--ass-linha); border-radius: var(--ass-raio-campo);
  font-size: .9375rem; background: #fff; transition: border-color .25s, box-shadow .25s; appearance: none;
}
.ass-campo::placeholder { color: #b3a7c2; }
.ass-campo:focus { outline: none; border-color: var(--ass-roxo-claro); box-shadow: 0 0 0 3px var(--ass-roxo-anel); }
.ass-campo.invalido { border-color: #d0643f; }
.ass-campo[readonly] { background: #fbfafc; }
.ass-campo.maiusculas { text-transform: uppercase; }
.ass-campo.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.ass-ajuda { margin-top: .375rem !important; font-size: .75rem; color: var(--ass-cinza-claro); }
.ass-ajuda.aviso { color: var(--ass-aviso); }
.ass-ajuda.erro { color: var(--ass-erro); }
.ass-ajuda.ok { color: var(--ass-verde); }

/* Aceite dos termos */
.ass-aceite { display: flex; gap: .75rem; font-size: .875rem; color: var(--ass-texto-suave); cursor: pointer; }
.ass-aceite input { margin-top: .2rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--ass-roxo); }

/* ── Avisos ───────────────────────────────────────────────────────────── */
.ass-alerta { border-radius: 12px; padding: 1rem; font-size: .875rem; }
.ass-alerta ul { margin-top: .5rem !important; padding-left: 1.25rem; list-style: disc; display: grid; gap: .25rem; }
.ass-alerta .titulo { font-weight: 500; }
.ass-alerta.erro { background: var(--ass-erro-fundo); border: 1px solid var(--ass-erro-borda); color: var(--ass-erro); }
.ass-alerta.sucesso { background: var(--ass-verde-fundo); border: 1px solid #bfe3cf; color: #1f5f3d; font-weight: 500; }
.ass-alerta.aviso { background: var(--ass-aviso-fundo); border: 1px solid #f0dca8; color: #7a5410; }
.ass-alerta.info { background: var(--ass-roxo-fundo); color: var(--ass-texto); }

/* ── Abas cartão / Pix ────────────────────────────────────────────────── */
.ass-abas { display: flex; gap: .75rem; }
.ass-aba {
  flex: 1; padding: .75rem; border: 1px solid var(--ass-linha); border-radius: var(--ass-raio-campo);
  font-size: .9375rem; font-weight: 500; color: var(--ass-cinza); background: #fff; text-align: center;
}
.ass-aba .detalhe { display: block; margin-top: .125rem; font-size: .75rem; font-weight: 400; color: var(--ass-cinza-claro); }
.ass-aba .detalhe.destaque { color: var(--ass-verde); }
.ass-aba.ativa { border-color: var(--ass-roxo); color: var(--ass-roxo); background: var(--ass-roxo-fundo); box-shadow: 0 0 0 1px var(--ass-roxo) inset; }

/* ── Botões ───────────────────────────────────────────────────────────── */
.ass-botao {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.5rem; border: 0; border-radius: var(--ass-raio-campo); background: var(--ass-roxo); color: #fff;
  font-size: 1rem; font-weight: 500; text-decoration: none; transition: background .25s, transform .25s;
}
.ass-botao:hover { background: var(--ass-roxo-escuro); transform: translateY(-1px); }
.ass-botao[disabled] { opacity: .6; cursor: progress; transform: none; }
.ass-botao-secundario {
  display: inline-flex; width: 100%; justify-content: center; padding: .75rem 1.5rem; border: 1px solid var(--ass-linha);
  border-radius: var(--ass-raio-campo); background: #fff; color: var(--ass-roxo); font-size: .875rem; font-weight: 500; text-decoration: none;
}
.ass-botao-secundario:hover { border-color: var(--ass-roxo-claro); }
.ass-botao-claro { background: #fff; color: var(--ass-roxo-profundo); }
.ass-botao-claro:hover { background: var(--ass-roxo-anel); }
/* Botões que são links (<a>): a regra geral `.assinatura a { color: inherit }`
   é mais específica que `.ass-botao` e fazia o texto herdar a cor do cartão
   (tinta sobre o roxo; branco sobre o botão claro do plano em destaque). */
.assinatura a.ass-botao { color: #fff; }
.assinatura a.ass-botao-claro { color: var(--ass-roxo-profundo); }
.assinatura a.ass-botao-secundario { color: var(--ass-roxo); }
.assinatura a.ass-botao-google { color: var(--ass-tinta); }
.ass-girando { width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ass-girar .7s linear infinite; }
@keyframes ass-girar { to { transform: rotate(360deg); } }
.ass-seguranca { display: flex; align-items: flex-start; gap: .5rem; font-size: .75rem; color: var(--ass-cinza-claro); }
.ass-seguranca svg { flex: none; width: 1rem; height: 1rem; margin-top: .05rem; }

/* ── Cupom e totais ───────────────────────────────────────────────────── */
.ass-cupom { display: flex; gap: .5rem; }
.ass-cupom .ass-campo { text-transform: uppercase; letter-spacing: .04em; }
.ass-cupom button {
  flex: none; padding: 0 1rem; border: 1px solid var(--ass-linha); border-radius: var(--ass-raio-campo);
  background: var(--ass-roxo-fundo); color: var(--ass-roxo); font-size: .875rem; font-weight: 500;
}
.ass-cupom button:hover { border-color: var(--ass-roxo-claro); }
.ass-cupom button.remover { background: #fff; color: var(--ass-erro); }
.ass-totais { display: grid; gap: .375rem; font-size: .875rem; color: var(--ass-texto-suave); }
.ass-totais .linha { display: flex; justify-content: space-between; gap: 1rem; }
.ass-totais .desconto { color: var(--ass-verde); }
.ass-totais .total { padding-top: .5rem; margin-top: .25rem; border-top: 1px solid var(--ass-linha); font-size: 1rem; font-weight: 500; color: var(--ass-tinta); }

/* ── Pix ──────────────────────────────────────────────────────────────── */
.ass-qr { width: 15rem; height: 15rem; margin: 0 auto; border-radius: 12px; image-rendering: pixelated; }
.ass-copia { display: flex; gap: .5rem; }
.ass-copia button { flex: none; padding: 0 1rem; border: 0; border-radius: var(--ass-raio-campo); background: var(--ass-roxo); color: #fff; font-size: .875rem; font-weight: 500; }
.ass-aguardando { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; color: var(--ass-cinza); }
.ass-aguardando::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--ass-magenta); animation: ass-pulsar 1.4s ease-in-out infinite; }
@keyframes ass-pulsar { 50% { opacity: .3; } }
.ass-cronometro { display: inline-block; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 500; background: var(--ass-aviso-fundo); color: #7a5410; }

/* ── Planos (escolha de plano) ────────────────────────────────────────── */
.ass-planos { display: grid; gap: 1.25rem; margin-top: 2.5rem !important; }
@media (min-width: 900px) { .ass-planos { grid-template-columns: repeat(3, 1fr); } }
.ass-plano { display: flex; flex-direction: column; text-align: left; }
.ass-plano .ass-lista-check { flex: 1; margin-bottom: 1.75rem !important; }
.ass-plano-nome { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ass-cinza); }
.ass-selo { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .6875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; background: var(--ass-verde-fundo); color: var(--ass-verde); }
.ass-plano.destaque { background: var(--ass-roxo-profundo); border-color: var(--ass-roxo-profundo); color: #fff; }
.ass-plano.destaque .ass-plano-nome, .ass-plano.destaque .ass-preco .moeda, .ass-plano.destaque .ass-preco .periodo, .ass-plano.destaque .ass-preco-legenda { color: rgba(255,255,255,.65); }
.ass-plano.destaque .ass-lista-check { color: rgba(255,255,255,.85); }
.ass-plano.destaque .ass-lista-check li::before { background: #d9b8f5; }
.ass-plano.destaque .ass-selo { background: rgba(255,255,255,.14); color: #fff; }
.ass-cabeca-plano { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.5rem; }

/* ── Telas de acesso: login, esqueci a senha, nova senha (v1.1) ────────── */
.ass-acesso { max-width: 28rem; margin: 0 auto; }
.ass-acesso .ass-titulo { font-size: 2.25rem; }
.ass-acesso .ass-lead { font-size: 1rem; margin-top: .75rem !important; }
.ass-entre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .875rem; }
.ass-lembrar { display: inline-flex; align-items: center; gap: .5rem; color: var(--ass-texto-suave); cursor: pointer; }
.ass-lembrar input { width: 1rem; height: 1rem; accent-color: var(--ass-roxo); }
.ass-divisor { display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--ass-cinza-claro); }
.ass-divisor::before, .ass-divisor::after { content: ""; flex: 1; height: 1px; background: var(--ass-linha); }
.ass-botao-google {
  display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.5rem; border: 1px solid var(--ass-linha); border-radius: var(--ass-raio-campo);
  background: #fff; color: var(--ass-tinta); font-size: .9375rem; font-weight: 500; text-decoration: none;
}
.ass-botao-google:hover { border-color: var(--ass-roxo-claro); }
.ass-botao-google svg { width: 1.125rem; height: 1.125rem; }
.ass-recaptcha { display: flex; justify-content: center; }

/* ── v1.2: fundo com aura, topo translúcido, cartões com profundidade, rodapé ── */
body.assinatura { isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; }
body.assinatura > main { flex: 1; }
/* aura nas cores da marca, girando devagar */
body.assinatura::before {
  content: ""; position: fixed; inset: -8vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(32vmax 32vmax at 80% 20%, rgba(173, 54, 228, .20), transparent 65%),
    radial-gradient(36vmax 36vmax at 16% 70%, rgba(87, 45, 132, .18), transparent 65%),
    radial-gradient(24vmax 24vmax at 55% 42%, rgba(185, 140, 224, .12), transparent 70%);
  animation: ass-aura 32s ease-in-out infinite alternate;
}
/* grade de pontos que some a partir do topo */
body.assinatura::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(87, 45, 132, .20) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 0%, transparent 75%);
}
@keyframes ass-aura {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-3vmax, 2vmax, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(2vmax, -2vmax, 0) rotate(-6deg) scale(1.02); }
}

/* topo: logo maior, vidro fosco sobre a aura */
.ass-topo { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.ass-topo .ass-conteiner { height: 4.5rem; }
.ass-topo img { height: 2.5rem; }
@media (max-width: 480px) { .ass-topo img { height: 2.125rem; } .ass-topo-acao { font-size: .8125rem; } }

/* cartões flutuam sobre o fundo */
.ass-cartao { box-shadow: 0 1px 2px rgba(34, 16, 63, .04), 0 18px 40px -18px rgba(34, 16, 63, .18); }
.ass-plano.destaque { box-shadow: 0 24px 48px -20px rgba(34, 16, 63, .55); }

/* conteúdo entra com um fade curto */
.ass-principal > .ass-conteiner > * { animation: ass-surgir .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ass-surgir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.assinatura::before, .ass-principal > .ass-conteiner > * { animation: none; }
}

/* rodapé em dois blocos */
.ass-rodape { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ass-rodape .ass-conteiner { display: block; padding-top: 0; padding-bottom: 0; }
.ass-rodape-grade { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding: 2rem 0 1.5rem; text-align: center; }
.ass-rodape-marca { display: flex; flex-direction: column; align-items: center; gap: .625rem; }
.ass-rodape-marca img { height: 1.75rem; width: auto; opacity: .9; }
.ass-rodape-marca p { font-size: .8125rem; line-height: 1.5; color: var(--ass-cinza-claro); }
.ass-rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; font-size: .875rem; }
.ass-rodape-links a { color: var(--ass-texto-suave); text-decoration: none; }
.ass-rodape-links a:hover { color: var(--ass-roxo); }
.ass-rodape-links .zap { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border: 1px solid var(--ass-linha); border-radius: 999px; background: #fff; color: var(--ass-roxo); font-weight: 500; }
.ass-rodape-links .zap:hover { border-color: var(--ass-roxo-claro); }
.ass-rodape-links .zap svg { width: 1rem; height: 1rem; }
.ass-rodape-base { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 1rem 0 1.5rem; border-top: 1px solid var(--ass-linha); font-size: .75rem; color: var(--ass-cinza-claro); text-align: center; }
.ass-rodape-base span { display: inline-flex; align-items: center; gap: .375rem; }
.ass-rodape-base svg { width: .875rem; height: .875rem; }
@media (min-width: 768px) {
  .ass-rodape-grade { flex-direction: row; justify-content: space-between; text-align: left; }
  .ass-rodape-marca { flex-direction: row; gap: 1rem; }
  .ass-rodape-marca p { padding-left: 1rem; border-left: 1px solid var(--ass-linha); }
  .ass-rodape-links { justify-content: flex-end; align-items: center; }
  .ass-rodape-base { flex-direction: row; justify-content: space-between; }
}

/* ── v1.3: fundo mais vivo, só no login (body.ass-fundo-vivo) ──────────── */
body.assinatura.ass-fundo-vivo::before {
  background:
    radial-gradient(32vmax 32vmax at 80% 20%, rgba(173, 54, 228, .30), transparent 65%),
    radial-gradient(36vmax 36vmax at 16% 70%, rgba(87, 45, 132, .26), transparent 65%),
    radial-gradient(26vmax 26vmax at 55% 42%, rgba(185, 140, 224, .18), transparent 70%);
  animation: ass-aura-viva 16s ease-in-out infinite alternate;
}
body.assinatura.ass-fundo-vivo::after { background-image: radial-gradient(rgba(87, 45, 132, .26) 1px, transparent 1.3px); }
@keyframes ass-aura-viva {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(-6vmax, 4vmax, 0) rotate(14deg) scale(1.12); }
  66%  { transform: translate3d(5vmax, -3vmax, 0) rotate(-10deg) scale(1.05); }
  100% { transform: translate3d(-2vmax, -5vmax, 0) rotate(8deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { body.assinatura.ass-fundo-vivo::before { animation: none; } }

/* ── v1.4: seleção com seta e campo de código ───────────────────────────── */
select.ass-campo {
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375668a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem;
}
.ass-campo.codigo { text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: .5em; padding-left: 1.5rem; font-variant-numeric: tabular-nums; }
.ass-icone-topo { width: 3.5rem; height: 3.5rem; margin: 0 0 1.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--ass-roxo-anel); color: var(--ass-roxo); }
.ass-icone-topo svg { width: 1.625rem; height: 1.625rem; }

/* botão Ajuda do rodapé: sem número; no hover, degradê da marca */
.ass-rodape-links .zap { transition: color .25s, border-color .25s, box-shadow .25s, background .25s; }
.ass-rodape-links .zap:hover, .ass-rodape-links .zap:focus-visible {
  background: linear-gradient(135deg, var(--ass-roxo) 0%, var(--ass-magenta) 100%);
  border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(173, 54, 228, .55);
}