/* 01-tokens.css */
/* ============================================================
   Welcome Riviera, gettoni.

   La superficie viene dal riferimento del cliente («The Stay», un
   modello Framer per case vacanza): pagina bianca, una fascia grigio
   freddo, una fascia blu cobalto, bottoni neri e bianchi, Manrope con
   una parola in Averia Serif Libre corsivo. Il blu e' stato
   campionato sul riferimento (#0B64BC) e riportato verso il cielo
   della sera dell'apertura (#235087): #0F5FB4.

   Ogni rapporto qui sotto e' calcolato, non stimato. Vedi DESIGN.md.
   ============================================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/manrope-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;
}
/* Averia Serif Libre arriva SOLO in corsivo: serve a una parola per
   titolo. Google la serve nel solo sottoinsieme latino. */
@font-face {
  font-family: 'Averia Serif Libre';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/averia-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- fondi ---------------------------------------------------- */
  --paper:    #FFFFFF;
  --paper-2:  #F2F6F8;   /* la fascia grigio freddo del riferimento */
  --sea:      #0F5FB4;   /* la fascia blu: bianco sopra 6,33:1 */
  --sea-deep: #0A4A8F;   /* hover del bottone blu: bianco sopra 8,79:1 */
  --sea-wash: #E3EEF9;   /* il velo azzurro chiaro, dietro il modulo inviato */
  --sand:     #F4EBDC;   /* la terra della mappa: ink 15,5:1, body 5,07:1 */
  --btn:      #141414;   /* il bottone nero: bianco sopra 18,42:1 */

  /* --- inchiostri ----------------------------------------------- */
  --ink:      #131517;   /* 18,30:1 su bianco · 16,83:1 sulla fascia */
  --body:     #5B6470;   /*  6,00:1 su bianco ·  5,52:1 sulla fascia */
  --muted:    #7C858F;   /*  3,74:1: solo per righe grandi o grafica */
  --on-sea:   #FFFFFF;   /*  6,33:1 sul blu */
  --on-sea-2: #D6E5F7;   /*  4,95:1 sul blu: il testo secondario sulla fascia */

  /* --- filetti -------------------------------------------------- */
  --line:     #E4E8EC;   /* decorativo, separa e basta */
  --line-ui:  #7F8993;   /* bordo dei CAMPI: 3,56:1 su bianco, 3,27:1 sulla fascia */
  --focus:    #0F5FB4;
  --alert:    #B42318;   /* 6,57:1 su bianco */

  /* La velatura sopra i filmati: nero caldo, mai il blu di marca. I
     punti di controllo stanno in 04-scrolly.css. */
  --veil-ink: 20, 18, 16;

  /* --- tipografia ----------------------------------------------- */
  --sans:  'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Averia Serif Libre', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --t-h1:    clamp(2.6rem, 1.4rem + 4.6vw, 5.2rem);
  --t-h2:    clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  --t-h3:    clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  --t-lede:  clamp(1.08rem, 1rem + .35vw, 1.28rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;
  --t-label: .8125rem;

  /* --- forma ------------------------------------------------------
     Del riferimento: schede e schede-domanda a raggio 28 con un
     filetto sottile e un'ombra appena percepibile, fotografie a 20,
     campi a 12, pastiglie per tutto cio' che si preme. */
  --r:       28px;
  --r-img:   20px;
  --r-sm:    12px;
  --r-pill:  999px;

  --shadow-card: 0 1px 2px rgba(19,21,23,.04), 0 18px 40px -28px rgba(19,21,23,.22);
  --shadow-float: 0 2px 8px rgba(19,21,23,.08), 0 22px 50px -24px rgba(19,21,23,.35);

  /* --- ritmo -------------------------------------------------- */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem;   --s7: 3rem;  --s8: 4rem;   --s9: 6rem;

  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3.5rem);
  --measure: 36rem;
  --page-max: 86rem;
  --header-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}

/* 02-base.css */
/* ============================================================
   Fondamenta: reimpostazione, tipografia, bottoni, occhielli.
   I @font-face stanno in 01-tokens.css insieme alla tavolozza.
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
dl, dd { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.018em; font-weight: 600; }
p { margin: 0; }
p + p { margin-top: .9em; }

/* La parola in corsivo con grazie dentro un titolo: il gesto del
   riferimento («Escape the *ordinary*»). Un pelo piu' grande del
   tondo, perche' Averia ha l'occhio piccolo. */
.ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--body);
  text-wrap: pretty;
}
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
[id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: .7rem 1.1rem; background: var(--ink); color: #fff;
  border-radius: var(--r-pill); text-decoration: none; font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: .6rem; }

.todo {
  color: var(--alert);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   L'OCCHIELLO. Nel riferimento e' una riga piccola in tondo
   minuscolo sopra il titolo («About us», «Amenities»), non
   maiuscoletto e non pastiglia.
   ------------------------------------------------------------ */
.label {
  margin: 0 0 var(--s3);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.005em;
}

/* ------------------------------------------------------------
   IL BOTTONE. Pastiglia piena nera con testo bianco sulla pagina;
   bianca con testo nero sul blu e sulla pellicola. Nessuna icona.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 46px;
  padding: .72rem 1.35rem;
  background: var(--btn);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: #000; transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--paper-2); }
.btn--blue { background: var(--sea); }
.btn--blue:hover { background: var(--sea-deep); }
.btn--ghost { background: var(--paper-2); color: var(--ink); }
.btn--ghost:hover { background: var(--line); }
.btn--ghost-light { background: rgba(255,255,255,.16); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.28); }
.btn--full { width: 100%; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.actions--center { justify-content: center; }

.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.tick-list { display: grid; gap: .6rem; margin-top: var(--s5); }
.tick-list li { display: flex; gap: .6rem; align-items: flex-start; }
.tick-list .ico { color: var(--sea); margin-top: .2em; }

/* Le pastiglie piccole: chip dei filtri, delle etichette. */
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  background: var(--paper-2);
  color: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  font: inherit; font-size: var(--t-small); font-weight: 500;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.chip:hover { background: var(--line); }
.chip.is-on { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------
   Entrate in scena, sempre dietro `.js`.
   ------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* 03-layout.css */
/* ============================================================
   Impaginato: contenitore, fasce, testata, menu, piede.
   ============================================================ */

.wrap {
  width: 100%; max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 62rem; }

/* Le sezioni. Il riferimento alterna bianco, grigio freddo e blu a
   tutta larghezza, senza cornici. */
.section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.band-soft { background: var(--paper-2); }
.band-blue { background: var(--sea); color: var(--on-sea-2); }
.band-blue h1, .band-blue h2, .band-blue h3 { color: #fff; }
.band-blue .label { color: var(--on-sea-2); }
.band-blue .lede { color: var(--on-sea-2); }
.band-blue .table-note { color: var(--on-sea-2); }
.band-soft + .band-soft { padding-top: 0; }

.section-head { max-width: 40rem; }
.section-head h2 { max-width: 20ch; }
.section-head .lede { margin-top: var(--s4); max-width: 36rem; }
.section-head--center { margin-inline: auto; text-align: center; margin-bottom: var(--s7); }
.section-head--center h2 { margin-inline: auto; }
.section-head--center .lede { margin-inline: auto; }

/* Le pagine senza filmato cominciano sotto la barra. */
body:not([data-film]) main { padding-top: var(--header-h); }

/* ------------------------------------------------------------
   TESTATA.

   Sopra l'apertura: una PASTIGLIA bianca flottante, centrata, con
   marchio, voci e la chiamata all'azione nera dentro. Scorrendo (e su
   tutte le altre pagine): una barra bianca a tutta larghezza con un
   filetto sotto. Stesso elemento, due forme; `is-past` la scrive
   app.js quando l'apertura esce dallo schermo.
   ------------------------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center;
  padding: 14px var(--gutter) 0;
  pointer-events: none;
  transition: padding .28s var(--ease), background .28s var(--ease);
}
.header-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s5);
  width: 100%; max-width: 62rem;
  min-height: 56px;
  padding: 6px 6px 6px 20px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(19,21,23,.06), 0 14px 40px -18px rgba(19,21,23,.28);
  transition: max-width .28s var(--ease), border-radius .28s var(--ease), box-shadow .28s var(--ease), padding .28s var(--ease), min-height .28s var(--ease);
}
.site-header.is-past {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header.is-past .header-bar {
  max-width: none;
  min-height: var(--header-h);
  padding: 8px var(--gutter);
  border-radius: 0;
  box-shadow: none;
}

.site-brand { flex: none; text-decoration: none; color: var(--ink); }
.logo { display: inline-flex; align-items: center; gap: .5rem; }
.logo-mark { width: 26px; height: 20px; color: var(--sea); }
.logo-word { font-size: 1.1rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }

.nav-main { display: flex; align-items: center; gap: clamp(.9rem, .4rem + 1.2vw, 1.5rem); margin-inline: auto; }
.nav-link {
  padding: .45em 0;
  color: var(--ink); font-size: var(--t-small); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.nav-link:hover { color: var(--sea); }
.nav-link[aria-current="page"] { border-bottom-color: var(--ink); }

.header-cta { display: flex; align-items: center; gap: .4rem; flex: none; }
.lang-switch {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: .5em;
  border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .06em;
  text-decoration: none;
}
.lang-switch:hover { background: var(--line); }
.cta-book { min-height: 44px; padding-block: .6rem; }

.menu-toggle {
  display: none; align-items: center; gap: .55em;
  min-height: 44px; padding: .5em 1em;
  border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink);
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
}
.menu-bars { display: grid; gap: 4px; width: 16px; }
.menu-bars span { display: block; height: 1.6px; background: currentColor; border-radius: 2px; }

@media (max-width: 1080px) {
  .nav-main { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-cta { margin-inline-start: auto; }
}
@media (max-width: 640px) {
  .cta-book { display: none; }
  .site-header { padding-top: 10px; }
  .header-bar { padding-left: 14px; }
  .logo-word { font-size: 1rem; }
}
@media (max-width: 400px) {
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle { padding-inline: .8em; }
}

/* ------------------------------------------------------------
   Il menu a tutto schermo. Si apre con :target prima che arrivi il
   JavaScript.
   ------------------------------------------------------------ */
.site-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ink); color: rgba(255,255,255,.8);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), visibility .28s;
}
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; }
html.menu-open { overflow: hidden; }

