.surprise-section {
  background: var(--color-grigio-chiaro);
  padding: 20px 0px ;
    margin: 15px 0;
  text-align: center;
}

.surprise-title {
  color: var(--color-mare-profondo);
  font-size: 1.1rem;
  margin-bottom: 36px;
  /* font-weight: bold; */
  margin: 30px;
}

.surprise-container {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 56px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.surprise-image-wrapper {
  position: relative;
  width: 330px;
  height: 330px;
  margin: 0 auto;
  flex-shrink: 0;
}

.surprise-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px) brightness(0.6);
  border-radius: 32px;
  box-shadow: 0 6px 32px var(--color-ombra-blu);
}

/* Overlay trasparente sopra l'immagine */
.surprise-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2,119,189,0.21); /* overlay azzurro leggero */
  border-radius: 32px;
  z-index: 2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.15s, transform 0.12s;
}

.surprise-overlay:hover {
  background: rgba(2,119,189,0.32);
  transform: scale(1.02);
}

/* Bottone centrale sopra l'immagine */
.surprise-social-btn-inner {
    display: inline-block;
    background: rgb(193 149 64 / 14%);
    color: var(--color-bianco);
    font-size: 0.9rem;
    font-weight: 800;
    border-radius: 18px;
    box-shadow: 0 6px 28px 0 rgba(255, 180, 60, 0.19), 0 2px 14px #0004;
    padding: 18px 38px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 14px #0007;
    border: none;
    transition: background 0.15s, box-shadow 0.12s, transform 0.10s;
}

.surprise-overlay:hover .surprise-social-btn-inner {
  background: rgb(178, 205, 221, 0.1);
  box-shadow: 0 10px 32px 0 rgba(255,180,60,0.22), 0 2px 22px #0005;
  transform: scale(1.06);
}

.surprise-text {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 1.18rem;
  color: var(--color-text);
  text-align: center;
}

.surprise-text strong {
  font-weight: bold;
}

.surprise-hint {
  margin-top: 22px;
  font-size: 1.13rem;
  color: var(--color-text-light);
  opacity: 0.7;
}

@media (max-width: 900px) {
  .surprise-container {
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }
  .surprise-image-wrapper {
    width: 82vw;
    max-width: 320px;
    height: 200px;
  }
  .surprise-img, .surprise-overlay {
    border-radius: 18px;
  }
}