/* LA PAGINA — gli stili che nel design stavano inline, portati in classi.
 *
 * ⚠️ I VALORI NON SI RITOCCANO QUI A OCCHIO: vengono da design/estratto/markup.html, che è
 * generato dal bundle di Claude Design. Se una misura non torna, la fonte è quel file — questo
 * foglio la TRASPORTA e non la decide. I token (colori, spazi, raggi, ombre) stanno in
 * design-system.css, che è l'altra metà e non va toccato affatto.
 *
 * ⚠️ Il design è disegnato SOLO a 375px e non ha una sola @media: il comportamento su schermo
 * grande è deciso qui, ed è una colonna centrata da 600px su fondo più scuro — non un layout
 * desktop, che non esiste nel design.
 */

/* ══ il foglio ═══════════════════════════════════════════════════════════════
   ⚠️ Su schermo grande il fondo della PAGINA cambia tono e il foglio resta crema: senza questo
   scarto la colonna centrata non si legge come un foglio, si legge come testo che finisce a metà. */
body { background: var(--color-neutral-200); }

.foglio {
  background: var(--color-bg);
  overflow-x: clip; /* le camere scorrono DENTRO la loro fascia, non spingono la pagina */
}

/* ⚠️⚠️ LA COLONNA DA 600px NON C'È PIÙ — 2026-08-12. Fin qui il sito su un portatile era una
   striscia da 600px centrata su fondo grigio: un finto foglio di carta, e in testa a questo file
   c'era scritto perché — «il layout desktop non esiste nel design». Adesso esiste, il redesign è
   stato disegnato a due larghezze, quindi il ripiego se ne va.
   ⚠️ La misura del contenuto è 1180px e non «tutto lo schermo»: una riga di testo larga 1600px
   non si legge, si scandisce. Il limite è la MISURA DEL TESTO, non una cornice. */
@media (min-width: 640px) {
  body { background: var(--color-bg); }
  .foglio { max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
}

/* ══ testa ══════════════════════════════════════════════════════════════════ */
.testa {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
/* ⚠️ IL MARCHIO NON È PIÙ TESTO, è il disegno di design-system/marchio.svg inline nel
   markup. Finché era `<span>MOOR</span>` in Garamond a `letter-spacing:.01em`, cambiare i
   token dava «Moor» in un serif qualunque — cioè il nome composto, non il marchio.
   ⚠️ Un SVG al posto del testo toglie il nome dall'albero di accessibilità e ai motori di
   ricerca: per questo il markup porta `role="img"`, `aria-label` e un `<title>`.
   ⚠️ 21px di altezza non è un valore estetico: il disegno è 178×60, quindi 21px danno 62px
   di larghezza — appena sopra i 60px che il manuale dichiara come minimo d'uso a schermo.
   Sotto quella soglia non si rimpicciolisce il marchio, si usa il mark. */
.marchio {
  display: block; margin-right: auto; color: var(--color-text);
}
.marchio svg { display: block; height: 21px; width: auto; }
.testa-checkin {
  font-size: 12px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md);
  color: var(--color-neutral-800);
}

/* ⚠️ Il menù lingue è un <details>, non un bottone con JavaScript: apre, chiude e si comanda da
   tastiera senza una riga di script, e i cinque link restano link — cioè indicizzabili e
   apribili in una scheda nuova. Nel design era uno stato React, che qui sarebbe stato un
   selettore che il motore di ricerca non vede. */
.lingue { position: relative; }
.lingue > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; font-family: var(--font-mono);
  letter-spacing: .06em; padding: 7px 10px;
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md);
  color: var(--color-neutral-800); list-style: none;
}
.lingue > summary::-webkit-details-marker { display: none; }
.lingue[open] > summary svg { transform: rotate(180deg); }
.lingue-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 132px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lingue-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-text); text-decoration: none;
}
.lingue-menu a[aria-current="true"] { background: var(--color-accent-100); }
.lingue-menu a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.lingue-codice {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; color: var(--color-neutral-600);
}

