.hero { padding: 0 0 var(--spazio-5); overflow: clip; }
.hero-muro { transform-origin: 50% 100%; }
.hero-muro {
  padding-top: calc(var(--testata-alta) + var(--spazio-2));
  background:
    linear-gradient(to bottom, var(--pietra) 0, rgb(var(--pietra-rgb) / 0.55) 22%, rgb(var(--pietra-rgb) / 0) 55%),
    url("texture/ciottoli.svg") center bottom / var(--ciottoli-misura) auto repeat,
    var(--pietra);
  border-bottom: 1px solid var(--soglia-filo);
}
.hero-centro { display: grid; justify-items: center; text-align: center; }
.soglia { position: relative; width: min(100%, var(--soglia-larghezza)); margin-inline: auto; padding: var(--soglia-margine); }
.soglia::before { content: ""; position: absolute; inset: 0; border-radius: var(--arco); background: var(--pietra); }
.soglia > * { position: relative; }
.soglia > .soglia-cornice {
  position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%;
  border: 1px solid var(--soglia-filo); border-bottom: 0;
  border-radius: var(--arco);
  pointer-events: none;
}
.soglia-cornice::after {
  content: ""; position: absolute; inset: calc(var(--soglia-margine) * 0.45);
  border: 1px solid var(--soglia-filo); border-bottom: 0; border-radius: var(--arco); opacity: 0.6;
}
.hero-arco { aspect-ratio: 4 / 3.1; }
.hero-arco img { object-position: 55% 55%; }
.hero-testo {
  width: min(100%, calc(var(--soglia-larghezza) + 8rem));
  padding-top: var(--spazio-3);
}
.hero-titolo {
  margin: 0 0 var(--spazio-2);
  font-family: var(--font-titoli); font-weight: 400;
  font-size: min(var(--titolo-hero), 5.75rem); line-height: 0.96; letter-spacing: -0.012em;
  text-wrap: balance;
}
.hero-frase {
  margin: 0 auto var(--spazio-1); max-width: 30rem;
  font-family: var(--font-serif); font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.5;
}
.hero-riga { margin: 0 auto var(--spazio-3); color: var(--fumo); }
.hero .pulsanti { justify-content: center; align-items: center; gap: 1.5rem; }
.hero .stato { margin: var(--spazio-3) 0 0; }
@media (max-width: 599px) {
  .hero-arco { aspect-ratio: 4 / 3.6; }
}
@media (min-width: 1100px) {
  .hero-testo { width: min(100%, 64rem); }
}