*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#fff}
body{
  min-height:100vh;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,0,170,.10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(0,255,255,.08), transparent 35%),
    #000;
}
.wrap{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:0;
}
.poster{
  position:relative;
  width:min(100vw,1024px);
  aspect-ratio:2/3;
  overflow:hidden;
  background:#000;
}
.poster img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.hotspot{
  position:absolute;
  display:block;
  text-decoration:none;
  border-radius:20px;
  -webkit-tap-highlight-color:transparent;
}
.hotspot span{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}
.hotspot:hover{background:rgba(255,255,255,.035)}
.hotspot:focus-visible{outline:3px solid #fff;outline-offset:-4px}

/* Hotspots ajustados ao pôster final 1024x1536 */
.tiktok{
  left:49.1%;
  top:29.6%;
  width:47.0%;
  height:13.0%;
}
.youtube{
  left:49.1%;
  top:44.9%;
  width:47.0%;
  height:12.9%;
}
.store{
  left:49.1%;
  top:60.1%;
  width:47.0%;
  height:20.1%;
}
.email{
  left:22.8%;
  top:84.5%;
  width:54.2%;
  height:7.1%;
  border-radius:18px;
}

@media (min-width:1025px){
  .poster{
    box-shadow:0 0 80px rgba(255,0,170,.08), 0 0 140px rgba(0,255,255,.05);
    margin:10px 0;
  }
}
@media (max-width:600px){
  .hotspot{border-radius:12px}
}