/* Trapani d'Amare Apartments — home (step 5)
   Design: Design/kit/design-trapani-damare-apartments/home-approvata.png
   Colori misurati sul design (confronta-design.py --colori e campioni sulle sezioni del kit).
   Carattere: Figtree (il kit non ha i font; il più vicino a quello del design), servito dal sito. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --notte: #002144;        /* fondo della sera e del piè di pagina */
  --blu: #052F5A;          /* pulsante «Chiedi disponibilità» */
  --inchiostro: #002868;   /* titoli */
  --testo: #1F4A8A;        /* testo */
  --tenue: #3864A0;        /* occhielli, note */
  --mare: #0074C8;         /* «Giorno» attivo, date scelte */
  --filo: #0C98F8;         /* il filo del viaggio, le tappe */
  --filo-chiaro: #64C4FC;  /* le linee fra le tappe */
  --divisore: #8CD4FC;     /* divisori del comfort */
  --cielo: #E9F6FE;        /* fasce azzurre */
  --bianco: #FFFFFF;
  --azzurro: #0484E4;      /* «Chiamaci» */
  --bordo: #CFE6F5;        /* bordi di schede e campi */
  --sera: #78B8D4;         /* occhiello sul blu notte */

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gx: clamp(20px, 4.45vw, 64px);
  --tappa: 56px;
  --rientro: 80px;
  --raggio: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* entrate e uscite (Emil Kowalski) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* cose che si spostano sullo schermo */
  --testata-h: 80px;
  --testata-su: -29px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--testo);
  background: var(--bianco);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--inchiostro); font-weight: 500; letter-spacing: -0.02em; line-height: 1.06; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button, .btn, label { touch-action: manipulation; }
button, .btn, .testata__menu a, .mese__freccia, .tappe__voce { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--filo); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bianco); color: var(--inchiostro); padding: 10px 16px; border-radius: 8px; }
.salta:focus { top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-left: max(var(--gx), env(safe-area-inset-left, 0px)); padding-right: max(var(--gx), env(safe-area-inset-right, 0px)); }

/* ── Icone del kit (04-icone), colorate col testo ── */
.ico {
  display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.12em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.ico--diagonale { --m: url("/assets/icone/freccia-diagonale.png"); }
.ico--destra { --m: url("/assets/icone/freccia-destra.png"); }
.ico--giu { --m: url("/assets/icone/freccia-giu.png"); }
.ico--sinistra { --m: url("/assets/icone/chevron-sinistra.png"); }
.ico--destra-chevron { --m: url("/assets/icone/chevron-destra.png"); }
.ico--chevron-giu { --m: url("/assets/icone/chevron-destra.png"); transform: rotate(90deg); }
.ico--calendario { --m: url("/assets/icone/calendario.png"); }
.ico--ospite { --m: url("/assets/icone/ospite.png"); }
.ico--spiaggia { --m: url("/assets/icone/spiaggia.png"); }
.ico--casa { --m: url("/assets/icone/casa.png"); }
.ico--letto { --m: url("/assets/icone/letto.png"); }
.ico--cucina { --m: url("/assets/icone/cucina.png"); }
.ico--sole { --m: url("/assets/icone/sole.png"); }
.ico--luna { --m: url("/assets/icone/luna.png"); }
.ico--parcheggio { --m: url("/assets/icone/parcheggio.png"); }
.ico--ricarica { --m: url("/assets/icone/ricarica-elettrica.png"); }
.ico--wifi { --m: url("/assets/icone/wifi.png"); }
.ico--aria { --m: url("/assets/icone/aria-condizionata.png"); }
.ico--lavatrice { --m: url("/assets/icone/lavatrice.png"); }
.ico--transfer { --m: url("/assets/icone/transfer-aeroporto.png"); }
.ico--barca { --m: url("/assets/icone/barca.png"); }
.ico--whatsapp { --m: url("/assets/icone/whatsapp.png"); }
.ico--telefono { --m: url("/assets/icone/telefono.png"); }
/* tre icone che il kit non ha, disegnate come le sue (2 Step, 27/10): riscaldamento a pavimento, addolcitore, funivia */
.ico--riscaldamento { --m: url("/assets/icone/riscaldamento.png"); }
.ico--goccia { --m: url("/assets/icone/goccia.png"); }
.ico--funivia { --m: url("/assets/icone/funivia.png"); }
/* 3 Step: disegnate come quelle del kit (linea 3,5 px, estremi tondi) */
.ico--tazzina { --m: url("/assets/icone/tazzina.png"); }
.ico--instagram { --m: url("/assets/icone/instagram.png"); }
.ico--facebook { --m: url("/assets/icone/facebook.png"); }

/* ── Pulsanti (06-elementi-ui) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 18px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn .ico--diagonale { width: .64em; height: .64em; }
.btn--blu { background: var(--blu); color: var(--bianco); }
.btn--linea { border-color: currentColor; color: var(--bianco); background: transparent; }
.btn--linea-chiara { border-color: var(--bianco); color: var(--bianco); background: transparent; }
.btn--wa { border-color: #1FA855; color: #138A43; background: var(--bianco); }   /* verde del pulsante WhatsApp del kit */
.btn--wa .ico--whatsapp { width: 1.35em; height: 1.35em; color: #1FA855; }
.btn--chiama { border-color: var(--azzurro); color: var(--azzurro); background: var(--bianco); }
.btn--chiama .ico--telefono { width: 1.2em; height: 1.2em; }
@media (hover: hover) and (pointer: fine) {
  .btn--blu:hover { background: var(--inchiostro); }
  .btn--linea:hover, .btn--linea-chiara:hover { background: var(--bianco); color: var(--inchiostro); }
  .btn--wa:hover { background: #F1FBF5; }
  .btn--chiama:hover { background: var(--cielo); }
}

.occhiello { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.occhiello--chiaro { color: var(--bianco); letter-spacing: .26em; }
.occhiello--sera { color: var(--sera); }
.testo { font-size: 20px; line-height: 1.48; color: var(--testo); }

.link-freccia {
  display: inline-flex; align-items: center; gap: .4em; padding: 6px 0 3px;
  font-size: 18px; font-weight: 600; color: var(--inchiostro); text-decoration: none;
  border-bottom: 1.5px solid var(--inchiostro);
}
.link-freccia .ico { width: .62em; height: .62em; transition: transform .2s var(--ease-out); }
.link-freccia .ico--giu { width: .6em; height: .74em; }
@media (hover: hover) and (pointer: fine) {
  .link-freccia:hover { color: var(--mare); border-color: var(--mare); }
  .link-freccia:hover .ico--diagonale { transform: translate(2px, -2px); }
  .link-freccia:hover .ico--giu { transform: translateY(2px); }
}

/* ── Il filo del viaggio e le tappe (05-dettagli) ── */
.filo { position: absolute; pointer-events: none; border: 0 solid var(--filo); }
.tappa {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: grid; place-items: center; width: var(--tappa); height: var(--tappa);
  border: 2px solid var(--filo); border-radius: 50%; background: var(--bianco);
  font-size: 21px; font-weight: 700; color: var(--inchiostro); letter-spacing: 0;
}
.tappa--icona { background: var(--cielo); color: var(--inchiostro); }
.tappa--icona .ico { width: 28px; height: 28px; }
.tappa--chiara { background: var(--notte); border-color: var(--bianco); color: var(--bianco); }
.cerchio-freccia {
  display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.cerchio-freccia .ico { width: 36px; height: 36px; }

/* ══ TESTATA ══ */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); color: var(--bianco); transition: color .25s ease; }
.testata::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--testata-h) + env(safe-area-inset-top, 0px)); background: var(--bianco); box-shadow: 0 8px 30px rgba(0, 33, 68, .08); opacity: 0; transform: translateY(-100%); transition: opacity .2s ease, transform .3s var(--ease-out); pointer-events: none; }
.testata.is-scorrendo::before { opacity: 1; transform: none; transition: opacity .25s ease, transform .45s var(--ease-out); }
.testata__barra { position: relative; display: flex; align-items: center; gap: 24px; max-width: 1440px; margin-inline: auto; padding: 16px max(var(--gx), env(safe-area-inset-right, 0px)) 16px max(calc(var(--gx) - 16px), env(safe-area-inset-left, 0px)); }
.testata__logo { flex: none; display: block; padding: 6px 14px; background: var(--bianco); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 20, 50, .18); transform-origin: 0 0; transition: transform .45s var(--ease-out), box-shadow .25s ease; }
.testata__menu, .testata__azioni { transition: transform .45s var(--ease-out); }
.testata.is-scorrendo .testata__logo { transform: translateY(-8px) scale(.62); box-shadow: none; }
.testata.is-scorrendo .testata__menu, .testata.is-scorrendo .testata__azioni { transform: translateY(var(--testata-su)); }
.testata__logo img { width: 214px; height: auto; }
.testata__menu { display: flex; gap: 22px; margin-left: auto; }
.testata__menu a { font-size: 15.5px; text-decoration: none; padding: 10px 0; position: relative; white-space: nowrap; }
.testata__menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .testata__menu a:hover::after { transform: scaleX(1); } }
.testata__azioni { display: flex; align-items: center; gap: 14px; }
.testata__scrivici { min-height: 56px; padding: 0 30px; font-size: 18px; font-weight: 400; margin-left: 12px; }
.lingue-posto:empty { display: none; }
.testata details.lingue {   /* il menù delle lingue (9-ter): la tendina del kit (/assets/thk/lingue.css) nello stile della testata */
  --thk-lingue-fondo: var(--bianco); --thk-lingue-testo: var(--inchiostro); --thk-lingue-evidenza: var(--cielo);
  --thk-lingue-fuoco: currentColor; --thk-lingue-raggio-elenco: var(--raggio); font-family: var(--font);
}
.testata details.lingue > summary {
  min-height: 48px; padding: 0 16px 0 18px; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: .06em;
  color: var(--bianco); background: transparent; border: 1.5px solid currentColor;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform 160ms var(--ease-out);
}
.testata details.lingue > summary:active { transform: scale(.97); }
.testata.is-scorrendo details.lingue > summary { color: var(--inchiostro); }
.testata details.lingue[open] > summary { color: var(--inchiostro); background: var(--bianco); border-color: var(--bianco); }
.testata.is-scorrendo details.lingue[open] > summary { border-color: var(--bordo); }
@media (hover: hover) and (pointer: fine) {
  .testata details.lingue > summary:hover { color: var(--inchiostro); background: var(--bianco); border-color: var(--bianco); }
  .testata.is-scorrendo details.lingue > summary:hover { color: var(--bianco); background: var(--inchiostro); border-color: var(--inchiostro); }
}
.testata details.lingue > ul {
  top: calc(100% + 10px); min-width: 12.5em; padding: 6px; border: 1px solid var(--bordo);
  box-shadow: 0 18px 44px rgba(0, 33, 68, .16), 0 2px 6px rgba(0, 33, 68, .06);
  transform-origin: top right; animation: lingue-apri .22s var(--ease-out);
}
.testata details.lingue[data-thk-lingue-lato="sinistra"] > ul { transform-origin: top left; }
.testata details.lingue > ul a { font-size: 16px; font-weight: 500; color: var(--inchiostro); border-radius: 10px; }
.testata details.lingue > ul a[aria-current="true"] { color: var(--mare); font-weight: 700; }
@keyframes lingue-apri { from { opacity: .5; transform: translateY(-4px) scale(.97); } }   /* mai invisibile: su un telefono lento l'elenco si legge subito */
@media (prefers-reduced-motion: reduce) { .testata details.lingue > ul { animation: none; } }
@media (max-width: 1279px) {   /* telefono e tablet: una pastiglia bianca accanto al pulsante del menu, come lui */
  .testata details.lingue > summary { color: var(--inchiostro); background: var(--bianco); border-color: transparent; box-shadow: 0 6px 20px rgba(0, 20, 50, .16); padding: 0 14px 0 16px; }
  .testata.is-scorrendo details.lingue > summary { box-shadow: 0 0 0 1.5px var(--bordo); }
  .testata.is-scorrendo details.lingue[open] > summary, .testata details.lingue[open] > summary { border-color: transparent; }
}
.testata__apri { display: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bianco); cursor: pointer; padding: 0; place-items: center; align-content: center; gap: 5px; box-shadow: 0 6px 20px rgba(0, 20, 50, .16); }
.testata__apri { transition: transform 160ms var(--ease-out), box-shadow .25s ease; }
.testata__apri:active { transform: scale(.94); }
.testata__apri span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--inchiostro); transition: transform .25s 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); }
.testata.is-scorrendo { color: var(--inchiostro); }
.testata.is-scorrendo .testata__scrivici { color: var(--inchiostro); }
.testata.is-scorrendo .testata__apri { box-shadow: 0 0 0 1.5px var(--bordo); }
@media (hover: hover) and (pointer: fine) { .testata.is-scorrendo .btn--linea:hover { background: var(--inchiostro); color: var(--bianco); border-color: var(--inchiostro); } }

