/* ============================================================
   Inversini Luxury Services · pages.css
   Componenti delle pagine interne. Solo token di site.css.
   Nessuna ombra, nessun colore fuori scala, nessuna regola forzata.
   Mobile first: una colonna sotto 768, rail nel foglio sotto 1024.
   BRIEF-V2: fondo avorio, bianco pieno solo per moduli, rail, tabelle, sheet.
   Raggi: --r-media 6 (foto), --r-card 8 (schede, moduli), --r-field 6 (campi);
   999 solo per chip, stepper, pulsanti tondi. Sticky sotto header + barra.
   ============================================================ */
:root {
  --mbar-h: 0px;
  /* Bordo superiore utile: solo l'header (la barra "Verifica disponibilità" ora sta in basso, --avail-bottom) */
  --sticky-top: calc(var(--header-h, 72px) + 1rem);
}
[data-form-target], #richiesta { scroll-margin-top: var(--sticky-top); }
/* overflow-x:hidden su main (site.css) crea un contenitore di scorrimento e annulla il rail sticky: clip non lo fa */
main { overflow-x: clip; }

/* ---------- Griglie di pagina ---------- */
.psec { padding-block: clamp(4rem, 7vw, 7rem); }
.psec--line { border-top: 1px solid var(--border-hairline); }
.psec__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.psec__head .lead { margin-top: 1rem; }

/* ---------- 3.1 Breadcrumb ---------- */
.crumb { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.crumb ol { display: flex; flex-wrap: wrap; gap: .35em 0; }
.crumb li { display: inline-flex; align-items: center; }
.crumb li + li::before { content: "·"; padding-inline: .7em; color: var(--text-tertiary); }
.crumb a { color: inherit; text-decoration: none; padding: .35em 0; }
.crumb a:hover { text-decoration: underline; text-decoration-color: var(--link-underline); }
.crumb [aria-current] { color: var(--text-primary); }

/* ---------- 3.2 Hero di pagina ---------- */
.phero { padding-top: calc(var(--header-h, var(--nav-h, 72px)) + 2.5rem); }
.phero .crumb { margin-bottom: 2.5rem; }
.phero__h1 { font-size: clamp(2.4rem, 5.6vw, 5.5rem); max-width: 18ch; text-wrap: balance; }
.phero__sub { margin-top: 1.5rem; max-width: 42ch; text-wrap: balance; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--text-secondary); }
/* Briciole, titolo e sottotitolo centrati (richiesta di Stefano, 06/10). La striscia dei fatti (.facts) resta allineata a sinistra. */
.phero > .wrap:not(.facts) { text-align: center; }
.phero > .wrap:not(.facts) > * { margin-inline: auto; }
.phero .crumb ol { justify-content: center; }
/* Media hero da bordo a bordo: larghezza viewport, raggio 0. Nessuna modifica al markup delle pagine. */
.phero__media { margin: 2.5rem 0 0; width: 100%; max-width: none; padding-inline: 0; }
.phero__media img, .phero__media video { display: block; width: 100%; height: clamp(360px, 72vh, 760px); object-fit: cover; border-radius: 0; }
.phero--deep .phero__media img { height: clamp(400px, 78vh, 820px); }
/* Striscia dei fatti: sempre SOTTO l'immagine hero, allineata alla colonna del testo, senza scheda */
.facts {
  margin-top: 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border-hairline);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem;
}
.facts.wrap { width: calc(100% - 2 * var(--pad)); max-width: calc(var(--wrap) - 2 * var(--pad)); padding-inline: 0; }
/* Etichette e valori su due righe condivise (subgrid): un'etichetta su due righe o un valore che va a capo non sfalsano le celle vicine */
.facts > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; }
.facts > div > dd { margin-top: .35rem; padding-top: 0; }
/* Se una cella ha il pre-titolo ("da"), le altre della stessa riga lasciano lo stesso spazio: i valori partono alla stessa altezza.
   Su una riga sola (da 1024, e su tablet con 3 o 5 dati) vale per tutte; nella griglia a due colonne solo per la vicina di riga. */
@media (min-width: 1024px) { .facts:has(.facts__pre) > div > dd:not(:has(.facts__pre))::before { content: ""; display: block; height: calc(11px * 1.15 + .3rem); } }
@media (min-width: 768px) and (max-width: 1023px) { .facts:is(:has(> div:nth-child(5):last-child), :has(> div:nth-child(3):last-child)):has(.facts__pre) > div > dd:not(:has(.facts__pre))::before { content: ""; display: block; height: calc(11px * 1.15 + .3rem); } }
@media (max-width: 1023px) { .facts > div:nth-child(odd):has(.facts__pre) + div > dd:not(:has(.facts__pre))::before, .facts > div:nth-child(odd):has(+ div .facts__pre) > dd:not(:has(.facts__pre))::before { content: ""; display: block; height: calc(11px * 1.15 + .3rem); } }
.facts__pre { display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .3rem; }
.facts dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.facts dd { margin: .35rem 0 0; font-weight: 300; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .facts { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } }
/* Tablet: con 3 o 5 dati la griglia a due colonne lasciava l'ultimo da solo: tutti su una riga */
@media (min-width: 768px) and (max-width: 1023px) { .facts:has(> div:nth-child(5):last-child), .facts:has(> div:nth-child(3):last-child) { grid-auto-flow: column; grid-auto-columns: auto; grid-template-columns: none; column-gap: 1.25rem; } }
/* Su telefono i dati chiave restano a due colonne: impilati uno per riga occupavano una schermata intera */
@media (max-width: 479px) { .facts { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; padding-block: 1.25rem; } .facts dd { font-size: 1.15rem; } }
@media (max-width: 767px) { .facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .phero > .mcta { padding-top: 1.25rem; } }
/* Sotto 1024 il modulo da solo (jet, pacchetti) vive nel foglio: la sezione che lo conteneva restava una fascia vuota fra due filetti */
section:has(> .bookfirst--solo .rail-home):not(:has(.rail-form)) { display: none; }
@media (min-width: 600px) and (max-width: 1023px) { .phero > .mcta .btn { width: auto; } }
@media (max-width: 767px) { .phero { padding-top: calc(var(--header-h, var(--nav-h, 72px)) + 1.5rem); } .phero__media { margin-top: 2rem; } .phero__media img, .phero__media video { height: clamp(300px, 56vh, 520px); } }

/* Figura d'apertura di sezione da bordo a bordo: <figure class="bleed"><img …></figure> come figlia diretta di una
   sezione o di un .wrap centrato (mai dentro .copy o una colonna di griglia: il calcolo parte dal centro pagina). */
