/* A Casa di Guido · Affittacamere Nilo · Napoli — style.css
   Design: Design/kit/design-a-casa-di-guido/home-approvata.png (ChatGPT), seguito fedele e rifinito.
   Colori misurati sul design (confronta-design.py --colori e campioni sulle sezioni del kit), in #hex.
   Caratteri (il kit non li ha: i più simili, serviti dal sito):
   - Newsreader (variabile, opsz 6-72): titoli e testi, serif; il corsivo per «Sei a Napoli.», «Napoli.», «scoperte.»
   - Plus Jakarta Sans (variabile): menu, pulsanti, occhielli, etichette, calendario */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* blu del marchio */
  --blu: #114497;          /* pulsanti, schede, testo (30/10 giro 2: un filo meno acceso, era #0044AC) */
  --blu-titolo: #144194;   /* titoli (era #003CB4) */
  --blu-notte: #16356A;    /* piè di pagina e bande di sera (era #003C98) */
  --blu-vivo: #2157BA;     /* date scelte, didascalie (era #0048DC) */
  /* sole e maioliche */
  --giallo: #F2C764;       /* tondi dei numeri (era #FCCC5C) */
  --oro: #EAAD2A;          /* virgolette, filetti (era #FCB818) */
  --oro-chiaro: #F5DEA3;   /* era #FCE090 */
  --ambra: #976226;        /* occhielli delle sezioni (era #BC7A2F: contrasto AA, 30/10) */
  --terra: #8C3800;        /* occhiello della hero */
  /* celesti */
  --celeste: #9AC2EF;      /* periodo scelto nel calendario (era #88C4FC) */
  --celeste-chiaro: #DAE5F6; /* era #D4E4FC */
  --azzurrino: #ECF0F6;    /* schede spente, bordi chiari */
  /* fondi */
  --crema: #FEFBF6;
  --carta: #FEFDFA;
  --bianco: #FFFFFF;
  --grigio: #D0D0D8;       /* non disponibile */
  --rosso: #F42824;        /* la casa sulla mappa */
  --testo-tenue: #4E71B7;  /* era #6785C1: contrasto AA, 30/10 */

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --max: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --ombra: 0 18px 50px -24px rgba(0, 40, 110, .28), 0 2px 8px rgba(0, 40, 110, .06);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata: 84px;
}


/* ══ 6-quater · giro 2 · «Apri la porta. Sei a Napoli» ══════════════════════════════════════════════
   L'arco blu del logo è l'architettura del sito: la porta della hero, la finestra di ogni prima schermata,
   l'arco che si spalanca sul panorama, la volta delle bande blu notte, il grande arco del golfo in chiusura.
   Le sfumature si ricavano dai colori di :root (color-mix): nessun colore nuovo. */
:root {
  --notte: color-mix(in srgb, var(--blu-notte) 86%, #000);          /* le bande di sera */
  --notte-chiara: color-mix(in srgb, var(--blu-notte) 82%, #000);
  --inchiostro: color-mix(in srgb, var(--blu) 82%, #000);           /* il testo corrente */
  --marmo: color-mix(in srgb, var(--crema) 72%, var(--oro-chiaro));  /* il caldo della pietra */
  --filo: color-mix(in srgb, var(--oro) 45%, transparent);
  --vetro: color-mix(in srgb, var(--crema) 86%, transparent);
  --ombra-alta: 0 50px 90px -48px rgba(0, 28, 84, .55), 0 18px 36px -24px rgba(0, 28, 84, .22);
  --ombra-foto: 0 28px 56px -34px rgba(0, 28, 84, .5);
  --r-xl: 28px;
  --t-hero: clamp(2.3rem, 1rem + 3.15vw, 4.3rem);
  --t-titolo: clamp(2.25rem, .9rem + 3.6vw, 4.6rem);
  --t-medio: clamp(2rem, 1rem + 2.4vw, 3.3rem);
  --ease-porta: cubic-bezier(0.65, 0, 0.18, 1);
}

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--inchiostro);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
p, li, figcaption, blockquote { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--oro-chiaro); color: var(--blu-notte); }
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blu); color: var(--bianco); padding: 10px 16px; border-radius: 8px;
  font-family: var(--sans); font-weight: 700; text-decoration: none;
}
.salta:focus { top: 12px; }
.dentro {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.intero, a[href^="tel:"] { white-space: nowrap; }
.icona-bianca { filter: brightness(0) invert(1); }

/* ── pezzi comuni ─────────────────────────────────────────────────── */
.occhiello {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ambra);
}
.occhiello::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.occhiello--hero { display: block; color: var(--terra); line-height: 1.5; }
.occhiello--hero::before { display: none; }
.occhiello--riga::after { content: ""; flex: 1; height: 1px; background: var(--filo); }

.titolo-sezione {
  font-family: var(--serif);
  font-weight: 560;
  font-size: var(--t-titolo);
  line-height: .98;
  letter-spacing: -0.032em;
  color: var(--blu-titolo);
  text-wrap: balance;
}
.titolo-sezione em { font-style: italic; font-weight: 440; letter-spacing: -0.02em; }
.titolo-sezione--medio { font-size: var(--t-medio); }
.sotto-sezione {
  margin-top: 18px;
  font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem);
  line-height: 1.45;
  color: var(--inchiostro);
  max-width: 40em;
}

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 13px 28px;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--sans); font-size: 15.5px; font-weight: 650; letter-spacing: .005em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s var(--ease-out), box-shadow .3s ease;
}
.btn img { width: 21px; height: 21px; flex: none; transition: transform .25s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--blu {
  background: var(--blu); color: var(--bianco);
  box-shadow: 0 14px 28px -16px rgba(20, 52, 112, .85), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--bordo { background: transparent; color: var(--blu); border-color: currentColor; }
.btn--bordo img { width: 22px; height: 22px; }
.btn--grande { min-height: 60px; padding-inline: 32px; font-size: 16.5px; }
@media (hover: hover) and (pointer: fine) {
  .btn--blu:hover { background: var(--blu-notte); box-shadow: 0 18px 32px -16px rgba(20, 52, 112, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
  .btn--bordo:hover { background: var(--blu); color: var(--bianco); border-color: var(--blu); }
  .btn--bordo:hover img { transform: translateX(4px); filter: brightness(0) invert(1); }
}

.link-freccia {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 16px; font-weight: 650; color: var(--blu);
  text-decoration: none; padding: 4px 0 7px;
  background: linear-gradient(var(--oro), var(--oro)) left bottom / 100% 2px no-repeat;
  -webkit-user-select: none; user-select: none;
  transition: background-size .35s var(--ease-out), color .2s ease;
}
.link-freccia img { width: 22px; height: 22px; transition: transform .25s var(--ease-out); }
.freccia { display: inline-block; flex: none; width: 22px; height: 22px; background: url("/assets/img/icone/freccia-ambra.png") center / contain no-repeat; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover img, .link-freccia:hover .freccia { transform: translateX(5px); }
  .link-freccia:hover { color: var(--blu-titolo); }
}
.link-freccia:active img, .link-freccia:active .freccia { transform: translateX(5px); }

.tondo { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--giallo); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--giallo) 60%, var(--bianco)); }
.tondo img { width: 26px; height: 26px; }
.num {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--giallo); color: var(--blu-titolo); font-family: var(--sans); font-size: 13px; font-weight: 750;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-out);
}
.num:empty { width: 10px; height: 10px; margin-top: .55em; background: var(--oro); }

/* ── intestazione ─────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--crema) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.testata::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filo); opacity: 0; transition: opacity .3s ease; }
.testata[data-scorsa] { background: color-mix(in srgb, var(--crema) 92%, transparent); box-shadow: 0 14px 30px -26px rgba(0, 28, 84, .5); }
.testata[data-scorsa]::after { opacity: 1; }
.testata__dentro {
  display: flex; align-items: center; gap: 24px;
  height: var(--testata);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.testata__logo { flex: none; display: block; }
.testata__logo img { width: 260px; transform-origin: left center; transition: transform .35s var(--ease-out); }
.testata[data-scorsa] .testata__logo img { transform: scale(.9); }
.menu { flex: 1; display: flex; justify-content: center; }
.menu__voci { display: flex; gap: clamp(14px, 2.2vw, 38px); }
.menu__voci a {
  position: relative; display: inline-block; padding: 10px 2px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--blu);
  text-decoration: none; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--oro); transform: scaleX(0); transition: transform .3s var(--ease-out);
}
.menu__voci a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
.menu__wa { display: none; }
.testata__destra { flex: none; display: flex; align-items: center; gap: 14px; }
.lingue-posto:empty { display: none; }
.testata__wa { min-height: 46px; padding: 10px 22px; font-size: 14.5px; white-space: nowrap; }
.testata__wa img { flex: none; width: 19px; height: 19px; }
.testata__apri { display: none; }

/* ── HERO · la porta ──────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: min(78svh, 760px);
  max-height: 860px;
  overflow: clip;
}
@supports not (height: 100svh) { .hero { min-height: min(78vh, 760px); } }
/* la maiolica in filigrana: un muro di cortile dietro la porta */
.hero__filigrana {
  position: absolute; z-index: -2; top: 0; bottom: 0; right: 0; width: 56%;
  background: url("/assets/img/kit/maiolica-filigrana-160.webp") 0 0 / 105px 105px repeat;
  opacity: .08;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 40%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 78% 40%, #000 20%, transparent 72%);
}
.hero__scena {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 52%;
  pointer-events: none;
}
.porta {
  --arco: clamp(14px, 1.45vw, 22px);
  position: absolute; left: 17%; bottom: clamp(70px, 9vh, 110px); top: clamp(28px, 5vh, 56px);
  aspect-ratio: 434 / 737; max-width: 70%;
  border-radius: 9999px 9999px 0 0;
}
.hero__sfondo {
  position: absolute; inset: 0; display: block;
  border-radius: inherit; overflow: hidden;
  background: var(--celeste-chiaro);
  box-shadow: var(--ombra-alta);
}
.hero__sfondo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform-origin: 50% 70%;
}
.porta__cornice { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.porta__arco { fill: none; stroke: var(--blu); stroke-linecap: butt; }
.porta__luci { fill: none; stroke: var(--bianco); stroke-linecap: round; }
/* senza JS l'arco blu lo disegna il bordo */
html:not(.js) .porta::after { content: ""; position: absolute; inset: 0; border: var(--arco) solid var(--blu); border-bottom: 0; border-radius: inherit; }
.hero__statua {
  position: absolute; z-index: 2;
  right: -6%; bottom: clamp(56px, 8vh, 96px);
  width: min(72%, 600px);
  filter: drop-shadow(0 30px 40px rgba(0, 28, 84, .28));
}
.hero__badge {
  position: absolute; z-index: 3;
  right: 3%; top: 9%;
  width: clamp(104px, 10.5vw, 158px);
  transform: rotate(-9deg);
  filter: drop-shadow(0 16px 22px rgba(120, 80, 0, .28));
}
.hero__dentro {
  position: relative; z-index: 4;
  width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(24px, 4vh, 48px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(110px, 14vh, 150px) max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; align-items: center;
}
.hero__testo { max-width: min(56%, 780px); }
.occhiello--hero { font-size: 15px; }
.occhiello--hero .hero__nilo { white-space: nowrap; font-family: var(--serif); font-size: 1.8em; font-weight: 540; letter-spacing: -0.01em; text-transform: none; color: var(--blu-titolo); vertical-align: -0.1em; }
.hero__titolo {
  margin-top: 22px;
  font-family: var(--serif); font-weight: 540;
  font-size: var(--t-hero);
  line-height: .95; letter-spacing: -0.036em;
  color: var(--blu-titolo);
}
.hero__titolo .riga { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; white-space: nowrap; }
.hero__titolo .riga > * { display: inline-block; }
.hero__titolo em { font-style: italic; font-weight: 420; letter-spacing: -0.025em; color: var(--blu-vivo); }
/* nelle pagine interne il titolo è una frase sola, più lunga: un gradino sotto */
.hero__titolo:not(:has(.riga)) { font-size: clamp(2.2rem, 1.1rem + 2.6vw, 3.8rem); line-height: .98; text-wrap: balance; }
.hero__sotto {
  margin-top: 26px; max-width: 30em;
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.42; color: var(--inchiostro);
}
.hero__casa { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.hero__casa > img {
  width: 108px; aspect-ratio: 108 / 132; object-fit: cover; flex: none;
  border-radius: 999px 999px 10px 10px;
  box-shadow: 0 0 0 5px var(--bianco), var(--ombra-foto);
}
.hero__casa p { font-size: 1.08rem; line-height: 1.4; max-width: 22em; margin-bottom: 8px; }
.hero__casa .btn { margin-top: 4px; }

/* ── DISPONIBILITÀ · il biglietto ─────────────────────────────────── */
.disponibilita {
  position: relative; z-index: 6;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: calc(-1 * clamp(84px, 11vh, 112px)) auto 0;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.disponibilita__scheda {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px clamp(28px, 4.4vw, 72px);
  background: var(--bianco);
  border-radius: var(--r-xl);
  box-shadow: var(--ombra-alta);
  padding: clamp(24px, 2.8vw, 44px) clamp(20px, 3.4vw, 52px) clamp(24px, 2.6vw, 40px);
}
.disponibilita__scheda::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--oro) 20%, var(--oro) 80%, transparent);
}
.disponibilita__titolo {
  font-family: var(--serif); font-weight: 560;
  font-size: clamp(2rem, 1.2rem + 1.6vw, 2.9rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--blu-titolo);
}
.disponibilita__sotto { margin-top: 10px; font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--blu); max-width: 34em; }

