/* Casetta al Cipresso · home fatta come una landing (step 5, 05/11/2026)
   Design: «le cartoline dell'Umbria» (versione 3). Colori misurati sul design con confronta-design.py.
   Carattere: Figtree (variabile 300-900, servito dal sito). */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-variabile.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-variabile-corsivo.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* la carta */
  --carta: #FBF5EA;            /* il fondo della pagina */
  --carta-chiara: #FAF3E8;     /* cartoline, biglietto, linguetta */
  --carta-scura: #F4EFE4;      /* retro delle cartoline, campi */
  --sabbia: #DED6C2;           /* etichette, divisori */
  --salvia: #A9B08A;           /* righe leggere */
  --oliva: #7B7A53;            /* testi secondari */
  /* l'inchiostro */
  --inchiostro: #3E3C28;       /* il testo */
  --inchiostro-forte: #252319; /* i titoli */
  --timbro: #1E1D1A;           /* il timbro postale */
  /* i verdi del marchio */
  --verde: #4A8818;            /* il voto, le icone */
  --verde-scuro: #3B7114;      /* i link */
  --verde-chiaro: #C3D37F;     /* il pulsante principale */
  --verde-oliva: #86A116;      /* il pulsante dell'area ospiti */
  --tratteggio: #E8BE93;       /* i fili tratteggiati fra le cartoline */
  --bianco: #FFFFFF;

  --margine: clamp(16px, 3.9vw, 56px);
  --largo: 1360px;
  --raggio: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ombra-carta: 0 1px 1px rgba(62, 52, 30, 0.06), 0 8px 22px rgba(62, 52, 30, 0.13);
  --ombra-foto: 0 2px 4px rgba(40, 32, 16, 0.16), 0 10px 22px rgba(40, 32, 16, 0.18);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}
html.menu-aperto { overflow: hidden; }
html.menu-aperto .testata { z-index: 80; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-width: 320px;
  background-color: var(--carta);
  /* la carta avorio: fibre verticali leggere, in CSS */
  background-image:
    repeating-linear-gradient(90deg, rgba(150, 128, 84, 0.022) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 23px);
  color: var(--inchiostro);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
main, .piede { overflow-x: clip; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

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

.vh {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.salta {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--inchiostro-forte); color: var(--bianco);
  padding: 12px 18px; border-radius: 10px; text-decoration: none; font-weight: 700;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--largo) + 2 * var(--margine));
  margin-inline: auto;
  padding-left: max(var(--margine), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margine), env(safe-area-inset-right, 0px));
}

/* ── i titoli ─────────────────────────────────────────────────────────── */
.titolo-sezione {
  font-size: clamp(32px, 3.75vw, 54px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--inchiostro-forte);
  text-wrap: balance;
}
.sottotitolo {
  margin-top: 0.3em;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.3;
  color: var(--inchiostro);
}

/* ── i pulsanti e i link ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.35em;
  border: 0; border-radius: 12px;
  font-weight: 700; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.15; text-align: center;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 0.16s var(--ease-out), box-shadow 0.25s var(--ease-out), filter 0.25s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-verde { background: var(--verde-chiaro); color: var(--inchiostro-forte); box-shadow: 0 2px 0 rgba(74, 136, 24, 0.25); }
.btn-oliva { background: var(--verde-oliva); color: var(--bianco); box-shadow: 0 2px 0 rgba(40, 64, 8, 0.25); }
.btn-crema { background: var(--carta-chiara); color: var(--inchiostro-forte); box-shadow: inset 0 0 0 1.5px var(--sabbia); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(0.96) saturate(1.08); box-shadow: 0 6px 16px rgba(62, 52, 30, 0.18); }
}

.link-freccia {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0; border: 0; background: none;
  color: var(--verde-scuro); font-weight: 700; font-size: clamp(16px, 1.3vw, 20px);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em;
  touch-action: manipulation; cursor: pointer;
}
.link-freccia::after {
  content: ""; flex: none; width: 0.48em; height: 0.78em;
  background: url("/assets/img/kit/freccia-destra.webp") center / contain no-repeat;
  transition: transform 0.2s var(--ease-out);
}
.link-freccia:active::after { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover::after { transform: translateX(4px); }
}

/* ── i francobolli: la cornice dentellata in CSS ──────────────────────── */
.dentelli {
  --r: 5px;
  --fondo: var(--bianco);
  display: block;
  padding: calc(2 * var(--r));
  background:
    radial-gradient(var(--r), #0000 97%, var(--fondo)) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(var(--fondo) 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
/* il francobollo piccolo con l'icona del kit, col bordo verde come nel design */
.bollo {
  --r: 3.5px;
  --fondo: var(--carta-chiara);
  width: var(--lato, 76px);
  height: var(--lato, 76px);
  display: grid; place-items: center;
  padding: calc(2.6 * var(--r));
  filter: drop-shadow(1px 0 0 var(--verde)) drop-shadow(-1px 0 0 var(--verde)) drop-shadow(0 1px 0 var(--verde)) drop-shadow(0 -1px 0 var(--verde));
}
.bollo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }

/* il timbro postale (SVG, la scritta UMBRIA dritta) */
.timbro { color: var(--timbro); overflow: visible; }
.timbro text { font-family: "Figtree", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.06em; }

/* ── l'intestazione ───────────────────────────────────────────────────── */
.testata {
  position: absolute; inset: 0 0 auto 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
}
.logo {
  position: absolute;
  top: calc(clamp(10px, 1.3vw, 18px) + env(safe-area-inset-top, 0px));
  left: max(clamp(10px, 1.6vw, 24px), env(safe-area-inset-left, 0px));
  width: clamp(104px, 17.2vw, 250px);
  border-radius: 50%;
  transition: transform 0.25s var(--ease-out);
}
.logo img { width: 100%; border-radius: 50%; box-shadow: 0 6px 22px rgba(20, 24, 10, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.4); }
.logo:active { transform: scale(0.97); }

.menu {
  position: absolute;
  top: calc(clamp(18px, 2.2vw, 32px) + env(safe-area-inset-top, 0px));
  left: 20.6%; right: 24.2%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vw, 26px);
}
.menu > ul { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 26px); }
.menu ul a {
  display: inline-block; padding: 8px 2px;
  color: var(--bianco); font-weight: 500; font-size: clamp(15px, 1.53vw, 22px); white-space: nowrap;
  text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 14px rgba(0, 0, 0, 0.45);
  background: linear-gradient(currentColor 0 0) no-repeat 50% 100% / 0 1.5px;
  transition: background-size 0.25s var(--ease-out);
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .menu ul a:hover { background-size: 100% 1.5px; } }
.menu .btn { font-size: clamp(13px, 1.12vw, 16px); min-height: 44px; padding: 0.6em 1.05em; white-space: nowrap; }

/* il posto del selettore delle lingue: vuoto fino al 9-ter, non si vede */
.lingue-posto { display: flex; align-items: center; }
.lingue-posto:empty { display: none; }