.menu-inner {
  display: flex; flex-direction: column; gap: var(--s7);
  min-height: 100%;
  max-width: var(--page-max); margin-inline: auto;
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s7);
}
.menu-close {
  position: absolute; top: 14px; right: var(--gutter);
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,.12);
  color: #fff; font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.menu-cols { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.menu-list li + li { border-top: 1px solid rgba(255,255,255,.14); }
.menu-list a {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline;
  gap: 0 var(--s3); padding-block: var(--s3);
  color: #fff; text-decoration: none;
}
.menu-list em { font-style: normal; font-size: var(--t-label); font-weight: 600; color: var(--on-sea-2); letter-spacing: .1em; }
.menu-list span { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; }
.menu-list small { grid-column: 2; font-size: var(--t-small); color: rgba(255,255,255,.62); }
.menu-list a:hover span, .menu-list a[aria-current="page"] span { color: #9CC4F2; }
.menu-side h2 { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: var(--s4); }
.menu-side li + li { margin-top: .5rem; }
.menu-side a { color: #fff; text-decoration: none; font-size: var(--t-small); }
.menu-side a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-foot {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  margin-top: auto; padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.14);
}
.menu-tel { color: #fff; text-decoration: none; font-weight: 600; }
.menu-langs { display: flex; gap: var(--s3); margin-inline-start: auto; }
.menu-langs a { padding: .4em .9em; border-radius: var(--r-pill); background: rgba(255,255,255,.1); color: #fff; font-size: var(--t-small); text-decoration: none; }
.menu-langs a[aria-current="true"] { background: #fff; color: var(--ink); }
@media (max-width: 780px) { .menu-cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Il piede: bianco, con le otto case in elenco, i recapiti e la
   riga legale. La fotografia che sfuma nel bianco sta nel blocco
   `cta` subito sopra.
   ------------------------------------------------------------ */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.footer-body { padding-block: var(--s8) var(--s6); }
.footer-grid {
  display: grid; gap: var(--s7) var(--s6);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.footer-mark { display: inline-flex; color: var(--ink); }
.footer-blurb { margin-top: var(--s4); max-width: 30ch; font-size: var(--t-small); }
.footer-contacts { display: grid; gap: .55rem; margin-top: var(--s5); font-size: var(--t-small); }
.footer-contacts li { display: flex; gap: .6rem; align-items: center; }
.footer-contacts .ico { color: var(--sea); }
.footer-contacts a { color: var(--ink); text-decoration: none; }
.footer-contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-col h2 { font-size: var(--t-small); font-weight: 600; color: var(--ink); margin-bottom: var(--s4); }
.footer-list { display: grid; gap: .5rem; }
.footer-list a { color: var(--body); text-decoration: none; font-size: var(--t-small); }
.footer-list a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-label); color: var(--muted);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati: l'apertura e il racconto.

   L'apertura sta a tutto schermo, dal bordo alto, con la testata a
   pastiglia che le galleggia sopra come nel riferimento. Il racconto
   invece parte SOTTO la barra (che a quel punto e' piena) ed e' alto
   quanto lo schermo meno la barra.
   ============================================================ */

.videohero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #101418;
  isolation: isolate;
}
.film-stage { position: absolute; inset: 0; }

.vh-video, .vh-poster, .vh-poster img,
.scrolly-canvas, .scrolly-poster, .scrolly-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.vh-poster, .scrolly-poster { z-index: 0; }
[data-scrolly][data-painted='true'] .scrolly-poster { opacity: 0; }

/* ------------------------------------------------------------
   LA VELATURA DELL'APERTURA.

   Misurata su questo materiale (tools/analizza.py velo): nella fascia
   del titolo (x 0,2-0,8, y 0,28-0,62) il picco e' L=0,905 alle 5,75 s,
   il sole sul mare, ma la media e' 0,095: e' un filmato scuro con un
   punto abbagliante. Una lastra piatta che regga il picco (alfa 0,52
   per il corpo) spegnerebbe tutto il resto.

   Quindi: una base leggera a tutto campo, piu' un'ellisse morbida
   dietro il blocco di testo, che e' l'unica zona in cui il sole
   compare sotto le parole. I numeri finali sono in DESIGN.md, §7,
   misurati con tools/probe.mjs + tools/contrasto.py.
   ------------------------------------------------------------ */
.vh-veil {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 58% at 50% 42%,
      rgba(var(--veil-ink), .56) 0%,
      rgba(var(--veil-ink), .44) 38%,
      rgba(var(--veil-ink), .16) 70%,
      rgba(var(--veil-ink), 0) 100%),
    linear-gradient(to bottom,
      rgba(var(--veil-ink), .22) 0%,
      rgba(var(--veil-ink), .06) 30%,
      rgba(var(--veil-ink), .06) 70%,
      rgba(var(--veil-ink), .34) 100%);
}
@media (max-width: 700px) {
  .vh-veil {
    background:
      radial-gradient(ellipse 90% 46% at 50% 52%,
        rgba(var(--veil-ink), .64) 0%,
        rgba(var(--veil-ink), .52) 45%,
        rgba(var(--veil-ink), 0) 100%),
      linear-gradient(to bottom,
        rgba(var(--veil-ink), .24) 0%,
        rgba(var(--veil-ink), .08) 30%,
        rgba(var(--veil-ink), .16) 55%,
        rgba(var(--veil-ink), .60) 100%);
  }
}

/* Il blocco centrato, come nel riferimento: pastiglia di vetro,
   titolo con la parola in corsivo, una riga, la barra di ricerca. */
.vh-inner {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  padding: calc(var(--header-h) + var(--s5)) var(--gutter) var(--s8);
  text-align: center;
  color: #fff;
}
.vh-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem;
  /* Vetro SCURO, non chiaro: una pastiglia bianca traslucida
     schiarisce il proprio fondo e porta il testo bianco a 3:1 sul sole.
     Con il 38% di nero caldo il contrasto e' interno alla pastiglia. */
  background: rgba(var(--veil-ink), .38);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vh-badge .ico { color: #FFD86B; width: 1em; height: 1em; }
.vh-title {
  max-width: 14ch;
  color: #fff;
  font-size: var(--t-h1);
  /* L'alone: tre strati che seguono le lettere, cosi' il contrasto
     lo fa il testo e non una lastra sul fotogramma. */
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 8px 30px rgba(var(--veil-ink), .35), 0 24px 80px rgba(var(--veil-ink), .3);
}
.vh-sub {
  max-width: 44ch;
  /* 24px e' la soglia del testo grande: sopra, la norma chiede 3:1
     invece di 4,5, e sul sole quella differenza e' tutto. */
  font-size: clamp(1.1rem, 1rem + .62vw, 1.55rem);
  line-height: 1.45;
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 6px 24px rgba(var(--veil-ink), .35);
}

/* ------------------------------------------------------------
   LA BARRA DI RICERCA. Come quella di Airbnb: una pastiglia bianca
   bassa, tre celle divise da filetti (Dove, Quando, Chi) con
   l'etichetta in nero e il valore in grigio da segnaposto, e il
   bottone tondo blu dentro il bordo destro. Alta 66 px.
   ------------------------------------------------------------ */
.search {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr auto;
  align-items: center;
  width: min(100%, 52rem);
  margin-top: var(--s5);
  padding: 8px 8px 8px 0;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-float);
  text-align: left;
  color: var(--ink);
}
.search-cell {
  position: relative;
  display: grid; gap: 0;
  padding: .3rem 1.5rem;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.search-cell:first-child { border-left: 0; padding-left: 1.9rem; }
.search-k { font-size: .8125rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.search-v {
  display: block; width: 100%;
  border: 0; padding: 0; margin: 0; background: transparent;
  font: inherit; font-size: 1rem; line-height: 1.5;
  color: var(--body);
  text-align: left; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.search-v.is-set { color: var(--ink); }
.search-v:focus-visible { outline: none; }
.search-cell:focus-within { background: var(--paper-2); border-radius: var(--r-pill); border-left-color: transparent; }
.search-cell:focus-within + .search-cell { border-left-color: transparent; }
.search-select { padding-right: 1.4rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; }
.search-trigger { display: none; }
.js .search-trigger { display: block; }
.js .search-native { display: none; }
/* Senza JavaScript: i due campi nativi affiancati e il numero. */
.search-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.search-dates input, .search-n { border: 0; padding: 0; background: transparent; font: inherit; font-size: .9375rem; color: var(--ink); min-width: 0; width: 100%; }
.search-go {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  margin-left: .6rem;
  border: 0; border-radius: 50%;
  background: var(--sea); color: #fff;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.search-go:hover { background: var(--sea-deep); transform: scale(1.04); }
.search-go .ico { width: 22px; height: 22px; }

/* ------------------------------------------------------------
   LE TENDINE: il calendario e gli ospiti. Schede bianche a raggio 28
   con l'ombra, appese sotto la cella. I giorni sono cerchi; l'arrivo
   e la partenza sono cerchi neri e i giorni in mezzo hanno una
   banda grigio freddo. Le stesse tendine servono alla scheda di
   prenotazione delle case.
   ------------------------------------------------------------ */
.pop {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 50;
  padding: var(--s5);
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line);
  color: var(--ink);
  text-align: left;
  cursor: default;
}
.pop[hidden] { display: none; }
.pop--who { min-width: 18rem; }
.cal { display: flex; gap: var(--s6); }
.cal-month { width: 18.5rem; }
.cal-head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin-bottom: var(--s3); }
.cal-title { text-align: center; font-weight: 700; font-size: .95rem; text-transform: capitalize; }
.cal-nav {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
  font: inherit; cursor: pointer;
}
.cal-nav:hover { background: var(--paper-2); }
.cal-nav[disabled] { opacity: .25; cursor: default; }
.cal-nav[hidden] { visibility: hidden; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 600; color: var(--muted); padding-block: .3rem; text-transform: capitalize; }
.cal-day {
  position: relative; height: 40px;
  display: grid; place-items: center;
  border: 0; padding: 0; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink);
  cursor: pointer;
}
.cal-day span { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.cal-day:hover:not([disabled]) span { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal-day[disabled] { color: var(--muted); cursor: default; text-decoration: line-through; opacity: .55; }
.cal-day.is-range::before { content: ''; position: absolute; inset: 1px 0; background: var(--paper-2); }
.cal-day.is-start::before { content: ''; position: absolute; inset: 1px 0 1px 50%; background: var(--paper-2); }
.cal-day.is-end::before { content: ''; position: absolute; inset: 1px 50% 1px 0; background: var(--paper-2); }
.cal-day.is-start.is-end::before { display: none; }
.cal-day.is-start span, .cal-day.is-end span { background: var(--ink); color: #fff; }
.cal-day.is-empty { pointer-events: none; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--body); }
.cal-foot b { color: var(--ink); }
.pop-btn { border: 0; background: transparent; padding: .4rem .2rem; font: inherit; font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pop-btn--done { background: var(--btn); color: #fff; text-decoration: none; padding: .6rem 1.1rem; border-radius: var(--r-pill); }

.who-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.who-row b { display: block; font-weight: 600; }
.who-row small { display: block; font-size: var(--t-label); color: var(--body); }
.stepper { display: flex; align-items: center; gap: .8rem; }
.stepper output { min-width: 1.4ch; text-align: center; font-weight: 600; }
.step-btn {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--line-ui); border-radius: 50%;
  background: #fff; color: var(--ink);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.step-btn:hover { border-color: var(--ink); }
.step-btn[disabled] { opacity: .3; cursor: default; }

@media (max-width: 900px) {
  .search { grid-template-columns: 1.4fr 1fr auto; padding: 8px; border-radius: 26px; gap: 2px; }
  .search-cell { border-left: 0; padding: .5rem 1rem; border-radius: 18px; }
  .search-cell:first-child { grid-column: 1 / -1; padding-left: 1rem; }
  .search-cell:focus-within { border-radius: 18px; }
  .search-go { margin: 0; }
  .vh-scroll { display: none; }
  .pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 24rem); max-height: 88svh; overflow: auto; }
  .cal { flex-direction: column; }
  .cal-month { width: 100%; }
  .cal-month + .cal-month { display: none; }
}
@media (max-width: 700px) {
  .videohero { min-height: 640px; }
  .vh-inner { justify-content: flex-end; padding-bottom: var(--s6); gap: var(--s3); }
  .vh-title { max-width: 12ch; }
  .vh-sub { font-size: 1rem; }
}

.vh-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 4;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.85); font-size: var(--t-label); font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .5);
}
.vh-scroll span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vh-scroll i {
  width: 20px; height: 30px; border: 1.4px solid rgba(255,255,255,.6); border-radius: 10px; position: relative;
}
.vh-scroll i::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px;
  border-radius: 1px; background: rgba(255,255,255,.85);
  animation: scrollcue 1.9s var(--ease) infinite;
}
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(9px); opacity: .2; } }


/* ============================================================
   IL RACCONTO.

   Sezione alta --seq-vh: a 1400vh su una finestra da 900 sono
   11.700 px di corsa per 959 fotogrammi, cioe' 12 px per fotogramma
   interpolato (24 per fotogramma originale, la densita' che la
   serie ha visto accettare). Sul telefono di piu': un dito copre
   piu' strada di una tacca di rotella.
   ============================================================ */
.scrolly { position: relative; height: calc(var(--seq-vh, 1400) * 1vh); background: #101418; }
@media (max-width: 900px) { .scrolly { height: calc(var(--seq-vh-n, 1800) * 1vh); } }

.scrolly-stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: 0 var(--gutter) clamp(1.4rem, 3vh, 2.4rem);
}
.scrolly-canvas, .scrolly-poster, .scrolly-veil { inset: 0; }

/* ------------------------------------------------------------
   LA VELATURA DEL RACCONTO.

   Le didascalie stanno in basso, a sinistra o a destra capitolo per
   capitolo. Misurato in basso a sinistra: picco L=1,0 (la finestra
   della camera, 11 s) e media 0,19; a destra picco 0,79 e media 0,17.
   Una sfumatura dal basso, piu' una lavata laterale che segue il
   lato attivo con :has(): senza :has() restano tutt'e due.
   ------------------------------------------------------------ */
.scrolly-veil {
  position: absolute; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--veil-ink), .10) 0%,
    rgba(var(--veil-ink), 0) 22%,
    rgba(var(--veil-ink), 0) 46%,
    rgba(var(--veil-ink), .40) 70%,
    rgba(var(--veil-ink), .76) 100%);
}
.scrolly-veil::before, .scrolly-veil::after {
  content: ''; position: absolute; inset: 0;
  transition: opacity .4s var(--ease);
}
.scrolly-veil::before { background: linear-gradient(to right, rgba(var(--veil-ink), .52) 0%, rgba(var(--veil-ink), .26) 38%, rgba(var(--veil-ink), 0) 62%); }
.scrolly-veil::after  { background: linear-gradient(to left,  rgba(var(--veil-ink), .52) 0%, rgba(var(--veil-ink), .26) 38%, rgba(var(--veil-ink), 0) 62%); }
[data-scrolly]:has(.scrolly-phase.is-active[data-side='left']) .scrolly-veil::after { opacity: 0; }
[data-scrolly]:has(.scrolly-phase.is-active[data-side='right']) .scrolly-veil::before { opacity: 0; }
@media (max-width: 700px) {
  .scrolly-veil {
    background: linear-gradient(to bottom,
      rgba(var(--veil-ink), .12) 0%,
      rgba(var(--veil-ink), 0) 20%,
      rgba(var(--veil-ink), .30) 50%,
      rgba(var(--veil-ink), .68) 74%,
      rgba(var(--veil-ink), .84) 100%);
  }
  .scrolly-veil::before, .scrolly-veil::after { display: none; }
}