/* ══ hero ═══════════════════════════════════════════════════════════════════ */
.hero { position: relative; height: 460px; overflow: hidden; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-velo {
  position: absolute; inset: 0;
  /* ⚠️ Il velo è la grafite del brand, non un grigio scelto a parte: era rgba(32,30,29),
     cioè il #201e1d del sistema precedente, rimasto indietro di un brand. */
  background: linear-gradient(to top,
    rgba(35, 32, 28, .82) 0%, rgba(35, 32, 28, .28) 46%, rgba(35, 32, 28, .05) 100%);
}
.hero-testo {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 18px 26px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--color-bg);
}
/* ⚠️ L'H1 dell'hero ERA `<h1>MOOR</h1>` in Garamond, e col marchio disegnato in testata
   diventava un secondo MOOR diverso dal primo, sullo stesso schermo. Ora è lo stesso
   disegno: il nome si scrive in un modo solo. L'H1 resta un H1 — il nome accessibile
   arriva da `role="img"` più `aria-label` sull'SVG, non sparisce dalla pagina. */
.hero-marchio { margin: 0; color: inherit; }
.hero-marchio svg { height: 42px; }
.hero-claim { margin: 0; font-size: 17px; line-height: 1.35; }
.hero-luogo { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; }

/* ══ sezioni ════════════════════════════════════════════════════════════════ */
.sez { padding: 34px 18px 0; }
.sez-larga { padding: 34px 0 0; }
.sez-larga > .sez { padding: 0 18px; }
.sez h2, .sez-larga h2 { font-size: 28px; margin: 0 0 4px; }
.sez-sotto { margin: 0 0 16px; font-size: 14px; color: var(--color-neutral-700); }

/* ══ ricerca ════════════════════════════════════════════════════════════════ */
.sez-ricerca { padding-top: 22px; }
.cerca { gap: var(--space-3); }
.cerca-date { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cerca .input { min-height: 44px; }
.passo { display: flex; align-items: center; gap: 12px; }
.passo-btn {
  width: 44px; height: 44px; flex: none; border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-600); background: var(--color-surface);
  font-size: 20px; line-height: 1; color: var(--color-text); cursor: pointer;
}
.passo-btn:disabled { opacity: .4; cursor: not-allowed; }
.passo-valore {
  min-width: 92px; text-align: center;
  font-family: var(--font-heading); font-size: 17px;
}
.btn-prenota { font-size: 15px; padding: 14px 20px; }
.cerca-nota { gap: 7px; }
.serve-data {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--color-accent-700);
}
.serve-data[hidden] { display: none; }

/* ══ WhatsApp ═══════════════════════════════════════════════════════════════
   Il box sotto la card di ricerca. Verde salvia (accent-2) e non arancione: l'arancione è del
   bottone che prenota, e due inviti dello stesso colore competono invece di offrire una scelta. */
.whatsapp {
  margin-top: var(--space-3);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--color-accent-2-100);
  border: 1px solid var(--color-accent-2-300);
  text-decoration: none;
}
.whatsapp:hover { background: var(--color-accent-2-200); }
.whatsapp svg { flex: none; }
.whatsapp-testo { display: flex; flex-direction: column; gap: 2px; }
.whatsapp-titolo {
  font-family: var(--font-heading); font-size: 15px; color: var(--color-text);
}
.whatsapp-sotto { font-size: 12px; color: var(--color-accent-2-800); }

/* La pagina `booking/`: dal 2026-08-14 il motore di prenotazione sta da solo su una pagina sua, e
   non più dentro la home. Il perché sta in scripts/costruisci-sito.mjs, su `paginaPrenota`: in
   pagina c'erano due moduli di ricerca, e quello dentro l'iframe non si può togliere.
   ⚠️ I 18px di lato sono gli stessi di tutte le fasce del sito: senza, il titolo tocca il bordo
   dello schermo mentre il riquadro sotto ha il suo margine, e la pagina sembra montata storta. */
.prenota-pagina { padding: var(--space-4) 18px var(--space-8); }
.prenota-titolo { font-family: var(--font-heading); font-size: 17px; margin-bottom: var(--space-2); }
/* ⚠️ ALTEZZA FISSA, E LE MISURE SONO PRESE, non scelte a occhio. Il riquadro di Smoobu non si
   ridimensiona da sé: il loro `iframeResizer.contentWindow` aspetta lo script ospite, e quello
   ufficiale se lo porta da cdnjs insieme a jQuery (tre origini di terze parti per l'altezza di un
   rettangolo — e il figlio, senza stretta di mano, non manda NESSUN messaggio: verificato in
   ascolto su `message` per sei secondi, l'11/08/2026).
   Misurato a 375px di larghezza: i risultati con quattro camere sono **1009px**, la risposta
   «nessuna disponibilità» **307px**, la sola casella di ricerca 266px — ma quest'ultima non si
   vede più, perché il riquadro apre sui risultati.
   700px mostra due camere e mezza e per le altre si scorre dentro. È il compromesso fra il caso
   normale (risultati) e quello vuoto: alzarlo riempie meglio i risultati e allarga il vuoto quando
   non c'è disponibilità. Si cambia qui, è una riga. */
