/* Villa Domizia · step 5 · il design del kit (home-approvata.png), fedele e rifinito.
   Caratteri serviti dal sito: Newsreader (titoli, tondo), Source Serif 4 Display (titoli, corsivo), Source Sans 3 (testo). */

@font-face {
  font-family: "Villa Serif";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Villa Serif";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Villa Serif";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* I colori, misurati dal design (confronta-design.py --colori e campioni su pulsanti, piè di pagina e sole) */
:root {
  --blu-notte: #00416E;      /* piè di pagina */
  --blu-pulsante: #014575;   /* pulsanti */
  --blu-titolo: #012E5F;     /* titoli */
  --blu-testo: #284A74;      /* testo */
  --ardesia: #2D495E;
  --grigio-blu: #5C859D;
  --grigio-testo: #7D8C9B;
  --azzurro: #5CB3E9;
  --nebbia: #D3DDE2;         /* bordi */
  --nebbia-chiara: #E4E9EC;
  --sabbia: #C2BAB3;         /* separatori */
  --mappa: #E9E3DB;
  --crema: #F5EEE6;
  --carta: #FDFCF7;          /* fondo */
  --carta-calda: #FDFAF5;
  --carta-fredda: #FBFAF7;
  --bianco-caldo: #FEFDFB;
  --bianco: #FFFFFF;
  --oro-sole: #EDC57B;
  --oro: #C6A571;
  --oro-icone: #BC863A;      /* l'ocra delle icone dorate del design (pacchetti, conchiglie), misurato */
  --stelle: #FAB40B;
  --notte: #051F38;

  --serif: "Villa Serif", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --margine: clamp(16px, 5.4vw, 80px);
  --largo: 1320px;
  --raggio: 4px;
  --ombra: 0 18px 40px -22px rgba(1, 46, 95, .35);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrate e uscite */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* cose che si spostano sullo schermo */
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--blu-testo);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
picture img { width: 100%; height: 100%; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
em { font-style: italic; }
a, button, .btn, input, select { touch-action: manipulation; }
button, .btn, .menu__voce, .cal-freccia, .galleria__freccia { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 3px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--blu-pulsante); color: var(--bianco); border-radius: var(--raggio); text-decoration: none;
}
.salta:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

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

/* ── tipografia ─────────────────────────────────────────── */
.titolo {
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(36px, 4.1vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  color: var(--blu-titolo);
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.titolo em { font-weight: 600; letter-spacing: -0.01em; }
.titolo--medio { font-size: clamp(30px, 2.75vw, 40px); line-height: 1.08; }
.titolo--chiaro { color: var(--bianco); }
.titolo--corsivo em { font-weight: 600; }
.testo { font-size: clamp(16px, 1.32vw, 19px); line-height: 1.45; color: var(--blu-testo); max-width: 30em; }
.testo--chiaro { color: rgba(255, 255, 255, .92); }
.occhiello {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blu-titolo); line-height: 1.2;
}
.occhiello--chiaro { color: var(--bianco); }
.occhiello--piccolo { font-size: 12px; letter-spacing: .18em; }
.occhiello__segno { width: auto; height: 30px; flex: none; }
.occhiello__segno--sole { height: 28px; }
.occhiello__segno--onde { height: 22px; }
.occhiello__segno--conchiglia { height: 36px; }
.punto { margin: 0 .55em; }

/* ── pulsanti ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 48px; padding: 12px 26px;
  border: 0; border-radius: 2px;
  font-family: var(--sans); font-size: 18px; font-weight: 500; letter-spacing: .005em; line-height: 1.15;
  text-decoration: none; text-align: center;
  transition: background-color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn--pieno { background: var(--blu-pulsante); color: var(--bianco); box-shadow: 0 10px 24px -16px rgba(0, 65, 110, .9); }
.btn--grande { min-height: 62px; padding: 16px 34px; font-size: 20px; width: 100%; }
.btn--largo { width: 100%; min-height: 54px; font-size: 19px; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn--pieno:hover { background: var(--blu-titolo); box-shadow: 0 14px 30px -16px rgba(0, 65, 110, .95); }
  .btn:hover .freccia { transform: translateX(4px); }
}
.freccia { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.wa { width: 30px; height: 30px; flex: none; color: var(--blu-titolo); }
.link-freccia {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px;
  background: none; border: 0; font-size: 15px; color: var(--blu-titolo); text-decoration: none;
}
.link-freccia .freccia { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover .freccia, .link-foto:hover .freccia { transform: translateX(4px); }
  .link-freccia:hover span, .link-freccia:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.link-freccia:active { opacity: .7; }

.ico { width: auto; height: 40px; }

/* ── testata ────────────────────────────────────────────── */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .45s var(--ease-out);
}
.testata::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--carta); box-shadow: 0 1px 0 var(--nebbia), 0 12px 30px -24px rgba(1, 46, 95, .5);
  opacity: 0; transition: opacity .3s ease;
}
.testata::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 31, 56, .42), rgba(5, 31, 56, 0));
  transition: opacity .3s ease;
}
.testata__riga {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  max-width: calc(var(--largo) + 2 * var(--margine) + 80px); margin: 0 auto;
  padding: 20px max(var(--margine), env(safe-area-inset-right, 0px)) 12px max(var(--margine), env(safe-area-inset-left, 0px));
}
.testata__logo { position: relative; justify-self: start; display: block; width: clamp(150px, 15.5vw, 232px); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.logo { width: 100%; height: auto; transition: opacity .3s ease; }
.logo--blu { position: absolute; inset: 0; opacity: 0; }
.menu__lista { display: flex; gap: clamp(16px, 2.3vw, 38px); }
.menu__voce {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: clamp(16px, 1.25vw, 18px); color: var(--bianco); text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  text-shadow: 0 1px 10px rgba(5, 31, 56, .35);
  transition: color .25s ease, text-shadow .25s ease;
}
.menu__voce::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu__voce:hover::after { transform: scaleX(1); } }
.menu__azione { display: none; }
.testata__destra { justify-self: end; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.lingue-posto { display: flex; align-items: center; min-width: 0; }
.lingue-posto:empty { display: none; }
.menu-bottone { display: none; }

.testata.e-scesa::after { opacity: 1; }
.testata.e-scesa::before { opacity: 0; }
.testata.e-scesa .logo--bianco { opacity: 0; }
.testata.e-scesa .logo--blu { opacity: 1; }
.testata.e-scesa .menu__voce { color: var(--blu-titolo); text-shadow: none; }
/* da computer, scendendo, la barra si fa più bassa: si sposta e il logo si rimpicciolisce, solo con transform */
@media (min-width: 901px) {
  .menu__voce, .testata__destra { transition: color .25s ease, text-shadow .25s ease, transform .45s var(--ease-out); }
  .testata.e-scesa { transform: translateY(-14px); }
  .testata.e-scesa .testata__logo { transform: translateY(3px) scale(.74); }
  .testata.e-scesa .menu__voce, .testata.e-scesa .testata__destra { transform: translateY(3px); }
}

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 82svh, 800px);
  display: flex; align-items: flex-end;
  color: var(--bianco); overflow: hidden;
  background: var(--notte);
}
.hero__foto { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero__foto img {
  object-fit: cover; object-position: 50% 42%; transform-origin: 50% 62%;
  animation: foto-entra 1.8s var(--ease-out) both, foto-respira 24s var(--ease-in-out) 1.8s infinite alternate;
}
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(4, 60, 104, .58) 0%, rgba(4, 60, 104, .28) 26%, rgba(4, 60, 104, 0) 48%);
}
.hero__testo { text-align: center; padding-bottom: clamp(28px, 3.4vw, 48px); }
.hero__titolo {
  font-family: var(--serif); font-weight: 400; color: var(--bianco);
  font-size: clamp(42px, 5.5vw, 82px); line-height: 1.02; letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72;
  text-shadow: 0 2px 24px rgba(1, 46, 95, .35);
}
.hero__titolo em { font-weight: 600; letter-spacing: -0.008em; }
.hero__titolo .riga { display: block; animation: entra-su .95s var(--ease-out) .15s backwards; }
.hero__titolo .riga + .riga { animation-delay: .3s; }
.hero__fatti { animation: entra-su .85s var(--ease-out) .55s backwards; }
.testata__logo, .menu__lista, .testata__destra { animation: entra-giu .8s var(--ease-out) .1s backwards; }
.disponibilita__griglia > * { animation: entra-su .85s var(--ease-out) .7s backwards; }
.disponibilita__griglia > :nth-child(2) { animation-delay: .78s; }
.disponibilita__griglia > :nth-child(3) { animation-delay: .86s; }
@keyframes entra-su { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes entra-giu { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes foto-entra { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes foto-respira { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes dissolvenza { from { opacity: 0; } to { opacity: 1; } }

/* ── le sezioni che arrivano scorrendo (.reveal → .in, una volta sola) ── */
.js .reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--foto { opacity: 1; transform: none; clip-path: inset(9% 0 0 0); transition: clip-path 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal--foto img { transform: scale(1.07); transition: transform 1.5s var(--ease-out); transition-delay: inherit; }
.js .reveal--foto.in { clip-path: inset(0 0 0 0); }
.js .reveal--foto.in img { transform: none; }
/* la profondità (solo col mouse): la fascia della foto è più alta di quanto si vede, così spostandosi non lascia buchi */
.mattine__foto.profondita, .sera__foto.profondita { top: -40px; bottom: -40px; will-change: transform; }
.hero__fatti {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px;
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: clamp(12px, 1.12vw, 17px); font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(1, 46, 95, .45);
}
.hero__fatti .punto { margin: 0 1em; }

/* ── disponibilità: il calendario subito dopo la hero ───── */
.disponibilita { background: var(--carta); padding: clamp(22px, 2.2vw, 34px) 0 clamp(26px, 2.6vw, 40px); position: relative; }
.disponibilita__griglia {
  display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 48px); align-items: start;
}
.calendario { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cal-mese {
  border: 1px solid var(--nebbia); border-radius: 3px; background: var(--bianco-caldo);
  padding: 10px 14px 12px; overflow: clip;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) { .cal-mese:hover { border-color: var(--grigio-blu); box-shadow: var(--ombra); } }
.cal-griglia--avanti { animation: mese-avanti .32s var(--ease-out); }
.cal-griglia--indietro { animation: mese-indietro .32s var(--ease-out); }
@keyframes mese-avanti { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mese-indietro { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.cal-mese__nome { transition: opacity .2s ease; }
.cal-mese__testa { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; }
.cal-mese__nome { text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blu-titolo); }
.cal-freccia {
  width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%;
  color: var(--blu-pulsante); transition: background-color .2s ease, opacity .2s ease, transform .14s var(--ease-out);
}
.cal-freccia:active:not(:disabled) { transform: scale(.9); }
.cal-freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-freccia:disabled { opacity: .25; cursor: default; }
.cal-freccia:active:not(:disabled) { background: var(--nebbia-chiara); }
@media (hover: hover) and (pointer: fine) { .cal-freccia:hover:not(:disabled) { background: var(--nebbia-chiara); } }
.cal-mese:first-child .cal-freccia[data-cal-sposta="1"] { visibility: hidden; }
.cal-freccia--finta { visibility: hidden; }
.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 1px; margin-top: 2px; }
.cal-sett { text-align: center; font-size: 12px; color: var(--grigio-testo); padding: 3px 0 4px; }
.cal-giorno {
  position: relative; height: 28px; border: 0; background: none; padding: 0;
  font-size: 14px; color: var(--blu-titolo); font-variant-numeric: tabular-nums;
  display: grid; place-items: center; z-index: 0;
  transition: transform .12s var(--ease-out), color .15s ease;
}
.cal-giorno:not(:disabled):active { transform: scale(.9); }
.cal-giorno::before {
  content: ""; position: absolute; inset: 1px 3px; border-radius: 3px; z-index: -1; transition: background-color .15s ease;
}
.cal-giorno:disabled { cursor: default; }
.cal-giorno--passato { color: var(--sabbia); }
.cal-giorno--occupato { color: var(--grigio-testo); text-decoration: line-through; text-decoration-color: rgba(125, 140, 155, .7); }
.cal-giorno--occupato::before { background: var(--crema); }
.cal-giorno--oggi { font-weight: 700; }
.cal-giorno--intervallo::before { inset: 1px 0; border-radius: 0; background: var(--nebbia-chiara); }
.cal-giorno--arrivo, .cal-giorno--partenza { color: var(--bianco); font-weight: 600; }
.cal-giorno--arrivo::before, .cal-giorno--partenza::before { inset: 1px 3px; border-radius: 3px; background: var(--blu-pulsante); }
@media (hover: hover) and (pointer: fine) {
  .cal-giorno:not(:disabled):not(.cal-giorno--arrivo):not(.cal-giorno--partenza):hover::before { background: var(--nebbia); }
}
.cal-giorno:not(:disabled):active::before { background: var(--nebbia); }
.cal-vuoto { height: 28px; }
.cal-legenda { grid-column: 1 / -1; display: flex; gap: 22px; font-size: 13px; color: var(--grigio-testo); }
.cal-legenda__voce { display: inline-flex; align-items: center; gap: 8px; }
.cal-legenda__segno { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--nebbia); background: var(--bianco-caldo); }
.cal-legenda__segno--occupato { background: var(--crema); border-color: var(--sabbia); }

.campi { display: grid; gap: 10px; padding-top: 4px; }
.campo__etichetta { display: block; font-size: 15px; color: var(--blu-titolo); margin-bottom: 4px; }
.campo__riquadro { position: relative; }
.campo__input {
  width: 100%; height: 42px; padding: 0 44px 0 12px;
  border: 1px solid var(--nebbia); border-radius: 3px; background: var(--bianco);
  font-size: 16px; color: var(--blu-titolo);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo__input::placeholder { color: var(--grigio-testo); opacity: 1; }
.campo__input:focus { outline: none; border-color: var(--grigio-blu); box-shadow: 0 0 0 3px rgba(92, 179, 233, .22); }
.campo__input[aria-invalid="true"] { border-color: #B4513F; }
.campo__icona { position: absolute; right: 12px; top: 50%; width: 20px; height: auto; transform: translateY(-50%); pointer-events: none; opacity: .8; }
.campo__freccia { position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); pointer-events: none; fill: none; stroke: var(--blu-titolo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
select.campo__input { cursor: pointer; }

.richiesta { display: grid; gap: 14px; padding-top: 20px; justify-items: center; }
.richiesta__avviso { font-size: 14px; color: #9A4434; text-align: center; min-height: 0; }
.richiesta__avviso:empty { display: none; }
.richiesta__wa { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--blu-titolo); max-width: 340px; }
.richiesta__wa .wa { width: 28px; height: 28px; }
.richiesta__cin { font-size: 13px; color: var(--grigio-testo); text-align: center; }
.richiesta__cin:empty { display: none; }

/* ── 01 la villa ───────────────────────────────────────── */
.villa { position: relative; background: var(--carta); min-height: clamp(420px, 33vw, 500px); display: flex; align-items: center; overflow: hidden; }
.villa__foto { position: absolute; top: 0; right: 0; bottom: 0; width: 61%; }
.villa__foto picture { height: 100%; }
.villa__foto img {
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
  mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}
.villa__griglia { position: relative; padding-top: clamp(34px, 3vw, 46px); padding-bottom: clamp(34px, 3vw, 46px); }
.villa__testo { max-width: 600px; display: grid; gap: 18px; }
.villa__testo .titolo { margin-top: 4px; }
.villa__testo .testo { max-width: 460px; }
.numeri { display: flex; flex-wrap: nowrap; gap: 16px clamp(18px, 2vw, 30px); margin-top: 6px; }
.numeri__voce { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: start; column-gap: 10px; align-items: end; }
.numeri__voce .ico { grid-row: 1; height: 34px; align-self: center; }
.numeri__cifra { grid-row: 1; font-family: var(--serif); font-size: clamp(32px, 2.6vw, 40px); line-height: 1; color: var(--blu-titolo); font-variation-settings: "opsz" 72; }
.numeri__nome { grid-column: 2; grid-row: 2; font-size: 15px; color: var(--blu-testo); line-height: 1.2; margin-top: 2px; }
.villa__misure { font-size: clamp(16px, 1.3vw, 19px); color: var(--blu-testo); }

/* i rimandi alle pagine interne, come link sotto il testo */
.rimando { margin-top: -6px; }
.rimando .link-freccia { font-size: 16px; font-weight: 500; }
.rimando--due { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; }
.servizi__richiesta .link-freccia { display: flex; width: max-content; margin-top: 2px; font-size: 16px; font-weight: 500; }

/* ── le mattine ─────────────────────────────────────────── */
.mattine { position: relative; isolation: isolate; min-height: clamp(260px, 21vw, 320px); display: flex; align-items: center; overflow: hidden; }
.mattine__foto { position: absolute; inset: 0; z-index: -2; }
.mattine__foto img { object-fit: cover; object-position: 50% 62%; }
.mattine::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(253, 252, 247, .97) 0%, rgba(253, 252, 247, .82) 20%, rgba(253, 252, 247, 0) 44%);
}
.mattine__testo { display: grid; gap: 10px; }
.mattine__onde { width: 110px; height: auto; }
.mattine .titolo { font-size: clamp(34px, 3.6vw, 54px); }

/* ── 02 gli spazi ───────────────────────────────────────── */
.spazi { background: var(--carta); padding: clamp(12px, 1.2vw, 18px) 0 clamp(18px, 1.6vw, 26px); }
.spazi__lista { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, .9vw, 14px); }
.spazi__bottone { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: center; color: var(--blu-titolo); transition: transform .14s var(--ease-out); }
.spazi__bottone:active { transform: scale(.97); }
.spazi__foto { display: block; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 2; background: var(--nebbia-chiara); }
.spazi__foto img { object-fit: cover; transition: transform .7s var(--ease-out); }
.spazi__foto { position: relative; }
.spazi__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(1, 46, 95, .28), rgba(1, 46, 95, 0) 55%); opacity: 0; transition: opacity .25s ease; }
.spazi__voce--prima .occhiello { justify-content: center; line-height: 18px; }
.spazi__nome { font-size: 15px; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .spazi__bottone:hover .spazi__foto img { transform: scale(1.07); }
  .spazi__bottone:hover .spazi__foto::after { opacity: 1; }
  .entrate__foto:hover img, .villa__foto:hover img, .js .reveal--foto.in:hover img { transform: scale(1.035); }
  .spazi__bottone:hover .spazi__nome { text-decoration: underline; text-underline-offset: 4px; }
}
.spazi__tutte { display: flex; justify-content: flex-end; margin-top: -4px; }

/* ── entrate ────────────────────────────────────────────── */
.entrate { background: var(--carta); padding: clamp(6px, .8vw, 12px) 0 clamp(28px, 2.8vw, 44px); }
.entrate__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1vw, 16px); align-items: stretch; }
.entrate__sinistra { position: relative; display: grid; grid-template-rows: auto 1fr; }
.entrate__testo { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 14px; padding: 18px 0 0; }
.entrate__conchiglia { width: 54px; height: auto; grid-row: 1 / 3; align-self: start; margin-top: 4px; }
.entrate__testo .testo { grid-column: 2; max-width: 25em; }
.entrate__foto { display: block; overflow: hidden; border-radius: 2px; }
.entrate__foto img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
.entrate__foto--camera { margin-top: -38px; min-height: 300px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px); mask-image: linear-gradient(to bottom, transparent 0, #000 64px); }
.entrate__foto--soggiorno { min-height: 100%; }
.entrate__foto--soggiorno img { object-position: 50% 50%; }

/* ── 03 la villa di sera ───────────────────────────────── */
.sera { position: relative; isolation: isolate; min-height: clamp(360px, 27vw, 420px); display: flex; align-items: center; overflow: hidden; color: var(--bianco); background: var(--notte); }
.sera__foto { position: absolute; inset: 0; z-index: -2; }
.sera__foto img { object-fit: cover; object-position: 50% 74%; }
.sera__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right, rgba(1, 46, 95, .94) 0%, rgba(1, 46, 95, .78) 30%, rgba(1, 46, 95, .1) 58%, rgba(1, 46, 95, 0) 70%);
}
.sera__testo { display: grid; gap: 16px; padding-top: 30px; padding-bottom: 30px; }
.sera__testo .testo { max-width: 27em; }
.sera__dati { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 8px; }
.sera__dati li { display: flex; align-items: center; gap: 14px; font-size: 16px; line-height: 1.2; }
.sera__dati .ico { height: 34px; }
.sera__dati small { font-size: 15px; opacity: .9; }

