/* Il Nido dell'Upupa · Marsala — foglio di stile (restyling del 28/10/2026: più arioso)
   Design: kit «design-il-nido-dell-upupa» (home-approvata.png). Colori misurati con confronta-design.py --colori.
   Font serviti dal sito: Source Serif 4, ottica display, semibold (titoli), Source Sans 3 (testi). */

/* ---------- Font (dal sito, nessuna chiamata a terzi) ---------- */
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-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: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Source Serif 4 Display"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+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: "Source Serif 4 Display"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-serif-4-display-600-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+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: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }

/* =====================================================================================================
   IL RESTYLING (28/10/2026; poi «via di mezzo»: misure più contenute e i dettagli del design rimessi, chiesto da chi lavora: «troppo compatto, troppo mappazzone»): lo stesso kit (colori,
   font, logo, icone, il sole, le onde, le foto migliorate, il tramonto), con più aria, sezioni che respirano e un ritmo
   da landing di oggi: l'arco mediterraneo per le foto, il calendario su una scheda blu notte, la laguna a tutta
   larghezza, le distanze come un viaggio, il tramonto da bordo a bordo.
   ===================================================================================================== */

/* ---------- Colori e misure (dal design) ---------- */
:root {
  --crema: #FEFDF9;          /* fondo della pagina */
  --crema-scura: #FAF6EE;
  --sabbia: #F9F5ED;         /* fasce e cerchi delle icone */
  --sabbia-scura: #F3EBDD;
  --sabbia-bordo: #F1E9DC;
  --bianco: #FFFFFF;
  --blu: #043A75;            /* titoli */
  --blu-testo: #0C4282;      /* testi */
  --blu-notte: #014266;      /* footer e scheda del calendario */
  --notte-alta: #0B4A7E;
  --notte-bassa: #012E4C;
  --rosso: #C43930;          /* pulsanti, occhielli, link */
  --sole: #F3A951;           /* il sole del marchio */
  --ottanio: #17829D;        /* le date scelte */
  --linea: #EDE3D8;          /* linee sottili */
  --bordo-campo: #E3E9F0;
  --testo-piede: #D1DEE7;
  --tramonto: #06325A;       /* i testi sul tramonto */

  --serif: "Source Serif 4 Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --contenitore: 1320px;
  --margine: clamp(18px, 4.4vw, 60px);
  --sezione: clamp(64px, 7vw, 112px);
  --raggio: 14px;
  --raggio-piccolo: 10px;
  --raggio-foto: 20px;
  --raggio-grande: clamp(20px, 2vw, 30px);
  --arco: 46% 46% var(--raggio-foto) var(--raggio-foto) / 32% 32% var(--raggio-foto) var(--raggio-foto);   /* l'arco morbido delle foto */
  --altezza-testata: 96px;
  --ombra-morbida: 0 34px 64px -44px rgba(4, 58, 117, 0.4);
  --ombra-scheda: 0 0 0 1px var(--sabbia-bordo), 0 30px 60px -46px rgba(4, 58, 117, 0.4);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: 88px; }
html.menu-aperto { overflow: hidden; }
body {
  margin: 0; background: var(--crema); color: var(--blu-testo);
  font-family: var(--sans); font-size: 18px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ottanio); outline-offset: 3px; border-radius: 3px; }
a, button { touch-action: manipulation; }
.visivo-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--blu); color: var(--bianco); padding: 10px 16px; border-radius: var(--raggio-piccolo); text-decoration: none; }
.salta:focus { top: 12px; }

.contenitore { width: 100%; max-width: calc(var(--contenitore) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); }

/* ---------- Tipografia ---------- */
.occhiello {
  display: flex; align-items: center; gap: 12px; width: fit-content;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rosso); margin-bottom: clamp(12px, 1.2vw, 18px); line-height: 1.3;
}
.occhiello::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sole); flex: none; }
.titolo-sezione {
  font-family: var(--serif); font-weight: 600; color: var(--blu);
  font-size: clamp(34px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -0.022em;
}
.titolo-sezione--grande { font-size: clamp(38px, 4.4vw, 64px); line-height: 1; }
.testo { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.58; color: var(--blu-testo); max-width: 32em; }
.hero__titolo .riga, .titolo-sezione .riga, .regole .riga { display: block; }
.titolo-sezione { text-wrap: balance; }
p, li, figcaption, summary, h3, .btn, .domanda__testo, .scheda__titolo { text-wrap: pretty; }

/* ---------- Pulsanti e link ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 13px 30px; border-radius: 999px; border: 0; white-space: nowrap;
  font-family: var(--sans); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color 200ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.btn--rosso { background: var(--rosso); color: var(--bianco); box-shadow: 0 12px 26px -16px rgba(196, 57, 48, 0.9); }
.btn--grande { min-height: 56px; padding: 14px 32px; font-size: 19px; }
.btn--pieno { width: 100%; min-height: 58px; font-size: 18px; }
.btn--bordo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 18px 34px -18px rgba(120, 40, 20, 0.6); }
.btn:active { transform: scale(0.97); }

.freccia {
  display: inline-block; width: 22px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("/assets/img/icone/freccia-destra.webp") center / 100% auto no-repeat;
          mask: url("/assets/img/icone/freccia-destra.webp") center / 100% auto no-repeat;
  -webkit-mask-size: 22px 22px; mask-size: 22px 22px;
  transition: transform 220ms var(--ease-out);
}
.chevron {
  display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.chevron--sinistra { -webkit-mask-image: url("/assets/img/icone/chevron-sinistra.webp"); mask-image: url("/assets/img/icone/chevron-sinistra.webp"); }
.chevron--destra { -webkit-mask-image: url("/assets/img/icone/chevron-destra.webp"); mask-image: url("/assets/img/icone/chevron-destra.webp"); }
.chevron--giu { -webkit-mask-image: url("/assets/img/icone/chevron-giu.webp"); mask-image: url("/assets/img/icone/chevron-giu.webp"); width: 14px; height: 14px; }

.link-freccia {
  display: inline-flex; align-items: center; gap: 14px; padding: 6px 0 9px;
  color: var(--rosso); font-size: 19px; font-weight: 600; text-decoration: none; position: relative;
  -webkit-user-select: none; user-select: none;
}
.link-freccia::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor;
  transform-origin: left; transition: transform 260ms var(--ease-out);
}
.link-freccia--blu { color: var(--blu); font-size: 18px; }
.link-freccia:active { opacity: 0.7; }

@media (hover: hover) and (pointer: fine) {
  .btn--rosso:hover { background: #A93029; box-shadow: 0 18px 34px -16px rgba(196, 57, 48, 0.85); }
  .btn:hover .freccia, .link-freccia:hover .freccia { transform: translateX(5px); }
  .link-freccia:hover::after { transform: scaleX(0.82); }
}

/* ---------- Testata: trasparente in cima, vetro smerigliato quando si scorre ---------- */
.testata {
  position: sticky; top: 0; z-index: 40; background: transparent;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease, background-color 240ms ease;
}
.testata.is-scorsa {
  background: rgba(254, 253, 249, 0.86); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 rgba(237, 227, 216, 0.9), 0 14px 30px -26px rgba(4, 58, 117, 0.35);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .testata.is-scorsa { background: var(--crema); } }
.testata.is-nascosta { transform: translateY(-100%); box-shadow: none; transition: transform 220ms var(--ease-in-out), box-shadow 200ms ease; }
.testata:not(.is-nascosta) { transition-duration: 360ms, 240ms, 240ms; }
.testata__riga { display: flex; align-items: center; gap: 20px; min-height: var(--altezza-testata); }
/* il logo della cliente (2 Step): quadrato, col nome sotto l'upupa; più alto del logo del kit, così il nome si legge */
.testata__logo { flex: none; display: block; margin-right: auto; padding: 6px 0; }
.testata__logo img { height: 100px; width: auto; transform-origin: left center; transition: transform 300ms var(--ease-out); }
.testata.is-scorsa .testata__logo img { transform: scale(0.8); }
.menu__voci { display: flex; align-items: center; gap: clamp(22px, 2.8vw, 44px); }
.menu__voci a {
  display: inline-block; padding: 10px 0; color: var(--blu); text-decoration: none; font-size: 17px; font-weight: 500; position: relative;
}
.menu__voci a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--rosso);
  transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu__voci a:hover::after { transform: scaleX(1); } }
.menu__voci a.attiva::after { transform: scaleX(1); }

/* Il posto del selettore delle lingue (IT ▾) lasciato allo step 5: dal 9-ter i modelli del pannello ci mettono il menù a
   tendina del kit (details.lingue, qui sotto «Le lingue»); resta per le pagine statiche di sito/ */
.lingue-posto { flex: none; min-width: 62px; min-height: 44px; }
.testata__prenota { min-height: 50px; padding: 12px 24px; font-size: 17px; }

.menu-apri {
  display: none; flex: none; width: 46px; height: 46px; border: 0; background: transparent; border-radius: 50%;
  cursor: pointer; position: relative; -webkit-user-select: none; user-select: none;
}
.menu-apri__linee, .menu-apri__linee::before, .menu-apri__linee::after {
  position: absolute; left: 11px; width: 24px; height: 2px; background: var(--blu); border-radius: 2px; content: "";
  transition: transform 260ms var(--ease-out), opacity 200ms ease;
}
.menu-apri__linee { top: 22px; }
.menu-apri__linee::before { left: 0; top: -7px; }
.menu-apri__linee::after { left: 0; top: 7px; }
.menu-apri[aria-expanded="true"] .menu-apri__linee { background: transparent; }
.menu-apri[aria-expanded="true"] .menu-apri__linee::before { transform: translateY(7px) rotate(45deg); }
.menu-apri[aria-expanded="true"] .menu-apri__linee::after { transform: translateY(-7px) rotate(-45deg); }
.menu-apri:active { background: var(--sabbia); transform: scale(0.94); }