.cal { margin-top: 18px; max-width: 520px; font-family: var(--sans); }
.cal__testa { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--azzurrino); margin-bottom: 8px; }
.cal__mese { font-family: var(--serif); font-weight: 560; font-size: 21px; letter-spacing: -0.01em; color: var(--blu-titolo); text-transform: capitalize; }
.cal__freccia {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--azzurrino); background: transparent; cursor: pointer; color: var(--blu);
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out), opacity .2s ease;
}
.cal__freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal__freccia:active { transform: scale(.92); }
.cal__freccia:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .cal__freccia:not(:disabled):hover { background: var(--azzurrino); border-color: var(--celeste-chiaro); } }
.cal__settimana, .cal__giorni { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__settimana span { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--testo-tenue); padding: 4px 0 8px; }
.cal__giorni { row-gap: 3px; }
.giorno {
  position: relative;
  height: 40px; border: 0; background: transparent; padding: 0;
  font-size: 14.5px; font-weight: 650; color: var(--blu); font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.giorno span {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto; border-radius: 50%;
  transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
.giorno:active span { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .giorno:not(:disabled):hover span { background: var(--azzurrino); } }
.giorno--vuoto { cursor: default; }
.giorno:disabled { cursor: default; color: var(--grigio); font-weight: 500; }
.giorno--occupato span { text-decoration: line-through; text-decoration-thickness: 1px; }
.giorno--oggi span { box-shadow: inset 0 0 0 1.5px var(--oro); }
.giorno--dentro::before, .giorno--inizio::before, .giorno--fine::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--celeste-chiaro);
}
.giorno--inizio::before { left: 50%; }
.giorno--fine::before { right: 50%; }
.giorno--inizio.giorno--fine::before { display: none; }
.giorno--inizio span, .giorno--fine span { background: var(--blu-vivo) !important; color: var(--bianco); box-shadow: 0 8px 16px -8px rgba(33, 87, 186, .9); }
.giorno--dentro span { background: transparent; }

.disponibilita__destra { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.disponibilita__campi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.disponibilita__campi .btn { grid-column: 1 / -1; white-space: nowrap; }
.campo-data {
  display: flex; align-items: center; gap: 12px;
  min-height: 66px; padding: 10px 16px;
  background: var(--crema); border: 1.5px solid transparent; border-radius: 16px;
  text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.campo-data:active { transform: scale(.98); }
.campo-data img { width: 26px; height: 26px; flex: none; }
.campo-data span { display: flex; flex-direction: column; min-width: 0; }
.campo-data small { font-family: var(--sans); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ambra); font-weight: 700; }
.campo-data strong { font-family: var(--serif); font-size: 19px; color: var(--blu-titolo); font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-data.attivo { background: var(--bianco); border-color: var(--blu-vivo); box-shadow: 0 0 0 4px rgba(33, 87, 186, .1); }
@media (hover: hover) and (pointer: fine) { .campo-data:hover { border-color: var(--celeste); } }

.disponibilita__sotto-campi { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--sans); font-size: 13.5px; color: var(--blu); }
.legenda li { display: flex; align-items: center; gap: 9px; }
.pallino { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pallino--scelte { background: var(--blu-vivo); }
.pallino--libere { background: var(--celeste); }
.pallino--occupate { background: var(--grigio); }
.ospiti { display: flex; align-items: center; gap: 14px; font-family: var(--sans); }
.ospiti__nome { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ambra); }
.ospiti__scelta { display: flex; align-items: center; border: 1.5px solid var(--azzurrino); border-radius: 999px; padding: 3px; }
.ospiti__scelta button {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--crema);
  font-size: 20px; font-weight: 600; color: var(--blu); cursor: pointer; line-height: 1;
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.ospiti__scelta button:active { transform: scale(.9); }
.ospiti__scelta button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .ospiti__scelta button:not(:disabled):hover { background: var(--celeste-chiaro); } }
.ospiti__scelta output { min-width: 40px; text-align: center; font-family: var(--serif); font-weight: 600; font-size: 19px; color: var(--blu-titolo); }
.disponibilita__stato {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--blu);
  padding: 12px 16px; border-radius: 12px; background: var(--azzurrino);
  border-left: 3px solid var(--oro);
}
.disponibilita__cancella {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 650; color: var(--blu-vivo);
  text-decoration: underline; text-underline-offset: 3px;
  -webkit-user-select: none; user-select: none;
}
.disponibilita__cancella[hidden] { display: none; }
.disponibilita__stato.errore { background: var(--crema); color: var(--terra); border-left-color: var(--terra); }
.disponibilita__prezzo { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--blu-titolo); }
.disponibilita__prezzo[hidden] { display: none; }
.disponibilita__nota { margin-top: auto; font-family: var(--sans); font-size: 13px; color: var(--testo-tenue); }
.thk-cin { font-family: var(--sans); font-size: 11.5px; color: var(--testo-tenue); letter-spacing: .03em; }

/* ── L'APPARTAMENTO · bento ───────────────────────────────────────── */
.casa { position: relative; padding: clamp(72px, 9vw, 140px) 0 clamp(64px, 8vw, 120px); }
.casa__testa { max-width: 980px; }
.casa__testa .titolo-sezione { margin-top: 22px; }
.schede {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 4px; max-width: 100%;
  margin-top: 40px; padding: 6px;
  background: var(--bianco); border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--azzurrino), 0 10px 26px -20px rgba(0, 28, 84, .35);
}
.schede__cursore {
  position: absolute; z-index: -1; left: 0; top: 6px; bottom: 6px;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border-radius: 999px; background: var(--blu);
  box-shadow: 0 10px 20px -12px rgba(20, 52, 112, .9);
  transition: transform .5s var(--ease-out), width .5s var(--ease-out);
  opacity: 0;
}
.schede.pronto .schede__cursore { opacity: 1; }
.schede__voce {
  min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 0;
  background: transparent; color: var(--blu);
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  transition: color .3s ease, background-color .3s ease, transform .16s var(--ease-out);
}
.schede__voce:active { transform: scale(.97); }
.schede__voce[aria-selected="true"] { color: var(--bianco); }
.schede:not(.pronto) .schede__voce[aria-selected="true"] { background: var(--blu); }
@media (hover: hover) and (pointer: fine) { .schede__voce[aria-selected="false"]:hover { background: var(--crema); } }

.ambienti { margin-top: 28px; }
.ambiente {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 232px);
  gap: clamp(10px, 1.2vw, 18px);
}
.ambiente[hidden] { display: none; }
.ambiente:not([hidden]) { animation: ambiente-entra .6s var(--ease-out); }
@keyframes ambiente-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.foto { position: relative; min-width: 0; min-height: 0; grid-column: span 4; }
.foto__apri {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; background: var(--azzurrino); cursor: zoom-in;
  box-shadow: var(--ombra-foto);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .16s var(--ease-out), box-shadow .4s ease;
}
.foto__apri:active { transform: scale(.985); }
.foto__apri img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.foto__apri img.taglio-ballatoio { object-position: 50% 72%; }
.foto__apri img.taglio-sinistra { object-position: 28% 50%; }
.foto__apri img.taglio-centro-sx { object-position: 42% 50%; }
@media (hover: hover) and (pointer: fine) { .foto__apri:hover img { transform: scale(1.045); } }
.foto figcaption {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  padding: 7px 14px 8px; border-radius: 999px;
  background: var(--vetro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 450; line-height: 1.2; color: var(--blu-titolo);
  pointer-events: none;
}
/* il bento: righe di altezze diverse e tagli asimmetrici, la protagonista più grande (mai una foto sola in riga) */
@media (min-width: 768px) {
  .ambiente { grid-auto-rows: auto; }
  .foto { height: clamp(210px, 19vw, 280px); }
  .ambiente:has(> .foto:nth-child(5):last-child) > .foto:nth-child(-n+2),
  .ambiente:has(> .foto:nth-child(2):last-child) > .foto,
  .ambiente:has(> .foto:nth-child(6):last-child) > .foto:nth-child(-n+2) { height: clamp(300px, 34vw, 500px); }
  .ambiente:has(> .foto:nth-child(5):last-child) > .foto:nth-child(1),
  .ambiente:has(> .foto:nth-child(2):last-child) > .foto:nth-child(1),
  .ambiente:has(> .foto:nth-child(6):last-child) > .foto:nth-child(1) { grid-column: span 8; }
  .ambiente:has(> .foto:nth-child(5):last-child) > .foto:nth-child(2),
  .ambiente:has(> .foto:nth-child(2):last-child) > .foto:nth-child(2),
  .ambiente:has(> .foto:nth-child(6):last-child) > .foto:nth-child(2) { grid-column: span 4; }
  .ambiente:has(> .foto:nth-child(5):last-child) > .foto:nth-child(n+3) { grid-column: span 4; }
  .ambiente:has(> .foto:nth-child(6):last-child) > .foto:nth-child(n+3) { grid-column: span 3; }
  .ambiente:has(> .foto:nth-child(3):last-child) > .foto { height: clamp(320px, 34vw, 500px); grid-column: span 3; }
  .ambiente:has(> .foto:nth-child(3):last-child) > .foto:nth-child(1) { grid-column: span 6; }
  .ambiente:has(> .foto:nth-child(4):last-child) > .foto { height: clamp(340px, 36vw, 540px); grid-column: span 3; }
  .ambiente:has(> .foto:nth-child(4):last-child) > .foto:nth-child(1) { grid-column: span 4; }
  .ambiente:has(> .foto:nth-child(4):last-child) > .foto:nth-child(4) { grid-column: span 2; }
}

.casa__piede { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--filo); flex-wrap: wrap; }
.dotazioni { display: flex; gap: clamp(18px, 3.4vw, 56px); flex-wrap: wrap; }
.dotazioni li { display: flex; align-items: center; gap: 14px; font-size: 17.5px; color: var(--blu-titolo); }
.dotazioni img { width: 36px; height: 36px; }

