/* Synesia Aion · ajuste responsivo global · 2026-10-11 */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
table { max-width: 100%; }

@media (max-width: 1024px) {
  main, .container, .wrap, .shell, .page, .page-shell, .content, .content-wrap, .content-shell,
  .builder-shell, .course-builder, .instructor-shell, .account-shell, .preview-shell {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .grid, .cards, .card-grid, .course-grid, .stats-grid, .form-grid, .module-grid, .lesson-grid,
  .two-col, .two-column, .columns, .split, .hero-grid {
    min-width: 0 !important;
  }

  .actions, .toolbar, .button-row, .buttons, .cta-row, .course-actions, .builder-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .video-frame, .video-player, .embed-responsive, .lesson-video { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }
  main { width: 100%; }

  section, article, .card, .panel, .box, .course-card, .module-card, .lesson-card, .block-card {
    min-width: 0 !important;
  }

  .grid, .cards, .card-grid, .course-grid, .stats-grid, .form-grid, .module-grid, .lesson-grid,
  .two-col, .two-column, .columns, .split, .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .split, .two-col, .two-column, .columns, .hero-grid {
    flex-direction: column !important;
  }

  .modal, .dialog, .modal-card, .dialog-card, .sheet, .drawer {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    overflow: auto !important;
  }

  .actions > button, .actions > a,
  .button-row > button, .button-row > a,
  .builder-actions > button, .builder-actions > a,
  .course-actions > button, .course-actions > a {
    min-height: 44px;
  }

  form, fieldset { min-width: 0; }
  input, select, textarea { width: 100%; }

  iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="drive.google.com"] {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    min-height: 220px;
  }

  .preview-shell, .course-builder, .builder-shell, .instructor-shell, .account-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 520px) {
  h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.08; }
  h2 { font-size: clamp(1.45rem, 6.5vw, 2rem); line-height: 1.12; }
  h3 { font-size: clamp(1.18rem, 5.5vw, 1.55rem); }

  button, .btn, a.btn, [role="button"] { min-height: 44px; }

  .card, .panel, .box, .course-card, .module-card, .lesson-card, .block-card {
    max-width: 100% !important;
  }

  iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="drive.google.com"] {
    min-height: 190px;
  }
}