.menu-apri {
  display: none;
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 70;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--carta-chiara); box-shadow: 0 4px 14px rgba(20, 24, 10, 0.28);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 0.16s var(--ease-out);
}
.menu-apri:active { transform: scale(0.94); }
.menu-apri span, .menu-apri span::before, .menu-apri span::after {
  position: absolute; left: 14px; width: 20px; height: 2px; border-radius: 2px;
  background: var(--inchiostro-forte); content: "";
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.menu-apri span { top: 23px; }
.menu-apri span::before { left: 0; top: -6px; }
.menu-apri span::after { left: 0; top: 6px; }
.menu-apri[aria-expanded="true"] span { background: transparent; }
.menu-apri[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-apri[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ── la hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: clamp(560px, 55.2vw, 92svh);
  color: var(--bianco);
  overflow: hidden;
  isolation: isolate;
}
.hero-foto { position: absolute; inset: 0; z-index: -2; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(28, 40, 52, 0.42) 0%, rgba(28, 40, 52, 0.12) 16%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, rgba(22, 26, 12, 0.5) 0%, rgba(22, 26, 12, 0.18) 30%, rgba(0, 0, 0, 0) 48%),
    linear-gradient(90deg, rgba(22, 26, 12, 0.28) 0%, rgba(0, 0, 0, 0) 55%);
}
.hero-testo {
  position: absolute; left: 0; right: 0;
  bottom: clamp(88px, 8.8vw, 130px);
}
.hero-marchio {
  font-size: clamp(46px, 7.3vw, 106px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.18), 0 4px 30px rgba(0, 0, 0, 0.35);
}
.hero-sotto {
  margin-top: clamp(10px, 1.1vw, 16px);
  font-size: clamp(17px, 2.05vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* il francobollo con l'insegna dipinta, e il timbro */
.hero-posta {
  position: absolute;
  top: calc(clamp(64px, 2vw, 30px) + env(safe-area-inset-top, 0px));
  right: max(clamp(14px, 2.3vw, 34px), env(safe-area-inset-right, 0px));
  width: clamp(84px, 14.6vw, 212px);
  rotate: 2.2deg;
}
.francobollo-foto {
  --r: clamp(3px, 0.42vw, 6px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.francobollo-foto .finestra { aspect-ratio: 0.9; overflow: hidden; }
.francobollo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform: scale(1.42); transform-origin: 46% 64%; }
.hero-posta .timbro {
  position: absolute;
  width: 108%;
  left: -52%;
  top: 30%;
  color: rgba(30, 29, 26, 0.85);
  rotate: -4deg;
  pointer-events: none;
}
.hero-posta .timbro text { fill: var(--bianco); stroke: var(--timbro); stroke-width: 1.1px; paint-order: stroke; }

/* la linguetta dei contatti, attaccata al bordo destro */
.linguetta {
  position: absolute; z-index: 4;
  right: 0; top: 59%;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px calc(12px + env(safe-area-inset-right, 0px)) 16px 14px;
  background: var(--carta-chiara);
  border-radius: 18px 0 0 18px;
  box-shadow: -3px 6px 22px rgba(40, 32, 16, 0.22);
}
.linguetta a {
  display: grid; place-items: center; width: 60px; height: 58px; border-radius: 12px;
  touch-action: manipulation; transition: background-color 0.2s, transform 0.16s var(--ease-out);
}
.linguetta a:active { transform: scale(0.94); }
.linguetta img, .linguetta svg { width: 42px; height: 42px; object-fit: contain; filter: saturate(1.35) brightness(0.84) contrast(1.15); }
.linguetta .icona-wa { color: var(--verde-scuro); }
@media (hover: hover) and (pointer: fine) { .linguetta a:hover { background: var(--carta-scura); } }

.icona-wa { color: var(--verde); }

/* ── il biglietto: il calendario delle date libere ────────────────────── */
.disponibilita { position: relative; z-index: 5; margin-top: clamp(-64px, -4vw, -40px); scroll-margin-top: 12px; }
.biglietto-ombra { filter: drop-shadow(0 2px 2px rgba(62, 52, 30, 0.08)) drop-shadow(0 12px 22px rgba(62, 52, 30, 0.16)); }
/* la sagoma del biglietto e del retro delle cartoline: i quattro angoli scavati a quarto di cerchio,
   più (nel biglietto) le due tacche sul taglio. Ogni cerchio è un livello della maschera, intersecati. */
.biglietto {
  --angolo: clamp(14px, 1.6vw, 24px);
  --tacca: clamp(10px, 1vw, 14px);
  --taglio: 72.2%;
  --tacca-1: var(--taglio) 0;
  --tacca-2: var(--taglio) 100%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43.5fr) minmax(0, 28.7fr) minmax(0, 27.8fr);
  background: var(--carta-chiara);
  -webkit-mask:
    radial-gradient(circle var(--angolo) at 0 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 0 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--tacca) at var(--tacca-1), #0000 97%, #000 100%),
    radial-gradient(circle var(--tacca) at var(--tacca-2), #0000 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--angolo) at 0 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 0 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--tacca) at var(--tacca-1), #0000 97%, #000 100%),
    radial-gradient(circle var(--tacca) at var(--tacca-2), #0000 97%, #000 100%);
  mask-composite: intersect;
}
.biglietto-scelta { padding: clamp(24px, 2.6vw, 40px) clamp(22px, 2.6vw, 44px) clamp(22px, 2.2vw, 34px); border-right: 1.5px solid var(--sabbia); }
.biglietto h2 {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.012em;
  color: var(--inchiostro-forte);
}
.alloggi { border: 0; margin: clamp(12px, 1.2vw, 18px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px clamp(14px, 1.8vw, 26px); }
.radio { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 500; font-size: clamp(16px, 1.46vw, 21px); color: var(--inchiostro-forte); touch-action: manipulation; }
.radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio .pallino {
  flex: none; width: 24px; height: 24px;
  background: url("/assets/img/kit/selezione-vuota.webp") center / contain no-repeat;
  opacity: 0.55; transition: opacity 0.2s, transform 0.2s var(--ease-out);
}
.radio input:checked + .pallino { background-image: url("/assets/img/kit/selezione-attiva.webp"); opacity: 1; }
.radio:active .pallino { transform: scale(0.9); }
.radio input:focus-visible + .pallino { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 50%; }

.campi { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: clamp(12px, 1.5vw, 24px); margin-top: clamp(16px, 1.6vw, 24px); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.etichetta { font-weight: 600; font-size: clamp(15px, 1.15vw, 17px); color: var(--inchiostro-forte); }
.data, .campo select {
  width: 100%; min-height: 50px; padding: 0 14px;
  border: 1.5px solid var(--salvia); border-radius: 10px;
  background: var(--bianco); color: var(--inchiostro-forte);
  font-size: 16px; font-weight: 500; text-align: left;
  touch-action: manipulation;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.data { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data.vuota { color: var(--oliva); font-weight: 400; }
.data[aria-pressed="true"] { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(74, 136, 24, 0.18); }
.campo select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--bianco) url("/assets/img/kit/freccia-basso.webp") right 14px center / 16px auto no-repeat;
  padding-right: 40px;
}
.prezzo {
  display: inline-block; max-width: 100%;
  margin-top: clamp(14px, 1.4vw, 22px);
  padding: 9px 16px; border-radius: 10px;
  background: var(--sabbia);
  font-weight: 600; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.35; color: var(--inchiostro-forte);
}
.prezzo.avviso { background: var(--carta-scura); box-shadow: inset 0 0 0 1.5px var(--tratteggio); }

.biglietto-mese { padding: clamp(18px, 2vw, 30px) clamp(16px, 2vw, 32px) clamp(16px, 1.6vw, 24px); }
.mese-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mese-nome { font-weight: 700; font-size: clamp(16px, 1.25vw, 19px); color: var(--inchiostro-forte); text-transform: capitalize; }
.mese-freccia {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color 0.2s, transform 0.16s var(--ease-out), opacity 0.2s;
}
.mese-freccia::before { content: ""; width: 12px; height: 19px; background: url("/assets/img/kit/freccia-destra.webp") center / contain no-repeat; }
.mese-freccia.prima::before { transform: scaleX(-1); }
.mese-freccia:active { transform: scale(0.92); }
.mese-freccia:disabled { opacity: 0.25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .mese-freccia:not(:disabled):hover { background: var(--carta-scura); } }

.settimana, .giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.settimana { margin-top: 6px; }
.settimana span { text-align: center; font-weight: 700; font-size: clamp(13px, 1vw, 15px); color: var(--inchiostro-forte); padding: 4px 0; text-transform: uppercase; }
.giorni { row-gap: 2px; }
.giorno {
  position: relative; height: clamp(34px, 2.6vw, 38px); border: 0; padding: 0; background: transparent;
  font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; color: var(--inchiostro-forte);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color 0.15s, color 0.15s;
}
.giorno span { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 9px; transition: transform 0.16s var(--ease-out); }
.giorno:active span { transform: scale(0.92); }
.giorno.passato { color: rgba(62, 60, 40, 0.32); cursor: default; }
.giorno.occupato { cursor: not-allowed; }
.giorno.occupato span { color: rgba(62, 60, 40, 0.5); background: repeating-linear-gradient(135deg, rgba(222, 214, 194, 0.95) 0 4px, rgba(222, 214, 194, 0.55) 4px 8px); text-decoration: line-through; text-decoration-color: rgba(62, 60, 40, 0.45); }
.giorno.solo-partenza { cursor: pointer; }
.giorno.solo-partenza span { color: var(--inchiostro-forte); text-decoration: none; }
.giorno.nel-periodo { background: rgba(195, 211, 127, 0.45); }
.giorno.inizio, .giorno.fine { background: rgba(195, 211, 127, 0.45); }
.giorno.inizio { border-radius: 10px 0 0 10px; }
.giorno.fine { border-radius: 0 10px 10px 0; }
.giorno.inizio.fine { border-radius: 10px; }
.giorno.inizio span, .giorno.fine span { background: var(--verde); color: var(--bianco); font-weight: 700; }
.giorno.oggi span { box-shadow: inset 0 0 0 1.5px var(--salvia); }
@media (hover: hover) and (pointer: fine) {
  .giorno.libero:hover span, .giorno.solo-partenza:hover span { background: var(--carta-scura); box-shadow: inset 0 0 0 1.5px var(--verde-chiaro); }
  .giorno.inizio:hover span, .giorno.fine:hover span { background: var(--verde-scuro); }
}
.legenda { display: flex; gap: 18px; margin-top: 10px; font-size: 14px; color: var(--inchiostro); }
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.segno { width: 16px; height: 16px; border-radius: 4px; }
.segno.libero { background: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--salvia); }
.segno.occupato { background: repeating-linear-gradient(135deg, rgba(222, 214, 194, 1) 0 3px, rgba(222, 214, 194, 0.5) 3px 6px); }

.biglietto-matrice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 1.5vw, 22px);
  padding: clamp(24px, 2.4vw, 36px) clamp(18px, 2vw, 32px);
  text-align: center;
}
.biglietto-matrice::before {
  /* il taglio tratteggiato del biglietto */
  content: ""; position: absolute; left: -1px; top: calc(var(--tacca) + 6px); bottom: calc(var(--tacca) + 6px);
  border-left: 2px dashed var(--sabbia);
}
.matrice-testo { font-size: clamp(19px, 1.9vw, 27px); font-weight: 500; line-height: 1.2; color: var(--inchiostro-forte); max-width: 6.6em; }
.biglietto-matrice .btn { width: min(100%, clamp(170px, 16.1vw, 232px)); min-height: clamp(72px, 7vw, 100px); font-size: clamp(18px, 1.82vw, 26px); line-height: 1.15; padding: 0.45em 0.8em; border-radius: 14px; text-wrap: balance; }
.cin-posto:empty { display: none; }

/* ── le cartoline delle camere ────────────────────────────────────────── */
.camere { padding: clamp(56px, 5.2vw, 84px) 0 clamp(40px, 3.6vw, 60px); scroll-margin-top: 0; }
.camere-griglia {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  grid-template-areas: "testa coccinelle" "girasole coccinelle" "casa casa";
  column-gap: clamp(20px, 2.6vw, 40px);
}
.camere-griglia { position: relative; }
.camere-testa { grid-area: testa; }
.fili { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.fili path { fill: none; stroke: var(--tratteggio); stroke-width: 2.2; stroke-dasharray: 7 8; stroke-linecap: round; }

.cartolina {
  position: relative;
  background: var(--carta-chiara);
  border-radius: 6px;
  box-shadow: var(--ombra-carta);
  padding: clamp(10px, 1.1vw, 16px);
}
.cartolina h3 { font-size: clamp(24px, 2.4vw, 35px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--inchiostro-forte); }
.dettagli { margin-top: 0.35em; font-size: clamp(15px, 1.3vw, 19px); color: var(--inchiostro); }
.unito { white-space: nowrap; }
.pill { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 7px; background: var(--sabbia); font-size: clamp(14px, 1.15vw, 17px); font-weight: 500; color: var(--inchiostro-forte); }
.foto-bordo { background: var(--bianco); padding: clamp(5px, 0.5vw, 8px); box-shadow: var(--ombra-foto); }
.foto-bordo img { width: 100%; height: 100%; object-fit: cover; }

.cartolina-girasole { grid-area: girasole; margin-top: clamp(28px, 3.3vw, 48px); rotate: -1.6deg; }
.cartolina-girasole .cartolina-foto { position: relative; display: grid; grid-template-columns: 72% 28%; }
.cartolina-girasole .foto-grande { aspect-ratio: 1.27; overflow: hidden; }
.cartolina-girasole .foto-grande img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.cartolina-girasole .foto-piccola { position: absolute; right: -2%; bottom: 0; width: 36%; aspect-ratio: 0.86; rotate: 2.6deg; }
.cartolina-girasole .bollo { --lato: clamp(60px, 6.9vw, 100px); position: absolute; right: 5%; top: 0; rotate: 2deg; }
.cartolina-girasole .cartolina-testo { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; padding: clamp(12px, 1.2vw, 18px) clamp(10px, 1vw, 16px) clamp(6px, 0.6vw, 10px); }
.cartolina-girasole .cartolina-testo > div { min-width: 0; }

.cartolina-coccinelle { grid-area: coccinelle; align-self: start; margin-top: clamp(-34px, -2vw, -18px); rotate: 1.8deg; }
.cartolina-coccinelle .foto-grande { aspect-ratio: 1.42; overflow: hidden; }
.cartolina-coccinelle .foto-grande img { object-position: 50% 42%; }
.cartolina-coccinelle .cartolina-testo { position: relative; padding: clamp(14px, 1.4vw, 20px) 44% clamp(8px, 0.8vw, 12px) clamp(10px, 1vw, 16px); min-height: clamp(120px, 11vw, 160px); }
.cartolina-coccinelle .foto-piccola { position: absolute; right: -3%; top: clamp(-72px, -5vw, -44px); width: 42%; aspect-ratio: 0.82; rotate: 2.2deg; }
.titolo-con-bollo { display: flex; align-items: center; gap: 12px; }
.cartolina-coccinelle .bollo { --lato: clamp(40px, 3.4vw, 50px); --r: 2.6px; flex: none; rotate: -4deg; }
.cartolina-coccinelle .link-freccia { margin-top: 10px; }

.cartolina-casa { grid-area: casa; justify-self: start; margin-left: 13.3%; width: 65.5%; margin-top: clamp(-8px, -0.4vw, -4px); rotate: -0.9deg; display: grid; grid-template-columns: 66% 34%; align-items: stretch; }
.cartolina-casa .foto-grande { aspect-ratio: 1.7; overflow: hidden; }
.cartolina-casa .foto-grande img { object-position: 50% 62%; }
.cartolina-casa .cartolina-testo { display: flex; flex-direction: column; justify-content: center; padding: clamp(12px, 1.4vw, 22px) clamp(12px, 1.6vw, 26px); }
.cartolina-casa .bollo { --lato: clamp(64px, 7.3vw, 105px); margin: 0 0 clamp(10px, 1.1vw, 16px) clamp(30px, 3.4vw, 54px); rotate: 1.5deg; }
.cartolina-casa h3 { font-size: clamp(22px, 2.15vw, 31px); text-wrap: balance; }
.cartolina-casa .link-freccia { margin-top: clamp(10px, 1.2vw, 18px); }

/* ── come prenotare (rifinitura: tre francobolli su un filo) ──────────── */
.come { padding: clamp(26px, 2.4vw, 36px) 0 clamp(28px, 2.6vw, 40px); }
.passaggi { --lato-passo: clamp(66px, 6vw, 86px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 48px); margin-top: clamp(18px, 1.8vw, 28px); counter-reset: passo; }
.passaggi::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: calc(var(--lato-passo) / 2);
  border-top: 2.2px dashed var(--tratteggio);
}
.passaggio { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1vw, 14px); text-align: center; }
.passaggio .bollo { --lato: var(--lato-passo); background-color: transparent; }
.passaggio:nth-child(1) .bollo { rotate: -3deg; }
.passaggio:nth-child(2) .bollo { rotate: 2.5deg; }
.passaggio:nth-child(3) .bollo { rotate: -1.5deg; }
.passaggio p { max-width: 20em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.36; color: var(--inchiostro-forte); text-wrap: balance; }
.passaggio p::before { counter-increment: passo; content: counter(passo) ". "; font-weight: 800; color: var(--verde); }
.come-fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: clamp(18px, 1.8vw, 24px); padding-top: clamp(14px, 1.2vw, 18px); border-top: 1.5px solid var(--sabbia); }
.come-fondo p { font-size: clamp(16px, 1.3vw, 19px); }
.come-fondo a:not(.btn) { color: var(--verde-scuro); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }

/* ── le cose belle: le due polaroid ───────────────────────────────────── */
.belle { padding: clamp(22px, 2vw, 32px) 0 clamp(14px, 1.2vw, 20px); }
.polaroid-fila { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 46fr); gap: clamp(8px, 1vw, 16px); align-items: start; margin-top: clamp(14px, 1.6vw, 24px); }
.polaroid {
  background: var(--carta-chiara); padding: clamp(10px, 1vw, 15px) clamp(10px, 1vw, 15px) clamp(16px, 1.6vw, 24px);
  box-shadow: var(--ombra-carta); border-radius: 4px;
}
.polaroid .finestra { overflow: hidden; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.polaroid figcaption { padding: clamp(12px, 1.3vw, 20px) clamp(8px, 1vw, 16px) 0; }
.polaroid strong { display: block; font-size: clamp(19px, 1.85vw, 27px); font-weight: 700; line-height: 1.15; color: var(--inchiostro-forte); }
.polaroid figcaption span { display: block; margin-top: 0.3em; font-size: clamp(15px, 1.3vw, 19px); }
.polaroid-colazione { position: relative; z-index: 1; rotate: -1.7deg; margin-top: clamp(6px, 0.8vw, 12px); }
.polaroid-colazione .finestra { aspect-ratio: 1.7; }
.polaroid-colazione img { object-position: 50% 64%; }
.polaroid-giardino { position: relative; z-index: 0; rotate: 1.4deg; margin-left: clamp(-44px, -2.6vw, -20px); }
.polaroid-giardino .finestra { aspect-ratio: 1.5; }
.polaroid-giardino figcaption { padding-left: clamp(30px, 3.6vw, 56px); }
.polaroid-giardino img { object-position: 50% 40%; }

/* ── i servizi ────────────────────────────────────────────────────────── */
.servizi { padding: clamp(12px, 1.2vw, 18px) 0 clamp(22px, 2.2vw, 34px); }
.servizi-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.25fr); align-items: center; }
.servizio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 10px; text-align: center; font-size: clamp(14px, 1.3vw, 19px); line-height: 1.2; color: var(--inchiostro); }
.servizio + .servizio { border-left: 1.5px solid var(--sabbia); }
.servizio img { width: auto; height: clamp(34px, 3.2vw, 46px); }
.servizio-olio { flex-direction: row; justify-content: center; gap: 12px; text-align: left; border-left: 2px dashed var(--sabbia) !important; }
.servizio-olio img { height: clamp(52px, 5.2vw, 76px); }
.galleria-apri { display: flex; justify-content: center; margin-top: clamp(12px, 1.4vw, 22px); }

