/* RotaPro — ajustes de mobile (não afetam desktop).
   Carregado depois dos CSS do pacote. Nenhum texto, cor ou fonte alterados. */

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

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

  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Áreas de toque confortáveis */
  .main-nav > a,
  .action-nav > a,
  .menu-toggle,
  .action-theme button,
  .theme-switch button,
  .modal-close,
  .action-lightbox-close {
    min-height: 44px;
  }

  .menu-toggle,
  .action-theme button {
    min-width: 44px;
  }

  /* Evita zoom automático do iOS ao focar campos */
  input,
  select,
  textarea,
  button {
    font-size: max(16px, 1rem);
  }

  /* Blocos densos podem rolar dentro de si, nunca na página */
  .ops-panel,
  .alert-list,
  .checkin-row {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Respeita notch/barra inferior */
  .site-header,
  .action-header {
    padding-top: env(safe-area-inset-top);
  }

  .footer-inner,
  .action-footer-inner {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 620px) {
  /* Leitura mais confortável, mesma tipografia */
  body {
    line-height: 1.62;
  }

  p,
  li {
    overflow-wrap: break-word;
  }

  /* Espaçamentos verticais menos longos no celular */
  .section,
  .management-section,
  .action-gallery {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .final-cta,
  .action-cta {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  .section-heading,
  .action-section-heading {
    margin-bottom: 34px;
  }

  /* Herói: imagem alta demais em telas pequenas */
  .hero-photo {
    height: min(520px, 58vh);
  }

  .hero-checkin {
    right: 14px;
    bottom: 18px;
    width: calc(100% - 28px);
  }

  /* Grades apertadas viram uma coluna */
  .proof-row,
  .differences-grid,
  .audience-grid,
  .steps-grid,
  .demo-form {
    grid-template-columns: 1fr;
  }

  .action-card ul {
    gap: 11px;
  }

  /* Cabeçalho da galeria sem sobreposição */
  .action-header-inner {
    gap: 12px;
  }

  .action-nav {
    flex-wrap: nowrap;
  }

  /* Lightbox utilizável no celular: imagem grande com pan horizontal */
  .action-lightbox {
    display: block;
    padding: 64px 12px 16px;
    padding-top: max(64px, calc(env(safe-area-inset-top) + 56px));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .action-lightbox img {
    max-width: none;
    max-height: none;
    width: auto;
    height: min(64vh, 560px);
    margin: 0 auto;
    border-radius: 12px;
  }


  .action-lightbox-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    width: 46px;
    height: 46px;
  }

  /* Modal do formulário */
  .modal {
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 380px) {
  .proof {
    padding-left: 0;
    padding-right: 0;
  }

  .action-card {
    padding: 16px;
  }
}