/* Responsive variants — servido como CSS puro, sem processamento Tailwind */

@media (min-width: 640px) {
  .sm\:flex { display: flex !important; }
  .sm\:hidden { display: none !important; }
  .sm\:items-center { align-items: center !important; }
  .sm\:max-w-lg { max-width: 32rem !important; }
  .sm\:mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .sm\:rounded-xl { border-radius: 0.75rem !important; }
  .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .sm\:py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .sm\:gap-2 { gap: 0.5rem !important; }
  .sm\:text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex !important; }
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
  .md\:pb-0 { padding-bottom: 0 !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}