.bleed { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); margin-block: 0 clamp(2.5rem, 5vw, 4rem); }
.bleed img, .bleed video { display: block; width: 100%; height: clamp(280px, 62vh, 680px); object-fit: cover; border-radius: 0; }
.bleed figcaption { width: 100%; max-width: var(--wrap); margin: .75rem auto 0; padding-inline: var(--pad); font-size: .85rem; color: var(--text-secondary); }
@media (max-width: 767px) { .bleed img, .bleed video { height: clamp(240px, 48vh, 440px); } }
.psec > .bleed:only-child { margin-bottom: 0; }
/* Dopo una foto da bordo a bordo il filetto della sezione seguente è di troppo */
.bleed + .psec--line { border-top: 0; }
/* Hero e fasce con <picture> (versione larga da 1024px): il picture non deve cambiare l'impaginazione dell'immagine */
.phero__media picture, .bleed picture { display: contents; }
/* Lo scafo Riva da vicino esiste solo a 1067px (la versione 4K ha la scritta alterata): su schermi larghi resta alla sua misura invece di essere ingrandito */
@media (min-width: 1024px) { .bleed:has(> img[src*="auto-matrimonio-villa"]) { width: min(1067px, 100% - 2 * var(--pad)); margin-inline: auto; } .bleed:has(> img[src*="auto-matrimonio-villa"]) img { border-radius: var(--r-media, 6px); object-position: 50% 12% !important; } }
@media (min-width: 1100px) { .bleed:has(> img[src*="riva-scafo"]) { width: min(1067px, 100% - 2 * var(--pad)); margin-inline: auto; } .bleed:has(> img[src*="riva-scafo"]) img { border-radius: var(--r-media, 6px); } }

/* ---------- 3.3 Layout sotto la piega ---------- */
.body-grid {
  display: grid; grid-template-columns: minmax(0, 68ch) 380px; gap: clamp(3rem, 6vw, 7rem);
  align-items: start; justify-content: space-between; padding-block: clamp(4rem, 7vw, 7rem);
}
.copy { min-width: 0; }
.copy > * + * { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.copy > * > .h3:first-child, .copy__title { margin-bottom: 1.5rem; }
.copy__title { font-size: 1.35rem; }
.rail-form {
  position: sticky; top: var(--sticky-top); align-self: start;
  max-height: calc(100dvh - var(--sticky-top) - var(--avail-bottom, 0px) - 1rem); overflow-y: auto; scrollbar-width: thin;
  padding: 1.5rem; background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px);
}
.rail-form > .h3 { font-size: 1.35rem; }
.rail-form > .meta { margin-top: .5rem; margin-bottom: 1.25rem; }
/* Nel rail il modulo è compatto: sezioni a riepilogo, calendario senza cornice, passi più stretti.
   Lo scorrimento interno resta solo come riserva, con una sfumatura sopra il piede finché non si è in fondo. */
.rail-form .cfg > * + *, .rail-form .qform > * + * { margin-top: 1.25rem; }
/* Nel rail e nello sheet la scheda è il contenitore: il modulo dentro non ripete cornice, fondo e padding */
.rail-form .qform, .rail-form .wizard, .sheet .qform, .sheet .wizard, .qform.qform--rail { border: 0; padding: 0; max-width: none; background: transparent; border-radius: 0; }
.rail-form .form-row, .rail-form .dates { grid-template-columns: 1fr; }
.rail-form .wizard__nav { flex-wrap: wrap; }
.rail-form legend { margin-bottom: .5rem; }
.rail-form .cal { border: 0; padding: 0; border-radius: 0; }
.rail-form__end { height: 1px; }
.rail-form .qform__foot, .rail-form .cfg__foot { position: sticky; bottom: -1.5rem; padding-bottom: 1.5rem; margin-bottom: -1.5rem; z-index: 1; }
.rail-form .qform--more .qform__foot { position: static; margin-bottom: 0; padding-bottom: .25rem; }
.rail-form.is-scrollable .cfg__foot::before, .rail-form.is-scrollable .qform__foot::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface-card, var(--p-white)));
}
@media (min-width: 1024px) {
  .body-grid > .rail-form .cal__day { height: 36px; }
  .body-grid > .rail-form .cal__dow { padding: .2rem 0; }
  .body-grid > .rail-form .cal__head { margin-bottom: .5rem; }
  .body-grid > .rail-form .rail-btn--sm { width: 36px; height: 36px; }
  .body-grid > .rail-form .cal__legend { margin-top: .5rem; }
}
@media (max-width: 1023px) {
  .body-grid { grid-template-columns: 1fr; }
  .rail-form { position: static; max-height: none; overflow: visible; }
  html.js .body-grid > .rail-form { display: none; }
}
/* Moduli su desktop (30/09, Julien: i moduli devono sfruttare la larghezza della pagina, non stare in una colonna stretta
   con lo scorrimento interno). Da 1024px ogni .rail-form è una fascia larga: titolo e nota in alto, i gruppi del modulo su
   due o tre colonne (colonne CSS: si legge dall'alto in basso e poi a destra, ogni gruppo resta intero), piede con prezzo e
   pulsanti su tutta la larghezza. Nelle pagine con .body-grid la fascia scende sotto il testo, a tutta larghezza.
   Sotto i 1024px non cambia nulla: il modulo vive nel foglio di pages.js. */