/* L'apertura del racconto: centrata, come il titolo dell'apertura
   della home, cosi' i due filmati parlano la stessa lingua.
   NIENTE transform qui: il motore ne scrive uno in linea per il
   dissolvimento. Centrare con il flusso. */
.scrolly-lead {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s6) var(--gutter);
  text-align: center;
  pointer-events: none;
  /* L'ellisse sta SUL titolo e non sulla velatura, cosi' sbiadisce
     insieme a lui: il motore scrive l'opacita' di .scrolly-lead e il
     fondo la segue. Nei primi 0,9 s il sole sta esattamente al centro,
     sopra Portofino, e senza questa il titolo misurava 1,2:1. */
  background: radial-gradient(ellipse 52% 46% at 50% 50%,
    rgba(var(--veil-ink), .66) 0%,
    rgba(var(--veil-ink), .52) 45%,
    rgba(var(--veil-ink), 0) 100%);
}
.label--film { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(var(--veil-ink), .5); }
.lead-title {
  max-width: 14ch;
  color: #fff;
  font-size: var(--t-h1);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 8px 30px rgba(var(--veil-ink), .35), 0 24px 80px rgba(var(--veil-ink), .3);
}
.lead-sub {
  margin-top: var(--s4);
  max-width: 40ch;
  font-size: clamp(1.1rem, 1rem + .62vw, 1.55rem);
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 6px 24px rgba(var(--veil-ink), .35);
}

