/* ==========================================================================
   Chalet Cielo Aperto — foglio di stile
   Mobile-first: le regole di base valgono da 320px; i breakpoint aggiungono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altezza-nav) + var(--s4));
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background-color: var(--carta);
  /* Grana di carta: turbolenza SVG, appena percettibile. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--font-titolo);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--petrolio);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ambra);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--ambra-chiara);
  color: var(--petrolio-fondo);
}

.solo-lettore-schermo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--ambra);
  color: var(--petrolio-fondo);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--raggio);
  transform: translateY(-160%);
  transition: transform var(--durata-breve) var(--curva);
}

.salta:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Impalcatura
   -------------------------------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--max-larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-x);
}

.sezione {
  padding-block: var(--sezione-y);
}

.sezione--scura {
  background: var(--petrolio-fondo);
  color: var(--carta);
}

.sezione--scura h2,
.sezione--scura h3 {
  color: var(--carta-chiara);
}

.sezione--tenue {
  background: color-mix(in oklch, var(--salvia-chiara) 26%, var(--carta));
}

.intestazione-sezione {
  max-width: 30ch;
  margin-bottom: var(--s6);
}

.nastro {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 5px var(--s4) 5px var(--s3);
  background: var(--ambra);
  color: var(--petrolio-fondo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Estremità a V, come un nastro di carta piegato. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
  padding-right: calc(var(--s4) + 9px);
}

.titolo-sezione {
  font-size: var(--t-xl);
}

.occhiello {
  max-width: var(--max-testo);
  margin-top: var(--s4);
  font-size: var(--t-m);
  line-height: 1.5;
  font-family: var(--font-titolo);
  font-style: italic;
  color: color-mix(in oklch, var(--inchiostro) 80%, var(--carta));
}

.sezione--scura .occhiello {
  color: color-mix(in oklch, var(--carta) 84%, var(--petrolio-fondo));
}

.prosa {
  max-width: var(--max-testo);
}

.prosa p + p {
  margin-top: var(--s4);
}

.filetto {
  height: 0;
  border: 0;
  border-top: var(--filetto);
}

/* --------------------------------------------------------------------------
   3. Pulsanti
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s5);
  border: 2px solid transparent;
  border-radius: var(--raggio);
  font-family: var(--font-testo);
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--durata-breve) var(--curva),
    box-shadow var(--durata-breve) var(--curva), background-color var(--durata-breve) var(--curva);
}

/* Il testo sui pulsanti ambra è petrolio scuro: il bianco su ambra
   scenderebbe a 2,9:1, sotto la soglia di leggibilità. */
.btn--primario {
  background: var(--ambra);
  color: var(--petrolio-fondo);
  border-color: var(--petrolio-fondo);
  box-shadow: var(--ombra-stampa);
}

.btn--primario:hover {
  background: var(--ambra-chiara);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--petrolio-fondo);
}

.btn--primario:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--petrolio-fondo);
}

.btn--fantasma {
  background: transparent;
  color: var(--carta-chiara);
  border-color: color-mix(in oklch, var(--carta) 55%, transparent);
}

.btn--fantasma:hover {
  background: color-mix(in oklch, var(--carta) 14%, transparent);
  border-color: var(--carta);
}

.btn--contorno {
  background: transparent;
  color: var(--petrolio);
  border-color: var(--petrolio);
}

.btn--contorno:hover {
  background: var(--petrolio);
  color: var(--carta-chiara);
}

.btn--grande {
  min-height: 60px;
  font-size: var(--t-base);
  padding-inline: var(--s6);
}

.btn--pieno {
  width: 100%;
}

.icona {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   4. Navigazione
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  height: var(--altezza-nav);
  display: flex;
  align-items: center;
  transition: background-color var(--durata-breve) var(--curva),
    box-shadow var(--durata-breve) var(--curva);
}

.nav__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  max-width: var(--max-larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-x);
}

.nav__logo {
  display: flex;
  align-items: center;
  flex: none;
}

/* Il marchio ha proporzioni 4:1: si dimensiona sulla larghezza, non
   sull'altezza, altrimenti su schermo stretto invade lo spazio del menu. */