@media (min-width: 1024px) {
  /* Il modulo è sceso a fascia: il corpo prende tutta la larghezza (prima restava una seconda colonna vuota).
     Prosa, tabelle brevi, foto singole e video restano alla misura di lettura; tabelle prezzi, gallerie e griglie si allargano. */
  .body-grid:has(> .rail-form) { grid-template-columns: minmax(0, 1fr); }
  .body-grid:has(> .rail-form) > .copy :is(p:not([class]), .hint, .fee__note, .wtab, .fig, .om-fig, .finestrino, ul:not([class]), ol:not([class])) { max-width: 68ch; }
  .body-grid > .rail-form { grid-column: 1 / -1; grid-row: 2; }
  .rail-form { position: static; max-height: none; overflow: visible; padding: clamp(2rem, 3.2vw, 3rem); }
  .rail-form > .h3 { font-size: clamp(1.5rem, 2vw, 1.85rem); }
  .rail-form > .qform__note, .rail-form > .meta, .rail-form > .hint { max-width: 62ch; }
  .rail-form > form.qform, .rail-form > form.cfg { margin-top: 1.75rem; }
  .rail-form > form.qform, .rail-form > form.cfg, .rail-form .wizard__panel { columns: 3 17rem; column-gap: clamp(2rem, 3.5vw, 3.5rem); }
  .rail-form > form.qform > *, .rail-form > form.cfg > *, .rail-form .wizard__panel > * { break-inside: avoid; margin: 0 0 1.6rem; }
  .rail-form .wizard__title { column-span: all; }
  .rail-form .wizard__panel { columns: 2 17rem; }
  .rail-form .qform__foot, .rail-form .cfg__foot { column-span: all; position: static; margin: .25rem 0 0; padding-bottom: .25rem; }
  .rail-form.is-scrollable .cfg__foot::before, .rail-form.is-scrollable .qform__foot::before { display: none; }
  .rail-form > form.qform > .qform__foot, .rail-form > form.cfg > .cfg__foot { margin-top: 1.6rem; padding-top: .75rem; margin-bottom: 0; }
  .rail-form > form.qform:has(> fieldset.contacts) > .qform__foot, .rail-form > form.cfg:has(.cal) > .cfg__foot { margin-top: 0; }
  .rail-form .form__actions, .rail-form .cfg__actions { max-width: 38rem; }
  .rail-form .cfg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2.5rem; }
  .rail-form .cfg__foot > .price-line { flex: 1 1 18rem; margin: 0; }
  .rail-form .cfg__foot > .cfg__actions { flex: 1 1 26rem; }
  .rail-form > form.qform textarea { min-height: 9rem; }
  /* Con il gruppo "I Suoi contatti": richiesta a sinistra su due colonne (il messaggio largo su entrambe), contatti nella
     terza colonna. L'ultima riga è flessibile: l'altezza dei contatti la assorbe lei, senza allargare le righe dei campi. */
  .rail-form > form.qform:has(> fieldset.contacts) {
    columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto) minmax(0, 1fr);
    column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; grid-auto-flow: row dense;
  }
  .rail-form > form.qform:has(> fieldset.contacts) > fieldset.contacts { grid-column: 3; grid-row: 1 / -1; }
  .rail-form > form.qform:has(> fieldset.contacts) > .field:has(> textarea) { grid-column: span 2; }
  .rail-form > form.qform:has(> fieldset.contacts) > .qform__foot { grid-column: 1 / -1; }
  /* Il messaggio scende fino in fondo accanto ai contatti: niente vuoto bianco sotto la textarea */
  .rail-form > form.qform:has(> fieldset.contacts) > .field:has(> textarea) { grid-row: -2 / -1; align-self: stretch; grid-template-rows: auto minmax(9rem, 1fr); }
  .rail-form > form.qform:has(> fieldset.contacts) > .field:has(> textarea) > textarea { height: 100%; }
  /* Due gruppi soltanto (Pacchetti: la richiesta e i contatti): due colonne larghe, campi brevi affiancati */
  .rail-form > form.qform:has(> fieldset:last-of-type:nth-of-type(2)):not(:has(> fieldset.contacts)) { columns: 2; }
  .rail-form > form.qform:has(> fieldset:last-of-type:nth-of-type(2)):not(:has(> fieldset.contacts)) .form-row { grid-template-columns: 1fr 1fr; }
  /* Configuratori con calendario (Riva, elicottero): il calendario non si spezza, quindi colonna a sé a destra;
     scelta, passeggeri, orario, extra, prezzo e pulsanti a sinistra (prima un buco di 330x420px sotto i campi) */
  .rail-form > form.cfg:has(.cal) { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; }
  .rail-form > form.cfg:has(.cal) > :not(fieldset:has(.cal)) { grid-column: 1; }
  .rail-form > form.cfg:has(.cal) > fieldset:has(.cal) { grid-column: 2; grid-row: 1 / span 4; }
}
/* Fra 1024 e 1279 la terza colonna dei contatti era stretta (267px) e lunghissima: due colonne, richiesta e contatti */
@media (min-width: 1024px) and (max-width: 1279px) {
  .rail-form > form.qform:has(> fieldset.contacts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-form > form.qform:has(> fieldset.contacts) > :not(fieldset.contacts):not(.qform__foot):not(.hp) { grid-column: 1; }
  .rail-form > form.qform:has(> fieldset.contacts) > .field:has(> textarea) { grid-row: auto; align-self: start; grid-template-rows: none; }
  .rail-form > form.qform:has(> fieldset.contacts) > .field:has(> textarea) > textarea { height: auto; }
  .rail-form > form.qform:has(> fieldset.contacts) > fieldset.contacts { grid-column: 2; }
  .rail-form > form.qform:has(> fieldset.contacts) > .field:not(fieldset.contacts):not(.qform__foot):not(.hp):has(> textarea) { grid-column: 1 / -1; }
}

/* ---------- 3.4 Intro ---------- */
.intro p { color: var(--text-secondary); max-width: 62ch; }
.intro p + p { margin-top: 1.1rem; }
.intro .lead { color: var(--text-primary); margin-bottom: 1.5rem; }

/* ---------- 3.5 Sequenza ---------- */
.seq { --seq-k: clamp(1.35rem, 2.2vw, 1.9rem); position: relative; padding-left: 2.5rem; display: grid; gap: 2.5rem; }
.seq::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 1px; background: var(--border-hairline); }
.seq__item { position: relative; display: grid; grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.seq__item::before { content: ""; position: absolute; left: calc(-2.5rem - 2.5px); top: calc(var(--seq-k) / 2 - 3px); width: 6px; height: 6px; border-radius: 999px; background: var(--p-800); }
.seq__key { font-weight: 200; font-size: var(--seq-k); line-height: 1; min-width: 0; overflow-wrap: anywhere; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.seq__title { font-weight: 500; font-size: 1.15rem; letter-spacing: .04em; line-height: 1.3; }
.seq__item p { margin-top: .5rem; color: var(--text-secondary); max-width: 52ch; }
.seq__item .meta { margin-top: .75rem; }
@media (max-width: 767px) { .seq { --seq-k: 1.2rem; padding-left: 1.5rem; gap: 1.75rem; } .seq__item { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 1rem; } .seq__item::before { left: calc(-1.5rem - 2.5px); } .seq__title { font-size: 1.05rem; } }
@media (max-width: 479px) { .seq__item { grid-template-columns: 2.5rem minmax(0, 1fr); } }

/* ---------- 3.6 Destinazioni ---------- */
.dest { columns: 2; column-gap: 2.5rem; }
.dest li { break-inside: avoid; display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--border-hairline); }
.dest__city { font-weight: 500; }
.dest__note { font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
@media (min-width: 1024px) { .dest.dest--two { columns: 2; } }
@media (min-width: 1024px) { .dest { columns: 3; } }
@media (max-width: 479px) { .dest { columns: 1; } }

/* ---------- 3.7 Galleria ---------- */
.gal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.5rem; }
/* Testo sotto il titolo della galleria (elicotteri: il prezzo del transfer, nota di lancio 4) */
.gal__track {
  display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .25rem;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__item { flex: 0 0 auto; max-width: 92%; scroll-snap-align: start; }
.gal__open { display: block; cursor: zoom-in; border-radius: var(--r-media, 6px); overflow: hidden; }
.gal__open img { display: block; height: clamp(240px, 38vh, 420px); width: auto; max-width: none; object-fit: cover; transition: transform 700ms ease-out; }
/* Telefono: con altezza fissa e slide al 92% la foto orizzontale perdeva il terzo destro (soggetto tagliato): schede 3:2 intere */
@media (max-width: 767px) {
  .gal__item { flex: 0 0 88%; max-width: 88%; }
  .gal__open img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-position: center; }
}
.gal__open:hover img, .gal__open:focus-visible img { transform: scale(1.04); }
.gal figcaption { margin-top: .7rem; font-size: .85rem; color: var(--text-secondary); }
.gal .rail-progress { margin: 1.5rem 0 0; }
.lb { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; background: transparent; color: var(--p-white); }
.lb::backdrop { background: var(--p-950); }
.lb__inner { position: fixed; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 5vw, 4rem) clamp(4.5rem, 8vw, 6rem); }
.lb__img { max-width: 100%; max-height: calc(100vh - 7rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r-media, 6px); }
.lb__btn { position: absolute; width: 52px; height: 52px; border-radius: 999px; border: 1px solid var(--p-400); color: var(--p-white); display: grid; place-items: center; transition: border-color var(--durata-breve) var(--ease); }
.lb__btn:hover { border-color: var(--p-white); }
.lb__btn[aria-disabled="true"] { color: var(--p-600); border-color: var(--p-700); cursor: default; }
.lb__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb__cap { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); font-size: .85rem; color: var(--p-300); max-width: 60ch; text-align: center; padding-inline: 1rem; }
.lb__count { position: absolute; left: 1.25rem; top: 1.9rem; font-size: 11px; letter-spacing: .16em; color: var(--p-400); font-variant-numeric: tabular-nums; }
/* Telefono: la foto ingrandita prende tutta la larghezza (prima 231px fra le frecce), le frecce scendono negli angoli in basso */
@media (max-width: 767px) {
  .lb__inner { padding: 4.5rem 0 5.5rem; }
  .lb__img { max-width: 100vw; max-height: calc(100svh - 10rem); border-radius: 0; }
  .lb__prev, .lb__next { top: auto; bottom: 1rem; transform: none; }
  .lb__cap { bottom: 1.75rem; max-width: calc(100% - 9rem); padding-inline: 0; }
}

