html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
video,
iframe,
canvas,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

table {
  max-width: 100%;
}

td,
th {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body {
    min-width: 0;
  }

  .topbar,
  .topbar-inner,
  .navbar,
  .nav,
  .header,
  .section-head,
  .card-actions,
  .quick-actions,
  .user-info {
    flex-wrap: wrap;
    gap: 10px;
  }

  .container,
  .layout,
  .app,
  .shell,
  .dashboard-shell,
  .main-layout,
  .admin-layout {
    width: 100%;
    max-width: 100%;
  }

  .container,
  .layout,
  .dashboard-shell,
  .admin-layout {
    flex-direction: column;
  }

  .sidebar,
  aside {
    width: 100% !important;
    max-width: 100% !important;
  }

  .content,
  .main,
  main,
  section,
  .panel,
  .card,
  .page,
  .shell {
    max-width: 100%;
  }

  .content,
  .main,
  main,
  .shell,
  .page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .panel,
  .card,
  .admin-login-card,
  .auth-container {
    border-radius: 14px;
  }

  .grid,
  .shop-grid,
  .hero-grid,
  .benefits-grid,
  .steps-grid,
  .legal-grid,
  .stats-grid,
  .student-quick-grid,
  .access-hub,
  .course-guide-grid,
  .course-metrics-grid,
  .lead-command-grid,
  .lead-filters-grid,
  .lead-modal-grid,
  [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  .topbar-nav,
  .nav-menu,
  .access-filters,
  .tabs,
  .filters {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .topbar-actions,
  .capture-form,
  .email-row,
  .form-row,
  .product-action-row,
  .card-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-solid,
  .btn-soft,
  .btn-action,
  .btn-admin-primary,
  .btn-admin-soft,
  .btn-sair {
    min-height: 44px;
  }

  .topbar-actions .btn,
  .capture-form button,
  .email-row button,
  .form-row button,
  .product-action-row button,
  .card-actions button {
    width: 100%;
  }

  h1 {
    font-size: clamp(28px, 10vw, 42px) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.12 !important;
  }

  .hero,
  .producer-human-hero,
  .human-slide {
    min-height: auto !important;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  [id^="modal"] {
    padding: 12px !important;
  }

  [id^="modal"] > div,
  .modal,
  .modal-content,
  .drawer-shell {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto;
  }

  iframe {
    min-height: 220px;
  }
}

@media (max-width: 420px) {
  .content,
  .main,
  main,
  .shell,
  .page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .panel,
  .card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}