.menu-telefono {
  position: fixed; inset: 0; z-index: 35; background: var(--crema);
  padding: calc(var(--altezza-testata) + 24px) var(--margine) 32px;
  height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 28px;
  opacity: 0; transition: opacity 180ms ease;
}
.menu-telefono[hidden] { display: none; }
.menu-telefono.aperto { opacity: 1; transition: opacity 280ms var(--ease-out); }
.menu-telefono ul { display: grid; gap: 4px; }
.menu-telefono nav a {
  display: block; padding: 14px 0; font-family: var(--serif); font-weight: 600; font-size: 38px; line-height: 1.1; color: var(--blu);
  text-decoration: none; border-bottom: 1px solid var(--linea); letter-spacing: -0.02em;
}
.menu-telefono nav a:active { color: var(--rosso); }
.menu-telefono__prenota { align-self: stretch; }
.menu-telefono__sole { width: 120px; align-self: flex-end; margin-top: auto; opacity: 0.9; }

/* ---------- Gli elementi del kit disegnati: le onde ---------- */
.onda { display: block; overflow: visible; color: var(--blu); }
.onda path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.bordo-onda { position: absolute; left: 0; top: 0; width: 100%; height: clamp(36px, 5vw, 90px); transform: translateY(-99%); fill: var(--sabbia); display: block; pointer-events: none; }

/* ---------- Hero (la base vale anche per le pagine interne) ---------- */
.hero { position: relative; }
.hero__griglia { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(28px, 4.2vw, 64px); align-items: center; }
.hero__titolo {
  font-family: var(--serif); font-weight: 600; color: var(--blu);
  font-size: clamp(46px, 5.6vw, 82px); line-height: 0.92; letter-spacing: -0.026em; margin-bottom: 18px;
}
.hero__titolo em { font-style: italic; letter-spacing: -0.01em; }
.hero__sotto { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.4; color: var(--blu-testo); margin-bottom: clamp(20px, 2vw, 30px); max-width: 22em; }
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-bottom: clamp(20px, 2.2vw, 32px); }
.luogo { display: flex; align-items: center; gap: 10px; font-size: clamp(16px, 1.2vw, 17px); color: var(--blu-testo); }
.luogo img { width: 22px; height: 22px; flex: none; }
.luogo .punto, .prenota__sicuro .punto { margin-inline: 6px; }
.luogo--grande { font-size: clamp(18px, 1.4vw, 21px); margin: 0 0 12px; color: var(--blu); }
.luogo--grande img { width: 26px; height: 26px; }

.hero__foto { position: relative; }
.hero__cornice { position: relative; z-index: 1; border-radius: var(--raggio-foto); overflow: hidden; aspect-ratio: 1.6; background: var(--sabbia); box-shadow: var(--ombra-morbida); }
.hero__cornice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__sole { position: absolute; z-index: 0; width: clamp(70px, 6.4vw, 100px); left: -4%; top: -9%; }

/* le didascalie: sotto la foto, col trattino color sole */
.hero__foto figcaption, .foto figcaption, .stagnone__foto figcaption {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 15px; line-height: 1.3; color: var(--blu-testo);
}
.hero__foto figcaption::before, .foto figcaption::before, .stagnone__foto figcaption::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--sole); flex: none;
}

/* la hero della home: il titolo grande, Marsala nell'arco morbido col sole dietro, la casa sotto in tre cartoline */
.hero--home { isolation: isolate; overflow-x: clip; padding-top: clamp(8px, 1.6vw, 28px); }
.hero__alone {
  position: absolute; z-index: -1; pointer-events: none; width: min(1100px, 88vw); aspect-ratio: 1; right: -26vw; top: -36vw;
  background: radial-gradient(closest-side, rgba(243, 169, 81, 0.2), rgba(243, 169, 81, 0.07) 55%, rgba(243, 169, 81, 0));
}
/* prima l'immagine, poi il titolo (chi lavora, 28/10/2026): a sinistra da computer, in alto da telefono */
.hero--home .hero__griglia { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 4.6vw, 80px); }
.hero--home .hero__foto { order: -1; }
.hero--home .hero__titolo { font-size: clamp(52px, 6.3vw, 94px); line-height: 0.88; letter-spacing: -0.03em; margin-bottom: clamp(18px, 1.8vw, 26px); }
.hero--home .hero__foto { margin: clamp(20px, 2.4vw, 36px) 0 clamp(64px, 6vw, 96px) clamp(8px, 2vw, 28px); }
.hero--home .hero__cornice { aspect-ratio: 1.3; border-radius: var(--arco); }
.hero--home .hero__cornice img { object-position: 50% 55%; }
.hero__onda { position: absolute; z-index: 2; width: clamp(90px, 8vw, 120px); right: -7%; top: 5%; }
/* Marsala sopra, la casa sotto: tre cartoline che sormontano il bordo della foto */
.hero__casa { position: absolute; z-index: 3; left: -3%; right: 4%; bottom: -15%; display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.2vw, 18px); }
.hero__casa li {
  flex: 1 1 0; max-width: 200px; padding: 6px 6px 0; background: var(--bianco); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(4, 58, 117, 0.05), 0 20px 34px -18px rgba(4, 58, 117, 0.5);
  transform: rotate(var(--giro, 0deg)); transition: transform 420ms var(--ease-out);
}
.hero__casa li:nth-child(1) { --giro: -4deg; }
.hero__casa li:nth-child(2) { --giro: 2deg; margin-top: -16px; }
.hero__casa li:nth-child(3) { --giro: -1.5deg; }
.hero__casa img { width: 100%; height: auto; aspect-ratio: 1.25; object-fit: cover; border-radius: 8px; background: var(--sabbia); }
.hero__casa span { display: block; padding: 7px 4px 8px; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--blu); }
@media (hover: hover) and (pointer: fine) { .hero__casa li:hover { transform: rotate(0deg) translateY(-6px); } }

.fatti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; margin-top: clamp(24px, 2.6vw, 40px); padding-block: clamp(16px, 1.6vw, 22px); }
.fatti::before { content: ""; position: absolute; top: 0; left: var(--margine); right: var(--margine); height: 1px; background: var(--linea); }
.fatti li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 12px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; color: var(--blu); }
.fatti li + li { border-left: 1px solid var(--linea); }
.fatti img { width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: var(--sabbia); box-shadow: inset 0 0 0 1px var(--sabbia-bordo); flex: none; }

/* ---------- Disponibilità e calendario: una scheda blu notte, col sole che sorge ----------
   overflow: clip e non solo hidden: il sole sporge, e con hidden il fuoco su un tasto farebbe scorrere la scheda di lato */
.prenota { padding-top: clamp(32px, 3.6vw, 56px); }
.prenota__scheda {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; border-radius: var(--raggio-grande);
  padding: clamp(28px, 3.4vw, 52px) clamp(16px, 3.4vw, 52px) clamp(26px, 3.2vw, 48px);
  background:
    radial-gradient(circle at 92% 0%, rgba(243, 169, 81, 0.24), rgba(243, 169, 81, 0) 32%),
    linear-gradient(165deg, var(--notte-alta) 0%, var(--blu-notte) 52%, var(--notte-bassa) 100%);
  color: var(--crema); box-shadow: 0 50px 90px -64px rgba(1, 46, 76, 0.85);
}
.prenota__sole { position: absolute; z-index: -1; width: clamp(110px, 11vw, 170px); right: clamp(-56px, -3vw, -28px); top: clamp(-82px, -4.8vw, -44px); }
.prenota__onda { position: absolute; z-index: -1; width: clamp(120px, 12vw, 180px); left: clamp(16px, 3vw, 48px); bottom: clamp(8px, 1vw, 16px); color: rgba(254, 253, 249, 0.14); }
.prenota__testa { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px 40px; margin-bottom: clamp(22px, 2.4vw, 36px); }
.prenota .occhiello { color: var(--sole); }
.prenota .titolo-sezione { color: var(--bianco); font-size: clamp(34px, 4vw, 58px); }
.prenota__garanzie { display: grid; justify-items: end; gap: 6px; padding-bottom: 8px; }
.prenota__sicuro { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.35; color: rgba(254, 253, 249, 0.92); max-width: 24em; }
.prenota__sicuro img { width: 42px; height: 42px; padding: 10px; border-radius: 50%; background: var(--crema); flex: none; }
.prenota__cin:empty { display: none; }
.prenota__cin { font-size: 14px; color: rgba(254, 253, 249, 0.8); }

.prenota__griglia { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.riquadro { background: var(--bianco); color: var(--blu-testo); border-radius: clamp(18px, 1.7vw, 26px); box-shadow: 0 34px 60px -40px rgba(0, 18, 36, 0.65); }

.calendario { padding: clamp(14px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px) clamp(14px, 1.6vw, 22px); }
.calendario__testa { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 8px; }
.calendario__mese { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 1.7vw, 26px); letter-spacing: -0.012em; color: var(--blu); text-align: center; }
.calendario__freccia {
  width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--bordo-campo); background: var(--bianco); color: var(--blu);
  border-radius: 50%; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 160ms ease, transform 140ms var(--ease-out), border-color 160ms ease;
}
.calendario__freccia:nth-child(3) { justify-self: end; }
.calendario__freccia:active { transform: scale(0.94); background: var(--sabbia); }
.calendario__freccia:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .calendario__freccia:not(:disabled):hover { background: var(--sabbia); border-color: var(--sabbia-bordo); } }

.calendario__griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario__intestazione { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(12, 66, 130, 0.62); padding: 4px 0 10px; }
.giorno {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: clamp(42px, 3.4vw, 50px); padding: 3px 2px; border: 0; border-radius: 10px; background: var(--crema-scura);
  color: var(--blu); cursor: pointer; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease-out), box-shadow 200ms ease;
}
.giorno--vuoto { background: transparent; cursor: default; }
.giorno__numero { font-size: clamp(16px, 1.25vw, 18px); font-weight: 600; line-height: 1.05; }
.giorno__prezzo { font-size: 12px; line-height: 1.05; opacity: 0.9; white-space: nowrap; }
.giorno--scelto, .giorno--intervallo { background: var(--ottanio); color: var(--bianco); }
.giorno--scelto { box-shadow: 0 12px 22px -12px rgba(23, 130, 157, 0.9); }
.giorno--anteprima { background: rgba(23, 130, 157, 0.14); }
.giorno--occupato, .giorno--passato { color: rgba(12, 66, 130, 0.32); background: transparent; cursor: not-allowed; }
.giorno--occupato .giorno__numero { text-decoration: line-through; text-decoration-thickness: 1px; }
.giorno--occupato { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(4, 58, 117, 0.05) 6px 7px); }
.giorno:not([disabled]):active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .giorno:not([disabled]):not(.giorno--scelto):not(.giorno--intervallo):not(.giorno--vuoto):hover { background: var(--sabbia-scura); }
}
.calendario__senza-js { padding: 16px 4px 0; font-size: 16px; }
.js .calendario__senza-js { display: none; }
.calendario__senza-js a { color: var(--rosso); }