.prenota-telaio {
  height: 700px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface);
}
.prenota-telaio iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Su schermo grande lo scorrimento dentro un riquadro dà più fastidio del vuoto, quindi il telaio
   si alza fino a contenere tutti e quattro i risultati senza scorrere. */
@media (min-width: 640px) {
  .prenota-telaio { height: 1040px; }
}

/* ══ selettore location ═════════════════════════════════════════════════════ */
.loc-scelta {
  margin: 0 18px var(--space-3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.loc-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; border-radius: var(--radius-md);
  cursor: pointer; text-align: left;
  border: 1px solid var(--color-divider); background: var(--color-surface);
}
.loc-btn[aria-pressed="true"] {
  border: 1.5px solid var(--color-accent); background: var(--color-accent-100);
}
.loc-nome { font-family: var(--font-heading); font-size: 15px; color: var(--color-text); }
.loc-riga { display: flex; align-items: center; gap: 6px; }
.loc-indirizzo { font-size: 11px; color: var(--color-neutral-700); }
.loc-tag {
  padding: 1px 7px; border-radius: var(--radius-sm); background: var(--color-neutral-300);
  font-size: 10px; color: var(--color-neutral-700);
}

/* ⚠️ Senza JavaScript il selettore non commuta niente: sparisce, e resta visibile la location
   attiva. Un bottone che non fa niente è peggio di un bottone che non c'è. */
html:not(.con-js) .loc-scelta { display: none; }
html:not(.con-js) [data-loc="gropallo"] { display: none; }

/* ══ mappa ══════════════════════════════════════════════════════════════════ */
.mappa {
  margin: 0 18px; border-radius: var(--radius-lg); overflow: hidden;
  height: 290px; box-shadow: var(--shadow-sm);
}
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mappa-credito {
  margin: 6px 18px 0; font-size: 11px; color: var(--color-neutral-600);
}

/* ══ distanze ═══════════════════════════════════════════════════════════════ */
.distanze { padding: var(--space-4) 18px 0; display: flex; flex-direction: column; gap: var(--space-2); }
.distanza { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-800); }
.distanza-n {
  /* ⚠️ Resta tondo, ed è l'unica eccezione ai raggi quasi nulli: è il numero che
     corrisponde al segnaposto sulla mappa, e un segnaposto è un cerchio. */
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--color-accent-2); color: var(--color-bg);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.distanza-tempo {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px; color: var(--color-accent-700);
}
.distanze-nota { margin: var(--space-3) 18px 0; font-size: 12px; color: var(--color-neutral-600); }

/* ══ servizi ════════════════════════════════════════════════════════════════ */
.servizi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.servizio {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.servizio span { font-size: 13px; line-height: 1.35; }
.servizio-larga { grid-column: span 2; flex-direction: row; align-items: center; gap: 12px; }
.servizio-larga svg { flex: none; }

/* ══ camere ═════════════════════════════════════════════════════════════════ */
.camere {
  display: flex; gap: var(--space-3); overflow-x: auto;
  padding: 4px 18px 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.camere::-webkit-scrollbar { display: none; }
.camera {
  min-width: 232px; scroll-snap-align: start;
  padding: 0; overflow: hidden; gap: 0;
}
.camera img { width: 100%; height: 148px; object-fit: cover; }
.camera-senza-foto {
  height: 148px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-neutral-700); text-align: center; padding: 0 10px;
}
.camera-corpo { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.camera-capienza {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--color-neutral-600);
}
.camera-servizi { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══ la location che non ha ancora camere ═══════════════════════════════════ */
.prossima { padding: 0 18px; }
.prossima-riquadro {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px dashed var(--color-neutral-400); border-radius: var(--radius-md);
}
.prossima-testa { display: flex; align-items: center; gap: 8px; }
.prossima-testa .card-meta { margin-left: auto; }
.prossima-nome { font-size: 20px; color: var(--color-neutral-700); }
.prossima-corpo { font-size: 14px; color: var(--color-neutral-700); }
.prossima-avviso { display: flex; gap: 8px; margin-top: 4px; }
.prossima-avviso .input { min-height: 44px; background: var(--color-bg); }
.prossima-avviso .btn { min-height: 44px; white-space: nowrap; background: var(--color-bg); }
.prossima-nota { margin: 0; font-size: 11px; color: var(--color-neutral-600); }
.prossima-camere { padding: var(--space-4) 18px 8px; }
.prossima-fantasma {
  max-width: 232px; border-radius: var(--radius-md); overflow: hidden;
  opacity: .55; filter: grayscale(1);
}
.prossima-fantasma-foto {
  height: 148px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
  font-family: var(--font-heading); font-size: 15px; color: var(--color-neutral-700);
}
.prossima-fantasma-corpo { padding: var(--space-3); background: var(--color-surface); }
.prossima-fantasma-corpo div {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--color-neutral-700);
}

/* ══ domande ════════════════════════════════════════════════════════════════ */
.sez-domande { margin-top: 34px; padding: 28px 18px; background: var(--color-surface); }
.sez-domande h2 { margin-bottom: 4px; }
.faq-nota { font-size: 13px; }
.faq-elenco { display: flex; flex-direction: column; gap: var(--space-2); }
.faq { padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); }
.faq > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq-domanda { flex: 1; }
.faq-piu {
  flex: none; color: var(--color-accent-700); font-size: 18px; line-height: 1;
  transition: transform .18s ease;
}
.faq[open] .faq-piu { transform: rotate(45deg); }
.faq-risposta { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.55; color: var(--color-neutral-800); }

/* ⚠️ LA LACUNA SI VEDE, e non è un difetto della pagina: è come il design dichiara un dato che
   non abbiamo ancora. Tratteggio e monospazio dicono «qui manca qualcosa» a chi guarda la bozza,
   senza che nessuno possa confonderlo con un contenuto pubblicabile. */
.lacuna {
  margin-top: 8px; display: inline-flex; padding: 6px 10px;
  border: 1px dashed var(--color-accent-2-400); border-radius: var(--radius-sm);
  background: var(--color-accent-2-100);
  font-family: var(--font-mono);
  font-size: 11px; color: var(--color-accent-2-800);
}
.lacuna-riga { color: var(--color-neutral-600); font-family: var(--font-mono); }

/* ══ informazioni (tassa, documento) ════════════════════════════════════════ */
.informazioni {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.info-titolo { font-family: var(--font-heading); font-size: 15px; margin-bottom: 4px; }
.info-testo { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--color-neutral-800); }
.tassa-importo {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm); background: var(--color-accent-2-100);
  font-size: 13px; color: var(--color-accent-2-800);
}
.tassa-importo b { font-family: var(--font-heading); font-weight: 400; font-size: 15px; }
/* ⚠️ Le due righe che abbassano il conto mentale — il tetto delle 8 notti e i minori di 14 — NON
   vanno dentro la pastiglia verde: quella è il PREZZO, e infilarci due frasi la trasforma in un
   paragrafo che nessuno legge. Stanno sotto, in grigio, come le condizioni che sono. */
.tassa-nota {
  margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-neutral-700);
}
.cta-checkin { margin-top: var(--space-6); background: var(--color-bg); }