/* ── FUORI DALLA PORTA · l'arco che si spalanca ───────────────────── */
.panorama {
  --apri: 1;
  position: relative; isolation: isolate;
  min-height: clamp(440px, 62svh, 620px);
  display: flex; flex-direction: column;
  background: var(--crema);
}
.panorama__finestra {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  clip-path: inset(var(--ci-t, 0px) var(--ci-l, 0px) 0 var(--ci-l, 0px) round var(--ci-r, 0px) var(--ci-r, 0px) 0 0);
}
.panorama__img {
  position: absolute; left: 0; width: 100%; top: -8%; height: 116%;
  object-fit: cover; object-position: 50% 40%;
  will-change: transform;
}
.panorama__finestra::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(254, 251, 246, .55) 0%, rgba(254, 251, 246, 0) 34%), linear-gradient(0deg, rgba(0, 20, 60, .22) 0%, transparent 30%);
  pointer-events: none;
}
.panorama__dentro {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(32px, 6vh, 64px);
}
.panorama__titolo {
  font-weight: 560; font-size: clamp(2.3rem, 1rem + 3.4vw, 4.8rem); line-height: .95; letter-spacing: -0.035em;
  color: var(--blu-titolo);
  text-shadow: 0 2px 30px rgba(254, 251, 246, .6);
  max-width: 13ch;
}
.panorama__titolo em { font-weight: 430; letter-spacing: -0.03em; }
.panorama__base {
  align-self: flex-end; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  min-width: 270px; padding: 22px 34px 20px;
  background: var(--crema); color: var(--blu);
  border: 1px solid var(--oro);
  outline: 1px solid var(--filo); outline-offset: -8px;
  border-radius: 6px;
  box-shadow: var(--ombra-alta);
  font-family: var(--sans); font-size: 14px; line-height: 1.4;
}
.panorama__base > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ambra); }
.panorama__base strong { font-family: var(--serif); font-size: clamp(1.9rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.1; color: var(--blu-titolo); }
.panorama__base > span:last-child { font-family: var(--serif); font-style: italic; font-size: 17px; }
/* nelle pagine interne la targa porta una frase e il pulsante */
.panorama__base:has(.btn) { align-items: flex-start; text-align: left; max-width: 440px; gap: 18px; padding: 26px 30px; }
.panorama__base:has(.btn) p { font-family: var(--serif); font-size: 1.18rem; line-height: 1.45; color: var(--inchiostro); }

/* ── 50 M · il velo ───────────────────────────────────────────────── */
.meraviglia {
  position: relative; isolation: isolate; z-index: 1;
  margin-top: calc(-1 * clamp(40px, 6vw, 96px));
  padding: clamp(90px, 9vw, 140px) 0 clamp(64px, 6vw, 96px);
  background: var(--notte); color: var(--crema);
  border-radius: 50% 50% 0 0 / clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px) 0 0;
  overflow: clip;
}
.meraviglia::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(70% 60% at 75% 45%, color-mix(in srgb, var(--blu-notte) 70%, transparent), transparent 70%);
}
.meraviglia__img {
  position: absolute; z-index: -1; top: clamp(60px, 7vw, 110px); bottom: clamp(40px, 5vw, 80px); right: 0;
  width: 66%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.meraviglia__img img, .meraviglia__img .foto__apri img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform-origin: 60% 50%;
}
.meraviglia__img .foto__apri { display: block; width: 100%; height: 100%; border-radius: 0; box-shadow: none; background: transparent; }
.meraviglia__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--notte) 0%, transparent 18%), linear-gradient(180deg, var(--notte) 0%, transparent 14%);
}
/* il velo: una seta chiara che si solleva e scopre il marmo */
.meraviglia__img::before {
  content: ""; position: absolute; inset: -10% -5%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(254, 251, 246, .98) 0%, rgba(254, 251, 246, .9) 62%, rgba(254, 251, 246, 0) 100%);
  transform: translateY(-110%);
}
.meraviglia__dentro { position: relative; }
@media (min-width: 768px) {
  .meraviglia:not(:has(.meraviglia__cifra)) .meraviglia__img { width: 56%; }
  .meraviglia:not(:has(.meraviglia__cifra)):has(.meraviglia__img) .meraviglia__testo { max-width: min(560px, 42%); }
}
.meraviglia .link-freccia { color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .meraviglia .link-freccia:hover { color: var(--oro-chiaro); } }
.meraviglia__testo { max-width: 600px; }
.meraviglia__titolo {
  font-weight: 520; font-size: clamp(2.1rem, 1.1rem + 2.6vw, 3.9rem); line-height: 1; letter-spacing: -0.03em;
  color: var(--crema); text-wrap: balance;
}
.meraviglia__cifra {
  display: block; margin-bottom: 14px;
  font-size: clamp(5.5rem, 2rem + 6.4vw, 9rem); line-height: .8; letter-spacing: -0.05em; font-weight: 600;
  color: var(--oro);
  font-variant-numeric: lining-nums;
}
.meraviglia__cifra small { font-size: .42em; font-weight: 400; font-style: italic; letter-spacing: -0.02em; color: var(--oro-chiaro); }
.meraviglia__sotto { margin-top: 22px; max-width: 30em; font-size: clamp(1.12rem, 1rem + .4vw, 1.38rem); line-height: 1.5; color: color-mix(in srgb, var(--crema) 84%, transparent); }
.meraviglia__sotto a { color: var(--oro-chiaro); text-underline-offset: 4px; }
.meraviglia .btn--blu { background: var(--oro); color: var(--blu-notte); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.meraviglia .btn--blu .icona-bianca { filter: none; }
@media (hover: hover) and (pointer: fine) { .meraviglia .btn--blu:hover { background: var(--giallo); } }
.percorso {
  --corsa: 1;
  display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: start;
  max-width: 520px; margin-top: 40px; font-family: var(--sans);
}
.percorso li { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.percorso__piedi { grid-column: 1; }
.percorso__tappa { grid-column: 3; }
.percorso__tappa--arrivo { grid-column: 5; }
.percorso__piedi img { width: 46px; height: 46px; filter: brightness(0) invert(1); opacity: .9; }
.percorso__piedi::after, .percorso__tappa:not(.percorso__tappa--arrivo)::after {
  content: ""; position: absolute; top: 22px; left: calc(100% + 14px);
  width: calc(var(--tratto, 90px)); height: 2px;
  background: repeating-linear-gradient(90deg, var(--oro) 0 9px, transparent 9px 16px);
  transform-origin: left center; transform: scaleX(var(--corsa));
}
.percorso__casa {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--rosso); box-shadow: 0 8px 18px -6px rgba(200, 30, 20, .7);
}
.percorso__casa img { width: 24px !important; height: 24px !important; }
.percorso__casa::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rosso);
  animation: casa-pulsa 2.6s var(--ease-out) infinite;
}
@keyframes casa-pulsa { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.percorso__tondo { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--oro); }
.percorso__tappa strong { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--crema); white-space: nowrap; }
.percorso__tappa span { font-size: 12.5px; color: color-mix(in srgb, var(--crema) 70%, transparent); white-space: nowrap; }
.conta { display: inline-block; min-width: 1.15em; text-align: left; font-variant-numeric: tabular-nums; }
/* la banda scura senza immagine (pagine interne): titolo a sinistra, il resto a destra */
.meraviglia:not(:has(.meraviglia__img)) .meraviglia__testo { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; }
.meraviglia:not(:has(.meraviglia__img)) .meraviglia__testo > :not(.meraviglia__titolo) { grid-column: 2; }
.meraviglia:not(:has(.meraviglia__img)) .meraviglia__titolo { grid-row: 1 / span 4; }

/* ── LA PASSEGGIATA · la fila ad archi ────────────────────────────── */
.passeggiata { position: relative; padding: clamp(72px, 7vw, 120px) 0 clamp(64px, 6vw, 110px); overflow-x: clip; }
.passeggiata__griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(28px, 4vw, 72px); align-items: start; }
.passeggiata__testo { position: sticky; top: calc(var(--testata) + 36px); }
.passeggiata__testo .titolo-sezione { margin-top: 22px; font-size: clamp(2.2rem, 1rem + 2.9vw, 3.8rem); }
.passeggiata__testo .sotto-sezione { margin-top: 22px; }
.passeggiata__testo .tondo { margin-bottom: 22px; }
.passeggiata__testo > .reveal:has(.tondo) + .titolo-sezione { margin-top: 0; }
/* la fila esce dal bordo destro dello schermo */
.passeggiata__griglia:has(> .tappe) { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); max-width: none; padding-right: 0; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2)); align-items: center; }
.tappe {
  display: flex; gap: clamp(16px, 1.8vw, 26px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  padding: 10px max(var(--gutter), 24px) 34px 4px;
  scrollbar-width: none; cursor: grab;
}
.tappe::-webkit-scrollbar { display: none; }
.tappe.trascina { cursor: grabbing; scroll-snap-type: none; }
.tappe.trascina * { pointer-events: none; }
.tappa { flex: 0 0 clamp(210px, 17vw, 260px); scroll-snap-align: start; min-width: 0; }
.tappa__apri {
  display: block; width: 100%; aspect-ratio: 3 / 4.1; padding: 0; border: 0;
  border-radius: 50% 50% 20px 20px / 36.6% 36.6% 20px 20px;
  overflow: hidden; background: var(--azzurrino); cursor: zoom-in;
  box-shadow: 0 0 0 6px var(--bianco), var(--ombra-foto);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform .2s var(--ease-out), box-shadow .4s ease;
}
.tappa__apri img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.tappa__apri:active { transform: scale(.98); }
.tappa__fondo {
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(90% 70% at 50% 100%, var(--bianco) 0, var(--marmo) 55%, var(--celeste-chiaro) 100%);
}
.tappa__apri.tappa__fondo img { width: 112%; max-width: none; height: auto; object-fit: contain; margin: 0 -6% -4%; }
.tappa h3 { margin-top: 18px; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .35vw, 1.35rem); font-weight: 560; letter-spacing: -0.015em; color: var(--blu-titolo); line-height: 1.12; }
.tappa p { margin-top: 6px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--blu); }
@media (hover: hover) and (pointer: fine) {
  .tappa__apri:hover img { transform: scale(1.06); }
}