/* ── 04 i servizi ───────────────────────────────────────── */
.servizi { background: var(--carta); padding: clamp(22px, 2vw, 32px) 0; border-bottom: 1px solid var(--nebbia-chiara); }
.servizi__griglia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 3vw, 48px); }
.servizi__titolo { align-self: start; }
.servizi__lista { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.servizi__lista li { display: grid; justify-items: center; align-content: start; gap: 10px; font-size: 16px; line-height: 1.25; color: var(--blu-titolo); text-align: center; }
.servizi__lista .ico { height: 44px; }
.servizi__richiesta {
  display: flex; align-items: center; gap: 22px; max-width: 360px;
  padding-left: clamp(20px, 3vw, 46px); border-left: 1px solid var(--sabbia);
  font-size: 18px; line-height: 1.35; color: var(--blu-titolo);
}
.ico--grande { height: 56px; flex: none; }

/* ── 05 le esperienze ───────────────────────────────────── */
.esperienze { position: relative; background: var(--carta); padding-bottom: clamp(18px, 1.8vw, 28px); overflow: hidden; }
.esperienze__foto { position: absolute; top: 0; right: 0; width: 66%; height: clamp(320px, 25vw, 380px); }
.esperienze__foto picture { height: 100%; }
.esperienze__foto img {
  object-fit: cover; object-position: 40% 55%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
.esperienze__testo { position: relative; min-height: clamp(320px, 25vw, 380px); display: grid; align-content: center; gap: 16px; max-width: 560px; padding: 28px 0; }
.esperienze__testo .testo { max-width: 460px; }
.pacchetti { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(14px, 1.4vw, 22px); }
.pacchetto { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 4px 12px; text-align: center; border-left: 1px solid var(--nebbia); }
.pacchetto:first-child { border-left: 0; justify-items: start; text-align: left; padding-left: 0; }
.pacchetto:last-child { justify-items: center; }
.pacchetto__icone { display: flex; align-items: flex-end; gap: 8px; height: 66px; margin-bottom: 8px; }
.pacchetto__icone .ico { height: 62px; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pacchetto:hover .pacchetto__icone .ico { transform: translateY(-5px); } }
.pacchetto__nome { font-size: 19px; font-weight: 600; color: var(--blu-titolo); line-height: 1.2; }
.pacchetto__prezzo { font-size: 18px; color: var(--blu-testo); line-height: 1.2; }
.esperienze__piede { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 24px; align-items: start; margin-top: clamp(16px, 1.6vw, 24px); }
.link-foto { display: inline-flex; align-items: center; gap: 16px; justify-self: start; min-height: 48px; padding: 0; border: 0; background: none; font-size: 18px; color: var(--blu-titolo); text-decoration: none; }
.link-foto .ico { height: 36px; }
.link-foto .freccia { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .link-foto:hover span { text-decoration: underline; text-underline-offset: 4px; } }
.link-foto:active { opacity: .7; }
.esperienze__azione { display: grid; gap: 12px; }
.esperienze__fuori { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--blu-testo); }
.esperienze__fuori .ico { height: 32px; flex: none; }
.ico--ferro { height: 30px !important; }

/* ── 06 il territorio · 07 le recensioni ───────────────── */
.zona { background: var(--carta); border-top: 1px solid var(--nebbia-chiara); border-bottom: 1px solid var(--nebbia-chiara); }
.zona__griglia { display: grid; grid-template-columns: 1.15fr 1.2fr 1fr; gap: clamp(20px, 2.6vw, 40px); align-items: center; padding-top: clamp(18px, 1.6vw, 26px); padding-bottom: clamp(18px, 1.6vw, 26px); }
.zona__territorio { display: grid; gap: 14px; }
.zona__territorio .testo { font-size: clamp(15px, 1.2vw, 18px); }
.mappa { position: relative; width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 900 / 757; margin: -10px 0; }
.mappa__isola { width: 100%; height: auto; }
.mappa__luoghi { position: absolute; inset: 0; }
.luogo {
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: 6px; transform: translate(-4px, -50%);
  font-size: 14px; color: var(--blu-titolo); white-space: nowrap; line-height: 1;
}
.luogo--sotto { flex-direction: column; gap: 4px; transform: translate(-50%, -4px); }
.luogo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blu-titolo); flex: none; }
.luogo--sinistra { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
.luogo--piccolo.luogo--sinistra { transform: translate(calc(-100% + 2.5px), -50%); }
.luogo--piccolo::before { width: 5px; height: 5px; background: var(--oro-icone); }
.luogo--qui { font-size: 15px; transform: translate(-7.5px, -50%); }
.luogo--qui::before { width: 15px; height: 15px; background: var(--oro-sole); box-shadow: 0 0 0 4px rgba(237, 197, 123, .25); }
.luogo--qui strong { font-weight: 700; }
.zona__recensioni { display: grid; gap: 8px; padding-left: clamp(20px, 2.6vw, 40px); border-left: 1px solid var(--nebbia); }
.stelle { font-size: 26px; letter-spacing: .08em; color: var(--stelle); line-height: 1; }
.recensioni__voto { font-size: 19px; color: var(--blu-titolo); }
.recensioni__giro { display: grid; }
.js .recensioni__giro > .recensione { grid-area: 1 / 1; transition: opacity .6s ease, transform .7s var(--ease-out); }
.recensioni__giro > .recensione + .recensione { margin-top: 12px; }
.js .recensioni__giro > .recensione + .recensione { margin-top: 0; }
.js .recensioni__giro > .recensione:not(.attiva) { opacity: 0; transform: translateY(10px); pointer-events: none; }
.recensioni__punti { display: flex; gap: 2px; margin-top: 4px; margin-left: -12px; }
.recensioni__punti:empty { display: none; }
.recensioni__punto { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; }
.recensioni__punto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nebbia); transition: background-color .25s ease, transform .25s var(--ease-out); }
.recensioni__punto[aria-current="true"]::before { background: var(--blu-pulsante); transform: scale(1.25); }
.recensioni__punto:active::before { transform: scale(.85); }
.recensione p { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(22px, 1.75vw, 26px); line-height: 1.15; color: var(--blu-titolo); }
.recensione footer { margin-top: 6px; font-size: 17px; color: var(--blu-testo); }