/* Le didascalie: in basso, sul lato del capitolo. Il numerale, il
   titolo in Manrope e una riga. Entrano con una dissolvenza e una
   salita di dieci pixel, scaglionate. */
.scrolly-captions { grid-row: 3; position: relative; z-index: 3; display: grid; }
.scrolly-phase {
  grid-area: 1 / 1;
  display: flex;
  opacity: 0;
  pointer-events: none;
}
.scrolly-phase[data-side='right'] { justify-content: flex-end; }
.cap { width: min(100%, 30rem); color: #fff; }
.scrolly-phase[data-side='right'] .cap { text-align: right; }
.cap > * { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.scrolly-phase.is-active .cap > * { opacity: 1; transform: none; }
.scrolly-phase.is-active .cap > :nth-child(2) { transition-delay: .08s; }
.scrolly-phase.is-active .cap > :nth-child(3) { transition-delay: .16s; }
.cap-k { display: flex; align-items: baseline; gap: .6rem; font-size: var(--t-small); font-weight: 600; color: rgba(255,255,255,.92); }
.scrolly-phase[data-side='right'] .cap-k { justify-content: flex-end; }
.cap-k b { font-size: 1.1rem; }
.cap-title {
  margin-top: .5rem;
  color: #fff;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.08;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 8px 26px rgba(var(--veil-ink), .3);
}
.cap-text {
  margin-top: .6rem;
  /* 24px e' la soglia del testo grande: sopra, la norma chiede 3:1
     invece di 4,5, e sul telefono la riga scende a 1.05rem con una
     velatura piu' densa sotto. */
  font-size: 1.5rem; line-height: 1.35;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 6px 22px rgba(var(--veil-ink), .3);
}

/* L'avanzamento: un filetto sul bordo basso con le tacche ai confini
   VERI dei capitoli. Il riempimento e' la barra del motore. */
.scrolly-counter { grid-row: 2; position: relative; z-index: 5; margin-bottom: var(--s4); }
.edit-rule { position: relative; height: 2px; background: rgba(255,255,255,.3); }
.edit-rule .tick { position: absolute; top: -4px; left: var(--at); width: 1px; height: 10px; background: rgba(255,255,255,.6); }
.scrolly-progress { position: absolute; inset: 0; overflow: hidden; }
.scrolly-progress i { display: block; height: 100%; width: 0; background: #fff; }

@media (max-width: 700px) {
  .scrolly-stage { padding-inline: var(--s4); }
  .cap { width: 100%; }
  .scrolly-phase[data-side='right'] .cap, .scrolly-phase[data-side='right'] .cap-k { text-align: left; justify-content: flex-start; }
  .cap-title { font-size: 1.55rem; }
  .cap-text { font-size: 1.05rem; }
  .lead-title { max-width: 12ch; }
}

/* ------------------------------------------------------------
   IL RIPIEGO SENZA JAVASCRIPT. `.scrolly[data-mode='static']`,
   sull'elemento stesso e non su un antenato.
   ------------------------------------------------------------ */
.scrolly[data-mode='static'] { height: auto; background: var(--paper); }
.scrolly[data-mode='static'] .scrolly-stage {
  position: static; display: block; height: auto; padding: 0 0 var(--s8);
}
.scrolly[data-mode='static'] .scrolly-canvas,
.scrolly[data-mode='static'] .scrolly-counter { display: none; }
.scrolly[data-mode='static'] .scrolly-poster { position: relative; height: clamp(360px, 62svh, 660px); }
.scrolly[data-mode='static'] .scrolly-veil { height: clamp(360px, 62svh, 660px); inset: 0 0 auto; }
.scrolly[data-mode='static'] .scrolly-veil::before, .scrolly[data-mode='static'] .scrolly-veil::after { display: none; }
.scrolly[data-mode='static'] .scrolly-stage { position: relative; }
.scrolly[data-mode='static'] .scrolly-lead {
  position: absolute; inset: 0 0 auto; height: clamp(360px, 62svh, 660px);
  justify-content: center;
}
.scrolly[data-mode='static'] .scrolly-captions {
  position: static; display: grid; gap: var(--s7);
  width: min(100% - var(--gutter) * 2, var(--page-max));
  margin: var(--s8) auto 0; padding: 0;
}
.scrolly[data-mode='static'] .scrolly-phase {
  grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--s5); align-items: center;
  opacity: 1; pointer-events: auto;
  padding-top: var(--s6); border-top: 1px solid var(--line);
}
.scrolly[data-mode='static'] .cap { text-align: left; }
.scrolly[data-mode='static'] .cap > * { opacity: 1; transform: none; }
.scrolly[data-mode='static'] .cap-k { color: var(--body); justify-content: flex-start; }
.scrolly[data-mode='static'] .cap-title { color: var(--ink); text-shadow: none; }
.scrolly[data-mode='static'] .cap-text { color: var(--body); text-shadow: none; font-size: var(--t-body); }
.scrolly[data-mode='static'] .scrolly-still img { border-radius: var(--r-img); aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 700px) { .scrolly[data-mode='static'] .scrolly-phase { grid-template-columns: 1fr; } }
.scrolly[data-mode='scrub'] .scrolly-still { display: none; }

/* 05-blocks.css */
/* ============================================================
   I blocchi editoriali.
   ============================================================ */

.table-note { margin-top: var(--s5); font-size: var(--t-label); color: var(--body); max-width: 62ch; }
.table-note--center { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------
   Le case in griglia. La scheda: fotografia a raggio 20, nome,
   riga, fatti con le icone, prezzo di partenza. Nessun bordo:
   sulla pagina bianca la separazione la fa la fotografia.
   ------------------------------------------------------------ */
.case { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.case[data-cols='3'] { --cols: 3; }
.case[data-cols='4'] { --cols: 4; }
.casa { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.casa[hidden] { display: none; }
.casa-figure { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--paper-2); }
.casa-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--ease); }
.casa:hover .casa-figure img { transform: scale(1.03); }
.casa-zona {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .8rem;
  background: rgba(255,255,255,.92); color: var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--t-label); font-weight: 600;
  backdrop-filter: blur(6px);
}
.casa-zona .ico { width: 1em; height: 1em; color: var(--sea); }
.casa-body { display: grid; gap: .35rem; padding: var(--s4) .25rem 0; }
.casa-body h3 { font-size: 1.25rem; }
.casa-tag { font-size: var(--t-small); color: var(--body); }
.facts { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--t-small); color: var(--body); }
.facts li { display: inline-flex; align-items: center; gap: .4rem; }
.facts .ico { width: 1.1em; height: 1.1em; color: var(--ink); }
.casa-price { margin-top: .35rem; font-size: var(--t-small); color: var(--body); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.casa-price b { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.casa-rating { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; color: var(--ink); font-weight: 600; }
.casa-rating .ico { width: 1em; height: 1em; }
.alloggi-section .actions { justify-content: center; }
.case-vuoto { text-align: center; padding: var(--s7) 0; color: var(--body); }
@media (max-width: 1100px) { .case[data-cols='4'] { --cols: 3; } }
@media (max-width: 900px) { .case { --cols: 2 !important; } }
@media (max-width: 560px) { .case { --cols: 1 !important; } }

/* I filtri sulla pagina delle case. */
.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-bottom: var(--s6); }
.filtri-stato { font-size: var(--t-small); color: var(--body); }
.filtri-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtri-date { width: 100%; font-size: var(--t-small); color: var(--ink); }
.filtri-date[hidden] { display: none; }

/* ------------------------------------------------------------
   La griglia di fotografie: due colonne di due, una grande.
   ------------------------------------------------------------ */
.gal {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.gal-item { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--paper-2); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.gal-item--5 { grid-column: 3 / 5; grid-row: 1 / 3; }
.gal-item--5 img { aspect-ratio: auto; }
.gal-item figcaption { position: absolute; left: 12px; bottom: 12px; }
.gal-item figcaption a {
  display: inline-block; padding: .3rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: var(--t-label); font-weight: 600; text-decoration: none;
}
@media (max-width: 700px) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .gal-item--5 { grid-column: 1 / 3; grid-row: auto; }
  .gal-item--5 img { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------------------
   Le pastiglie dei servizi sulla fascia blu. Bianco al 14% sul
   blu: il testo bianco sopra sta a 4,75:1.
   ------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.chip--ico {
  padding: .8rem 1.3rem;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 1rem; font-weight: 600; cursor: default;
}
.chip--ico:hover { background: rgba(255,255,255,.14); }
.chip--ico .ico { width: 1.35em; height: 1.35em; }

/* ------------------------------------------------------------
   Le linguette. Radio + :has(): senza JavaScript e senza :has() i
   pannelli stanno tutti, impilati.
   ------------------------------------------------------------ */
.tab-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin-bottom: var(--s5); padding: 6px; background: var(--paper-2); border-radius: var(--r-pill); width: fit-content; margin-inline: auto; }
.tab-h input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tab-h label {
  display: inline-block; padding: .65rem 1.2rem; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600; color: var(--body); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tab-h label:hover { color: var(--ink); }
.tab-h input:checked + label { background: #fff; color: var(--ink); box-shadow: var(--shadow-card); }
.tab-h input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.tab-panels { display: grid; gap: var(--s6); }
.tab-p { position: relative; }
.tab-figure { overflow: hidden; border-radius: var(--r); background: var(--paper-2); }
.tab-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.glass {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-img);
  box-shadow: var(--shadow-card);
}
.tab-card { position: absolute; top: var(--s5); right: var(--s5); width: min(22rem, calc(100% - var(--s5) * 2)); padding: var(--s4) var(--s5); }
.tab-card-t { font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.tab-data { display: grid; gap: .45rem; }
.tab-data > div { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; font-size: var(--t-small); }
.tab-data dt { display: inline-flex; align-items: center; gap: .45rem; color: var(--body); }
.tab-data dd { color: var(--ink); font-weight: 700; white-space: nowrap; }
.tab-text { margin-top: var(--s4); max-width: 52ch; color: var(--body); }
@supports selector(:has(a)) {
  .tabs:has(input[value='0']:checked) .tab-p:not([data-tab='0']),
  .tabs:has(input[value='1']:checked) .tab-p:not([data-tab='1']),
  .tabs:has(input[value='2']:checked) .tab-p:not([data-tab='2']),
  .tabs:has(input[value='3']:checked) .tab-p:not([data-tab='3']) { display: none; }
}
@media (max-width: 700px) {
  .tab-figure img { aspect-ratio: 4 / 3; }
  .tab-card { position: static; width: auto; margin-top: var(--s4); }
}

/* ------------------------------------------------------------
   Le due schede del prezzo: bianche sulla fascia grigia, raggio 28,
   righe con l'icona.
   ------------------------------------------------------------ */
.price-grid { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-card {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow-card);
}
.price-card h3 { font-size: 1.4rem; }
.price-lead { color: var(--body); }
.price-list { display: grid; gap: .8rem; }
.price-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink); }
.price-list .ico { color: var(--body); margin-top: .15em; }
.price-card .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 800px) { .price-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   La fascia blu con i tre recapiti.
   ------------------------------------------------------------ */
.help-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-card {
  display: grid; gap: .25rem;
  padding: var(--s5);
  background: rgba(255,255,255,.12); color: #fff;
  border-radius: var(--r); text-decoration: none;
  transition: background .18s var(--ease);
}
.help-card:hover { background: rgba(255,255,255,.2); }
.help-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .5rem; border-radius: 50%; background: rgba(255,255,255,.16); }
.help-ico .ico { width: 22px; height: 22px; }
.help-k { font-size: var(--t-label); font-weight: 600; color: var(--on-sea-2); }
.help-card b { font-size: 1.1rem; font-weight: 700; word-break: break-word; }
.help-sub { font-size: var(--t-small); color: var(--on-sea-2); }
@media (max-width: 800px) { .help-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Le recensioni: la scheda del punteggio e le citazioni.
   ------------------------------------------------------------ */
.rev-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); }
.rev-score, .rev { padding: var(--s6); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); }
.rev-big { display: flex; align-items: baseline; gap: .4rem; color: var(--ink); }
.rev-big .ico { width: 1.4rem; height: 1.4rem; align-self: center; }
.rev-big b { font-size: 3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rev-big span { color: var(--body); }
.rev-where { margin-top: .5rem; font-size: var(--t-small); color: var(--body); }
.rev-bars { display: grid; gap: .55rem; margin-top: var(--s5); }
.rev-bars li { display: grid; grid-template-columns: 6.5rem 1fr 2.4rem; align-items: center; gap: .6rem; font-size: var(--t-label); color: var(--body); }
.rev-bars i { display: block; height: 4px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.rev-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 2px; }
.rev-bars b { text-align: right; color: var(--ink); }
.rev-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s5); font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: none; }
.rev-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rev-stars { display: flex; gap: .15rem; color: var(--ink); }
.rev-stars .ico { width: 1rem; height: 1rem; }
.rev blockquote { margin: var(--s4) 0 0; }
.rev blockquote p { color: var(--ink); font-size: 1.05rem; line-height: 1.5; }
.rev figcaption { margin-top: var(--s5); display: grid; font-size: var(--t-small); }
.rev figcaption b { color: var(--ink); }
.rev figcaption span { color: var(--body); }
@media (max-width: 900px) { .rev-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Le domande: schede a pastiglia con il segno piu' a sinistra.
   ------------------------------------------------------------ */
.faq { display: grid; gap: var(--s3); }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); }
.qa summary {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6);
  cursor: pointer; list-style: none;
  font-size: 1.1rem; font-weight: 600; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa-sign { position: relative; width: 18px; height: 18px; flex: none; }