/* ── LA POSIZIONE · la mappa protagonista ─────────────────────────── */
.dove { padding: clamp(80px, 9vw, 150px) 0 clamp(80px, 9vw, 150px); background: var(--carta); }
.dove__griglia { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(28px, 4vw, 64px); margin-top: 26px; align-items: end; }
.dove__mappa { display: contents; }
.dove__mappa > .titolo-sezione { grid-column: 1; grid-row: 1; }
.dove__mappa > .sotto-sezione { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-size: 1.12rem; }
.mappa {
  grid-column: 1; grid-row: 2;
  position: relative; margin: 0;
  padding: 12px; background: var(--bianco); border-radius: 26px;
  box-shadow: var(--ombra-alta);
}
.mappa > img, .mappa a > img { width: 100%; height: auto; border-radius: 16px; }
.mappa a { display: block; }
.mappa__vie { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); overflow: visible; pointer-events: none; }
.mappa__via path { fill: none; stroke: var(--blu-vivo); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 16; opacity: 0; transition: opacity .3s ease; }
.mappa__via circle { fill: transparent; stroke: var(--blu-vivo); stroke-width: 6; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .3s ease, transform .45s var(--ease-out); pointer-events: none; }
.mappa__via.acceso path { opacity: 1; animation: via-cammina 1.4s linear infinite; }
.mappa__via.acceso circle { opacity: 1; transform: scale(1); }
@keyframes via-cammina { to { stroke-dashoffset: -34; } }
.mappa__casa { fill: transparent; stroke: var(--rosso); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: casa-pulsa 2.6s var(--ease-out) infinite; }
.dove__elenco { grid-column: 2; grid-row: 2; align-self: center; }
.dove__intro { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ambra); }
.luoghi { display: grid; gap: 4px; margin-top: 18px; }
.luoghi li {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px; margin-inline: -14px; border-radius: 14px;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.28rem); color: var(--blu-titolo); line-height: 1.25;
  transition: background-color .25s ease;
}
.luoghi li.acceso { background: var(--crema); }
.luoghi li.acceso .num { background: var(--blu); color: var(--bianco); transform: scale(1.08); }
.dove .luoghi li { cursor: default; }
.dove__link { margin-top: 26px; }
/* l'elenco lungo (più di sette luoghi): righe più strette e la mappa a metà altezza */
.dove .luoghi:has(> li:nth-child(8)) { gap: 0; margin-top: 12px; }
.dove .luoghi:has(> li:nth-child(8)) li { padding-block: 7px; font-size: clamp(1rem, .92rem + .25vw, 1.15rem); }
.dove .luoghi:has(> li:nth-child(8)) .num { width: 32px; height: 32px; font-size: 12px; }
.dove__griglia:has(.luoghi > li:nth-child(8)) .mappa { align-self: center; }
/* la mappa nelle pagine interne: elenco a sinistra, stampa a destra */
.dove__griglia:has(> .dove__elenco:first-child) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.dove__griglia:has(> .dove__elenco:first-child) > .dove__elenco { grid-column: 1; grid-row: 1; }
.dove__griglia:has(> .dove__elenco:first-child) > .dove__mappa { display: block; grid-column: 2; grid-row: 1; }
.dove__griglia:has(> .dove__elenco:first-child) .titolo-sezione { font-size: var(--t-medio); }

/* ── COLLEGAMENTI · il tabellone ──────────────────────────────────── */
.collegamenti { position: relative; background: var(--bianco); }
.collegamenti__dentro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px clamp(20px, 2.4vw, 36px);
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(80px, 9vw, 140px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(120px, 12vw, 190px) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.collegamenti__testo { grid-column: 1 / 6; }
.collegamenti__link { margin-top: 26px; }
.collegamenti__centro { display: contents; }
.mezzi { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: end; }
.mezzi li { display: flex; flex-direction: column; gap: 18px; padding: 4px clamp(14px, 1.8vw, 28px) 4px; border-left: 1px solid var(--filo); }
.mezzi p { font-family: var(--serif); font-size: clamp(2rem, 1.2rem + 1.6vw, 3.2rem); font-weight: 520; line-height: 1; letter-spacing: -0.03em; color: var(--blu-titolo); }
.mezzi p, .mezzi h3 { overflow-wrap: anywhere; } /* una parola lunghissima va a capo e non fa scorrere la pagina di lato (audit 7-bis, P6) */
.mezzi strong { display: block; margin-bottom: 12px; font-family: var(--sans); font-size: 14px; font-weight: 650; letter-spacing: 0; line-height: 1.35; color: var(--blu); }
.collegamenti__img { grid-column: 1 / 6; grid-row: 2; position: relative; min-height: 340px; border-radius: 24px; overflow: hidden; box-shadow: var(--ombra-foto); }
.collegamenti__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.gite { grid-column: 6 / 13; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); align-self: end; }
.gite li { min-width: 0; }
.gite img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 50% 50% 14px 14px / 37.5% 37.5% 14px 14px;
  box-shadow: 0 0 0 5px var(--crema), var(--ombra-foto);
  transition: transform .5s var(--ease-out);
}
.gite span { display: block; margin-top: 16px; font-family: var(--serif); font-size: 1.12rem; font-weight: 520; color: var(--blu-titolo); text-align: center; }
@media (hover: hover) and (pointer: fine) { .gite li:hover img { transform: translateY(-6px); } }
/* nelle pagine interne «collegamenti» è la banda bianca dei capitoli */
.collegamenti > .passeggiata, .collegamenti > .casa { background: transparent; }

/* ── RECENSIONI · blu notte e maiolica ────────────────────────────── */
.recensioni {
  position: relative; isolation: isolate; z-index: 1;
  margin-top: calc(-1 * clamp(40px, 6vw, 96px));
  padding: clamp(110px, 11vw, 170px) 0 clamp(60px, 6vw, 90px);
  background: var(--notte); color: var(--crema);
  border-radius: 50% 50% 0 0 / clamp(40px, 6vw, 96px) clamp(40px, 6vw, 96px) 0 0;
  overflow: clip;
}
.recensioni::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/kit/maiolica-filigrana-160.webp") center top / 120px 120px repeat;
  opacity: .045;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.recensioni__titolo {
  display: flex; align-items: center; gap: 22px;
  font-weight: 520; font-size: clamp(1.9rem, 1.2rem + 1.6vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--crema);
}
.recensioni__titolo::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--oro) 45%, transparent); }
.recensioni__griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 60px); margin-top: clamp(40px, 5vw, 72px); }
.recensione { display: flex; flex-direction: column; gap: 22px; }
.recensione > img { width: clamp(56px, 5vw, 80px); height: auto; }
.recensione blockquote p { font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 1.05rem + .9vw, 2.05rem); line-height: 1.24; letter-spacing: -0.012em; color: var(--crema); }
.recensione figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 8px; font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: var(--oro-chiaro); }
.recensione figcaption::before { content: ""; width: 34px; height: 1px; background: var(--oro); }
.recensioni__cin { margin-top: clamp(40px, 5vw, 64px); font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--crema) 58%, transparent); }
.thk-nota-recensioni { margin-top: clamp(40px, 5vw, 64px); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; letter-spacing: .01em; color: color-mix(in srgb, var(--crema) 78%, transparent); } /* avvisi del modello (9-bis): sotto le recensioni */
.thk-nota-recensioni + .recensioni__cin { margin-top: 10px; }

/* ── IL FINALE · il golfo dentro un grande arco ───────────────────── */
.invito {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(24px, 3vw, 48px) max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--crema);
}
.invito__finestra {
  position: absolute; z-index: -1;
  left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px));
  top: clamp(24px, 3vw, 48px); bottom: 0;
  border-radius: 9999px 9999px 0 0;
  overflow: hidden;
  background: var(--celeste-chiaro);
}
.invito__img { position: absolute; left: 0; width: 100%; top: -6%; height: 112%; object-fit: cover; object-position: 50% 60%; will-change: transform; }
.invito__finestra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--notte) 30%, transparent) 0%, transparent 18%); }
.invito__dentro {
  position: relative;
  min-height: min(84svh, 800px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding-top: clamp(110px, 15vh, 180px); padding-bottom: clamp(180px, 26vh, 300px);
}
.invito__dentro::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: clamp(60px, 9vh, 120px); width: min(1040px, 96%); height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(254, 251, 246, .92) 0%, rgba(254, 251, 246, .78) 45%, rgba(254, 251, 246, 0) 100%);
}
.invito__titolo { font-weight: 560; font-size: clamp(2.6rem, 1rem + 5vw, 6.4rem); line-height: .94; letter-spacing: -0.04em; color: var(--blu-titolo); max-width: 14em; text-wrap: balance; }
.invito__titolo em { font-weight: 430; color: var(--blu-vivo); }
.invito__azione { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 34px; }
.invito__azione p { font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--blu-titolo); max-width: 30em; }
.invito__azione .btn { min-height: 62px; padding-inline: 36px; font-size: 16.5px; }
.invito__azione a:not(.btn) { color: var(--blu-titolo); }
.invito__rimandi { margin-top: 22px; padding: 6px 18px; border-radius: 999px; background: var(--vetro); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--sans); font-size: 14px; font-weight: 650; color: var(--blu-titolo); }
.invito__rimandi a { color: var(--blu-titolo); text-underline-offset: 5px; text-decoration-color: var(--oro); text-decoration-thickness: 2px; display: inline-block; padding: 6px 2px; }

/* ── IL FOOTER · l'orizzonte ──────────────────────────────────────── */
.piede { position: relative; background: var(--notte); color: var(--crema); }
.piede__dentro {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
  grid-template-areas: "vesuvio" "logo" "menu" "indirizzo";
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(36px, 5vw, 70px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(40px, 5vw, 64px) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.piede__vesuvio { grid-area: vesuvio; width: min(860px, 100%); opacity: .85; margin-bottom: clamp(18px, 2.4vw, 34px); }
.piede__logo { grid-area: logo; display: block; }
.piede__logo img { width: clamp(240px, 22vw, 330px); }
.piede__menu { grid-area: menu; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px clamp(18px, 2.6vw, 40px); margin-top: clamp(26px, 3vw, 40px); }
.piede__menu a { font-family: var(--serif); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 450; color: var(--crema); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--oro), var(--oro)) center bottom / 0 1px no-repeat; transition: background-size .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .piede__menu a:hover { background-size: 100% 1px; } }
.piede__indirizzo { grid-area: indirizzo; margin-top: 22px; font-style: normal; font-family: var(--sans); font-size: 14px; line-height: 1.7; color: color-mix(in srgb, var(--crema) 76%, transparent); }
.piede__indirizzo a { color: var(--crema); text-decoration-color: var(--oro); text-underline-offset: 4px; }
.piede__legale {
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding: 18px max(var(--gutter), env(safe-area-inset-right, 0px)) 26px max(var(--gutter), env(safe-area-inset-left, 0px));
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 6px 26px; justify-content: space-between;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .62);
}
.piede__legale a { color: rgba(255, 255, 255, .9); text-underline-offset: 3px; }
.credit a { font-weight: 650; }