.menu-telefono { visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
.menu-telefono.aperto { visibility: visible; opacity: 1; transition: opacity .3s ease, visibility 0s; }
.menu-telefono nav a, .menu-telefono__azioni .btn { opacity: 0; transform: translateY(18px); transition: opacity .15s ease, transform .15s var(--ease-out), background-color .2s ease; }
.menu-telefono.aperto nav a, .menu-telefono.aperto .menu-telefono__azioni .btn { opacity: 1; transform: none; transition: opacity .4s ease, transform .5s var(--ease-out), background-color .2s ease; transition-delay: calc(80ms + var(--i, 0) * 45ms); }
.menu-telefono.aperto .menu-telefono__azioni .btn:active { transform: scale(.97); transition-delay: 0s; }
@media (min-width: 1280px) { .menu-telefono { display: none; } }
@media (max-width: 1279px) {
  .testata__menu, .testata__scrivici { display: none; }
  .testata__apri { display: grid; }
  .testata__azioni { margin-left: auto; }
}
.menu-telefono { position: fixed; inset: 0; z-index: -1; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--bianco); color: var(--inchiostro); padding: calc(110px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.menu-telefono nav { display: grid; }
.menu-telefono nav a { font-size: 26px; font-weight: 500; letter-spacing: -.02em; text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--bordo); }
.menu-telefono nav a:active { color: var(--mare); }
.menu-telefono__azioni { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 768px) { .menu-telefono nav, .menu-telefono__azioni { max-width: 560px; } }

/* ══ HERO ══ */
.hero { position: relative; height: clamp(560px, 100svh, 772px); overflow: hidden; color: var(--bianco); background: var(--notte); }
.hero__foto { position: absolute; inset: 0; display: block; overflow: hidden; will-change: transform; }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(0, 18, 40, .62) 0%, rgba(0, 18, 40, .34) 34%, rgba(0, 18, 40, 0) 62%),
  linear-gradient(0deg, rgba(0, 18, 40, .55) 0%, rgba(0, 18, 40, 0) 38%),
  linear-gradient(180deg, rgba(0, 18, 40, .45) 0%, rgba(0, 18, 40, 0) 22%); }
/* la villetta di giorno in alto (2 Step, segnaposto finché arriva quella col tramonto): il titolo resta leggibile sul bianco */
.hero--giorno::before { background:
  linear-gradient(90deg, rgba(0, 18, 40, .72) 0%, rgba(0, 18, 40, .44) 38%, rgba(0, 18, 40, 0) 66%),
  linear-gradient(0deg, rgba(0, 18, 40, .66) 0%, rgba(0, 18, 40, 0) 46%),
  linear-gradient(180deg, rgba(0, 18, 40, .45) 0%, rgba(0, 18, 40, 0) 22%); }
.hero__testo { position: absolute; z-index: 2; max-width: 1000px; left: max(calc(var(--gx) - 8px), calc((100vw - 1440px) / 2 + var(--gx) - 8px), env(safe-area-inset-left, 0px)); bottom: 36px; padding-right: var(--gx); }
.hero .occhiello { font-size: 14px; margin-bottom: 14px; }
.hero h1 { color: var(--bianco); font-size: clamp(42px, 5.6vw, 82px); font-weight: 400; line-height: .98; letter-spacing: -.03em; }
.hero__sotto { margin-top: 12px; max-width: 760px; font-size: clamp(18px, 1.6vw, 23px); }
.hero__entra { position: relative; display: inline-flex; align-items: center; gap: 22px; margin-top: 26px; font-size: 21px; font-weight: 500; text-decoration: none; }
.hero__entra .cerchio-freccia { background: rgba(0, 18, 40, .18); transition: background-color .25s ease, color .25s ease; }
.hero__entra .cerchio-freccia::after { content: ""; position: absolute; left: 35px; top: 72px; width: 2px; height: 60px; background: var(--filo); }
@media (hover: hover) and (pointer: fine) { .hero__entra:hover .cerchio-freccia { background: var(--bianco); color: var(--inchiostro); } }
.hero__entra:active .cerchio-freccia { transform: scale(.96); }
.hero__scorri { position: absolute; z-index: 2; right: max(var(--gx), env(safe-area-inset-right, 0px)); bottom: 44px; display: flex; align-items: center; gap: 8px; font-size: 19px; text-decoration: none; }
.hero__scorri span { font-weight: 600; }
.hero__scorri .ico { width: .6em; height: .74em; }
/* 3 Step: le foto in alto scorrono (dissolvenza lenta); frecce nei cerchi come «Richiedi la disponibilità», pallini */
.hero__foto .hero__slide { object-position: var(--pos, 50% 58%); opacity: 0; transition: opacity 1.4s var(--ease-in-out); }
.hero__foto .hero__slide.is-attiva { opacity: 1; }
.hero__comandi { position: absolute; z-index: 3; right: max(var(--gx), env(safe-area-inset-right, 0px)); bottom: 104px; display: flex; align-items: center; gap: 12px; }
.hero__freccia { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: rgba(0, 18, 40, .18); color: var(--bianco); cursor: pointer; transition: background-color .25s ease, color .25s ease, transform 160ms var(--ease-out); }
.hero__freccia .ico { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .hero__freccia:hover { background: var(--bianco); color: var(--inchiostro); } }
.hero__freccia:active { transform: scale(.96); }
.hero__pallini { display: flex; }
.hero__pallino { position: relative; width: 26px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero__pallino::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: 0 1px 4px rgba(0, 18, 40, .35); transition: width .35s var(--ease-out), margin .35s var(--ease-out), background-color .25s ease; }
.hero__pallino[aria-current="true"]::before { width: 22px; margin-left: -11px; background: var(--bianco); }
.hero__freccia:focus-visible, .hero__pallino:focus-visible { outline: 2px solid var(--bianco); outline-offset: 2px; }

/* ══ CALENDARIO ══ */
.cal { position: relative; background: var(--cielo); }
.cal__wrap { display: grid; grid-template-columns: minmax(0, 1fr) 408px; gap: 32px; padding-top: 18px; padding-bottom: 22px; }
.cal__main { --rientro: 74px; }
.cal__main { position: relative; align-self: start; padding-left: var(--rientro); padding-top: 52px; }
.filo--cal { left: calc(var(--tappa) / 2 - 1px); top: -18px; bottom: 15px; width: calc(var(--rientro) - var(--tappa) / 2 + 2px); border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 34px; }
.cal .tappa--icona { top: 46px; }
.cal__testa { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.cal h2 { font-size: clamp(30px, 2.8vw, 41px); font-weight: 400; color: var(--inchiostro); }
.cal__testa { display: block; }
.cal__intro { margin-top: 8px; max-width: 720px; font-size: 17px; line-height: 1.45; color: var(--testo); }
.cal__sconto { flex-basis: 100%; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--inchiostro); }
.cal__sconto::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--filo); }
.scelta-casa__etichetta { margin: 0 0 6px 4px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.mese__notti { font-weight: 600; color: var(--inchiostro); }
.scelta-casa { position: relative; display: flex; margin: 0 0 10px; padding: 4px; border: 1.5px solid var(--bordo); border-radius: 999px; background: var(--bianco); }
.scelta-casa label { position: relative; z-index: 1; flex: 1; text-align: center; cursor: pointer; }
.scelta-casa label:active span { transform: scale(.97); }
.scelta-casa input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scelta-casa span { display: block; padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--testo); transition: background-color .2s ease, color .25s ease, transform 160ms var(--ease-out); }
.scelta-casa input:checked + span { background: var(--mare); color: var(--bianco); }
@supports selector(:has(*)) {
  .scelta-casa::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--mare); transition: transform .4s var(--ease-in-out); }
  .scelta-casa:has(input[value="appartamento"]:checked)::before { transform: translateX(100%); }
  .scelta-casa input:checked + span { background: transparent; }
}
.scelta-casa input:focus-visible + span { outline: 2px solid var(--filo); outline-offset: 2px; }

.cal__form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.campo { position: relative; display: block; flex: 0 1 168px; min-width: 140px; height: 70px; padding: 12px 44px 0 20px; background: var(--bianco); border: 1.5px solid var(--bordo); border-radius: 10px; cursor: pointer; transition: border-color .2s ease; }
.campo:focus-within { border-color: var(--filo); }
.campo__etichetta { display: block; font-size: 14px; line-height: 1.2; color: var(--tenue); }
.campo input, .campo select { display: block; width: 100%; margin-top: 4px; padding: 0; border: 0; background: transparent; font: 400 16px/1.3 var(--font); font-size: 16px; color: var(--inchiostro); -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; min-height: 24px; }
.campo input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.campo input::-webkit-date-and-time-value { text-align: left; }
.campo__ico { position: absolute; right: 16px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: var(--inchiostro); pointer-events: none; }
.campo--ospiti { padding-left: 56px; }
.campo__persona { position: absolute; left: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; color: var(--inchiostro); }
.campo--ospiti .campo__ico { width: 14px; height: 14px; margin-top: -7px; }
.cal__invia { min-height: 62px; padding: 0 30px; font-size: 19px; margin-left: 4px; }
.cal__messaggio { flex-basis: 100%; min-height: 0; font-size: 15px; color: var(--inchiostro); }
.cal__messaggio:empty { display: none; }
.cal__messaggio.errore { color: #B3261E; }
.nota-privacy { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--tenue); }
.nota-privacy a { color: var(--inchiostro); }

.tappe { display: flex; align-items: center; margin-top: 18px; }
.tappe li { display: flex; align-items: center; }
.tappe li + li { flex: 1 1 0; }
.tappe li + li::before { content: ""; flex: 1 1 auto; min-width: 20px; height: 1.5px; margin: 0 14px; background: var(--filo-chiaro); }
.tappe__voce { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; color: var(--inchiostro); text-decoration: none; white-space: nowrap; min-height: 32px; }
.tappe__voce b { font-weight: 600; }
.tappe__punto { width: 22px; height: 22px; border: 1.5px solid var(--inchiostro); border-radius: 50%; background: var(--cielo); position: relative; }
.tappe__voce.is-attiva .tappe__punto { border-color: var(--mare); }
.tappe__voce.is-attiva .tappe__punto::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--inchiostro); }
.tappe__voce.is-attiva b { font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .tappe__voce:hover { color: var(--mare); } }

