/* RESET */
* {box-sizing:border-box;margin:0;padding:0}

/* CENTRALIZA VERTICAL */
html, body {height:100%}
body {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0B1F3B;
}

/* WRAPPER */
.wrap {
  position:relative;
  width:100%;
  max-width:1920px;
  aspect-ratio:1920/1080;
}

/* IMAGENS */
.bg {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Mostra / esconde conforme tela */
.desktop{display:block;}
.mobile{display:none;}

/* HOT-SPOTS - DESKTOP */
.btn {
  position:absolute;
  cursor:pointer;
}
.btn1 {left:24.5%; top:68%; width:15%; height:6%;}
.btn2 {left:43.3%; top:68%; width:15%; height:6%;}
.btn3 {left:62.8%; top:68%; width:15%; height:6%;}

/* MOBILE - imagem vertical + botões empilhados */
@media (max-width:576px){
  .desktop{display:none;}
  .mobile{display:block;}
  .wrap{height:100vh; aspect-ratio:auto;}
  .bg{object-fit:cover; width:100%; height:100%;}

  
  /* VALORES INICIAIS – MUDE AQUI */
  .btn1{left:16%; top:50%; width:68%; height:8%;}
  .btn2{left:16%; top:58%; width:68%; height:8%;}
  .btn3{left:16%; top:71%; width:68%; height:8%;}
}