/* ---------- 3.8 Tabella opzioni ---------- */
.opts-wrap { overflow-x: auto; background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: .25rem 1.25rem 1rem; }
.opts tbody tr:last-child td { border-bottom: 0; }
.opts caption { border-top: 1px solid var(--border-hairline); }
.opts { width: 100%; border-collapse: collapse; font-size: .875rem; }
.opts caption { caption-side: bottom; text-align: left; font-size: .8rem; color: var(--text-tertiary); padding-top: 1rem; line-height: 1.5; }
.opts th, .opts td { padding: .85rem .5rem; text-align: right; border-bottom: 1px solid var(--border-hairline); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top; }
/* Le cifre cadono sul font di riserva: a peso 300 sono filiformi, qui e nei chip vanno a 400 */
.opts td { font-weight: 400; }
.opts th { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); vertical-align: bottom; line-height: 1.4; white-space: normal; }
.opts th:first-child, .opts td:first-child { text-align: left; padding-left: 0; }
.opts th:last-child, .opts td:last-child { padding-right: 0; }
.opts tbody tr { cursor: pointer; transition: background-color var(--durata-breve) var(--ease); }
.opts tbody tr:hover, .opts tbody tr:focus-visible { background: var(--bg-row-hover); }
.opts tbody tr.is-selected .opts__name { font-weight: 500; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--link-underline); }
.opts td.is-picked { font-weight: 500; }
.opts__name { display: block; font-weight: 400; color: var(--text-primary); }
.opts__dur { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-top: .2rem; }
/* Tabelle con la descrizione nella prima colonna (rotte dei tour in elicottero): la descrizione va a capo e le colonne di durata,
   passeggeri e prezzo restano dentro la scheda (prima uscivano a destra, "PASSAGIERE" e "PREIS" tagliati) */
.opts:not(.opts--fold) td:first-child { white-space: normal; width: 100%; min-width: 11rem; }
.opts td[data-na] { color: var(--text-tertiary); font-size: .75rem; letter-spacing: .04em; }
.opts__from { display: none; }
@media (max-width: 767px) {
  .opts--fold tbody tr { padding: .9rem 1.25rem; margin-bottom: .6rem; }
  .opts--fold tbody tr > td:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; padding: 0; margin: 0; border-bottom: 0; }
  .opts--fold .opts__name, .opts--fold .opts__dur { grid-column: 1; }
  .opts--fold .opts__from { display: inline-flex; align-items: center; gap: .4rem; grid-column: 2; grid-row: 1 / span 2; font-weight: 500; white-space: nowrap; }
  .opts--fold .opts__from svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform var(--durata-breve) var(--ease); }
  .opts--fold tbody tr:not(.is-open) > td:not(:first-child) { display: none; }
  .opts--fold tbody tr.is-open > td:first-child { padding-bottom: .75rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border-hairline); }
  .opts--fold tbody tr.is-open .opts__from svg { transform: rotate(180deg); }
}
@media (max-width: 767px) {
  .opts thead { display: none; }
  .opts, .opts tbody, .opts tr, .opts td, .opts caption { display: block; }
  .opts-wrap { background: transparent; border: 0; border-radius: 0; padding: 0; }
  .opts caption { border-top: 0; }
  .opts tbody tr { background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: 1rem 1.25rem; margin-bottom: 1rem; }
  .opts td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; text-align: left; white-space: normal; }
  .opts td::before { content: attr(data-label); color: var(--text-secondary); }
  .opts td:first-child { display: block; padding-bottom: .75rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border-hairline); }
  .opts td:first-child::before { content: none; }
  .opts td:last-child { padding-right: 0; }
  /* Righe con un solo valore (es. fee): nome a sinistra, cifra a destra, senza riga di etichetta */
  .opts tbody tr:has(> td:nth-child(2):last-child) { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem 1.25rem; margin-bottom: .6rem; }
  .opts tbody tr:has(> td:nth-child(2):last-child) td { padding: 0; margin: 0; border: 0; display: block; }
  .opts tbody tr:has(> td:nth-child(2):last-child) td:last-child { flex: 0 0 auto; text-align: right; font-weight: 500; }
  .opts tbody tr:has(> td:nth-child(2):last-child) td::before { content: none; }
  .opts tbody tr:has(> td:nth-child(2):last-child) td:first-child { min-width: 0; width: auto; flex: 1 1 auto; }
}

/* ---------- 3.9 Incluso / non incluso ---------- */
.incl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
.incl > div + div { border-left: 1px solid var(--border-hairline); padding-left: 2.5rem; }
.incl ul { margin-top: 1.1rem; display: grid; gap: .7rem; }
.incl li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text-secondary); }
.incl li svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .2em; stroke: var(--p-800); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .incl { grid-template-columns: 1fr; gap: 2rem; }
  .incl > div + div { border-left: 0; border-top: 1px solid var(--border-hairline); padding-left: 0; padding-top: 2rem; }
}

/* ---------- 3.10 Buono a sapere ---------- */
.know > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-hairline); }
.know > div:first-of-type { border-top: 1px solid var(--border-hairline); }
.know dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); padding-top: .35em; }
.know dd { margin: 0; color: var(--text-secondary); }
.know dd a { color: var(--link); }
@media (max-width: 767px) { .know > div { grid-template-columns: 1fr; gap: .4rem; } }

/* ---------- 3.11 FAQ ---------- */
.faq__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.faq__list { border-top: 1px solid var(--border-hairline); max-width: 68ch; }
.faq__item { border-bottom: 1px solid var(--border-hairline); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; min-height: 56px; cursor: pointer; font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; line-height: 1.35; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease); }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__body { overflow: hidden; }
.faq__body p { padding-bottom: 1.5rem; color: var(--text-secondary); max-width: 58ch; }
.faq__body p + p { margin-top: -.5rem; }

/* ---------- 3.12 Spesso combinato con ---------- */
.combo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 760px; }
.combo .pack { flex: none; }
.combo .pack .media { aspect-ratio: 4 / 5; border-radius: var(--r-media, 6px); }
@media (min-width: 1024px) { .faq__list { max-width: none; } .combo__grid { max-width: none; } .combo .pack .media { aspect-ratio: 3 / 2; } }
.combo .pack .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease-out; }
.combo .pack:hover .media img, .combo .pack:focus-visible .media img { transform: scale(1.05); }
@media (max-width: 479px) { .combo__grid { grid-template-columns: 1fr; } }