.qa-sign::before, .qa-sign::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--ink); border-radius: 1px; }
.qa-sign::before { width: 16px; height: 2px; }
.qa-sign::after { width: 2px; height: 16px; transition: transform .2s var(--ease); }
.qa[open] .qa-sign::after { transform: scaleY(0); }
.qa-body { padding: 0 var(--s6) var(--s5) calc(var(--s6) + 18px + var(--s4)); max-width: 62ch; color: var(--body); }

/* ------------------------------------------------------------
   La chiusura: fotografia a tutto campo che sfuma nel bianco.
   ------------------------------------------------------------ */
.cta-section { position: relative; padding: 0; min-height: 34rem; display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.cta-film { position: absolute; inset: 0; z-index: -1; }
.cta-film img { width: 100%; height: 100%; object-fit: cover; }
.cta-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--veil-ink), .34) 0%, rgba(var(--veil-ink), .34) 55%, rgba(255,255,255,0) 82%, #fff 100%); }
.cta-inner { text-align: center; color: #fff; padding-block: var(--s9) calc(var(--s9) + 4rem); }
.cta-inner h2 { color: #fff; max-width: 16ch; margin-inline: auto; text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 8px 30px rgba(var(--veil-ink), .35); }
.cta-inner .lede { color: #fff; max-width: 40ch; margin: var(--s4) auto 0; text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 6px 22px rgba(var(--veil-ink), .3); }

/* ------------------------------------------------------------
   Apertura di pagina interna, testo, immagine e testo, passi,
   righe, numeri, tabella.
   ------------------------------------------------------------ */
.pagehero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.pagehero--img { min-height: 62svh; display: grid; align-items: end; color: #fff; padding-top: calc(var(--header-h) + var(--s7)); margin-top: calc(var(--header-h) * -1); }
.ph-media { position: absolute; inset: 0; overflow: hidden; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; }
.ph-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--veil-ink), .18) 0%, rgba(var(--veil-ink), .1) 40%, rgba(var(--veil-ink), .72) 100%); }
.ph-inner { position: relative; }
.pagehero--img h1, .pagehero--img .lede, .pagehero--img .label { color: #fff; text-shadow: 0 1px 2px rgba(var(--veil-ink), .45), 0 6px 24px rgba(var(--veil-ink), .3); }
.pagehero .lede { margin-top: var(--s4); max-width: 44ch; }
.pagehero h1 { max-width: 16ch; }
.pagehero .search { margin-top: var(--s6); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s4); font-size: var(--t-label); }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--muted); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pagehero--img .breadcrumb { color: rgba(255,255,255,.85); }