/* ── i dintorni: i francobolli disegnati ──────────────────────────────── */
.dintorni { padding: clamp(20px, 2vw, 30px) 0 clamp(24px, 2.4vw, 36px); }
.dintorni-testa { position: relative; }
.timbro-dintorni { position: absolute; right: clamp(80px, 9vw, 130px); top: clamp(-20px, -1vw, -8px); width: clamp(120px, 13.5vw, 196px); rotate: -3deg; }
.francobolli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.92fr); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(14px, 1.5vw, 22px); align-items: stretch; }
.luogo { filter: drop-shadow(0 1px 0 rgba(150, 136, 108, 0.45)) drop-shadow(0 6px 10px rgba(62, 52, 30, 0.1)); }
.luogo .dentelli { --r: 4px; --fondo: var(--carta-chiara); height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.4vw, 22px) clamp(12px, 1.3vw, 20px) clamp(12px, 1.2vw, 18px); }
.luogo img { width: 100%; aspect-ratio: 1.72; object-fit: contain; }
.luogo p { margin-top: 8px; text-align: center; font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; color: var(--inchiostro-forte); line-height: 1.25; }
.luogo p .verde { color: var(--verde); font-weight: 600; }
.luogo:nth-child(1) { rotate: -1deg; }
.luogo:nth-child(2) { rotate: 0.8deg; }
.luogo:nth-child(3) { rotate: -0.6deg; }
.luoghi-piccoli { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(10px, 1.2vw, 18px); }
.luoghi-piccoli .luogo .dentelli { flex-direction: row; align-items: center; gap: 10px; padding: clamp(10px, 1vw, 14px); }
.luoghi-piccoli .luogo img { width: 44%; flex: none; }
.luoghi-piccoli .luogo p { margin: 0; text-align: left; font-size: clamp(14px, 1.15vw, 17px); }
.luoghi-piccoli .luogo p span { display: block; font-weight: 500; font-size: 0.9em; color: var(--inchiostro); }
.luoghi-piccoli .luogo:nth-child(1) { rotate: 1.2deg; }
.luoghi-piccoli .luogo:nth-child(2) { rotate: -0.8deg; }

