/* =========================================================
   GCFC V112 — Manual da Certificação
   Correções responsivas das seções 03, 04, 05 e 06.
   Escopo exclusivamente mobile: o desktop permanece intacto.
========================================================= */

@media (max-width: 760px) {
  /* Base de segurança contra larguras que ultrapassam a viewport. */
  #aplicacoes,
  #simulador,
  #aplicacoes-digitais,
  #aplicacoes-fisicas {
    overflow: hidden !important;
  }

  #aplicacoes .container,
  #simulador .container,
  #aplicacoes-digitais .container,
  #aplicacoes-fisicas .container {
    width: min(100% - 28px, 1180px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #aplicacoes h2,
  #simulador h2,
  #aplicacoes-digitais h2,
  #aplicacoes-fisicas h2 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 11vw, 3.1rem) !important;
    line-height: 1.01 !important;
    overflow-wrap: normal !important;
  }

  /* 03 — Os cards deixam de depender da animação do observer no iOS. */
  #aplicacoes .application-grid,
  #aplicacoes .application-grid.is-visible {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 12px !important;
    margin-top: 26px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #aplicacoes #appGrid .app-card,
  #aplicacoes #appGrid.is-visible .app-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 166px !important;
    padding: 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }

  #aplicacoes #appGrid .app-card h3 {
    margin: 15px 0 7px !important;
    font-size: 1.1rem !important;
  }

  #aplicacoes #appGrid .app-card p {
    margin: 0 0 42px !important;
    line-height: 1.55 !important;
  }

  #aplicacoes #appGrid .app-card span {
    left: 20px !important;
    right: 20px !important;
    bottom: 17px !important;
  }

  /* 04 — Controles primeiro; visualização abaixo, ambos em largura total. */
  #simulador .simulator {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
    margin-top: 28px !important;
  }

  #simulador .simulator > .card:first-child {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 20px !important;
  }

  #simulador .simulator > div:last-child {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #simulador .control-group {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  #simulador .choice-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #simulador .choice {
    flex: 0 1 auto !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    touch-action: manipulation;
  }

  #simulador .preview {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 360px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  #simulador .mockup-canvas {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #simulador .mockup-canvas .mock-scene {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    transform-origin: center !important;
  }

  #simulador .recommendation {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #simulador .recommendation .metric {
    min-width: 0 !important;
    padding: 13px !important;
  }

  /* 05 — Seletor horizontal e mockups contidos na largura do celular. */
  #aplicacoes-digitais .digital-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  #aplicacoes-digitais .digital-nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #aplicacoes-digitais .digital-nav::-webkit-scrollbar {
    display: none;
  }

  #aplicacoes-digitais .digital-nav .tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 132px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  #aplicacoes-digitais .digital-stage {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  #aplicacoes-digitais .digital-stage-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 5px 3px 14px !important;
  }

  #aplicacoes-digitais .digital-badge {
    align-self: flex-start !important;
    white-space: normal !important;
  }

  #aplicacoes-digitais .digital-canvas {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 350px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  #aplicacoes-digitais .digital-canvas .mock-scene {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    transform: none !important;
    transform-origin: center !important;
  }

  #aplicacoes-digitais .mock-browser,
  #aplicacoes-digitais .email-window,
  #aplicacoes-digitais .scene-email,
  #aplicacoes-digitais .scene-landing,
  #aplicacoes-digitais .scene-instagram,
  #aplicacoes-digitais .scene-linkedin,
  #aplicacoes-digitais .scene-whatsapp,
  #aplicacoes-digitais .scene-print,
  #aplicacoes-digitais .scene-physical {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #aplicacoes-digitais .browser-content {
    grid-template-columns: 1fr !important;
    min-height: 300px !important;
    padding: 20px !important;
  }

  #aplicacoes-digitais .scene-whatsapp {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: 10px !important;
  }

  #aplicacoes-digitais .wa-banner {
    padding: 15px !important;
  }

  #aplicacoes-digitais .wa-banner h4 {
    font-size: 1.12rem !important;
  }

  #aplicacoes-digitais .scene-physical {
    height: 330px !important;
  }

  #aplicacoes-digitais .physical-copy h4 {
    font-size: 1.25rem !important;
    max-width: 160px !important;
  }

  #aplicacoes-digitais .digital-meta {
    grid-template-columns: 1fr !important;
  }

  /* 06 — Opções, controle e visualização em fluxo vertical preservado. */
  #aplicacoes-fisicas .physical-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  #aplicacoes-fisicas .physical-options,
  #aplicacoes-fisicas .physical-view {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  #aplicacoes-fisicas .physical-option {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 8px !important;
    padding: 14px !important;
    touch-action: manipulation;
  }

  #aplicacoes-fisicas .physical-control {
    width: 100% !important;
    margin-top: 14px !important;
    padding: 18px 4px 4px !important;
  }

  #aplicacoes-fisicas .physical-control input[type="range"] {
    width: 100% !important;
  }

  #aplicacoes-fisicas .physical-view-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  #aplicacoes-fisicas .physical-status {
    display: inline-flex !important;
    white-space: normal !important;
  }

  #aplicacoes-fisicas .physical-stage {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 350px !important;
    margin-top: 14px !important;
    overflow: hidden !important;
  }

  #aplicacoes-fisicas .physical-stage img,
  #aplicacoes-fisicas .physical-scene img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  #aplicacoes-fisicas .presentation-deck {
    width: 94% !important;
    max-width: 94% !important;
  }

  #aplicacoes-fisicas .window-seal {
    right: 4% !important;
    max-width: 44% !important;
  }

  #aplicacoes-fisicas .display-unit {
    width: 58% !important;
    max-width: 220px !important;
  }

  #aplicacoes-fisicas .physical-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }
}

@media (max-width: 390px) {
  #simulador .recommendation {
    grid-template-columns: 1fr !important;
  }

  #aplicacoes-digitais .digital-canvas,
  #aplicacoes-fisicas .physical-stage {
    min-height: 320px !important;
  }

  #aplicacoes-digitais .scene-whatsapp {
    grid-template-columns: 1fr !important;
  }

  #aplicacoes-digitais .wa-phone {
    width: min(180px, 72%) !important;
    margin: 0 auto !important;
  }
}