html, body { margin:0; padding:0; background:#000; }
  .page { min-height:100svh; display:grid; place-items:start center; }

  /* Container raiz que define a janela visível (recorte horizontal no mobile é aplicado por JS) */
  .bg-wrap {
    position: relative;
    margin: 0 auto;
    width: min(90000px, 98.9vw);
    overflow: hidden; /* a “janela” de recorte */
  }

  /* Pilha vertical de imagens */
  .stack {
    position: relative;
    display: block;
    width: 100%;
    height: auto; /* será calculado pelo fluxo de layout natural */
    min-height: 100vh;
  }

  .img-item {
    position: relative;
    display: block;
    width: 100%;
  }

  .img-item > img {
    display:block; width:100%; height:auto;
    border:0; outline:0; user-select:none; -webkit-user-drag:none;
    position: relative; /* permite deslocamento left no recorte mobile */
  }

  /* Camadas sobrepostas à pilha toda (global) e uma camada de debug separada */
  .overlay-global, .debug-layer { position:absolute; inset:0; pointer-events:none; }

  /* Hotspot real (clicável) */
  .hotspot { position:absolute; pointer-events:auto; background:transparent; }

  /* “Cara” de botão + acessibilidade */
  .hotspot {
    cursor: pointer;
    outline: 2px solid transparent;
    transition: outline-color .15s ease, background-color .15s ease;
  }
  .hotspot:hover {
    outline-color: rgba(255,255,255,.35);
    background-color: rgba(255,255,255,.04);
  }
  .hotspot:focus-visible {
    outline-color: rgba(255,255,255,.6);
    background-color: rgba(255,255,255,.06);
  }

  /* Debug visual */
  .debug .hotspot { outline:1px dashed rgba(0,255,128,.7); background:rgba(0,255,128,.06); }
  .debug .hotspot:hover { outline-color: rgba(0,255,128,.9); background:rgba(0,255,128,.12); }
  .hotspot.selected { outline:2px solid rgba(0,180,255,.9) !important; background:rgba(0,180,255,.08) !important; }

  /* Marcadores/preview do dev_debug */
  .marker {
    position:absolute; width:10px; height:10px; border-radius:50%;
    transform:translate(-50%, -50%);
    background:#ff3b30; box-shadow:0 0 0 2px rgba(0,0,0,.5);
    pointer-events:none;
    z-index: 2;
  }
  .rect-preview {
    position:absolute; border:1px dashed rgba(255,59,48,.75);
    background:rgba(255,59,48,.08); pointer-events:none;
    z-index: 2;
  }

  #bgWrap { position: relative; }

  /* Camadas */
  #play-video      { position:absolute; inset:0; z-index:800; pointer-events:none; }
  #forms-layer     { position:absolute; inset:0; z-index:850; pointer-events:none; } /* filhos habilitam */
  #overlayGlobal   { position:absolute; inset:0; z-index:900; }
  #debugLayer      { position:absolute; inset:0; z-index:999; pointer-events:none; }

  /* ===== Visually Hidden (sem usar display:none) ===== */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }