/* ==========================================================================
   Il Capolavoro — San Terenzo di Lerici
   Palette blu/navy su base bianco e grigio: il navy (#21262b) è il colore
   dominante — copre hero, footer e le sezioni principali del racconto —
   con pannelli bianchi e grigio chiaro come respiro fra un blocco e l'altro.
   L'accento è un blu ardesia (#778899).
   ========================================================================== */

/* --- Token ---------------------------------------------------------------- */
:root {
  /* Colore */
  --ink:        #21262b;   /* navy quasi nero — il colore dominante del sito */
  --ink-soft:   #3a4149;   /* testo di corpo sulle sezioni chiare */
  --muted:      #6d747c;   /* testo secondario sulle sezioni chiare */
  --canvas:     #21262b;   /* stesso navy: sfondo di pagina e delle sezioni scure */
  --canvas-2:   #eef0f2;   /* grigio chiaro — sezioni di respiro fra un blocco scuro e l'altro */
  --paper:      #ffffff;   /* bianco puro — schede, pannelli, pulsanti primari */
  --terra:      #778899;   /* blu ardesia — l'accento, unico colore "caldo" del sito */
  --terra-deep: #77889958;
  --blush:      #ffffff;   /* pulsante primario: bianco */
  --blush-hi:   #e4e7ea;   /* pulsante primario, al passaggio del mouse: grigio chiaro */
  --sea:        #4f7a94;   /* blu più profondo — solo per il badge "vista mare" */
  --line:       rgba(33, 38, 43, .13);
  --line-firm:  rgba(33, 38, 43, .26);
  --luce:       rgba(241, 241, 241, .8);   /* testo chiaro sulle sezioni navy */
  --luce-muted: rgba(241, 241, 241, .55);  /* testo secondario sulle sezioni navy */

  /* Tipografia — una sola famiglia, usata per tutta la sua escursione.
     Archivo è un grottesco: nessuna grazia, aperture strette, pesi fino a 900.
     I titoli usano anche l'asse di larghezza, leggermente ristretto: a corpo
     grande stringe le parole senza toglierne il peso. */
  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ui:      "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --display-vf: "wdth" 94;

  /* Ritmo verticale — unica fonte di verità per il passo delle sezioni */
  --pad-section: clamp(5.5rem, 11vw, 10.5rem);
  --gutter:      clamp(1.25rem, 5vw, 3.5rem);
  --measure:     68rem;

  /* Movimento — una sola curva, morbida, per tutto il sito */
  --ease:  cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --slow:  1.05s;
  --med:   .62s;
  --fast:  .32s;

  --radius:    22px;
  --radius-lg: 30px;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--ui);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blush); color: var(--ink); }

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

/* --- Tipografia ----------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: var(--display-vf);
  color: var(--ink);
  line-height: .98;
  letter-spacing: -.04em;    /* più il corpo cresce, più le lettere si stringono */
  font-variant-ligatures: common-ligatures;
}

/* Titoli grandi e pieni: è quello che regge una pagina senza grazie */
.t-hero    { font-size: clamp(3rem, 8vw, 7.4rem); letter-spacing: -.05em; }
.t-section { font-size: clamp(2.4rem, 5.6vw, 4.6rem); letter-spacing: -.045em; }
.t-house   { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.t-card    { font-size: clamp(1.55rem, 2.6vw, 2rem); }

/* Occhiello: maiuscoletto spaziato, la voce "da catalogo" del sito */
.eyebrow {
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.eyebrow--light { color: rgba(255, 255, 255, .82); }

.lede {
  font-size: clamp(1.06rem, 1rem + .32vw, 1.28rem);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 46ch;
}

.center { text-align: center; }
.center .lede, .lede.center { margin-inline: auto; }

/* --- Impaginazione -------------------------------------------------------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--measure));
  margin-inline: auto;
}
.wrap--wide { --measure: 84rem; }

.section { padding-block: var(--pad-section); position: relative; }
.section--paper  { background: var(--paper); }
.section--tint   { background: var(--canvas-2); }

/* --canvas è il navy dominante: ogni sezione che lo usa (Manifesto, Tariffe,
   Come arrivare) diventa una sezione scura, e il testo che vi appartiene
   passa al chiaro. Le schede bianche al loro interno (tariffe, route-card,
   map-card) restano bianche indipendentemente: hanno il proprio sfondo. */
.section--canvas { background: var(--canvas); color: var(--luce); }
/* Solo i titoli di sezione, non gli h3 interni alle schede bianche
   (route-card, tariffe) che restano scuri sul proprio sfondo chiaro. */
.section--canvas .t-hero, .section--canvas .t-section,
.section--canvas .t-house, .section--canvas .t-card { color: #fff; }
.section--canvas .eyebrow { color: var(--luce-muted); }
.section--canvas .lede { color: var(--luce); }
.section--canvas .rule { background: linear-gradient(rgba(241, 241, 241, .4), transparent); }

/* Sezione con una fotografia a piena pagina dietro il testo: stessa grammatica
   del page-hero (foto assoluta più velo), usata dentro le sezioni interne
   quando una casa ha uno scatto dedicato allo sfondo. */
.section--photo { position: relative; overflow: hidden; isolation: isolate; color: var(--luce); }
.section--photo > .section__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26, 30, 34, .88), rgba(26, 30, 34, .72) 45%, rgba(26, 30, 34, .92));
}
.section--photo .t-section { color: #fff; }
.section--photo .eyebrow { color: var(--luce-muted); }
.section--photo .slider__voce h3 { color: #fff; }
.section--photo .slider__voce p { color: var(--luce); }
.section--photo .slider__voce li { color: var(--luce-muted); border-color: rgba(241, 241, 241, .25); }
.section--photo .slider__punti button { background: rgba(241, 241, 241, .3); }
.section--photo .slider__punti button[aria-current="true"] { background: #fff; color: var(--ink); }
.section--photo .slider__punti .filo { background: rgba(241, 241, 241, .3); }
.section--photo .slider__frecce button { border-color: rgba(241, 241, 241, .4); color: #fff; }
.section--photo .slider__frecce button:hover { background: #fff; border-color: #fff; color: var(--ink); }
.section--photo .slider__card { background: rgba(241, 241, 241, .1); }

.section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head .eyebrow { margin-bottom: 1.4rem; }
.section-head .lede    { margin-top: 1.75rem; }

/* Filo sottile decorativo, usato al posto dei titoletti ripetuti */
.rule {
  width: 1px; height: clamp(48px, 7vw, 84px);
  background: linear-gradient(var(--line-firm), transparent);
  margin: 0 auto 2rem;
}

/* --- Pulsanti ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.02rem 2.15rem;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--med) var(--ease), color var(--med) var(--ease),
              transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary {
  background: var(--blush);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(33, 38, 43, .08);
}
.btn--primary:hover {
  background: var(--blush-hi);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(33, 38, 43, .34);
}

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #2d343b; transform: translateY(-2px); }

.btn--ghost { border: 1px solid var(--line-firm); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--glass {
  background: rgba(241, 241, 241, .13);
  border: 1px solid rgba(241, 241, 241, .4);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn--glass:hover { background: rgba(241, 241, 241, .95); color: var(--ink); border-color: transparent; }

.btn[disabled] { opacity: .38; pointer-events: none; }

/* Link con filo che si estende — micro-interazione discreta */
.link-underline {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); padding-bottom: .45rem; position: relative;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line-firm);
  transform: scaleX(1); transform-origin: right;
  transition: transform var(--med) var(--ease), background var(--med) var(--ease);
}
.link-underline:hover::after { background: var(--terra); }
.link-underline svg { width: 16px; transition: transform var(--med) var(--ease); }
.link-underline:hover svg { transform: translateX(5px); }

/* --- Testata -------------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.1rem, 2.4vw, 1.9rem) var(--gutter);
  transition: background var(--med) var(--ease), padding var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
}
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(18, 21, 24, .42), transparent);
  opacity: 1; transition: opacity var(--med) var(--ease);
}
.site-head.is-stuck {
  background: rgba(241, 241, 241, .9);
  backdrop-filter: blur(16px) saturate(1.4);
  padding-block: clamp(.75rem, 1.4vw, 1.05rem);
  box-shadow: 0 1px 0 var(--line);
}
.site-head.is-stuck::before { opacity: 0; }

/* Il pulsante "vetro" funziona solo sopra la foto: appena la testata
   diventa un pannello quasi bianco, il vetro sparirebbe (testo bianco su
   bianco). Torna un pulsante pieno navy, coerente col resto del sito. */
.site-head.is-stuck .btn--glass {
  background: var(--ink); border-color: transparent; color: #fff;
  backdrop-filter: none;
}
.site-head.is-stuck .btn--glass:hover { background: #2d343b; color: #fff; }

/* Il logo vero, fornito dal cliente: due file raster (bianco e navy),
   uno per sfondo scuro (foto, menù mobile chiuso) e uno per sfondo chiaro
   (testata "incollata", pannello del menù mobile aperto). Un'immagine
   raster non può cambiare colore da sola come faceva l'SVG a mano libera:
   si scambiano i due file via CSS invece di ricolorare. */
.brand {
  display: inline-flex;
  align-items: center;
  perspective: 700px;
}
.brand__lockup { height: clamp(28px, 2.8vw, 36px); width: auto; display: block; }
.brand__lockup--dark { display: none; }
.is-stuck .brand__lockup--light { display: none; }
.is-stuck .brand__lockup--dark { display: block; }

/* --- Monogramma di testata: solo il simbolo gira, la scritta resta ferma ---
   In home il marchio è scomposto in due immagini affiancate — la stessa
   icona e la stessa scritta del logo originale, solo separate — così si può
   animare l'una senza toccare l'altra. L'icona gira piano sul proprio asse
   verticale, come un'oreficeria da vetrina: un giro completo, continuo,
   senza scatti. */
.brand__icon { height: clamp(28px, 2.8vw, 36px); width: auto; display: block; animation: marchio-orbita 5.5s linear infinite; }
.brand__icon--dark { display: none; }
.is-stuck .brand__icon--light { display: none; }
.is-stuck .brand__icon--dark { display: block; }
.brand:hover .brand__icon { animation-play-state: paused; }

@keyframes marchio-orbita {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.brand__word { height: clamp(28px, 2.8vw, 36px); width: auto; display: block; }
.brand__word--dark { display: none; }
.is-stuck .brand__word--light { display: none; }
.is-stuck .brand__word--dark { display: block; }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav a {
  font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  position: relative; padding-block: .3rem;
  transition: color var(--med) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.is-stuck .nav a { color: var(--ink-soft); }
.is-stuck .nav a:hover { color: var(--ink); }

.nav .btn { padding: .72rem 1.5rem; font-size: .72rem; }

.nav-toggle { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8rem var(--gutter) clamp(9rem, 16vw, 15rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* velo atmosferico: smorza il blu cartolina e avvicina il tono alla salvia */
  filter: saturate(.72) contrast(.93) brightness(.94);
  transform: scale(1.14);
  animation: heroDrift 22s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(29, 33, 38, .5) 0%, rgba(29, 33, 38, .2) 38%, rgba(29, 33, 38, .48) 100%),
    linear-gradient(200deg, rgba(33, 38, 43, .22), rgba(119, 136, 153, .14));
}

.hero__inner { max-width: 72rem; }
.hero__inner .eyebrow { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.hero .t-hero { color: #fff; text-shadow: 0 2px 40px rgba(26, 30, 34, .3); }
.hero__sub {
  margin: clamp(1.75rem, 3.4vw, 2.5rem) auto 0;
  max-width: 40ch;
  color: rgba(255, 255, 255, .93);
  font-size: clamp(1.04rem, 1rem + .3vw, 1.22rem);
  font-weight: 400;
  line-height: 1.65;
}
.hero__cta { margin-top: clamp(2.2rem, 4vw, 3rem); display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Comparsa parola per parola.
   Il ritaglio va allargato sotto la linea di base, altrimenti la coda della g
   di "golf" resta tagliata. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
/* Ogni parola ruota attorno al proprio angolo in basso a sinistra, come una
   pagina che si raddrizza, e mette a fuoco mentre arriva. */
.word > span {
  display: inline-block;
  transform-origin: 0 100%;
  transform: translateY(112%) rotate(6deg);
  filter: blur(7px);
}

/* Nell'hero parte al caricamento della pagina */
.hero .word > span {
  transition: transform 1.35s var(--ease), filter .95s var(--ease);
  transition-delay: calc(var(--w, 0) * 88ms + 250ms);
}
.is-ready .hero .word > span { transform: none; filter: blur(0); }

/* Negli altri titoli parte quando la sezione entra nello schermo */
.reveal-words .word > span {
  transition: transform 1.2s var(--ease), filter .85s var(--ease);
  transition-delay: calc(var(--w, 0) * 72ms);
}
.reveal-words.is-in .word > span { transform: none; filter: blur(0); }

.hero__fade {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms + 800ms);
}
.is-ready .hero__fade { opacity: 1; transform: none; }

.scroll-dot {
  position: absolute; left: 50%; bottom: clamp(6.5rem, 12vw, 10rem);
  translate: -50% 0;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease), color var(--med) var(--ease);
}
.scroll-dot:hover { background: #fff; color: var(--ink); border-color: #fff; }
.scroll-dot svg { width: 15px; animation: nudge 2.6s var(--ease-io) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(-2px); opacity: .75; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* --- La collezione: le schede sospese sopra l'hero ------------------------ */
/* Ripresa dalla reference: le schede scavalcano il confine tra le sezioni. */
.collection { background: var(--paper); }
.collection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.9rem);
  margin-top: clamp(-13rem, -17vw, -9rem);
  position: relative; z-index: 5;
}
/* Stessa griglia riusata nelle schede casa per "Guarda anche": lì non c'è
   un hero alto sopra da scavalcare, quindi il margine negativo pensato per
   la home la trascinava sopra al titolo della sezione. */
.collection__grid--correlate { margin-top: 0; }

.work { display: block; }
.work__frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--canvas-2);
  aspect-ratio: 4 / 3.25;
  box-shadow: 0 26px 50px -26px rgba(29, 33, 38, .5);
}
.work__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.work:hover .work__frame img { transform: scale(1.055); filter: brightness(1.03); }

/* Il cartellino: la convenzione del museo applicata ai dati reali della casa.
   Titolo, poi filo, poi la riga tecnica — metratura, ospiti, bagni, vista. */
.label { padding: 1.5rem .25rem 0; }
.label__title {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: var(--display-vf);
  letter-spacing: -.035em;
  font-size: clamp(1.55rem, 2.5vw, 1.95rem);
  color: var(--ink); line-height: 1.1;
  transition: color var(--med) var(--ease);
}
.work:hover .label__title { color: var(--terra); }
.label__rule { height: 1px; background: var(--line); margin: .85rem 0 .8rem; }
.label__spec {
  font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); line-height: 1.9;
}
.label__spec b { font-weight: 500; color: var(--ink); }

/* Badge vista mare — l'unico elemento che usa l'azzurro */
.badge-sea {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .7rem;
  font-size: .63rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sea);
}
.badge-sea::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sea); }

/* --- Manifesto ------------------------------------------------------------ */
/* Sezione .section--canvas: sfondo navy, quindi la citazione e la firma
   restano chiare esplicitamente invece di ereditare --ink (che qui È lo sfondo). */
.manifesto { text-align: center; }
.manifesto blockquote {
  font-family: var(--display);
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  font-weight: 700; font-style: normal;
  font-variation-settings: var(--display-vf);
  letter-spacing: -.04em;
  line-height: 1.08; color: #fff;
  max-width: 20ch; margin: 0 auto;
}
.manifesto cite {
  display: block; margin-top: 1.9rem;
  font-family: var(--ui); font-style: normal;
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--luce-muted);
}

/* --- Blocchi casa (alternati) --------------------------------------------- */
.house {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.house + .house { margin-top: var(--pad-section); }
.house--flip .house__media { order: 2; }

.house__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 4.2;
  background: var(--canvas-2);
}
/* Due strati distinti, così i due movimenti non si sovrascrivono:
   la parallasse muove il contenitore, la comparsa scala l'immagine. */
.house__media-inner {
  position: absolute; inset: -8% 0;
  will-change: transform;
}
.house__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Doppia stampa: il quadro intero e il dettaglio ------------------------- */
/* Non una foto sola ma due, appoggiate come alla parete di una galleria: la
   più grande racconta l'insieme, la più piccola il dettaglio di cui parla il
   testo accanto. La comparsa scrive in `translate`, mai in `transform`: quella
   resta libera per l'inclinazione fissa e per il gesto dell'hover, così i due
   movimenti non si cancellano a vicenda. */
.house__media--stack { overflow: visible; border-radius: 0; background: none; }
.house__media--stack .frame-photo {
  position: absolute;
  padding: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 26px 48px -22px rgba(29, 38, 43, .42), 0 4px 14px -8px rgba(29, 38, 43, .16);
  opacity: 0;
  translate: 0 38px;
  transition: translate 1.15s var(--ease), opacity 1.15s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
.house__media--stack .frame-photo.is-in { opacity: 1; translate: 0 0; }
.house__media--stack .frame-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
}

.frame-photo--back  { top: 3%; left: 2%; width: 75%; aspect-ratio: 4 / 5; z-index: 1; }
.frame-photo--front { right: 3%; bottom: 1%; width: 52%; aspect-ratio: 4 / 3; z-index: 2; transition-delay: 170ms, 170ms, 0s, 0s; }

.house--a .frame-photo--back  { transform: rotate(-3deg); }
.house--a .frame-photo--front { transform: rotate(4deg); }
.house--c .frame-photo--back  { transform: rotate(-2deg); }
.house--c .frame-photo--front { right: 0%; bottom: -1%; transform: rotate(5deg); }

.house--flip .frame-photo--back  { left: auto; right: 2%; }
.house--flip .frame-photo--front { right: auto; left: 3%; }
.house--flip.house--b .frame-photo--back  { transform: rotate(3deg); }
.house--flip.house--b .frame-photo--front { transform: rotate(-4deg); }

.house__media--stack:hover .frame-photo--front,
.house__media--stack:focus-within .frame-photo--front {
  translate: 0 -10px;
  box-shadow: 0 34px 60px -20px rgba(29, 38, 43, .5), 0 10px 22px -8px rgba(29, 38, 43, .22);
}
.house--a .house__media--stack:hover .frame-photo--front,
.house--a .house__media--stack:focus-within .frame-photo--front,
.house--c .house__media--stack:hover .frame-photo--front,
.house--c .house__media--stack:focus-within .frame-photo--front { transform: rotate(1deg); }
.house--flip .house__media--stack:hover .frame-photo--front,
.house--flip .house__media--stack:focus-within .frame-photo--front { transform: rotate(-1deg); }

.house__body .eyebrow { margin-bottom: 1.15rem; }
.house__body .t-house { margin-bottom: 1.5rem; }
.house__quote {
  font-family: var(--display); font-style: normal; font-weight: 400;
  font-size: 1.12rem; line-height: 1.6; color: var(--muted);
  padding-left: 1.4rem; border-left: 1px solid var(--line-firm);
  margin-bottom: 1.75rem;
}
.house__body p { max-width: 44ch; }

.spec-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem; margin: 2.1rem 0 2.4rem;
  border-top: 1px solid var(--line);
}
.spec-list div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .82rem 0; border-bottom: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
.spec-list dt { color: var(--muted); }
.spec-list dd { color: var(--ink); margin: 0; text-align: right; }

/* --- Dotazioni: icone a filo ---------------------------------------------- */
.amenities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 5.5vw, 4.5rem) 2rem;
  text-align: center;
  max-width: 62rem; margin-inline: auto;
}
/* Tratto ispessito per reggere il confronto con il carattere grasso dei titoli */
.amenity svg {
  width: 48px; height: 48px; margin: 0 auto 1.4rem;
  stroke: var(--ink); stroke-width: 1.45; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--med) var(--ease), transform var(--slow) var(--ease);
}
.amenity:hover svg { stroke: var(--terra); transform: translateY(-4px); }
.amenity h3 {
  font-family: var(--ui); font-weight: 500;
  font-size: .77rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .5rem;
}
.amenity p { font-size: .87rem; line-height: 1.6; color: var(--muted); max-width: 24ch; margin-inline: auto; }

/* --- Il luogo -------------------------------------------------------------- */
.places {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}
.place {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  color: #fff;
  isolation: isolate;
}
/* Più alta della tessera: l'eccedenza è lo spazio che la parallasse consuma
   senza mai scoprire un bordo. */
.place img {
  position: absolute; inset: -7% 0; z-index: -2;
  width: 100%; height: 114%; object-fit: cover;
  transition: transform 1.6s var(--ease);
  will-change: translate;
}
/* Velo pesante in basso: il testo bianco deve reggere anche sulle foto chiare */
.place::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(24, 27, 31, 0) 22%, rgba(24, 27, 31, .55) 58%, rgba(24, 27, 31, .92));
  transition: background var(--slow) var(--ease);
}
.place:hover img { transform: scale(1.07); }
.place:hover::after { background: linear-gradient(rgba(24, 27, 31, .1) 18%, rgba(24, 27, 31, .65) 52%, rgba(24, 27, 31, .95)); }
/* L'ombra regge anche dove la foto sotto è chiarissima (il tagliere, il green) */
.place h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); color: #fff; margin-bottom: .5rem;
  text-shadow: 0 1px 16px rgba(21, 24, 28, .75);
}
.place p {
  font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 40ch;
  text-shadow: 0 1px 12px rgba(21, 24, 28, .8);
}

/* Ritmo della griglia: due tessere larghe, poi terzi, poi metà */
.place--a { grid-column: span 7; min-height: 400px; }
.place--b { grid-column: span 5; min-height: 400px; }
.place--c { grid-column: span 4; min-height: 300px; }
.place--d { grid-column: span 4; min-height: 300px; }
.place--e { grid-column: span 4; min-height: 300px; }
.place--f { grid-column: span 6; min-height: 330px; }
.place--g { grid-column: span 6; min-height: 330px; }

/* --- Richiesta di prenotazione -------------------------------------------- */
.booking { background: var(--ink); color: rgba(241, 241, 241, .8); }
.booking .t-section, .booking h3 { color: var(--paper); }
.booking .eyebrow { color: rgba(241, 241, 241, .55); }
.booking .lede { color: rgba(241, 241, 241, .74); }
.booking .rule { background: linear-gradient(rgba(241, 241, 241, .38), transparent); }

/* Onboarding a step: un solo passo visibile alla volta */
.wizard__progress { margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem); }
.wizard__testo {
  font-size: .67rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(241, 241, 241, .55); margin-bottom: .8rem;
}
.wizard__testo span { color: var(--paper); }
.wizard__barra { height: 2px; background: rgba(241, 241, 241, .16); border-radius: 2px; overflow: hidden; }
.wizard__barra > span {
  display: block; height: 100%; background: var(--blush);
  transition: width var(--med) var(--ease);
}

.step { display: none; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.step.is-attivo { display: block; animation: passo-avanti .6s var(--ease); }
@keyframes passo-avanti {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.step__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(241, 241, 241, .16);
}
.step__num {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--blush); line-height: 1;
}
.step__head h3 {
  font-family: var(--ui); font-weight: 500;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
}
.step__avviso {
  margin-top: 1.2rem; font-size: .78rem; color: #d08a72;
}

.wizard__nav {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid rgba(241, 241, 241, .16);
}
.wizard__nav .btn:last-child { margin-left: auto; }

/* Scelta della casa: si sceglie guardando, non da un menù a tendina */
.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.8vw, 1.5rem); }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick label {
  display: block; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(241, 241, 241, .06);
  border: 1px solid rgba(241, 241, 241, .16);
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease),
              transform var(--med) var(--ease);
}
.pick label:hover { transform: translateY(-4px); border-color: rgba(241, 241, 241, .4); }
.pick__img { aspect-ratio: 3 / 2.1; overflow: hidden; position: relative; }
.pick__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pick label:hover .pick__img img { transform: scale(1.05); }
.pick__body { padding: 1.15rem 1.25rem 1.35rem; }
.pick__body strong {
  display: block; font-family: var(--display); font-weight: 700;
  letter-spacing: -.03em;
  font-size: 1.35rem; color: var(--paper); line-height: 1.15; margin-bottom: .45rem;
}
.pick__body span {
  font-size: .67rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(241, 241, 241, .55);
}
.pick__tick {
  position: absolute; top: .9rem; right: .9rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blush); color: var(--ink);
  display: grid; place-items: center;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.pick__tick svg { width: 13px; }
.pick input:checked + label { border-color: var(--blush); background: rgba(255, 255, 255, .14); }
.pick input:checked + label .pick__tick { opacity: 1; transform: scale(1); }
.pick input:focus-visible + label { outline: 2px solid var(--blush); outline-offset: 3px; }

/* Campi */
.fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: .6rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: .67rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241, 241, 241, .58);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(241, 241, 241, .24);
  padding: .7rem 0;
  color: var(--paper);
  font-size: 1.02rem; font-weight: 400;
  border-radius: 0;
  transition: border-color var(--med) var(--ease);
}
.field input:hover, .field textarea:hover { border-color: rgba(241, 241, 241, .45); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blush);
}
.field textarea { resize: vertical; min-height: 3.5rem; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 241, 241, .3); }
.field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45; cursor: pointer;
}
/* Segnala l'errore solo dopo che la persona ha davvero scritto qualcosa:
   :user-invalid non scatta sui campi ancora intonsi. */
.field input:user-invalid { border-color: #d08a72; }

/* Contatore ospiti */
.stepper { display: flex; align-items: center; gap: 1.1rem; padding-top: .35rem; }
.stepper button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(241, 241, 241, .28);
  color: var(--paper);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stepper button:hover:not(:disabled) { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.stepper button:disabled { opacity: .25; cursor: not-allowed; }
.stepper output { font-size: 1.15rem; min-width: 2ch; text-align: center; color: var(--paper); }
.stepper small { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 241, 241, .45); }

/* Passo "quanti siete": adulti e bambini su righe separate */
.quanti { display: flex; flex-direction: column; gap: 1.7rem; max-width: 28rem; }
.quanti__riga { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.quanti__testo strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.1rem; color: var(--paper); margin-bottom: .3rem;
}
.quanti__testo span { font-size: .72rem; letter-spacing: .08em; color: rgba(241, 241, 241, .5); }

/* Riepilogo + invio */
.send {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.send__summary { font-size: .84rem; line-height: 1.65; color: rgba(241, 241, 241, .62); max-width: 42ch; }
.send__summary b { color: var(--paper); font-weight: 500; }
.send__actions { display: flex; gap: .85rem; flex-wrap: wrap; }
.send__note { flex-basis: 100%; font-size: .74rem; color: rgba(241, 241, 241, .42); }
.send__esito {
  flex-basis: 100%; font-size: .83rem; line-height: 1.55;
  padding: .85rem 1.05rem; border-radius: var(--radius);
}
.send__esito--ok { background: rgba(154, 196, 168, .12); color: #9ac4a8; border: 1px solid rgba(154, 196, 168, .3); }
.send__esito--errore { background: rgba(208, 138, 114, .12); color: #d08a72; border: 1px solid rgba(208, 138, 114, .3); }

/* --- Come arrivare --------------------------------------------------------- */
.arrive { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.routes { border-top: 1px solid var(--line); }
.routes div {
  display: grid; grid-template-columns: 5.5rem 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.routes dt { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.routes dd { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.routes dd:last-child { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }

.map-card {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); aspect-ratio: 4 / 3.4;
}
.map-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.map-card:hover img { transform: scale(1.05); }
.map-card__pin {
  position: absolute; inset: auto 1.4rem 1.4rem;
  background: rgba(241, 241, 241, .93); backdrop-filter: blur(10px);
  border-radius: 14px; padding: 1.1rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.map-card__pin strong { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); display: block; }
.map-card__pin span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.map-card__pin svg { width: 20px; stroke: var(--terra); fill: none; stroke-width: 1.2; flex: none; }

/* --- Domande --------------------------------------------------------------- */
.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.5rem 2.5rem 1.5rem 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.28rem); letter-spacing: -.02em; color: var(--ink);
  transition: color var(--med) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--terra); }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 1px;
  background: var(--ink); transition: transform var(--med) var(--ease);
}
.faq summary::before {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 1px;
  background: var(--ink); transform: rotate(90deg);
  transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
}
.faq details[open] summary::before { transform: rotate(0deg); opacity: 0; }
.faq__body { padding: 0 3rem 1.7rem 0; font-size: .96rem; color: var(--ink-soft); }
.faq__body p + p { margin-top: .8rem; }

/* --- Piè di pagina --------------------------------------------------------- */
.site-foot { background: var(--ink); color: rgba(241, 241, 241, .62); padding-block: clamp(4rem, 8vw, 6.5rem) 2.5rem; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3.5rem; }
/* Il footer è sempre su sfondo navy: basta la versione bianca del logo,
   nessuno scambio necessario. */
.foot__brand { display: inline-block; margin-bottom: 1.1rem; }
.foot__lockup { height: 26px; width: auto; display: block; }
.foot__top h4 {
  font-family: var(--ui); font-weight: 500; font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(241, 241, 241, .45); margin-bottom: 1.3rem;
}
.foot__list li + li { margin-top: .75rem; }
.foot__list a { font-size: .93rem; transition: color var(--fast) var(--ease); }
.foot__list a:hover { color: var(--paper); }
.foot__bottom {
  display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2.2rem; border-top: 1px solid rgba(241, 241, 241, .14);
  font-size: .72rem; letter-spacing: .06em; color: rgba(241, 241, 241, .4);
}

/* --- Pagina casa ----------------------------------------------------------- */
.page-hero {
  position: relative; min-height: 78svh; display: grid; align-items: end;
  padding: 9rem var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden; isolation: isolate; color: #fff;
}
.page-hero img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) contrast(.95);
  transform: scale(1.1); animation: heroDrift 18s var(--ease) forwards;
}

/* Le foto dei patii sono chiarissime: il velo deve reggere briciole di pane,
   occhiello e titolo, non solo l'ultima riga. */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(26, 30, 34, .48) 0%, rgba(26, 30, 34, .16) 28%,
                              rgba(26, 30, 34, .58) 62%, rgba(26, 30, 34, .9) 100%);
}
.page-hero h1 { color: #fff; text-shadow: 0 2px 30px rgba(21, 24, 28, .55); }
.page-hero .eyebrow { margin-bottom: 1.2rem; text-shadow: 0 1px 14px rgba(21, 24, 28, .8); }

.crumbs {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .85); margin-bottom: 1.4rem;
  text-shadow: 0 1px 14px rgba(21, 24, 28, .85);
}
.crumbs a { border-bottom: 1px solid transparent; transition: border-color var(--fast) var(--ease); }
.crumbs a:hover { border-color: currentColor; }

/* Il cartellino esteso della pagina casa */
.plate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper);
}
.plate div { padding: 1.6rem 1.5rem; border-right: 1px solid var(--line); }
.plate div:last-child { border-right: 0; }
.plate dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.plate dd { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.plate dd small { font-family: var(--ui); font-size: .8rem; color: var(--muted); }

.layout-list { display: grid; gap: 1.5rem; }
.layout-list article {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.layout-list h3 {
  font-family: var(--ui); font-weight: 500; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .25rem;
}
.layout-list p { font-size: .98rem; }

.tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.tags li {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem 1.05rem; border: 1px solid var(--line-firm); border-radius: 999px; color: var(--ink-soft);
}

/* Galleria a mosaico */
.gallery { columns: 3; column-gap: clamp(.8rem, 1.6vw, 1.3rem); }
.gallery button {
  display: block; width: 100%; margin-bottom: clamp(.8rem, 1.6vw, 1.3rem);
  break-inside: avoid; border-radius: 16px; overflow: hidden; background: var(--canvas-2);
  cursor: zoom-in;
}
.gallery img { width: 100%; transition: transform 1.2s var(--ease), opacity var(--med) var(--ease); }
.gallery button:hover img { transform: scale(1.045); }

/* Visore */
.viewer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(24, 27, 31, .96);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--med) var(--ease), visibility var(--med);
}
.viewer.is-open { opacity: 1; visibility: visible; }
.viewer img {
  max-width: 100%; max-height: 86svh; object-fit: contain; border-radius: 8px;
  transform: scale(.965); transition: transform var(--slow) var(--ease);
}
.viewer.is-open img { transform: scale(1); }
.viewer__close, .viewer__nav {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  display: grid; place-items: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.viewer__close:hover, .viewer__nav:hover { background: #fff; color: var(--ink); }
.viewer__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.viewer__nav svg, .viewer__close svg { width: 17px; }
.viewer__nav--prev { left: clamp(1rem, 3vw, 2.2rem); top: 50%; translate: 0 -50%; }
.viewer__nav--next { right: clamp(1rem, 3vw, 2.2rem); top: 50%; translate: 0 -50%; }
.viewer__count {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; translate: -50% 0;
  font-size: .72rem; letter-spacing: .2em; color: rgba(255, 255, 255, .6);
}

/* ==========================================================================
   Movimento
   Un'unica grammatica: tutto sale, tutto rallenta sulla stessa curva.
   Cambia l'ampiezza, non il gesto.
   ========================================================================== */

/* --- Comparse una tantum --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Varianti: stesso gesto, ampiezza diversa a seconda del peso dell'elemento */
.reveal--zoom  { transform: translateY(72px) scale(.93); }
.reveal--left  { transform: translateX(-52px); }
.reveal--right { transform: translateX(52px); }
.reveal--soft  { transform: translateY(22px); }

/* --- Comparsa delle immagini ----------------------------------------------- */
/* La fotografia si scopre dal basso mentre rientra dal proprio ingrandimento:
   è il gesto di una carrellata, non di una dissolvenza. */
/* Il ritaglio va sullo STRATO INTERNO, mai sul contenitore osservato:
   un elemento ritagliato a zero risulta invisibile anche all'IntersectionObserver,
   che quindi non scatterebbe mai e la foto resterebbe nascosta per sempre. */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.reveal-img.is-in > * { clip-path: inset(0 0 0 0); }

.reveal-img img,
.reveal-img .house__media-inner img {
  transform: scale(1.24);
  transition: transform 2s var(--ease);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.reveal-img.is-in img { transform: scale(1); }

/* --- Filetti che si tracciano ---------------------------------------------- */
.rule, .label__rule {
  transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--ease);
}
.is-in .label__rule, .rule.is-in { transform: scaleY(1); }

/* --- Icone che si disegnano ------------------------------------------------ */
/* La lunghezza di ogni tracciato la misura il JavaScript e la scrive in --len. */
.amenity svg > * {
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  transition: stroke-dashoffset 1.5s var(--ease);
  transition-delay: calc(var(--p, 0) * 110ms);
}
.amenity.is-in svg > * { stroke-dashoffset: 0; }

/* --- Nastro dei luoghi ------------------------------------------------------ */
/* L'unico movimento continuo del sito: una riga che scorre piano,
   come i nomi delle fermate su un display. */
.ticker {
  overflow: hidden;
  padding-block: clamp(2rem, 3.5vw, 3rem);
  border-block: 1px solid var(--line);
  background: var(--paper);
}
.ticker__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: scorri 46s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: var(--display-vf);
  letter-spacing: -.035em;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  color: var(--ink); white-space: nowrap;
}
.ticker__track i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra); flex: none; opacity: .55;
}
@keyframes scorri { to { transform: translateX(-50%); } }

/* --- Galleria che si apre scorrendo ------------------------------------------
   Due tempi, guidati dalla posizione della pagina (i valori li scrive main.js
   nelle variabili --g-*, qui c'è solo la scenografia):
   1. la cornice si allarga da riquadro a schermo intero;
   2. la griglia di foto ruota dal fondo verso chi guarda, mentre le quattro
      colonne scorrono a velocità diverse.
   Lo spostamento delle colonne è in vh e non in percentuale della colonna:
   così non dipende da quante foto ci sono e il fondo non si scopre mai. */
.galleria {
  position: relative;
  height: var(--g-corsa, 340vh);
  background: var(--ink);
  --g-fondo: #191d21;
}
.galleria__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.galleria__cornice {
  position: relative;
  width: var(--g-larghezza, 90vw);
  height: var(--g-altezza, 80vh);
  max-width: 1920px;
  border-radius: var(--g-raggio, 30px);
  border: var(--g-bordo, 3px) solid rgba(241, 241, 241, .16);
  background: var(--g-fondo);
  overflow: hidden;
}
.galleria__scena {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
  pointer-events: none;
}
.galleria__matrice {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  width: 120vw; height: 150vh;
  transform-style: preserve-3d;
  transform:
    translateZ(var(--g-z, -800px))
    rotateX(var(--g-rx, 25deg))
    rotateY(var(--g-ry, -45deg))
    rotateZ(var(--g-rz, 15deg));
  will-change: transform;
}
.galleria__col {
  flex: none;
  width: clamp(160px, 21vw, 330px);
  display: flex; flex-direction: column;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  transform: translateY(var(--g-y, 0));
  will-change: transform;
}
.galleria__foto {
  flex: none; aspect-ratio: 3 / 4;
  overflow: hidden; background: #0f1214;
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .9);
}
.galleria__foto img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .84;
}
/* Sfuma i quattro lati verso il fondo della cornice: la griglia non finisce
   mai con un taglio netto, come nel riferimento. */
.galleria__vignetta {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow:
    inset 0 110px 150px -60px var(--g-fondo),
    inset 0 -110px 150px -60px var(--g-fondo),
    inset 150px 0 150px -60px var(--g-fondo),
    inset -150px 0 150px -60px var(--g-fondo);
}

@media (max-width: 760px) {
  .galleria { --g-corsa: 280vh; }
  .galleria__col:nth-child(4) { display: none; }
  .galleria__matrice { width: 132vw; }
  .galleria__col { width: 34vw; }
}

/* --- Etichetta che segue il puntatore --------------------------------------- */
.cursore {
  position: fixed; top: 0; left: 0; z-index: 80;
  padding: .7rem 1.3rem; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  will-change: transform;
}
.cursore.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* --- Testata che si ritrae --------------------------------------------------- */
/* Si ritrae muovendo `top`, non `transform`: un antenato trasformato diventa
   il blocco contenitore dei discendenti `position: fixed`, e il menù a tutto
   schermo resterebbe prigioniero dentro la testata. */
.site-head {
  transition: background var(--med) var(--ease), padding var(--med) var(--ease),
              box-shadow var(--med) var(--ease), top .55s var(--ease);
}
.site-head.is-hidden { top: -170px; }
.nav-open .site-head { top: 0; }