.nav__logo img {
  width: clamp(140px, 38vw, 176px);
  height: auto;
  /* Sopra l'hero il logo è scuro su fondo scuro: si schiarisce finché la
     barra è trasparente. */
  filter: brightness(0) invert(1);
  transition: filter var(--durata-breve) var(--curva), width var(--durata-breve) var(--curva);
}

.nav--attaccata {
  background: color-mix(in oklch, var(--carta) 94%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--velo);
}

.nav--attaccata .nav__logo img {
  filter: none;
}

.nav__link {
  display: none;
}

.nav__cta {
  display: none;
}

.nav__hamburger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-right: -8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--carta-chiara);
  transition: color var(--durata-breve) var(--curva);
}

.nav--attaccata .nav__hamburger {
  color: var(--petrolio);
}

.nav__hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: transform var(--durata-breve) var(--curva),
    opacity var(--durata-breve) var(--curva);
}

.nav__hamburger span + span {
  margin-top: 6px;
}

.nav__hamburger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__hamburger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Pannello del menu su schermo piccolo */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s8) var(--bordo-x) var(--s7);
  background: var(--petrolio-fondo);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 480ms var(--curva), visibility 480ms;
}

.menu[data-aperto='true'] {
  transform: translateY(0);
  visibility: visible;
}

.menu a {
  padding-block: var(--s3);
  border-bottom: 1px solid color-mix(in oklch, var(--carta) 18%, transparent);
  color: var(--carta-chiara);
  font-family: var(--font-titolo);
  font-size: var(--t-l);
  text-decoration: none;
}

.menu a:hover {
  color: var(--ambra-chiara);
}

.menu__chiudi {
  position: absolute;
  top: 14px;
  right: var(--bordo-x);
  width: 46px;
  height: 46px;
  background: transparent;
  border: 0;
  color: var(--carta);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.menu__coda {
  margin-top: var(--s5);
}

.menu__coda .btn {
  width: 100%;
}

body[data-menu='aperto'] {
  overflow: hidden;
}

@media (min-width: 900px) {
  .nav__hamburger,
  .menu {
    display: none;
  }

  .nav__link {
    display: flex;
    gap: clamp(var(--s4), 2vw, var(--s6));
    align-items: center;
  }

  .nav__link a {
    position: relative;
    padding-block: 4px;
    color: var(--carta-chiara);
    font-size: var(--t-s);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--durata-breve) var(--curva);
  }

  .nav--attaccata .nav__link a {
    color: var(--petrolio);
  }

  .nav__link a::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: var(--ambra);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--durata-breve) var(--curva);
  }

  .nav__link a:hover::after,
  .nav__link a[aria-current='true']::after {
    transform: scaleX(1);
  }

  .nav__cta {
    display: inline-flex;
    min-height: 44px;
    padding-inline: var(--s4);
    font-size: var(--t-xs);
  }

  .nav__logo img {
    width: 200px;
  }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  /* Su telefono il contenuto è centrato: in fondo finirebbe sotto la piega
     e il visitatore vedrebbe solo cielo. Da tablet in su torna in basso. */
  align-items: center;
  min-height: 86svh;
  padding-top: calc(var(--altezza-nav) + var(--s5));
  padding-bottom: var(--s7);
  overflow: hidden;
  background: var(--petrolio-fondo);
}

@media (min-width: 760px) {
  .hero {
    align-items: flex-end;
    min-height: 100svh;
    padding-bottom: clamp(var(--s6), 8vh, var(--s8));
  }
}

/* Finestre larghe ma basse (portatili, browser non a schermo intero): il
   titolo a piena scala traboccherebbe sotto la barra di navigazione. */
@media (min-width: 760px) and (max-height: 760px) {
  .hero {
    align-items: center;
    padding-bottom: var(--s6);
  }

  .hero__titolo {
    font-size: var(--t-xl);
  }

  .hero__tagline {
    margin-top: var(--s4);
    font-size: var(--t-base);
  }

  .hero__azioni {
    margin-top: var(--s5);
  }
}

/* Scena disegnata: illustrazione originale, non una fotografia di
   un'altra casa. Per passare a una foto reale, vedi il README. */
.hero__scena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* La fotografia dell'hero è chiara: senza un velo deciso il testo bianco non
   avrebbe contrasto sufficiente. Su telefono il contenuto sta al centro,
   quindi la fascia centrale è la più coperta. */
.hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in oklch, var(--petrolio-fondo) 88%, transparent) 0%,
    color-mix(in oklch, var(--petrolio-fondo) 80%, transparent) 42%,
    color-mix(in oklch, var(--petrolio-fondo) 70%, transparent) 72%,
    color-mix(in oklch, var(--petrolio-fondo) 62%, transparent) 100%
  );
}

@media (min-width: 760px) {
  .hero__velo {
    background: linear-gradient(
      to top,
      color-mix(in oklch, var(--petrolio-fondo) 92%, transparent) 0%,
      color-mix(in oklch, var(--petrolio-fondo) 74%, transparent) 42%,
      color-mix(in oklch, var(--petrolio-fondo) 46%, transparent) 72%,
      color-mix(in oklch, var(--petrolio-fondo) 56%, transparent) 100%
    );
  }
}

.hero__contenuto {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-x);
  color: var(--carta-chiara);
}

.hero__luogo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  color: var(--ambra-chiara);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__luogo::before {
  content: '';
  width: clamp(28px, 8vw, 64px);
  height: 2px;
  background: currentColor;
  flex: none;
}

.hero__titolo {
  max-width: 15ch;
  color: var(--carta-chiara);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.hero__titolo em {
  display: block;
  font-style: italic;
  color: var(--ambra-chiara);
}

.hero__tagline {
  max-width: 46ch;
  margin-top: var(--s5);
  font-size: var(--t-m);
  line-height: 1.55;
  color: color-mix(in oklch, var(--carta) 92%, var(--petrolio-fondo));
}

.hero__azioni {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s6);
}

.hero__nota {
  margin-top: var(--s5);
  font-size: var(--t-s);
  color: color-mix(in oklch, var(--carta) 74%, var(--petrolio-fondo));
}

@media (min-width: 600px) {
  .hero__azioni {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   6. Lo Chalet
   -------------------------------------------------------------------------- */

.chalet__griglia {
  display: grid;
  gap: var(--s6);
}

.chalet__disegno {
  order: -1;
  width: 100%;
  max-width: 420px;
  color: var(--salvia);
}

@media (min-width: 860px) {
  .chalet__griglia {
    /* Colonne diseguali: la simmetria perfetta è la firma del template. */
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: var(--s8);
  }

  .chalet__disegno {
    order: 0;
    max-width: none;
  }
}

.dettagli {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: var(--filetto);
}

.dettagli__voce {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
}

.dettagli__voce dt {
  flex: none;
  width: 8ch;
  color: var(--salvia);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dettagli__voce dd {
  margin: 0;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Gli interni
   -------------------------------------------------------------------------- */

.stanze {
  display: grid;
  gap: 0;
  margin-top: var(--s6);
  border-top: var(--filetto);
}

.stanza {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
  border-bottom: var(--filetto);
}

.stanza__numero {
  font-family: var(--font-titolo);
  font-size: var(--t-m);
  font-style: italic;
  color: var(--ambra);
  line-height: 1;
}

.stanza h3 {
  font-size: var(--t-l);
}

.stanza p {
  max-width: 58ch;
  color: color-mix(in oklch, var(--inchiostro) 88%, var(--carta));
}

@media (min-width: 760px) {
  .stanza {
    grid-template-columns: 4ch 1fr 1.15fr;
    gap: var(--s5);
    align-items: start;
    padding-block: var(--s6);
  }

  .stanza__numero {
    padding-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   8. Punti di forza — lista tipografica, non una griglia di card
   -------------------------------------------------------------------------- */

.pregi {
  display: grid;
  gap: 0;
  margin-top: var(--s6);
  counter-reset: pregio;
  list-style: none;
  padding: 0;
}

.pregio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: start;
  padding-block: var(--s5);
  border-top: 1px solid color-mix(in oklch, var(--carta) 22%, transparent);
}

.pregio:last-child {
  border-bottom: 1px solid color-mix(in oklch, var(--carta) 22%, transparent);
}

.pregio::before {
  counter-increment: pregio;
  content: counter(pregio, decimal-leading-zero);
  font-family: var(--font-titolo);
  font-size: var(--t-l);
  font-style: italic;
  line-height: 1;
  color: var(--ambra-chiara);
}

.pregio h3 {
  font-size: var(--t-m);
  font-weight: 500;
  color: var(--carta-chiara);
}

.pregio p {
  margin-top: var(--s2);
  max-width: 46ch;
  font-size: var(--t-s);
  color: color-mix(in oklch, var(--carta) 78%, var(--petrolio-fondo));
}

@media (min-width: 780px) {
  .pregi {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s8);
  }

  /* Con due colonne il bordo superiore della quarta voce eviterebbe di
     allinearsi: si ripristina esplicitamente. */
  .pregio:nth-last-child(2) {
    border-bottom: 1px solid color-mix(in oklch, var(--carta) 22%, transparent);
  }
}

/* --------------------------------------------------------------------------
   9. Galleria
   -------------------------------------------------------------------------- */

/* Le fotografie della casa sono quasi tutte verticali: una griglia a riquadri
   fissi le taglierebbe. Con le colonne ogni scatto tiene le sue proporzioni,
   come le foto incollate su un album. */
.galleria {
  columns: 2;
  column-gap: var(--s3);
  margin-top: var(--s6);
}

.scatto {
  position: relative;
  margin: 0 0 var(--s3);
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--carta-chiara);
  box-shadow: 0 1px 2px var(--velo);
}

/* Ogni scatto è un pulsante: si ingrandisce con il dito, con il clic o
   con Invio da tastiera. */
.scatto__apri {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--raggio);
}

.scatto img {
  width: 100%;
  height: auto;
  transition: transform 900ms var(--curva);
}

.scatto__apri:hover img,
.scatto__apri:focus-visible img {
  transform: scale(1.03);
}

/* Piccolo segno che invita a ingrandire, senza coprire la fotografia. */
.scatto__apri::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--petrolio-fondo) 74%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EE' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E")
    center / 17px no-repeat;
  opacity: 0;
  transition: opacity var(--durata-breve) var(--curva);
  pointer-events: none;
}

.scatto:hover .scatto__apri::after,
.scatto__apri:focus-visible::after {
  opacity: 1;
}

@media (hover: none) {
  /* Sul telefono non esiste il passaggio del dito sopra: il segno resta. */
  .scatto__apri::after {
    opacity: 0.9;
  }
}

.scatto figcaption {
  padding: var(--s3) var(--s3) var(--s4);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--petrolio);
}

.galleria__nota {
  margin-top: var(--s5);
  font-size: var(--t-s);
  color: color-mix(in oklch, var(--inchiostro) 72%, var(--carta));
}

@media (min-width: 720px) {
  .galleria {
    columns: 3;
    column-gap: var(--s4);
  }

  .scatto {
    margin-bottom: var(--s4);
  }
}

@media (min-width: 1100px) {
  .galleria {
    columns: 4;
  }
}

/* --------------------------------------------------------------------------
   9-bis. Visualizzatore a schermo intero
   -------------------------------------------------------------------------- */

.visore {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in oklch, var(--petrolio-fondo) 96%, black);
  color: var(--carta);
  overflow: hidden;
}

.visore::backdrop {
  background: rgb(20 32 40 / 0.92);
}

.visore[open] {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.visore__corpo {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(var(--s6), 9vh, var(--s8)) var(--s4);
}

.visore__corpo img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--raggio);
}

.visore__corpo figcaption {
  max-width: 60ch;
  text-align: center;
  font-family: var(--font-titolo);
  font-style: italic;
  font-size: var(--t-m);
  color: color-mix(in oklch, var(--carta) 92%, var(--petrolio-fondo));
}

.visore__chiudi,
.visore__nav {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 52px;
  background: color-mix(in oklch, var(--carta) 12%, transparent);
  color: var(--carta);
  border: 1px solid color-mix(in oklch, var(--carta) 26%, transparent);
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--durata-breve) var(--curva);
}

.visore__chiudi:hover,
.visore__nav:hover {
  background: color-mix(in oklch, var(--ambra) 82%, transparent);
  color: var(--petrolio-fondo);
}

.visore__chiudi {
  position: absolute;
  top: var(--s4);
  right: var(--s4);
  font-size: 26px;
}

.visore__nav {
  grid-row: 1;
  margin-inline: var(--s3);
  font-size: 34px;
  padding-bottom: 5px;
}

.visore__nav--prec {
  grid-column: 1;
}

.visore__nav--succ {
  grid-column: 3;
}

.visore__conta {
  position: absolute;
  left: 50%;
  bottom: var(--s4);
  transform: translateX(-50%);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--carta) 64%, var(--petrolio-fondo));
}

body[data-visore='aperto'] {
  overflow: hidden;
}

@media (max-width: 620px) {
  /* Su telefono si sfoglia con il dito: le frecce laterali ruberebbero
     spazio alla fotografia. */
  .visore__nav {
    position: absolute;
    bottom: calc(var(--s7) + 4px);
    margin: 0;
  }

  .visore__nav--prec {
    left: var(--s4);
  }

  .visore__nav--succ {
    right: var(--s4);
  }

  .visore__corpo {
    padding-inline: var(--s3);
  }

  .visore__corpo img {
    max-height: calc(100dvh - 220px);
  }

  .visore__corpo figcaption {
    font-size: var(--t-base);
  }
}

/* --------------------------------------------------------------------------
   10. Host
   -------------------------------------------------------------------------- */

.host {
  display: grid;
  gap: var(--s5);
}

.host__testo p {
  max-width: 56ch;
  font-size: var(--t-m);
  line-height: 1.6;
  font-family: var(--font-titolo);
}

.host__firma {
  margin-top: var(--s5);
  font-family: var(--font-titolo);
  font-style: italic;
  font-size: var(--t-l);
  color: var(--ambra);
}

@media (min-width: 800px) {
  .host {
    grid-template-columns: 5fr 7fr;
    gap: var(--s8);
    align-items: center;
  }

  .host__ritratto {
    order: -1;
  }
}

.host__ritratto {
  display: grid;
  place-items: center;
  width: min(240px, 60vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in oklch, var(--ambra-chiara) 24%, var(--carta-chiara));
  border: 1px dashed color-mix(in oklch, var(--ambra) 55%, transparent);
  color: var(--ambra);
}

.host__ritratto svg {
  width: 46%;
  height: auto;
}

/* --------------------------------------------------------------------------
   11. Dintorni — righe con timbro della distanza
   -------------------------------------------------------------------------- */

.zona + .zona {
  margin-top: var(--s7);
}

.zona__titolo {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  font-size: var(--t-l);
  color: var(--petrolio);
}

.zona__titolo::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: var(--filetto);
}

.zona__nota {
  margin-top: var(--s2);
  font-size: var(--t-s);
  font-style: italic;
  font-family: var(--font-titolo);
  color: var(--salvia);
}

.luoghi {
  margin-top: var(--s5);
  list-style: none;
  padding: 0;
}

.luogo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
  align-items: start;
  padding-block: var(--s4);
  border-bottom: var(--filetto);
}

.luogo__nome {
  font-family: var(--font-titolo);
  font-size: var(--t-m);
  font-weight: 500;
  color: var(--petrolio);
  line-height: 1.25;
}

.luogo__testo {
  grid-column: 1 / -1;
  max-width: 62ch;
  font-size: var(--t-s);
  color: color-mix(in oklch, var(--inchiostro) 82%, var(--carta));
}

/* Timbro: rettangolo tratteggiato leggermente ruotato, come inchiostrato
   a mano sulla brochure. */
.timbro {
  flex: none;
  padding: 3px var(--s3);
  border: 1px dashed var(--ambra);
  border-radius: 2px;
  color: var(--ambra);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: rotate(-2.5deg);
}

