/* ===========================================================
   Planos (Grátis x Vendi Pro) — usa as variáveis de style.css
   =========================================================== */
.plans{ padding: 88px 0; background: var(--tint); }
.plans-grid{ display: grid; gap: 28px; grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; }
@media (min-width: 760px){ .plans-grid{ grid-template-columns: 1fr 1fr; } }
.plan-card{
  position: relative; background: var(--white); border-radius: var(--radius-md);
  padding: 32px 28px; box-shadow: var(--shadow-soft); border: 2px solid transparent;
}
.plan-card h3{ font-size: 22px; }
.plan-pro{ border-color: var(--primary); }
.plan-badge{
  position: absolute; top: -14px; right: 24px; background: var(--primary); color: var(--white);
  font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px;
}
.plan-price{ font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--dark); margin: 8px 0 4px; }
.plan-price small{ font-size: 16px; font-weight: 500; color: var(--gray); }
.plan-sub{ color: var(--gray); margin-bottom: 20px; font-size: 15px; }
.plan-list{ display: flex; flex-direction: column; gap: 10px; }
.plan-list li{ position: relative; padding-left: 26px; font-size: 15px; }
.plan-list li::before{ content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.plans-note{ margin: 32px auto 0; font-size: 14px; color: var(--gray); max-width: 860px; text-align: center; }