/* =============================================
   RESPONSIVE — Media Queries
   opcartas
============================================= */

/* ── TABLET ── */
@media(max-width:1024px) {
  .page-main { margin-left: 0; }
}

/* ── MOBILE L ── */
@media(max-width:768px) {
  :root { --sp-9: 56px; }

  .features-grid { grid-template-columns: 1fr; }
  .sets-grid { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; }

  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 260px; }

  .footer-grid { grid-template-columns: repeat(2,1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── MOBILE S ── */
@media(max-width:520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .sets-grid { grid-template-columns: repeat(2,1fr); }
  .community-stats { gap: var(--sp-4); }
}