/* Seletor de planos — um toggle no lugar da grade de cartões. Usado na
   apresentação, no modal de planos (paywall) e na aba Plano do perfil.
   O toggle vem com 'hidden' do servidor e só aparece quando o
   seletor-planos.js roda; sem JS a página mostra a grade como sempre. */
.sp-toggle { display: grid; grid-template-columns: repeat(var(--sp-qtd, 4), minmax(0, 1fr)); gap: 4px;
  max-width: 640px; margin: 0 auto 22px; padding: 4px; border: 1px solid var(--borda, #dfe3e8);
  border-radius: 14px; background: var(--fundo, #f6f7f9); }
.sp-toggle[hidden] { display: none; }
.sp-opcao { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 54px; padding: 8px 6px; border-radius: 10px; cursor: pointer; text-align: center;
  color: var(--texto-fraco, #626d7a); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.sp-opcao input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sp-opcao-nome { font-size: 13.5px; font-weight: 750; line-height: 1.2; }
.sp-opcao-preco { font-size: 11.5px; line-height: 1.2; }
.sp-opcao-desconto { position: absolute; top: -9px; right: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--ok, #1a7f4b); color: #fff; font-size: 10px; font-weight: 800; line-height: 1.4; }
.sp-opcao:hover { color: var(--texto, #1c2128); }
.sp-opcao:has(input:checked) { background: var(--superficie, #fff); color: var(--texto, #1c2128);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px rgba(15, 23, 42, .08); }
.sp-opcao:has(input:checked) .sp-opcao-nome { color: var(--primaria, #1f5fbf); }
.sp-opcao:has(input:focus-visible) { outline: 3px solid var(--primaria, #1f5fbf); outline-offset: 1px; }

/* Grade com o seletor ligado: um cartão só, centralizado, com a lista de
   recursos em duas colunas quando há espaço. O seletor (!important) vence o
   display:flex dos cartões de cada tela. */
.sp-unico { display: block !important; max-width: 640px; margin-right: auto; margin-left: auto; }
.sp-unico > .sp-oculto { display: none !important; }
.sp-unico > * { width: 100%; }
.sp-unico ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }

@media (max-width: 560px) {
  .sp-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; padding-top: 10px; }
  .sp-unico ul { grid-template-columns: 1fr; }
}