/* --- Adattamento ----------------------------------------------------------- */
@media (max-width: 960px) {
  .collection__grid { grid-template-columns: 1fr; margin-top: clamp(-9rem, -14vw, -6rem); gap: 2.5rem; }
  .collection__grid--correlate { margin-top: 0; }
  .house, .house--flip { grid-template-columns: 1fr; gap: 2.5rem; }
  .house--flip .house__media { order: 0; }
  .house__media { aspect-ratio: 4 / 3.2; }
  /* Sul riquadro corto del mobile la stampa di sfondo, tarata sul verticale
     da scrivania, sporgerebbe sul testo sotto: qui si accorcia. */
  .frame-photo--back { aspect-ratio: 4 / 3.4; }
  .picks { grid-template-columns: 1fr; }
  .arrive { grid-template-columns: 1fr; }
  .gallery { columns: 2; }
  .amenities { grid-template-columns: repeat(2, 1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .place--a, .place--b, .place--c, .place--d, .place--e, .place--f, .place--g { grid-column: span 6; min-height: 280px; }

  .nav-toggle {
    display: grid; place-items: center; width: 42px; height: 42px;
    color: #fff; z-index: 101;
  }
  .is-stuck .nav-toggle, .nav-open .nav-toggle { color: var(--ink); }
  .nav-toggle svg { width: 22px; stroke: currentColor; stroke-width: 1.2; fill: none; }

  /* Il marchio resta sopra il pannello, altrimenti sparisce sotto la crema.
     Il pannello aperto è chiaro come la testata "incollata": stesso scambio. */
  .brand { position: relative; z-index: 101; }
  .nav-open .brand__lockup--light { display: none; }
  .nav-open .brand__lockup--dark { display: block; }
  .nav-open .brand__icon--light { display: none; }
  .nav-open .brand__icon--dark { display: block; }
  .nav-open .brand__word--light { display: none; }
  .nav-open .brand__word--dark { display: block; }

  /* Niente sfocatura dello sfondo su mobile: anche `backdrop-filter` crea un
     blocco contenitore e imprigionerebbe il menù dentro la testata. */
  .site-head.is-stuck { backdrop-filter: none; background: rgba(241, 241, 241, .97); }

  /* Le sigle di lingua erano bianche sulla crema del pannello: invisibili */
  .lingue { margin-block: .5rem; font-size: .82rem; letter-spacing: .16em; }
  .nav-open .lingue a { color: var(--muted); padding: .5rem .7rem; }
  .nav-open .lingue a[aria-current] { color: var(--ink); }
  .nav-open .lingue s { color: var(--line-firm); }

  .nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center;
    gap: 2rem;
    background: var(--paper);
    clip-path: circle(0% at calc(100% - 3rem) 3rem);
    transition: clip-path .85s var(--ease);
    pointer-events: none;
  }
  .nav-open .nav { clip-path: circle(150% at calc(100% - 3rem) 3rem); pointer-events: auto; }
  .nav a { color: var(--ink); font-size: 1.05rem; letter-spacing: .18em; }

  /* Sul pannello bianco il vetro non si vede, e --blush ora È bianco:
     il pulsante torna pieno navy, non bianco su bianco. */
  .nav .btn--glass {
    background: var(--ink); border-color: transparent; color: #fff;
    backdrop-filter: none;
    font-size: .78rem; padding: 1rem 2.2rem; margin-top: 1rem;
  }
  .nav .btn--glass:hover { background: #2d343b; color: #fff; }
}

@media (max-width: 620px) {
  .fields { grid-template-columns: 1fr; }
  .spec-list { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .foot__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .plate div { border-right: 0; border-bottom: 1px solid var(--line); }
  .layout-list article { grid-template-columns: 1fr; gap: .6rem; }
  .routes div { grid-template-columns: 4.5rem 1fr; }
  .routes dd:last-child { grid-column: 2; }

  /* "Lasciati ispirare"/"Sentieri e borghi": impilate una sotto l'altra
     allungavano la pagina di sette schermate. In orizzontale, due per
     volta, si scorrono con il pollice — stessa logica della scelta
     della casa qui sopra. */
  .places {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1.1rem;
    scrollbar-width: none;
  }
  .places::-webkit-scrollbar { display: none; }
  .place, .place--a, .place--b, .place--c, .place--d, .place--e, .place--f, .place--g {
    flex: 0 0 47%; scroll-snap-align: start; min-height: 230px;
  }
  .place h3 { font-size: 1.1rem; }
  .place p { font-size: .8rem; }

  .send { flex-direction: column; align-items: flex-start; }
  .send__actions { width: 100%; }
  .send__actions .btn { flex: 1; justify-content: center; }
}

/* --- Movimento ridotto ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal--zoom, .reveal--left, .reveal--right, .reveal--soft { opacity: 1; transform: none; }
  .reveal-img > * { clip-path: none; }
  .reveal-img img { transform: none; }
  .word > span, .hero .word > span, .reveal-words .word > span { transform: none; filter: none; }
  .hero__fade { opacity: 1; transform: none; }
  .hero__media img { transform: scale(1); }
  .rule, .label__rule { transform: none; }
  .step.is-attivo { animation: none; }
  /* La galleria non si apre più scorrendo: resta la composizione finale,
     ferma, alta quanto lo schermo (i valori li fissa main.js). */
  .galleria { --g-corsa: 100vh; }
  .amenity svg > * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ticker__track { animation: none; }
  .cursore { display: none; }
  .site-head.is-hidden { top: 0; }
}

/* --- Stampa ---------------------------------------------------------------- */
@media print {
  .site-head, .scroll-dot, .booking, .viewer { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Sezioni aggiunte
   ========================================================================== */

/* --- Prezzo nelle etichette e nelle schede --------------------------------- */
.prezzo {
  display: block; margin-top: .7rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terra);
}
.prezzo--vuoto { color: var(--muted); font-weight: 500; }

/* --- Recensioni --------------------------------------------------------------
   Colonne che risalgono senza fine, ciascuna a una velocità leggermente
   diversa: due già dal telefono più piccolo (mai una sola, altrimenti la
   sfilata non si legge come tale), tre da tablet in su. Il contenuto di
   ogni colonna è raddoppiato nell'HTML: a metà corsa la colonna è tornata
   al punto di partenza e il ciclo riparte senza scatto. Si ferma passandoci
   sopra — su schermo touch, dove non c'è un hover, semplicemente non si ferma. */
.voci {
  display: flex; justify-content: center; gap: clamp(.7rem, 2.2vw, 1.8rem);
  max-height: 40rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.voci__col { flex: 1 1 0; min-width: 0; overflow: hidden; display: none; }
.voci__col:nth-child(-n+2) { display: block; }
.voci__track {
  display: flex; flex-direction: column; gap: clamp(.7rem, 2.2vw, 1.8rem);
  animation: risali var(--durata, 38s) linear infinite;
}
.voci__col:hover .voci__track { animation-play-state: paused; }
@keyframes risali { to { transform: translateY(-50%); } }

.voce {
  background: var(--paper); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.8vw, 2.3rem);
  display: flex; flex-direction: column; gap: clamp(.8rem, 2vw, 1.3rem);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -28px rgba(29, 33, 38, .35);
}
.voce blockquote {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(.86rem, 1.6vw, 1.22rem); line-height: 1.42;
  letter-spacing: -.02em; color: var(--ink);
}
.voce__chi { display: flex; align-items: center; gap: .7rem; }
.voce__avatar {
  width: clamp(1.8rem, 4vw, 2.3rem); height: clamp(1.8rem, 4vw, 2.3rem);
  border-radius: 50%; flex: none;
  background: var(--terra); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: clamp(.74rem, 1.6vw, .92rem);
}
.voce__nome { font-size: clamp(.76rem, 1.4vw, .85rem); font-weight: 600; color: var(--ink); line-height: 1.3; }
.voce__meta {
  font-size: clamp(.58rem, 1vw, .68rem); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); line-height: 1.3;
}

.recensioni-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.recensioni-cta p { max-width: 40ch; margin: 0 auto 1.4rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }

@media (min-width: 760px) { .voci__col:nth-child(3) { display: block; } }

/* --- Mappa del golfo -------------------------------------------------------- */
.mappa { position: relative; max-width: 46rem; margin-inline: auto; }
.mappa svg { width: 100%; aspect-ratio: 1 / 1; overflow: visible; }
.mappa .anello { fill: none; stroke: var(--line-firm); stroke-dasharray: 2 7; }
.mappa__nota {
  margin-top: 1.4rem; text-align: center;
  font-size: .72rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.mappa .anello-eti {
  font-family: var(--ui); font-size: 8px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; fill: var(--muted);
}
.mappa .casa { fill: var(--terra); }
.mappa .casa-alone { fill: var(--terra); opacity: .18; animation: pulsa 3.4s var(--ease-io) infinite; }
@keyframes pulsa { 0%,100% { r: 14; opacity: .18; } 50% { r: 22; opacity: 0; } }
.mappa .casa-eti {
  font-family: var(--display); font-size: 11px; font-weight: 800;
  letter-spacing: -.02em; fill: var(--ink);
}

.pin { cursor: default; }
.pin circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.1; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.pin text {
  font-family: var(--ui); font-size: 9.5px; font-weight: 600;
  letter-spacing: .04em; fill: var(--ink-soft);
  transition: fill .4s var(--ease);
}
.pin .tempo { font-size: 8px; font-weight: 500; fill: var(--muted); letter-spacing: .1em; }
.pin:hover circle { fill: var(--terra); stroke: var(--terra); }
.pin:hover text { fill: var(--ink); }

/* Le pastiglie compaiono a scaglioni quando la mappa entra in vista */
.mappa .pin { opacity: 0; transform: scale(.5); transform-origin: center; transform-box: fill-box; }
.mappa.is-in .pin {
  opacity: 1; transform: scale(1);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--k, 0) * 75ms + 300ms);
}
.mappa .anello { stroke-dashoffset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.mappa.is-in .anello { opacity: 1; transition-delay: calc(var(--r, 0) * 160ms); }

/* --- Calendario disponibilità ------------------------------------------------ */
.calendario { margin-top: 2.5rem; }
.calendario__mesi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem;
}

/* Ogni mese è una scheda a sé — non più una semplice lista di numeri: bordo
   sottile, angoli arrotondati come il resto del sito, respiro interno. */
.mese {
  background: rgba(241, 241, 241, .04);
  border: 1px solid rgba(241, 241, 241, .12);
  border-radius: var(--radius);
  padding: 1.1rem 1rem 1.2rem;
}
.mese__nome {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(241, 241, 241, .75); margin-bottom: .9rem;
}
.mese__giorni {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(241, 241, 241, .38); text-align: center; margin-bottom: .5rem;
}
.mese__griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mese__griglia span {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: .74rem; font-weight: 500; border-radius: 8px;
  color: rgba(241, 241, 241, .85);
  background: rgba(241, 241, 241, .07);
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.mese__griglia .vuoto { background: none; }

/* Libero e cliccabile: si comporta come un vero selettore, non solo un
   riferimento — cliccando un giorno si imposta l'arrivo o la partenza. */
.mese__griglia button.libero { cursor: pointer; }
.mese__griglia button.libero:hover {
  background: rgba(241, 241, 241, .16); border-color: rgba(241, 241, 241, .3);
  transform: translateY(-1px);
}
.mese__griglia .oggi { border-color: var(--terra); color: #fff; font-weight: 700; }
.mese__griglia .pieno {
  background: none; color: rgba(241, 241, 241, .28);
  text-decoration: line-through; cursor: not-allowed;
}
.mese__griglia .passato { opacity: 0; pointer-events: none; }

/* Selezione: l'arrivo e la partenza pieni, i giorni fra i due con lo sfondo
   dell'accento — lo stesso linguaggio dei chip di disponibilità sotto. */
.mese__griglia .estremo {
  background: var(--terra); border-color: var(--terra); color: #fff; font-weight: 700;
}
.mese__griglia .intervallo { background: rgba(119, 136, 153, .3); color: #fff; }

.legenda { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.4rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(241, 241, 241, .5); }
.legenda span { display: inline-flex; align-items: center; gap: .5rem; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; }
.legenda .libero { background: rgba(241, 241, 241, .18); }
.legenda .occupato { background: none; border: 1px solid rgba(241, 241, 241, .28); position: relative; }
.legenda .occupato::after { content: ""; position: absolute; inset: 45% 1px; height: 1px; background: rgba(241, 241, 241, .5); }

/* --- Controllo disponibilità dal vivo ---------------------------------- */
/* Compare sotto le date scelte: interroga Airbnb (che riflette anche
   Booking) proprio in quel momento — non è mai una copia salvata. */
.disponibilita {
  margin-top: 1.6rem; padding: 1.1rem 1.3rem; border-radius: var(--radius);
  background: rgba(241, 241, 241, .05); border: 1px solid rgba(241, 241, 241, .14);
  display: flex; align-items: flex-start; gap: .9rem;
  font-size: .88rem; color: rgba(241, 241, 241, .85); line-height: 1.55;
  opacity: 0; transform: translateY(6px); max-height: 0; overflow: hidden;
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease),
              max-height var(--med) var(--ease), padding var(--med) var(--ease), margin var(--med) var(--ease);
}
.disponibilita.is-visibile { opacity: 1; transform: none; max-height: 20rem; }

.disponibilita__icona { flex: none; width: 22px; height: 22px; margin-top: .1rem; }
.disponibilita__icona svg { width: 100%; height: 100%; stroke-width: 1.6; fill: none; }

.disponibilita--verifica .disponibilita__icona { color: rgba(241, 241, 241, .5); }
.disponibilita--verifica .disponibilita__icona svg { animation: girare 1s linear infinite; }
.disponibilita--libero .disponibilita__icona { color: #9ac4a8; }
.disponibilita--occupato .disponibilita__icona { color: #d08a72; }
.disponibilita--errore .disponibilita__icona { color: rgba(241, 241, 241, .5); }

@keyframes girare { to { transform: rotate(360deg); } }

.disponibilita__corpo { min-width: 0; }
.disponibilita__suggerimenti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.disponibilita__chip {
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .55rem 1rem; border-radius: 999px;
  background: rgba(241, 241, 241, .1); border: 1px solid rgba(241, 241, 241, .22); color: #fff;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.disponibilita__chip:hover { background: var(--blush); border-color: var(--blush); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .disponibilita--verifica .disponibilita__icona svg { animation: none; }
}

/* --- Griglia editoriale asimmetrica delle case ------------------------------- */
/* Ogni casa ha un peso diverso nella pagina: la più grande occupa più spazio,
   la più raccolta ne occupa meno. La misura racconta già qualcosa. */
.house--a .house__media { aspect-ratio: 4 / 4.6; }
.house--b .house__media { aspect-ratio: 4 / 3.4; }
.house--c .house__media { aspect-ratio: 4 / 5.1; }

.house--a { grid-template-columns: 1fr 1.15fr; }
.house--b { grid-template-columns: 1.2fr 1fr; }
.house--c { grid-template-columns: 1fr 1.05fr; }

.house--b .house__body { padding-top: clamp(0rem, 4vw, 3.5rem); }
.house--c .house__body { padding-bottom: clamp(0rem, 4vw, 3rem); }

/* --- Selettore di lingua ------------------------------------------------------ */
.lingue { display: inline-flex; align-items: center; gap: .1rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; }
.lingue a { padding: .35rem .5rem; color: rgba(255, 255, 255, .6); transition: color var(--fast) var(--ease); }
.lingue a:hover, .lingue a[aria-current] { color: #fff; }
.is-stuck .lingue a { color: var(--muted); }
.is-stuck .lingue a:hover, .is-stuck .lingue a[aria-current] { color: var(--ink); }
.lingue s { text-decoration: none; opacity: .35; }

/* --- Transizioni fra le pagine ------------------------------------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }

@media (max-width: 960px) {
  .house--a, .house--b, .house--c { grid-template-columns: 1fr; }
  .house--a .house__media, .house--b .house__media, .house--c .house__media { aspect-ratio: 4 / 3.2; }
  .house--b .house__body, .house--c .house__body { padding: 0; }
  .mappa { max-width: 100%; }
  .mappa .pin text { font-size: 12px; }
  .mappa .pin .tempo { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mappa .pin { opacity: 1; transform: none; }
  .mappa .anello { opacity: 1; }
  .mappa .casa-alone { animation: none; }
  @view-transition { navigation: none; }
}

/* --- Hero con video --------------------------------------------------------- */
/* Stesse regole della fotografia, così il passaggio all'uno o all'altra
   non richiede di toccare altro. */
.hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.72) contrast(.93) brightness(.94);
}

/* --- Transizione condivisa fra scheda e pagina casa -------------------------- */
::view-transition-group(*) { animation-duration: .62s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.pin .filo { stroke: var(--line-firm); stroke-width: .8; fill: none; }

/* --- Schede dei luoghi sulla mappa ------------------------------------------ */
.mappa { position: relative; }
.mappa__schede { position: absolute; inset: 0; pointer-events: none; }

.pin .bersaglio { fill: transparent; stroke: none; }
.pin { cursor: pointer; }
.pin:focus-visible { outline: none; }
.pin:focus-visible circle:not(.bersaglio) { fill: var(--terra); stroke: var(--terra); r: 6; }

.luogo-card {
  position: absolute;
  width: 208px;
  translate: -50% 0;
  background: var(--paper);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 44px -18px rgba(29, 33, 38, .45);
  border: 1px solid var(--line);
  opacity: 0;
  transform: scale(.82);
  transform-origin: center bottom;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  z-index: 6;
}
/* Sopra il punto se c'è spazio, sotto se il punto è troppo in alto */
.luogo-card[data-verso="su"]  { margin-top: -18px; transform-origin: center bottom; translate: -50% -100%; }
.luogo-card[data-verso="giu"] { margin-top: 22px;  transform-origin: center top; }
.luogo-card.is-on { opacity: 1; transform: scale(1); }

.luogo-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.luogo-card__testo { padding: .85rem 1rem 1rem; }
.luogo-card__testo strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; letter-spacing: -.025em; color: var(--ink); line-height: 1.15;
}
.luogo-card__testo span {
  display: block; margin-top: .25rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.luogo-card__testo em {
  display: block; margin-top: .7rem; font-style: normal;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--terra);
}

@media (max-width: 700px) {
  .luogo-card { width: 168px; }
  .luogo-card__testo { padding: .7rem .8rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .luogo-card { transition: opacity .01ms; transform: none; }
  .luogo-card.is-on { transform: none; }
}

/* ==========================================================================
   Slider delle dotazioni
   A sinistra il testo che cambia, a destra le fotografie che scorrono.
   ========================================================================== */
.slider {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* --- Colonna di sinistra ---------------------------------------------------- */
.slider__testo { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* I pallini numerati: una fila verticale, come nella reference */
.slider__punti {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding-top: .4rem; list-style: none; padding-inline: 0;
}
.slider__punti li { display: grid; place-items: center; }
.slider__punti button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-firm);
  display: grid; place-items: center;
  font-size: 0; color: transparent;
  transition: width .5s var(--ease), height .5s var(--ease),
              background .5s var(--ease), font-size .5s var(--ease);
}
.slider__punti button[aria-current="true"] {
  width: 26px; height: 26px;
  background: var(--ink); color: var(--paper);
  font-size: .62rem; font-weight: 600;
}
.slider__punti .filo {
  width: 1px; height: 22px; background: var(--line-firm); flex: none;
}

/* L'altezza la scrive il JavaScript scheda per scheda (vedi main.js):
   qui serve solo la transizione morbida fra un'altezza e l'altra. */
.slider__voci { position: relative; height: 15rem; transition: height .45s var(--ease); overflow: visible; }
.slider__voce {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events: none;
}
.slider__voce.is-on { opacity: 1; transform: none; pointer-events: auto; }

.slider__voce svg {
  width: 34px; height: 34px; margin-bottom: 1.1rem;
  stroke: var(--terra); stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.slider__voce h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -.04em; margin-bottom: .9rem;
}
.slider__voce p { font-size: 1rem; line-height: 1.65; max-width: 34ch; color: var(--ink-soft); }
.slider__voce ul {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem;
  list-style: none; padding: 0;
}
.slider__voce li {
  font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
}

.slider__frecce { display: flex; gap: .6rem; margin-top: 1.8rem; }
.slider__frecce button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-firm); color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.slider__frecce button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slider__frecce svg { width: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* --- Pista delle fotografie -------------------------------------------------- */
.slider__pista { overflow: hidden; border-radius: var(--radius); }
.slider__carrello {
  display: flex; gap: clamp(.8rem, 1.6vw, 1.3rem);
  transition: transform .75s var(--ease);
}
.slider__card {
  flex: 0 0 clamp(200px, 30%, 300px);
  border-radius: var(--radius); overflow: hidden;
  background: var(--canvas-2);
  aspect-ratio: 3 / 4;
  position: relative;
  opacity: .42;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.slider__card.is-on { opacity: 1; }
.slider__card img { width: 100%; height: 100%; object-fit: cover; }
.slider__card figcaption {
  position: absolute; inset: auto 0 0; padding: 1.4rem 1.2rem .95rem;
  background: linear-gradient(transparent, rgba(24, 27, 31, .82));
  color: #fff; font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .slider { grid-template-columns: 1fr; gap: 2.5rem; }
  .slider__voci { min-height: 17rem; }
  .slider__card { flex: 0 0 62%; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .slider__testo { grid-template-columns: 1fr; gap: 1.5rem; }
  .slider__punti { flex-direction: row; padding-top: 0; }
  .slider__punti .filo { width: 22px; height: 1px; }
  .slider__card { flex: 0 0 78%; }
}

/* ==========================================================================
   Galleria orizzontale
   Una fila che scorre, con formati diversi. Clic per aprire a schermo intero.
   ========================================================================== */
.galleria-h {
  display: flex; gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line-firm) transparent;
  /* esce dal contenitore per toccare i bordi dello schermo */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.galleria-h::-webkit-scrollbar { height: 5px; }
.galleria-h::-webkit-scrollbar-track { background: var(--line); border-radius: 99px; }
.galleria-h::-webkit-scrollbar-thumb { background: var(--line-firm); border-radius: 99px; }

.galleria-h button {
  flex: none;
  height: clamp(300px, 48vh, 460px);
  border-radius: 18px; overflow: hidden;
  background: var(--canvas-2);
  scroll-snap-align: center;
  cursor: zoom-in;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* Formati alternati: il ritmo nasce dalla forma, non da un effetto */
.galleria-h button:nth-child(4n+1) { aspect-ratio: 3 / 2; }
.galleria-h button:nth-child(4n+2) { aspect-ratio: 2 / 3; }
.galleria-h button:nth-child(4n+3) { aspect-ratio: 1 / 1; }
.galleria-h button:nth-child(4n)   { aspect-ratio: 4 / 3; }

.galleria-h img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.galleria-h button:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 44px -22px rgba(29, 33, 38,.5); }
.galleria-h button:hover img { transform: scale(1.06); }
.galleria-h button:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

.galleria-guida {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: 1.2rem; flex-wrap: wrap;
}
.galleria-guida p { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.galleria-frecce { display: flex; gap: .6rem; }
.galleria-frecce button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-firm); color: var(--ink);
  display: grid; place-items: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.galleria-frecce button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.galleria-frecce button:disabled { opacity: .3; pointer-events: none; }
.galleria-frecce svg { width: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Su telefono l'altezza legata al vh rendeva le foto orizzontali più larghe
   dello schermo: si vedeva solo un pezzo per volta. Le dimensioniamo sulla
   larghezza, come le altre gallerie mobile del sito, così ogni foto sta intera. */
@media (max-width: 900px) {
  .galleria-h { scroll-snap-type: x mandatory; gap: .8rem; }
  .galleria-h button,
  .galleria-h button:nth-child(4n+1),
  .galleria-h button:nth-child(4n+2),
  .galleria-h button:nth-child(4n+3),
  .galleria-h button:nth-child(4n) {
    flex: 0 0 78%;
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }
}
@media (max-width: 560px) {
  .galleria-h button,
  .galleria-h button:nth-child(4n+1),
  .galleria-h button:nth-child(4n+2),
  .galleria-h button:nth-child(4n+3),
  .galleria-h button:nth-child(4n) {
    flex: 0 0 86%;
    aspect-ratio: 5 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider__carrello { transition: none; }
  .slider__voce { transition: none; }
  .galleria-h { scroll-behavior: auto; }
}

/* --- Scelta della casa: in fila su mobile ------------------------------------- */
/* Impilate verticalmente le tre schede allungavano la pagina di tre schermate
   prima ancora di arrivare alle date. In orizzontale si scorrono con il pollice. */
@media (max-width: 900px) {
  .picks {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: .25rem var(--gutter) 1.1rem;
    scrollbar-width: none;
  }
  .picks::-webkit-scrollbar { display: none; }

  .pick { flex: 0 0 74%; scroll-snap-align: center; }
  .pick__img { aspect-ratio: 3 / 2; }
  .pick label:hover { transform: none; }

  /* Un accenno di guida: le schede non finiscono dove finisce lo schermo */
  .picks::after { content: ""; flex: 0 0 .25rem; }
}

@media (max-width: 560px) {
  .pick { flex: 0 0 82%; }
}

/* Suggerimento di scorrimento sotto le schede, solo dove servono */
.picks-nota {
  display: none;
  margin-top: .2rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(241, 241, 241, .45);
}
@media (max-width: 900px) { .picks-nota { display: block; } }

/* --- Come arrivare: tre card per mezzo di trasporto -------------------------- */
/* Non più un elenco lungo di sei righe: tre card, ciascuna con le sue due
   opzioni dentro. Si legge in un colpo d'occhio anche da lontano. */
.route-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.route-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
}
.route-card__testa { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.route-card svg {
  width: 22px; height: 22px; flex: none;
  stroke: var(--terra); stroke-width: 1.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.route-card h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: 1.05rem; color: var(--ink);
}
.route-card dl { border-top: 1px solid var(--line); }
.route-card > dl > div {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.route-card dt { font-size: .84rem; color: var(--ink-soft); line-height: 1.3; }
.route-card dd {
  margin: 0; flex: none; font-family: var(--display); font-weight: 700;
  font-size: .92rem; color: var(--ink); white-space: nowrap;
}

@media (max-width: 760px) {
  .route-cards { grid-template-columns: 1fr; }
}

/* --- Assistente "Silvia" ---------------------------------------------------
   Bolla fluttuante presente su ogni pagina, montata da assets/js/assistente.js.
   Nessun colore o raggio nuovo: solo le variabili già definite in cima al file. */
.assistente {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 150; font-family: var(--ui);
}

.assistente__bolla {
  position: relative;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(33, 38, 43, .45);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.assistente__bolla:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(33, 38, 43, .55); }
.assistente__bolla svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.5; fill: none; }

.assistente__badge {
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--terra); color: #fff;
  font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--paper);
}
.assistente.is-notificato .assistente__badge { display: none; }

.assistente__pannello {
  position: absolute; right: 0; bottom: calc(100% + 1rem);
  width: min(380px, calc(100vw - 2.5rem));
  height: min(580px, calc(100vh - 8rem));
  background: var(--paper);
  border-radius: 26px;
  box-shadow: 0 40px 80px -24px rgba(21, 24, 28, .28), 0 4px 18px -4px rgba(21, 24, 28, .12);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.assistente.is-aperto .assistente__pannello { opacity: 1; transform: none; pointer-events: auto; }

/* Intestazione chiara e minimale: niente più fascia navy piena, solo un
   filo sottile a separare dal log, come le chat "app mobile" di riferimento. */
.assistente__intestazione {
  flex: none; display: flex; align-items: center; gap: .8rem;
  padding: 1.15rem 1.2rem; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.assistente__avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--terra); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
}
.assistente__intestazione h2 { font-size: .93rem; font-weight: 700; color: var(--ink); }
.assistente__intestazione p { font-size: .7rem; color: var(--muted); margin-top: .1rem; }
.assistente__chiudi {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.assistente__chiudi:hover { background: var(--canvas-2); color: var(--ink); }
.assistente__chiudi svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }

.assistente__log {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 1.15rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--canvas-2);
}

/* Ogni riga del bot ha una piccola firma (l'iniziale di Silvia) accanto alla
   bolla, come nei riferimenti di chat "app mobile": la conversazione sembra
   sempre condotta da una persona, non da un blocco di testo anonimo. */
.assistente__msg { max-width: 88%; font-size: .87rem; line-height: 1.55; }
.assistente__msg--bot { align-self: flex-start; display: flex; gap: .55rem; }
.assistente__msg--bot .assistente__avatar { width: 26px; height: 26px; font-size: .72rem; margin-top: .2rem; }
.assistente__msg--bot .assistente__corpo { min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.assistente__msg p {
  padding: .75rem 1.05rem; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(33, 38, 43, .04);
}
.assistente__msg--bot p { background: var(--paper); color: var(--ink-soft); border-top-left-radius: 6px; }
.assistente__msg--utente { align-self: flex-end; }
.assistente__msg--utente p {
  background: var(--ink); color: var(--paper); border-top-right-radius: 6px; box-shadow: none;
}

.assistente__azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.assistente__azione {
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
  padding: .55rem 1rem; border-radius: 999px; border: 0;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 2px rgba(33, 38, 43, .06), 0 0 0 1px var(--line);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.assistente__azione:hover { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px var(--ink); }
.assistente__azione--piena { background: var(--ink); color: var(--paper); box-shadow: none; }
.assistente__azione--piena:hover { background: #2d343b; }

.assistente__card {
  display: flex; gap: .8rem; background: var(--paper);
  border-radius: 18px; padding: .7rem;
  box-shadow: 0 1px 2px rgba(33, 38, 43, .04);
}
.assistente__card img { width: 72px; height: 72px; border-radius: 13px; object-fit: cover; flex: none; }
.assistente__card > div { min-width: 0; }
.assistente__card h4 { font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--ink); }
.assistente__card p { font-size: .74rem; color: var(--muted); margin: .2rem 0 .5rem; line-height: 1.4; }

.assistente__form {
  flex: none; display: flex; align-items: center; gap: .5rem;
  padding: .85rem; background: var(--paper);
}
.assistente__form-pista {
  flex: 1; display: flex; align-items: center; min-width: 0;
  background: var(--canvas-2); border-radius: 999px; padding: .3rem .3rem .3rem 1.05rem;
}
.assistente__form input {
  flex: 1; min-width: 0; border: 0; background: none;
  padding: .5rem 0; font-size: .85rem; font-family: var(--ui); color: var(--ink);
}
.assistente__form input::placeholder { color: var(--muted); }
.assistente__form input:focus-visible { outline: none; }
.assistente__form button {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.assistente__form button:hover { background: #2d343b; transform: scale(1.04); }
.assistente__form button svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }

@media (max-width: 480px) {
  .assistente__pannello {
    position: fixed; inset: auto .85rem 5.4rem .85rem;
    width: auto; height: min(72svh, 580px);
  }
}