.soggiorno { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 30px); }
.soggiorno__titolo { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 1.7vw, 26px); letter-spacing: -0.012em; color: var(--blu); margin-bottom: 14px; }
.soggiorno__campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.campo--ospiti { grid-column: 1 / -1; }
.campo { position: relative; min-width: 0; }
.campo__etichetta { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(12, 66, 130, 0.7); margin-bottom: 8px; }
.campo__valore {
  width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--crema-scura); border: 1px solid var(--bordo-campo); border-radius: 12px;
  color: var(--blu); font-size: 17px; font-weight: 500; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out), background-color 160ms ease;
}
.campo__valore img { width: 22px; height: 22px; flex: none; }
.campo--ospiti .campo__valore { justify-content: flex-start; }
.campo--ospiti .campo__valore .chevron { margin-left: auto; }
.campo__valore.attivo { border-color: var(--ottanio); background: var(--bianco); box-shadow: 0 0 0 3px rgba(23, 130, 157, 0.18); }
.campo__valore:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .campo__valore:hover { border-color: #C9D6E4; background: var(--bianco); } }

.ospiti {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 10px; background: var(--bianco); border-radius: 16px; box-shadow: 0 0 0 1px var(--sabbia-bordo), 0 18px 36px -14px rgba(4, 58, 117, 0.35);
  transform-origin: top right; animation: ospiti-entra 180ms var(--ease-out);
}
.ospiti[hidden] { display: none; }
@keyframes ospiti-entra { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
.ospiti__tasto {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bordo-campo); background: var(--bianco); color: var(--blu);
  font-size: 22px; line-height: 1; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.ospiti__tasto:active { transform: scale(0.94); background: var(--sabbia); }
.ospiti__tasto:disabled { opacity: 0.35; cursor: default; }
.ospiti__numero { min-width: 28px; text-align: center; font-size: 20px; color: var(--blu); font-variant-numeric: tabular-nums; }

.soggiorno__conto[hidden] { display: none; }
.soggiorno__riga, .soggiorno__totale { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--blu); font-variant-numeric: tabular-nums; }
.soggiorno__riga { font-size: 17px; padding: 4px 0 12px; border-bottom: 1px solid var(--linea); }
.soggiorno__totale { font-size: 17px; padding: 12px 0 18px; }
.soggiorno__totale strong { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2vw, 30px); letter-spacing: -0.01em; }
.soggiorno__stato { min-height: 0; font-size: 16px; color: var(--blu-testo); }
.soggiorno [data-prenota] { margin-top: auto; }
.soggiorno__stato:not(:empty) { margin-bottom: 16px; }
.soggiorno__nota { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--blu-testo); }
.thk-avviso-modulo { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--blu-testo); }
.thk-avviso-modulo a { color: var(--blu); }

/* ---------- Le sezioni ---------- */
.sezione { padding-block: var(--sezione); }
.testa-sezione {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 18px clamp(32px, 5vw, 88px); align-items: end;
  margin-bottom: clamp(28px, 3.2vw, 52px);
}
.testa-sezione__testo { padding-bottom: 4px; }
.testa-sezione__testo .testo { margin-bottom: 16px; }

.foto { position: relative; }
.foto__cornice { overflow: hidden; border-radius: var(--raggio-foto); background: var(--sabbia); }
.foto img { width: 100%; height: auto; object-fit: cover; background: var(--sabbia); transition: transform 700ms var(--ease-out); }

/* 01 · La casa: otto foto a mosaico, la terrazza grande, il bagno in verticale, il nome della stanza su ogni foto.
   Ordine nel codice: terrazza, soggiorno, bagno, camera, cucina, zona pranzo, macchina del caffè, balcone */
.mosaico {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "t t s b" "t t c b" "k p m l"; gap: clamp(10px, 1.1vw, 16px); aspect-ratio: 2;
}
.mosaico__voce:nth-child(1) { grid-area: t; } .mosaico__voce:nth-child(2) { grid-area: s; } .mosaico__voce:nth-child(3) { grid-area: b; }
.mosaico__voce:nth-child(4) { grid-area: c; } .mosaico__voce:nth-child(5) { grid-area: k; } .mosaico__voce:nth-child(6) { grid-area: p; }
.mosaico__voce:nth-child(7) { grid-area: m; } .mosaico__voce:nth-child(8) { grid-area: l; }
.mosaico__voce { min-height: 0; }
.mosaico__voce .foto__cornice { position: relative; height: 100%; }
.mosaico__voce img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mosaico__voce:nth-child(3) img { object-position: 50% 40%; }
.mosaico figcaption {
  position: absolute; z-index: 2; left: 10px; bottom: 10px; margin: 0; padding: 5px 12px 6px; border-radius: 999px; pointer-events: none;
  background: rgba(254, 253, 249, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; color: var(--blu);
}
.mosaico figcaption::before { display: none; }
.foto--terrazza img { aspect-ratio: 1.3; }
.casa__piccole { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.foto--piccola img { aspect-ratio: 1.7; }

/* le dotazioni: la fascia sabbia del design, dieci icone separate dalle loro linee */
.servizi {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 6px; margin-top: clamp(36px, 4vw, 60px);
  padding: clamp(18px, 2vw, 30px) clamp(8px, 1vw, 16px); background: var(--sabbia); border-radius: var(--raggio-grande); box-shadow: inset 0 0 0 1px var(--sabbia-bordo);
}
.servizi li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 14px 10px;
  font-size: clamp(16px, 1.25vw, 18px); line-height: 1.3; color: var(--blu); border-left: 1px solid var(--linea);
}
.servizi li:nth-child(5n + 1) { border-left: 0; }
.servizi img { width: 48px; height: 48px; transition: transform 420ms var(--ease-out); }
.servizi span { max-width: 11em; }
@media (hover: hover) and (pointer: fine) { .servizi li:hover img { transform: translateY(-4px); } }

/* 02 · Lo Stagnone: la laguna grande, il testo in una scheda che la sormonta */
/* attaccata alla casa (stesso fondo): niente doppio spazio sopra; sotto, poco, perché arriva l'onda della fascia sabbia */
.stagnone.sezione { padding-top: 0; padding-bottom: clamp(24px, 2.6vw, 40px); }
.stagnone__griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.stagnone__foto { position: relative; grid-column: 1; grid-row: 1; }
.stagnone__cornice { position: relative; overflow: hidden; overflow: clip; border-radius: var(--raggio-foto); aspect-ratio: 1.45; background: var(--sabbia); }
.stagnone__cornice img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.stagnone__scheda {
  position: relative; z-index: 2; grid-column: 2; grid-row: 1; margin-left: clamp(-120px, -7vw, -56px);
  background: var(--crema); border-radius: var(--raggio-grande); padding: clamp(26px, 3.2vw, 48px); box-shadow: var(--ombra-morbida);
}
.stagnone__scheda .titolo-sezione { margin-bottom: 16px; }
.stagnone__scheda .testo { margin-bottom: 22px; }
.punti { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; padding-top: 20px; border-top: 1px solid var(--linea); }
.punti li { display: flex; align-items: flex-start; gap: 12px; padding-right: 14px; font-size: 16px; line-height: 1.4; color: var(--blu-testo); }
.punti li + li { border-left: 1px solid var(--linea); padding-left: 16px; padding-right: 0; }
/* 3 Step · con tre punti (kitesurf, parcheggio, aeroporto) stanno in una riga sola, l'icona sopra la scritta:
   due più uno lasciava l'aeroporto da solo (secondo giro del 30/10/2026) */
.punti:has(> li:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.punti:has(> li:nth-child(3)) li { flex-direction: column; gap: 10px; padding-right: 12px; font-size: 15px; }
.punti:has(> li:nth-child(3)) li + li { padding-left: 14px; }
.punti img { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: var(--sabbia); flex: none; }
.punti strong { display: block; font-weight: 600; font-size: 17px; color: var(--blu); margin-bottom: 2px; }
.stagnone__piede { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.stagnone__onde { width: 96px; }

/* 03 · I dintorni: la fascia sabbia con l'onda, il pontile nell'arco e le distanze con le loro linee */
.dintorni { position: relative; background: var(--sabbia); margin-top: clamp(28px, 3.6vw, 64px); }
.dintorni.sezione { padding-block: calc(var(--sezione) * 0.8); }
.dintorni__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.foto--pontile .foto__cornice { border-radius: var(--arco); }
.foto--pontile img { aspect-ratio: 1.2; object-position: 50% 55%; }
.foto--pontile .dintorni__sole { position: absolute; z-index: 2; width: clamp(84px, 8vw, 128px); height: auto; right: -6%; bottom: -10%; background: none; }
.distanze { display: grid; }
.distanze li {
  display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: clamp(16px, 1.8vw, 24px); align-items: center;
  padding: clamp(14px, 1.4vw, 20px) 0; border-bottom: 1px solid rgba(4, 58, 117, 0.1);
}
.distanze li:first-child { padding-top: 0; }
.distanze li:last-child { border-bottom: 0; padding-bottom: 0; }
.distanze img { grid-row: 1 / span 2; width: 60px; height: 60px; padding: 15px; border-radius: 50%; background: var(--crema); box-shadow: inset 0 0 0 1px var(--sabbia-bordo); }
.distanze__luogo { align-self: end; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.3; color: var(--blu-testo); }
.distanze__km { align-self: start; margin-top: 2px; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -0.015em; color: var(--blu); }

/* Prima di prenotare: le cinque voci in una scheda, separate dalle loro linee (come nel design) */
.info.sezione { padding-bottom: clamp(44px, 4.6vw, 72px); }
.info__testa { text-align: center; margin-bottom: clamp(28px, 3vw, 44px); }
.info__testa .occhiello { margin-inline: auto; }
.regole {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: clamp(20px, 2.2vw, 32px) clamp(10px, 1.4vw, 20px);
  background: var(--bianco); border-radius: var(--raggio-grande); box-shadow: var(--ombra-scheda);
}
.regole li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 8px clamp(8px, 1.2vw, 18px);
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; color: var(--blu);
}
.regole li + li { border-left: 1px solid var(--linea); }
.regole img { width: 52px; height: 52px; flex: none; }
.regole__orario > span { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rosso); }
.regole__orario .riga { margin-top: 6px; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; color: var(--blu); }
/* 2 Step: il self check-in sotto l'orario di arrivo, come «non ammesso» nelle regole accanto */
.regole__orario .regole__nota { display: block; margin-top: 6px; font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--blu-testo); }