/* ---------- 3.13 CTA sticky: barra mobile + foglio ---------- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 66;
  display: none; gap: .75rem; padding: .75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface-card, var(--p-white)); border-top: 1px solid var(--border-hairline);
  transform: translateY(100%); transition: transform var(--durata-media) var(--ease);
}
.mbar.is-visible { transform: none; }
body.no-scroll .mbar.is-visible { transform: translateY(100%); }
.mbar .btn { flex: 1 1 0; min-width: 0; height: 56px; padding-inline: .75rem; }
/* "Verifica disponibilità" è più lunga di "WhatsApp": più spazio al primario, spaziatura stretta, a capo solo se serve */
.mbar .btn--primary { flex-grow: 1.9; letter-spacing: .06em; padding-inline: .5rem; white-space: normal; text-align: center; line-height: 1.25; }
html[lang="fr"] .mbar .btn--primary, html[lang="de"] .mbar .btn--primary { font-size: .6875rem; }
@media (max-width: 359px) { .mbar { gap: .5rem; } .mbar .btn--outline { padding-inline: 1rem; letter-spacing: .08em; } }
@media (max-width: 1023px) {
  .mbar { display: flex; }
  html:has(.mbar) .wa-fab { display: none; }
  main .rail-form .qform__foot, main .rail-form .cfg__foot, main .cfg__foot { position: static; margin-bottom: 0; padding-bottom: .25rem; }
}
.sheet {
  border: 0; padding: 0; margin: 0; inset: auto 0 0 0; position: fixed;
  width: 100%; max-width: 100%; height: 88svh; max-height: 88svh;
  background: var(--surface-card, var(--p-white)); color: var(--text-primary); border-radius: var(--r-card, 8px) var(--r-card, 8px) 0 0; overflow: hidden;
}
.sheet::backdrop { background: var(--p-950); opacity: .6; }
/* Maniglia e X in una testata fuori dall'area che scorre: il contenuto non passa più sotto la X */
.sheet__head { position: relative; height: 3.5rem; }
.sheet__inner { height: calc(100% - 3.5rem); overflow-y: auto; padding: 0 var(--pad) calc(1rem + env(safe-area-inset-bottom, 0px)); }
.sheet__handle { width: 40px; height: 4px; border-radius: 999px; background: var(--p-300); margin: .75rem auto 0; }
.sheet__close { position: absolute; top: .6rem; right: .9rem; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-hairline); display: grid; place-items: center; background: var(--p-white); z-index: 2; }
.sheet__close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
/* WhatsApp a sinistra nella testata (07/10): unico accesso al messaggio precompilato quando il modulo nel foglio non ha il bottone nel piede */
.sheet__wa { position: absolute; top: .6rem; left: .9rem; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-hairline); display: grid; place-items: center; background: var(--p-white); color: var(--p-800); z-index: 2; }
.sheet__wa[hidden] { display: none; }
.sheet__wa svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sheet .rail-form { position: static; display: block; border: 0; padding: .25rem 0 0; max-height: none; overflow: visible; }
.sheet .rail-form > .h3 { padding-right: 3rem; }
/* Titolo del modulo staccato dal primo gruppo anche nel foglio (prima "LA TRATTA" era a 6px dal titolo) */
.rail-form > .h3 + :where(form) { margin-top: 1.25rem; }
.sheet .cfg__foot, .sheet .qform__foot { --sb: calc(1rem + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: calc(-1 * var(--sb)); padding-bottom: var(--sb); margin-bottom: calc(-1 * var(--sb)); z-index: 1; }
/* Telefono: il piede fisso del foglio occupava un terzo dello schermo (pulsanti impilati e nota): pulsanti affiancati come nella barra in basso */
@media (max-width: 559px) {
  .sheet .cfg__actions, .sheet .form__actions { flex-wrap: nowrap; }
  .sheet .cfg__actions .btn, .sheet .form__actions .btn { flex: 1 1 0; min-width: 0; height: 56px; padding-inline: .75rem; }
  .sheet .cfg__actions .btn--primary, .sheet .form__actions .btn--primary { flex-grow: 1.9; padding-inline: .5rem; letter-spacing: .06em; white-space: normal; line-height: 1.25; text-align: center; }
  .sheet .form__promise { display: none; }
}

/* ---------- 3.14 Configuratore ---------- */
.cfg > * + *, .qform > * + * { margin-top: 1.75rem; }
.cfg fieldset, .qform fieldset, .wizard fieldset { border: 0; padding: 0; margin-inline: 0; margin-bottom: 0; min-width: 0; }
.cfg legend, .qform legend, .wizard legend, .field > label, .field__lbl { display: block; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .75rem; padding: 0; }
.cfg legend .meta, .qform legend .meta, .wizard legend .meta { letter-spacing: .1em; text-transform: none; font-weight: 400; }
.rcards { display: grid; gap: .5rem; }
/* Sezione a riepilogo (Esperienza, Imbarcazione): la scelta corrente in una riga toccabile, la lista si apre una per volta */
.pick__sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "val val" "price cta"; align-items: center; gap: .1rem .75rem;
  width: 100%; min-height: 48px; padding: .55rem .9rem; text-align: left;
  border: 1px solid var(--border-control); border-radius: var(--r-field, 6px);
  transition: border-color var(--durata-breve) var(--ease);
}
.pick__sum:hover { background: var(--bg-row-hover); }
.pick__sum[aria-expanded="true"] { border-color: var(--p-800); }
.pick__val { grid-area: val; font-weight: 500; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }
.pick__price { grid-area: price; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400; color: var(--text-secondary); }
.pick__price:empty { display: none; }
.pick__cta { grid-area: cta; }
.pick__cta { display: inline-flex; align-items: center; gap: .35em; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.pick__cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--durata-breve) var(--ease); }
.pick__sum[aria-expanded="true"] .pick__cta svg { transform: rotate(180deg); }
.pick__body { margin-top: .75rem; display: grid; gap: 1.25rem; }
.pick__body[hidden] { display: none; }
.pick__done { justify-self: start; }
.cfg__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cfg__row .field__lbl { margin: 0; }
.cfg__row .field__lbl .meta { display: block; letter-spacing: .1em; text-transform: none; font-weight: 400; }
.cfg__row .hint { flex-basis: 100%; margin-top: 0; }
/* Il campo esca (.hp) è fuori schermo: il primo blocco visibile non prende la spaziatura tra fratelli */
.cfg > .hp:first-child + *, .qform > .hp:first-child + *, .wizard__panel > .hp:first-child + * { margin-top: 0; }
.cfg > .hp + * { margin-top: 0; }
.rcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "meta price";
  align-items: center; gap: .1rem 1rem; min-height: 56px; padding: .85rem 1rem;
  border: 1px solid var(--border-control); border-radius: var(--r-field, 6px); cursor: pointer; background: var(--surface-card, var(--p-white));
  transition: border-color var(--durata-breve) var(--ease);
}
.rcard input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rcard.is-checked { border: 2px solid var(--p-800); padding: calc(.85rem - 1px) calc(1rem - 1px); }
.rcard:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.rcard.is-disabled { color: var(--text-disabled); border-color: var(--p-300); cursor: default; }
.rcard.is-disabled .rcard__meta, .rcard.is-disabled .rcard__price { color: var(--text-disabled); }
.rcard__name { grid-area: name; font-weight: 500; }
.rcard__meta { grid-area: meta; font-size: .85rem; color: var(--text-secondary); }
.rcard__price { grid-area: price; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400; }
/* Radio card fotografiche (stile dell'auto): foto sopra, nome e nota sotto; l'opzione di solo testo occupa tutta la riga */
.rcards--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rcard--photo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "name" "meta"; align-items: start; gap: .15rem; padding: .5rem .5rem .75rem; }
.rcard--photo.is-checked { padding: calc(.5rem - 1px) calc(.5rem - 1px) calc(.75rem - 1px); }
.rcard--photo img { grid-area: img; display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--r-media, 6px); margin-bottom: .45rem; }
.rcard--photo .rcard__name, .rcard--photo .rcard__meta { padding-inline: .35rem; }
.rcard--text { grid-column: 1 / -1; grid-template-areas: "name" "meta"; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) { .rcards--photo { grid-template-columns: 1fr; } }
.rail-form .rcards--photo { grid-template-columns: 1fr 1fr; }
.stepper { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--border-control); border-radius: 999px; }
.stepper button { width: 48px; height: 46px; display: grid; place-items: center; font-size: 1.35rem; font-weight: 300; border-radius: 999px; line-height: 1; }
.stepper button:hover { background: var(--bg-row-hover); }
.stepper button:disabled { color: var(--text-disabled); cursor: default; background: transparent; }
.stepper output { min-width: 2.5rem; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.stepper-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.stepper-row .meta { letter-spacing: .1em; text-transform: none; font-weight: 400; font-size: .85rem; }
.hint { margin-top: .75rem; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
.hint a { color: var(--link); }
.hint[hidden] { display: none; }
/* Tour in Riva (07/10): nota discreta sotto i chip del lago (vuota senza spazio) e seconda barca spenta dove il lago ne ha una sola */
.cfg__lake-note { margin-top: .5rem; }
.cfg__lake-note:empty { margin: 0; }
.cfg__row .hint.is-off { display: none; }
.cal { border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: 1rem; background: var(--surface-card, var(--p-white)); }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.cal__month { font-weight: 500; font-size: .95rem; letter-spacing: .04em; }
.cal__month::first-letter { text-transform: uppercase; }
.rail-btn--sm { width: 40px; height: 40px; border-color: var(--border-control); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__dow { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); text-align: center; padding: .4rem 0; }
.cal__day { height: 44px; display: grid; place-items: center; border-radius: 999px; font-size: .95rem; font-weight: 400; font-variant-numeric: tabular-nums; transition: background-color var(--durata-breve) var(--ease); }
.cal__day:hover:not([aria-disabled="true"]) { background: var(--bg-row-hover); }
.cal__day[aria-disabled="true"] { opacity: .3; cursor: default; }
.cal__day[aria-pressed="true"] { background: var(--p-800); color: var(--p-white); }
.cal__day--today { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--link-underline); }
.cal__legend { display: flex; gap: 1.25rem; margin-top: .75rem; font-size: .8rem; color: var(--text-secondary); }
.cal__legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 999px; border: 1px solid var(--p-800); margin-right: .5em; vertical-align: middle; }
.cal__legend .is-full::before { background: var(--p-800); opacity: .3; }
.cal__first { margin-top: .9rem; }
.cal__first[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--chip-border); border-radius: 999px; background: var(--p-white); color: var(--chip-text);
  font-size: .875rem; font-weight: 400; font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
  transition: background-color var(--durata-breve) var(--ease), color var(--durata-breve) var(--ease), border-color var(--durata-breve) var(--ease);
}
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip:hover { background: var(--bg-row-hover); }
.chip.is-checked, .chip[aria-pressed="true"] { background: var(--chip-selected-bg); color: var(--p-white); border-color: var(--chip-selected-bg); }
.chip.is-disabled { color: var(--text-disabled); border-color: var(--p-200); cursor: default; background: transparent; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.seats-line { margin-bottom: .9rem; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
.seats-line button { text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--link-underline); color: var(--link); min-height: 24px; }
.seats-line[hidden] { display: none; }
.price-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: .75rem 0 .5rem; }
.price-line__lbl { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.price-line__fig { font-weight: 500; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--price-figure); transition: opacity 120ms var(--ease); }
.price-line__fig.is-fading { opacity: 0; }
.price-line__fig.is-loading { opacity: .4; background: linear-gradient(90deg, transparent 0%, var(--p-100) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1s linear infinite; border-radius: 4px; }
.price-line__note { flex-basis: 100%; font-size: .8rem; color: var(--text-tertiary); line-height: 1.5; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cfg__foot, .qform__foot { background: var(--surface-card, var(--p-white)); border-top: 1px solid var(--border-hairline); margin-top: 1.5rem; padding-top: .25rem; }
.cfg__foot { position: sticky; bottom: 0; }
/* Primario largo, WhatsApp stretto, sulla stessa riga se ci stanno (come la barra in basso); altrimenti si impilano
   a tutta larghezza. Mai un pulsante che esce dalla scheda. */
.cfg__actions, .form__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding: .5rem 0 .25rem; }
.cfg__actions .btn, .form__actions .btn { flex: 1 0 auto; letter-spacing: .1em; }
.cfg__actions .btn--primary, .form__actions .btn--primary { flex-grow: 2; }
.cfg__actions .btn, .form__actions .btn { padding-inline: .9rem; height: 52px; white-space: nowrap; }
.cfg__actions .btn[hidden], .form__actions .btn[hidden] { display: none; }
@media (max-width: 559px) { .cfg__actions .btn, .form__actions .btn, .cfg__actions .btn--primary, .form__actions .btn--primary, body .cform .form__actions .btn, body .cform .form__actions .btn--primary { flex: 1 1 100%; min-width: 0; } }
.cfg__contacts[hidden] { display: none; }
.cfg__contacts > * + *, .contacts > * + * { margin-top: 1.1rem; }
.cfg__contacts > legend + *, .contacts > legend + * { margin-top: 0; }

/* ---------- 3.15 Campi e form di qualificazione ---------- */
.field { display: grid; gap: .45rem; }
/* I contenitori con display proprio devono comunque sparire con [hidden] (anche quelli del motore condizionale data-show-when) */
.field[hidden], .form-row[hidden], .dates[hidden], .chips[hidden], .stepper-row[hidden] { display: none; }
fieldset[hidden], .chip[hidden], .legs[hidden], .leg[hidden], .cfg__row[hidden], .rcard[hidden] { display: none; }
/* Rivelazione di un blocco condizionale: dissolvenza con piccolo sollevamento (m-rise di motion.css), solo sui nodi
   appena mostrati da pages.js (classe is-revealed), mai sugli stati iniziali della pagina */
@media (prefers-reduced-motion: no-preference) {
  .is-revealed:not([hidden]) { animation: m-rise var(--durata-media) var(--ease) both; }
}
/* Prefisso internazionale (iniettato da pages.js): select stretto accanto al numero; lo stile del select è quello di .field select */
.tel { display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); gap: .5rem; }
.tel select { min-width: 0; }
@media (max-width: 359px) { .tel { grid-template-columns: 1fr; } }
/* "Se Le va, mi indichi come mi ha conosciuto" (iniettato prima del consenso) e flessibilità a tre chip (dopo la data) */
.field--origin { margin-top: 1.1rem; }   /* il suo legend .opt prende già lo stile di "legend .opt" qui sotto */
/* Tappe intermedie del jet (multi tratta) */
.legs { display: grid; gap: 1rem; }
.leg__remove { justify-self: start; }
/* Chip dentro l'hint di un contatore (seconda barca, secondo volo) */
.hint .chips { margin-top: .5rem; }
.field > label { margin-bottom: 0; }
.field input, .field textarea, .field select {
  width: 100%; height: 48px; padding: 0 .9rem; border: 1px solid var(--border-control); border-radius: var(--r-field, 6px);
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--text-primary); background: var(--p-white);
  transition: border-color var(--durata-breve) var(--ease);
}
.field textarea { height: auto; min-height: 120px; padding: .75rem .9rem; resize: vertical; line-height: 1.5; }
/* Menu a tendina con la stessa freccia sottile petrolio della barra di prenotazione (prima: freccia nativa nera, attaccata al bordo) */
.field select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; text-overflow: ellipsis; cursor: pointer;
  background: var(--p-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23003333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E") no-repeat right .9rem center / 14px 14px; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; min-width: 0; font-variant-numeric: tabular-nums; }
.field > label .opt, legend .opt { letter-spacing: .04em; text-transform: none; font-weight: 400; color: var(--text-tertiary); margin-left: .35em; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border: 2px solid var(--p-800); padding-inline: calc(.9rem - 1px); }
.field.is-invalid select { padding-right: calc(2.5rem - 1px); }
.field__err { display: none; align-items: flex-start; gap: .5rem; font-size: .85rem; font-weight: 500; line-height: 1.4; color: var(--p-800); }
.field.is-invalid .field__err, fieldset.is-invalid > .field__err { display: flex; }
.field__err svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.field__help { font-size: .85rem; color: var(--text-tertiary); }
fieldset.is-invalid .chips { outline: 2px solid var(--p-800); outline-offset: 6px; border-radius: var(--r-field, 6px); }
fieldset > .field__err { margin-top: .9rem; }
/* Campi consecutivi dentro un gruppo: stesso respiro fra un campo e l'altro (prima si toccavano: "Il pacchetto" e "Data desiderata") */
fieldset > .field + .field, fieldset > .field + .form-row, fieldset > .form-row + .field, fieldset > .form-row + .form-row { margin-top: 1rem; }
/* Fieldset annidato dopo un gruppo di campi (es. Data > Flessibilità): non attaccato al campo sopra */
fieldset > :not(legend) + fieldset { margin-top: 1.25rem; }
/* Casella "flessibile" sotto il campo data: staccata dal bordo del campo */
fieldset > .field + .chips { margin-top: .75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row--auto { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dates + .chips { margin-top: .75rem; }
@media (max-width: 479px) { .form-row, .dates { grid-template-columns: 1fr; } }
.form__errors { border: 1px solid var(--p-800); border-radius: var(--r-card, 8px); padding: 1rem 1.25rem; }
.form__errors[hidden] { display: none; }
.form__errors p { font-weight: 500; display: flex; gap: .5rem; align-items: flex-start; }
.form__errors p svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.form__errors ul { margin: .5rem 0 0 1.6rem; display: grid; gap: .25rem; list-style: disc; padding: 0; font-size: .95rem; }
.form__errors a { color: var(--link); }
.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: .15em 0 0; flex: 0 0 auto; accent-color: var(--p-800); }
.consent a { color: var(--link); }
/* La casella di consenso sta dentro .field: non prende lo stile maiuscolo delle etichette dei campi */
.field > label.consent { display: flex; margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--text-secondary); }
.consent input { margin-top: calc((1.5em - 20px) / 2); }
.qform__note { font-size: 1rem; line-height: 1.5; color: var(--text-secondary); font-style: italic; }
/* Modulo su fondo avorio: scheda bianca. Dentro rail e sheet la cornice la porta il contenitore (vedi 3.3). */
.qform { max-width: 720px; background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: clamp(1.5rem, 3vw, 2.5rem); }
.qform[hidden] { display: none; }
.qform--more { margin-top: 1.5rem; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Righe fisse iniettate da pages.js in ogni modulo: casella aggiornamenti, riga dati, riga di riservatezza, promessa */
.form__promise { font-size: .85rem; line-height: 1.5; color: var(--text-secondary); padding: .35rem 0 .25rem; }
.wizard__nav + .form__promise { margin-top: .75rem; padding: 0; }
.form__data, .form__conf { font-size: .85rem; line-height: 1.5; color: var(--text-secondary); max-width: 60ch; }
.field + .form__data { margin-top: 1rem; }
.form__data + .form__conf { margin-top: .4rem; }

/* ---------- 3.15 bis Combobox aeroporti ---------- */
.cbx { position: relative; }
.cbx__list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .25rem; list-style: none;
  max-height: min(22rem, 50vh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-control); border-radius: var(--r-field, 6px);
}
.cbx__list[hidden] { display: none; }
.cbx__list [role="option"] {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name code" "meta code"; align-items: center; gap: 0 1rem;
  min-height: 48px; padding: .45rem .65rem; border-radius: 4px; cursor: pointer;
}
.cbx__list [role="option"]:hover, .cbx__list [role="option"][aria-selected="true"] { background: var(--bg-row-hover); }
.cbx__list [role="option"][aria-selected="true"] { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.cbx__name { grid-area: name; font-weight: 500; font-size: .95rem; line-height: 1.3; }
.cbx__meta { grid-area: meta; font-size: .8rem; color: var(--text-secondary); line-height: 1.3; }
.cbx__code { grid-area: code; font-size: .8rem; font-weight: 500; letter-spacing: .12em; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cbx__empty { padding: .75rem .65rem; font-size: .9rem; line-height: 1.45; color: var(--text-secondary); }

/* ---------- 3.16 Wizard jet ---------- */
.wizard { background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: clamp(1.5rem, 3vw, 2.5rem); max-width: 720px; }
.wizard[hidden] { display: none; }
/* Barra di avanzamento dei moduli a passaggi: etichetta "1 di 2 · Tratta" e filetto che si riempie */
.wprog { margin-bottom: 1.75rem; }
.wprog__lbl { margin-bottom: .6rem; color: var(--text-primary); }
.wprog__track { height: 2px; background: var(--border-hairline); border-radius: 999px; overflow: hidden; }
.wprog__bar { display: block; height: 100%; width: 50%; background: var(--p-800); transition: width var(--durata-media) var(--ease); }
.wizard__ind { display: flex; gap: .6em; margin-bottom: 1.5rem; }
.wizard__ind span[aria-current="step"] { color: var(--text-primary); }
.wizard__panel[hidden] { display: none; }
.wizard__panel > * + * { margin-top: 1.5rem; }
.wizard__title { font-size: 1.35rem; outline: none; }
.wizard__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-hairline); }
.wizard__back { min-height: 44px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--link-underline); }
.wizard__back[hidden] { display: none; }
.reveal[hidden] { display: none; }