/* ── il retro della cartolina: recensioni e domande ───────────────────── */
.recensioni { padding: clamp(14px, 1.4vw, 20px) 0 clamp(18px, 1.8vw, 28px); }
.retro-ombra { filter: drop-shadow(0 1px 1px rgba(62, 52, 30, 0.07)) drop-shadow(0 8px 16px rgba(62, 52, 30, 0.13)); }
.retro {
  --angolo: clamp(14px, 1.5vw, 22px);
  position: relative;
  background: var(--carta-chiara);
  padding: clamp(24px, 2.6vw, 40px) clamp(22px, 3.6vw, 56px);
  -webkit-mask:
    radial-gradient(circle var(--angolo) at 0 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 0 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 100%, #0000 97%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--angolo) at 0 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 0, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 0 100%, #0000 97%, #000 100%),
    radial-gradient(circle var(--angolo) at 100% 100%, #0000 97%, #000 100%);
  mask-composite: intersect;
}
.retro-ombra-recensioni { width: 92%; margin-inline: auto; rotate: -0.4deg; }
.retro-recensioni { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.retro-recensioni > div + div { padding-left: clamp(18px, 2.6vw, 40px); }
.retro-pensiero { padding-right: clamp(18px, 2.6vw, 40px); border-right: 1.5px solid var(--sabbia); }
.retro-pensiero h2 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.012em; color: var(--inchiostro-forte); text-wrap: balance; }
.retro-pensiero blockquote { margin-top: clamp(12px, 1.2vw, 18px); }
.retro-pensiero blockquote p { font-style: italic; font-weight: 500; font-size: clamp(18px, 1.75vw, 25px); line-height: 1.3; color: var(--inchiostro-forte); }
.retro-pensiero .firma { margin-top: 8px; font-size: clamp(13px, 1vw, 15px); color: var(--oliva); }
.retro-voto { border-right: 1.5px solid var(--sabbia); padding-right: clamp(18px, 2.6vw, 40px); }
.voto-titolo { font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); color: var(--inchiostro-forte); }
.voto { margin-top: 4px; font-weight: 700; font-size: clamp(40px, 4vw, 58px); line-height: 1; letter-spacing: -0.01em; color: var(--verde); }
.voto-righe { margin-top: 8px; font-size: clamp(14px, 1.1vw, 16px); }
.retro-indirizzo { position: relative; align-self: stretch; min-height: 150px; }
.retro-indirizzo .bollo { --lato: clamp(56px, 4.8vw, 70px); position: absolute; right: 0; top: -4px; rotate: 3deg; }
.retro-indirizzo .righe { position: absolute; left: 0; right: 0; bottom: 6px; display: grid; gap: clamp(16px, 1.6vw, 24px); }
.retro-indirizzo .righe span { display: block; border-top: 1.5px solid var(--sabbia); }

.domande { padding: clamp(16px, 1.6vw, 24px) 0 clamp(18px, 1.8vw, 28px); }
.retro-ombra-domande { rotate: 0.3deg; }
.retro-domande { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 48px); }
.domande-testa { position: relative; padding-right: clamp(18px, 2.6vw, 40px); border-right: 1.5px solid var(--sabbia); }
.domande-testa h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -0.012em; color: var(--inchiostro-forte); }
.domande-testa .bollo { --lato: clamp(56px, 4.8vw, 70px); margin-top: clamp(18px, 2vw, 30px); rotate: -3deg; }
.domanda { border-bottom: 1.5px solid var(--sabbia); }
.domanda:first-child { border-top: 0; }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 46px; padding: 8px 0;
  font-weight: 700; font-size: clamp(16px, 1.32vw, 19px); line-height: 1.3; color: var(--inchiostro-forte);
  list-style: none; cursor: pointer; touch-action: manipulation;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: ""; flex: none; width: 16px; height: 11px;
  background: url("/assets/img/kit/freccia-basso.webp") center / contain no-repeat;
  transition: transform 0.25s var(--ease-out);
}
.domanda[open] summary::after { transform: rotate(180deg); }
.domanda summary:active { opacity: 0.75; }
.domanda p { padding: 0 0 14px; font-size: clamp(15px, 1.22vw, 18px); line-height: 1.45; max-width: 52em; }

.thk-nota-recensioni { width: 92%; margin: 12px auto 0; font-size: 13px; color: var(--oliva); text-align: right; }