/* ── la fascia finale ───────────────────────────────────── */
.finale { background: var(--carta); padding: clamp(18px, 1.8vw, 28px) 0; }
.finale__griglia { display: grid; grid-template-columns: auto 1fr minmax(0, 390px); gap: clamp(20px, 3vw, 48px); align-items: center; }
.finale__onde { width: clamp(90px, 9vw, 130px); height: auto; }
.finale__testo { display: grid; gap: 6px; }
.finale__prezzo { font-size: clamp(15px, 1.22vw, 18px); color: var(--blu-testo); }
.finale__azione { display: grid; gap: 12px; }
.finale__wa { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--blu-titolo); min-height: 44px; }
.finale__wa .wa { width: 36px; height: 36px; }
.finale__wa strong { display: block; font-size: 22px; font-weight: 500; line-height: 1.1; }
.finale__wa small { display: block; font-size: 15px; color: var(--blu-testo); }
@media (hover: hover) and (pointer: fine) { .finale__wa:hover strong { text-decoration: underline; text-underline-offset: 4px; } }
.finale__wa:active { opacity: .7; }

/* ── piè di pagina ──────────────────────────────────────── */
.piede { background: var(--blu-notte); color: var(--bianco); }
.piede__riga { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding-top: 18px; padding-bottom: 16px; }
.piede__logo { display: flex; align-items: center; gap: 18px; padding-right: clamp(18px, 2.4vw, 36px); border-right: 1px solid rgba(255, 255, 255, .28); text-decoration: none; }
.piede__sole { width: 112px; height: auto; }
.piede__scritta { width: 200px; height: auto; }
.piede__menu { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 clamp(16px, 2.2vw, 34px); }
.piede__menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.piede__onde { width: 110px; height: auto; opacity: .7; padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid rgba(255, 255, 255, .28); box-sizing: content-box; }
.piede__luogo { display: grid; gap: 2px; font-size: 15px; text-align: right; }
.piede__luogo a { color: var(--bianco); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede__luogo a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.piede__legale { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 14px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: rgba(255, 255, 255, .78); }
.piede__legale a { color: var(--bianco); text-underline-offset: 3px; }
.piede__link { display: flex; gap: 10px; }
.piede__link a { display: inline-flex; align-items: center; min-height: 32px; }
.credit a { text-decoration: underline; }

/* ── l'avviso sotto il modulo, le pagine legali, la 404 ──── */
.thk-avviso-modulo { font-size: 12.5px; line-height: 1.4; color: var(--grigio-testo); text-align: center; max-width: 30em; }
.thk-avviso-modulo a { color: var(--blu-testo); }
.pagina-legale { padding: calc(130px + env(safe-area-inset-top, 0px)) 0 72px; }
.legale { max-width: 760px; color: var(--blu-testo); font-size: 17px; line-height: 1.6; }
.legale h1 { font-family: var(--serif); font-weight: 420; font-size: clamp(36px, 4vw, 52px); line-height: 1.08; color: var(--blu-titolo); margin-bottom: 10px; font-variation-settings: "opsz" 72; }
.legale h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2vw, 28px); line-height: 1.2; color: var(--blu-titolo); margin: 34px 0 10px; }
.legale h3 { font-size: 18px; color: var(--blu-titolo); margin: 22px 0 6px; }
.legale p, .legale ul, .legale ol, .legale table { margin: 0 0 14px; }
.legale ul, .legale ol { padding-left: 1.2em; }
.legale ul { list-style: disc; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--blu-pulsante); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--nebbia); vertical-align: top; }
.legale > p:nth-of-type(1) { color: var(--grigio-testo); font-size: 15px; }
.pagina-404 { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 40px 0 20px; }
.pagina-404__sole { width: 120px; height: auto; }
.pagina-404__azioni { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 8px; }

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