/* ---------- 3.17 Conferma ---------- */
.confirm { max-width: 720px; background: var(--surface-card, var(--p-white)); border: 1px solid var(--border-hairline); border-radius: var(--r-card, 8px); padding: clamp(1.5rem, 3vw, 2.5rem); }
.confirm__note { font-weight: 500; color: var(--text-primary); }
.confirm > * + * { margin-top: 1.25rem; }
.confirm .h3 { font-size: 1.5rem; }
.confirm p { color: var(--text-secondary); max-width: 56ch; line-height: 1.55; }
.confirm dl { display: grid; gap: .6rem; border-top: 1px solid var(--border-hairline); padding-top: 1.25rem; }
.confirm dl div { display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr); gap: 1rem; }
.confirm dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); padding-top: .35em; }
.confirm dd { margin: 0; overflow-wrap: anywhere; font-weight: 400; }
.confirm__edit { display: inline-block; margin-top: .25rem; font-size: .8rem; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--link-underline); min-height: 32px; }
@media (max-width: 479px) { .confirm dl div { grid-template-columns: 1fr; gap: .2rem; } }
.rail-form .confirm, .sheet .confirm { border: 0; padding: 0; background: transparent; max-width: none; }
.rail-form .confirm dl div, .sheet .confirm dl div { grid-template-columns: 1fr; gap: .15rem; }
.rail-form .confirm dl { gap: .9rem; }