@media (min-width: 760px) {
  .luogo {
    grid-template-columns: minmax(22ch, 1fr) 2fr auto;
    align-items: baseline;
    gap: var(--s5);
  }

  .luogo__testo {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   12. Prenotazione
   -------------------------------------------------------------------------- */

.prenota {
  background: var(--petrolio-fondo);
  color: var(--carta);
}

.prenota__griglia {
  display: grid;
  gap: var(--s7);
}

@media (min-width: 940px) {
  .prenota__griglia {
    grid-template-columns: 5fr 7fr;
    gap: var(--s8);
    align-items: start;
  }
}

.prenota__intro h2 {
  color: var(--carta-chiara);
  font-size: var(--t-xl);
}

.prenota__intro p {
  max-width: 42ch;
  margin-top: var(--s4);
  color: color-mix(in oklch, var(--carta) 82%, var(--petrolio-fondo));
}

.prenota__contatto {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in oklch, var(--carta) 22%, transparent);
  color: var(--ambra-chiara);
  font-family: var(--font-titolo);
  font-size: var(--t-l);
  text-decoration: none;
}

.modulo {
  padding: clamp(var(--s5), 4vw, var(--s7));
  background: var(--carta-chiara);
  border-radius: var(--raggio-grande);
  color: var(--inchiostro);
}

.modulo__righe {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 620px) {
  .modulo__coppia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
  }
}

.campo {
  display: grid;
  gap: var(--s2);
}

.campo > label {
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--petrolio);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  background: var(--carta);
  border: 1.5px solid color-mix(in oklch, var(--petrolio) 28%, transparent);
  border-radius: var(--raggio);
  transition: border-color var(--durata-breve) var(--curva),
    box-shadow var(--durata-breve) var(--curva);
}

.campo textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.6;
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232E4F63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  background-size: 12px;
  padding-right: var(--s7);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--ambra);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ambra) 26%, transparent);
  outline: none;
}

.campo input[aria-invalid='true'],
.campo select[aria-invalid='true'],
.campo textarea[aria-invalid='true'] {
  border-color: #b4472c;
  background: color-mix(in oklch, #b4472c 6%, var(--carta));
}

.campo__errore {
  min-height: 0;
  font-size: var(--t-xs);
  font-weight: 500;
  color: #9c3c22;
}

.campo__errore:empty {
  display: none;
}

.campo__aiuto {
  font-size: var(--t-xs);
  color: color-mix(in oklch, var(--inchiostro) 68%, var(--carta));
}

.modulo__invio {
  margin-top: var(--s6);
}

.modulo__nota {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: color-mix(in oklch, var(--inchiostro) 72%, var(--carta));
}

.esito {
  display: none;
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: color-mix(in oklch, var(--salvia) 20%, var(--carta-chiara));
  border: 1px solid color-mix(in oklch, var(--salvia) 60%, transparent);
  border-radius: var(--raggio);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--petrolio);
}

.esito[data-visibile='true'] {
  display: block;
}

/* --------------------------------------------------------------------------
   12-bis. Pagine di solo testo (informativa privacy)
   -------------------------------------------------------------------------- */

.pagina-testo {
  padding-top: var(--altezza-nav);
}

.prosa-lunga {
  max-width: 72ch;
}

.prosa-lunga h2 {
  margin-top: var(--s7);
  margin-bottom: var(--s3);
  font-size: var(--t-l);
}

.prosa-lunga p,
.prosa-lunga ul {
  margin-top: var(--s4);
}

.prosa-lunga ul {
  padding-left: var(--s5);
}

.prosa-lunga li {
  margin-bottom: var(--s2);
}

.prosa-lunga a {
  color: var(--petrolio);
  text-decoration-color: var(--ambra);
  text-underline-offset: 3px;
}

.prosa-lunga a:hover {
  color: var(--ambra);
}

.prosa-lunga .btn {
  text-decoration: none;
}

.nota-piccola {
  font-size: var(--t-s);
  color: color-mix(in oklch, var(--inchiostro) 70%, var(--carta));
}