.cal__lato { align-self: start; padding-top: 0; }
.mese { background: var(--bianco); border: 1px solid var(--bordo); border-radius: 12px; padding: 10px 14px 10px; box-shadow: 0 10px 30px rgba(0, 60, 120, .06); }
.mese__testa { display: flex; align-items: center; justify-content: space-between; }
.mese__nome { font-size: 19px; font-weight: 600; color: var(--inchiostro); }
.mese__freccia { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--inchiostro); cursor: pointer; }
.mese__freccia .ico { width: 13px; height: 13px; }
.mese__freccia:disabled { opacity: .25; cursor: default; }
@media (hover: hover) and (pointer: fine) { .mese__freccia:not(:disabled):hover { background: var(--cielo); } }
.mese__griglia { display: grid; grid-template-columns: repeat(7, 1fr); }
.mese__giorno-nome { padding: 2px 0 6px; font-size: 13px; text-align: center; color: var(--tenue); }
.giorno { position: relative; height: 31px; padding: 0; border: 0; border-top: 1px solid #EEF5FA; background: transparent; font-size: 14px; font-weight: 600; color: var(--inchiostro); cursor: pointer; font-variant-numeric: tabular-nums; }
.giorno:empty { cursor: default; }
.giorno span { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; transition: background-color .15s ease; }
.giorno.passato { color: #A9BCD2; cursor: default; font-weight: 500; }
.giorno.occupato { color: #93A9C2; cursor: not-allowed; font-weight: 500; }
.giorno.occupato span { text-decoration: line-through; text-decoration-color: #93A9C2; }
.giorno.nel-periodo::before { content: ""; position: absolute; inset: 3px 0; background: rgba(12, 152, 248, .16); }
.giorno.arrivo span, .giorno.partenza span { background: var(--mare); color: var(--bianco); }
.giorno.arrivo::before { left: 50%; }
.giorno.partenza::before { right: 50%; }
@media (hover: hover) and (pointer: fine) { .giorno:not(:disabled):not(.arrivo):not(.partenza):hover span { background: var(--cielo); } }
.giorno:not(:disabled):active span { transform: scale(.94); }
.mese__legenda { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--tenue); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.punto--libero { background: var(--bianco); border: 1.5px solid var(--inchiostro); }
.punto--occupato { background: #DCE6F0; margin-left: 10px; }
.cal__nota { margin-top: 8px; font-size: 13px; text-align: center; color: var(--tenue); }

/* ══ SEZIONI CON LA TAPPA ══ */
.sez { position: relative; }
.testo-sez { position: relative; padding-left: var(--rientro); }
.testo-sez h2 { font-size: clamp(34px, 3.75vw, 56px); margin-top: 12px; }
.testo-sez .testo { margin-top: 18px; max-width: 470px; }

/* 01 · arrivo */
.arrivo__wrap { display: grid; grid-template-columns: 520px minmax(0, 1fr); column-gap: 42px; }
.arrivo .testo-sez { padding-top: 70px; padding-bottom: 60px; }
.arrivo .tappa { top: 54px; }
.filo--arrivo { left: calc(var(--tappa) / 2 - 1px); top: 0; bottom: 0; width: calc(100% + 42px - var(--tappa) / 2 + 30px); border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 64px; }
.dati { display: flex; flex-wrap: wrap; gap: 18px 56px; margin-top: 30px; }
.dati li { display: flex; align-items: center; gap: 16px; font-size: 17px; line-height: 1.25; color: var(--tenue); }
.dati b { display: block; font-size: 22px; font-weight: 600; color: var(--inchiostro); }
.dati__ico { width: 54px; height: 54px; color: var(--inchiostro); }
.arrivo .link-freccia { margin-top: 30px; }
.arrivo__foto { position: relative; z-index: 1; margin-top: 32px; margin-right: calc(32px - var(--gx)); height: clamp(320px, 31.6vw, 470px); align-self: end; }
.arrivo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cornice::before, .cornice::after { content: ""; position: absolute; left: -16px; width: 44px; height: 44px; border: 0 solid var(--filo); pointer-events: none; }
.cornice::before { top: -16px; border-top-width: 2px; border-left-width: 2px; }
.cornice::after { bottom: 0; height: 64px; border-left-width: 2px; border-bottom-width: 2px; }

/* 02 · giardino */
.giardino__wrap { position: relative; display: grid; grid-template-columns: 905px minmax(0, 1fr); column-gap: 0; }
.giardino__foto { position: relative; margin-left: calc(39px - var(--gx)); padding: 17px 0 22px; height: 100%; min-height: 497px; }
.giardino__grande { position: relative; width: calc(100% - 110px); height: clamp(320px, 31.8vw, 458px); overflow: hidden; }
.giardino__piccola { position: absolute; right: 30px; bottom: 22px; z-index: 2; width: 195px; height: 259px; overflow: hidden; border: 4px solid var(--bianco); border-right: 0; border-bottom: 0; }
.vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform 1.4s var(--ease-out); }
.giardino__grande .vista { object-position: 50% 62%; }
.vista--sera { opacity: 0; transform: scale(1.05); }
.giardino[data-momento="sera"] .vista--sera { opacity: 1; }
.giardino[data-momento="sera"] .vista--sera { transform: none; }
.giardino[data-momento="sera"] .vista--giorno { opacity: 0; transform: scale(1.05); }
.giardino__testo { padding-top: 62px; padding-bottom: 34px; padding-left: 82px; z-index: 1; }
.giardino .tappa { top: 52px; left: 0; }
.filo--giardino-su { right: calc(100% - var(--tappa) / 2 - 1px); top: 0; width: 120px; height: 53px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 44px; }
.filo--giardino-giu { right: calc(100% - var(--tappa) / 2 - 1px); top: 108px; width: 52px; height: 170px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 40px; }
.giardino .testo { max-width: 400px; font-size: 19px; }
.giorno-sera { position: relative; display: flex; width: min(373px, 100%); margin-top: 22px; padding: 0; border: 1.5px solid var(--filo-chiaro); border-radius: 999px; background: var(--bianco); }
.giorno-sera::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 999px; background: var(--mare); transition: transform .4s var(--ease-in-out); }
.giardino[data-momento="sera"] .giorno-sera::before { transform: translateX(100%); }
.giorno-sera__btn { position: relative; z-index: 1; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; border: 0; border-radius: 999px; background: transparent; font-size: 18px; color: var(--inchiostro); cursor: pointer; transition: color .25s ease, transform 160ms var(--ease-out); }
.giorno-sera__btn .ico { width: 24px; height: 24px; }
.giorno-sera__btn[aria-pressed="true"] { color: var(--bianco); }
.giorno-sera__btn:active { transform: scale(.97); }
.giardino .link-freccia { margin-top: 24px; }
.giardino { overflow: hidden; }
.giardino__palma { position: absolute; right: -40px; top: 10px; z-index: 0; width: 230px; opacity: .14; pointer-events: none; transform: rotate(8deg); will-change: transform; }

/* 03 · le case */
.case { padding-bottom: 14px; }
.case__testa { padding-top: 44px; padding-bottom: 32px; }
.case .tappa { top: 30px; }
.filo--case { left: calc(var(--tappa) / 2 - 1px); top: -12px; bottom: 0; width: clamp(300px, 42vw, 600px); border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 44px; }
.case__testa h2 { margin-top: 8px; }
.case__testa .testo { max-width: none; margin-top: 12px; }
.case__elenco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; margin-left: 12px; margin-right: 12px; }
.casa { border: 1.5px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco); padding: 11px; transition: box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .casa:hover { box-shadow: 0 18px 44px rgba(0, 60, 120, .09); border-color: var(--filo-chiaro); } .casa:hover .casa__foto img { transform: scale(1.03); } }
.casa__foto { overflow: hidden; border-radius: 8px; aspect-ratio: 608 / 263; }
.casa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 60%); transition: transform .28s ease; }
.casa__foto--mono img { --y: 74%; }
.casa__foto--app img { --y: 64%; }
.casa__corpo { padding: 20px 20px 12px; }
.casa h3 { font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.casa__dati { margin-top: 14px; display: grid; gap: 10px; }
.casa__dati li { display: flex; align-items: center; gap: 22px; font-size: 18px; color: var(--testo); }
.casa__dati .ico { width: 28px; height: 28px; color: var(--inchiostro); }
.casa .link-freccia { margin-top: 20px; }
.casa__nota { margin-top: 14px; font-size: 15px; color: var(--tenue); }
.casa__prezzo { font-weight: 600; color: var(--inchiostro); }

/* 04 · la sera */
.sera { position: relative; display: grid; grid-template-columns: minmax(0, 41%) minmax(0, 1fr); background: var(--notte); color: var(--bianco); min-height: 414px; }
.sera__pannello { position: relative; padding: 50px 40px 54px max(var(--gx), calc((100vw - 1440px) / 2 + var(--gx))); }
.sera__testo { padding-left: var(--rientro); }
.sera .tappa { top: -2px; }
.filo--sera { left: calc(var(--tappa) / 2 - 1px); top: -50px; bottom: -36px; right: -40px; border-color: rgba(255, 255, 255, .85); border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 60px; }
.sera h2 { color: var(--bianco); font-size: clamp(34px, 3.3vw, 48px); font-weight: 400; margin-top: 14px; }
.sera .testo { color: var(--bianco); font-size: 19px; max-width: 420px; margin-top: 18px; }
.sera__punti { position: absolute; left: calc(var(--rientro) + 330px); top: 34px; width: 70px; }
.sera .btn { margin-top: 26px; min-height: 56px; padding: 0 30px; }
.sera__foto { position: relative; min-height: 300px; overflow: hidden; }
.sera__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.12); transform-origin: 85% 50%; will-change: transform; }

/* comfort */
.comfort { background: var(--cielo); padding: 38px 0 32px; }
.comfort h2 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 500; padding-left: 22px; }
.comfort__elenco { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin-top: 22px; }
.comfort__elenco li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 8px; text-align: center; font-size: 17px; line-height: 1.25; color: var(--inchiostro); }
.comfort__elenco li + li { border-left: 1.5px solid var(--divisore); }
.comfort__elenco .ico { width: 46px; height: 46px; }
.comfort__nota { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; font-size: 17px; color: var(--inchiostro); text-align: center; }
.comfort__nota .ico { width: 24px; height: 24px; }

/* trapani */
.trapani__wrap { display: grid; grid-template-columns: 523px minmax(0, 1fr); column-gap: 0; }
.trapani__testo { padding: 26px 40px 30px 22px; }
.filo--trapani { left: calc(var(--tappa) / 2 - 1px); top: 0; bottom: 0; border-left-width: 2px; }
.trapani h2 { font-size: clamp(32px, 2.9vw, 42px); margin: 0 0 0 22px; }
.orizzonti { margin: 26px 0 0 22px; }
.orizzonte { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 54px; padding: 6px 0; border: 0; border-bottom: 1.5px solid var(--bordo); background: transparent; text-align: left; cursor: pointer; }
.orizzonti li:last-child .orizzonte { border-bottom: 0; }
.orizzonte__num { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1.5px solid var(--inchiostro); border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--inchiostro); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.orizzonte__nome { flex: 1; font-size: 18px; color: var(--testo); }
.orizzonte .ico { width: 20px; height: 20px; color: var(--inchiostro); transition: transform .25s var(--ease-out); }
.orizzonte[aria-pressed="true"] .orizzonte__num { background: var(--mare); border-color: var(--mare); color: var(--bianco); }
.orizzonte[aria-pressed="true"] .orizzonte__nome { color: var(--inchiostro); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .orizzonte:hover .ico { transform: translateX(4px); } .orizzonte:hover .orizzonte__nome { color: var(--inchiostro); } }
.trapani__link { margin: 18px 0 0 22px; }
.trapani__foto { position: relative; margin: 22px calc(-1 * var(--gx)) 22px 0; min-height: 324px; overflow: hidden; }
.orizzonte-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.4s var(--ease-out); }
.orizzonte-foto.is-attiva { opacity: 1; transform: none; }