/* Invito finale: la fascia del tramonto dentro i margini, come nel design */
.invito { position: relative; padding: 0 var(--margine) clamp(16px, 2vw, 28px); }
.invito__fascia {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; align-items: center;
  max-width: var(--contenitore); margin-inline: auto; min-height: clamp(300px, 26vw, 380px); padding-block: clamp(36px, 4vw, 60px);
  border-radius: var(--raggio-grande); background: #F8D3A4;
}
.invito__sfondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.invito__fascia::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(253, 236, 214, 0.8) 0%, rgba(253, 236, 214, 0.42) 40%, rgba(253, 236, 214, 0) 66%); }
.invito .invito__interno { position: relative; z-index: 2; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 40px; padding-inline: clamp(22px, 4vw, 60px); }
.invito__testo .titolo-sezione { font-size: clamp(34px, 4.2vw, 62px); line-height: 1; color: var(--tramonto); margin-bottom: 14px; }
.invito__testo p { font-size: clamp(17px, 1.5vw, 22px); color: var(--tramonto); }
.invito__testo a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.invito__sole { position: absolute; z-index: 1; width: clamp(110px, 11vw, 170px); left: 54%; top: 12%; }
.invito__btn { justify-self: end; }

/* ---------- Footer ---------- */
.piede { background: var(--blu-notte); color: var(--testo-piede); padding: clamp(52px, 5vw, 80px) 0 clamp(24px, 2.4vw, 36px); }
.piede a { color: var(--testo-piede); text-decoration: none; transition: color 160ms ease; }
.piede__alto {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px clamp(24px, 4vw, 64px);
  padding-bottom: clamp(32px, 3.4vw, 52px); border-bottom: 1px solid rgba(209, 222, 231, 0.16);
}
/* il logo della cliente, identico, su una cartolina crema: la scritta marrone sul blu non si leggerebbe */
.piede__logo {
  display: inline-block; padding: 14px 20px 12px; background: var(--crema); border-radius: var(--raggio);
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, 0.7);
}
.piede__logo img { display: block; height: clamp(112px, 9vw, 132px); width: auto; }
.piede__nome { margin-top: 20px; font-size: 16px; }
.piede__nome strong { color: var(--bianco); font-weight: 600; }
.piede__frase { margin-top: 6px; max-width: 15em; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.01em; color: var(--bianco); }
.piede__menu ul, .piede__legale { display: grid; gap: 4px; align-content: start; }
.piede__menu a { display: inline-block; padding: 6px 0; font-size: 18px; color: var(--bianco); }
.piede__info { display: grid; gap: 10px; align-content: start; padding-top: 6px; font-size: 16px; line-height: 1.55; }
.piede__info a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(209, 222, 231, 0.45); }
.piede__legale a { display: inline-block; padding: 6px 0; font-size: 16px; }
.piede__basso { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; padding-top: 26px; }
.piede__note { max-width: 62em; font-size: 14px; line-height: 1.5; color: var(--testo-piede); opacity: 0.85; }
.piede__note:empty { display: none; }
.credit { font-size: 14px; opacity: 0.85; }
.credit a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .piede a:hover { color: var(--bianco); }
  .piede__menu a:hover { color: var(--sole); }
}

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

/* ---------- Pagine semplici (legali, 404) ---------- */
.pagina { padding-block: clamp(40px, 5vw, 80px) clamp(64px, 7vw, 110px); }
.legale { max-width: 760px; color: var(--blu-testo); font-size: 18px; line-height: 1.6; }
.legale h1 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(42px, 5vw, 64px); line-height: 1; margin-bottom: 14px; }
.legale h2 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin: 40px 0 12px; }
.legale p, .legale ul, .legale ol { margin: 0 0 14px; }
.legale ul { list-style: disc; padding-left: 1.3em; }
.legale ol { padding-left: 1.3em; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--rosso); text-underline-offset: 3px; }
.legale table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 16px; }
.legale th, .legale td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--blu); font-weight: 600; background: var(--crema-scura); }
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.errore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.errore h1 { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(48px, 6vw, 88px); line-height: 0.95; margin-bottom: 18px; }
.errore p { margin-bottom: 26px; }
.errore__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.errore img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-piccolo); }