.text-grid { display: grid; gap: var(--s6) var(--s8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 900px) { .text-grid { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.split[data-side='right'] .split-figure { order: 2; }
.split-figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r); }
.split-figure figcaption { margin-top: .6rem; font-size: var(--t-label); color: var(--muted); }
.split-body { max-width: 46ch; }
.split-body .lede { margin-top: var(--s4); }
.split-body .prose { margin-top: var(--s4); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split[data-side='right'] .split-figure { order: 0; } }

.steps { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.step { padding: var(--s5); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); }
.step-n { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s4); border-radius: 50%; background: var(--sea); color: #fff; font-size: var(--t-label); font-weight: 700; }
.step p { margin-top: .5rem; font-size: var(--t-small); }

.rows { margin-top: var(--s6); }
.row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); color: var(--sea); }
.row p { margin-top: .35rem; font-size: var(--t-small); max-width: 56ch; }
.row-meta { font-size: var(--t-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 700px) { .row { grid-template-columns: 2.6rem minmax(0, 1fr); } .row-meta { grid-column: 2; } }

.stats { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.stat { padding-top: var(--s4); border-top: 2px solid var(--sea); }
.stat dd { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.stat dt { margin-top: .5rem; font-size: var(--t-small); max-width: 26ch; }

.table-scroll { position: relative; overflow-x: auto; margin-top: var(--s6); }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: var(--t-label); font-weight: 600; color: var(--muted); border-bottom-color: var(--line-ui); }
.table tbody th { font-weight: 600; color: var(--ink); }

/* Contatto. */
.contact-grid { display: grid; gap: var(--s7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.contact-side .lede { margin-top: var(--s4); max-width: 38ch; }
.contact-lines { display: grid; gap: var(--s4); margin-top: var(--s6); }
.contact-lines li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-lines .ico { color: var(--sea); margin-top: .2em; }
.contact-lines span { display: block; font-size: var(--t-label); color: var(--muted); }
.contact-lines a, .contact-lines b { color: var(--ink); font-weight: 600; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-form { padding: clamp(1.25rem, .8rem + 1.6vw, 2.2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* 06-forms.css */
/* ============================================================
   Moduli. Il bordo di un campo e' un elemento di interfaccia, non
   un filetto: la norma gli chiede 3:1 e --line-ui sta a 3,43:1.
   ============================================================ */
.form-grid { display: grid; gap: var(--s4); }
.field { display: grid; gap: .4rem; }
.field label, .fieldset-legend { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.req { color: var(--alert); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--line-ui);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font: inherit; font-size: var(--t-small);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--alert); }
.field-error { font-size: var(--t-label); color: var(--alert); }
@media (min-width: 620px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > *:not(.field--half) { grid-column: 1 / -1; }
}
.consents { display: grid; gap: var(--s3); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; }
.consent input { margin: .28rem 0 0; width: 17px; height: 17px; accent-color: var(--sea); }
.consent label { font-size: var(--t-label); color: var(--body); line-height: 1.5; }
.consent label a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.form-note { margin: 0; font-size: var(--t-label); color: var(--muted); }
.form-done { display: none; }
form[data-state='done'] { display: none; }
form[data-state='done'] + .form-done { display: block; padding: var(--s5); background: var(--sea-wash); border-radius: var(--r); }
.form-done h3 { margin-bottom: var(--s2); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto. Entra al 40% di scorrimento oppure dopo
   25 secondi; mai all'apertura; trattenuto sopra i filmati e sopra
   la scheda di prenotazione; chiuso una volta, resta chiuso sette
   giorni. Una domanda sola prima del modulo: per quante persone.
   ============================================================ */
.b2b-panel {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 70;
  width: min(24rem, calc(100vw - var(--s4) * 2));
  max-height: min(78svh, 42rem);
  overflow-y: auto;
  padding: var(--s5);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-float);
  transform: translateY(14px); opacity: 0;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--body); font-size: 1.1rem; cursor: pointer;
}
.b2b-close:hover { color: var(--ink); background: var(--paper-2); }
.b2b-panel h2 { font-size: var(--t-h3); margin-bottom: var(--s2); padding-right: var(--s6); }
.b2b-intro { font-size: var(--t-small); color: var(--body); margin-bottom: var(--s4); }
.b2b-choices { display: grid; gap: var(--s2); }
.b2b-option {
  display: grid; gap: .15rem; width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); font: inherit; cursor: pointer;
}
.b2b-option:hover { border-color: var(--line-ui); background: var(--paper-2); }
.b2b-option b { font-weight: 600; color: var(--ink); }
.b2b-option span { font-size: var(--t-label); color: var(--body); }
.b2b-back { margin-bottom: var(--s3); padding: 0; border: 0; background: none; color: var(--sea); font: inherit; font-size: var(--t-label); cursor: pointer; }
.b2b-back:hover { text-decoration: underline; }
@media (max-width: 620px) {
  .b2b-panel { right: var(--s2); left: var(--s2); bottom: var(--s2); width: auto; }
}

/* 08-alloggio.css */
/* ============================================================
   LA SCHEDA DELLA CASA. La struttura della pagina di Airbnb che il
   cliente ha registrato: titolo, cinque fotografie in griglia,
   contenuto a sinistra e la scheda di prenotazione appiccicata a
   destra.
   ============================================================ */
.alloggio { padding-block: var(--s5) var(--s9); }
.al-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.al-head h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }
.al-tag { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; font-size: var(--t-small); color: var(--body); }
.al-tag .ico { width: 1.1em; height: 1.1em; color: var(--sea); }
.al-rating { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-weight: 700; }
.al-rating .ico { width: 1em; height: 1em; color: var(--ink); }
.al-rating small { font-weight: 500; color: var(--body); }
.al-allfoto { font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* Cinque fotografie: una grande a sinistra, quattro a destra. */
.ag {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-img); overflow: hidden;
  aspect-ratio: 2 / 1;
}
.ag-item { position: relative; overflow: hidden; background: var(--paper-2); }
.ag-item a, .ag-item picture { display: block; height: 100%; }
.ag-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ag-item:hover img { transform: scale(1.03); }
.ag-item--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
@media (max-width: 700px) {
  .ag { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; aspect-ratio: auto; }
  .ag-item--1 { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 4 / 3; }
  .ag-item:not(.ag-item--1) { aspect-ratio: 4 / 3; }
  .ag-item--4, .ag-item--5 { display: none; }
}

.al-grid { display: grid; gap: var(--s8); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); margin-top: var(--s7); align-items: start; }
.al-main > section, .al-main > ul { padding-block: var(--s6); border-top: 1px solid var(--line); }
.al-main > section:first-child { padding-top: 0; border-top: 0; }
.al-main h2 { font-size: 1.45rem; margin-bottom: var(--s4); }
.al-sum h2 { margin-bottom: .6rem; }
.al-sum .facts { font-size: 1rem; }

.al-punti { display: grid; gap: var(--s4); }
.al-punti li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s3); align-items: start; }
.al-punti .ico { width: 26px; height: 26px; color: var(--ink); margin-top: .1rem; }
.al-punti b { display: block; color: var(--ink); font-weight: 600; }
.al-punti span { font-size: var(--t-small); color: var(--body); }
.al-desc p { color: var(--body); }