/* contatti */
.contatti { position: relative; background: linear-gradient(180deg, var(--cielo), #F3FAFE); }
.contatti__wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding-top: 34px; padding-bottom: 34px; }
.contatti__titolo { position: relative; display: flex; align-items: center; gap: 30px; padding-right: 40px; min-height: 180px; }
.filo--contatti { left: calc(var(--tappa) / 2 - 1px); top: -34px; height: 76px; border-left-width: 2px; }
.cerchio-freccia--grande { width: 96px; height: 96px; margin-left: -20px; color: var(--inchiostro); border-width: 2px; }
.cerchio-freccia--grande .ico { width: 48px; height: 48px; }
.contatti h2 { font-size: clamp(32px, 3vw, 44px); font-weight: 400; white-space: nowrap; }
.recensioni { display: grid; gap: 14px; padding: 6px 30px; border-left: 1.5px solid var(--divisore); border-right: 1.5px solid var(--divisore); }
.recensioni li { display: flex; align-items: center; gap: 22px; }
.recensioni img { width: 48px; height: 48px; object-fit: contain; }
.recensioni p { max-width: 240px; font-size: 15px; line-height: 1.3; color: var(--tenue); }
.recensioni__citazione b { font-size: 18px; font-weight: 600; font-style: italic; }
.recensioni b { display: block; font-size: 22px; font-weight: 700; color: var(--inchiostro); }
.contatti__azioni { padding-left: 32px; }
.contatti__sconto { font-size: 18px; line-height: 1.4; color: var(--inchiostro); max-width: 440px; }
.contatti__sconto b { font-weight: 700; }
.contatti__pulsanti { display: flex; gap: 12px; margin-top: 16px; }
.contatti__tutti { margin-top: 14px; font-size: 16px; }
.contatti__pulsanti .btn { min-height: 56px; padding: 0 24px; font-size: 18px; }

/* piè di pagina */
.piede { background: var(--notte); color: var(--bianco); padding-bottom: env(safe-area-inset-bottom, 0px); }
.piede__riga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; padding-top: 26px; padding-bottom: 20px; }
.piede__nome { font-size: 19px; font-weight: 500; }
.piede__luogo { margin-top: 4px; font-size: 15px; color: #B8C7D9; }
/* 3 Step: Instagram e Facebook sotto il nome */
.piede__social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.piede__social a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; color: var(--bianco); text-decoration: none; }
.piede__social .ico { width: 22px; height: 22px; }
.piede__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
.piede__menu a, .piede__legale-link a { text-decoration: none; font-size: 15px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .piede a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.piede__legale-link { justify-self: end; display: flex; gap: 12px; align-items: center; font-size: 15px; white-space: nowrap; }
.piede__legale-link a:first-of-type { margin-left: 22px; }
.piede__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 14px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; line-height: 1.5; color: #B8C7D9; }
.piede__titolare:empty { display: none; }
.piede__contatti { flex-basis: 100%; }
.piede__contatti a { color: var(--bianco); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede__contatti a:hover { text-decoration: underline; } }
.credit a { color: var(--bianco); }

.barra-telefono { display: none; }

/* ══ TABLET ══ */
@media (max-width: 1240px) {
  .arrivo__wrap { grid-template-columns: 460px minmax(0, 1fr); }
  .giardino__wrap { grid-template-columns: 62% minmax(0, 1fr); }
  .giardino__piccola { width: 160px; height: 214px; }
  .cal__invia { margin-left: 0; }
  .contatti__wrap { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .contatti__titolo { grid-column: 1 / -1; min-height: 0; }
  .recensioni { border-left: 0; padding-left: 0; }
  .comfort__elenco { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 24px; }
  .comfort__elenco li:nth-child(6) { border-left: 0; }
}
@media (max-width: 1099px) {
  :root { --rientro: 68px; --tappa: 48px; }
  .filo { display: none; }
  .hero__entra .cerchio-freccia::after { display: none; }
  .tappa { font-size: 18px; }
  .testata__menu { gap: 24px; }
  .testata__menu a { font-size: 16px; }
  .cal__wrap { grid-template-columns: 1fr; gap: 18px; }
  .cal__lato { max-width: 520px; width: 100%; }
  .arrivo__wrap, .giardino__wrap, .trapani__wrap { grid-template-columns: 1fr; }
  .arrivo .testo-sez { padding-bottom: 28px; padding-top: 48px; }
  .arrivo .tappa { top: 36px; }
  .arrivo__foto { margin: 0 calc(-1 * var(--gx)) 0 0; height: auto; aspect-ratio: 16 / 10; }
  .cornice::before, .cornice::after { display: none; }
  .giardino__testo { order: -1; padding-left: var(--rientro); padding-top: 48px; padding-bottom: 24px; }
  .giardino .tappa { left: 0; top: 36px; }
  .giardino__foto { margin: 0 0 0 calc(-1 * var(--gx)); padding: 0 0 40px; min-height: 0; height: auto; }
  .giardino__grande { width: calc(100% - 60px); height: auto; aspect-ratio: 16 / 11; }
  .giardino__piccola { right: 0; bottom: 0; }
  .giardino__palma { display: none; }
  .sera { grid-template-columns: 1fr; }
  .sera__pannello { padding: 48px var(--gx) 40px; }
  .sera__foto { min-height: 0; aspect-ratio: 16 / 10; }
  .trapani__testo { padding: 40px 0 16px; }
  .trapani__foto { margin: 0 calc(-1 * var(--gx)); aspect-ratio: 16 / 9; min-height: 0; order: -1; }
  .trapani__testo h2, .orizzonti { margin-left: 0; }
  .piede__riga { grid-template-columns: 1fr; text-align: left; }
  .piede__legale-link { justify-self: start; }
  .piede__legale-link a:first-of-type { margin-left: 18px; }
  .piede__menu { flex-wrap: wrap; justify-content: flex-start; gap: 6px 24px; }
}

/* ══ TELEFONO (dalla base di Emil Kowalski, 09 § 5) ══ */
@media (max-width: 860px) {
  .testata__menu, .testata__scrivici { display: none; }
  .testata__apri { display: grid; }
  .testata__azioni { margin-left: auto; gap: 10px; }
  .testata__barra { padding-top: 12px; padding-bottom: 12px; padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .testata__logo { padding: 6px 10px; border-radius: 10px; }
  .testata__logo img { width: 150px; }
  :root { --testata-h: 68px; --testata-su: -17px; }
  .testata.is-scorrendo .testata__logo { transform: translateY(-6px) scale(.74); }
  .menu-aperto .testata { color: var(--inchiostro); }
  .menu-aperto .testata::before { opacity: 1; transform: none; box-shadow: none; }
}
@media (max-width: 767px) {
  :root { --gx: 20px; --rientro: 0px; --tappa: 44px; }
  body { font-size: 17px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .testo { font-size: 17.5px; }
  .testo-sez { padding-left: 0; }
  .tappa { position: relative; top: auto !important; left: auto !important; margin-bottom: 14px; font-size: 16px; border-width: 1.5px; }
  .tappa--icona .ico { width: 22px; height: 22px; }

  .hero { height: 86svh; min-height: 540px; max-height: 760px; }
  .hero__foto img { object-position: 30% 55%; }
  .hero::before { background:
    linear-gradient(0deg, rgba(0, 18, 40, .78) 0%, rgba(0, 18, 40, .35) 45%, rgba(0, 18, 40, 0) 70%),
    linear-gradient(180deg, rgba(0, 18, 40, .4) 0%, rgba(0, 18, 40, 0) 22%); }
  .hero__testo { left: max(20px, env(safe-area-inset-left, 0px)); bottom: 28px; padding-right: 20px; }
  .hero h1 { font-size: 36px; }
  .hero__sotto { font-size: 18px; }
  .hero__entra { margin-top: 22px; font-size: 18px; gap: 16px; }
  .hero__entra .cerchio-freccia { width: 56px; height: 56px; }
  .hero__entra .cerchio-freccia .ico { width: 28px; height: 28px; }
  .hero__scorri { display: none; }
  .hero__foto .hero__slide { object-position: var(--pos-tel, var(--pos, 50% 55%)); }
  /* da telefono i pallini stanno in basso, al centro, sotto «Richiedi la disponibilità» (in alto c'è la testata) */
  .hero__comandi { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); }
  .hero .hero__testo { bottom: 50px; }
  .hero__freccia { display: none; }

  .cal__wrap { display: flex; flex-direction: column; gap: 0; padding-top: 28px; padding-bottom: 28px; }
  .cal__main, .cal__lato { display: contents; }
  .cal .tappa--icona { order: 1; }
  .cal__testa { order: 2; }
  .scelta-casa { order: 3; margin: 16px 0 0; }
  .cal__form { order: 4; }
  .mese { order: 5; margin-top: 18px; }
  .cal__nota { order: 6; }
  .tappe { order: 8; }
  .cal .tappa--icona { position: relative; }
  .cal__testa { display: block; }
  .cal h2 { font-size: 30px; line-height: 1.1; }
  .scelta-casa span { padding: 11px 8px; font-size: 16px; }
  .cal__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
  .campo { max-width: none; height: 68px; padding: 11px 36px 0 14px; }
  .campo__ico { right: 12px; }
  .campo--ospiti { grid-column: 1 / -1; padding-left: 52px; }
  .cal__invia { grid-column: 1 / -1; width: 100%; min-height: 58px; }
  .cal__sconto, .cal__messaggio, .nota-privacy, .cal__cin { grid-column: 1 / -1; }
  .tappe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
  .tappe li { justify-content: center; }
  .tappe li + li::before { display: none; }
  .tappe__voce { flex-direction: column; gap: 4px; font-size: 13px; text-align: center; white-space: normal; line-height: 1.15; }
  .tappe__voce b { display: none; }
  .tappe__punto { width: 18px; height: 18px; }
  .cal__lato { max-width: none; }
  .giorno { height: 38px; font-size: 15px; }
  .giorno span { width: 34px; height: 32px; }

  .testo-sez h2 { font-size: 36px; margin-top: 10px; }
  .arrivo .testo-sez { padding-top: 44px; }
  .dati { gap: 16px 28px; margin-top: 22px; }
  .dati__ico { width: 42px; height: 42px; }
  .dati b { font-size: 19px; }
  .dati li { font-size: 15px; gap: 12px; }
  .arrivo__foto { margin: 0 calc(-1 * var(--gx)); aspect-ratio: 4 / 3; }

  .giardino__testo { padding-top: 44px; padding-left: 0; }
  .giardino .testo { font-size: 17.5px; }
  .giardino__foto { margin: 0 calc(-1 * var(--gx)); padding-bottom: 30px; }
  .giardino__grande { width: calc(100% - 40px); aspect-ratio: 4 / 3; }
  .giardino__piccola { width: 118px; height: 157px; right: 20px; }
  .giorno-sera { width: 100%; }

  .case__testa { padding-top: 44px; padding-bottom: 22px; }
  .case__elenco { display: flex; gap: 14px; margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gx); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .case__elenco::-webkit-scrollbar { display: none; }
  .casa { flex: 0 0 84%; scroll-snap-align: start; padding: 8px; }
  .casa__foto { aspect-ratio: 4 / 3; }
  .casa__corpo { padding: 16px 10px 8px; }
  .casa h3 { font-size: 23px; }
  .casa__dati li { font-size: 16px; gap: 14px; }
  .casa__dati .ico { width: 24px; height: 24px; }

  .sera__pannello { padding: 44px 20px 36px; }
  .sera h2 { font-size: 36px; }
  .sera .testo { font-size: 17.5px; }
  .sera__punti { left: auto; right: 24px; top: 40px; width: 54px; }
  .sera__foto { aspect-ratio: 4 / 3; }

  .comfort { padding: 36px 0 30px; }
  .comfort h2 { padding-left: 0; font-size: 26px; }
  .comfort__elenco li { font-size: 14.5px; padding: 4px; }
  .comfort__elenco .ico { width: 38px; height: 38px; }
  .comfort__nota { display: block; font-size: 15px; text-align: left; }
  .comfort__nota .ico { display: none; }
  /* 9 servizi su tre righe da tre (3 Step: le bevande all'arrivo) */
  .comfort__elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comfort__elenco li:nth-child(6) { border-left: 1.5px solid var(--divisore); }
  .comfort__elenco li:nth-child(4), .comfort__elenco li:nth-child(7) { border-left: 0; }

  .trapani__foto { aspect-ratio: 4 / 3; }
  .trapani h2 { font-size: 32px; }
  .orizzonti { margin-top: 16px; }
  .orizzonte { gap: 14px; }
  .orizzonte__num { width: 36px; height: 36px; font-size: 13px; }
  .orizzonte__nome { font-size: 17px; }

  .contatti__wrap { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; }
  .contatti__titolo { gap: 18px; padding-right: 0; }
  .cerchio-freccia--grande { width: 64px; height: 64px; margin-left: 0; }
  .cerchio-freccia--grande .ico { width: 32px; height: 32px; }
  .contatti h2 { font-size: 32px; white-space: normal; }
  .recensioni { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; border: 0; border-top: 1.5px solid var(--divisore); border-bottom: 1.5px solid var(--divisore); }
  .recensioni li { gap: 12px; }
  .recensioni img { width: 38px; height: 38px; }
  .recensioni p { font-size: 13.5px; }
  .recensioni b { font-size: 19px; }
  .contatti__azioni { padding-left: 0; }
  .contatti__pulsanti { flex-direction: column; }
  .contatti__pulsanti .btn { width: 100%; }

  .piede__riga { padding-top: 30px; gap: 18px; }
  .piede__menu a, .piede__legale-link, .piede__legale-link a { font-size: 16px; }
  .piede__note { flex-direction: column; }

  .barra-telefono { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 28px rgba(0, 33, 68, .1); }
  .barra-telefono { transform: translateY(115%); transition: transform .22s var(--ease-out); }
  .barra-telefono.mostra { transform: none; transition: transform .4s var(--ease-out); }
  .barra-telefono .btn { min-height: 52px; padding: 0 16px; font-size: 16px; }
  .barra-telefono .btn--blu { font-size: 17px; }
  .barra-telefono .btn--wa { padding: 0 16px 0 14px; }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 32px !important; }
  .barra-telefono .btn--wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-telefono .btn--wa { padding: 0 14px; }
  .hero h1 { font-size: 38px; }
  .testata__logo img { width: 128px; }
  .scelta-casa span { font-size: 14px; }
  .tappe__voce { font-size: 12px; }
}


/* avvisi del modello legale (Legale/avvisi.html) */
.cal__cin { flex-basis: 100%; font-size: 12px; color: var(--tenue); }
.nota-foto { margin: 18px 12px 0; font-size: 13px; line-height: 1.45; color: var(--tenue); }
.recensioni__nota p { max-width: 250px; font-size: 12px; line-height: 1.4; color: var(--tenue); }
.piede__altri a { color: #B8C7D9; }

/* pagine legali e 404 */
.pagina-interna { padding-top: 0; }
.pagina-legale, .pagina-404 { padding-top: calc(130px + env(safe-area-inset-top, 0px)); padding-bottom: 80px; }
.legale { max-width: 780px; color: var(--testo); font-size: 17px; line-height: 1.6; }
.legale h1 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 10px; }
.legale h1 + p { color: var(--tenue); font-size: 15px; margin-bottom: 28px; }
.legale .legale__prevale { margin: 0 0 26px; padding: 12px 16px; font-size: 15px; line-height: 1.45; color: var(--inchiostro); background: var(--cielo); border-radius: 10px; }   /* 9-ter: «prevale il testo italiano», solo nelle altre lingue */
.legale .legale__prevale a { font-weight: 600; white-space: nowrap; }
.legale h2 { font-size: 26px; margin: 40px 0 12px; }
.legale h3 { font-size: 20px; margin: 26px 0 8px; }
.legale p { margin: 0 0 14px; }
.legale ul, .legale ol { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legale li { margin-bottom: 6px; }
.legale a { color: var(--inchiostro); text-underline-offset: 3px; }
.legale table { width: 100%; margin: 10px 0 20px; border-collapse: collapse; font-size: 15px; }
.legale th, .legale td { padding: 10px 12px; border: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.legale th { background: var(--cielo); color: var(--inchiostro); font-weight: 600; }
.vuota { max-width: 720px; padding: 40px 0 20px; }
.vuota h1 { font-size: clamp(40px, 5vw, 64px); margin: 12px 0 16px; }
.vuota__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 767px) {
  .pagina-legale, .pagina-404 { padding-top: calc(100px + env(safe-area-inset-top, 0px)); padding-bottom: 48px; }
  .legale { font-size: 16px; }
  .legale table { display: block; overflow-x: auto; }
  .recensioni__nota, .recensioni__citazione { grid-column: 1 / -1; }
  .recensioni__nota p { max-width: none; }
}



/* ══════════════════════════════════════════════════════════════════════════════════════════════
   MOVIMENTO · step 5-bis («rendilo tuo»). Il come: le regole di Emil Kowalski (09 § 0-bis-2 🎞️).
   Solo transform, opacity e clip-path; entrate --ease-out, cose che si spostano --ease-in-out.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La prima schermata: la foto si posa e poi respira, i testi salgono riga per riga ── */
.hero__foto img { animation: hero-posa 2.2s var(--ease-out) both, hero-respira 22s ease-in-out 2.2s infinite alternate; }
@keyframes hero-posa { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hero-respira { from { transform: scale(1); } to { transform: scale(1.06) translate3d(-1%, -1%, 0); } }
.hero h1 .riga { display: block; overflow: hidden; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.hero h1 .riga > span { display: block; animation: sale-riga 1s var(--ease-out) both; }
.hero h1 .riga:nth-child(1) > span { animation-delay: .25s; }
.hero h1 .riga:nth-child(2) > span { animation-delay: .37s; }
@keyframes sale-riga { from { transform: translateY(105%); } to { transform: none; } }
.hero .occhiello, .hero__sotto, .hero__entra, .hero__scorri { animation: sale 0.9s var(--ease-out) both; }
.hero .occhiello { animation-delay: .12s; }
.hero__sotto { animation-delay: .55s; }
.hero__entra { animation-delay: .68s; }
.hero__scorri { animation-delay: 1s; }
@keyframes sale { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* il filo parte dal cerchio «Entra nella villa» e scende verso il calendario */
.hero__entra .cerchio-freccia::after { transform-origin: top; animation: filo-scende 1.1s var(--ease-in-out) 1.25s both; }
@keyframes filo-scende { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* un'onda leggera intorno al cerchio, che invita a entrare */
.hero__entra .cerchio-freccia { position: relative; }
.hero__entra .cerchio-freccia::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: onda 2.8s var(--ease-out) 2.2s infinite; pointer-events: none; }
@keyframes onda { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
.hero__entra .cerchio-freccia .ico { transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero__entra:hover .cerchio-freccia .ico { transform: translateX(4px); } }
.hero__scorri .ico { animation: dondola 1.6s var(--ease-in-out) 1.9s infinite alternate; }
@keyframes dondola { from { transform: translateY(-2px); } to { transform: translateY(4px); } }

/* ── Le entrate mentre si scorre (.reveal → .in, una volta sola) ── */
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .casa.reveal { transform: translateY(40px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), box-shadow .25s ease, border-color .25s ease; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
.js .casa.reveal.in { transform: none; }
/* le foto si svelano: il riquadro si apre da un lato, l'immagine si posa */
.js .reveal--svela { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease-out); }
.js .reveal--svela.reveal--su { clip-path: inset(100% 0 0 0); transition-delay: .3s; }
.js .reveal--svela.in { clip-path: inset(0 0 0 0); }
/* dentro i riquadri che tagliano (giardino, sera, Trapani) la foto si posa mentre si svela */
.js .giardino__grande.reveal--svela .vista--giorno, .js .trapani__foto.reveal--svela .orizzonte-foto.is-attiva { transform: scale(1.08); }
.js .giardino__grande.reveal--svela.in .vista--giorno, .js .trapani__foto.reveal--svela.in .orizzonte-foto.is-attiva { transform: none; }
/* il filo del viaggio si disegna mentre si arriva: giù, poi in curva */
.js .filo.reveal { opacity: 1; transform: none; transition: none; }
.js .filo.reveal.filo--L { clip-path: inset(0 calc(100% - 72px) 100% 0); }
.js .filo.reveal.filo--L.in { animation: filo-L 1.8s var(--ease-in-out) .1s both; }
@keyframes filo-L { 0% { clip-path: inset(0 calc(100% - 72px) 100% 0); } 55% { clip-path: inset(0 calc(100% - 72px) 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.js .filo.reveal.filo--J { clip-path: inset(0 0 100% calc(100% - 46px)); }
.js .filo.reveal.filo--J.in { animation: filo-J 1.4s var(--ease-in-out) .5s both; }
@keyframes filo-J { 0% { clip-path: inset(0 0 100% calc(100% - 46px)); } 60% { clip-path: inset(0 0 0 calc(100% - 46px)); } 100% { clip-path: inset(0 0 0 0); } }
.js .filo.reveal.filo--r { clip-path: inset(0 0 calc(100% - 4px) 100%); }
.js .filo.reveal.filo--r.in { animation: filo-r 1.6s var(--ease-in-out) both; }
@keyframes filo-r { 0% { clip-path: inset(0 0 calc(100% - 4px) 100%); } 50% { clip-path: inset(0 0 calc(100% - 48px) 0); } 100% { clip-path: inset(0 0 0 0); } }
.js .filo.reveal.filo--destra { clip-path: inset(0 100% 0 0); }
.js .filo.reveal.filo--destra.in { animation: filo-destra 1s var(--ease-in-out) both; }
@keyframes filo-destra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.js .filo.reveal.filo--giu { clip-path: inset(0 0 100% 0); }
.js .filo.reveal.filo--giu.in { animation: filo-giu 1.4s var(--ease-in-out) both; }
@keyframes filo-giu { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* le tappe si accendono quando il filo le raggiunge */
.js .tappa.reveal { transform: scale(.82); transition: opacity .6s var(--ease-out) .45s, transform .7s var(--ease-out) .45s; }
.js .tappa.reveal.in { transform: none; }
.tappa::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--filo); opacity: 0; pointer-events: none; }
.tappa--chiara::after { border-color: var(--bianco); }
.js .tappa.reveal.in::after { animation: anello 1.2s var(--ease-out) .8s 1 both; }
@keyframes anello { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
/* le linee fra le tappe del calendario si tracciano una dopo l'altra */
.js .tappe.reveal li + li::before { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-in-out); }
.js .tappe.reveal.in li + li::before { transform: none; }
.js .tappe.reveal.in li:nth-child(2)::before { transition-delay: .35s; }
.js .tappe.reveal.in li:nth-child(3)::before { transition-delay: .6s; }
.js .tappe.reveal.in li:nth-child(4)::before { transition-delay: .85s; }

/* ── La sera: le luci tremolano piano ── */
.sera__punti { animation: luccica 3.4s ease-in-out infinite alternate; }
@keyframes luccica { from { opacity: .35; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ── Risposte al tocco e al mouse ── */
.link-freccia { transition: color .2s ease, border-color .2s ease, transform 160ms var(--ease-out); }
.link-freccia:active { transform: translateY(1px); }
.orizzonte { transition: transform 160ms var(--ease-out); }
.orizzonte:active { transform: scale(.98); }
.orizzonte[aria-pressed="true"] .ico { transform: translateX(4px); color: var(--mare); }
.tappe__voce { transition: color .2s ease, transform 160ms var(--ease-out); }
.tappe__voce:active { transform: scale(.96); }
.mese__freccia { transition: background-color .2s ease, transform 160ms var(--ease-out); }
.mese__freccia:not(:disabled):active { transform: scale(.9); }
/* il calendario: il mese nuovo arriva dal lato giusto, le date scelte si posano */
.mese__griglia.da-destra { animation: mese-destra .32s var(--ease-out); }
.mese__griglia.da-sinistra { animation: mese-sinistra .32s var(--ease-out); }
@keyframes mese-destra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes mese-sinistra { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.giorno.arrivo span, .giorno.partenza span { animation: posa .26s var(--ease-out); }
@keyframes posa { from { transform: scale(.82); } to { transform: none; } }
.giorno.nel-periodo::before { animation: compare .3s ease; }
@keyframes compare { from { opacity: 0; } to { opacity: 1; } }
.cal__messaggio:not(:empty) { animation: sale-poco .3s var(--ease-out); }
@keyframes sale-poco { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) { .js .casa.reveal { transform: none; } }

/* se il JavaScript non parte (rete di sicurezza di <head>): tutto visibile */
.moto-ko .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }

/* ── Riduci il movimento: meno, non zero. Restano le dissolvenze, via gli spostamenti ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__foto img { animation: none; }
  .hero h1 .riga > span, .hero .occhiello, .hero__sotto, .hero__entra, .hero__scorri { animation: svanisce .6s ease both; }
  @keyframes svanisce { from { opacity: 0; } to { opacity: 1; } }
  .hero__entra .cerchio-freccia::before, .hero__scorri .ico { animation: none; }
  .hero__entra .cerchio-freccia::after { animation: svanisce .6s ease .6s both; }
  .js .reveal, .js .casa.reveal, .js .tappa.reveal { transform: none; transition: opacity .5s ease; transition-delay: 0s; }
  .js .reveal--svela, .js .reveal--svela.reveal--su { clip-path: none; opacity: 0; transition: opacity .6s ease; }
  .js .reveal--svela.in { opacity: 1; }
  .js .giardino__grande.reveal--svela .vista--giorno, .js .trapani__foto.reveal--svela .orizzonte-foto.is-attiva { transform: none; }
  .js .filo.reveal, .js .filo.reveal.filo--L, .js .filo.reveal.filo--J, .js .filo.reveal.filo--r, .js .filo.reveal.filo--destra, .js .filo.reveal.filo--giu { clip-path: none; opacity: 0; transition: opacity .6s ease; }
  .js .filo.reveal.in { opacity: 1; animation: none !important; }
  .js .tappa.reveal.in::after { animation: none; }
  .js .tappe.reveal li + li::before { transform: none; transition: none; }
  .sera__punti { animation: luccica-piano 4s ease-in-out infinite alternate; }
  @keyframes luccica-piano { from { opacity: .5; } to { opacity: 1; } }
  .vista, .orizzonte-foto, .vista--sera, .giardino[data-momento="sera"] .vista--giorno { transform: none; transition: opacity .4s ease; }
  .giorno-sera::before, .scelta-casa::before { transition: none; }
  .mese__griglia.da-destra, .mese__griglia.da-sinistra { animation: svanisce .25s ease; }
  .giorno.arrivo span, .giorno.partenza span { animation: none; }
  .menu-telefono nav a, .menu-telefono__azioni .btn, .menu-telefono.aperto nav a, .menu-telefono.aperto .menu-telefono__azioni .btn { transform: none; }
  .testata__logo, .testata__menu, .testata__azioni { transition-duration: .2s; }
  .barra-telefono, .barra-telefono.mostra { transition: opacity .25s ease; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .barra-telefono { transform: none; opacity: 0; pointer-events: none; }
  .barra-telefono.mostra { opacity: 1; pointer-events: auto; }
}

/* niente parole sole a capo (step 6) */
h1, h2, h3, .orizzonte__nome, .casa li, .recensioni p { text-wrap: balance; }
p, li { text-wrap: pretty; }


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE · step 6-bis (09 § 0-quater). Solo pezzi della home, ricomposti: nessun elemento nuovo.
   Le pagine si scrivono con Strumenti/genera-pagine-interne.py (testata, piede e barra presi dalla home).
   I pezzi, per chi fa le altre pagine:
   · .hero.hero--interna       la hero della home, più bassa: foto, occhiello, H1 a righe, testo, cerchio-freccia
   · .blocco                   sezione testo + foto con la tappa numerata e il filo (come «Dove siamo»);
     .blocco--rovescio         la foto a sinistra e il testo a destra (come «Il giardino»)
       .blocco__testo          la colonna del testo (è una .testo-sez: tappa, H2, testo, elenco, link)
       .blocco__media          la colonna delle foto, una di queste tre:
         .blocco__foto         una foto, con la cornice aperta (.cornice)
         .coppia               una foto grande e una piccola sovrapposta (__grande, __piccola)
         .galleria             2-4 foto in griglia; da telefono una riga che scorre (come le case)
   · .elenco-icone             elenco con le icone del kit (come le schede delle case); .elenco-punti col punto azzurro
   · .nota                     la riga piccola sotto un elenco
   · .sera.sera--interna       la fascia blu notte della home («La sera»); .sera__foto--due: due foto affiancate
   · .link-freccia--chiaro     il link a freccia sul blu notte
   · .fascia                   la fascia azzurra finale («Come prenotare direttamente»): cerchio-freccia, H2, pulsanti;
       .fascia__prezzi         le righe del prezzo dal pannello ([data-thk-prezzi]): nascoste finché sono vuote
   · .rimando .casa--rimando   la scheda di una casa, in orizzontale, per mandare a un'altra pagina
   · [data-nasconde-barra]     da telefono la barra fissa si nasconde mentre la sezione è sullo schermo
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* la voce del menu della pagina aperta */
.testata__menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-telefono nav a[aria-current="page"] { color: var(--mare); }
.piede__menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ── la hero interna ── */
.hero--interna { height: clamp(540px, 88svh, 720px); }
/* le foto delle case sono chiare, quella della home è di sera: la stessa velatura, un po' più scura */
.hero--interna::before { background:
  linear-gradient(90deg, rgba(0, 18, 40, .7) 0%, rgba(0, 18, 40, .42) 38%, rgba(0, 18, 40, .08) 68%),
  linear-gradient(0deg, rgba(0, 18, 40, .6) 0%, rgba(0, 18, 40, 0) 45%),
  linear-gradient(180deg, rgba(0, 18, 40, .55) 0%, rgba(0, 18, 40, 0) 26%); }
.hero--interna .hero__testo { max-width: 1040px; }
.hero--interna h1 { font-size: clamp(40px, 4.7vw, 68px); line-height: 1.02; }
.hero--interna .hero__sotto { max-width: 700px; }
.hero--interna .hero__sotto p + p { margin-top: 4px; }

/* ── il blocco testo + foto ── */
.blocco__wrap { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 56px; }
.blocco--rovescio .blocco__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.blocco--rovescio .blocco__testo { grid-column: 2; grid-row: 1; }
.blocco--rovescio .blocco__media { grid-column: 1; grid-row: 1; }
.blocco__testo { padding-top: 76px; padding-bottom: 64px; }
.blocco .tappa { top: 66px; }
.blocco__testo h2 { font-size: clamp(32px, 3vw, 44px); margin-top: 0; }
.blocco__testo .testo { margin-top: 18px; max-width: 470px; }
.blocco__testo .testo + .testo { margin-top: 10px; }
.blocco__testo .link-freccia { margin-top: 26px; }
.blocco__link { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.blocco__link .link-freccia { margin-top: 0; }
.filo--blocco { left: calc(var(--tappa) / 2 - 1px); top: 0; bottom: 0; width: calc(100% + 96px - var(--tappa) / 2); border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 64px; }
.blocco--rovescio .filo--blocco { left: auto; right: calc(100% - var(--tappa) / 2 - 1px); width: 136px; border-left-width: 0; border-right-width: 2px; border-bottom-right-radius: 52px; }
.blocco__media { position: relative; z-index: 1; align-self: end; margin-top: 32px; }
.blocco__foto { height: clamp(320px, 31.6vw, 470px); margin-right: calc(32px - var(--gx)); }
.blocco--rovescio .blocco__foto { margin-right: 0; margin-left: calc(32px - var(--gx)); }
.blocco__foto img { width: 100%; height: 100%; object-fit: cover; }
.blocco .nota-foto { grid-column: 1 / -1; margin: 22px 0 0; padding-bottom: 30px; }

/* una foto grande e una piccola sovrapposta (come il giardino della home) */
.coppia__grande { position: relative; width: calc(100% - 90px); height: clamp(320px, 30vw, 440px); overflow: hidden; margin-left: calc(32px - var(--gx)); }
.coppia__piccola { position: absolute; right: 24px; bottom: 0; z-index: 2; width: clamp(150px, 13.5vw, 195px); aspect-ratio: 3 / 4; overflow: hidden; border: 4px solid var(--bianco); border-right: 0; border-bottom: 0; }
.blocco:not(.blocco--rovescio) .coppia__grande { margin-left: auto; margin-right: calc(32px - var(--gx)); width: calc(100% - 90px + var(--gx) - 32px); }
.blocco:not(.blocco--rovescio) .coppia__piccola { right: auto; left: 24px; border: 4px solid var(--bianco); border-left: 0; border-bottom: 0; }
.coppia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .coppia__grande.reveal--svela img { transform: scale(1.08); transition: transform 1.4s var(--ease-out); }
.js .coppia__grande.reveal--svela.in img { transform: none; }

/* la griglia di foto */
.galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-self: center; }
.galleria--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galleria li { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.galleria--alta li { aspect-ratio: 4 / 5; }
.galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .galleria li:hover img { transform: scale(1.04); } }

/* gli elenchi */
.elenco-icone, .elenco-punti { display: grid; gap: 12px; margin-top: 22px; }
.elenco-icone li { display: flex; align-items: flex-start; gap: 18px; font-size: 18px; line-height: 1.4; color: var(--testo); }
.elenco-icone .ico { width: 28px; height: 28px; margin-top: -2px; color: var(--inchiostro); }
.elenco-punti li { position: relative; padding-left: 22px; font-size: 18px; line-height: 1.4; color: var(--testo); }
.elenco-punti li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--filo); }
.nota { margin-top: 16px; max-width: 470px; font-size: 15px; line-height: 1.45; color: var(--tenue); }

/* ── la fascia blu notte ── */
.sera--interna h2 { margin-top: 0; font-size: clamp(32px, 3vw, 44px); }
.sera--interna .testo + .testo { margin-top: 10px; }
.sera--interna .link-freccia { margin-top: 26px; }
.sera--interna .elenco-icone li { font-size: 19px; line-height: 1.45; color: var(--bianco); }
.sera--interna .elenco-icone .ico { width: 26px; height: 26px; margin-top: 1px; color: var(--sera); }
.sera--interna .sera__punti { left: auto; right: -6px; top: -30px; }
.blocco + .sera { margin-top: 40px; }
.sera__foto--due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--notte); }
.sera__foto--due .sera__vista { position: relative; overflow: hidden; }
.sera__foto--due img { transform: none; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sera__foto--due .sera__vista:hover img { transform: scale(1.04); } }
.link-freccia--chiaro { color: var(--bianco); border-color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .link-freccia--chiaro:hover { color: var(--divisore); border-color: var(--divisore); } }

/* ── la fascia azzurra finale ── */
.fascia { position: relative; background: linear-gradient(180deg, var(--cielo), #F3FAFE); }
.fascia__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); align-items: center; padding-top: 34px; padding-bottom: 34px; }
.fascia__titolo { position: relative; display: flex; align-items: center; gap: 30px; padding-right: 48px; min-height: 180px; }
.filo--fascia { left: calc(var(--tappa) / 2 - 1px); top: -34px; height: 76px; border-left-width: 2px; }
.fascia h2 { max-width: 560px; font-size: clamp(32px, 3vw, 44px); font-weight: 400; }
.fascia__azioni { padding: 10px 0 10px 48px; border-left: 1.5px solid var(--divisore); }
.fascia__prezzi { display: grid; gap: 2px; margin-bottom: 14px; }
.fascia__prezzo { font-size: 26px; font-weight: 600; color: var(--inchiostro); }
.fascia__pulizia { font-size: 16px; color: var(--tenue); }
.fascia__sconto { max-width: 470px; font-size: 18px; line-height: 1.4; color: var(--inchiostro); }
.fascia__sconto b { font-weight: 700; }
.fascia__testo { margin-top: 6px; max-width: 470px; font-size: 17px; line-height: 1.45; color: var(--testo); }
.fascia__pulsanti { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.fascia__pulsanti .btn { min-height: 56px; padding: 0 26px; }
.fascia__cin { margin-top: 14px; font-size: 12px; color: var(--tenue); }

/* ── il rimando a un'altra pagina: la scheda della casa, in orizzontale ── */
.rimando { padding: 56px 0 64px; }
.casa--rimando { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; max-width: 1000px; margin-inline: auto; }
.casa--rimando .casa__foto { aspect-ratio: 16 / 10; }
.casa--rimando .casa__corpo { padding: 12px 28px 12px 34px; }
.casa--rimando h2 { font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.casa__testo { margin-top: 10px; max-width: 460px; font-size: 18px; line-height: 1.45; color: var(--testo); }
.casa--rimando .link-freccia { margin-top: 18px; }

/* ── computer piccolo e tablet ── */
@media (max-width: 1099px) {
  .blocco__wrap, .blocco--rovescio .blocco__wrap { grid-template-columns: 1fr; }
  .blocco--rovescio .blocco__testo, .blocco--rovescio .blocco__media { grid-column: auto; grid-row: auto; }
  .blocco__testo { padding-top: 48px; padding-bottom: 28px; }
  .blocco .tappa { top: 40px; }
  .blocco__media { margin-top: 0; }
  .blocco__foto, .blocco--rovescio .blocco__foto { height: auto; aspect-ratio: 16 / 10; margin: 0 calc(-1 * var(--gx)) 0 0; }
  .coppia { margin: 0 0 0 calc(-1 * var(--gx)); padding-bottom: 40px; }
  .coppia__grande, .blocco:not(.blocco--rovescio) .coppia__grande { width: calc(100% - 60px); height: auto; aspect-ratio: 16 / 11; margin: 0; }
  .coppia__piccola, .blocco:not(.blocco--rovescio) .coppia__piccola { left: auto; right: 0; bottom: 0; width: 160px; border: 4px solid var(--bianco); border-right: 0; border-bottom: 0; }
  .fascia__wrap { grid-template-columns: 1fr; row-gap: 20px; }
  .fascia__titolo { min-height: 0; padding-top: 18px; }
  .fascia__azioni { padding: 20px 0 0; border-left: 0; border-top: 1.5px solid var(--divisore); }
}

/* ── telefono ── */
@media (max-width: 767px) {
  .hero--interna { height: 84svh; min-height: 560px; max-height: 760px; }
  .hero--interna::before { background:
    linear-gradient(0deg, rgba(0, 18, 40, .86) 0%, rgba(0, 18, 40, .5) 48%, rgba(0, 18, 40, .08) 74%),
    linear-gradient(180deg, rgba(0, 18, 40, .45) 0%, rgba(0, 18, 40, 0) 22%); }
  .blocco + .sera { margin-top: 28px; }
  .hero--interna .hero__foto img { object-position: 58% 60%; }
  .sera--interna .sera__punti { top: -26px; right: 0; width: 54px; }
  .hero--interna h1 { font-size: 34px; }
  .hero--interna .hero__sotto { font-size: 17px; }
  .blocco__testo { padding-top: 44px; padding-bottom: 26px; }
  .blocco__testo h2 { font-size: 30px; line-height: 1.1; }
  .elenco-icone li, .elenco-punti li { font-size: 16.5px; }
  .elenco-icone li { gap: 14px; }
  .elenco-icone .ico { width: 24px; height: 24px; margin-top: 0; }
  .nota { font-size: 14.5px; }
  .blocco__foto, .blocco--rovescio .blocco__foto { margin: 0 calc(-1 * var(--gx)); aspect-ratio: 4 / 3; }
  .coppia { margin: 0 calc(-1 * var(--gx)); padding-bottom: 30px; }
  .coppia__grande, .blocco:not(.blocco--rovescio) .coppia__grande { width: calc(100% - 40px); aspect-ratio: 4 / 3; }
  .coppia__piccola, .blocco:not(.blocco--rovescio) .coppia__piccola { width: 118px; right: 20px; }
  .galleria, .galleria--3 { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gx)); padding: 0 var(--gx) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gx); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .galleria::-webkit-scrollbar { display: none; }
  .galleria li { flex: 0 0 80%; scroll-snap-align: start; }
  .galleria--alta li { flex-basis: 72%; }
  /* la griglia che resta griglia anche da telefono: le quattro foto delle camere si vedono senza scorrere (2 Step) */
  .galleria.galleria--griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; overflow: visible; }
  .js .galleria .reveal { transform: none; }
  .blocco .nota-foto { margin-top: 18px; padding-bottom: 20px; }

  .sera--interna h2 { font-size: 30px; line-height: 1.1; }
  .sera--interna .elenco-icone li { font-size: 17px; }
  .sera__foto--due { aspect-ratio: 3 / 2; }

  .fascia__wrap { padding-top: 40px; padding-bottom: 40px; }
  .fascia__titolo { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0; }
  .fascia .cerchio-freccia--grande { width: 56px; height: 56px; }
  .fascia .cerchio-freccia--grande .ico { width: 28px; height: 28px; }
  .fascia h2 { font-size: 30px; line-height: 1.1; }
  .fascia__prezzo { font-size: 22px; }
  .fascia__sconto { font-size: 17px; }
  .fascia__pulsanti { flex-direction: column; }
  .fascia__pulsanti .btn { width: 100%; }

  .rimando { padding: 40px 0 44px; }
  .casa--rimando { grid-template-columns: 1fr; padding: 8px; }
  .casa--rimando .casa__foto { aspect-ratio: 4 / 3; }
  .casa--rimando .casa__corpo { padding: 16px 10px 8px; }
  .casa--rimando h2 { font-size: 23px; }
  .casa__testo { font-size: 16.5px; }
}

/* riduci il movimento: come nella home, restano le dissolvenze */
@media (prefers-reduced-motion: reduce) {
  .js .coppia__grande.reveal--svela img, .galleria img, .sera__foto--due img { transform: none; transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE · le ultime quattro (dintorni, come arrivare, domande frequenti, contatti).
   Sempre e solo pezzi della home ricomposti: il blocco e la fascia blu notte in due colonne di testo (dove il cliente
   non ha una foto), l'icona del kit al posto dell'occhiello, le domande nella forma degli «orizzonti» della home,
   l'intestazione chiara senza foto, i passi numerati come gli orizzonti, due azioni nella hero.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.ico--posizione { --m: url("/assets/icone/posizione.png"); }

/* l'icona del kit al posto dell'occhiello, dove il copy la chiede (all'altezza della tappa) */
.icona-sez { display: block; width: 48px; height: 48px; margin: -6px 0 10px; color: var(--inchiostro); }
.sera .icona-sez { margin-top: 2px; color: var(--sera); }
.elenco-icone .ico--piccola { width: 18px; height: 18px; margin: 3px 5px 0; }

/* i link dentro i testi (numero, email, WhatsApp) */
.blocco__testo .testo a, .elenco-icone a, .passi a, .fascia__testo a, .domanda__risposta a {
  color: var(--inchiostro); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .blocco__testo .testo a:hover, .elenco-icone a:hover, .passi a:hover, .fascia__testo a:hover, .domanda__risposta a:hover { color: var(--mare); }
}

/* ── il blocco in due colonne di testo, senza foto ── */
.blocco--testi .blocco__wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.blocco--testi .blocco__testo { padding-bottom: 60px; }
.blocco--testi .blocco__testo .testo { max-width: 520px; }
.blocco--testi .filo--blocco { width: calc(100% + 28px - var(--tappa) / 2); }
.blocco--testi .blocco__testo + .blocco__testo .filo--blocco { width: calc(100% - var(--tappa) / 2); }

/* ── la fascia blu notte in due colonne di testo, senza foto ── */
.sera--testi { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
.sera--testi .sera__pannello { display: flex; flex-direction: column; padding-bottom: 64px; }
.sera--testi .sera__testo { flex: 1; }
.sera--testi .sera__pannello + .sera__pannello { padding-left: 40px; padding-right: max(var(--gx), calc((100vw - 1440px) / 2 + var(--gx))); }
.sera--testi .testo { max-width: 520px; }
.sera--tre .sera__pannello:nth-child(1) { grid-column: 1; grid-row: 1; padding-bottom: 28px; }
.sera--tre .sera__pannello:nth-child(2) { grid-column: 1; grid-row: 2; padding-top: 28px; padding-right: 40px; padding-left: max(var(--gx), calc((100vw - 1440px) / 2 + var(--gx))); }
.sera--tre .sera__pannello:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
/* 3 Step: le tre foto di Erice sotto il testo, in fila anche da telefono (niente foto grandi una sotto l'altra) */
.erice-foto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin-top: 24px; }
.erice-foto li { overflow: hidden; aspect-ratio: 1; border-radius: 10px; }
.erice-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .erice-foto li:hover img { transform: scale(1.04); } }
.sera--interna .elenco-punti li { font-size: 19px; line-height: 1.45; color: var(--bianco); }
.sera--interna .elenco-punti { margin-top: 16px; }
.sera--interna .elenco-punti + .testo { margin-top: 16px; }

/* ── due azioni nella hero: il cerchio e un pulsante ── */
.hero__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 26px; animation: sale .9s var(--ease-out) .62s both; }
.hero__azioni .hero__entra { margin-top: 0; animation: none; }
.hero__azioni .btn { min-height: 56px; padding: 0 26px; }
.btn .ico--posizione, .btn--linea-chiara .ico--telefono { width: 1.15em; height: 1.15em; }

/* ── l'intestazione chiara, senza foto (domande frequenti): la hero della home sulla fascia azzurra ── */
.hero--interna.hero--chiara { height: auto; min-height: 0; max-height: none; color: var(--inchiostro); background: linear-gradient(180deg, var(--cielo), #F3FAFE); }
.hero--chiara::before { display: none; }
.hero--chiara .hero__testo { position: relative; left: auto; bottom: auto; max-width: 1440px; margin-inline: auto; padding: calc(150px + env(safe-area-inset-top, 0px)) var(--gx) 60px calc(var(--gx) - 8px); }
.hero--chiara h1 { color: var(--inchiostro); }
.hero--chiara .hero__sotto { color: var(--testo); }
.hero--chiara .hero__entra .cerchio-freccia { background: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .hero--chiara .hero__entra:hover .cerchio-freccia { background: var(--inchiostro); color: var(--bianco); } }

/* ── le domande frequenti: la forma degli «orizzonti» della home (riga, cerchio, bordo), che si aprono ── */
.domande__wrap { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); column-gap: 64px; }
.domande__testa { padding-top: 44px; padding-bottom: 40px; }
.domande-gruppo .tappa { top: 34px; }
.filo--colonna { left: calc(var(--tappa) / 2 - 1px); top: 0; bottom: 0; border-left-width: 2px; }
.domande__testa h2 { margin-top: 0; font-size: clamp(28px, 2.5vw, 36px); }
.domande__icone { display: flex; gap: 18px; margin-top: 16px; color: var(--inchiostro); }
.domande__icone .ico { width: 30px; height: 30px; }
.domande { align-self: start; padding: 30px 0; }
.domanda { border-bottom: 1.5px solid var(--bordo); }
.domanda__riga { display: flex; align-items: center; gap: 22px; min-height: 64px; padding: 12px 0; list-style: none; cursor: pointer; }
.domanda__riga::-webkit-details-marker { display: none; }
.domanda__riga::marker { content: ""; }
.domanda__testo { flex: 1; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--inchiostro); transition: color .2s ease; }
.domanda__segno { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1.5px solid var(--inchiostro); border-radius: 50%; color: var(--inchiostro); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform 160ms var(--ease-out); }
.domanda__segno .ico { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.domanda[open] .domanda__segno { background: var(--mare); border-color: var(--mare); color: var(--bianco); }
.domanda[open] .domanda__segno .ico { transform: rotate(-90deg); }
.domanda__riga:active .domanda__segno { transform: scale(.94); }
.domanda__riga:focus-visible { outline: 2px solid var(--filo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .domanda__riga:hover .domanda__testo { color: var(--mare); }
  .domanda__riga:hover .domanda__segno { border-color: var(--mare); }
}
.domanda__risposta { padding: 0 62px 22px 0; font-size: 18px; line-height: 1.5; color: var(--testo); }
.domanda[open] .domanda__risposta { animation: sale-poco .35s var(--ease-out); }

/* ── i passi numerati (contatti): come gli orizzonti, senza il pulsante ── */
.passi { margin-top: 18px; counter-reset: passo; }
.passi li { counter-increment: passo; display: flex; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1.5px solid var(--bordo); font-size: 18px; line-height: 1.4; color: var(--testo); }
.passi li:last-child { border-bottom: 0; }
.passi li::before { content: counter(passo, decimal-leading-zero); display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1.5px solid var(--inchiostro); border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--inchiostro); }

/* ── la fascia azzurra: un link sotto i pulsanti; la scheda dell'indirizzo ── */
.fascia__link { margin-top: 14px; font-size: 16px; }
.casa--rimando .casa__testo + .casa__testo { margin-top: 2px; }
.rimando .nota-foto { max-width: 1000px; margin: 18px auto 0; padding: 0 12px; }

/* ── computer piccolo e tablet ── */
@media (max-width: 1099px) {
  .blocco--testi .blocco__wrap { grid-template-columns: 1fr; }
  .blocco--testi .blocco__testo { padding-bottom: 28px; }
  .sera--testi { grid-template-columns: 1fr; }
  .sera--testi .sera__pannello { padding-bottom: 40px; }
  .sera--testi .sera__pannello + .sera__pannello { padding: 40px var(--gx); border-top: 1px solid rgba(255, 255, 255, .16); }
  .sera--tre .sera__pannello:nth-child(n) { grid-column: auto; grid-row: auto; }
  .sera--tre .sera__pannello:nth-child(1) { padding-bottom: 40px; }
  .domande__wrap { grid-template-columns: 1fr; }
  .domande__testa { padding-bottom: 0; }
  .domande-gruppo .tappa { top: 36px; }
  .domande { padding: 14px 0 26px var(--rientro); }
}

/* ── telefono ── */
@media (max-width: 767px) {
  .icona-sez { position: absolute; left: 58px; width: 38px; height: 38px; margin: 0; }
  .blocco__testo .icona-sez { top: 47px; margin: 0; }
  .sera__testo .icona-sez { top: 3px; margin: 0; }
  .blocco--testi .blocco__testo { padding-bottom: 20px; }
  .blocco--testi .blocco__testo + .blocco__testo { padding-top: 32px; }
  .sera--testi .sera__pannello { padding-bottom: 36px; }
  .sera--testi .sera__pannello + .sera__pannello { padding: 36px 20px; }
  .sera--tre .sera__pannello:nth-child(1) { padding-bottom: 36px; }
  .sera--interna .elenco-punti li { font-size: 17px; }

  .hero__azioni { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 20px; }
  .hero__azioni .btn { min-height: 52px; }

  .hero--chiara .hero__testo { padding: calc(112px + env(safe-area-inset-top, 0px)) 20px 40px; }

  .domande__testa { padding-top: 40px; }
  .domande__testa h2 { font-size: 28px; line-height: 1.12; }
  .domande { padding: 10px 0 22px; }
  .domanda__riga { gap: 14px; min-height: 58px; }
  .domanda__testo { font-size: 17px; }
  .domanda__segno { width: 36px; height: 36px; }
  .domanda__risposta { padding: 0 0 18px; font-size: 16.5px; }

  .passi li { gap: 14px; font-size: 16.5px; }
  .fascia__pulsanti .btn--lungo { min-height: 56px; padding: 10px 18px; white-space: normal; text-align: center; line-height: 1.25; }
  .passi li::before { width: 36px; height: 36px; font-size: 13px; }
}

/* riduci il movimento: restano le dissolvenze */
@media (prefers-reduced-motion: reduce) {
  .hero__azioni { animation: svanisce .6s ease both; }
  .domanda[open] .domanda__risposta { animation: none; }
  .domanda__segno .ico { transition: none; }
}

/* piede a 320 px: la riga legale sta nella pagina, senza scorrimento laterale */
@media (max-width: 359px) {
  .piede__riga { grid-template-columns: minmax(0, 1fr); }
  .piede__legale-link { flex-wrap: wrap; gap: 4px 8px; white-space: normal; font-size: 15px; }
  .piede__legale-link a { font-size: 15px; }
  .piede__legale-link a:first-of-type { margin-left: 12px; }
}

/* titoli delle pagine interne da telefono: l'indirizzo resta con il suo numero */
@media (max-width: 380px) { .hero--interna h1 { font-size: 31px; } }
@media (max-width: 359px) { .hero.hero--interna h1 { font-size: 28px !important; } }

/* fascia dei servizi da telefono: le etichette stanno nella loro colonna */
@media (max-width: 400px) { .comfort__elenco li { font-size: 13.5px; padding: 4px 2px; } }
@media (max-width: 359px) {
  .comfort__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comfort__elenco li:nth-child(odd) { border-left: 0; }
  .comfort__elenco li:nth-child(even) { border-left: 1.5px solid var(--divisore); }
}

/* ── 6-ter, correzioni dell'audit 7-bis (28/10/2026): le parti che il cliente allunga dal pannello ── */
/* P13 · una parola lunghissima scritta dal pannello va a capo invece di far scorrere la pagina di lato */
body { overflow-wrap: break-word; }
/* P14 · I servizi: un elenco che si allunga o si accorcia. Da computer una riga sola con tante colonne quanti servizi;
   sotto, righe da 5, da 3 e da 2. I divisori stanno a sinistra di ogni servizio e quello del primo di ogni riga esce
   dal riquadro (overflow-x: clip, che non taglia le entrate dal basso), così non ci sono bordi fuori posto con qualsiasi numero di servizi. */
.comfort__elenco { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow-x: clip; }
.comfort__elenco li, .comfort__elenco li + li { border-left: 1.5px solid var(--divisore); margin-left: -1.5px; }
@media (max-width: 1240px) { .comfort__elenco { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px) { .comfort__elenco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .comfort__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1240px) { .comfort__elenco li:nth-child(n) { border-left: 1.5px solid var(--divisore); } }
/* P11 · Le foto di Erice: con 4 foto due righe da due (con 1, 2, 3, 5 o 6 restano le colonne da tre) */
.erice-foto:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 360px; }

/* ── 9-ter · le cinque lingue: in inglese, spagnolo, francese e tedesco pulsanti, codici e riga legale del piede sono più
   lunghi. Da telefono vanno a capo invece di uscire dallo schermo; in italiano stanno su una riga e restano come prima ── */
@media (max-width: 767px) {
  .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }
  .piede__riga { grid-template-columns: minmax(0, 1fr); }
  .piede__legale-link { flex-wrap: wrap; row-gap: 4px; white-space: normal; }
  .thk-cin { overflow-wrap: anywhere; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   4 STEP (29/10/2026) · Pezzi del sito ricomposti, nessuno stile nuovo: sez, wrap, filo, tappa, cornice, reveal,
   link-freccia, i cerchi degli «orizzonti», la fascia azzurra, i colori e il carattere di sempre.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── LA MAPPA in fondo alla home: porto, funivia per Erice e saline. Al clic (30 § 8): prima del clic nessuna richiesta
   a Google, l'avviso si legge prima e «Carica la mappa» mette l'iframe (main.js, [data-thk-al-clic]) ── */
.mappa { padding: 72px 0 92px; }
.mappa__wrap { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 72px; }
.mappa__testo { grid-column: 1; grid-row: 1; min-height: var(--tappa); }
.mappa__testo .tappa { top: 0; }
.filo--mappa { left: calc(var(--tappa) / 2 - 1px); top: -72px; height: 72px; border-left-width: 2px; }
.mappa h2 { margin-top: 0; padding-top: 6px; font-size: clamp(32px, 2.9vw, 42px); }
.luoghi { grid-column: 1; grid-row: 2; align-self: start; margin-top: 34px; padding-left: var(--rientro); }
.luogo { display: flex; align-items: center; gap: 18px; min-height: 68px; padding: 10px 0; border-bottom: 1.5px solid var(--bordo); color: var(--testo); text-decoration: none; }
.luoghi li:last-child .luogo { border-bottom: 0; }
.luogo__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--inchiostro); border-radius: 50%; color: var(--inchiostro); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform 160ms var(--ease-out); }
.luogo__ico .ico { width: 22px; height: 22px; }
.luogo__nome { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--inchiostro); transition: color .2s ease; }
.luogo__distanza { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; color: var(--tenue); }
.luogo > .ico--diagonale { width: 13px; height: 13px; color: var(--inchiostro); transition: transform .2s var(--ease-out); }
.luogo:active .luogo__ico { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .luogo:hover .luogo__ico { background: var(--mare); border-color: var(--mare); color: var(--bianco); }
  .luogo:hover .luogo__nome { color: var(--mare); }
  .luogo:hover > .ico--diagonale { transform: translate(2px, -2px); }
}
.mappa__riquadro { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-height: clamp(400px, 31vw, 450px); margin-right: calc(32px - var(--gx)); }
.mappa__clic { position: absolute; inset: 0; overflow: hidden; background-color: var(--cielo); background-image: radial-gradient(var(--divisore) 1.1px, transparent 1.4px), linear-gradient(180deg, var(--cielo), #F3FAFE); background-size: 24px 24px, 100% 100%; }
.mappa__avviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 28px; text-align: center; }
.mappa__pin { position: relative; width: 64px; height: 64px; color: var(--inchiostro); background: var(--bianco); border-width: 2px; }
.mappa__pin .ico { width: 28px; height: 28px; }
.mappa__pin::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--filo); opacity: 0; animation: onda 2.8s var(--ease-out) 1s infinite; pointer-events: none; }
.mappa__nota { max-width: 400px; font-size: 16px; line-height: 1.5; color: var(--testo); }
.mappa__nota a { color: var(--inchiostro); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mappa__azioni { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.mappa__azioni .btn { min-height: 54px; }
@media (hover: hover) and (pointer: fine) { .mappa__nota a:hover { color: var(--mare); } }
.mappa__clic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .7s var(--ease-out); }
.mappa__clic.is-caricata .mappa__avviso { display: none; }
.mappa__clic.is-pronta iframe { opacity: 1; }

/* ── /dintorni · le schede dei testi del cliente («La Processione dei Misteri», «Il Corallo di Trapani»): il blocco
   testo + foto, con la frase sotto il titolo e le etichette in grassetto sopra il loro testo. Da computer la foto
   accompagna il testo lungo (resta in vista e si posa in fondo, dove arriva il filo); da telefono sta sopra il testo ── */
.blocco__testo .blocco__sottotitolo { margin-top: 12px; max-width: 470px; font-size: 21px; font-style: italic; font-weight: 500; line-height: 1.4; color: var(--tenue); }
.blocco__testo .blocco__etichetta { margin-top: 28px; max-width: 470px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--inchiostro); }
.blocco__testo .blocco__etichetta + .testo { margin-top: 6px; }
.blocco--scheda .blocco__media { align-self: stretch; margin-top: 76px; }
.blocco--scheda .blocco__foto { position: sticky; top: calc(var(--testata-h) + 36px); }
.blocco--scheda .blocco__foto img { object-position: 52% 40%; }

@media (max-width: 1099px) {
  .mappa { padding: 56px 0 64px; }
  .mappa__wrap { grid-template-columns: 1fr; grid-template-rows: none; }
  .mappa__testo, .luoghi, .mappa__riquadro { grid-column: auto; grid-row: auto; }
  .mappa__riquadro { height: auto; aspect-ratio: 16 / 10; min-height: 380px; margin: 26px calc(-1 * var(--gx)) 0 0; }
  .luoghi { margin-top: 18px; }
  .blocco--scheda { margin-top: 40px; }
  .blocco--scheda .blocco__media { order: -1; margin-top: 0; }
  .blocco--scheda .blocco__foto { position: relative; top: auto; }
}
@media (max-width: 767px) {
  .mappa { padding: 44px 0 48px; }
  .filo--mappa { display: none; }
  .mappa h2 { padding-top: 0; font-size: 30px; line-height: 1.1; }
  .mappa__riquadro { aspect-ratio: auto; min-height: 0; height: 420px; margin: 22px calc(-1 * var(--gx)) 0; }
  .mappa__avviso { gap: 16px; padding: 28px 22px; }
  .mappa__pin { width: 56px; height: 56px; }
  .mappa__pin .ico { width: 24px; height: 24px; }
  .mappa__nota { font-size: 15.5px; }
  .mappa__azioni { flex-direction: column; gap: 14px; width: 100%; }
  .mappa__azioni .btn { width: 100%; }
  .luogo { gap: 14px; min-height: 64px; }
  .luogo__ico { width: 40px; height: 40px; }
  .luogo__ico .ico { width: 20px; height: 20px; }
  .luogo__nome { font-size: 17px; }
  .luogo__distanza { font-size: 14.5px; }
  .blocco--scheda { margin-top: 36px; }
  .blocco__testo .blocco__sottotitolo { font-size: 19px; }
  .blocco__testo .blocco__etichetta { margin-top: 24px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .mappa__pin::before { animation: none; }
  .mappa__clic iframe { transition: opacity .4s ease; }
}