/* ---------- Tablet ---------- */
@media (max-width: 1180px) and (min-width: 901px) {
  .ospiti { left: 0; right: auto; transform-origin: top left; }
}
@media (max-width: 1180px) {
  .menu { display: none; }
  .menu-apri { display: block; }
  .piede__alto { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .piede__marchio { grid-row: span 2; }
}
@media (max-width: 1100px) {
  .lingue-posto { min-width: 64px; }
  .testa-sezione { grid-template-columns: 1fr; align-items: start; }
  .testa-sezione__testo .testo { max-width: 36em; }
  .mosaico { aspect-ratio: 1.7; }
  .hero__onda { display: none; }
  .regole { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .regole li:nth-child(4) { border-left: 0; }
  .regole li:nth-child(n + 4) { border-top: 1px solid var(--linea); margin-top: 10px; padding-top: 18px; }
}
@media (max-width: 900px) {
  .testata__logo img { height: 84px; }
  .hero__griglia, .hero--home .hero__griglia { grid-template-columns: 1fr; }
  .hero--home .hero__foto { margin: 16px 0 28px 10px; }
  .mosaico figcaption { left: 7px; bottom: 7px; padding: 3px 9px 4px; font-size: 13px; }
  .prenota__griglia { grid-template-columns: minmax(0, 1fr); }   /* 9-ter: una parola lunga (tedesco) non allarga la colonna */
  .prenota__testa { flex-direction: column; align-items: flex-start; }
  .prenota__garanzie { justify-items: start; padding-bottom: 0; }
  .stagnone__griglia { grid-template-columns: 1fr; }
  .stagnone__scheda { grid-column: 1; grid-row: 2; margin: -44px clamp(10px, 3vw, 32px) 0; }
  /* la didascalia della laguna resta sulla foto: sotto c'è la scheda */
  .stagnone__foto figcaption {
    position: absolute; z-index: 2; top: 12px; right: 12px; margin: 0; padding: 5px 12px 6px; border-radius: 999px;
    background: rgba(254, 253, 249, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: var(--blu);
  }
  .stagnone__foto figcaption::before { display: none; }
  .dintorni__griglia { grid-template-columns: 1fr; }
  .foto--pontile { max-width: 560px; }
  .invito .invito__interno { grid-template-columns: 1fr; }
  .invito__btn { justify-self: start; }
  .piede__alto { grid-template-columns: 1fr 1fr; }
  .piede__marchio { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Telefono (base da telefono di Emil Kowalski, 09 § 5) ---------- */
@media (max-width: 700px) {
  :root { --altezza-testata: 72px; --sezione: 64px; --raggio-foto: 16px; }
  body { font-size: 17px; }
  html { scroll-padding-top: 76px; }
  .testata__logo { padding: 3px 0; }
  .testata__logo img { height: 64px; }
  .testata.is-scorsa .testata__logo img { transform: scale(0.9); }
  .testata__prenota { display: none; }
  .testata__riga { gap: 8px; }
  .lingue-posto { min-width: 60px; }
  .menu-telefono { padding-top: calc(var(--altezza-testata) + 16px); }

  .occhiello { font-size: 12px; gap: 10px; }
  .occhiello::before { width: 8px; height: 8px; }
  .titolo-sezione, .titolo-sezione--grande { font-size: clamp(31px, 8.8vw, 37px); line-height: 1.04; }
  .testo { font-size: 17px; }

  .hero--home .hero__titolo { font-size: clamp(46px, 13vw, 54px); line-height: 0.9; }
  .hero__sotto { font-size: 19px; }
  .hero__azioni { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__azioni .btn { width: 100%; }
  .hero__azioni .link-freccia { align-self: flex-start; }
  .luogo { font-size: 16px; }
  .hero--home .hero__foto { margin: 18px 0 30px 10px; }
  .hero--home .hero__sole { width: 66px; left: -3%; top: -7%; }
  .hero--home .hero__foto { margin-bottom: 60px; }
  .hero__casa { left: -2%; right: -2%; bottom: -17%; gap: 8px; }
  .hero__casa li { padding: 4px 4px 0; border-radius: 10px; }
  .hero__casa li:nth-child(2) { margin-top: -10px; }
  .hero__casa img { border-radius: 7px; }
  .hero__casa span { font-size: 12px; padding: 5px 2px 6px; }
  .hero__foto figcaption, .foto figcaption { font-size: 14px; margin-top: 10px; }
  .hero__alone { width: 140vw; right: -70vw; top: -60vw; }

  .fatti { margin-top: 18px; padding-block: 14px; }
  .fatti li { flex-direction: column; text-align: center; gap: 8px; padding: 4px 6px; font-size: 14px; line-height: 1.25; }
  .fatti img { width: 44px; height: 44px; padding: 10px; }

  .prenota { padding-top: 32px; }
  .prenota .contenitore { padding-inline: 10px; }
  .prenota__scheda { padding: 30px 10px 18px; border-radius: 22px; }
  .prenota__testa { padding-inline: 8px; gap: 14px; margin-bottom: 20px; }
  .prenota .titolo-sezione { font-size: clamp(32px, 9vw, 38px); }
  .prenota__sole { width: 100px; right: -34px; top: -46px; }
  .prenota__onda { display: none; }
  .prenota__sicuro { font-size: 15px; }
  .prenota__sicuro img { width: 38px; height: 38px; padding: 9px; }
  .calendario { padding: 12px 8px 14px; }
  .calendario__testa { grid-template-columns: 44px 1fr 44px; }
  .calendario__freccia { width: 44px; height: 44px; }
  .calendario__griglia { gap: 3px; }
  .calendario__intestazione { font-size: 11px; letter-spacing: 0.06em; }
  .giorno { min-height: 48px; border-radius: 9px; }
  .soggiorno { padding: 18px 14px 16px; }
  .soggiorno__campi { gap: 12px; }
  .campo__valore { padding: 8px 10px; }
  .ospiti { left: 0; right: auto; transform-origin: top left; }

  .testa-sezione { margin-bottom: 24px; gap: 14px; }
  .mosaico {
    grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 34vw); aspect-ratio: auto; gap: 10px;
    grid-template-areas: "t t" "t t" "s b" "c b" "k p" "m l";
  }
  .mosaico figcaption { left: 8px; bottom: 8px; padding: 4px 10px 5px; font-size: 13px; }
  .foto--terrazza { grid-column: 1 / -1; }
  .foto--terrazza img { aspect-ratio: 1.3; }
  .casa__piccole { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 12px; }
  .foto--piccola img { aspect-ratio: 1.15; }
  .servizi { grid-template-columns: 1fr 1fr; row-gap: 0; padding: 6px 14px; margin-top: 28px; border-radius: 20px; }
  .servizi li { flex-direction: row; text-align: left; gap: 12px; padding: 12px 6px; font-size: 15px; border-left: 0; }
  .servizi li:nth-child(2n) { border-left: 1px solid var(--linea); padding-left: 12px; }
  .servizi li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .servizi img { width: 34px; height: 34px; flex: none; }
  /* 9-ter: nelle altre lingue le dotazioni lunghe (il tedesco «Privatparkplatz») vanno a capo, con la sillabazione della
     lingua della pagina, e le due colonne restano uguali; l'italiano resta com'era al pixel */
  :root:not([lang="it"]) .servizi:not(.passi) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:not([lang="it"]) .servizi:not(.passi) span { min-width: 0; }

  .stagnone__scheda { margin: -40px 10px 0; padding: 24px 18px 20px; border-radius: 20px; }
  .punti { grid-template-columns: 1fr; gap: 14px; }
  .punti li + li { border-left: 0; padding-left: 0; }
  .punti:has(> li:nth-child(3)) { grid-template-columns: 1fr; }
  .punti:has(> li:nth-child(3)) li { flex-direction: row; gap: 12px; font-size: 16px; }
  .punti:has(> li:nth-child(3)) li + li { padding-left: 0; }
  .punti li:nth-child(n+3) { margin-top: 0; }
  .stagnone__onde { width: 76px; }

  .dintorni { margin-top: 20px; }
  .dintorni__griglia { gap: 36px; }
  .foto--pontile .dintorni__sole { width: 76px; right: -2%; bottom: -8%; }
  .distanze li { grid-template-columns: 48px 1fr; column-gap: 14px; padding: 12px 0; }
  .distanze img { width: 48px; height: 48px; padding: 12px; }
  .distanze__luogo { font-size: 15px; }
  .distanze__km { font-size: 28px; }

  .regole { grid-template-columns: 1fr 1fr; padding: 6px 14px; border-radius: 20px; }
  .regole li { gap: 8px; padding: 16px 6px; margin-top: 0; font-size: 15px; border-left: 0; }
  .regole li:nth-child(2n) { border-left: 1px solid var(--linea); }
  .regole li:nth-child(n + 3) { border-top: 1px solid var(--linea); margin-top: 0; padding-top: 16px; }
  .regole li:last-child { grid-column: 1 / -1; }
  .regole img { width: 40px; height: 40px; }
  .regole__orario > span { font-size: 12px; }
  .regole__orario .riga { font-size: 21px; }
  .regole__orario .regole__nota { font-size: 15px; }

  .invito { padding: 0; }
  .invito__fascia { border-radius: 0; min-height: 0; align-items: stretch; padding: 92px 0 28px; }
  .invito__fascia::before { background: linear-gradient(180deg, rgba(253, 236, 214, 0.88) 0%, rgba(253, 236, 214, 0.6) 55%, rgba(253, 236, 214, 0) 100%); }
  .invito__sfondo { object-position: 78% 70%; }
  .invito .invito__interno { display: flex; flex-direction: column; gap: 22px; padding-inline: 20px; }
  .invito__testo .titolo-sezione { font-size: clamp(30px, 8.6vw, 38px); }
  .invito__testo p { font-size: 17px; }
  .invito__sole { width: 72px; left: 20px; top: 18px; }
  .invito__btn { width: 100%; }

  .piede { padding: 48px 0 calc(100px + env(safe-area-inset-bottom, 0px)); }
  .piede__alto { grid-template-columns: 1fr; gap: 24px; padding-bottom: 28px; }
  .piede__logo img { height: 104px; }
  .piede__nome { margin-top: 16px; }
  .piede__basso { flex-direction: column; gap: 10px; }

  .barra-telefono {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(254, 253, 249, 0.92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 -1px 0 var(--linea), 0 -10px 24px -18px rgba(4, 58, 117, 0.4);
    transition: transform 280ms var(--ease-out), opacity 200ms ease;
  }
  .barra-telefono.nascosta { transform: translateY(110%); opacity: 0; pointer-events: none; }
  .barra-telefono .btn { min-height: 52px; }

  .errore { grid-template-columns: 1fr; }
  .legale { font-size: 17px; }
}
@media (max-width: 360px) {
  .testata__logo img { height: 46px; }
  .btn--grande { font-size: 18px; padding-inline: 18px; gap: 10px; }
  .btn--pieno { font-size: 17px; padding-inline: 16px; gap: 10px; }
  .hero--home .hero__titolo { font-size: 44px; }
  .fatti li { font-size: 13px; }
  .giorno__prezzo { font-size: 11px; letter-spacing: -0.02em; }
  .soggiorno__campi { grid-template-columns: 1fr; }
  .servizi li { font-size: 14px; gap: 8px; }
  .servizi img { width: 28px; height: 28px; }
}


/* =====================================================================================================
   IL MOVIMENTO (regole di Emil Kowalski, 09 § 0-bis-2): solo transform, opacity, clip-path e il tratto delle
   onde; curve --ease-out e --ease-in-out; il telefono prima di tutto; meno movimento se richiesto.
   ===================================================================================================== */

@keyframes sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes assesta { from { transform: scale(1.08); } to { transform: none; } }
@keyframes sole-sorge { from { opacity: 0; transform: translateY(36px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes galleggia { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes casa-entra { from { opacity: 0; transform: translateY(34px) rotate(0deg); } }
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@keyframes traccia { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- 1 · La hero entra al caricamento, con CSS. La foto grande non parte mai da opacity 0: si assesta appena. */
.hero__testo > * { animation: sale 820ms var(--ease-out) both; }
.hero__testo > :nth-child(2) { animation-delay: 70ms; }
.hero__testo > :nth-child(3) { animation-delay: 200ms; }
.hero__testo > :nth-child(4) { animation-delay: 280ms; }
.hero__testo > :nth-child(5) { animation-delay: 360ms; }
.hero__testo > :nth-child(6) { animation-delay: 440ms; }
/* il titolo della home sale riga per riga */
.hero--home .hero__testo > .hero__titolo { animation: none; }
.hero--home .hero__titolo .riga { animation: sale 900ms var(--ease-out) both; }
.hero--home .hero__titolo .riga:nth-child(2) { animation-delay: 80ms; }
.hero--home .hero__titolo .riga:nth-child(3) { animation-delay: 160ms; }
.hero__cornice img { animation: assesta 1800ms var(--ease-out) both; }
.hero__sole { animation: sole-sorge 1100ms var(--ease-out) 260ms both, galleggia 5600ms var(--ease-in-out) 1400ms infinite alternate; }
/* le cartoline della casa salgono una dopo l'altra (backwards: finita l'entrata, torna la rotazione e il passaggio del mouse) */
.hero__casa li { animation: casa-entra 900ms var(--ease-out) 560ms backwards; }
.hero__casa li:nth-child(2) { animation-delay: 660ms; }
.hero__casa li:nth-child(3) { animation-delay: 760ms; }
.hero__foto figcaption { animation: dissolvi 700ms ease 700ms both; }
.hero__onda path { stroke-dasharray: 1; animation: traccia 1500ms var(--ease-in-out) 700ms both; }
.hero__onda path + path { animation-delay: 900ms; }
.fatti li { animation: sale 700ms var(--ease-out) both; }
.fatti li:nth-child(1) { animation-delay: 520ms; }
.fatti li:nth-child(2) { animation-delay: 590ms; }
.fatti li:nth-child(3) { animation-delay: 660ms; }

/* ---- 2 · Le sezioni arrivano scorrendo: .reveal → .in (main.js, una volta sola). Nascoste solo col JavaScript. */
.js .reveal:not(.reveal-gruppo):not(.foto):not(.invito__fascia) { opacity: 0; transform: translateY(36px); }
.reveal:not(.reveal-gruppo):not(.foto):not(.invito__fascia) { transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out); }
.js .reveal.in:not(.reveal-gruppo):not(.foto):not(.invito__fascia) { opacity: 1; transform: none; }
.titolo-sezione.reveal, .testa-sezione__testo.reveal { transition-delay: 90ms; }

/* gruppi (servizi, punti, distanze, regole): le schede una dopo l'altra, a 60 ms */
.js .reveal-gruppo > * { opacity: 0; transform: translateY(24px); }
.reveal-gruppo > * { transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--n, 0) * 60ms); }
.reveal-gruppo.in > * { opacity: 1; transform: none; }
.reveal-gruppo > :nth-child(2) { --n: 1; } .reveal-gruppo > :nth-child(3) { --n: 2; } .reveal-gruppo > :nth-child(4) { --n: 3; }
.reveal-gruppo > :nth-child(5) { --n: 4; } .reveal-gruppo > :nth-child(6) { --n: 5; } .reveal-gruppo > :nth-child(7) { --n: 6; }
.reveal-gruppo > :nth-child(8) { --n: 7; } .reveal-gruppo > :nth-child(9) { --n: 8; } .reveal-gruppo > :nth-child(10) { --n: 9; }

/* le onde del kit si disegnano quando arriva la loro scheda */
.js .reveal .onda path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal .onda path { transition: stroke-dashoffset 1600ms var(--ease-in-out) 400ms; }
.reveal .onda path + path { transition-delay: 600ms; }
.reveal.in .onda path { stroke-dashoffset: 0; }

/* le foto si svelano (clip-path, ease-in-out), la didascalia arriva dopo */
.js .foto.reveal .foto__cornice { clip-path: inset(0 0 100% 0 round var(--raggio-foto)); }
.foto.reveal .foto__cornice { transition: clip-path 1200ms var(--ease-in-out); }
.foto.reveal.in .foto__cornice { clip-path: inset(0 0 0 0 round var(--raggio-foto)); }
.js .foto.reveal figcaption { opacity: 0; transform: translateY(10px); }
.foto.reveal figcaption { transition: opacity 600ms var(--ease-out) 700ms, transform 700ms var(--ease-out) 700ms; }
.foto.reveal.in figcaption { opacity: 1; transform: none; }
.casa__piccole .foto:nth-child(1) .foto__cornice { transition-delay: 140ms; }
.casa__piccole .foto:nth-child(2) .foto__cornice { transition-delay: 280ms; }
.mosaico__voce:nth-child(2) .foto__cornice { transition-delay: 90ms; } .mosaico__voce:nth-child(3) .foto__cornice { transition-delay: 180ms; }
.mosaico__voce:nth-child(4) .foto__cornice { transition-delay: 150ms; } .mosaico__voce:nth-child(5) .foto__cornice { transition-delay: 240ms; }
.mosaico__voce:nth-child(6) .foto__cornice { transition-delay: 300ms; } .mosaico__voce:nth-child(7) .foto__cornice { transition-delay: 360ms; }
.mosaico__voce:nth-child(8) .foto__cornice { transition-delay: 420ms; }
.js .foto--pontile.reveal .dintorni__sole { opacity: 0; transform: translateY(24px) scale(0.94); }
.foto--pontile.reveal .dintorni__sole { transition: opacity 800ms var(--ease-out) 700ms, transform 1000ms var(--ease-out) 700ms; }
.foto--pontile.reveal.in .dintorni__sole { opacity: 1; transform: none; }

/* il sole della scheda del calendario galleggia */
.prenota__sole { animation: galleggia 6200ms var(--ease-in-out) infinite alternate; }

/* l'invito finale: il tramonto si avvicina piano, il testo sale, il sole galleggia */
.invito__sfondo { transition: transform 2000ms var(--ease-out); }
.js .invito__fascia.reveal:not(.in) .invito__sfondo { transform: scale(1.08); }
.js .invito__fascia:not(.in) .invito__testo, .js .invito__fascia:not(.in) .invito__btn { opacity: 0; transform: translateY(32px); }
.invito__testo, .invito__btn { transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out); }
.invito__btn { transition-delay: 180ms; }
.invito__sole { animation: galleggia 5600ms var(--ease-in-out) infinite alternate; }

/* ---- 3 · La laguna scorre più piano della pagina (dove il browser lo sa fare, senza JavaScript) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes parallasse { from { transform: translateY(-4%) scale(1.09); } to { transform: translateY(4%) scale(1.09); } }
    .stagnone__cornice img { animation: parallasse linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* ---- 4 · Col mouse (solo dove c'è un mouse): le foto si avvicinano */
@media (hover: hover) and (pointer: fine) {
  .foto__cornice:hover img { transform: scale(1.04); }
}

/* ---- 5 · Il menu da telefono: le voci arrivano una dopo l'altra; alla chiusura escono subito, insieme */
.menu-telefono li, .menu-telefono__prenota, .menu-telefono__sole {
  opacity: 0; transform: translateY(18px);
  transition: opacity 140ms ease, transform 160ms var(--ease-out);
}
.menu-telefono.aperto li, .menu-telefono.aperto .menu-telefono__prenota, .menu-telefono.aperto .menu-telefono__sole {
  opacity: 1; transform: none;
  transition: opacity 360ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(50ms + var(--n, 0) * 50ms);
}
.menu-telefono li:nth-child(2) { --n: 1; } .menu-telefono li:nth-child(3) { --n: 2; } .menu-telefono li:nth-child(4) { --n: 3; }
.menu-telefono__prenota { --n: 4; } .menu-telefono__sole { --n: 6; }

/* ---- 6 · Il calendario risponde: il mese scorre dal lato giusto, le date scelte si accendono, il totale cambia */
.calendario { overflow-x: clip; overflow-clip-margin: 6px; }
@keyframes mese-da-destra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mese-da-sinistra { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.calendario__griglia.entra-dx { animation: mese-da-destra 260ms var(--ease-out) both; }
.calendario__griglia.entra-sx { animation: mese-da-sinistra 260ms var(--ease-out) both; }
@keyframes giorno-acceso { from { opacity: 0.4; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.giorno.appena { animation: giorno-acceso 260ms var(--ease-out) both; }
@keyframes cifra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cambia { display: inline-block; animation: cifra 280ms var(--ease-out) both; }
.soggiorno__stato:not(:empty) { animation: dissolvi 200ms ease both; }

/* ---- Meno movimento (prefers-reduced-motion): restano le dissolvenze, si tolgono gli spostamenti */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__testo > *, .hero--home .hero__titolo .riga, .fatti li { animation-name: dissolvi; }
  .hero__cornice img { animation: none; }
  .hero__sole { animation: dissolvi 600ms ease 200ms both; }
  .hero__casa li { animation-name: dissolvi; }
  .hero__onda path { animation: none; stroke-dasharray: none; }
  .invito__sole, .prenota__sole, .menu-telefono__sole { animation: none; }
  .js .reveal:not(.reveal-gruppo):not(.foto):not(.invito__fascia), .js .reveal-gruppo > *, .js .foto.reveal figcaption,
  .js .invito__fascia:not(.in) .invito__testo, .js .invito__fascia:not(.in) .invito__btn, .js .foto--pontile.reveal .dintorni__sole { transform: none; }
  .js .foto.reveal .foto__cornice { clip-path: none; opacity: 0; transition: opacity 600ms ease; }
  .foto.reveal.in .foto__cornice { clip-path: none; opacity: 1; }
  .js .reveal .onda path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .invito__fascia.reveal:not(.in) .invito__sfondo { transform: none; }
  .menu-telefono li, .menu-telefono__prenota, .menu-telefono__sole { transform: none !important; }
  .testata.is-nascosta { transform: none; }
  .calendario__griglia.entra-dx, .calendario__griglia.entra-sx { animation-name: dissolvi; }
  .giorno.appena { animation-name: dissolvi; }
  .cambia { animation-name: dissolvi; }
  .foto__cornice img, .btn, .giorno, .campo__valore, .regole li, .servizi img { transition-property: background-color, color, border-color, box-shadow, opacity; }
}

/* =====================================================================================================
   STEP 6-bis · LE PAGINE INTERNE (/la-casa, /la-zona, /domande-frequenti, /contatti), coi pezzi della home;
   rifatte col restyling del 28/10/2026: l'arco nella hero, le fasce sabbia con l'onda, il tramonto da bordo a bordo
   ===================================================================================================== */

/* la voce del menu della pagina in cui si è */
.menu__voci a[aria-current="page"]::after { transform: scaleX(1); }
.menu-telefono nav a[aria-current="page"] { color: var(--rosso); }
.piede__menu a[aria-current="page"] { color: var(--sole); }

/* la hero delle pagine: il titolo grande, la foto nell'arco col sole dietro */
.hero--pagina { isolation: isolate; overflow-x: clip; padding: clamp(8px, 1.6vw, 28px) 0 clamp(12px, 2vw, 32px); }
.hero--pagina::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(1000px, 80vw); aspect-ratio: 1; right: -24vw; top: -30vw;
  background: radial-gradient(closest-side, rgba(243, 169, 81, 0.2), rgba(243, 169, 81, 0.07) 55%, rgba(243, 169, 81, 0));
}
.hero--pagina .hero__griglia { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 4.6vw, 80px); align-items: center; }
.hero--pagina .hero__titolo { font-size: clamp(36px, 4.3vw, 62px); line-height: 1; letter-spacing: -0.024em; margin-bottom: clamp(16px, 1.6vw, 24px); text-wrap: balance; }
.hero--pagina .hero__sotto { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; margin-bottom: 10px; max-width: 30em; }
.hero--pagina .hero__azioni { margin-top: clamp(20px, 2vw, 30px); margin-bottom: 0; }
.hero--pagina .hero__foto { margin: clamp(18px, 2vw, 30px) clamp(8px, 2vw, 24px) 0 0; }
.hero--pagina .hero__cornice { aspect-ratio: 1.45; border-radius: var(--arco); }
/* /la-casa · le cartoline delle stanze sotto la terrazza, come nella home */
.hero--pagina .hero__foto--cartoline { margin-bottom: clamp(56px, 4.6vw, 72px); }

.titolo-sezione--piccolo { font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -0.018em; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; margin-top: clamp(28px, 3vw, 44px); }

/* /la-casa · le stanze, due per riga, la seconda colonna sfalsata */
.stanze__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4.4vw, 72px) clamp(24px, 3.4vw, 56px); align-items: start; }
.stanza:nth-child(even) { margin-top: clamp(0px, 5vw, 88px); }
.stanza .foto { margin-bottom: clamp(16px, 1.6vw, 24px); }
.stanza .foto img { aspect-ratio: 1.45; }
.stanza .titolo-sezione { margin-bottom: 14px; }
.stanza .testo + .testo { margin-top: 12px; }
/* le altre foto della stanza, in fila sotto la foto grande, tutte della stessa altezza */
.stanza__altre { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(8px, 1vw, 14px); margin: calc(-1 * clamp(6px, 0.8vw, 12px)) 0 clamp(18px, 1.8vw, 26px); }
.stanza .stanza__altre .foto { margin-bottom: 0; }
.stanza__altre .foto__cornice { height: clamp(112px, 11vw, 168px); }
.stanza .stanza__altre .foto img { height: 100%; aspect-ratio: auto; }
.stanza__altre .foto--gradini img { object-position: 50% 82%; }
/* le foto della pagina si ingrandiscono al clic (galleria.js) */
.foto__ingrandisci { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; }
.foto__ingrandisci img { display: block; }
.foto__ingrandisci:focus-visible { outline-offset: -4px; border-radius: inherit; }
.lista { margin: 8px 0 18px; }
.lista li { padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--blu); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.35; }
.lista li:first-child { border-top: 1px solid var(--linea); }

/* /la-casa · fuori: il testo, la terrazza e il balcone nell'arco, sulla fascia sabbia */
.casa--fuori { position: relative; background: var(--sabbia); margin-top: clamp(28px, 3.6vw, 64px); }
.casa--fuori .casa__griglia { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.7fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.casa--fuori .casa__testo .titolo-sezione { margin-bottom: 24px; }
.casa--fuori .casa__testo .testo + .testo { margin-top: 14px; }
.casa--fuori .foto--terrazza img { aspect-ratio: 1.15; }
.casa--fuori .casa__piccole { padding-top: 0; }
.casa--fuori .casa__piccole .foto__cornice { border-radius: var(--arco); }
.casa--fuori .casa__piccole .foto img { aspect-ratio: 0.8; object-position: 40% 50%; }

/* /la-casa · i servizi compresi: le icone nei cerchi, quattro in fila */
.compresi .titolo-sezione { margin-bottom: 14px; }
.servizi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(24px, 2.6vw, 40px); }
.servizi--4 li:nth-child(5n + 1) { border-left: 1px solid var(--linea); }
.servizi--4 li:nth-child(4n + 1) { border-left: 0; }

/* /la-casa · la galleria: tre per riga; da telefono una riga che scorre col dito */
.foto-casa { padding-top: 0; }
.foto-casa__testa { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px clamp(40px, 6vw, 112px); align-items: end; }
.galleria-binario { width: 100%; max-width: calc(var(--contenitore) + 2 * var(--margine)); margin: clamp(28px, 3vw, 48px) auto 0; padding-inline: var(--margine); }
.galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.reveal-gruppo > :nth-child(n + 11) { --n: 10; }
.galleria__voce {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--raggio-foto);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 160ms var(--ease-out);
}
.galleria__voce .foto__cornice { display: block; }
.galleria__voce img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sabbia); transition: transform 700ms var(--ease-out); }
.galleria__voce:active { transform: scale(0.97); }
/* da computer quattro per riga, la prima foto grande: cinque righe piene */
@media (min-width: 1101px) {
  .galleria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .galleria li:first-child { grid-column: span 2; grid-row: span 2; }
  .galleria li:first-child .galleria__voce, .galleria li:first-child .foto__cornice { height: 100%; }
  .galleria li:first-child img { height: 100%; aspect-ratio: auto; }
}

/* la foto grande */
.lightbox { padding: 0; border: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(1, 34, 54, 0.94); }
.lightbox[open]::backdrop { animation: dissolvi 240ms ease; }
.lightbox__img { max-width: min(92vw, 1400px); max-height: 82dvh; width: auto; height: auto; object-fit: contain; border-radius: var(--raggio-piccolo); animation: foto-grande 300ms var(--ease-out) both; touch-action: pan-y; }
@keyframes foto-grande { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.lightbox__img.da-destra { animation: mese-da-destra 260ms var(--ease-out) both; }
.lightbox__img.da-sinistra { animation: mese-da-sinistra 260ms var(--ease-out) both; }
.lightbox.chiude .lightbox__img { opacity: 0; transform: scale(0.97); transition: opacity 150ms ease, transform 150ms var(--ease-out); }
.lightbox__conto { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); color: var(--testo-piede); font-size: 15px; font-variant-numeric: tabular-nums; }
.lightbox__tasto, .lightbox__chiudi {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--crema); color: var(--blu);
  display: grid; place-items: center; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform 140ms var(--ease-out);
}
.lightbox__tasto { top: 50%; margin-top: -24px; }
.lightbox__tasto--prima { left: max(12px, 2vw); }
.lightbox__tasto--dopo { right: max(12px, 2vw); }
.lightbox__chiudi { top: max(12px, 2vw); right: max(12px, 2vw); }
.lightbox__tasto:active, .lightbox__chiudi:active { transform: scale(0.94); }
.lightbox__x, .lightbox__x::after { position: absolute; left: 13px; top: 23px; width: 22px; height: 2px; background: var(--blu); border-radius: 2px; transform: rotate(45deg); content: ""; }
.lightbox__x::after { left: 0; top: 0; transform: rotate(90deg); }