/* --------------------------------------------------------------------------
   13. Posizione
   -------------------------------------------------------------------------- */

.posizione__griglia {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 900px) {
  .posizione__griglia {
    grid-template-columns: 4fr 8fr;
    gap: var(--s7);
    align-items: start;
  }
}

.mappa {
  width: 100%;
  height: clamp(280px, 46vw, 420px);
  border: 0;
  border-radius: var(--raggio-grande);
  filter: saturate(0.86);
}

.indirizzo {
  font-family: var(--font-titolo);
  font-size: var(--t-m);
  line-height: 1.4;
  color: var(--petrolio);
}

.tempi {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: var(--filetto);
  display: grid;
  gap: var(--s3);
}

.tempo {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-size: var(--t-s);
}

.tempo span:last-child {
  font-weight: 600;
  color: var(--petrolio);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.pie {
  background: var(--petrolio-fondo);
  color: var(--carta);
  padding-block: var(--s8) var(--s6);
}

.pie__griglia {
  display: grid;
  gap: var(--s6);
}

@media (min-width: 820px) {
  .pie__griglia {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--s8);
  }
}

.pie__logo img {
  width: clamp(200px, 46vw, 260px);
  height: auto;
  filter: brightness(0) invert(1);
}

.pie__contatti {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

.pie__contatti a {
  color: var(--carta-chiara);
  font-family: var(--font-titolo);
  font-size: var(--t-m);
  text-decoration: none;
}

.pie__contatti a:hover {
  color: var(--ambra-chiara);
}

.pie__azioni {
  display: grid;
  gap: var(--s3);
  align-content: start;
}

.pie__saluto {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid color-mix(in oklch, var(--carta) 20%, transparent);
  font-family: var(--font-titolo);
  font-style: italic;
  font-size: var(--t-m);
  color: var(--carta-chiara);
}

.pie__saluto span {
  color: var(--ambra);
  font-style: normal;
}

.pie__legale {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  color: color-mix(in oklch, var(--carta) 62%, var(--petrolio-fondo));
}

.pie__legale a,
.modulo__nota a {
  color: inherit;
  text-decoration-color: var(--ambra);
  text-underline-offset: 3px;
}

.pie__legale a:hover,
.modulo__nota a:hover {
  color: var(--ambra-chiara);
}

/* --------------------------------------------------------------------------
   15. Pulsante WhatsApp flottante
   -------------------------------------------------------------------------- */

.flottante {
  position: fixed;
  right: clamp(var(--s4), 4vw, var(--s6));
  bottom: clamp(var(--s4), 4vw, var(--s6));
  z-index: var(--z-flottante);
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s5);
  background: var(--ambra);
  color: var(--petrolio-fondo);
  border: 2px solid var(--petrolio-fondo);
  border-radius: 999px;
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ombra-stampa);
  transition: transform 420ms var(--curva), opacity 420ms var(--curva);
}

.flottante span {
  display: none;
}

@media (min-width: 560px) {
  .flottante span {
    display: inline;
  }
}

.flottante[data-nascosto='true'] {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   16. Movimento
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--durata) var(--curva), transform var(--durata) var(--curva);
}

.reveal[data-visibile='true'] {
  opacity: 1;
  transform: none;
}

.reveal:nth-child(2) {
  transition-delay: 70ms;
}

.reveal:nth-child(3) {
  transition-delay: 140ms;
}

/* Coreografia d'ingresso dell'hero: una sola, sfalsata. */
.hero__contenuto > * {
  animation: entra 900ms var(--curva) backwards;
}

.hero__contenuto > *:nth-child(1) {
  animation-delay: 120ms;
}
.hero__contenuto > *:nth-child(2) {
  animation-delay: 220ms;
}
.hero__contenuto > *:nth-child(3) {
  animation-delay: 320ms;
}
.hero__contenuto > *:nth-child(4) {
  animation-delay: 420ms;
}
.hero__contenuto > *:nth-child(5) {
  animation-delay: 520ms;
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .nav,
  .menu,
  .flottante,
  .mappa {
    display: none !important;
  }

  body {
    background: none;
    color: #000;
  }
}