.stanze { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); max-width: 44rem; }
.stanza img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.stanza h3 { margin-top: .7rem; font-size: 1rem; }
.stanza p { font-size: var(--t-small); color: var(--body); }

.servizi { display: grid; gap: .8rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.servizi li { display: flex; align-items: center; gap: .7rem; color: var(--ink); }
.servizi .ico { width: 24px; height: 24px; color: var(--ink); }
@media (max-width: 480px) { .servizi { grid-template-columns: 1fr; } }

.regole { display: grid; gap: .8rem; }
.regole li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-small); color: var(--body); }
.regole .ico { width: 22px; height: 22px; color: var(--ink); margin-top: .05rem; }
.regole b { color: var(--ink); font-weight: 600; }
.al-cin { margin-top: var(--s4); font-size: var(--t-label); color: var(--muted); }

/* La scheda di prenotazione, appiccicata. */
.al-side { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); }
.book {
  padding: var(--s5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-float);
}
.book-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: var(--s4); color: var(--body); }
.book-price b { font-size: 1.6rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.book-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-ui); border-radius: var(--r-sm); overflow: hidden; }
.book-f { display: grid; gap: .1rem; padding: .6rem .8rem; border-left: 1px solid var(--line-ui); border-top: 1px solid var(--line-ui); }
.book-f:first-child { border-left: 0; border-top: 0; }
.book-f:nth-child(2) { border-top: 0; }
.book-f--wide { grid-column: 1 / -1; border-left: 0; }
.book-f span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.book-f input, .book-f select { border: 0; padding: 0; background: transparent; font: inherit; font-size: var(--t-small); color: var(--ink); width: 100%; }
.book-trigger { display: none; border: 0; padding: 0; background: transparent; font: inherit; font-size: var(--t-small); color: var(--body); text-align: left; cursor: pointer; width: 100%; }
.book-trigger.is-set { color: var(--ink); }
.js .book-trigger { display: block; }
.js .book-f .search-native { display: none; }
.book-fields { position: relative; }
.book-fields .pop { left: auto; right: 0; }
.book-f input:focus-visible, .book-f select:focus-visible { outline: none; }
.book-f:focus-within { background: var(--paper-2); }
.book-sum[hidden], .book-min[hidden] { display: none; }
.book-sum { display: grid; gap: .5rem; margin-top: var(--s4); font-size: var(--t-small); color: var(--body); }
.book-sum > div { display: flex; justify-content: space-between; gap: var(--s4); }
.book-sum dd { color: var(--ink); }
.book-tot { padding-top: .5rem; border-top: 1px solid var(--line); font-weight: 700; color: var(--ink); }
.book-min { margin-top: var(--s3); padding: .6rem .8rem; background: var(--sand); border-radius: var(--r-sm); font-size: var(--t-label); color: var(--ink); }
.book .btn { margin-top: var(--s4); }
.book-note { margin-top: .7rem; text-align: center; font-size: var(--t-label); color: var(--body); }
.book-note + .book-note { margin-top: .3rem; }
.book-host { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--paper-2); border-radius: var(--r); }
.book-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sea); color: #fff; }
.book-avatar .ico { width: 22px; height: 22px; }
.book-host b { display: block; color: var(--ink); }
.book-host span { font-size: var(--t-label); color: var(--body); }
.book-wa { margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0E7A6D; color: #fff; }
.book-wa .ico { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .al-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .al-side { position: static; }
}

/* Tutte le fotografie. */
.al-foto { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.al-foto h2 { font-size: 1.45rem; margin-bottom: var(--s5); }
.al-foto h2 span { color: var(--muted); font-weight: 500; }
.fototour { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fototour img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
@media (max-width: 700px) { .fototour { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dove sta. */
.al-dove { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.al-dove h2 { font-size: 1.45rem; margin-bottom: var(--s5); }
.al-dove-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.al-addr { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink); }
.al-addr .ico { color: var(--sea); }
.al-dist dl { display: grid; gap: .7rem; margin-top: var(--s4); }
.al-dist dl > div { display: flex; justify-content: space-between; gap: var(--s4); padding-bottom: .6rem; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.al-dist dt { display: inline-flex; align-items: center; gap: .5rem; color: var(--body); }
.al-dist dd { color: var(--ink); font-weight: 600; text-align: right; }
.al-dist-note { margin-top: var(--s4); font-size: var(--t-small); color: var(--body); }
@media (max-width: 800px) { .al-dove-grid { grid-template-columns: 1fr; } }

/* 09-mappa.css */
/* ============================================================
   LA MAPPA DEL GOLFO, il blocco firma.

   La costa e' quella vera. Il palco ha un rapporto FISSO uguale a
   quello del riquadro proiettato: appena si scosta, l'SVG si mette a
   lettera e i segni HTML scivolano via dai loro punti.
   ============================================================ */
.mappa { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
.m-palco {
  position: relative;
  aspect-ratio: 1000 / 625;
  overflow: hidden;
  border-radius: var(--r);
  background: #CFE3F1;
}
.m-tela { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-terra { fill: var(--sand); stroke: #A9C1D2; stroke-width: 1.2; }
.m-scogli { fill: var(--sand); }
.m-luogo circle { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.m-luogo--mare circle { stroke: var(--sea); }
.m-luogo--treno circle { fill: var(--ink); }

/* Lo strato dei segni: trasparente e lascia passare il puntatore;
   i bottoni no. */
.m-segni { position: absolute; inset: 0; pointer-events: none; }
.m-eti {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(8px, -50%);
  font-size: .7rem; font-weight: 600; color: var(--body); white-space: nowrap;
  text-shadow: 0 0 4px var(--sand), 0 0 4px var(--sand);
}
.m-eti--mare { color: var(--sea); text-shadow: 0 0 4px #CFE3F1, 0 0 4px #CFE3F1; }
.m-eti--paese { transform: translate(-50%, 10px); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.m-segno {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: var(--sea); color: #fff;
  font: inherit; font-size: .8rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(19,21,23,.25);
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.m-segno:hover, .m-segno.is-on { transform: translate(-50%, -50%) scale(1.18); background: var(--ink); z-index: 2; }
.m-segno-n {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  padding: .25rem .6rem; border-radius: var(--r-pill);
  background: #fff; color: var(--ink);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-card);
  opacity: 0; transition: opacity .18s var(--ease);
  pointer-events: none;
}
.m-segno:hover .m-segno-n, .m-segno.is-on .m-segno-n, .m-segno:focus-visible .m-segno-n { opacity: 1; }

.m-colonna { display: grid; }
.m-scheda { grid-area: 1 / 1; padding: var(--s6); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-card); }
.m-scheda[hidden] { display: none; }
.m-scheda-k { font-size: var(--t-label); font-weight: 600; color: var(--sea); margin-bottom: .4rem; }
.m-scheda h3 { font-size: 1.35rem; }
.m-scheda > p { margin-top: .5rem; font-size: var(--t-small); color: var(--body); }
.m-dist { display: grid; gap: .5rem; margin-top: var(--s4); }
.m-dist > div { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-small); padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.m-dist dt { display: inline-flex; align-items: center; gap: .45rem; color: var(--body); }
.m-dist dd { color: var(--ink); font-weight: 600; white-space: nowrap; }
.m-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s4); font-size: var(--t-small); font-weight: 600; color: var(--ink); text-decoration: none; }
.m-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.m-legenda { display: grid; gap: .45rem; margin-top: var(--s4); font-size: var(--t-small); color: var(--body); }
.m-legenda li { display: flex; align-items: center; gap: .6rem; }
.m-key { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.m-key--casa { background: var(--sea); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.m-key--mare { background: #fff; border: 1.5px solid var(--sea); }
.m-key--treno { background: var(--ink); }

.m-elenco { display: grid; gap: .3rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: var(--s6); }
.m-elenco a { display: grid; grid-template-columns: 2rem 1fr; gap: 0 .4rem; padding: .5rem 0; color: var(--ink); text-decoration: none; font-size: var(--t-small); font-weight: 600; }
.m-elenco b { color: var(--sea); }
.m-elenco span { grid-column: 2; font-weight: 400; color: var(--body); font-size: var(--t-label); }
.m-elenco a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* La mappa piccola nella scheda della casa: un solo pallino, con
   l'alone, e la camera centrata sul punto. */
.m-palco--mini { aspect-ratio: 4 / 3; }
.m-tela--mini { transform: scale(1.9); transform-origin: var(--cx) var(--cy); }
.m-pin-svg circle { fill: var(--sea); stroke: #fff; stroke-width: 2.5; }
.m-pin-svg .m-pin-halo { fill: rgba(15,95,180,.18); stroke: none; }
.m-palco--mini .m-luogo { display: none; }

@media (max-width: 900px) {
  .mappa { grid-template-columns: 1fr; }
  .m-segno-n { display: none; }
}