/* /la-zona · il kitesurf: il testo e un trittico, l'arco al centro */
.kite__griglia { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(32px, 4.4vw, 80px); align-items: center; }
.kite__testo .titolo-sezione { margin-bottom: 22px; }
.kite__testo .testo + .testo { margin-top: 14px; }
.tre-foto { display: grid; grid-template-columns: 1.1fr 0.9fr 1.1fr; gap: clamp(12px, 1.4vw, 20px); align-items: center; }
.tre-foto img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sabbia); }
.tre-foto__larga img { aspect-ratio: 0.8; }
.tre-foto__alta { border-radius: var(--arco); }
.tre-foto__alta img { aspect-ratio: 0.56; }

/* /la-zona · i dintorni: quattro schede bianche sulla fascia sabbia */
.dintorni-schede { position: relative; background: var(--sabbia); margin-top: clamp(28px, 3.6vw, 64px); }
.schede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.scheda { background: var(--bianco); border-radius: var(--raggio-grande); padding: clamp(22px, 2.2vw, 32px); box-shadow: var(--ombra-scheda); }
.scheda img { width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: var(--sabbia); margin-bottom: 16px; }
.scheda__titolo { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(22px, 1.8vw, 27px); line-height: 1.14; letter-spacing: -0.01em; margin-bottom: 12px; text-wrap: balance; }
.scheda p { font-size: 17px; line-height: 1.55; color: var(--blu-testo); }
.scheda p + p { margin-top: 8px; }