/* ---------- 3.18 Hub cards ---------- */
.hubcards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.hubcard { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; grid-column: span 12; }
.hubcards--2 .hubcard:first-child { grid-column: span 7; }
.hubcards--2 .hubcard:last-child { grid-column: span 5; }
.hubcards--3 .hubcard { grid-column: span 4; }
/* Due schede uguali (hub aviazione; hub esperienze con una scheda spenta): stessa larghezza, titoli allineati */
.hubcards--even .hubcard:first-child, .hubcards--even .hubcard:last-child { grid-column: span 6; }
.hubcard .media { aspect-ratio: 4 / 3; border-radius: var(--r-media, 6px); }
.hubcard .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease-out; }
.hubcard:hover .media img, .hubcard:focus-visible .media img { transform: scale(1.05); }
.hubcard .h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: .06em; text-transform: uppercase; }
.hubcard .h3 em { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; }
.hubcard p { color: var(--text-secondary); max-width: 42ch; }
.hubcard .tlink { align-self: flex-start; margin-top: .25rem; }
/* Link lungo (prezzo da… a…): va a capo come testo, la freccia segue l'ultima parola */
.hubcard .tlink { display: block; width: fit-content; max-width: 100%; line-height: 2; text-wrap: balance; border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--link-underline); text-underline-offset: .55em; }
.hubcard .tlink .arrow { margin-left: .5em; }
/* 7/5 con foto 4:3 dava altezze diverse e titoli sfalsati: stessa altezza di foto, la gerarchia resta nella larghezza */
@media (min-width: 768px) { .hubcards--2:not(.hubcards--even) .hubcard .media { aspect-ratio: auto; height: clamp(260px, 32vw, 520px); } }
@media (max-width: 767px) { .hubcards { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .hubcard, .hubcards--2 .hubcard:nth-child(n), .hubcards--3 .hubcard:nth-child(n) { grid-column: auto; } }

/* ---------- 3.19 Statement ---------- */
.statement { font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.25; letter-spacing: .005em; max-width: 30ch; color: var(--text-primary); }
.statement em { font-weight: 300; }
.statement__word { display: inline; }

/* ---------- 3.20 Legali ---------- */
.legal { padding: calc(var(--header-h, var(--nav-h, 72px)) + 3rem) 0 6rem; }
.legal .wrap { max-width: calc(68ch + 2 * var(--pad)); }
.legal h1, .legal__title { font-weight: 500; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.05; }
.legal .crumb { margin-bottom: 2rem; }
.legal p { margin-top: 1.5rem; color: var(--text-secondary); }
.legal .meta { margin-top: 2.5rem; display: block; }
.legal--inline { padding: 0; }
.legal--inline .wrap { padding-inline: 0; margin-inline: 0; }

/* ---------- Chiusura di pagina (più corta della home) ---------- */
.close--page { padding-block: clamp(4rem, 7vw, 7rem); border-top: 1px solid var(--border-hairline); }
.close--page .close__stmt { font-size: clamp(2rem, 4.5vw, 4rem); }
.close--page .close__stmt span { text-wrap: balance; }
@media (max-width: 479px) { .close--page .close__row { align-items: stretch; } .close--page .cta-row { width: 100%; } .close--page .cta-row .btn { flex: 1 1 100%; } }

/* ---------- Pagina demo del kit ---------- */
.kit-sec { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--border-hairline); }
.kit-title { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2rem; }
.kit-note { font-size: .9rem; color: var(--text-secondary); margin-top: 1.5rem; max-width: 60ch; }
.kit-vocab { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: .75rem 2rem; max-width: 760px; }
.kit-vocab dt { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); padding-top: .3em; }
.kit-vocab dd { margin: 0; }
@media (max-width: 767px) { .kit-vocab { grid-template-columns: 1fr; gap: .2rem; } .kit-vocab dd { margin-bottom: .75rem; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gal__open img, .combo .pack .media img, .hubcard .media img, .mbar, .price-line__fig, .faq__item summary svg, .rcard, .chip, .cal__day, .pick__sum, .pick__cta svg, .wprog__bar { transition: none; }
  .gal__open:hover img, .combo .pack:hover .media img, .hubcard:hover .media img { transform: none; }
  .price-line__fig.is-loading { animation: none; }
}

/* ---------- Invio dei moduli (contract-admin §5.3, §5.4, §5.6; pacchetto B, 04/10) ---------- */
/* Bottone durante l'invio: "Invio in corso…", bloccato, stessa larghezza */
.btn[aria-busy="true"] { cursor: progress; opacity: .72; }
/* Casella d'errore d'invio: stesso stile del riepilogo errori, con le alternative dirette su una riga che va a capo */
.form__send-error p { font-size: 1rem; line-height: 1.5; }
.form__send-error .form__alt { display: block; margin-top: .6rem; font-size: .9rem; font-weight: 400; line-height: 1.8; }
.form__send-error .form__alt a { color: var(--link); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--link-underline); white-space: nowrap; }
@media (max-width: 359px) { .form__send-error .form__alt a { white-space: normal; overflow-wrap: anywhere; } }
@media (min-width: 1024px) {
  .rail-form > form.qform > .form__send-error, .rail-form > form.cfg > .form__send-error, .rail-form .wizard > .form__send-error { column-span: all; }
  .rail-form > form.qform:has(> fieldset.contacts) > .form__send-error { grid-column: 1 / -1; }
}
/* Dopo l'invio il modulo si nasconde davvero: nel rail da 1024px le regole a griglia (display:grid) battevano [hidden] */
form.cfg[hidden], form.qform[hidden], form.wizard[hidden] { display: none !important; }
/* Ringraziamento: la sola frase; il fuoco arriva sul titolo per i lettori di schermo, senza anello per chi usa il mouse */
.confirm--sent .confirm__title:focus:not(:focus-visible) { outline: none; }
.rail-form .confirm--sent, .sheet .confirm--sent { margin-top: 1.25rem; }
.confirm--sent, .form__send-error { scroll-margin-top: calc(var(--header-h, 72px) + var(--avail-h, 0px) + 1.5rem); scroll-margin-bottom: calc(var(--mbar-h, 0px) + 1rem); }
/* Privacy: bottone "Non contare le mie visite" e riga di stato */
.nostat [data-nostat-state]:not(:empty) { display: block; margin-top: .5rem; color: var(--text-secondary); }