* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #010611;
}

.bio-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100svh;
}

.bio-image {
  position: relative;
  width: min(100vw, 1080px);
  flex: 0 1 1080px;
}

.bio-image img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .bio-image {
    width: auto;
    height: 100svh;
    flex: 0 0 auto;
  }

  .bio-image img {
    width: auto;
    height: 100%;
    max-width: 100vw;
  }
}

.hotspot {
  position: absolute;
  display: block;
  cursor: pointer;
  border-radius: 999px;
}

/* Limites aproximados dos botões no PNG original, mantendo uma folga mínima para incluir o brilho. */
.hotspot-whatsapp {
  top: 49.17%;
  left: 20.00%;
  width: 60.00%;
  height: 9.27%;
}

.hotspot-location {
  top: 59.58%;
  left: 20.00%;
  width: 60.00%;
  height: 9.27%;
}

.hotspot-booking {
  top: 70.00%;
  left: 20.00%;
  width: 60.00%;
  height: 9.27%;
}