/* 2 Step · le foto del kitesurf della cliente, in home e in /la-zona: una riga di 4, 2 per riga da telefono */
.kite-foto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 3vw, 48px); }
.kite-foto__voce { overflow: hidden; overflow: clip; border-radius: var(--raggio-foto); background: var(--sabbia); }
.kite-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--ease-out); }
.kite-foto__voce:nth-child(3) img { object-position: 50% 64%; }
@media (hover: hover) and (pointer: fine) { .kite-foto__voce:hover img { transform: scale(1.04); } }
@media (max-width: 700px) { .kite-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; } }

/* 2 Step · /la-zona con cinque schede (Mozia in più): 3 + 2 da computer, la prima intera da tablet e telefono */
@media (min-width: 1101px) {
  .schede--cinque { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .schede--cinque > li { grid-column: span 2; }
  .schede--cinque > li:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 1100px) { .schede--cinque > li:first-child { grid-column: 1 / -1; } }
/* 3 Step · /la-zona con sei schede (l'aeroporto per primo): 3 + 3 da computer; da tablet 2 per riga, da telefono una */
@media (min-width: 1101px) { .schede--sei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* la fascia finale di notte (/la-zona): la stessa della home, con la foto del porticciolo */
.invito__fascia--notte { background: var(--blu-notte); }
.invito__fascia--notte::before { background: linear-gradient(90deg, rgba(1, 30, 50, 0.88) 0%, rgba(1, 30, 50, 0.62) 50%, rgba(1, 30, 50, 0.25) 100%); }
.invito__fascia--notte .invito__testo .titolo-sezione { font-size: clamp(32px, 3.6vw, 52px); max-width: 15em; }
.invito__fascia--notte .invito__testo .titolo-sezione, .invito__fascia--notte .invito__testo p { color: var(--bianco); }
.invito__testo p + p { margin-top: 8px; }
.invito__telefono a { white-space: nowrap; }
.invito__azioni { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.js .invito__fascia:not(.in) .invito__azioni { opacity: 0; transform: translateY(28px); }
.invito__azioni { transition: opacity 900ms var(--ease-out) 180ms, transform 1000ms var(--ease-out) 180ms; }

/* /domande-frequenti · i 4 passaggi: quattro schede numerate */
.passi { list-style: none; counter-reset: passo; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(24px, 2.6vw, 40px) 0 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.passi li {
  counter-increment: passo; position: relative; align-items: flex-start; text-align: left; gap: 18px;
  padding: clamp(22px, 2.2vw, 32px); border-radius: var(--raggio-grande); background: var(--bianco); box-shadow: var(--ombra-scheda);
}
.passi li::before { content: counter(passo, decimal-leading-zero); position: absolute; top: clamp(26px, 2.4vw, 38px); right: clamp(24px, 2.4vw, 36px); font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 2.6vw, 42px); line-height: 1; color: var(--sole); }
.passi li, .passi li:nth-child(5n + 1) { border-left: 0; }
.passi span { max-width: 15em; }

/* /domande-frequenti · le domande, a fisarmonica, sempre leggibili */
.faq { padding-top: 0; }
.faq__gruppo { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 16px clamp(24px, 4.4vw, 80px); padding: clamp(30px, 3.2vw, 52px) 0; border-top: 1px solid var(--linea); }
.faq__gruppo:first-child { border-top: 0; padding-top: 0; }
.faq__titolo { position: sticky; top: 120px; align-self: start; }
.faq__link { grid-column: 2; justify-self: start; margin-top: 8px; }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary {
  display: flex; align-items: center; gap: 14px; padding: 15px 4px; cursor: pointer; list-style: none; color: var(--blu);
  font-size: clamp(18px, 1.45vw, 21px); font-weight: 600; line-height: 1.3; -webkit-user-select: none; user-select: none;
  transition: color 160ms ease, transform 140ms var(--ease-out);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary img { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--sabbia); flex: none; }
.domanda__testo { flex: 1; }
.domanda summary .chevron { transition: transform 260ms var(--ease-out); }
.domanda[open] summary .chevron { transform: rotate(180deg); }
.domanda summary:active { transform: scale(0.99); }
.domanda__risposta { padding: 0 4px 20px 58px; color: var(--blu-testo); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.domanda[open] .domanda__risposta { animation: risposta 320ms var(--ease-out); }
@keyframes risposta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.domanda__risposta a { color: var(--rosso); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .domanda summary:hover { color: var(--rosso); } }

/* /contatti */
.dove__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.dove__testo .titolo-sezione { margin-bottom: 18px; }
address.luogo { font-style: normal; }
.dove__testo .testo { margin-bottom: 22px; }
.come li { grid-template-columns: 80px 1fr; grid-template-rows: none; align-items: start; }
.come li > * { grid-column: 2; }
.come li > img { grid-column: 1; grid-row: 1 / span 3; }
.come__titolo { font-family: var(--serif); font-weight: 600; color: var(--blu); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.01em; margin: 6px 0 8px; }
.come p { font-size: 17px; color: var(--blu-testo); line-height: 1.55; }
.come p + p { margin-top: 6px; }
.recapiti { padding-top: 0; }
.recapiti__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.recapito { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; border-radius: var(--raggio-grande); box-shadow: var(--ombra-scheda); }
.recapito:first-child { background: var(--sabbia); box-shadow: inset 0 0 0 1px var(--sabbia-bordo); }
.recapito .btn { margin-top: auto; }
/* collaudo del 30/10/2026: a 320 px i pulsanti dei riquadri non escono di lato */
.recapito { min-width: 0; }
.recapito .btn { max-width: 100%; white-space: normal; text-align: center; }
.recapito__orari li { display: flex; align-items: center; gap: 14px; color: var(--blu); font-size: clamp(19px, 1.6vw, 23px); padding: 6px 0; }
.recapito__orari img { width: 40px; height: 40px; flex: none; }
.recapito__numero a { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 3.2vw, 48px); letter-spacing: -0.01em; color: var(--blu); text-decoration: none; font-variant-numeric: tabular-nums; }
.codici { padding: 0 0 var(--sezione); }
.codici__titolo { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--blu); margin-bottom: 4px; }
.codici p, .codici li { font-size: 15px; color: var(--blu-testo); line-height: 1.6; }

/* tablet */
@media (max-width: 1100px) {
  .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kite__griglia { grid-template-columns: 1fr; }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casa--fuori .casa__griglia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .casa--fuori .casa__testo { grid-column: 1 / -1; }
  .foto-casa__testa { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero--pagina .hero__griglia { grid-template-columns: 1fr; }
  .hero--pagina .hero__foto { margin: 12px 10px 0 0; }
  .hero--pagina .hero__foto--cartoline { margin-bottom: 64px; }
  .faq__gruppo { grid-template-columns: 1fr; }
  .faq__titolo { position: static; }
  .faq__link { grid-column: 1; }
  .dove__griglia { grid-template-columns: 1fr; }
}
/* telefono */
@media (max-width: 700px) {
  .hero--pagina { padding-bottom: 16px; }
  .hero--pagina .hero__titolo { font-size: clamp(32px, 9.4vw, 40px); line-height: 1.04; }
  .hero--pagina .hero__sotto { font-size: 18px; }
  .hero--pagina .hero__foto { margin-top: 20px; }
  .hero--pagina .hero__sole { width: 64px; }
  .stanze__griglia { grid-template-columns: 1fr; gap: 44px; }
  .stanza:nth-child(even) { margin-top: 0; }
  .casa--fuori .casa__griglia { grid-template-columns: 1fr 1fr; gap: 12px; }
  .casa--fuori .casa__testo { margin-bottom: 28px; }
  .casa--fuori .foto--terrazza { grid-column: auto; }
  .casa--fuori .casa__piccole { grid-column: auto; grid-template-columns: 1fr; }
  .casa--fuori .foto--terrazza img, .casa--fuori .casa__piccole .foto img { aspect-ratio: 0.7; }
  .servizi--4 { grid-template-columns: 1fr 1fr; }
  :root:not([lang="it"]) .servizi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria-binario { padding-inline: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margine); overscroll-behavior-x: contain; scrollbar-width: none; }
  .galleria-binario::-webkit-scrollbar { display: none; }
  .galleria { display: flex; gap: 12px; padding-inline: var(--margine); width: max-content; }
  .galleria li { width: 80vw; flex: none; scroll-snap-align: start; }
  .tre-foto { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scroll-padding-inline: var(--margine); scrollbar-width: none; }
  .tre-foto::-webkit-scrollbar { display: none; }
  .tre-foto > * { flex: none; height: 300px; scroll-snap-align: start; }
  .tre-foto img { width: auto; height: 100%; }
  .schede { grid-template-columns: 1fr; }
  .invito__fascia--notte::before { background: linear-gradient(180deg, rgba(1, 30, 50, 0.86) 0%, rgba(1, 30, 50, 0.72) 100%); }
  .invito__fascia--notte { padding-top: 40px; }
  .invito__fascia--notte .invito__testo .titolo-sezione { font-size: clamp(30px, 8.6vw, 36px); }
  .invito__azioni { align-items: stretch; width: 100%; }
  .invito__azioni .btn { width: 100%; }
  .invito__azioni .link-freccia { align-self: flex-start; }
  .passi { grid-template-columns: 1fr; }
  /* 9-ter, audit M1: il numero 01-04 sta in alto a destra, il testo gli lascia il suo spazio (anche in italiano «soggiorno»
     e «online» toccavano «02» e «03» a 320 px) */
  .passi li { padding-right: 68px; }
  .domanda summary { padding: 16px 2px; gap: 12px; }
  .domanda summary img { width: 40px; height: 40px; padding: 9px; }
  .domanda__risposta { padding-left: 54px; }
  .come li { grid-template-columns: 64px 1fr; }
  .recapiti__griglia { grid-template-columns: 1fr; }
  .recapito .btn { width: 100%; }
}

/* meno movimento, anche nelle pagine interne */
@media (prefers-reduced-motion: reduce) {
  .lightbox__img, .lightbox__img.da-destra, .lightbox__img.da-sinistra { animation-name: dissolvi; }
  .domanda[open] .domanda__risposta { animation-name: dissolvi; }
  .js .invito__fascia:not(.in) .invito__azioni { transform: none; }
}

/* ---------- Le lingue (step 9-ter): il menù a tendina del kit (/assets/thk/lingue.css) nello stile del sito ----------
   Chiuso: la pastiglia «IT ▾», blu su crema come le voci del menu, sempre in vista anche da telefono (fra il logo e il
   pulsante del menu). Aperto: la scheda bianca coi bordi sabbia del calendario, la lingua della pagina in rosso. Le
   variabili sono quelle del kit: il file del kit non si tocca. */
details.lingue {
  --thk-lingue-pulsante-testo: var(--blu);
  --thk-lingue-pulsante-fondo: transparent;
  --thk-lingue-bordo: rgba(4, 58, 117, 0.24);
  --thk-lingue-raggio: 999px;
  --thk-lingue-fuoco: var(--rosso);
  --thk-lingue-fondo: var(--bianco);
  --thk-lingue-testo: var(--blu-testo);
  --thk-lingue-raggio-elenco: var(--raggio);
  --thk-lingue-evidenza: var(--sabbia);
  font-family: var(--sans);
}
details.lingue > summary {
  gap: 8px; padding: 0 14px 0 16px; font-size: 15px; letter-spacing: 0.06em;
  transition: background-color 200ms ease, border-color 200ms ease;
}
details.lingue[open] > summary { background: var(--sabbia); border-color: var(--sabbia-bordo); }
details.lingue > ul {
  min-width: 190px; padding: 6px;
  box-shadow: 0 0 0 1px var(--sabbia-bordo), 0 26px 48px -22px rgba(4, 58, 117, 0.42);
  transform-origin: top right;
}
details.lingue[data-thk-lingue-lato="sinistra"] > ul { transform-origin: top left; }
details.lingue > ul a { gap: 10px; font-size: 16px; font-weight: 500; color: var(--blu-testo); }
details.lingue > ul a[aria-current="true"] { color: var(--rosso); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  details.lingue > summary:hover { background: var(--sabbia); border-color: var(--sabbia-bordo); }
}
@media (prefers-reduced-motion: no-preference) {
  details.lingue[open] > ul { animation: lingue-apri 180ms var(--ease-out); }
}
@keyframes lingue-apri { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  details.lingue > summary { padding: 0 12px 0 13px; font-size: 14px; }
}

/* La riga in cima alle pagine legali tradotte: «In caso di differenze prevale il testo italiano» (step 9-ter) */
.legale .legale__prevale {
  margin: 0 0 22px; padding: 12px 16px; border-radius: var(--raggio-piccolo);
  background: var(--sabbia); box-shadow: inset 0 0 0 1px var(--sabbia-bordo);
  font-size: 16px; line-height: 1.5; color: var(--blu-testo);
}

/* 9-ter, audit L2: nelle altre lingue una dotazione lunga (il tedesco «Privatparkplatz», anche a 768 px) va a capo con la
   sillabazione della lingua della pagina (<html lang>); l'italiano resta com'era */
:root:not([lang="it"]) .servizi:not(.passi) span { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }