:root {
  --bg: #d8d1ca;
  --overlay: rgba(0,0,0,0.3);
}

body {
  margin: 0;
  background: var(--bg);
}

/* HERO */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SWITCH */
.desktop { display: block; }
.mobile { display: none; }

@media (max-width: 767px) {
  .desktop { display: none; }
  .mobile { display: block; }

  .hero-image {
    object-fit: cover;
  }
}

/* HOTSPOT BASE */
.hotspot {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* DESKTOP HOTSPOT */
.hotspot-top {
  left: 37%;
  top: 17%;
  width: 42%;
  height: 10%;
}

.hotspot-center {
  left: 47.5%;
  top: 62%;
  width: 12%;
  height: 11%;
}

.hotspot-info {
  left: 84%;
  top: 89%;
  width: 9%;
  height: 7%;
}

/* MOBILE HOTSPOT (da regolare se serve) */
.hotspot-top-m {
  left: 12%;
  top: 13%;
  width: 76%;
  height: 10%;

}

.hotspot-center-m {
  left: 32%;
  top: 46%;
  width: 36%;
  height: 12%;
}


.hotspot-info-m {
  left: 70%;
  top: 87%;
  width: 25%;
  height: 8%;
}

/* MODALE */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal.is-open {
  display: block;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.modal-panel {
  position: relative;
  margin: 10vh auto;
  width: min(90vw, 600px);
  background: white;
  padding: 24px;
  border-radius: 12px;
}

/* TESTI */
.modal-kicker,
.modal h2,
.modal-text {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 300;
}

.modal-kicker { font-size: 12px; }
.modal h2 { font-size: 24px; }
.modal-text { font-size: 13px; }