/* ── la galleria ────────────────────────────────────────── */
.galleria {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 31, 56, .97); color: var(--bianco);
  display: none; grid-template-rows: auto 1fr auto;
  overscroll-behavior: contain;
}
.galleria[open] { display: grid; animation: galleria-entra .28s var(--ease-out); }
.galleria::backdrop { background: rgba(5, 31, 56, .7); }
@keyframes galleria-entra { from { opacity: 0; } to { opacity: 1; } }
.galleria__testa { display: grid; grid-template-columns: 1fr auto 48px; align-items: center; gap: 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); }
.galleria__titolo { font-family: var(--serif); font-size: 22px; font-style: italic; font-weight: 600; }
.galleria__conto { font-size: 15px; opacity: .8; font-variant-numeric: tabular-nums; }
.galleria__chiudi, .galleria__freccia {
  width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: var(--bianco); transition: background-color .2s ease, transform .16s var(--ease-out);
}
.galleria__chiudi svg, .galleria__freccia svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.galleria__chiudi:active, .galleria__freccia:active { transform: scale(.94); background: rgba(255, 255, 255, .16); }
@media (hover: hover) and (pointer: fine) { .galleria__chiudi:hover, .galleria__freccia:hover { background: rgba(255, 255, 255, .16); } }
.galleria__corpo { position: relative; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; min-height: 0; padding: 0 max(12px, env(safe-area-inset-left, 0px)); }
.galleria__foto { display: grid; place-items: center; height: 100%; min-height: 0; padding: 8px 0; }
.galleria__foto img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 2px; animation: galleria-foto .38s var(--ease-out); }
@keyframes galleria-foto { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.galleria__freccia--prima { justify-self: start; }
.galleria__freccia--dopo { justify-self: end; }
.galleria__filtri { display: flex; gap: 8px; overflow-x: auto; padding: 10px max(20px, env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)); justify-content: center; scrollbar-width: none; }
.galleria__filtri::-webkit-scrollbar { display: none; }
.galleria__filtro {
  flex: none; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  background: none; color: var(--bianco); font-size: 15px; white-space: nowrap; transition: background-color .2s ease, color .2s ease, transform .14s var(--ease-out);
}
.galleria__filtro[aria-pressed="true"] { background: var(--bianco); color: var(--blu-titolo); border-color: var(--bianco); }
.galleria__filtro:active { transform: scale(.97); }