/* ══ chiusura ═══════════════════════════════════════════════════════════════ */
.claim-finale { padding: 48px 18px; text-align: center; }
.claim-finale div {
  font-family: var(--font-heading); font-size: 26px; line-height: 1.15;
  color: var(--color-accent-700);
}
.piede {
  padding: 26px 18px 32px; display: flex; flex-direction: column; gap: var(--space-3);
  font-size: 12px; line-height: 1.6; color: var(--color-neutral-700);
  border-top: 1px solid var(--color-divider);
}
.marchio-piede { margin-right: 0; }
.marchio-piede svg { height: 22px; }
.mono { font-family: var(--font-mono); }
.piede-link {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.piede-link a { text-decoration: none; }

/* ══ SCHERMO GRANDE — il layout desktop, dal redesign del 2026-08-12 ═════════
 *
 * ⚠️ NIENTE DI QUESTO CAMBIA IL TELEFONO. Tutto sta dentro una `@media (min-width: 900px)`:
 * il mobile è la versione provata sul campo e resta com'è. Il desktop è un'aggiunta, non una
 * riscrittura — così se qui sotto c'è un errore, il 50% degli ospiti che arriva da telefono
 * non lo vede nemmeno.
 *
 * ⚠️⚠️ IL CONTENUTO SI CENTRA SENZA UN SOLO DIV IN PIÙ, e vale la pena capirlo perché è la
 * ragione per cui il markup non è cambiato:
 *     padding-inline: max(BORDO, (100% - MISURA) / 2)
 * Sotto i 1180px vince il bordo e il blocco respira; sopra, vince la metà dello spazio che
 * avanza e il contenuto si incolonna al centro. Un contenitore annidato avrebbe fatto lo
 * stesso lavoro chiedendo di toccare tutte e cinque le pagine e il generatore.
 */
@media (min-width: 900px) {
  :root { --misura: 1180px; --bordo: clamp(24px, 4vw, 56px); }

  /* il bordo che centra: una riga sola, applicata ai blocchi di primo livello */
  .testa, .hero-testo, .sez, .sez-larga > .sez, .camere, .distanze,
  .prossima, .claim-finale, .piede, .mappa, .mappa-credito, .distanze-nota,
  .loc-scelta {
    /* ⚠️ `margin-inline: 0` non è ornamento: alcuni di questi blocchi hanno un margine
       orizzontale da 18px nel layout mobile, e un margine restringe la scatola PRIMA che il
       padding calcoli la sua metà. Risultato: mappa e selettore location incolonnati 18px più
       dentro di titoli e camere — uno scarto che si vede solo mettendo un righello sui bordi,
       che è esattamente come è stato trovato. La formula funziona solo su scatole piene. */
    margin-inline: 0;
    padding-inline: max(var(--bordo), calc((100% - var(--misura)) / 2));
  }

  /* ── testa: più aria, marchio un filo più grande ── */
  .testa { padding-block: 14px; gap: 14px; }
  .marchio svg { height: 23px; }
  .testa-checkin, .lingue > summary { font-size: 13px; padding: 8px 13px; }

  /* ── hero: alto quanto lo schermo concede, mai oltre 760 ── */
  .hero { height: clamp(480px, 72vh, 760px); }
  .hero-testo { padding-block: clamp(28px, 4vw, 56px); gap: 14px; }
  .hero-marchio svg { height: clamp(44px, 5vw, 62px); }
  .hero-claim {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: clamp(26px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.015em;
  }
  /* ⚠️ Niente `max-width` in caratteri sul claim: il testo porta già un a capo suo, scritto
     nei file di lingua («Suite nuove di design,⏎in pieno centro città»). Un limite in `ch`
     sopra un a capo esplicito spezza due volte, e in tedesco spezzerebbe in un punto terzo
     che nessuno di noi rilegge. Il ritorno a capo lo decide chi scrive il testo. */
  .hero-luogo { font-size: 16px; }

  /* ── sezioni: il respiro fra una e l'altra è la metà del lavoro ── */
  .sez, .sez-larga { padding-top: clamp(56px, 7vw, 110px); }
  .sez h2, .sez-larga h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.015em; }
  .sez-sotto { font-size: 17px; margin-bottom: 22px; }

  /* ── ricerca e WhatsApp affiancati: due inviti, uno accanto all'altro ──
     ⚠️ Il box WhatsApp NON cresce quanto la ricerca (`flex:1 1 300px` contro `1 1 520px`):
     restano due pesi diversi, che è la regola del colore d'azione tradotta in larghezza. */
  .sez-ricerca { padding-top: clamp(32px, 4vw, 56px); display: flex; flex-wrap: wrap;
                 gap: clamp(16px, 2vw, 28px); align-items: stretch; }
  .sez-ricerca > .cerca { flex: 1 1 520px; }
  .sez-ricerca > .whatsapp { flex: 1 1 300px; margin: 0; }
  .cerca-date { grid-template-columns: 1fr 1fr; }

  /* ── camere: una griglia, non più una fascia che scorre ──
     ⚠️ Lo scorrimento orizzontale è un gesto da telefono. Su un portatile una griglia mostra
     tutte e quattro le camere insieme, che è l'informazione che serve per scegliere. */
  .camere {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: clamp(14px, 1.6vw, 22px); overflow: visible;
  }
  .camera { min-width: 0; }
  .camera img, .camera-senza-foto { height: 210px; }

  /* ── servizi: quattro in riga invece che due per due ── */
  .servizi { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
  .servizio-larga { grid-column: span 4; }

  /* ── mappa e distanze affiancate ── */
  .sez-larga:has(.mappa) { display: grid; grid-template-columns: 1fr; }
  .mappa { height: clamp(300px, 34vw, 460px); border-radius: var(--radius-lg); overflow: hidden; }
  .mappa iframe { border-radius: var(--radius-lg); }
  .distanze { gap: var(--space-3); }
  .distanza { font-size: 16px; }

  /* ── domande: la colonna resta stretta, che è la sua ragione ──
     ⚠️ 900px e non 1180: una FAQ è testo continuo, e il testo continuo si legge in colonna
     stretta. Qui la misura è più corta di proposito, non per dimenticanza. */
  .sez-domande { padding-inline: max(var(--bordo), calc((100% - 900px) / 2)); }

  /* ── chiusura e piede ── */
  .claim-finale { padding-block: clamp(64px, 8vw, 120px); }
  .claim-finale div { font-size: clamp(28px, 4vw, 54px); }
  .piede { flex-direction: row; flex-wrap: wrap; gap: 32px;
           padding-block: 32px 44px; font-size: 14px; }
  .piede > * { flex: 1 1 220px; }
  .piede-link { border-top: 0; padding-top: 0; flex-direction: column; gap: 6px; }
}

/* ══ servizi: i quattro blocchi foto + testo ═════════════════════════════════
 * ⚠️ La fascia di chip che c'era prima diceva le stesse cose in cinque righe di dieci parole.
 * Qui ogni servizio si prende una foto e una frase — è più lento da leggere, ed è il punto:
 * chi sceglie dove dormire guarda, non scorre un elenco di dotazioni. */
.servizio-blocco { display: flex; flex-direction: column; gap: var(--space-3); }
.servizi-blocchi { display: flex; flex-direction: column; gap: 34px; }
.servizio-figura {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--color-neutral-200);
}
.servizio-figura img { width: 100%; height: 240px; object-fit: cover; }
.servizio-senza-foto {
  height: 240px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-neutral-200) 0 8px, var(--color-neutral-300) 8px 16px);
}
.servizio-testo { display: flex; flex-direction: column; gap: 8px; }
.servizio-occhiello {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700);
}
.servizio-testo h3 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.015em; }
.servizio-testo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-neutral-800); }

@media (min-width: 900px) {
  .servizi-blocchi { gap: clamp(56px, 8vw, 110px); }
  /* ⚠️ Alternati con `:nth-child(even)` e non con una classe nel markup: l'alternanza è una
     regola di questo foglio, non un fatto del contenuto. Se un giorno i blocchi diventano tre
     o cinque, si sistema da sola invece di chiedere di rietichettarli. */
  .servizio-blocco {
    flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 72px);
  }
  .servizio-blocco:nth-child(even) { flex-direction: row-reverse; }
  .servizio-figura { flex: 1 1 340px; min-width: 0; }
  .servizio-figura img, .servizio-senza-foto { height: clamp(300px, 34vw, 480px); }
  .servizio-testo { flex: 1 1 340px; gap: 14px; }
  .servizio-testo h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; }
  .servizio-testo p { font-size: clamp(17px, 1.2vw, 20px); max-width: 42ch; }
}

/* ══ pagine legali ══════════════════════════════════════════════════════════
   ⚠️ Colonna stretta e non a tutta larghezza: un'informativa si legge davvero solo se le righe
   stanno sotto i 70 caratteri. È l'unico posto del sito con testo lungo. */
.legale { padding: var(--space-6) 18px var(--space-8); max-width: 40em; margin: 0 auto; }
.legale h1 { font-family: var(--font-heading); font-size: 26px; line-height: 1.15; }
.legale h2 { font-family: var(--font-heading); font-size: 19px; margin: var(--space-8) 0 var(--space-2); }
.legale h3 { font-size: 15px; font-weight: 600; margin: var(--space-6) 0 var(--space-1); }
.legale p, .legale li { font-size: 15px; line-height: 1.62; color: var(--color-neutral-800); }
.legale p { margin: 0 0 var(--space-3); }
.legale ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.legale li { margin-bottom: var(--space-1); }
.legale a { color: var(--color-accent); }
.legale code { font-family: var(--font-mono); font-size: 13px; }
.legale-data { font-size: 13px; color: var(--color-neutral-600); margin-bottom: var(--space-6); }
.legale-host { font-family: var(--font-mono); font-size: 12px; color: var(--color-neutral-600); }
/* ⚠️ La tabella dei cookie scorre DENTRO di sé: su 375px quattro colonne non ci stanno, e senza
   questo la pagina intera scorrerebbe di lato. */
.legale-tabella { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.legale-tabella th, .legale-tabella td {
  border: 1px solid var(--color-divider); padding: var(--space-2) var(--space-3);
  font-size: 14px; text-align: left; vertical-align: top; min-width: 8em;
}
.legale-tabella th { background: var(--color-neutral-200); font-weight: 600; }