/* ── l'area ospiti ────────────────────────────────────────────────────── */
.ospiti { padding: clamp(10px, 1vw, 16px) 0; }
.ospiti-riga { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
.ospiti-chiave { width: clamp(64px, 6vw, 88px); rotate: -8deg; }
.ospiti-taglio { align-self: stretch; border-left: 2px dashed var(--tratteggio); min-height: 64px; }
.ospiti h2 { font-size: clamp(22px, 2.3vw, 34px); font-weight: 600; line-height: 1.1; color: var(--inchiostro-forte); }
.ospiti p { margin-top: 4px; font-size: clamp(15px, 1.35vw, 20px); }

/* ── i contatti ───────────────────────────────────────────────────────── */
.contatti { padding: clamp(16px, 1.6vw, 24px) 0 clamp(20px, 2vw, 30px); text-align: center; }
.contatti h2 { font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; color: var(--inchiostro-forte); text-wrap: balance; }
.contatti-luoghi { margin-top: 6px; font-size: clamp(16px, 1.4vw, 20px); }
.canali { display: flex; justify-content: center; margin-top: clamp(16px, 1.8vw, 26px); }
.canali li + li { border-left: 1.5px solid var(--sabbia); }
.canali a { display: flex; align-items: center; gap: 12px; padding: 6px clamp(18px, 3vw, 48px); text-decoration: none; text-align: left; touch-action: manipulation; }
.canali img, .canali svg { width: 30px; height: 30px; object-fit: contain; flex: none; }
.canali strong { display: block; font-size: clamp(16px, 1.35vw, 19px); color: var(--inchiostro-forte); }
.canali .valore { display: block; font-size: clamp(14px, 1.1vw, 16px); color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) { .canali a:hover .valore { color: var(--verde-scuro); text-decoration: underline; text-underline-offset: 0.2em; } }
.contatti-indirizzo { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(14px, 1.1vw, 16px); color: var(--inchiostro); }

/* ── il piè di pagina ─────────────────────────────────────────────────── */
.piede { padding-bottom: env(safe-area-inset-bottom, 0px); }
.piede-riga { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; padding-top: clamp(14px, 1.4vw, 20px); padding-bottom: clamp(14px, 1.4vw, 20px); border-top: 1.5px solid var(--sabbia); }
.piede-marchio { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-weight: 600; font-size: clamp(17px, 1.45vw, 21px); color: var(--inchiostro-forte); margin-left: clamp(0px, 9vw, 130px); }
.piede-marchio img { width: clamp(52px, 4.6vw, 66px); border-radius: 50%; box-shadow: 0 2px 8px rgba(40, 32, 16, 0.18); }
.piede-link { display: flex; align-items: center; flex-wrap: wrap; gap: 4px clamp(20px, 4vw, 60px); padding-left: clamp(18px, 3vw, 44px); border-left: 1.5px solid var(--sabbia); margin-right: clamp(0px, 4vw, 60px); }
.piede-link a { padding: 10px 0; font-size: clamp(15px, 1.15vw, 17px); text-decoration: none; color: var(--inchiostro-forte); }
@media (hover: hover) and (pointer: fine) { .piede-link a:hover, .piede-legale a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.piede-legale { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px; padding-bottom: clamp(14px, 1.4vw, 20px); font-size: 14px; color: var(--oliva); }
.piede-legale a { color: var(--inchiostro); }
.piede-legale nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.credit a { color: var(--verde-scuro); font-weight: 600; }

/* ── la barra fissa da telefono ───────────────────────────────────────── */
.barra-telefono { display: none; }

/* ── la galleria ──────────────────────────────────────────────────────── */
.galleria {
  width: min(1240px, 100% - 24px); max-height: calc(100dvh - 24px);
  margin: auto; padding: 0; border: 0; border-radius: 14px;
  background: var(--carta); color: var(--inchiostro);
  box-shadow: 0 24px 60px rgba(20, 16, 8, 0.35);
  overscroll-behavior: contain;
}
.galleria::backdrop { background: rgba(30, 28, 18, 0.6); }
.galleria[open] { animation: galleria-dentro 0.28s var(--ease-out); }
@keyframes galleria-dentro { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.galleria-testa { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px 24px; background: var(--carta); border-bottom: 1.5px solid var(--sabbia); }
.galleria-testa h2 { font-size: clamp(20px, 2vw, 28px); font-weight: 700; color: var(--inchiostro-forte); }
.galleria-chiudi { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--carta-scura); font-size: 28px; line-height: 1; color: var(--inchiostro-forte); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.galleria-chiudi:active { transform: scale(0.94); }
.galleria-corpo { padding: 8px 24px 26px; overflow-y: auto; }
.galleria-gruppo h3 { margin: 18px 0 10px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 700; color: var(--inchiostro-forte); }
.galleria-fila { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; overscroll-behavior-x: contain; }
.galleria-fila li { flex: none; scroll-snap-align: start; }
.galleria-fila img { height: clamp(200px, 26vw, 320px); width: auto; border-radius: 6px; background: var(--carta-scura); }


/* l'icona di WhatsApp, disegnata nello stile delle icone del kit */
.icona-wa .bolla { fill: rgba(195, 211, 127, 0.55); stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.icona-wa .cornetta { fill: currentColor; }

/* ── le pagine interne (privacy, cookie, note legali, condizioni, 404) ── */
.pagina-interna .testata { position: relative; inset: auto; min-height: clamp(96px, 9vw, 132px); background: var(--carta-chiara); border-bottom: 1.5px solid var(--sabbia); }
.pagina-interna .logo { width: clamp(76px, 7.4vw, 108px); top: calc(10px + env(safe-area-inset-top, 0px)); }
.pagina-interna .logo img { box-shadow: 0 3px 10px rgba(40, 32, 16, 0.18); }
.pagina-interna .menu { left: 16%; right: 4%; top: calc(clamp(26px, 2.6vw, 40px) + env(safe-area-inset-top, 0px)); justify-content: flex-end; }
.pagina-interna .menu ul a { color: var(--inchiostro-forte); text-shadow: none; }
.pagina-interna .testo-pagina { padding: clamp(36px, 4vw, 64px) 0 clamp(48px, 5vw, 80px); }
.legale { max-width: 860px; }
.legale h1, .pagina-404 h1 { font-size: clamp(32px, 3.6vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -0.012em; color: var(--inchiostro-forte); }
.legale h1 + p { margin-top: 10px; color: var(--oliva); font-size: 15px; }
.legale h2 { margin-top: 34px; font-size: clamp(21px, 1.9vw, 27px); font-weight: 700; line-height: 1.2; color: var(--inchiostro-forte); }
.legale p, .legale li { font-size: 17px; line-height: 1.6; }
.legale p + p, .legale ul + p, .legale p + ul, .legale ol + p, .legale p + ol { margin-top: 12px; }
.legale h2 + p, .legale h2 + ul, .legale h2 + ol, .legale h2 + table { margin-top: 12px; }
.legale ul, .legale ol { padding-left: 1.3em; }
.legale ul { list-style: disc; }
.legale ol { list-style: decimal; }
.legale li + li { margin-top: 6px; }
.legale a { color: var(--verde-scuro); text-underline-offset: 0.18em; }
.legale table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--sabbia); }
.legale th { font-weight: 700; color: var(--inchiostro-forte); background: var(--carta-scura); }
.pagina-404 { text-align: center; max-width: 640px; margin-inline: auto; }
.pagina-404 p { margin-top: 14px; font-size: 19px; }
.pagina-404 .azioni { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 28px; }
@media (max-width: 1099px) {
  .pagina-interna .menu { left: 0; right: 0; top: 0; justify-content: center; }
}

/* ── computer piccolo e tablet ────────────────────────────────────────── */
@media (max-width: 1179px) {
  .menu-apri { display: block; }
  .menu {
    position: fixed; inset: 0; z-index: 60;
    height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; justify-content: center; gap: 26px;
    padding: calc(80px + env(safe-area-inset-top, 0px)) 24px calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--carta);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out); }
  .menu > ul { flex-direction: column; gap: 4px; }
  .menu ul a { color: var(--inchiostro-forte); text-shadow: none; font-size: 26px; font-weight: 600; padding: 10px 8px; }
  .menu .btn { font-size: 18px; min-height: 52px; padding: 0.7em 1.4em; margin-top: 8px; }
  .lingue-posto { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(max(14px, env(safe-area-inset-right, 0px)) + 56px); z-index: 70; }
  .hero-posta { right: max(14px, env(safe-area-inset-right, 0px)); top: calc(76px + env(safe-area-inset-top, 0px)); width: clamp(84px, 12vw, 130px); }
  .linguetta { display: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .barra-telefono {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px;
    padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: rgba(251, 245, 234, 0.97);
    box-shadow: 0 -6px 18px rgba(40, 32, 16, 0.14);
  }
  .barra-telefono .btn { min-height: 52px; padding: 6px 10px; font-size: 15px; text-wrap: balance; }
  .barra-telefono svg { width: 22px; height: 22px; flex: none; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  .barra-telefono { grid-template-columns: minmax(0, 300px) minmax(0, 300px); justify-content: center; }
  .barra-telefono .btn { font-size: 16px; }
}
@media (max-width: 1099px) {
  /* il biglietto in due file: in alto la scelta e il mese, sotto la matrice, staccata dal taglio */
  .biglietto { --matrice: 128px; --tacca-1: 0 calc(100% - var(--matrice)); --tacca-2: 100% calc(100% - var(--matrice)); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .biglietto-scelta { border-right: 1.5px solid var(--sabbia); }
  .biglietto-matrice { grid-column: 1 / -1; height: var(--matrice); flex-direction: row; justify-content: center; gap: 28px; border-top: 2px dashed var(--sabbia); padding: 18px 28px; }
  .biglietto-matrice::before { display: none; }
  .matrice-testo { max-width: none; }
  .biglietto-matrice .btn { min-height: 64px; width: auto; }
  .campi { grid-template-columns: 1fr 1fr; }
  .cartolina-coccinelle h3 { font-size: 23px; }
  .cartolina-coccinelle .bollo { --lato: 38px; --r: 2.4px; }
  .campo-ospiti { grid-column: 1 / -1; }
}

/* ── telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 17px; }

  .hero { height: min(78svh, 680px); min-height: 520px; }
  .hero-foto img { object-position: 44% 50%; }
  .hero::before {
    background:
      linear-gradient(180deg, rgba(28, 40, 52, 0.4) 0%, rgba(0, 0, 0, 0) 22%),
      linear-gradient(0deg, rgba(22, 26, 12, 0.62) 0%, rgba(22, 26, 12, 0.2) 36%, rgba(0, 0, 0, 0) 56%);
  }
  .hero-testo { bottom: 76px; }
  .hero-marchio { font-size: clamp(44px, 12.6vw, 58px); line-height: 1.02; }
  .hero-sotto { font-size: 18px; max-width: 20em; text-wrap: balance; }
  .logo { width: clamp(100px, 29vw, 124px); }
  .hero-posta { width: clamp(76px, 21vw, 92px); top: calc(74px + env(safe-area-inset-top, 0px)); }
  .hero-posta .timbro { width: 112%; left: -66%; top: 54%; }

  .disponibilita { margin-top: -44px; }
  .biglietto { display: block; --matrice: 172px; --angolo: 16px; --tacca: 11px; }
  .biglietto-scelta { padding: 24px 20px 18px; border-right: 0; border-bottom: 1.5px solid var(--sabbia); }
  .alloggi { gap: 0 18px; }
  .campi { grid-template-columns: 1fr 1fr; }
  .campo-ospiti { grid-column: 1 / -1; }
  .biglietto-mese { padding: 16px 12px 14px; border-right: 0; }
  .giorno { height: 42px; font-size: 16px; }
  .biglietto-matrice { height: var(--matrice); flex-direction: column; gap: 14px; padding: 20px 18px 22px; border-top: 2px dashed var(--sabbia); }
  .matrice-testo { font-size: 20px; max-width: 14em; text-wrap: balance; }
  .biglietto-matrice .btn { width: 100%; min-height: 56px; font-size: 18px; }

  .camere { padding-top: 48px; }
  .camere-griglia { display: flex; flex-direction: column; gap: 30px; }
  .fili { display: none; }
  .cartolina-girasole, .cartolina-coccinelle { margin-top: 0; }
  .cartolina-casa { width: 100%; margin-left: 0; grid-template-columns: 1fr; }
  .cartolina-casa .cartolina-testo { padding: 14px 10px 8px; }
  .cartolina-casa .bollo { position: absolute; right: 14px; top: 14px; margin: 0; --lato: 56px; }
  .cartolina-girasole .cartolina-testo { grid-template-columns: 1fr; }
  .cartolina-coccinelle .cartolina-testo { padding-right: 35%; min-height: 0; }
  .cartolina-coccinelle .foto-piccola { top: -36px; width: 32%; }
  .cartolina-coccinelle h3 { font-size: 24px; }
  .cartolina-coccinelle .bollo { --lato: 40px; }

  .passaggi { grid-template-columns: 1fr; gap: 16px; --lato-passo: 66px; }
  .passaggi::before { left: calc(var(--lato-passo) / 2); right: auto; top: 12px; bottom: 24px; border-top: 0; border-left: 2.2px dashed var(--tratteggio); }
  .passaggio { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .passaggio .bollo { flex: none; }
  .come-fondo { flex-direction: column; align-items: stretch; }
  .come-fondo .btn { width: 100%; }

  .polaroid-fila {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--margine)); padding: 10px var(--margine) 18px; scroll-padding-inline: var(--margine);
  }
  .polaroid { flex: 0 0 84%; scroll-snap-align: start; }
  .polaroid-colazione, .polaroid-giardino { margin-top: 0; margin-left: 0; }
  .polaroid-giardino figcaption { padding-left: clamp(8px, 1vw, 16px); }

  .servizi-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .servizio:nth-child(4) { border-left: 0; }
  .servizio-olio { grid-column: span 2; border-left: 1.5px solid var(--sabbia) !important; }

  .timbro-dintorni { right: 2px; top: auto; bottom: -64px; width: 104px; z-index: 2; }
  .francobolli {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--margine)); padding: 12px var(--margine) 18px; scroll-padding-inline: var(--margine);
  }
  .francobolli > .luogo, .luoghi-piccoli > .luogo { flex: 0 0 62%; scroll-snap-align: start; }
  .luoghi-piccoli { display: contents; }
  .luoghi-piccoli .luogo .dentelli { flex-direction: column; align-items: stretch; padding: 14px 12px 12px; }
  .luoghi-piccoli .luogo img { width: 100%; }
  .luoghi-piccoli .luogo p { text-align: center; margin-top: 8px; font-size: 15px; }

  .retro { padding: 24px 18px; }
  .retro-ombra-recensioni, .retro-ombra-domande { width: 100%; rotate: none; }
  .retro-recensioni { grid-template-columns: 1fr; gap: 18px; }
  .thk-nota-recensioni { width: 100%; text-align: left; }
  .retro-recensioni > div + div { padding-left: 0; }
  .retro-pensiero, .retro-voto { border-right: 0; padding-right: 0; }
  .retro-pensiero { padding-right: 70px; }
  .retro-voto { padding-top: 16px; border-top: 1.5px solid var(--sabbia); }
  .retro-indirizzo { position: absolute; right: 16px; top: 18px; min-height: 0; }
  .retro-indirizzo .righe { display: none; }
  .retro-indirizzo .bollo { position: static; --lato: 54px; }
  .retro-domande { grid-template-columns: 1fr; gap: 8px; }
  .domande-testa { border-right: 0; padding-right: 0; display: flex; align-items: center; justify-content: space-between; }
  .domande-testa .bollo { margin-top: 0; --lato: 54px; }

  .ospiti-riga { grid-template-columns: auto 1fr; }
  .ospiti-taglio { display: none; }
  .ospiti-riga .btn { grid-column: 1 / -1; width: 100%; }

  .canali { flex-direction: column; align-items: center; gap: 4px; }
  .canali li + li { border-left: 0; }
  .canali a { padding: 8px 6px; min-width: 260px; }

  .piede-riga { flex-direction: column; align-items: center; text-align: center; }
  .piede-marchio { margin-left: 0; }
  .piede-link { border-left: 0; padding-left: 0; margin-right: 0; justify-content: center; }
  .piede-legale { flex-direction: column; align-items: center; text-align: center; }
  .piede-legale nav { justify-content: center; }

}

@media (max-width: 380px) {
  .campi { grid-template-columns: 1fr; }
  .francobolli { gap: 10px; }
  .barra-telefono .btn { font-size: 14px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   STEP 5-BIS · IL SITO VIVO (05/11/2026)
   Pochi movimenti, ognuno con uno scopo; solo transform (anche translate, scale e rotate) e opacity;
   curve --ease-out / --ease-in-out; hover solo col mouse; meno movimento con «riduci animazioni».
   ═════════════════════════════════════════════════════════════════════════ */

/* ── l'intestazione che resta in alto, dopo la hero ───────────────────── */
.testata-fissa {
  position: fixed; inset: 0 0 auto 0; z-index: 45;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(250, 243, 232, 0.97);
  box-shadow: 0 1px 0 var(--sabbia), 0 8px 24px rgba(40, 32, 16, 0.1);
  translate: 0 -110%;
  visibility: hidden;
  transition: translate 0.24s var(--ease-out), visibility 0s linear 0.24s;
}
.testata-fissa.vista { translate: 0 0; visibility: visible; transition: translate 0.42s var(--ease-out), visibility 0s; }
.testata-fissa-riga { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); min-height: 66px; }
.fissa-marchio { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; font-weight: 700; font-size: 18px; color: var(--inchiostro-forte); }
.fissa-marchio img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 2px 6px rgba(40, 32, 16, 0.18); }
.fissa-menu { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.fissa-menu a { position: relative; padding: 10px 2px; font-weight: 500; font-size: 17px; text-decoration: none; color: var(--inchiostro-forte); touch-action: manipulation; }
.fissa-menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: currentColor; clip-path: inset(0 100% 0 0); transition: clip-path 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fissa-menu a:hover::after { clip-path: inset(0 0 0 0); } }
.fissa-cta { min-height: 44px; font-size: 16px; padding: 0.55em 1.1em; }
.fissa-wa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--carta-scura); box-shadow: inset 0 0 0 1.5px var(--sabbia); touch-action: manipulation; transition: scale 0.16s var(--ease-out); }
.fissa-wa svg { width: 26px; height: 26px; }
.fissa-wa .icona-wa { color: var(--verde-scuro); }
.fissa-wa:active { scale: 0.94; }
.fissa-menu-apri {
  display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%;
  background: var(--carta-scura); box-shadow: inset 0 0 0 1.5px var(--sabbia);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: scale 0.16s var(--ease-out);
}
.fissa-menu-apri:active { scale: 0.94; }
.fissa-menu-apri span, .fissa-menu-apri span::before, .fissa-menu-apri span::after {
  position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: var(--inchiostro-forte); content: "";
}
.fissa-menu-apri span { top: 21px; }
.fissa-menu-apri span::before { left: 0; top: -6px; }
.fissa-menu-apri span::after { left: 0; top: 6px; }
@media (max-width: 1179px) {
  .fissa-menu, .fissa-cta, .fissa-wa { display: none; }
  .fissa-menu-apri { display: block; }
  .testata-fissa-riga { min-height: 58px; }
  .fissa-marchio { font-size: 17px; }
  .fissa-marchio img { width: 38px; height: 38px; }
  /* col menu aperto il pulsante della testata resta in vista, per chiuderlo */
  html.menu-aperto .menu-apri { position: fixed; }
}