/* ── tablet ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .disponibilita__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calendario { grid-column: 1 / -1; }
  .richiesta { padding-top: 26px; }
  .servizi__griglia { grid-template-columns: 1fr; gap: 20px; }
  .servizi__richiesta { max-width: none; padding-left: 0; border-left: 0; }
  .zona__griglia { grid-template-columns: 1fr 1fr; }
  .zona__recensioni { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--nebbia); padding-top: 20px; }
  .piede__riga { grid-template-columns: auto 1fr; }
  .piede__onde, .piede__luogo { display: none; }
}

/* ── telefono (dal design da computer, coi pezzi del kit) ── */
@media (max-width: 900px) {
  body { font-size: 16px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-top: 68px; }

  .testata__riga { grid-template-columns: 1fr auto; gap: 12px; padding-top: 10px; padding-bottom: 8px; }
  .testata__logo { width: 136px; }
  .testata.e-scesa .testata__logo { transform: scale(.87); }
  .menu-bottone {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(5, 31, 56, .18); color: var(--bianco); transition: background-color .2s ease, transform .16s var(--ease-out);
  }
  .menu-bottone:active { transform: scale(.94); }
  .testata.e-scesa .menu-bottone, html.menu-aperto .menu-bottone { background: var(--nebbia-chiara); color: var(--blu-titolo); }
  .menu-bottone__righe { display: grid; gap: 5px; width: 20px; }
  .menu-bottone__righe span { display: block; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s ease; }
  html.menu-aperto .menu-bottone__righe span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
  html.menu-aperto .menu-bottone__righe span:nth-child(2) { opacity: 0; }
  html.menu-aperto .menu-bottone__righe span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

  .menu {
    position: fixed; inset: 0; z-index: -1;
    height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(86px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background: var(--carta);
    display: flex; flex-direction: column; gap: 28px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s var(--ease-out), visibility 0s linear .2s;
  }
  html.menu-aperto .menu { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .32s var(--ease-out), visibility 0s; }
  html.menu-aperto .testata { background: var(--carta); }
  html.menu-aperto .testata::before { opacity: 0; }
  html.menu-aperto .logo--bianco { opacity: 0; }
  html.menu-aperto .logo--blu { opacity: 1; }
  /* le voci del menu arrivano una dopo l'altra; alla chiusura escono subito */
  .menu__lista li, .menu__azione { opacity: 0; transform: translateY(14px); transition: opacity .15s ease, transform .2s var(--ease-out); }
  html.menu-aperto .menu__lista li, html.menu-aperto .menu__azione { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s var(--ease-out); }
  html.menu-aperto .menu__lista li:nth-child(1) { transition-delay: 60ms; }
  html.menu-aperto .menu__lista li:nth-child(2) { transition-delay: 110ms; }
  html.menu-aperto .menu__lista li:nth-child(3) { transition-delay: 160ms; }
  html.menu-aperto .menu__lista li:nth-child(4) { transition-delay: 210ms; }
  html.menu-aperto .menu__lista li:nth-child(5) { transition-delay: 260ms; }
  html.menu-aperto .menu__lista li:nth-child(6) { transition-delay: 310ms; }
  html.menu-aperto .menu__azione { transition-delay: 360ms; }
  .menu__lista { flex-direction: column; gap: 4px; }
  .menu__voce { font-family: var(--serif); font-size: 32px; color: var(--blu-titolo); text-shadow: none; min-height: 54px; }
  .menu__azione { display: inline-flex; align-self: stretch; min-height: 54px; }

  .hero { min-height: clamp(520px, 80svh, 700px); }
  .hero__foto img { object-position: 46% 50%; }
  .hero__velo { background: linear-gradient(to top, rgba(4, 60, 104, .7) 0%, rgba(4, 60, 104, .35) 32%, rgba(4, 60, 104, 0) 58%); }
  .hero__titolo { font-size: clamp(24px, 7.6vw, 52px); }
  .hero__fatti { font-size: 12px; letter-spacing: .2em; line-height: 1.9; }
  .hero__fatti .punto { margin: 0 .55em; }
  .hero__fatti span:nth-child(4) { display: none; }
  .hero__fatti span:last-child { flex-basis: 100%; }

  .disponibilita { padding: 22px 0 26px; }
  .disponibilita__griglia { grid-template-columns: 1fr; gap: 16px; }
  .calendario { grid-template-columns: 1fr; }
  .cal-mese--secondo { display: none; }
  .cal-mese:first-child .cal-freccia[data-cal-sposta="1"] { visibility: visible; }
  .cal-giorno, .cal-vuoto { height: 40px; font-size: 16px; }
  .campi { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 0; }
  .campo--ospiti { grid-column: 1 / -1; }
  .campo__input { height: 48px; padding-right: 40px; }
  .richiesta { padding-top: 4px; gap: 10px; }
  .btn--grande { min-height: 56px; font-size: 18px; }

  .villa { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .villa__foto { position: relative; width: 100%; aspect-ratio: 4 / 3; height: auto; }
  .villa__foto img { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
  .villa__griglia { padding-top: 30px; padding-bottom: 10px; }
  .villa__testo { gap: 14px; }
  .numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .numeri__voce .ico { height: 30px; }

  .mattine { min-height: 250px; align-items: flex-start; }
  .mattine::before { background: linear-gradient(to bottom, rgba(253, 252, 247, .96) 0%, rgba(253, 252, 247, .7) 30%, rgba(253, 252, 247, 0) 56%); }
  .mattine__testo { padding-top: 18px; }
  .mattine__onde { width: 80px; }
  .occhiello { gap: 10px; letter-spacing: .15em; }
  .occhiello__segno--onde { height: 16px; }
  .mattine .titolo { font-size: 34px; }

  .spazi { padding: 18px 0 14px; }
  .spazi .contenitore { padding-left: 0; padding-right: 0; }
  .spazi__lista {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px));
    scroll-padding-left: max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: none;
  }
  .spazi__lista::-webkit-scrollbar { display: none; }
  .spazi__voce { flex: 0 0 78%; scroll-snap-align: start; }
  .spazi__tutte { justify-content: flex-start; padding: 4px max(16px, env(safe-area-inset-left, 0px)) 0; }

  .entrate { padding: 18px 0 26px; }
  .entrate__griglia { grid-template-columns: 1fr 1fr; gap: 10px; }
  .entrate__sinistra { display: contents; }
  .entrate__testo { grid-column: 1 / -1; padding: 0 0 6px; column-gap: 14px; }
  .entrate__conchiglia { width: 42px; }
  .entrate__foto--camera { margin-top: 0; min-height: 0; aspect-ratio: 4 / 5; -webkit-mask-image: none; mask-image: none; }
  .entrate__foto--soggiorno { min-height: 0; aspect-ratio: 4 / 5; }

  .sera { min-height: 0; align-items: flex-end; }
  .sera__foto { position: relative; position: absolute; }
  .sera__foto img { object-position: 64% 50%; }
  .sera__velo { background: linear-gradient(to top, rgba(1, 46, 95, .96) 0%, rgba(1, 46, 95, .84) 48%, rgba(1, 46, 95, .25) 78%, rgba(1, 46, 95, .05) 100%); }
  .sera__testo { padding-top: 190px; padding-bottom: 28px; gap: 12px; }
  .sera__dati { display: grid; grid-template-columns: 1fr; gap: 12px; }

  .servizi { padding: 24px 0; }
  .servizi__lista { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
  .servizi__richiesta { padding-top: 18px; border-top: 1px solid var(--nebbia); font-size: 16px; gap: 16px; }
  .ico--grande { height: 42px; }

  .esperienze { padding-top: 0; }
  .esperienze__foto { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .esperienze__foto img { object-position: 54% 50%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
  .esperienze__testo { min-height: 0; padding: 18px 0 6px; gap: 12px; }
  /* i pacchetti: una riga che scorre col dito, col bordo della scheda dopo che si vede */
  .pacchetti {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 14px calc(-1 * var(--margine)) 0; padding: 2px var(--margine) 8px; scroll-padding-left: var(--margine);
    scrollbar-width: none;
  }
  .pacchetti::-webkit-scrollbar { display: none; }
  .pacchetto, .pacchetto:first-child, .pacchetto:last-child {
    flex: 0 0 46%; scroll-snap-align: start; justify-items: center; text-align: center;
    padding: 18px 10px 16px; border: 1px solid var(--nebbia); border-radius: 3px; background: var(--bianco-caldo);
  }
  .pacchetto__icone { height: 52px; margin-bottom: 4px; }
  .pacchetto__icone .ico { height: 48px; }
  .pacchetto__nome { font-size: 17px; }
  .pacchetto__prezzo { font-size: 16px; }
  .esperienze__piede { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .link-foto { font-size: 16px; gap: 12px; }

  .zona__griglia { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; padding-bottom: 26px; }
  .mappa { max-width: 400px; }
  .luogo { font-size: 12px; gap: 4px; }
  .luogo--qui { font-size: 13px; }
  .zona__recensioni { grid-column: auto; }

  .finale { padding: 26px 0 30px; }
  .finale__griglia { grid-template-columns: 1fr; gap: 16px; }
  .finale__onde { width: 84px; }

  .piede__riga { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding-top: 26px; }
  .piede__logo { border-right: 0; padding-right: 0; }
  .piede__sole { width: 84px; }
  .piede__scritta { width: 170px; }
  .piede__menu { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .piede__legale { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 18px; }
  .piede__link { flex-wrap: wrap; gap: 0 10px; }
  .pagina-legale { padding: calc(96px + env(safe-area-inset-top, 0px)) 0 48px; }
  .legale { font-size: 16px; }

  .barra-telefono {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(253, 252, 247, .97); box-shadow: 0 -1px 0 var(--nebbia), 0 -12px 28px -20px rgba(1, 46, 95, .45);
    transition: transform .3s var(--ease-out);
  }
  .btn--barra { width: 100%; min-height: 54px; font-size: 18px; }
  html.menu-aperto .barra-telefono, html.galleria-aperta .barra-telefono, html.barra-nascosta .barra-telefono { transform: translateY(110%); }

  .galleria__corpo { grid-template-columns: 1fr; padding: 0; }
  .galleria__freccia { position: absolute; bottom: 14px; z-index: 2; background: rgba(5, 31, 56, .6); }
  .galleria__freccia--prima { left: 16px; }
  .galleria__freccia--dopo { right: 16px; }
  .galleria__foto img { max-height: calc(100dvh - 210px); }
  .galleria__filtri { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .testata__logo { width: 122px; }
  .hero__fatti { letter-spacing: .14em; }
  .campi { grid-template-columns: 1fr; }
  .numeri { gap: 14px 10px; }
  .numeri__cifra { font-size: 30px; }
  .servizi__lista li { font-size: 15px; }
  .luogo { font-size: 11px; }
}

/* Meno movimento, non zero: restano le dissolvenze e i cambi di colore, spariscono spostamenti, ingrandimenti e profondità */
@media (prefers-reduced-motion: reduce) {
  .hero__titolo .riga, .hero__fatti, .disponibilita__griglia > *, .testata__logo, .menu__lista, .testata__destra { animation-name: dissolvenza; }
  .hero__foto img { animation: none; }
  .js .reveal { transform: none; transition: opacity .6s ease; transition-delay: calc(var(--i, 0) * 40ms); }
  .js .reveal--foto { clip-path: none; transition: none; }
  .js .reveal--foto img { transform: none; transition: none; }
  .js .recensioni__giro > .recensione:not(.attiva) { transform: none; }
  .cal-griglia--avanti, .cal-griglia--indietro, .galleria__foto img { animation-name: dissolvenza; }
  .testata.e-scesa, .testata.e-scesa .menu__voce, .testata.e-scesa .testata__destra { transform: none !important; }
  .menu__lista li, .menu__azione { transform: none !important; }
  .spazi__bottone:hover .spazi__foto img, .entrate__foto:hover img, .villa__foto:hover img, .pacchetto:hover .pacchetto__icone .ico,
  .btn:hover .freccia, .link-freccia:hover .freccia, .link-foto:hover .freccia { transform: none; }
  .btn:active, .menu-bottone:active, .galleria__chiudi:active, .galleria__freccia:active, .galleria__filtro:active,
  .spazi__bottone:active, .cal-giorno:not(:disabled):active, .cal-freccia:active:not(:disabled) { transform: none; }
  .menu { transform: none !important; }
}