/* ── barra da telefono e galleria ─────────────────────────────────── */
.barra-tel { display: none; }
.galleria {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--notte) 96%, transparent); color: var(--bianco);
  overscroll-behavior: contain;
}
.galleria[open] { display: grid; place-items: center; animation: galleria-entra .3s var(--ease-out); }
.galleria::backdrop { background: rgba(0, 18, 50, .6); }
@keyframes galleria-entra { from { opacity: 0; } to { opacity: 1; } }
.galleria__foto { display: grid; justify-items: center; gap: 14px; padding: 64px 76px 56px; max-width: 100%; }
.galleria__foto img { max-width: min(1240px, 100%); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 14px; animation: galleria-foto .45s var(--ease-out); }
@keyframes galleria-foto { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.galleria__foto figcaption { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 450; }
.galleria__btn {
  position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--bianco); cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.galleria__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.galleria__btn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .galleria__btn:hover { background: rgba(255, 255, 255, .2); } }
.galleria__chiudi { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.galleria__prima { left: calc(16px + env(safe-area-inset-left, 0px)); top: 50%; margin-top: -26px; }
.galleria__dopo { right: calc(16px + env(safe-area-inset-right, 0px)); top: 50%; margin-top: -26px; }
.galleria__conta { position: fixed; top: calc(30px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 13px; letter-spacing: .12em; color: rgba(255, 255, 255, .75); }

/* ── pagine interne: i capitoli ───────────────────────────────────── */
/* un capitolo della casa: il testo da una parte, il bento dall'altra; a capitoli alterni si gira */
.casa .dentro:not(:has(.schede)) { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px clamp(28px, 4vw, 72px); align-items: start; }
.casa .dentro:not(:has(.schede)) > .casa__testa { position: sticky; top: calc(var(--testata) + 36px); }
.casa .dentro:not(:has(.schede)) > .casa__testa .titolo-sezione { margin-top: 0; font-size: var(--t-medio); }
.casa .dentro:not(:has(.schede)) > .casa__testa .sotto-sezione { margin-top: 18px; font-size: 1.15rem; }
.casa .dentro:not(:has(.schede)) > .ambienti { margin-top: 0; }
@media (min-width: 768px) {
  .casa .dentro:not(:has(.schede)) .foto { height: clamp(180px, 16vw, 250px); }
  .casa .dentro:not(:has(.schede)) .ambiente:has(> .foto:nth-child(3):last-child) > .foto { height: clamp(280px, 28vw, 420px); }
  .casa .dentro:not(:has(.schede)) .ambiente:has(> .foto:nth-child(2):last-child) > .foto, .casa .dentro:not(:has(.schede)) .ambiente:has(> .foto:nth-child(6):last-child) > .foto:nth-child(-n+2) { height: clamp(260px, 26vw, 400px); }
}
main > .casa:nth-of-type(odd) { background: var(--bianco); }
main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .casa__testa { grid-column: 2; grid-row: 1; }
main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .ambienti { grid-column: 1; grid-row: 1; }
.casa:has(.schede) { background: var(--crema) !important; }

/* le domande frequenti: schede col filo d'oro */
.passeggiata .mezzi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.passeggiata .mezzi + .mezzi { margin-top: 16px; }
.passeggiata .mezzi li {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 26px 26px 28px; border-radius: 20px; background: var(--bianco);
  border-left: 0; box-shadow: 0 18px 40px -32px rgba(0, 28, 84, .45);
}
.passeggiata .mezzi li::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--oro); }
.collegamenti .passeggiata .mezzi li { background: var(--crema); box-shadow: none; }
.passeggiata .mezzi .tondo { width: 40px; height: 40px; box-shadow: none; }
.passeggiata .mezzi .tondo img { width: 20px; height: 20px; }
.passeggiata .mezzi h3 { font-family: var(--serif); font-size: clamp(1.25rem, 1.05rem + .5vw, 1.55rem); font-weight: 560; line-height: 1.15; letter-spacing: -0.015em; color: var(--blu-titolo); }
.passeggiata .mezzi p { margin-top: 8px; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--inchiostro); }
.passeggiata .mezzi li:only-child, .passeggiata .mezzi li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* i capitoli di testo: paragrafi larghi, elenco col filo d'oro */
.passeggiata__griglia > div:not(.passeggiata__testo) > .sotto-sezione:first-child { margin-top: 0; }
.passeggiata__griglia > div:not(.passeggiata__testo) .sotto-sezione { font-size: clamp(1.12rem, 1rem + .45vw, 1.4rem); }
.passeggiata .luoghi, .meraviglia .luoghi { margin-top: 22px; gap: 0; }
.passeggiata .luoghi li, .meraviglia .luoghi li { align-items: flex-start; padding: 16px 0; margin: 0; border-radius: 0; border-top: 1px solid var(--filo); font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); }
.passeggiata .luoghi li:last-child, .meraviglia .luoghi li:last-child { border-bottom: 1px solid var(--filo); }
.meraviglia .luoghi li { color: var(--crema); border-color: color-mix(in srgb, var(--oro) 35%, transparent) !important; }
.meraviglia .luoghi .num { background: transparent; color: var(--oro); width: auto; height: auto; min-width: 2.4em; font-family: var(--serif); font-size: 1.6em; font-weight: 500; line-height: 1; display: block; margin-top: -.08em; }
.meraviglia .luoghi .num:empty { min-width: 0; width: 9px; height: 9px; margin-top: .5em; background: var(--oro); }
.casa__piede:only-child, .passeggiata .casa__piede, .meraviglia .casa__piede, .dove .casa__piede { margin-top: 28px; padding-top: 0; border-top: 0; justify-content: flex-start; }
.passeggiata__testo .titolo-sezione:has(a.intero) { font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem); }
.titolo-sezione a.intero { color: inherit; text-decoration: none; background: linear-gradient(var(--oro), var(--oro)) left 92% / 100% .09em no-repeat; }
.gite:only-child { grid-column: 1 / -1; }
.collegamenti__dentro > .gite:last-child { grid-column: 6 / 13; grid-row: 1; align-self: center; }

/* ── pagine legali e 404 ──────────────────────────────────────────── */
.interna { padding: clamp(48px, 6vw, 96px) 0 clamp(64px, 7vw, 110px); }
.interna__dentro { max-width: calc(820px + 2 * var(--gutter)); }
.legale { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--inchiostro); }
.legale h1 { font-family: var(--serif); font-weight: 560; font-size: clamp(2.4rem, 1.4rem + 2.8vw, 4rem); line-height: 1; letter-spacing: -0.035em; color: var(--blu-titolo); margin-bottom: 14px; }
.legale h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--blu-titolo); margin: 40px 0 10px; padding-top: 18px; border-top: 1px solid var(--filo); }
.legale h3 { font-family: var(--sans); font-weight: 700; font-size: 16.5px; margin: 24px 0 6px; color: var(--blu-titolo); }
.legale p, .legale ul, .legale ol, .legale table { margin: 0 0 12px; }
.legale ul { list-style: disc; padding-left: 22px; }
.legale ol { list-style: decimal; padding-left: 22px; }
.legale li { margin-bottom: 6px; }
.legale li::marker { color: var(--oro); }
.legale a { color: var(--blu-vivo); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--azzurrino); }
.legale th { background: var(--azzurrino); }
.pagina-404 { position: relative; padding: clamp(40px, 8vh, 100px) 0 clamp(60px, 10vh, 120px); isolation: isolate; }
.pagina-404::before {
  content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: min(320px, 40%); aspect-ratio: 434 / 737;
  border: clamp(14px, 1.4vw, 20px) solid var(--blu); border-bottom: 0; border-radius: 9999px 9999px 0 0; opacity: .12;
}
.pagina-404 .titolo-sezione { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); }
.pagina-404__azioni { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 34px; }

/* ══ IL MOVIMENTO ═══════════════════════════════════════════════════════════════════════════════════
   Curve e durate di Emil Kowalski (09 § 0-bis-2): solo transform, opacity e clip-path; entrate «da vetrina»
   (500-900 ms, 20-40 px); un'entrata orchestrata per pagina (la porta), poi gesti legati allo scroll. */

/* entrate allo scroll, una volta sola */
html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal--figli { opacity: 1; transform: none; }
html.js .reveal--figli > * { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.js .reveal--figli.in > * { opacity: 1; transform: none; }
.reveal--figli > :nth-child(2) { --i: 1; } .reveal--figli > :nth-child(3) { --i: 2; } .reveal--figli > :nth-child(4) { --i: 3; }
.reveal--figli > :nth-child(5) { --i: 4; } .reveal--figli > :nth-child(6) { --i: 5; }
/* il velo: l'immagine è già lì, la seta scivola via verso l'alto e il marmo si avvicina */
html.js .reveal--velo { opacity: 1; transform: none; }
html.js .reveal--velo::before { transform: translateY(0); transition: transform 1.7s var(--ease-porta) .15s; }
html.js .reveal--velo.in::before { transform: translateY(-112%); }
html.js .reveal--velo img { transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
html.js .reveal--velo.in img { transform: none; }
/* il Vesuvio del footer si traccia da sinistra */
html.js .reveal--linea { opacity: .85; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease-in-out) .15s; }
html.js .reveal--linea.in { clip-path: inset(0 0 0 0); }

/* LA PORTA, al caricamento: l'arco si traccia, il vicolo si apre dal centro come due battenti, la statua sale,
   il bollino arriva come un timbro, il titolo esce riga per riga da sotto la maschera */
.hero__sfondo img { animation: porta-vicolo 1.8s var(--ease-out) both; }
.hero__sfondo { animation: porta-apre .9s var(--ease-porta) both; }
.porta.pronta .porta__arco { animation: porta-traccia 1.1s var(--ease-in-out) both; }
.porta.pronta .porta__luci { animation: porta-luci .7s ease .8s both; }
.hero__statua { animation: statua-sale 1.1s var(--ease-out) .2s both; }
.hero__badge { animation: timbro .6s cubic-bezier(.2, 1.4, .4, 1) .75s both; }
.hero__testo > .occhiello { animation: hero-entra .6s var(--ease-out) both; }
.hero__titolo .riga > * { animation: riga-sale .75s var(--ease-out) both; }
.hero__titolo .riga:nth-child(1) > * { animation-delay: 0s; }
.hero__titolo .riga:nth-child(2) > * { animation-delay: .06s; }
.hero__titolo .riga:nth-child(3) > * { animation-delay: .12s; }
.hero__titolo:not(:has(.riga)) { animation: hero-entra .7s var(--ease-out) both; }
.hero__testo > .hero__sotto { animation: hero-entra .7s var(--ease-out) .2s both; }
.hero__testo > .hero__casa { animation: hero-entra .7s var(--ease-out) .3s both; }
@keyframes porta-apre { from { clip-path: inset(0 32% 0 32%); } to { clip-path: inset(0 0 0 0); } }
@keyframes porta-vicolo { from { transform: scale(1.18); } to { transform: none; } }
@keyframes porta-traccia { from { stroke-dashoffset: var(--lungo, 3000); } to { stroke-dashoffset: 0; } }
@keyframes porta-luci { from { opacity: 0; } to { opacity: 1; } }
@keyframes statua-sale { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes timbro { from { opacity: 0; transform: rotate(-24deg) scale(1.5); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@keyframes riga-sale { from { transform: translateY(70%); opacity: .15; } to { transform: none; opacity: 1; } }
@keyframes hero-entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes dissolvi { from { opacity: 0; } }
/* la profondità: il JS muove i livelli a velocità diverse (solo transform) */
.hero__statua, .porta { will-change: transform; }
.hero__scena .porta, .hero__scena .hero__statua { translate: var(--px, 0px) var(--py, 0px); }
.hero__scena .hero__statua { translate: calc(var(--px, 0px) * 2.2) calc(var(--py, 0px) * 2.2 + var(--sy, 0px)); }
/* le pagine interne con il panorama in testa: l'arco si spalanca al caricamento */
main > .panorama:first-child .panorama__finestra { animation: panorama-apre 1.6s var(--ease-porta) .1s both; }
@keyframes panorama-apre { from { clip-path: inset(6% 30% 0 30% round 20vw 20vw 0 0); } to { clip-path: inset(0 0 0 0 round 0 0 0 0); } }

/* il calendario: il mese nuovo arriva dal lato della freccia */
.cal__giorni.va-dopo { animation: mese-dopo .28s var(--ease-out); }
.cal__giorni.va-prima { animation: mese-prima .28s var(--ease-out); }
@keyframes mese-dopo { from { opacity: .3; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes mese-prima { from { opacity: .3; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* le righe che scorrono col dito non tirano la pagina */
.schede, .ambiente, .tappe, .gite, .mappa, .recensioni__griglia { overscroll-behavior-x: contain; }
.recensione > img { transition: transform .8s var(--ease-out) .3s, opacity .8s ease .3s; }
html.js .recensioni__griglia:not(.in) .recensione > img { transform: scale(.6) rotate(-14deg); opacity: 0; }
.menu__voci li, .menu__wa { transition: opacity .2s ease, transform .2s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* meno movimento, non zero: restano le dissolvenze, spariscono spostamenti, maschere e tracciati */
  html.js .reveal, html.js .reveal--figli > * { transform: none; transition: opacity .5s ease; transition-delay: 0s; }
  html.js .reveal--velo::before { transition: opacity .8s ease; transform: none; opacity: 1; }
  html.js .reveal--velo.in::before { opacity: 0; transform: none; }
  html.js .reveal--velo img { transform: none; transition: none; }
  html.js .reveal--linea { clip-path: none; transition: opacity .6s ease; }
  .hero__sfondo, .hero__sfondo img, .porta.pronta .porta__arco, .hero__titolo .riga > * { animation: none; }
  .porta.pronta .porta__luci, .hero__statua, .hero__badge, .hero__testo > *, .hero__titolo:not(:has(.riga)) { animation-name: dissolvi; }
  .hero__badge { transform: rotate(-9deg); }
  main > .panorama:first-child .panorama__finestra { animation: none; }
  .ambiente:not([hidden]), .cal__giorni.va-dopo, .cal__giorni.va-prima { animation-name: dissolvi; }
  .percorso__casa::after, .mappa__casa { animation: none; opacity: 0; }
  .mappa__via.acceso path { animation: none; }
  html.js .recensioni__griglia:not(.in) .recensione > img { transform: none; }
  .foto__apri img, .tappa__apri img, .gite img { transition: none; }
  .schede__cursore { transition: none; }
}

/* ══ TABLET ═════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .menu__voci { gap: 18px; }
  .menu__voci a { font-size: 14px; }
  .testata__logo img { width: 228px; }
  .hero__testo { max-width: 54%; }
}
@media (max-width: 1100px) {
  .testata__wa span { display: none; }
  .testata__wa { width: 46px; height: 46px; padding: 0; }
  .disponibilita__scheda { grid-template-columns: minmax(0, 1fr); }
  .cal { max-width: none; }
  .mezzi li { padding-inline: 14px; }
  .collegamenti__img { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
  .gite { grid-column: 1 / -1; grid-row: auto; }
  .collegamenti__testo { grid-column: 1 / -1; }
  .mezzi { grid-column: 1 / -1; }
  .collegamenti__dentro > .gite:last-child { grid-column: 1 / -1; grid-row: auto; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .menu__voci { gap: 12px; }
  .menu__voci a { font-size: 13px; }
  .testata__logo img { width: 196px; }
  .hero__scena { width: 50%; }
  .hero__testo { max-width: 56%; }
  .passeggiata__griglia, .casa .dentro:not(:has(.schede)), main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) { grid-template-columns: minmax(0, 1fr); }
  .casa .dentro:not(:has(.schede)) > .casa__testa, main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .casa__testa { position: static; grid-column: 1; grid-row: auto; }
  main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .ambienti { grid-column: 1; grid-row: auto; }
  .passeggiata__testo { position: static; }
  .dove__griglia { grid-template-columns: minmax(0, 1fr); }
  .dove__mappa > .titolo-sezione, .dove__mappa > .sotto-sezione, .mappa, .dove__elenco { grid-column: 1; grid-row: auto; }
}

/* ══ TELEFONO ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --testata: 64px; --t-titolo: clamp(2.05rem, 1.2rem + 3.6vw, 2.6rem); --t-medio: clamp(1.9rem, 1.2rem + 3vw, 2.3rem); }
  body { font-size: 17px; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .testata__dentro { gap: 10px; }
  .testata__logo img { width: 200px; }
  .testata__destra { margin-left: auto; gap: 8px; }
  .testata__wa { width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
  .testata__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; display: inline; }
  .testata__apri {
    display: grid; align-content: center; justify-items: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--filo); background: var(--bianco); cursor: pointer;
    -webkit-user-select: none; user-select: none;
  }
  .testata__apri span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--blu); transition: transform .3s var(--ease-out), opacity .2s ease; }
  .testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu {
    position: fixed; inset: calc(var(--testata) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49;
    height: calc(100dvh - var(--testata) - env(safe-area-inset-top, 0px));
    flex-direction: column; justify-content: flex-start; gap: 28px;
    padding: 28px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    background: var(--crema);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
  }
  .menu.aperto { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s; }
  .menu:not(.aperto) .menu__voci li, .menu:not(.aperto) .menu__wa { opacity: 0; transform: translateY(14px); }
  .menu.aperto .menu__voci li, .menu.aperto .menu__wa { transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }
  .menu.aperto .menu__voci li:nth-child(2) { transition-delay: .04s; }
  .menu.aperto .menu__voci li:nth-child(3) { transition-delay: .08s; }
  .menu.aperto .menu__voci li:nth-child(4) { transition-delay: .12s; }
  .menu.aperto .menu__voci li:nth-child(5) { transition-delay: .16s; }
  .menu.aperto .menu__wa { transition-delay: .2s; }
  .menu__voci { flex-direction: column; gap: 0; }
  .menu__voci a { display: block; padding: 14px 0; font-family: var(--serif); font-size: 34px; font-weight: 520; letter-spacing: -0.02em; color: var(--blu-titolo); border-bottom: 1px solid var(--filo); }
  .menu__voci a::after { display: none; }
  .menu__wa { display: inline-flex; align-self: flex-start; }

  /* la porta a tutta larghezza, la statua che esce, il titolo sopra */
  .hero { display: flex; flex-direction: column; min-height: 0; max-height: none; overflow: clip; }
  .hero__dentro, .hero__testo { display: contents; }
  .hero__testo > .occhiello { order: 1; margin: 22px 16px 0; font-size: 13px; letter-spacing: .16em; }
  .hero__titolo { order: 2; margin: 12px 16px 0; font-size: clamp(2.3rem, 1.1rem + 6vw, 2.75rem); line-height: .98; }
  .hero__titolo .riga { display: inline; overflow: visible; padding: 0; margin: 0; white-space: normal; }
  .hero__titolo .riga > * { display: inline; animation: none; }
  .hero__titolo .riga:last-child { display: block; }
  .hero__titolo:has(.riga) { animation: hero-entra .7s var(--ease-out) both; }
  .hero__titolo:not(:has(.riga)) { font-size: clamp(2.05rem, 1.1rem + 4.6vw, 2.5rem); }
  .hero__sotto { order: 3; margin: 16px 16px 0; font-size: 1.08rem; line-height: 1.42; }
  .hero__scena { order: 4; position: relative; inset: auto; width: 100%; height: min(124vw, 520px); margin-top: 22px; z-index: 0; }
  .porta { left: 16px; top: 0; bottom: 0; width: auto; max-width: none; height: 100%; --arco: 13px; }
  .hero__statua { right: -12%; bottom: 4%; width: 74%; }
  .hero__badge { left: auto; right: 14px; top: 6%; width: 96px; }
  .hero__filigrana { width: 100%; top: auto; height: min(124vw, 520px); bottom: 150px; }
  .hero__casa { order: 5; margin: 22px 16px 0; gap: 16px; padding-bottom: 76px; }
  .hero__casa > img { width: 78px; }
  .hero__casa p { font-size: 1rem; margin-bottom: 6px; }
  .hero__casa:has(.btn) { padding-bottom: 72px; }
  .link-freccia { font-size: 15px; }

  .disponibilita { margin-top: -52px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .disponibilita__scheda { grid-template-columns: minmax(0, 1fr); padding: 26px 16px 20px; gap: 18px; border-radius: 22px; }
  .disponibilita__titolo { font-size: 2rem; }
  .cal { margin-top: 14px; }
  .giorno { height: 44px; }
  .giorno span { width: 40px; height: 40px; }
  .disponibilita__campi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .campo-data { padding: 8px 12px; gap: 8px; min-height: 60px; }
  .campo-data img { width: 22px; height: 22px; }
  .campo-data strong { font-size: 16px; }
  .btn--grande { min-height: 56px; font-size: 16px; padding-inline: 18px; }
  .legenda { font-size: 13px; gap: 6px 14px; }

  .casa { padding: 76px 0 64px; }
  .schede {
    display: flex; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); max-width: none; width: calc(100% + 2 * var(--gutter));
    padding: 6px var(--gutter); border-radius: 0; background: transparent; box-shadow: none;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .schede::-webkit-scrollbar { display: none; }
  .schede__voce { flex: none; scroll-snap-align: start; font-size: 14.5px; padding-inline: 18px; min-height: 46px; box-shadow: inset 0 0 0 1px var(--azzurrino); background: var(--bianco); }
  .schede.pronto .schede__voce[aria-selected="true"] { background: transparent; box-shadow: none; }
  .schede__cursore { top: 6px; bottom: 6px; }
  .ambiente { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .ambiente > .foto { height: auto; }
  .ambiente > .foto, .ambiente:has(> .foto) > .foto:nth-child(n) { grid-column: auto; grid-row: auto; }
  .ambiente > .foto:first-child, .ambiente:has(> .foto) > .foto:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .ambiente > .foto:nth-child(even):last-child, .ambiente:has(> .foto) > .foto:nth-child(even):last-child { grid-column: 1 / -1; }
  .ambiente:has(> .foto:nth-child(2):last-child) { grid-auto-rows: 150px; }
  .foto__apri { border-radius: 14px; }
  .foto figcaption { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 13.5px; padding: 5px 10px 6px; }
  .casa__piede { flex-direction: column; align-items: stretch; margin-top: 30px; }
  .dotazioni { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .dotazioni li { font-size: 15.5px; gap: 10px; }
  .dotazioni img { width: 30px; height: 30px; }

  .panorama { min-height: 88svh; }
  .panorama__img { top: -4%; height: 108%; object-position: 58% 50%; }
  .panorama__dentro { padding-top: 64px; padding-bottom: 28px; }
  .panorama__titolo { font-size: clamp(2.6rem, 1.2rem + 7vw, 3.3rem); }
  .panorama__base { align-self: stretch; min-width: 0; padding: 18px 20px; }
  .panorama__base:has(.btn) { max-width: none; padding: 20px; }

  .meraviglia { margin-top: -36px; border-radius: 50% 50% 0 0 / 36px 36px 0 0; padding: 0 0 64px; display: flex; flex-direction: column; }
  .meraviglia__img { position: relative; inset: auto; width: 100%; height: 240px; border-radius: 0; order: 0; }
  .meraviglia__img::after { background: linear-gradient(0deg, var(--notte) 0%, transparent 46%), linear-gradient(180deg, var(--notte) 0%, transparent 22%); }
  .meraviglia__dentro { order: 1; margin-top: -60px; position: relative; z-index: 2; }
  .meraviglia:not(:has(.meraviglia__img)) { padding-top: 76px; }
  .meraviglia:not(:has(.meraviglia__img)) .meraviglia__dentro { margin-top: 0; }
  .meraviglia:not(:has(.meraviglia__img)) .meraviglia__testo { display: block; }
  .meraviglia:has(.meraviglia__img):not(:has(.meraviglia__cifra)) .meraviglia__dentro { margin-top: -40px; }
  .meraviglia__cifra { font-size: clamp(5rem, 2rem + 14vw, 6rem); margin-bottom: 8px; }
  .meraviglia__titolo { font-size: clamp(1.95rem, 1.1rem + 3.8vw, 2.4rem); }
  .meraviglia__sotto { font-size: 1.06rem; margin-top: 16px; }
  .percorso { margin-top: 30px; max-width: none; }
  .percorso__piedi::after, .percorso__tappa:not(.percorso__tappa--arrivo)::after { left: calc(100% + 8px); width: var(--tratto, 40px); }

  .passeggiata { padding: 76px 0 60px; }
  .passeggiata__griglia { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .passeggiata__testo { position: static; }
  .passeggiata__griglia:has(> .tappe) { grid-template-columns: minmax(0, 1fr); padding-left: 0; padding-right: 0; }
  .passeggiata__griglia:has(> .tappe) > .passeggiata__testo { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .tappe { padding: 8px 16px 26px; scroll-padding-inline: 16px; gap: 14px; cursor: auto; }
  .tappa { flex-basis: 60vw; }
  .tappa h3 { margin-top: 16px; }

  .dove { padding: 76px 0 70px; }
  .dove__griglia, .dove__griglia:has(> .dove__elenco:first-child) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .dove__mappa > .titolo-sezione, .dove__mappa > .sotto-sezione, .mappa, .dove__elenco,
  .dove__griglia:has(> .dove__elenco:first-child) > .dove__elenco, .dove__griglia:has(> .dove__elenco:first-child) > .dove__mappa { grid-column: 1; grid-row: auto; }
  .mappa { margin-inline: calc(-1 * var(--gutter)); padding: 0; border-radius: 0; box-shadow: none; overflow-x: auto; scrollbar-width: none; background: transparent; }
  .mappa::-webkit-scrollbar { display: none; }
  .mappa > img, .mappa a > img { width: 640px; max-width: none; border-radius: 0; }
  .mappa__vie { inset: 0; width: 640px; max-width: none; height: calc(640px * 887 / 1774); }
  .luoghi li { padding: 10px 12px; margin-inline: -12px; font-size: 1.05rem; }

  .collegamenti__dentro { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 72px; padding-bottom: 104px; }
  .collegamenti__testo, .mezzi, .gite, .collegamenti__img, .collegamenti__dentro > .gite:last-child { grid-column: 1; grid-row: auto; }
  .mezzi { grid-template-columns: minmax(0, 1fr); }
  .mezzi li { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; border-left: 0; border-top: 1px solid var(--filo); }
  .mezzi li:last-child { border-bottom: 1px solid var(--filo); }
  .mezzi p { font-size: 1.95rem; }
  .mezzi strong { margin-bottom: 4px; font-size: 13.5px; }
  .gite { display: flex; overflow-x: auto; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 10px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .gite::-webkit-scrollbar { display: none; }
  .gite li { flex: 0 0 40vw; scroll-snap-align: start; }
  .gite span { font-size: 1rem; margin-top: 12px; }
  .collegamenti__img { min-height: 220px; }

  .recensioni { margin-top: -36px; border-radius: 50% 50% 0 0 / 36px 36px 0 0; padding: 80px 0 48px; }
  .recensioni__titolo { font-size: 2rem; }
  .recensioni__titolo::after { display: none; }
  .recensioni__griglia { display: flex; overflow-x: auto; gap: 14px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin-top: 34px; }
  .recensioni__griglia::-webkit-scrollbar { display: none; }
  .recensione { flex: 0 0 82vw; scroll-snap-align: start; padding: 24px 22px; border-radius: 22px; background: color-mix(in srgb, var(--crema) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 28%, transparent); gap: 16px; }
  .recensione > img { width: 48px; }
  .recensione blockquote p { font-size: 1.32rem; }

  .invito { padding: 16px 10px 0; }
  .invito__finestra { left: 10px; right: 10px; top: 16px; }
  .invito__img { object-position: 38% 60%; }
  .invito__dentro { min-height: 620px; padding: 110px 6px 200px; }
  .invito__dentro::before { top: 50px; height: 520px; width: 100%; }
  .invito__titolo { font-size: clamp(2.5rem, 1.2rem + 7vw, 3.2rem); }
  .invito__azione { gap: 18px; margin-top: 24px; }
  .invito__azione p { font-size: 15px; }

  .piede__dentro { padding-top: 40px; }
  .piede__vesuvio { width: 100%; }
  .piede__logo img { width: 230px; }
  .piede__menu { gap: 2px 20px; }
  .piede__legale { flex-direction: column; }

  .barra-tel {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 60px;
    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: var(--blu); color: var(--bianco);
    font-family: var(--sans); font-size: 16px; font-weight: 700; text-decoration: none;
    box-shadow: 0 -10px 26px -14px rgba(20, 40, 90, .7), inset 0 1px 0 color-mix(in srgb, var(--oro) 70%, transparent);
    -webkit-user-select: none; user-select: none;
    transition: transform .35s var(--ease-out);
  }
  .barra-tel img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
  .barra-tel:active { background: var(--blu-notte); }
  .barra-tel.nascosta { transform: translateY(110%); }

  /* i capitoli delle pagine interne a una colonna */
  .casa .dentro:not(:has(.schede)), main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .casa .dentro:not(:has(.schede)) > .casa__testa, main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .casa__testa { position: static; grid-column: 1; grid-row: auto; }
  main > .casa:nth-of-type(odd) .dentro:not(:has(.schede)) > .ambienti { grid-column: 1; grid-row: auto; }
  .casa .dentro:not(:has(.schede)) .ambiente { grid-auto-rows: 140px; }
  .casa .dentro:not(:has(.schede)) .ambiente > .foto { height: auto; }
  .passeggiata .mezzi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .passeggiata .mezzi + .mezzi { margin-top: 12px; }
  .passeggiata .mezzi li { padding: 20px 18px 20px 22px; gap: 10px; }
  .passeggiata .mezzi li::before { top: 20px; bottom: 20px; }
  .passeggiata .mezzi p { font-size: 1rem; }
  .passeggiata__griglia > div:not(.passeggiata__testo) .sotto-sezione { font-size: 1.06rem; }
  .passeggiata .luoghi li, .meraviglia .luoghi li { font-size: 1.05rem; padding: 13px 0; }
  .passeggiata__testo .titolo-sezione:has(a.intero) { font-size: clamp(2.1rem, 1rem + 5vw, 2.6rem); }

  .galleria__foto { padding: 64px 12px 72px; }
  .galleria__prima, .galleria__dopo { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin-top: 0; }
}

@media (max-width: 360px) {
  .testata__logo img { width: 168px; }
  .testata__wa, .testata__apri { width: 44px; height: 44px; min-height: 44px; }
  .hero__titolo { font-size: 2.1rem; }
  .hero__titolo:not(:has(.riga)) { font-size: 1.9rem; }
  .campo-data small { font-size: 10.5px; }
  .campo-data strong { font-size: 14px; }
  .percorso__tappa strong { font-size: 12px; }
  .meraviglia__cifra { font-size: 4.8rem; }
  .panorama__titolo { font-size: 2.4rem; }
  .invito__titolo { font-size: 2.3rem; }
}

/* la statua del Nilo nella banda scura: niente fondo, la figura scontornata sul blu notte */
.meraviglia__img .tappa__fondo { background: transparent; display: block; }
.meraviglia__img .tappa__fondo img { object-fit: contain; object-position: 70% 100%; }
.meraviglia__img:has(.tappa__fondo)::after { display: none; }
.meraviglia__testo > .reveal:has(.tondo) { margin-bottom: 24px; }
.meraviglia .tondo { box-shadow: none; }

/* la porta senza statua (pagine interne): l'arco al centro della scena */
.hero__scena:not(:has(.hero__statua)) .porta { left: 50%; transform: translateX(-50%); }
@media (max-width: 767px) {
  .hero__scena:not(:has(.hero__statua)) .porta { left: 50%; }
  /* la statua del Nilo nella banda scura: il titolo sotto la figura, non sopra */
  .meraviglia:has(.tappa__fondo) .meraviglia__dentro { margin-top: 12px; }
  .meraviglia__img:has(.tappa__fondo) { height: 280px; }
}

/* ── giro 3 del collaudo ─────────────────────────────────────────── */
/* la zona di tocco dei punti della mappa: invisibile, almeno 32 px anche da telefono */
.mappa__via .mappa__tocco, .mappa__via.acceso .mappa__tocco { fill: transparent; stroke: none; opacity: 0; transform: none; pointer-events: all; cursor: pointer; }
/* le bande scure: il testo non copre la foto da ingrandire (il clic arriva alla lente) */
.meraviglia__dentro { pointer-events: none; }
.meraviglia__testo > * { pointer-events: auto; }
/* le schede degli ambienti scorrono dentro di sé, mai la pagina */
.schede { overflow-x: auto; scrollbar-width: none; }
.schede::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  /* il titolo della hero si misura sulla sua colonna: «Appartamento a Napoli,» è 10,4 em, sta sempre intero */
  .hero__testo { container-type: inline-size; width: 100%; }
  .hero__titolo:has(.riga) { font-size: min(var(--t-hero), 9.35cqi); }
  .hero__titolo .riga { overflow: visible clip; }
  /* i titoli nelle colonne strette si misurano sulla colonna: niente parole sole a capo */
  .passeggiata__testo, .casa .dentro:not(:has(.schede)) > .casa__testa { container-type: inline-size; }
  .passeggiata__griglia:not(:has(> .tappe)) .passeggiata__testo .titolo-sezione { font-size: min(var(--t-medio), 9.1cqi); }
  .passeggiata__griglia:has(> .tappe) .passeggiata__testo .titolo-sezione { font-size: min(clamp(2.1rem, 1rem + 2.2vw, 3.3rem), 12.6cqi); }
  .passeggiata__griglia .passeggiata__testo .titolo-sezione:has(a.intero) { font-size: min(4.4rem, 10.1cqi); }
  .casa .dentro:not(:has(.schede)) > .casa__testa .titolo-sezione { font-size: min(var(--t-medio), 11.1cqi); }
}
@media (max-width: 767px) {
  .recensioni__titolo { display: block; text-wrap: balance; }
  .dotazioni { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pagina-404 { padding-bottom: 230px; }
  .pagina-404::before { top: auto; bottom: 20px; right: 0; width: 110px; }
}
@media (max-width: 360px) {
  .btn { padding-inline: 18px; gap: 10px; font-size: 15px; }
  .btn img { width: 19px; height: 19px; }
  .testata .testata__wa { padding-inline: 0; }
}

/* titoli senza parole sole a capo: dimensione dalla colonna (cqi) e righe bilanciate */
.passeggiata__testo, .meraviglia__testo, .invito__dentro { container-type: inline-size; }
.invito__dentro { width: 100%; }
.invito__titolo { font-size: min(clamp(2.6rem, 1rem + 5vw, 6.4rem), 10.4cqi); }
.invito__titolo em { display: block; }
.meraviglia__titolo { font-size: min(clamp(2.1rem, 1.1rem + 2.6vw, 3.9rem), 9.15cqi); }
.meraviglia:has(.meraviglia__cifra) .meraviglia__testo { max-width: 680px; }
.tappa h3, .passeggiata .mezzi h3, .gite span { text-wrap: balance; }
@media (max-width: 767px) {
  .passeggiata__griglia:not(:has(> .tappe)) .passeggiata__testo .titolo-sezione { font-size: min(var(--t-titolo), 9.2cqi); }
  .passeggiata__testo .titolo-sezione:has(a.intero) { font-size: min(clamp(2.1rem, 1rem + 5vw, 2.6rem), 10.1cqi); }
  .invito__titolo { font-size: min(clamp(2.5rem, 1.2rem + 7vw, 3.2rem), 10.4cqi); }
  .meraviglia__titolo { font-size: min(clamp(1.95rem, 1.1rem + 3.8vw, 2.4rem), 9.15cqi); }
  .pagina-404 .titolo-sezione { font-size: clamp(2rem, 10.5vw, 2.6rem); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .passeggiata .mezzi { grid-template-columns: minmax(0, 1fr); }
  .passeggiata .mezzi li:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── 30/10 · le modifiche di Domenico: la casa al centro, Napoli dopo, colori più calmi ── */
/* la hero senza statua: l'arco con la casa un po' più largo nella scena */
.hero__scena:not(:has(.hero__statua)) .porta { max-width: 74%; }
.hero__statua { width: min(52%, 430px); }
.hero__casa > img { object-position: 40% 50%; }
/* il nuovo ordine: casa (crema) → mappa (carta) → collegamenti (crema) → panorama → 50 m → passeggiata → recensioni → finale */
.dove + .collegamenti { background: var(--crema); }
.dove + .collegamenti .collegamenti__dentro { padding-bottom: clamp(72px, 7vw, 110px); }
.dove + .collegamenti .gite img { box-shadow: 0 0 0 5px var(--bianco), var(--ombra-foto); }
.collegamenti + .panorama { margin-top: 0; }
.recensioni { padding-bottom: clamp(56px, 5vw, 80px); }
.recensioni + .invito { padding-top: clamp(40px, 4vw, 64px); }
.recensioni + .invito .invito__finestra { top: clamp(40px, 4vw, 64px); }
/* le prime schermate delle pagine interne, un filo più contenute come la hero */
main > .panorama:first-child { min-height: clamp(460px, 70svh, 680px); }
@media (max-width: 767px) {
  .hero__scena { height: min(108vw, 440px); }
  .hero__filigrana { height: min(108vw, 440px); }
  .panorama { min-height: 62svh; }
  main > .panorama:first-child { min-height: 72svh; }
  .recensioni + .invito { padding-top: 24px; }
  .recensioni + .invito .invito__finestra { top: 24px; }
}

/* Napoli dopo la casa: il panorama della home è una finestra dentro la pagina, non una banda a tutto schermo */
.collegamenti + .panorama {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto clamp(48px, 5vw, 80px); border-radius: 28px; overflow: hidden;
  min-height: clamp(400px, 52svh, 540px);
}
.collegamenti + .panorama + .meraviglia { margin-top: 0; }
@media (max-width: 767px) {
  .collegamenti + .panorama { width: calc(100% - 20px); border-radius: 22px; min-height: 480px; margin-bottom: 40px; }
}

/* ══ 9-ter · le lingue ══════════════════════════════════════════════════════════════════════════════
   Il menù a tendina del kit (/assets/thk/lingue.css), nello stile della testata: la pillola bianca col filo blu, come i
   pulsanti; l'elenco sulla carta del sito. Al posto vuoto «data-thk-lingue» dello step 5, sempre visibile. */
.testata__destra details.lingue {
  --thk-lingue-pulsante-testo: var(--blu);
  --thk-lingue-pulsante-fondo: var(--bianco);
  --thk-lingue-bordo: color-mix(in srgb, var(--blu) 30%, transparent);
  --thk-lingue-raggio: 999px;
  --thk-lingue-fondo: var(--carta);
  --thk-lingue-testo: var(--inchiostro);
  --thk-lingue-raggio-elenco: var(--r-m);
  --thk-lingue-evidenza: var(--azzurrino);
  --thk-lingue-fuoco: var(--blu-vivo);
  font-family: var(--sans);
}
.testata__destra details.lingue > summary { min-height: 46px; padding: 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.testata__destra details.lingue > ul { font-size: 15px; font-weight: 600; border: 1px solid var(--azzurrino); }
@media (max-width: 767px) {
  .testata__destra details.lingue > summary { min-height: 44px; padding: 0 9px; gap: .3em; font-size: 13.5px; }
}
/* posto per il selettore nella testata, senza scorrimento laterale (e con un po' di margine per i nomi del menu nelle altre
   lingue): fra 768 e 1239 px (il menu in fila) gli spazi un poco più stretti; sotto i 390 px la tendina prende il posto
   del tondo del calendario della testata (resta la barra in basso «Richiedi la disponibilità», con la stessa azione) */
@media (min-width: 1101px) and (max-width: 1239px) {
  .testata__dentro:has(details.lingue) { gap: 16px; }
  .testata__dentro:has(details.lingue) .menu__voci { gap: 10px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .testata__dentro:has(details.lingue) { gap: 12px; }
  .testata__destra:has(details.lingue) { gap: 6px; }
  .testata__destra details.lingue > summary { padding: 0 8px; gap: .3em; }
  .testata__dentro:has(details.lingue) .menu__voci { gap: 10px; }
}
@media (min-width: 768px) and (max-width: 900px) {
  .testata__dentro:has(details.lingue) .menu__voci { gap: 7px; }
  .testata__dentro:has(details.lingue) .testata__logo img { width: 176px; }
}
@media (min-width: 390px) and (max-width: 413px) {
  .testata__destra:has(details.lingue) { gap: 6px; }
  .testata__destra details.lingue > summary { padding: 0 7px; }
}
@media (max-width: 389px) {
  .testata__destra:has(details.lingue) { gap: 6px; }
  .testata__destra:has(details.lingue) .testata__wa { display: none; }
}
/* le pagine legali nelle altre lingue: «in caso di differenze prevale il testo italiano», col collegamento all'italiano */
.legale .legale__prevale { margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--oro); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--azzurrino); font-size: 14.5px; line-height: 1.5; color: var(--inchiostro); }
/* le recensioni nelle altre lingue: «Tradotta dall'italiano» sotto il nome */
.recensione .recensione__tradotta { margin-top: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: .02em; color: color-mix(in srgb, var(--crema) 66%, transparent); }

/* le caselle delle date nelle altre lingue (rilettura del 31/10/2026): da telefono la scritta può andare a capo
   («Choisissez la date»), senza allargare la scheda; l'italiano resta com'è */
html:not([lang="it"]) .disponibilita__campi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html:not([lang="it"]) .campo-data strong { white-space: normal; overflow-wrap: anywhere; }

/* ══ Giro 3 dell'audit (01/11/2026): i testi più lunghi delle altre lingue. L'italiano non si tocca ═══════════════════
   M7 · «Fuori dalla porta» sulla Home: tre righe come l'italiano. La prima frase su una riga sola, la seconda col suo 13ch;
   da telefono il carattere scende quanto basta perché la prima frase ci stia e l'ultima riga resti sul cielo. */
html:not([lang="it"]) #napoli .panorama__titolo { max-width: none; }
html:not([lang="it"]) #napoli .panorama__titolo em { display: block; max-width: 13ch; }
@media (max-width: 767px) {
  html:not([lang="it"]) #napoli .panorama__titolo { --largo: 9.2vw; font-size: min(clamp(2.6rem, 1.2rem + 7vw, 3.3rem), var(--largo)); }
  html[lang="fr"] #napoli .panorama__titolo { --largo: 9.7vw; }
  html[lang="de"] #napoli .panorama__titolo { --largo: 10.9vw; }
}
/* M8 · i titoli delle pagine legali: una parola tedesca lunghissima («Buchungsbedingungen») sta nello schermo, intera se ci
   sta (9,6 volte il carattere è la parola più lunga di oggi), sillabata altrimenti. Nessuna parola esce dallo schermo. */
html:not([lang="it"]) .legale h1 { overflow-wrap: break-word; }
html[lang="de"] .legale h1 {
  font-size: min(clamp(2.4rem, 1.4rem + 2.8vw, 4rem), calc((100vw - 2 * var(--gutter)) / 9.6));
  -webkit-hyphens: auto; hyphens: auto;
}
/* P20 · «Prenota direttamente»: i due rimandi, da telefono, uno accanto all'altro se ci stanno, altrimenti uno sotto
   l'altro. Il puntino in mezzo non resta mai solo in fondo alla riga: da telefono non si disegna. */
@media (max-width: 767px) {
  html:not([lang="it"]) .invito__rimandi { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; border-radius: 26px; font-size: 0; }
  html:not([lang="it"]) .invito__rimandi a { font-size: 14px; }
}