/* ── la hero entra al caricamento, in CSS (la foto è subito visibile) ──── */
@keyframes entra-su { from { opacity: 0; translate: 0 28px; } }
@keyframes entra-giu { from { opacity: 0; translate: 0 -14px; } }
@keyframes entra-scala { from { opacity: 0; scale: 0.92; } }
@keyframes entra-destra { from { translate: 100% 0; } }
@keyframes posa { from { opacity: 0; translate: 0 -22px; rotate: 9deg; } }
@keyframes timbra { 0% { opacity: 0; scale: 1.4; } 55% { opacity: 1; scale: 0.95; } 100% { opacity: 1; scale: 1; } }
@keyframes respiro { from { scale: 1.06; } }
@keyframes sfuma { from { opacity: 0; } }

.hero-foto img { animation: respiro 2.6s var(--ease-out) both; }
.logo { animation: entra-scala 0.8s var(--ease-out) 0.05s both; }
.hero-marchio { animation: entra-su 0.9s var(--ease-out) 0.15s both; }
.hero-sotto { animation: entra-su 0.9s var(--ease-out) 0.27s both; }
.hero-posta { animation: posa 0.9s var(--ease-out) 0.4s both; }
.hero-posta .timbro { animation: timbra 0.5s var(--ease-out) 1s both; }
.linguetta { animation: entra-destra 0.7s var(--ease-out) 0.65s both; }
.biglietto-ombra { animation: entra-su 0.9s var(--ease-out) 0.42s both; }
@media (min-width: 1180px) {
  .menu { animation: entra-giu 0.7s var(--ease-out) 0.12s both; }
}

/* ── le sezioni arrivano scorrendo (.reveal → .in, una volta sola) ─────── */
.js .reveal {
  opacity: 0; translate: 0 28px;
  transition: opacity 0.7s var(--ease-out), translate 0.8s var(--ease-out);
  transition-delay: var(--ritardo, 0ms);
}
.js .reveal.in { opacity: 1; translate: 0 0; }
.vivo-ko .reveal, .vivo-ko [data-reveal] { opacity: 1 !important; translate: none !important; }
.servizio.reveal { translate: 0 18px; }

/* i fili tratteggiati si disegnano quando le cartoline entrano */
.fili [data-filo-maschera] { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fili.in [data-filo-maschera] { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-in-out) 0.5s; }
.fili.in [data-filo-maschera="ramo"] { transition-delay: 1.2s; transition-duration: 0.6s; }
.fili.in [data-filo-maschera="2"] { transition-delay: 1.1s; }
.vivo-ko .fili [data-filo-maschera] { stroke-dashoffset: 0; }

/* il filo dei tre passi si stende da sinistra */
.passaggi::before { clip-path: inset(0 100% 0 0); }
.js .passaggi.in::before { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-in-out) 0.25s; }
html:not(.js) .passaggi::before, .vivo-ko .passaggi::before { clip-path: none; }

/* il timbro dei dintorni «timbra» */
.js .timbro-dintorni { opacity: 0; }
.js .timbro-dintorni.in { animation: timbra 0.5s var(--ease-out) 0.35s both; }

/* ── al passaggio del mouse le cartoline si sollevano ─────────────────── */
/* dopo l'entrata (.arrivato) le transizioni diventano brevi: il ritorno è più veloce dell'arrivo */
.cartolina, .polaroid, .luogo { transition: translate 0.2s var(--ease-out), box-shadow 0.2s ease; }
.js .reveal.arrivato { transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out), box-shadow 0.2s ease; transition-delay: 0ms; }
.foto-grande img, .polaroid img { transition: scale 0.5s var(--ease-out); }
.bollo { transition: scale 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  html:not(.js) .cartolina:hover, html:not(.js) .polaroid:hover,
  .js .cartolina.arrivato:hover, .js .polaroid.arrivato:hover { translate: 0 -6px; transition-duration: 0.3s; box-shadow: 0 2px 2px rgba(62, 52, 30, 0.07), 0 18px 34px rgba(62, 52, 30, 0.18); }
  .cartolina:hover .foto-grande img, .polaroid:hover img { scale: 1.035; }
  .cartolina:hover .bollo, .passaggio:hover .bollo, .retro:hover .bollo, .domande-testa:hover .bollo { scale: 1.08; }
  html:not(.js) .luogo:hover, .js .luogo.arrivato:hover { translate: 0 -6px; transition-duration: 0.3s; }
  .ospiti-riga:hover .ospiti-chiave { rotate: -2deg; }
  .canali a:hover img, .canali a:hover svg, .linguetta a:hover img, .linguetta a:hover svg { scale: 1.08; }
}
.ospiti-chiave { transition: rotate 0.4s var(--ease-out); }
.canali img, .canali svg, .linguetta img, .linguetta svg { transition: scale 0.2s var(--ease-out); }
.canali a:active img, .canali a:active svg, .linguetta a:active img, .linguetta a:active svg { scale: 0.94; }

/* ── il menu da telefono: le voci entrano una dopo l'altra ────────────── */
@keyframes voce { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 1179px) {
  .menu.aperto li { animation: voce 0.42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
  .menu.aperto > .btn { animation: voce 0.42s var(--ease-out) 0.28s both; }
}

/* ── il calendario: il mese che cambia, il giorno scelto ──────────────── */
@keyframes mese-dopo { from { opacity: 0; translate: 18px 0; } }
@keyframes mese-prima { from { opacity: 0; translate: -18px 0; } }
@keyframes scegli { from { scale: 0.82; opacity: 0.5; } }
@keyframes cambia { from { opacity: 0.25; } }
.giorni.va-dopo { animation: mese-dopo 0.26s var(--ease-out); }
.giorni.va-prima { animation: mese-prima 0.26s var(--ease-out); }
.giorno.appena span { animation: scegli 0.24s var(--ease-out); }
.prezzo.cambiato { animation: cambia 0.3s ease; }

/* ── le domande frequenti: la risposta che si apre ────────────────────── */
@keyframes apri { from { opacity: 0; translate: 0 -6px; } }
.domanda[open] p { animation: apri 0.28s var(--ease-out); }

/* ── i numeri che contano: cifre della stessa larghezza mentre salgono ── */
[data-conta] { font-variant-numeric: tabular-nums; }

/* ── «riduci animazioni»: meno movimento, non zero ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-foto img { animation: none; }
  .logo, .hero-marchio, .hero-sotto, .hero-posta, .hero-posta .timbro, .biglietto-ombra, .menu { animation-name: sfuma; animation-duration: 0.6s; }
  .linguetta { animation: sfuma 0.6s ease 0.3s both; }
  .js .reveal { translate: none; transition: opacity 0.6s ease; }
  .fili [data-filo-maschera] { stroke-dashoffset: 0; }
  .fili.in [data-filo-maschera] { transition: none; }
  .js .fili { opacity: 0; transition: opacity 0.6s ease; }
  .js .fili.in { opacity: 1; }
  .passaggi::before { clip-path: none; }
  .js .timbro-dintorni.in { animation: sfuma 0.6s ease both; }
  .testata-fissa { translate: none; opacity: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .testata-fissa.vista { opacity: 1; transition: opacity 0.3s ease, visibility 0s; }
  .menu.aperto li, .menu.aperto > .btn { animation-name: sfuma; }
  .giorni.va-dopo, .giorni.va-prima { animation-name: sfuma; }
  .giorno.appena span, .domanda[open] p { animation-name: sfuma; }
  .foto-grande img, .polaroid img { transition: none; }
}

/* con l'intestazione in alto, le àncore non finiscono sotto di lei */
@media (min-width: 1180px) {
  main > section[id] { scroll-margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .js .cartolina.arrivato:hover, .js .polaroid.arrivato:hover, .js .luogo.arrivato:hover { translate: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   STEP 6 · IL COPY NELLA GRAFICA (05/11/2026): stessi blocchi, altro testo
   ═════════════════════════════════════════════════════════════════════════ */

/* il menu a tendina «Le camere» (si apre col mouse e con la tastiera) */
.tendina { position: relative; }
.tendina > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; }
.tendina-voci {
  position: absolute; top: 100%; left: -14px; z-index: 5; min-width: 250px;
  margin-top: 8px; padding: 8px; border-radius: 14px;
  background: var(--carta-chiara); box-shadow: 0 2px 4px rgba(40, 32, 16, 0.08), 0 14px 32px rgba(40, 32, 16, 0.2);
  opacity: 0; translate: 0 -6px; visibility: hidden;
  transition: opacity 0.16s ease, translate 0.16s var(--ease-out), visibility 0s linear 0.16s;
}
.tendina-voci::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.tendina:focus-within .tendina-voci { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.2s ease, translate 0.22s var(--ease-out), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .tendina:hover .tendina-voci { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.2s ease, translate 0.22s var(--ease-out), visibility 0s; }
  .tendina-voci a:hover { background-color: var(--carta-scura); }
}
.menu .tendina-voci a, .fissa-menu .tendina-voci a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: 17px; font-weight: 500; color: var(--inchiostro-forte); text-shadow: none; background-image: none;
  transition: background-color 0.15s ease;
}
.fissa-menu ul { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); }
.fissa-menu .tendina > a::after { translate: 0 -2px; }

/* il biglietto: la riga sotto il titolo e i nomi corti con gli ospiti sotto */
.biglietto-riga { margin-top: 8px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; color: var(--inchiostro); max-width: 34em; }
.nome-alloggio { display: flex; flex-direction: column; line-height: 1.15; }
.nome-alloggio small { margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--oliva); }
.alloggi { gap: 4px clamp(12px, 1.5vw, 22px); }

/* le cartoline: la riga degli ingressi, a destra sotto le schede */
.camere-nota {
  position: absolute; right: max(var(--margine), env(safe-area-inset-right, 0px)); bottom: 6px;
  display: flex; align-items: center; gap: 12px; max-width: 19%;
  font-size: clamp(14px, 1.15vw, 17px); line-height: 1.3; color: var(--inchiostro-forte);
}
.camere-nota::before { content: ""; flex: none; width: 34px; height: 43px; background: url("/assets/img/kit/ingresso-indipendente.webp") center / contain no-repeat; }
.cartolina-coccinelle h3 { font-size: clamp(22px, 2.1vw, 30px); }
.cartolina-casa h3 { font-size: clamp(22px, 2.1vw, 30px); }

/* le polaroid: le didascalie del copy */
.polaroid figcaption span + span { margin-top: 0.25em; }
.polaroid figcaption .link-freccia { margin-top: 10px; }
.polaroid-giardino strong { font-size: clamp(18px, 1.6vw, 24px); }

/* i dintorni: il titolo non passa sotto il timbro, il link sotto i francobolli */
.dintorni-testa .titolo-sezione { max-width: 70%; }
.dintorni-link { display: flex; justify-content: flex-end; margin-top: clamp(14px, 1.4vw, 20px); }

/* le recensioni: al centro il voto, la riga di «Amato dagli ospiti» e il link */
.retro-pensiero h2 { font-size: clamp(24px, 2.5vw, 36px); }
.voto-righe { line-height: 1.4; max-width: 22em; }
.voto-link { margin-top: 10px; }
.voto-link .link-freccia { font-size: clamp(15px, 1.15vw, 17px); }
.firma a { color: inherit; text-underline-offset: 0.18em; }

/* le domande: il rimando alla pagina */
.domande-tutte { margin-top: clamp(14px, 1.4vw, 20px); }

/* i contatti */
.contatti-indirizzo { display: flex; justify-content: center; }
.ospiti p a { color: var(--verde-scuro); font-weight: 600; text-underline-offset: 0.2em; }

/* il piede: le voci di extra.md nelle colonne del design */
.piede-marchio > span { display: flex; flex-direction: column; line-height: 1.25; }
.piede-marchio strong { font-weight: 600; }
.piede-descrizione { font-size: 14px; font-weight: 400; color: var(--inchiostro); }
.piede-marchio { margin-left: 0; }
.piede-link { gap: 2px clamp(14px, 1.6vw, 24px); margin-right: 0; padding-left: clamp(16px, 2vw, 32px); max-width: 66%; }
.piede-link a { padding: 6px 0; font-size: 15px; }
.piede-recapiti { display: flex; flex-wrap: wrap; gap: 2px 26px; padding-bottom: 10px; font-size: 14px; color: var(--inchiostro); }
.piede-recapiti a { color: var(--inchiostro-forte); }
@media (hover: hover) and (pointer: fine) { .piede-recapiti a:hover { color: var(--verde-scuro); } }

@media (max-width: 1179px) {
  /* da telefono e tablet le tre camere stanno sotto «Le camere», sempre in vista */
  .menu .tendina-voci { position: static; opacity: 1; translate: none; visibility: visible; min-width: 0; margin: 0 0 4px; padding: 0; background: none; box-shadow: none; text-align: center; }
  .menu .tendina-voci::before { display: none; }
  .menu .tendina > a::after { display: none; }
  .menu .tendina-voci a { padding: 6px 8px; font-size: 19px; font-weight: 500; color: var(--inchiostro); }
  .menu > ul > li { text-align: center; }
}
@media (max-width: 760px) {
  .camere-nota { position: static; max-width: none; margin-top: 4px; }
  .dintorni-testa .titolo-sezione { max-width: none; padding-right: 0; }
  .dintorni-link { justify-content: flex-start; }
  .alloggi { gap: 4px 16px; }
  .piede-riga { gap: 8px; padding-top: 12px; padding-bottom: 8px; }
  .piede-link { max-width: none; gap: 0 14px; line-height: 1.3; }
  .piede-link a { padding: 3px 0; font-size: 14px; }
  .piede-recapiti { flex-direction: column; align-items: center; gap: 0; text-align: center; font-size: 13px; line-height: 1.4; padding-bottom: 6px; }
  .piede-legale { gap: 0 14px; font-size: 13px; line-height: 1.4; padding-bottom: 12px; }
  .piede-marchio img { width: 46px; }
}

/* niente parole sole sull'ultima riga, titoli bilanciati */
p, li, figcaption span, summary, .dettagli { text-wrap: pretty; }
.biglietto h2, .retro-pensiero h2, .domande-testa h2, .contatti h2, .ospiti h2, .cartolina h3, .polaroid strong, .camere-nota, .luoghi-piccoli .luogo p span { text-wrap: balance; }
.link-freccia { white-space: nowrap; }
.polaroid .didascalia { font-size: clamp(16px, 1.45vw, 21px); line-height: 1.35; color: var(--inchiostro-forte); }
.polaroid .didascalia b { font-weight: 700; }
@media (min-width: 761px) {
  .piede-link { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; }
}

/* il copy sta nello spazio del design: meno aria dove il testo è cresciuto */
.dintorni { padding-bottom: clamp(14px, 1.2vw, 18px); }
.dintorni .francobolli { margin-top: clamp(12px, 1.1vw, 16px); }
.dintorni-link { margin-top: clamp(6px, 0.6vw, 10px); }
.polaroid-colazione .finestra { aspect-ratio: 1.9; }
.polaroid-giardino .finestra { aspect-ratio: 1.68; }
.domande-tutte { margin-top: clamp(8px, 0.8vw, 12px); }
.belle { padding-bottom: clamp(8px, 0.8vw, 12px); }
@media (max-width: 760px) {
  .polaroid-colazione .finestra, .polaroid-giardino .finestra { aspect-ratio: 1.6; }
  .polaroid figcaption { padding-top: 10px; }
  .polaroid figcaption span, .polaroid .didascalia { font-size: 15px; line-height: 1.38; }
  .dintorni-testa { padding-right: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   STEP 6-BIS · LE PAGINE INTERNE (05/11/2026): gli stessi pezzi della home
   (hero con la foto, biglietto, cartoline, retro, francobolli, polaroid, timbro)
   ═════════════════════════════════════════════════════════════════════════ */

/* la hero: la stessa della home, più bassa, col titolo della pagina */
.hero-interna { height: clamp(520px, 45vw, 690px); }
.hero-interna .hero-testo { bottom: clamp(86px, 7.6vw, 118px); }
.hero-interna.senza-biglietto .hero-testo { bottom: clamp(46px, 4.2vw, 66px); }
.hero-interna h1 {
  max-width: 17em;
  font-size: clamp(34px, 4.3vw, 62px); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.18), 0 4px 30px rgba(0, 0, 0, 0.35);
}
.hero-riga {
  max-width: 40em; margin-top: clamp(10px, 1vw, 14px);
  font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(16px, 1.6vw, 24px); }
.hero-azioni .btn svg { width: 22px; height: 22px; flex: none; }
.hero-interna h1 { animation: entra-su 0.9s var(--ease-out) 0.15s both; }
.hero-riga { animation: entra-su 0.9s var(--ease-out) 0.27s both; }
.hero-azioni { animation: entra-su 0.9s var(--ease-out) 0.36s both; }
.hero-posta .bollo { --lato: 100%; --r: clamp(3px, 0.42vw, 6px); --fondo: var(--carta-chiara); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3)); }

/* le sezioni */
.sezione { padding: clamp(34px, 3.4vw, 54px) 0; }
.sezione-testa { margin-bottom: clamp(16px, 1.8vw, 28px); }
.sezione-testa p { margin-top: 0.5em; max-width: 44em; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; color: var(--inchiostro); }
.sezione-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: clamp(18px, 1.8vw, 28px); }
.sezione-fondo.centro { justify-content: center; }

/* la cartolina della pagina: foto e testo, un po' storta come nella home */
.cartolina-pagina {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center;
  gap: clamp(18px, 2.6vw, 42px); padding: clamp(12px, 1.3vw, 18px);
  rotate: -0.7deg;
}
.cartolina-pagina.inversa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); rotate: 0.6deg; }
.cartolina-pagina.inversa .cartolina-foto { order: 2; }
.cartolina-pagina .cartolina-foto { position: relative; }
.cartolina-pagina .foto-grande { aspect-ratio: 1.32; overflow: hidden; }
.cartolina-pagina .foto-piccola { position: absolute; right: -4%; bottom: -8%; width: 38%; aspect-ratio: 0.82; overflow: hidden; rotate: 2.6deg; }
.cartolina-pagina .cartolina-testo { position: relative; padding: clamp(10px, 1.3vw, 22px) clamp(8px, 1.6vw, 30px) clamp(14px, 1.4vw, 24px) clamp(4px, 0.6vw, 10px); }
.cartolina-pagina.inversa .cartolina-testo { padding-left: clamp(8px, 1.6vw, 30px); }
.cartolina-pagina h2 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--inchiostro-forte); text-wrap: balance; }
.cartolina-pagina .cartolina-testo > p, .cartolina-pagina blockquote { margin-top: 0.65em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.cartolina-pagina blockquote p { font-style: italic; font-weight: 500; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.35; color: var(--inchiostro-forte); }
.cartolina-pagina blockquote .firma { margin-top: 6px; font-style: normal; font-weight: 400; font-size: 14px; color: var(--oliva); }
.cartolina-pagina .cartolina-testo > .bollo { --lato: clamp(56px, 5vw, 76px); float: right; margin: -6px 0 8px 14px; rotate: 3deg; }
.cartolina-pagina .link-freccia, .cartolina-pagina .btn { margin-top: clamp(14px, 1.4vw, 20px); }
.cartolina-pagina .dotazioni { margin-top: 14px; }

/* il retro della cartolina: testo a sinistra, i francobolli a destra */
.retro-pagina { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: clamp(18px, 3vw, 48px); }
.retro-pagina h2 { font-size: clamp(26px, 2.5vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--inchiostro-forte); text-wrap: balance; }
.retro-pagina h2 a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.retro-pagina .retro-testo > p { margin-top: 0.6em; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; }
.retro-pagina .retro-testo .link-freccia, .retro-pagina .retro-testo .btn { margin-top: clamp(14px, 1.4vw, 20px); }
.retro-lato { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-left: clamp(18px, 2.6vw, 40px); border-left: 1.5px solid var(--sabbia); }
.bolli { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.2vw, 18px); }
.bolli .bollo { --lato: clamp(58px, 5.2vw, 78px); }
.bolli .bollo:nth-child(odd) { rotate: -3deg; }
.bolli .bollo:nth-child(even) { rotate: 2.5deg; }
.retro-lato .righe { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.retro-lato .righe span { display: block; border-top: 1.5px solid var(--sabbia); }
.coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 38px); align-items: stretch; }
.terna { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); align-items: stretch; }
.coppia > .retro-ombra, .terna > .retro-ombra { display: flex; }
.coppia .retro, .terna .retro { width: 100%; padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2.4vw, 36px); }
.coppia > :nth-child(odd) { rotate: -0.5deg; }
.coppia > :nth-child(even) { rotate: 0.6deg; }
.terna > :nth-child(1) { rotate: -0.6deg; }
.terna > :nth-child(2) { rotate: 0.5deg; }
.terna > :nth-child(3) { rotate: -0.3deg; }
.scheda-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.scheda-testa h2, .scheda-testa h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.15; color: var(--inchiostro-forte); text-wrap: balance; }
.scheda-testa .bollo { --lato: clamp(52px, 4.4vw, 66px); flex: none; rotate: 3deg; }
.retro .scheda-corpo > p { margin-top: 0.6em; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; }
.retro .scheda-corpo .link-freccia { margin-top: 14px; }
.retro .scheda-corpo .dotazioni { margin-top: 12px; }

