/* ==========================================================================
   Automa Software — seletor de periodicidade (mensal/anual) do bloco de preço.
   ADITIVO: usado pelas 3 páginas de venda, junto do base.css. Só classes novas.
   ========================================================================== */

.plano-switch { display: flex; justify-content: center; margin: 0 0 26px; }
.plano-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #fff; border: 1px solid var(--neutral-300);
  border-radius: var(--r-full); box-shadow: var(--shadow-sm);
}
.plano-toggle button {
  font: inherit; font-weight: 700; font-size: 14px; line-height: 1;
  border: 0; background: transparent; color: var(--neutral-500);
  padding: 11px 20px; border-radius: var(--r-full); cursor: pointer;
  transition: background .12s ease, color .12s ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.plano-toggle button:hover { color: var(--primary-dark); }
.plano-toggle button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.plano-toggle .selo-off {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  background: var(--accent-light); color: var(--accent-dark);
  padding: 3px 8px; border-radius: var(--r-full);
}
.plano-toggle button[aria-pressed="true"] .selo-off { background: rgba(255,255,255,.22); color: #fff; }

.parcelamento { color: var(--neutral-500); font-size: 13px; text-align: center; margin-top: 12px; }

@media (max-width: 520px) {
  .plano-toggle { flex-direction: column; width: 100%; max-width: 320px; }
  .plano-toggle button { justify-content: center; }
}