/* gli elenchi con le icone del kit */
.dotazioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(18px, 2vw, 30px); }
.dotazioni.una { grid-template-columns: 1fr; }
.dotazioni li { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.35; color: var(--inchiostro-forte); }
.dotazioni img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.icone-fila { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 16px; }
.icone-fila img { width: 44px; height: 44px; object-fit: contain; }

/* la galleria della pagina: polaroid in griglia (3 o 2 per riga), si aprono a tutto schermo */
.galleria-pagina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.galleria-pagina.due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.foto-tessera {
  display: block; width: 100%; padding: clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) clamp(14px, 1.4vw, 20px);
  border: 0; border-radius: 4px; background: var(--carta-chiara); box-shadow: var(--ombra-carta);
  cursor: zoom-in; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.foto-tessera .finestra { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--carta-scura); }
.foto-tessera img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.5s var(--ease-out); }
.galleria-pagina > :nth-child(3n + 1) { rotate: -1.3deg; }
.galleria-pagina > :nth-child(3n + 2) { rotate: 0.9deg; }
.galleria-pagina > :nth-child(3n) { rotate: -0.5deg; }
.foto-tessera:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .foto-tessera:hover img { scale: 1.04; }
  html:not(.js) .foto-tessera:hover, .js .foto-tessera.arrivato:hover { translate: 0 -6px; box-shadow: 0 2px 2px rgba(62, 52, 30, 0.07), 0 18px 34px rgba(62, 52, 30, 0.18); }
}
.foto-tessera { transition: translate 0.2s var(--ease-out), box-shadow 0.2s ease, scale 0.16s var(--ease-out); }

/* i francobolli dei luoghi, con la veduta disegnata */
.luogo-pagina { display: flex; flex-direction: column; gap: 14px; }
.luogo-pagina .luogo { max-width: 360px; }
.luogo-pagina .luogo .dentelli { padding: clamp(16px, 1.6vw, 24px); }
.luogo-pagina h2 { margin-top: 6px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.15; color: var(--inchiostro-forte); }
.luogo-pagina p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; }
.due-francobolli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.due-francobolli .luogo:nth-child(1) { rotate: -1.2deg; }
.due-francobolli .luogo:nth-child(2) { rotate: 1deg; }

/* la schermata del codice degli ospiti */
.accesso { max-width: 760px; margin-inline: auto; }
.accesso .retro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); align-items: center; padding: clamp(26px, 2.8vw, 42px) clamp(22px, 3.2vw, 50px); }
.accesso .ospiti-chiave { width: clamp(70px, 7vw, 96px); }
.accesso h2 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; line-height: 1.12; color: var(--inchiostro-forte); }
.accesso p { margin-top: 8px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; }
.accesso form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; }
.accesso label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; font-weight: 600; font-size: 15px; color: var(--inchiostro-forte); }
.accesso input {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--salvia); border-radius: 10px;
  background: var(--bianco); font-size: 16px; color: var(--inchiostro-forte);
}
.accesso input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.accesso .btn { min-height: 50px; }
.accesso .errore { width: 100%; margin-top: 4px; padding: 9px 14px; border-radius: 10px; background: var(--carta-scura); box-shadow: inset 0 0 0 1.5px var(--tratteggio); font-weight: 600; font-size: 15px; color: var(--inchiostro-forte); }
.accesso .errore[hidden] { display: none; }
@keyframes scuoti { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
.accesso form.no { animation: scuoti 0.36s var(--ease-out); }

/* la pagina corrente nel menu */
.menu a[aria-current="page"], .fissa-menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }

@media (max-width: 1099px) {
  .terna { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-interna { height: min(76svh, 640px); min-height: 500px; }
  .hero-interna .hero-testo { bottom: 70px; }
  .hero-interna.senza-biglietto .hero-testo { bottom: 34px; }
  .hero-interna h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.08; }
  .hero-riga { font-size: 17px; }
  .hero-azioni .btn { min-height: 48px; }
  .sezione { padding: 30px 0; }
  .cartolina-pagina, .cartolina-pagina.inversa { grid-template-columns: 1fr; rotate: -0.5deg; padding: 10px; }
  .cartolina-pagina.inversa { rotate: 0.5deg; }
  .cartolina-pagina.inversa .cartolina-foto { order: 0; }
  .cartolina-pagina .cartolina-testo { padding: 8px 8px 10px; }
  .cartolina-pagina .foto-piccola { width: 34%; bottom: -10%; }
  .cartolina-pagina .cartolina-foto + .cartolina-testo { margin-top: 14px; }
  .retro-pagina { grid-template-columns: 1fr; }
  .retro-lato { border-left: 0; border-top: 1.5px solid var(--sabbia); padding: 16px 0 0; }
  .retro-lato .righe { display: none; }
  .coppia { grid-template-columns: 1fr; }
  .dotazioni { grid-template-columns: 1fr; }
  .galleria-pagina, .galleria-pagina.due {
    display: flex; gap: 14px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--margine)); padding: 10px var(--margine) 18px; scroll-padding-inline: var(--margine);
  }
  .galleria-pagina > * { flex: 0 0 72%; scroll-snap-align: start; }
  .galleria-pagina.due > * { flex-basis: 76%; }
  .due-francobolli { grid-template-columns: 1fr 1fr; }
  .accesso .retro { grid-template-columns: 1fr; }
  .accesso .ospiti-chiave { width: 64px; }
}

/* le schede delle camere nelle pagine (come le cartoline della home) */
.schede-camere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.8vw, 44px); align-items: start; }
.schede-camere.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartolina-scheda { padding: clamp(10px, 1vw, 14px); }
.cartolina-scheda .foto-grande { aspect-ratio: 1.32; overflow: hidden; }
.cartolina-scheda .cartolina-testo { padding: clamp(12px, 1.2vw, 18px) clamp(8px, 1vw, 14px) clamp(6px, 0.6vw, 10px); }
.cartolina-scheda .titolo-con-bollo { justify-content: space-between; align-items: flex-start; }
.cartolina-scheda h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--inchiostro-forte); text-wrap: balance; }
.cartolina-scheda .bollo { --lato: clamp(46px, 3.8vw, 58px); --r: 2.8px; flex: none; rotate: 3deg; }
.cartolina-scheda .dettagli { margin-top: 0.4em; }
.cartolina-scheda .link-freccia { margin-top: 12px; }
.schede-camere > :nth-child(1) { rotate: -1.2deg; }
.schede-camere > :nth-child(2) { rotate: 1deg; margin-top: clamp(14px, 2vw, 30px); }
.schede-camere > :nth-child(3) { rotate: -0.6deg; }
.sezione .camere-nota { position: static; max-width: none; justify-content: flex-end; margin-top: clamp(18px, 2vw, 28px); }

/* testo e due polaroid (come «Le cose belle» della home) */
.coppia-polaroid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: center; gap: clamp(20px, 3vw, 48px); }
.coppia-polaroid.inversa .coppia-polaroid-testo { order: 2; }
.coppia-polaroid .polaroid-fila { margin-top: 0; }
.coppia-polaroid .polaroid .finestra { aspect-ratio: 1.2; }
.coppia-polaroid .polaroid { padding-bottom: clamp(12px, 1.2vw, 18px); }
.coppia-polaroid-testo .titolo-sezione { font-size: clamp(30px, 3.2vw, 46px); }
.coppia-polaroid-testo p { margin-top: 0.6em; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; }
.coppia-polaroid-testo .link-freccia { margin-top: clamp(14px, 1.4vw, 20px); }

.due-link { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.due-link .link-freccia { margin-top: 0; }
.giardino-elenco { max-width: 1000px; margin-bottom: clamp(20px, 2.2vw, 32px); }
.sezione-faq + .sezione-faq { padding-top: 0; }
.sezione-faq:nth-of-type(even) .retro-ombra-domande { rotate: -0.3deg; }
.sezione-canali { padding-top: clamp(26px, 2.6vw, 40px); }
.sezione-accesso { padding-top: clamp(40px, 4vw, 64px); }
.sezione.ospiti { padding: clamp(20px, 2vw, 32px) 0; }
.barra-telefono.barra-sola { grid-template-columns: 1fr; }
.wifi-dati[hidden], .regole-elenco[hidden], .riservato[hidden] { display: none; }

@media (max-width: 1099px) {
  .schede-camere.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schede-camere.tre > :nth-child(3) { grid-column: 1 / -1; width: 60%; justify-self: center; }
}
@media (max-width: 760px) {
  .schede-camere, .schede-camere.tre { grid-template-columns: 1fr; gap: 26px; }
  .schede-camere.tre > :nth-child(3) { width: auto; }
  .schede-camere > :nth-child(2) { margin-top: 0; }
  .coppia-polaroid, .coppia-polaroid.inversa { grid-template-columns: 1fr; }
  .coppia-polaroid.inversa .coppia-polaroid-testo { order: 0; }
  .sezione .camere-nota { justify-content: flex-start; }
}