/* Il foglio del sito pubblico.
   Zero classi in comune con staff.css e welcome.css: sono tre applicazioni, e
   un nome condiviso è una modifica che ne rompe un'altra senza avvisare.

   ⚠️ I NOMI DEI COLORI SONO QUELLI DELL'AMBITO «sito» in shared/aspetto.php,
   non nomi inventati qui: la pagina Colori emette un <style> DOPO questo
   foglio, e se i nomi non combaciassero cambiare un colore dal pannello non
   farebbe assolutamente niente — senza nessun errore, che è il modo in cui una
   manopola diventa finta. I valori qui sotto sono il punto di partenza; la
   fonte dei default è l'ambito.

   Tema chiaro e basta: il sito è identità di marca, non una preferenza, e non
   segue né l'interruttore del pannello né quello del telefono. */
:root {
  --sfondo: #FAF8F4;
  --carta: #FFFFFF;
  --testo: #1C1B18;
  --testo-2: #6B6862;
  --bordo-deco: #E6E1D8;
  --accento: #086F6E;
  --accento-2: #06514F;
  /* ⚠️ IL LINK HA UN COLORE SUO, e non è l'accento: l'accento è il colore di
     ciò che si preme, il link è il colore di ciò che porta altrove. Chi legge
     li distingue dal colore prima che dalla sottolineatura. Misurati: 7,41:1
     sul bianco, 6,99 sul fondo pagina, 5,10 sul tortora. */
  --link: #0B5D74;
  --link-sopra: #08414F;
  --sito-raggio: 14px;
  --sito-ombra: 0 1px 2px rgba(28, 27, 24, .04), 0 8px 24px rgba(28, 27, 24, .06);

  /* LA LARGHEZZA DEL SITO — 1440, decisa da Mario il 07/09/2026, ed è la
     stessa del sito attuale (misurata sulla pagina viva: testata, barra di
     navigazione e copertina sono tutte 1440).
     ⚠️ Sono DUE misure e non una, e non è un compromesso: 1440 è la CORNICE —
     la barra di navigazione, le fasce piene, le fotografie — mentre il TESTO
     resta su una colonna di lettura. Una riga larga 1440 pixel contiene
     duecento battute: si legge male perché l'occhio, tornando a capo, sbaglia
     riga (DESIGN_SYSTEM §11-sexies). La cornice si vede, la colonna si legge. */
  --sito-largo: 1440px;
  --sito-lettura: 720px;

  /* GLI SFONDI DELLE FASCE. Servono a SPEZZARE: due sezioni con lo stesso
     fondo si leggono come una sola lunga, e chi guarda non capisce dove
     finisce un argomento e comincia l'altro. Sono i valori del sito attuale,
     letti sulla pagina viva. */
  --fascia-chiara: #FFFFFF;
  --fascia-tortora: #D8D7C5;
  --fascia-avorio: #F1F1E8;
  /* Il testo tenue SOPRA il verde. ⚠️ Non è il tortora: #D8D7C5 su #086F6E dà
     4,12:1, sotto la soglia di 4,5. Schiarito quel tanto che serve — 4,81. */
  --su-accento-2: #E8E7DA;
  /* Il pulsante «Prenota». ⚠️ Il sito attuale usa #949366, che col testo
     bianco dà **3,17:1**: sotto la soglia, e proprio sul pulsante che deve
     farsi premere. Scurito fino a 4,82 tenendo la stessa tinta. */
  --oro: #75744C;
  --oro-2: #63623E;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.6 ui-serif, Georgia, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ⚠️ IL FONDO VA DA BORDO A BORDO, IL CONTENUTO NO. Fino all'08/09/2026 la
   cornice era larga 1440 e ogni fascia con lei: su uno schermo largo si
   vedevano due strisce di fondo pagina ai lati di ogni banda colorata, e una
   banda con l'aria attorno non si legge come una sezione — si legge come una
   scheda appoggiata. Adesso la cornice non taglia più niente: sono le fasce a
   essere larghe quanto la finestra, e a stare dentro i 1440 è quello che ci
   scrivi dentro, che è il compito dei loro figli (`.fascia > *`).
   ⚠️ Il `max-width` NON si sposta sui figli uno per uno: c'è già, ed è quello
   che li tiene in riga da sempre. Toglierlo di qui e rimetterlo là sarebbe
   stato lo stesso numero scritto in due posti. */
.foglio {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
/* Le pagine che NON sono a fasce restano nella cornice: lì il fondo è uno solo
   e una scheda larga quanto un monitor non la legge nessuno. */
.foglio:not(.foglio--larga) { max-width: var(--sito-largo); }
/* Una pagina di solo testo: la scheda resta sulla colonna di lettura, dentro
   la cornice larga. */
.foglio > .scheda { margin: clamp(40px, 9vw, 88px) auto; width: min(var(--sito-lettura), 100% - 40px); }

.scheda {
  background: var(--carta);
  border: 1px solid var(--bordo-deco);
  border-radius: var(--sito-raggio);
  box-shadow: var(--sito-ombra);
  padding: clamp(24px, 5vw, 44px);
}

.occhiello {
  margin: 0 0 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-2);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.2;
  font-weight: 400;
}

h1 em { font-style: italic; color: var(--accento); }

p { margin: 0 0 16px; }

a { color: var(--link); }

a:hover { color: var(--link-sopra); }

/* ══ COME REAGISCE UN PULSANTE AL PASSAGGIO ═══════════════════════════════
   Una regola sola per tutti, decisa da Mario il 07/09/2026 guardando lo
   schermo: il fondo si SCHIARISCE di poco, e il colore della scritta NON
   cambia. Un pulsante che al passaggio cambia anche il testo sembra un altro
   pulsante.

   ⚠️ IL 10% NON È UN GUSTO, È UN TETTO MISURATO. Il verde `--accento` col
   testo bianco dà 5,98:1; schiarito del 12% scende a 4,69 e del 16% a 4,31 —
   cioè sotto la soglia di 4,5. Dieci lascia un margine e resta visibile. Se un
   giorno il verde cambia, questo numero va rimisurato, non ereditato.

   ⚠️ E la scritta si RIDICHIARA nel `:hover`, anche se è la stessa. Non è
   ridondanza: `a:hover` (0,1,1) è più specifico di `.canale` (0,1,0), quindi
   senza questa riga il testo dei pulsanti prende il colore dei link — scuro su
   fondo scuro. È successo, e si vedeva solo passandoci sopra. */
:root { --schiarita: 10%; }

/* Il bersaglio non scende sotto i 44px: sotto il pollice 34 non bastano */
.bottone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--carta);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
}

.bottone:hover {
  background: color-mix(in srgb, #fff var(--schiarita), var(--accento));
  color: var(--carta);
}

a:focus-visible,
.bottone:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 3px;
}

.dettagli {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--bordo-deco);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}

.dettagli dt { color: var(--testo-2); }
.dettagli dd { margin: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--sfondo);
  border: 1px solid var(--bordo-deco);
  border-radius: 6px;
  padding: 1px 6px;
}

.piede {
  border-top: 1px solid var(--bordo-deco);
  padding: 26px 0 40px;
  text-align: center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--testo-2);
}

.piede-nome { margin: 0 0 8px; color: var(--testo); }

.piede-contatti {
  width: min(720px, 100% - 40px);
  margin: 0 auto;
  line-height: 2;
}

/* ⚠️ 44px anche qui, ed è il posto dove conta di più: sono il numero di
   telefono, il WhatsApp e l'email: i tre link che qualcuno preme col pollice
   mentre cerca di prenotare. Misurati: erano alti 17px.
   `inline-flex` e non `block`, perché devono restare in fila separati dai
   puntini; il `line-height` alto darebbe l'altezza senza dare il bersaglio. */
.piede-contatti a,
.piede-contatti span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

.piede-contatti a { color: var(--testo-2); }

/* I codici che la legge vuole esposti. Piccoli e in fondo: sono un obbligo,
   non un messaggio — ma leggibili, perché a volte qualcuno li cerca davvero
   (un'agenzia, un controllo). Mai sotto il 12px e mai sotto il contrasto
   minimo: «piccolo» non vuol dire «nascosto». */
.piede-legali {
  width: min(720px, 100% - 40px);
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--testo-2);
}

/* ══ LA TESTATA ═══════════════════════════════════════════════════════════
   Due piani, copiati dal sito attuale e misurati sulla pagina viva a 1440:
   striscia alta 77, barra bianca alta 86, logo 210×65, pulsante 137×39.

   ⚠️ Le due bande sono a TUTTA FINESTRA e il contenuto dentro è a 1440: se la
   banda fosse larga 1440 lascerebbe due strisce di fondo pagina ai lati su uno
   schermo più largo, e la testata sembrerebbe un riquadro appoggiato sopra. */
.cima { background: var(--accento); color: #fff; }
.cima-dentro,
.testata-dentro {
  width: 100%;
  max-width: var(--sito-largo);
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
}
.cima-dentro { min-height: 77px; }

.cima-contatti { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 28px; }
.cima-contatti a {
  /* 44px: sono il numero e l'email, i due link che qualcuno preme col pollice
     mentre sta decidendo se scrivere. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #fff;
  text-decoration: none;
}
.cima-contatti a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cima-contatti svg { width: 24px; height: 24px; flex: none; }
.cima-contatti b {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
/* ⚠️ La riga tenue NON è il tortora delle fasce: #D8D7C5 sul verde dà 4,12:1,
   sotto la soglia. Questo è schiarito fino a 4,81 — vedi `--su-accento-2`. */
.cima-contatti a > span > span {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: var(--su-accento-2);
}
.cima-social { margin-left: auto; display: flex; gap: 4px; }
.cima-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
}
.cima-social a:hover { background: rgba(255, 255, 255, .18); }
.cima-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cima-social svg { width: 22px; height: 22px; }

/* ── La testata che resta in alto ─────────────────────────────────────────
   ⚠️ SI FERMA SOLO LA STRISCIA BIANCA, non anche la fascia verde dei contatti
   che le sta sopra: quella è un'informazione da leggere una volta, e tenerla
   incollata costerebbe 77px di pagina a ogni schermata per ripetere un numero
   di telefono che nel frattempo è anche nel piede.
   ⚠️ `z-index: 30` sta sopra il 2 della fascia di prenotazione, che è l'unico
   altro elemento posizionato del sito: senza, la barra a cavallo della
   copertina passerebbe DAVANTI alla testata ferma.
   ⚠️ E la larghezza resta quella del foglio (1440): appiccicandosi non diventa
   una striscia da bordo a bordo — sotto continua a scorrere la fotografia a
   tutta pagina, e una testata larga quanto la finestra la taglierebbe in due. */
.testata {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo-deco);
  position: sticky;
  top: 0;
  z-index: 30;
  transition: box-shadow .2s ease;
  /* ⚠️ LARGA QUANTO LA FINESTRA, e il contenuto dentro resta a 1440.
     Provata a 1440 e scartata da Mario il 08/09/2026, guardandola: una
     striscia bianca larga quanto il foglio, ferma sopra una fotografia che va
     da bordo a bordo, si legge come un rettangolo che galleggia — mentre a
     tutta larghezza si legge come la testata del sito, che è quello che è.
     Il contenuto continua ad allinearsi col resto: ci pensa
     `.testata-dentro`, che ha il suo `max-width` a 1440. */
}
.testata-dentro { min-height: 86px; transition: min-height .2s ease; }

/* Ferma in alto: si rimpicciolisce per restituire alla pagina lo spazio che
   sta occupando. Il logo scende del 20% (65 → 52) e il pulsante di una taglia;
   l'ombra dice che la striscia adesso galleggia su qualcosa. */
.testata.is-ferma { box-shadow: 0 6px 18px rgba(28, 27, 24, .12); }
.testata.is-ferma .testata-dentro { min-height: 66px; }
.testata.is-ferma .marchio--logo img { max-height: 52px; }
.testata.is-ferma .prenota-ora { min-height: 38px; padding: 0 16px; font-size: 14px; }

.marchio--logo img { transition: max-height .2s ease; }
.prenota-ora { transition: min-height .2s ease, padding .2s ease, font-size .2s ease, background .15s ease; }

/* ⚠️ Chi ha chiesto meno movimento non lo riceve: il rimpicciolimento resta
   (è utile, non decorativo) ma arriva di colpo, senza transizione. */
@media (prefers-reduced-motion: reduce) {
  .testata, .testata-dentro, .marchio--logo img, .prenota-ora { transition: none; }
}

.marchio {
  /* ⚠️ 44px di altezza minima: è un link, e su un telefono si preme col
     pollice. Misurato: era alto 24px — la riga di testo e basta. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px 0 0;
  font-size: clamp(17px, 3.2vw, 21px);
  letter-spacing: .01em;
  color: var(--testo);
  text-decoration: none;
}
.marchio:hover { color: var(--accento-2); }
.marchio--logo { padding: 6px 8px 6px 0; }
.marchio--logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 65px;
  max-width: min(210px, 52vw);
}

/* IL MENU, a destra. Va a capo da sé: con quattro voci corte non serve nessun
   pulsante «hamburger», che nasconde le pagine dietro un gesto e costa un
   pezzo di JavaScript per far vedere quello che ci sta già.
   ⚠️ `justify-content: safe center` sulla riga che va a capo: quando non ci
   sta più torna a sinistra invece di far sporgere la prima voce fuori dallo
   schermo, dove non si può nemmeno scorrere per raggiungerla (WCAG 1.4.4). */
.menu {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: safe center;
  gap: 2px;
}
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--testo);
  text-decoration: none;
}
.menu a:hover { color: var(--accento); }
/* La pagina in cui ci si trova: sottolineata, non solo di un altro colore — il
   colore da solo non lo vede chi non distingue i colori. */
.menu a[aria-current="page"] {
  color: var(--accento);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* IL PULSANTE «PRENOTA». Deve farsi vedere: è l'unica cosa nella testata che
   chiede di essere premuta, e sta accanto a quattro voci che si assomigliano.
   ⚠️ Non è dentro `.menu`: là andrebbe a capo insieme alle voci e finirebbe in
   fondo alla fila proprio sugli schermi stretti, dove conta di più. */
.prenota-ora {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 4px;
  background: var(--oro);
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* ⚠️ L'ORO VA AL CONTRARIO, ed è l'unica eccezione: col testo bianco è già a
   4,82:1, cioè a tre centesimi dalla soglia. Schiarirlo dell'8% lo porta a
   4,12 — illeggibile proprio sul pulsante che deve farsi premere. Qui il
   passaggio si sente scurendo. */
.prenota-ora:hover { background: var(--oro-2); color: var(--carta); }
.prenota-ora:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }

@media (max-width: 900px) {
  .cima-dentro, .testata-dentro { justify-content: center; }
  .cima-social, .menu { margin-left: 0; }
  .menu { width: 100%; order: 3; }
}

/* ── Il contenuto di una pagina ─────────────────────────────────────────── */

/* ⚠️ LA MISURA DI LETTURA È UN VINCOLO, NON UN GUSTO.
   Una riga troppo lunga si legge male per una ragione meccanica: alla fine
   della riga l'occhio deve tornare indietro e trovare l'inizio di QUELLA dopo,
   e più la riga è lunga più spesso sbaglia bersaglio e rilegge la stessa.
   Il riquadro resta della sua larghezza — è la COLONNA DI TESTO a essere più
   stretta, non la card a rimpicciolirsi.

   ⚠️⚠️ E LA MISURA NON SI SCRIVE IN `ch`. L'unità `ch` è la larghezza dello
   ZERO, non della lettera media: in questo serif uno `ch` misura 9,82px mentre
   il carattere medio di un testo italiano vero ne misura 6,79 — un rapporto di
   1,45. Scritto `68ch` credendo di ottenere 68 caratteri, il testo ne conteneva
   **novantotto**, cioè un terzo oltre il limite che la regola voleva imporre.
   Misurato sulla pagina vera, non stimato.
   Qui la misura è in `em`, che scala col corpo del testo: il carattere medio di
   questo serif sta a 0,42em, quindi 30em ≈ 71 caratteri e 26em ≈ 61. */
.sommario {
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--testo-2);
  margin-bottom: 26px;
  max-width: 26em;   /* ≈ 61 caratteri */
}

.foto {
  margin: 0 0 26px;
  border-radius: calc(var(--sito-raggio) - 4px);
  overflow: hidden;
}

.foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Il testo scritto nel pannello: qui dentro ci sono solo i tag che il
   convertitore produce, e sono questi. */
.testo p,
.testo li { max-width: 30em; }   /* ≈ 71 caratteri */

.testo h2 {
  margin: 34px 0 12px;
  font-size: clamp(21px, 3.4vw, 26px);
  font-weight: 400;
  line-height: 1.25;
}

.testo h3 {
  margin: 26px 0 10px;
  font-size: clamp(18px, 2.8vw, 20px);
  font-weight: 400;
}

.testo h2:first-child,
.testo h3:first-child { margin-top: 0; }

.testo ul,
.testo ol { margin: 0 0 16px; padding-left: 1.3em; }

.testo li { margin-bottom: 6px; }

.testo hr {
  border: 0;
  border-top: 1px solid var(--bordo-deco);
  margin: 30px 0;
}

/* ⚠️ Anche qui `--link`, e non l'accento. Questa riga è più specifica di
   `a { … }` e vinceva: il colore dei link si cambiava dal pannello e nel testo
   delle pagine — cioè dove i link stanno davvero — non cambiava niente. È il
   modo silenzioso in cui una manopola diventa finta. */
.testo a { color: var(--link); }

.testo a:hover { color: var(--link-sopra); }

/* ── La home: una sequenza di fasce ──────────────────────────────────────── */

/* ⚠️ NIENTE SPAZIO FRA LE FASCE, ed è la regola che le fa funzionare.
   Ogni fascia porta il proprio fondo — bianco, tortora, verde — e sono
   diversi apposta: è il cambio di colore a dire dove finisce un argomento e
   comincia l'altro. Uno spazio in mezzo lascerebbe vedere il fondo della
   pagina, cioè un TERZO colore che nessuno ha scelto, e le fasce da bande
   continue diventerebbero strisce che galleggiano.
   Lo spazio attorno al testo lo dà il padding di ciascuna fascia, che è dove
   deve stare: dentro il colore, non fra un colore e l'altro. */
.home { display: flex; flex-direction: column; }

.apertura { max-width: 30em; }

.apertura h1 { margin-bottom: 14px; }

/* Una fascia non ha riquadro: il riquadro serve a separare cose diverse, e qui
   le cose sono tutte della stessa pagina. Le separa lo spazio. */
.fascia > h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 3.8vw, 30px);
  font-weight: 400;
  line-height: 1.2;
}

.fascia > .occhiello { margin-bottom: 8px; }

.fascia > .testo { max-width: 30em; }

/* ⚠️ REGOLA GENERALE, 08/09/2026: OCCHIELLO, TITOLO E TESTO DI UNA FASCIA
   STANNO AL CENTRO DEL LAYOUT. Non è una preferenza estetica presa fascia per
   fascia: finché lo era, ogni sezione nuova nasceva allineata a sinistra e la
   si centrava dopo, a mano, quando Mario la vedeva storta — «dove siamo» è la
   terza di fila. La regola sta qui, sul selettore generale, così una fascia
   nuova nasce già giusta.
   ⚠️ E CENTRARE IL BLOCCO NON BASTA: `.testo` ha un tetto di lettura di 30em,
   e un blocco con un `max-width` senza margini automatici resta incollato a
   sinistra della sua scatola — è esattamente ciò che si vedeva. Servono tutte
   e due le cose: `margin-inline: auto` mette il blocco al centro, il
   `text-align` mette le righe al centro dentro il blocco.
   ⚠️ Vale per i FIGLI DIRETTI. Il testo di `.affiancato` sta in una colonna
   accanto a una fotografia: lì «al centro del layout» non vuol dire niente, e
   il combinatore `>` lo lascia fuori da sé. */
.fascia > .occhiello,
.fascia > h2,
.fascia > h3,
.fascia > p,
.fascia > .testo { text-align: center; }
.fascia > .testo,
.fascia > p { margin-inline: auto; }

/* ⚠️ DUE ASIMMETRIE RESTANO, E SONO VOLUTE. Scritte qui perché la prossima
   sessione le trovi dichiarate invece di leggerle come difetti e «aggiustarle»:
   · ~~Le pagine-articolo restano allineate a sinistra~~ — NON PIÙ VERO dal
     09/09/2026: Mario ha chiesto che **tutte** le pagine abbiano lo stesso
     aspetto della home, frontespizio compreso, e le `.scheda` sono sparite.
     Resta scritto perché la ragione che c'era — una colonna di prosa centrata
     si legge peggio — è vera in generale e tornerà buona il giorno in cui una
     pagina sarà davvero un articolo lungo. Qui i testi sono corti.
   · Il testo di `.affiancato` (quello che sta accanto a una fotografia) resta
     a sinistra: è una colonna, e «al centro del layout» lì non vuol dire
     niente. Lo tiene fuori il combinatore `>`, non un'eccezione scritta. */

/* L'unica eccezione, e ha una ragione tipografica: il testo delle camere è su
   due colonne. Righe centrate dentro una colonna stretta sfrangiano tutti e
   due i bordi e fanno sparire la colonna; il blocco resta comunque al centro
   perché è largo quanto la griglia di fotografie sotto. */
.foglio--larga .fascia.fascia-camere > .testo { text-align: left; }

/* ── Inviti all'azione ───────────────────────────────────────────────────── */

/* ⚠️ `justify-content: center` NON è ridondante con la regola generale che
   centra i figli di una fascia. Quella agisce con `text-align`, e su un
   contenitore `display: flex` il testo non decide niente: i pulsanti si
   appoggiavano al bordo sinistro della colonna mentre titolo e paragrafo sopra
   erano centrati — cioè lo stesso difetto della 11-duodecies, in una forma che
   quella regola non poteva raggiungere. */
.bottoni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 22px 0 0;
}

/* ⚠️ `text-align` NON ARRIVA AI FIGLI DI UN FLEX. La fascia è centrata, il
   paragrafo dei pulsanti eredita `text-align: center` — e i pulsanti restano
   comunque impacchettati a sinistra, perché in un contenitore flex a decidere
   è `justify-content`. È il modo più comune di credere di aver centrato una
   cosa: la regola c'è, si applica, e non fa niente. Vale per ogni riga di
   pulsanti dentro una fascia. */
.fascia .bottoni { justify-content: center; }

.bottone-tenue {
  background: transparent;
  color: var(--accento-2);
  border: 1px solid var(--bordo-deco);
}

.bottone-tenue:hover { background: var(--carta); color: var(--accento-2); }

/* I CANALI DIRETTI — telefono e WhatsApp.
   Stanno PRIMA dei pulsanti perché sono il modo più veloce di prenotare qui:
   chi chiama parla con Mario, chi passa da un portale paga la commissione.

   ⚠️ NON portano i colori di marca di WhatsApp, ed è una scelta misurata, non
   una dimenticanza: il verde scuro del loro logo (#075E54) è a un passo dal
   nostro accento (#086F6E) — affiancati non si distinguerebbero, e il colore
   non farebbe il lavoro per cui lo si sarebbe messo. A distinguerli è il
   SIMBOLO, che è la parte che si riconosce davvero. (Il verde chiaro #25D366,
   quello che verrebbe in mente, col testo bianco dà 1,8:1: illeggibile.)

   Il bersaglio è 52px, non 44: sono i pulsanti che si premono col telefono in
   mano, spesso camminando. */
.canali {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

.canale {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 46px e non 52: erano larghi come un pulsante di pagamento, e qui sono due
     accanto a un testo. ⚠️ Sotto i 44 non si scende — è il bersaglio minimo
     sotto il pollice (DESIGN_SYSTEM §8) — quindi 46 è quasi il fondo: se un
     giorno sembrasse ancora troppo, si toglie padding, non altezza. */
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accento);
  color: var(--carta);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.canale:hover {
  background: color-mix(in srgb, #fff var(--schiarita), var(--accento));
  color: var(--carta);
}

.canale:focus-visible {
  outline: 3px solid var(--accento);
  outline-offset: 3px;
}

/* IL LINK AL MOTORE DI PRENOTAZIONE — il pavimento sotto la barra.
   ⚠️ Non è un doppione del pulsante «cerca» del widget: quello, misurato, è
   un `<a>` senza nome accessibile, e nella barra i campi data hanno
   `tabindex="-1"`. Chi naviga da tastiera non ha altra strada che questa.
   Sta su due righe — etichetta e nota — quindi l'allineamento è in cima al
   simbolo, non al centro, o la nota tirerebbe giù l'icona. */




/* Il terzo canale, l'email, non compete con gli altri due: si scrive per
   chiedere, si chiama per prenotare. */
.canale--mail {
  background: transparent;
  color: var(--accento-2);
  border: 1px solid var(--bordo-deco);
}

.canale--mail:hover { background: var(--carta); color: var(--accento-2); }

/* ══ I MODI DI PRENOTARE, in schede ═══════════════════════════════════════
   Quattro schede: il modulo qui sopra, il telefono, WhatsApp, i portali.
   Una sola colonna sul telefono, due sul tablet, quattro sullo schermo largo —
   e mai tre, che con quattro schede lascerebbe l'ultima sola su una riga sua. */
.modi {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}

@media (min-width: 640px) { .modi { grid-template-columns: repeat(2, 1fr); } }
/* ⚠️ `auto-fit` e non `repeat(4, 1fr)`: con quattro colonne fisse una fila di
   TRE schede riempiva tre colonne e lasciava vuota la quarta — la fila si
   appoggiava a sinistra dentro una fascia centrata, e si leggeva come un
   errore di impaginazione. Succedeva già su «Contatti» (telefono, WhatsApp,
   email) e sarebbe successo di nuovo qui con i tre modi di arrivare. Con
   `auto-fit` le tracce vuote collassano e le schede si dividono lo spazio in
   parti uguali, qualunque sia il loro numero. */
@media (min-width: 1100px) { .modi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

/* La scheda è una colonna: il bottone va in fondo, allineato con quello delle
   altre, anche quando i testi sono di lunghezza diversa. Senza `auto` sul
   margine i pulsanti seguirebbero il testo e resterebbero a quattro altezze. */
/* ⚠️ TUTTO CENTRATO — variante scelta da Mario il 07/09/2026 guardando le
   quattro alternative affiancate. `align-items: center` sull'asse trasversale
   serve perché la colonna è flessibile: senza, il simbolo e il pulsante
   resterebbero larghi quanto la scheda e il centraggio del testo si vedrebbe
   solo a metà. */
.modo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--carta);
  border: 1px solid var(--bordo-deco);
  border-radius: var(--sito-raggio);
  padding: 22px 20px 20px;
}

/* Il simbolo prende l'oro del pulsante «Prenota ora», e lo prende PER
   RIFERIMENTO: cambiando quel colore dalla pagina Colori cambiano anche questi.
   ⚠️ 4,82:1 sulla carta — per un disegno la soglia è 3:1, quindi c'è margine.
   ⚠️ E il tratto si assottiglia a 1,5: lo spessore è dichiarato dentro l'SVG
   in unità del suo riquadro, quindi CRESCE insieme al simbolo — a 38px un
   tratto da 1,7 diventa spesso 2,7 pixel veri e il disegno si impasta. */
.modo-simbolo { margin: 2px 0 12px; color: var(--oro); line-height: 0; }

.modo-simbolo svg { stroke-width: 1.5; }

.modo-titolo {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.25;
}

.modo-testo {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--testo-2);
}

/* ⚠️ `margin-top: auto` e non un margine fisso: la scheda è una colonna
   flessibile, e `auto` spinge l'azione IN FONDO. Con un margine fisso i
   pulsanti seguirebbero la fine del testo, e siccome i testi sono lunghi
   diversi finirebbero a quattro altezze diverse — la fila si legge storta
   anche se le schede sono alte uguali. */
/* ⚠️ IL DISTACCO DAL TESTO STA NEL PADDING, NON NEL MARGINE, e la ragione è
   che `margin-top: auto` SOSTITUISCE il margine superiore invece di
   sommarcisi. Nelle schede che hanno spazio d'avanzo `auto` lo mangia tutto e
   il pulsante scende in fondo — che è quello che si vuole — ma nella scheda
   PIÙ ALTA, quella che detta l'altezza di tutte, di spazio d'avanzo non ce n'è
   e `auto` vale ZERO: lì il pulsante finisce incollato all'ultima riga di
   testo. Si vede solo in una scheda su quattro, cioè nell'unica in cui nessuno
   va a guardare.
   Il padding invece non si azzera mai: garantisce il distacco minimo, e il
   margine automatico aggiunge il resto quando c'è. */
.modo-azione {
  margin: 0 0 4px;
  margin-top: auto;
  padding-top: 14px;
  width: 100%;
  text-align: center;
}

/* ⚠️ NON più `width: 100%`: il pulsante si stringe attorno alle sue parole,
   e a tenerlo in mezzo alla scheda è il centraggio della riga. Largo quanto la
   colonna sembrava una barra, non un pulsante — e tre barre in fila una sotto
   l'altra si leggono come un elenco, non come tre azioni. */
/* ⚠️ Dentro le schede il pulsante respira di più — 22 e non 18 — perché lì è
   solo, in mezzo a una colonna, e senza aria attorno alle parole sembra
   stretto addosso all'etichetta. Fuori dalle schede, in fila con altri, quel
   respiro diventerebbe ingombro. Stessa classe, due contesti, due misure. */
.modo .canale {
  justify-content: center;
  text-align: center;
  padding: 0 22px;
  font-size: 15px;
}

/* IL DATO IN FONDO ALLA SCHEDA: la riga che qualcuno copia davvero.
   Il nome della fermata da digitare negli orari, la distanza vera
   dall'Ortopedico. Dentro un paragrafo si perderebbero; qui hanno la forma di
   un'etichetta, che è quello che sono.
   ⚠️ Sta nello slot dell'azione, quindi eredita `margin-top: auto` e finisce
   in fondo allineata con quella delle altre schede anche se i testi sono
   lunghi diversi. */
.modo-dato {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accento) 10%, transparent);
  color: var(--testo);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  /* Il nome di una fermata non si spezza a metà parola, e le cifre di una
     distanza stanno in colonna con quelle delle altre schede. */
  font-variant-numeric: tabular-nums;
}

/* ── I portali: nomi, non marchi ──────────────────────────────────────────
   ⚠️ Il fondo è il colore di marca ESATTO e arriva da PHP in un attributo
   `style`, non da qui: sta in `sito_portali()` insieme al colore del testo
   che gli corrisponde, perché i due valori vanno cambiati INSIEME o si ottiene
   una pillola illeggibile. Qui c'è solo la forma.
   ⚠️ E sono `<span>`, non `<a>`: non portano da nessuna parte, per scelta. */
/* ⚠️ ALTA COME UN PULSANTE, e centrata. Le pillole sono l'azione della quarta
   scheda — non un'azione da premere, ma occupano quel posto — e se la loro riga
   fosse più bassa, nella fila di quattro schede l'ultima avrebbe il suo
   contenuto disallineato dalle altre tre. `align-items: center` le tiene in
   mezzo a quell'altezza anche quando sono più basse. */
.pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
}

.pillola {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* La fascia degli inviti porta il modulo e le schede: quelli vogliono la
   cornice, il titolo e il testo restano sulla colonna di lettura.
   ⚠️ Tre classi per battere `.foglio--larga .fascia > *`, che ne ha due e sta
   scritta dopo (7.181 letta al contrario). */
/* TESTO E FOTO AFFIANCATI. Il testo tiene la sua misura di lettura — non si
   allarga per riempire, che è il modo di rendere illeggibile una pagina per
   farla sembrare piena — e la foto prende il resto. Sotto i 900 vanno uno
   sopra l'altra, con la foto per prima: su un telefono si guarda e poi si
   legge. */
.affiancato {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* L'APERTURA CON LA FOTO ACCANTO AL TITOLO.
   ⚠️ La foto sta a SINISTRA e il titolo a destra, ma nel documento il titolo
   viene DOPO la foto: chi legge con lo schermo sente prima l'immagine e poi il
   titolo, che è l'ordine giusto solo perché l'immagine ha un `alt` che dice
   cosa si vede. Se un giorno l'`alt` restasse vuoto, quest'ordine andrebbe
   invertito (WCAG 1.3.2). */
.foglio--larga .fascia-apertura > .apertura-foto {
  width: min(var(--sito-largo), 100% - 40px);
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* ⚠️ La foto NON prende metà: prende 38 su 100. A metà era alta 453px e
   spingeva la barra di prenotazione a 848 — cioè fuori dal primo schermo di un
   portatile, su una pagina che esiste per far prenotare. Il titolo, che è
   testo, si accontenta di meno spazio senza perdere niente; la fotografia no,
   perché la sua altezza dipende dalla larghezza. */
@media (min-width: 900px) {
  .foglio--larga .fascia-apertura > .apertura-foto {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  }
}

.apertura-foto__img { margin: 0; }

/* Stessa proporzione dichiarata dell'altra: 3:2, così una fotografia scelta
   per un posto va bene anche nell'altro. */
.apertura-foto__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sito-raggio);
  box-shadow: var(--sito-ombra);
}

.apertura-foto__testo > :first-child { margin-top: 0; }
.apertura-foto__testo .sommario { max-width: 32em; }

/* ── Le tre parti, in colonna ─────────────────────────────────────────────
   ⚠️ `auto-fit` con un minimo, non tre colonne fisse: le sezioni le decide chi
   scrive il testo, e con un numero fisso una quarta sezione finirebbe da sola
   su una riga sua. Così le colonne seguono il contenuto. */
.tre-parti {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Nessun riquadro attorno: le tre parti sono un testo diviso in colonne, non
   tre schede. Le schede vere stanno sotto e sono le azioni — dare la stessa
   forma a un testo e a un'azione toglie il segnale a tutti e due. */
.parte { min-width: 0; }

/* Il simbolo sta NELLA riga del titolo, non sopra: sopra era una terza riga
   che allontanava il titolo dal suo testo, e in tre colonne affiancate tre
   simboli in fila sembrano una legenda invece che tre argomenti. */
.parte-titolo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: 400;
  line-height: 1.25;
}

/* `flex: none` o il simbolo si schiaccia quando il titolo va a capo. */
.parte-simbolo { flex: none; color: var(--accento); line-height: 0; }

/* ⚠️ Dentro una colonna il testo NON prende la misura di lettura larga: la
   colonna è già stretta, e un `max-width` più grande della colonna non fa
   niente — ma lasciarlo lì fa credere che ci sia una regola dove non c'è. */
.tre-parti .testo { max-width: none; font-size: 15px; }
.tre-parti .testo p:last-child { margin-bottom: 0; }

/* ⚠️ DUE COLONNE, e la ragione è verticale: in una colonna sola questo testo
   è alto mezzo schermo, e spinge le quattro schede — che sono l'azione — sotto
   la piega. Le colonne dimezzano l'altezza senza togliere una parola.
   `column-width` e non `column-count`: si dichiara quanto dev'essere larga una
   colonna, e il browser decide QUANTE ce ne stanno. Con un numero fisso, su
   una colonna stretta si otterrebbero due colonne da dodici caratteri. */
.affiancato > .testo {
  max-width: none;
  column-width: 19em;
  column-gap: clamp(24px, 3vw, 40px);
}

/* ⚠️ Un paragrafo non deve spezzarsi fra due colonne a metà di una frase:
   l'occhio, arrivato in fondo, torna in alto a destra e perde il filo. */
.affiancato > .testo p { break-inside: avoid; }

.affiancato-foto { margin: 0; }

/* ⚠️ LA PROPORZIONE DELLO SPAZIO È DICHIARATA QUI, ed è 3:2 — la proporzione
   con cui è scattata quasi ogni fotografia, quindi quella che chiede meno
   ritaglio. Prima non c'era: l'altezza la decideva l'immagine caricata, quindi
   la stessa pagina cambiava impaginazione a seconda della foto del giorno, e
   scegliere una foto voleva dire indovinare.
   `object-fit: cover` la fa riempire lo spazio senza deformarla: quello che
   avanza si taglia.
   ⚠️ E oggi si taglia dal CENTRO, perché nel pannello non c'è ancora un modo
   di dire quale parte tenere. Finché non c'è, una foto con il soggetto
   spostato in un angolo viene tagliata male e nessuno lo segnala. */
.affiancato-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--sito-raggio);
  box-shadow: var(--sito-ombra);
}

/* ⚠️ NON A METÀ: 44 all'immagine e 56 al testo. Metà per uno andava bene
   quando a destra c'erano solo due paragrafi; da quando la colonna ospita
   anche l'occhiello e il titolo della pagina, le due parti non hanno più lo
   stesso peso — e un disegno al tratto regge benissimo qualche pixel in meno,
   mentre un titolo stretto va a capo una volta di troppo. */
/* ⚠️⚠️ LE COLONNE SI CENTRANO NEL LAYOUT, NON SI APPOGGIANO A SINISTRA.
   Con le colonne in frazioni (`44fr 56fr`) le due tracce si spartiscono tutta
   la larghezza, ma il CONTENUTO della colonna di testo è più stretto della sua
   traccia — il titolo ha la sua misura, i paragrafi la loro colonna di lettura.
   Misurato: l'inchiostro finiva a 1382 mentre la traccia arrivava a 1600, cioè
   218px di vuoto a destra, e il centro ottico del blocco cadeva **109px a
   sinistra** del centro della pagina. Le scatole erano centrate; quello che si
   vede no.
   Le tracce si dichiarano quindi con un tetto invece che in frazioni, e la
   coppia si centra con `justify-content`: lo spazio che avanza si divide in
   parti uguali ai due lati, invece di finire tutto a destra.
   Regola generale, non di questa fascia: vale a due, tre o quattro colonne.
   (Richiesta di Mario, 08/09/2026.) */
@media (min-width: 900px) {
  .affiancato {
    grid-template-columns: minmax(0, 38em) minmax(0, 34em);
    justify-content: center;
  }
  /* ⚠️ Il disegno va a sinistra SOLO qui. Nel documento viene dopo il testo —
     così su un telefono, dove le colonne diventano una, si legge prima di che
     pagina si tratta e poi si guarda la mappa. `order` sposta ciò che si vede,
     non ciò che si legge: è lecito perché la figura ha un `alt` che la
     descrive e non porta informazione che il testo non abbia. */
  .affiancato > .affiancato-foto { order: -1; }
}

/* Sotto i 900 la mappa scende in fondo e si centra: è il commento al testo,
   non la sua premessa. Un disegno al tratto non ha bisogno di tutta la
   larghezza per leggersi. */
@media (max-width: 899px) {
  .affiancato-foto--disegno img { max-width: min(420px, 88%); }
}

/* ⚠️ MENO SPAZIO SOPRA DOVE LA FASCIA OSPITA LA TESTATA. La regola generale dà
   88px sopra e sotto a ogni fascia — giusta fra due fasce, troppa qui: sopra
   c'è la barra di prenotazione, che ha già il suo respiro, e sotto l'occhiello
   ci sarebbe stato anche il padding di `.apertura`, per 144px complessivi.
   Sotto invece resta com'è: lì la fascia confina con un'altra fascia. */
.foglio--larga .fascia.fascia--con-testata { padding-top: clamp(18px, 2.4vw, 34px); }

/* La testata della pagina quando vive DENTRO la colonna del testo.
   ⚠️ QUI SI DISFANO LE REGOLE CHE VALGONO PER LA BANDA A SÉ. `.apertura` nasce
   come fascia autonoma, quindi il foglio le dà `width: min(lettura, 100% - 40px)`
   con margini automatici e `padding-top` fino a 56px. Dentro una colonna quelle
   due cose fanno danni misurabili: i margini automatici la rendevano 720px in
   una colonna da 762, cioè **rientrata di 21px** rispetto ai paragrafi sotto —
   titolo e testo non erano allineati, e a occhio sembrava un difetto di
   spaziatura; il padding invece si sommava agli 88px della fascia, per 144px di
   vuoto sopra l'occhiello.
   Tre classi (0,3,0) contro le due dell'originale: così vince per specificità e
   non per ordine di scrittura, che è quello che si rompe al primo riordino del
   foglio (MIGLIORIE 7.189). */
.foglio--larga .apertura.apertura--dentro {
  width: auto;
  max-width: none;
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  padding-top: 0;
}
.apertura--dentro .occhiello { margin-bottom: 8px; }
/* ⚠️ IL TITOLO HA UNA MISURA SUA, ED È LEI A DECIDERE DOVE VA A CAPO.
   Nessuna proprietà CSS sceglie il punto di spezzatura, quindi lo si ottiene
   dalla larghezza: a 720px (la colonna intera) ci stanno 42 caratteri e il
   taglio cade dopo «sul Lago di», spezzando in due il nome del posto; con
   `text-wrap: balance` cadeva dopo «un angolo di», che pareggia le righe ma
   taglia comunque un pezzo di senso. Misurata la finestra in cui il taglio
   cade fra i due pezzi — «Giandra, un angolo di paradiso» / «sul Lago di
   Ganzirri» — sta fra 13,7em e 14,7em: qui 14em, in mezzo con margine da
   entrambi i lati.
   ⚠️ In `em` e non in pixel: la misura segue il corpo del carattere, quindi il
   numero di caratteri per riga resta lo stesso a ogni dimensione di schermo.
   Un valore in pixel avrebbe funzionato solo alla larghezza su cui l'ho
   misurato.
   ⚠️ E non un `&nbsp;` dentro il titolo, che a schermo avrebbe fatto lo stesso:
   quel titolo finisce anche nel `<title>`, nella descrizione per i motori e
   nell'anteprima social — un carattere invisibile ficcato lì si porta dietro
   tutti quei posti.
   ⚠️ La misura è tarata su QUESTO titolo. Cambiandolo il taglio si sposta, ma
   non può diventare brutto: la spezzatura naturale produce sempre righe
   valide, e 14em è comunque la misura giusta per un titolo con le grazie —
   quarantadue caratteri su una riga sono troppi per leggerli d'un fiato. */
/* ⚠️ IL CORPO SI MISURA SULLA COLONNA, NON SULLA FINESTRA. La regola generale
   dà `clamp(26px, 5vw, 38px)`: `vw` è la larghezza della FINESTRA, e va bene
   per un titolo che sta a tutta pagina. Qui il titolo vive in una colonna
   larga il 44% — a 1000px di finestra quel `5vw` vale ancora 38px dentro una
   colonna da 500, e il titolo andava a tre righe con «Ganzirri» da solo
   sull'ultima. `cqi` misura la colonna che lo contiene, quindi il rapporto fra
   corpo e misura resta lo stesso a ogni larghezza — ed è quel rapporto, non i
   pixel, a decidere dove va a capo.
   ⚠️ NIENTE `text-wrap: pretty`, provato e tolto: riottimizza l'intera
   spezzatura per evitare le righe finali corte, e così facendo SCAVALCA la
   misura — a 1000px sceglieva di nuovo il pareggio invece del taglio di senso.
   Le due cose vogliono l'opposto: la misura dice «riempi fino a qui», `pretty`
   dice «pareggia». Tenerle insieme significa non decidere. */
.affiancato-testo { container-type: inline-size; }
.apertura--dentro h1 {
  margin: 0;
  max-width: 14em;
  font-size: clamp(22px, 6.3cqi, 38px);
}

/* ⚠️ UN DISEGNO NON SI RITAGLIA. La regola qui sopra è pensata per le
   fotografie: ritaglia a 3:2, arrotonda gli angoli e mette un'ombra. Su
   un'illustrazione con lo sfondo trasparente — una mappa, uno schema — quel
   trattamento fa tre danni insieme: taglia via il disegno (che non è nato in
   3:2), arrotonda un rettangolo che non c'è, e proietta un'ombra attorno al
   nulla, perché il fondo è vuoto.
   Qui l'immagine si vede INTERA, senza cornice: il fondo della fascia le passa
   attraverso, che è il motivo per cui è stata disegnata su trasparente. */
.affiancato-foto--disegno img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  max-height: 46svh;
  margin-inline: auto;
}

/* Il testo affiancato NON va su due colonne: `.affiancato > .testo` le mette
   quando il blocco è largo tutta la fascia, ma qui la metà è già una colonna
   di lettura — spezzarla in due darebbe due colonnine da nove parole. */
.affiancato-testo > .testo { column-width: auto; max-width: 34em; }
.affiancato-testo > :first-child { margin-top: 0; }

/* ⚠️ La fascia che affianca prende la cornice larga, non la colonna di
   lettura: due colonne dentro 720px sarebbero due strisce. Tre classi per
   battere `.foglio--larga .fascia > *`, che ne ha due (MIGLIORIE 7.189). */
.foglio--larga .fascia.fascia-testo > .affiancato {
  width: min(var(--sito-largo), 100% - 40px);
}

/* ⚠️ TOLTA `@media (max-width:899px){ .affiancato-foto { order: -1 } }`, che
   sul piccolo tirava la figura in cima. Era coerente con l'ordine di prima —
   figura per prima nel documento, testo dopo — e contraddice quello di adesso:
   su un telefono il visitatore trovava un disegno prima di sapere di che
   pagina si tratta. Ora l'ordine visto è quello del documento, cioè titolo,
   testo, immagine (richiesta di Mario, 08/09/2026). */

.foglio--larga .fascia-cta > .modi,
.foglio--larga .fascia-modi > .modi,
.foglio--larga .fascia-modi > .tre-parti,
.foglio--larga .fascia-modi > .affiancato,
/* ⚠️ `.beddy-riquadro` E NON PIÙ `.beddy`. Da quando la fascia «Prenota una
   camera» monta lo stesso riquadro verde della pagina Prenota, il figlio
   diretto della fascia è il riquadro: le due regole scritte per `.beddy`
   smettevano di combaciare — non con un errore, ma restando semplicemente
   inerti. La barra cadeva sulla colonna di lettura (720px invece di 1400) e
   Beddy, in metà spazio, impila i campi invece di affiancarli: la stessa
   sezione, sulle due pagine, aveva due forme.
   ⚠️ E la vecchia regola del fondo verde è STATA TOLTA, non lasciata lì:
   adesso il verde lo mette `.beddy-riquadro`, e una seconda regola che disegna
   la stessa scatola è il modo in cui un giorno se ne cambia una sola. */
.foglio--larga .fascia-cta > .beddy-riquadro { width: min(var(--sito-largo), 100% - 40px); }
.fascia-cta > .beddy-riquadro { margin-top: 26px; }

/* Sul fondo verde i pulsanti pieni sparirebbero: là si inverte. */
.fascia--accento .canale {
  background: var(--carta);
  color: var(--accento-2);
}

.fascia--accento .canale:hover { background: var(--su-accento-2); color: var(--accento-2); }

.fascia--accento .canale--mail {
  background: transparent;
  color: var(--carta);
  border-color: var(--su-accento-2);
}

.fascia--accento .canale--mail:hover { background: var(--accento-2); color: var(--carta); }

/* ── La barra di prenotazione ────────────────────────────────────────────── */

.beddy-invito {
  margin: 18px 0 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--testo-2);
}

/* Il widget vive in uno shadow DOM che il nostro CSS non raggiunge: qui si
   governa solo lo spazio che occupa, non il suo aspetto. Quello sta in
   assets/beddy/beddy-theme.css, iniettato dal loader. */
.beddy { min-height: 72px; }

/* ══ LA BARRA DI PRENOTAZIONE, A CAVALLO ══════════════════════════════════
   Richiesta di Mario, 07/09/2026: orizzontale come sul sito attuale, e messa
   «a cavallo fra la sezione della hero e quella della descrizione».

   Il margine negativo la solleva di metà della propria altezza: mezza barra
   sta sopra la fotografia, mezza sotto. È il punto in cui l'occhio si ferma
   scendendo, ed è lì che si chiede la data.

   ⚠️ `z-index` E `position: relative` insieme: senza il posizionamento
   l'indice non fa niente, e la barra finirebbe DIETRO alla copertina — la si
   vedrebbe sparire a metà, senza nessun errore da nessuna parte. */
/* ⚠️ `.fascia.fascia-beddy` e non `.fascia-beddy`: la regola generale delle
   fasce sta più in basso in questo foglio, e a parità di specificità vince
   quella scritta dopo. Con un solo nome di classe questa barra prendeva il
   padding di 88px delle fasce normali e il margine negativo non la sollevava
   più — nessun errore, solo un buco fra la copertina e il resto. È la 7.181
   letta al contrario: non una media query, ma l'ordine di scrittura. */
/* L'ALZATA — quanto la barra di prenotazione sale sopra la fotografia. È UN
   numero solo e lo usano in TRE: il margine negativo che solleva la barra, il
   punto in cui il colore della fascia comincia, e il padding di sotto della
   copertina, che tiene le scritte fuori dalla parte che la barra copre.
   ⚠️ Sta su `.foglio--larga` e non sulla fascia proprio perché il terzo lo
   legge la copertina, che è un altro elemento: dichiarata dentro la fascia,
   alla copertina arrivava `0` e le scritte finivano sotto la barra. */
.foglio--larga { --beddy-alzata: clamp(48px, 7vw, 96px); }
.foglio--larga .fascia.fascia-beddy {
  padding-block: 0 clamp(28px, 5vw, 56px);
  margin-top: calc(-1 * var(--beddy-alzata));
  position: relative;
  z-index: 2;
  /* Trasparente finché sta sulla fotografia, poi il colore della fascia. Un
     fondo trasparente per intero lascerebbe vedere il fondo della PAGINA, cioè
     un terzo colore fra la copertina e la fascia che segue. */
  background: linear-gradient(to bottom,
              transparent 0 var(--beddy-alzata),
              var(--fascia-fondo, transparent) var(--beddy-alzata));
}
/* La barra è LARGA: prende la cornice, non la colonna di lettura. Non è testo
   da leggere, è un modulo da compilare — e i campi data affiancati hanno
   bisogno di spazio, altrimenti vanno a capo e diventano quattro righe. */
.foglio--larga .fascia.fascia-beddy > * { width: min(var(--sito-largo), 100% - 20px); }
/* ⚠️ Tre classi per battere la riga qui sopra, che ne ha due: scritta con la
   stessa forza avrebbe perso per ordine, e la barra sarebbe rimasta larga
   com'era — senza errori e senza niente in console (MIGLIORIE 7.189). */
.foglio--larga .fascia.fascia-beddy > .beddy,
.foglio--larga .fascia.fascia-beddy > .beddy-invito {
  width: min(var(--beddy-larga), 100% - 20px);
}
/* ⚠️ LA LARGHEZZA DELLA BARRA È QUELLA DI BEDDY, NON UNA NOSTRA.
   Dentro il widget c'è una seconda scatola bianca — la loro — con la riga verde
   sotto (`by-beddy-bar-ui__content`, `max-width: 1070px`): il nostro rettangolo
   ne era largo 1420, quindi si vedevano due bianchi concentrici e la riga verde
   finiva a metà. Misurato il 08/09/2026 su finestra da 1800: 1070 contro 1420,
   ed è esattamente il rapporto che si vedeva a occhio.
   Il numero sta QUI e in un posto solo perché è una misura ALTRUI: il giorno in
   cui la barra tornasse a non combaciare, si rimisura
   `by-beddy-bar-ui__content` nello shadow DOM e si cambia questa riga.
   Restando ≤ del loro massimo, siamo NOI a comandare la larghezza e la riga
   verde ci segue: al contrario, la loro vincerebbe e tornerebbero due misure. */
.fascia-beddy { --beddy-larga: 1070px; }
.fascia-beddy .beddy {
  /* Il colore della firma del fornitore, che vive dentro lo shadow DOM del
     widget e non può vedere le nostre classi: gliela passiamo così. Qui il
     fondo è bianco, quindi un grigio chiarissimo. */
  --gd-firma: #D5DBDB;
  background: var(--carta);
  border-radius: 8px;
  /* Sollevata sopra la fotografia E sopra la fascia: l'ombra sta da tutte e due
     le parti perché la barra sta a cavallo, e una sola la farebbe sembrare
     appoggiata a metà. Larga e tenue: un'ombra corta e scura sembra un bordo. */
  box-shadow: 0 -6px 22px rgba(28, 27, 24, .13),
              0 10px 32px rgba(28, 27, 24, .20);
  padding: 8px;
}
.fascia-beddy .beddy-invito {
  margin: 0 0 10px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
/* Sotto i 760 la barra non «sta a cavallo»: si appoggia sotto la fotografia.
   Sovrapporla su uno schermo alto e stretto vorrebbe dire coprire proprio la
   parte di foto che si vede, e la copertina lì è già ritagliata stretta. */
@media (max-width: 760px) {
  /* Alzata zero: il margine negativo si annulla da sé e il colore parte dal
     bordo di sopra. Una riga sola, e non tre che devono restare d'accordo. */
  .foglio--larga .fascia.fascia-beddy { --beddy-alzata: 0px; padding-block: clamp(20px, 5vw, 32px); }
  .fascia-beddy .beddy-invito { color: var(--testo-2); text-shadow: none; }
}

/* ⚠️ `.poi-dati` NON è delle schede: è la riga di numeri delle voci della
   guida — `sito_voci_html()`, le pagine «cosa fare» e «dove mangiare». Stava
   in questa sezione e riscrivendo le schede l'avevo portata via con sé: quelle
   pagine sarebbero rimaste con i numeri senza forma, e nessuna delle prove
   sulla home l'avrebbe mostrato. Sta qui sopra, con il suo nome e la sua
   ragione, così la prossima riscrittura la vede. */
.poi-dati {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--testo-2);
}
.poi-dati strong { color: var(--testo); font-weight: 600; }

/* I dati d'obbligo della struttura: si devono LEGGERE — il CIN dal 2025 va
   esposto — ma non competono col resto. Piccoli, grigi, e le cifre con
   `tabular-nums`, che è la cosa che rende un codice ricopiabile a occhio senza
   perdere il segno. */
.dati-legali {
  margin: 6px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--testo-2);
  font-variant-numeric: tabular-nums;
}

/* ── Punti di riferimento: le mini-card di «Dove siamo» ─────────────────── */
/*
   Erano un elenco: una riga per punto, il nome sopra e i numeri sotto separati
   da spazi. Funzionava e non diceva niente — cinque righe di testo grigio in
   cui la distanza dall'Ortopedico, che è il dato più importante che questa
   struttura abbia, aveva lo stesso peso di tutto il resto.
   Adesso sono schede: una figurina che dice al volo di che posto si tratta, il
   nome, la distanza in grande, e i mezzi uno sotto l'altro con la loro icona.
   ⚠️ `auto-fit` e non un numero di colonne: i punti oggi sono quattro e domani
   saranno otto, e una griglia a tre fissa lascerebbe l'ottavo da solo in fondo.
   ⚠️ `justify-content: center` perché l'ultima riga incompleta, senza, si
   appoggia a sinistra e rompe la simmetria di tutta la fascia. */
.poi {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
}
/* Un tetto alla griglia: oltre le quattro colonne le schede diventano strisce
   larghe e vuote, e il nome resta solo in mezzo a un campo di niente. */
@media (min-width: 1100px) { .poi { grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); } }

.poi-carta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 22px 18px 20px;
  border: 1px solid var(--bordo-deco);
  border-radius: 16px;
  background: var(--carta);
}

/* La figurina: cerchio fisso, così le schede con foto e quelle senza hanno il
   nome alla stessa altezza. `object-fit: cover` perché le fotografie che
   arrivano dal pannello non hanno un formato garantito. */
.poi-segno {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 4px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fascia-tortora, rgba(0, 0, 0, .05));
  color: var(--accento);
}
.poi-segno img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Un occhiello, non un titolo: maiuscoletto spaziato e piccolo, così dice
   «di che genere di posto si tratta» senza contendere il nome. */
.poi-tipo {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-2);
}

.poi-nome {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

.poi-distanza {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--accento);
}

.poi-tempi {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--testo-2);
}
/* L'icona e la parola sulla stessa riga di base: `align-items: center` su una
   riga di testo di 14px mette l'omino un pelo troppo in alto. */
.poi-tempi li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.poi-tempi svg { flex: 0 0 auto; opacity: .75; }
.poi-tempi strong { font-weight: 600; color: var(--testo); }

/* IL PERCORSO, in fondo alla scheda. Un link e non un pulsante: porta fuori dal
   sito, e un pulsante pieno in fondo a ognuna delle tredici schede sarebbe una
   griglia di richiami invece di una griglia di informazioni.
   ⚠️ `margin-top: auto` per mandarlo in fondo, e il distacco nel PADDING: nella
   scheda più alta — quella che detta l'altezza a tutte — `auto` vale zero, e il
   link resterebbe incollato all'ultima riga proprio lì. */
.poi-vai {
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
}
/* ⚠️ SI VEDE CHE SI PREME. Era un link sottolineato in fondo alla scheda, e in
   fondo a una scheda un link sottolineato si legge come una nota, non come un
   gesto. Bordo, pillola e un'ombra appena accennata: sono i tre segnali con cui
   una cosa si riconosce premibile senza doverla provare.
   ⚠️ L'ombra è UNA sola e piccolissima. Su tredici schede affiancate, un'ombra
   marcata moltiplicata per tredici fa sembrare la griglia un pannello di
   comandi — e queste schede sono informazione, con un gesto in fondo. */
.poi-mappa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--bordo-deco);
  border-radius: 999px;
  background: var(--carta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  color: var(--testo);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.poi-mappa svg { flex: 0 0 auto; color: var(--accento); }
.poi-mappa:hover {
  border-color: var(--accento);
  color: var(--accento);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}
.poi-mappa:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

.poi-linee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
}
.poi-linee-eti { color: var(--testo-2); }
/* Il numero della linea è una pastiglia: si legge come un numero di autobus
   perché è disegnato come un numero di autobus. Quando porta all'ATM è un
   link, e allora si vede che è cliccabile — sottolineatura no, il riquadro e
   il colore bastano e cinque sottolineature di fila sono rumore. */
.poi-linea {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--bordo-deco);
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-2);
  text-decoration: none;
}
a.poi-linea {
  border-color: var(--accento);
  color: var(--accento);
  transition: background .2s ease, color .2s ease;
}
a.poi-linea:hover { background: var(--accento); color: var(--carta); }
a.poi-linea:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* ── IL FRONTESPIZIO DELLE PAGINE INTERNE ──────────────────────────────────────*/
/* Una fotografia da bordo a bordo, un velo, e sopra il nome della pagina. Le
   pagine interne erano «schede»: un riquadro bianco largo 720 in mezzo alla
   finestra, con dentro tutto — e non somigliavano alla home in niente
   (richiesta di Mario, 09/09/2026).
   ⚠️ SI CHIAMA «FRONTESPIZIO» perché `.testata` era già l'intestazione del
   sito — la striscia col marchio e il menu. Chiamandola così, questo
   `background: var(--accento)` coloriva di verde quella barra su ogni pagina
   interna: due componenti con lo stesso nome sono CSS validissimo, e vince
   l'ultima regola. Il difetto si è visto perché la barra ha cambiato colore,
   non perché qualcosa abbia protestato.
   ⚠️ NON è alta come la copertina della home, e non deve esserlo: quella è la
   pagina che deve fermare qualcuno, questa è il cartello di una stanza in cui
   si è già entrati. Alta abbastanza da respirare, bassa abbastanza che il
   contenuto cominci senza scorrere.
   ⚠️ `svh` e non `vh`: su telefono la barra del browser entra ed esce, e `vh`
   resta il valore da barra nascosta — la testata sporgerebbe di quei pixel
   proprio all'apertura, cioè quando la si guarda. */
.frontespizio {
  position: relative;
  width: 100%;
  /* ⚠️ 280 PIXEL, NON UNA COPERTINA. La copertina della home è alta seicento
     e passa perché deve fermare qualcuno che è appena arrivato; questa è il
     cartello di una stanza in cui si è già entrati, e se fosse alta uguale il
     contenuto della pagina comincerebbe sotto la piega su ogni schermo
     (misura chiesta da Mario, 09/09/2026).
     Il `clamp` scende sui telefoni bassi e non sale mai sopra i 330: un tetto
     fisso, non una proporzione, perché è una striscia — e una striscia che
     cresce col monitor smette di essere una striscia. */
  min-height: clamp(220px, 36svh, 330px);
  display: grid;
  align-content: center;
  padding: clamp(26px, 4vw, 44px) 20px;
  background: var(--accento);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.frontespizio__pic, .frontespizio__img, .frontespizio__velo { position: absolute; inset: 0; }
.frontespizio__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠️ IL VELO NON È UNIFORME. Un nero al 40% su tutta la fotografia la spegne;
   una sfumatura che pesa dove stanno le parole e si alleggerisce ai bordi
   lascia vedere la foto e tiene il testo leggibile. In mezzo c'è il valore che
   serve al contrasto (WCAG 1.4.3: 4,5:1 sul testo piccolo). */
.frontespizio__velo {
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.52) 55%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}
/* Il contenuto nella colonna del layout, la fotografia da bordo a bordo: è la
   stessa regola delle fasce. */
.frontespizio__dentro {
  position: relative;
  z-index: 1;
  width: min(var(--sito-largo), 100% - 40px);
  margin-inline: auto;
  text-align: center;
}
.frontespizio .occhiello { color: rgba(255,255,255,.86); margin-bottom: 10px; }
.frontespizio h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
  /* Un'ombra appena percettibile: serve sui punti chiari della fotografia,
     dove il velo da solo non basta, e non si vede su quelli scuri. */
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.frontespizio .sommario {
  margin: 10px auto 0;
  max-width: 44rem;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(0,0,0,.3);
}
/* Senza fotografia resta la banda del marchio: brutta, non rotta. */
.frontespizio--senza-foto { background: var(--accento); }

/* ── I concerti ───────────────────────────────────────────────────────────*/
/* ⚠️ UNA SCHEDA SOLA IN UNA GRIGLIA `auto-fit` SI SGRANA PER TUTTA LA COLONNA.
   `.poi` è `repeat(auto-fit, minmax(230px, 1fr))` e il tetto a 300px vale solo
   sopra i 1100: con un elemento solo la scheda prende tutto l'`1fr` — un
   riquadro largo settecento pixel con dentro un cerchietto da settantadue e
   tre righe. Sulla pagina dei concerti la scheda dello stadio è sempre una,
   per costruzione, quindi il caso non è raro: è l'unico. */
.poi--una .poi { grid-template-columns: minmax(230px, 320px); }

/* Le righe dei concerti seguono l'idioma di `.voce`: un filo sopra, non un
   riquadro. Riquadri dentro una pagina che è già una scheda sono cornici
   annidate, e il contenuto sembra più lontano di quanto sia. */
.concerti { list-style: none; margin: 22px 0 0; padding: 0; }
.concerto {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--bordo-deco);
}
.concerto:last-child { border-bottom: 1px solid var(--bordo-deco); }
@media (max-width: 620px) { .concerto { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; } }

/* ⚠️ IL RAPPORTO LO TIENE IL RIQUADRO, e l'immagine ci sta DENTRO con
   `contain`. Le locandine arrivano in cinque formati — 1080×1350 da Instagram,
   A3 verticale, un quadrato — e `cover` taglierebbe proprio la parte che serve:
   il nome dell'artista e la data. Meglio due bande vuote di un titolo tagliato.
   ⚠️ E niente `width`/`height` sull'immagine: annuncerebbero al browser un
   rapporto che non userà, cioè il contrario di quello che quegli attributi
   servono a fare. Lo spazio lo riserva l'`aspect-ratio`, e il foglio è
   bloccante. */
.concerto-locandina {
  aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: calc(var(--sito-raggio) - 6px);
  background: var(--fascia-tortora, rgba(0, 0, 0, .05));
}
.concerto-locandina img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Senza locandina: la data in grande, come la casella di un calendario. Non il
   nome dell'artista, che sta già nel titolo accanto — ripetuto due volte fa
   sembrare la scheda un errore di composizione. */
.concerto-locandina--data {
  background: var(--accento);
  color: #fff;
  align-content: center;
  padding: 10px;
  line-height: 1;
  text-align: center;
}
.cl-giorno {
  display: block;
  font-size: clamp(34px, 6vw, 48px);
  font-variant-numeric: tabular-nums;
}
.cl-mese {
  display: block;
  margin-top: 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.cl-anno {
  display: block;
  margin-top: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--su-accento-2, rgba(255,255,255,.75));
}

/* La colonna delle parole: `min-width: 0` perché è una cella di griglia, e
   senza, un titolo lungo senza spazi la allarga oltre la sua traccia invece di
   andare a capo — la locandina si stringe e la riga esce dal foglio. */
.concerto-testo { min-width: 0; }

.concerto-data {
  margin: 0 0 4px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accento);
}
.concerto-nome { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 400; line-height: 1.15; }
.concerto-tour { margin: 2px 0 0; color: var(--testo-2); font-style: italic; }
.concerto-luogo, .concerto-somm { margin: 8px 0 0; color: var(--testo-2); }
.concerto-stato {
  margin: 8px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--testo-2);
}
/* Rinviato e annullato NON sono decorazioni: chi li salta parte per Messina.
   Colore e peso, non solo una parola in più. */
.concerto-stato--avviso { color: #A03A2B; }
.concerto-biglietti { margin: 12px 0 0; }
.concerto-credito {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--testo-2);
}
/* Quelli passati sono una traccia, non un'offerta: niente locandina, righe
   basse, tutto più tenue. */
.concerti--passati .concerto { grid-template-columns: 1fr; padding: 14px 0; gap: 2px; }
.concerti--passati .concerto-locandina { display: none; }
.concerti--passati .concerto-nome { font-size: 19px; }

/* I crediti delle fotografie: devono LEGGERSI — è la condizione a cui la
   licenza libera vale — ma non devono competere con i dati. Piccoli, sotto,
   e con un contrasto che resta sopra il minimo anche sul verde. */
.poi-crediti {
  margin: 18px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--testo-2);
  text-align: center;
}

/* ── LA FASCIA DEI POSTI: filtro a pillole, e la misura larga ───────────────
   ⚠️ TRE CLASSI, e servono tutte e tre: deve battere
   `.foglio--larga .fascia > *`, che ne ha due e sta scritta dopo. Senza,
   dodici schede finivano in due colonne dentro 720 pixel su uno schermo da
   1600 — una striscia alta sei righe con mezza pagina vuota ai lati.
   ⚠️ E la misura la prende TUTTA la fascia, non solo la griglia: titolo,
   pillole, schede e crediti sullo stesso bordo. Due blocchi centrati ma larghi
   diverso si leggono come «uno è allineato a sinistra», che è il difetto già
   pagato sulla fascia delle camere (DESIGN_SYSTEM §11-duodecies). */
.foglio--larga .fascia.fascia-posti > *,
.foglio--larga .fascia.fascia-arrivo > * { width: min(var(--sito-largo), 100% - 40px); }

.poi-filtri {
  /* Come i filtri della galleria: senza JavaScript non escono affatto. Un
     pulsante che non fa niente è peggio di un pulsante assente — chi lo preme
     crede di aver sbagliato lui — e le schede restano tutte visibili. */
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  /* Padding e non margin: `.fascia` è un contenitore a blocchi normale, e un
     margine qui si fonderebbe con quello del paragrafo sopra — vince il più
     grande, non la somma, e lo stacco chiesto non si vedrebbe (7.247). */
  padding-top: clamp(16px, 1.6vw, 24px);
}
.js .poi-filtri { display: flex; }

/* Il conteggio parlato: nasce vuoto e nascosto, e `[hidden]` lo tiene fuori
   finché non c'è niente da annunciare. */
.poi-conta {
  margin: 10px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--testo-2);
  text-align: center;
}

/* ── I RIMANDI FRA LE PAGINE ────────────────────────────────────────────────
   Link veri, con dentro scritto dove portano. Non pulsanti pieni: sono tre o
   quattro in fila e quattro rettangoli colorati in fondo alla pagina si
   leggono come una pubblicità, non come «continua di là». */
.fascia-rimandi { padding-block: clamp(28px, 4vw, 48px); }
.rimandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
}
.rimandi-eti {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--testo-2);
}
/* ⚠️ IL FONDO CHIARO NON È DECORAZIONE: questa fascia è tortora, e un pulsante
   trasparente su un fondo colorato si legge come un'etichetta, non come una
   cosa da premere. Il contrasto con la fascia è ciò che lo fa esistere.
   Stessa famiglia del pulsante «Vedi la mappa» delle schede — bordo, pillola,
   un'ombra appena accennata — perché due gesti che si somigliano devono
   somigliarsi anche a vedersi. */
.rimando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  /* ⚠️ IL BORDO È L'ACCENTO E NON IL GRIGIO DECORATIVO, ed è una misura, non un
     gusto: il grigio su questa fascia tortora fa 1,12 di contrasto, cioè il
     confine del pulsante praticamente non esiste. L'accento fa 4,12 — sopra il
     3:1 che le linee guida chiedono al bordo di un comando (WCAG 1.4.11). Il
     fondo bianco da solo non basta: bianco su tortora fa 1,45. */
  border: 1px solid var(--accento);
  border-radius: 999px;
  background: var(--carta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  color: var(--testo);
  text-decoration: none;
  font-size: 15px;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
/* La freccia è decorazione e sta nel CSS, non nel documento: letta a voce
   sarebbe «freccia destra» in mezzo al nome della pagina. */
.rimando::after { content: "\2192"; opacity: .6; }
.rimando:hover {
  border-color: var(--accento);
  color: var(--accento);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}
.rimando:hover::after { opacity: 1; }
.rimando:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

/* ── Recensioni ──────────────────────────────────────────────────────────── */

.recensioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* ⚠️ 20px sotto: la scatola ha del testo subito sotto di sé, e con lo spazio
   interno stretto l'occhio legge l'ultima riga dentro e la prima fuori come un
   blocco solo (DESIGN_SYSTEM §11-quater). */
.rec {
  margin: 0;
  padding: 20px 22px;
  background: var(--carta);
  border: 1px solid var(--bordo-deco);
  border-radius: var(--sito-raggio);
}

.rec blockquote { margin: 0 0 12px; font-size: 15px; line-height: 1.65; }

.rec figcaption {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--testo-2);
}

/* ── Domande frequenti ───────────────────────────────────────────────────── */

.faq { margin-top: 22px; }

.faq details { border-top: 1px solid var(--bordo-deco); }

.faq details:last-child { border-bottom: 1px solid var(--bordo-deco); }

/* Il bersaglio non scende sotto i 44px: si apre col pollice. */
.faq summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 34px 12px 0;
  position: relative;
  cursor: pointer;
  font-size: 17px;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

/* Il segno «+» che diventa «−»: in CSS, così non c'è niente da leggere ad alta
   voce e non serve un'icona in più da caricare. */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  font-size: 22px;
  line-height: 1;
  color: var(--accento);
}

.faq details[open] summary::after { content: "\2212"; }

.faq summary:focus-visible { outline: 3px solid var(--accento); outline-offset: -3px; }

.faq details > .testo { padding: 0 34px 20px 0; max-width: 30em; }

.faq details > .testo p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   LA HERO — la copertina della home
   ═══════════════════════════════════════════════════════════════════════ */

/* Una pagina a fasce piene. La colonna da 720px torna dentro `.dentro`, blocco
   per blocco: così una fotografia arriva da bordo a bordo e il testo resta a
   misura di lettura. Niente `100vw`: dove la barra di scorrimento occupa spazio
   (Windows, e ogni Mac con «mostra sempre») `100vw` la conta lo stesso e la
   pagina scorre di lato di una quindicina di pixel — un difetto che su Mac non
   si vede mai e che a chi guarda da Windows salta agli occhi subito. */
.foglio--larga { width: 100%; padding: 0; }
/* ⚠️ DISCENDENTI, NON FIGLI. Con `>` queste regole non toccavano niente: fra
   `main` e le fasce c'è l'`<article class="home">` del modello, e le sezioni
   restavano larghe quanto la finestra — su un monitor da 1600 pixel, righe di
   testo da duecento battute. Alla larghezza di una finestra di prova non si
   vedeva: la misura sbagliata e quella giusta coincidono finché lo schermo è
   stretto, ed è per questo che una regola di impaginazione si controlla larga. */
/* ⚠️ LA FASCIA PRENDE TUTTA LA CORNICE, IL SUO CONTENUTO LA COLONNA.
   Prima la larghezza stava sulla fascia stessa: andava bene finché le fasce
   erano tutte dello stesso colore del fondo. Da quando ognuna ha il suo
   sfondo — bianco, tortora, verde — la banda di colore DEVE arrivare da bordo
   a bordo, o si vedono due rettangoli colorati galleggiare in mezzo alla
   pagina con il fondo che passa ai lati. Il colore è della fascia, la misura
   di lettura è dei figli. */
.foglio--larga .dentro,
.foglio--larga .apertura,
.foglio--larga .fascia > * { width: min(var(--sito-lettura), 100% - 40px); margin-inline: auto; }
.foglio--larga .fascia { width: 100%; padding-block: clamp(44px, 7vw, 88px); }
.foglio--larga .apertura { padding-top: clamp(28px, 6vw, 56px); }

/* GLI SFONDI DELLE FASCE — quattro, e servono a SPEZZARE.
   Due sezioni con lo stesso fondo si leggono come una sola lunga, e chi guarda
   non capisce dove finisce un argomento e comincia l'altro. Il colore non è
   decorazione: è la punteggiatura della pagina. */
/* Il colore passa da una variabile e non direttamente dallo sfondo, perché
   c'è chi ha bisogno di SAPERLO e non solo di portarlo: la barra di
   prenotazione sta a cavallo, è trasparente sopra la fotografia e colorata
   sotto, e il colore di sotto dev'essere quello della fascia, qualunque sia. */
.fascia--chiara  { --fascia-fondo: var(--fascia-chiara);  background: var(--fascia-fondo); }
.fascia--tortora { --fascia-fondo: var(--fascia-tortora); background: var(--fascia-fondo); }
.fascia--avorio  { --fascia-fondo: var(--fascia-avorio);  background: var(--fascia-fondo); }
/* ⚠️ `--fascia-fondo` RESTA IL VERDE PIENO, e il degradé lo mette solo
   `background`. Quella variabile la leggono altre cose per sapere «di che
   colore è la fascia sotto» — una sfumatura lì dentro non è un colore e
   diventerebbe niente là dove serve un colore.
   La sfumatura è appena percettibile, e deve restarlo: quattro punti di
   luminosità dall'alto al basso danno alla fascia un peso, di più diventa un
   fondale e si porta via il testo che ci sta sopra. */
.fascia--accento {
  --fascia-fondo: var(--accento);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accento) 92%, #fff) 0%,
              color-mix(in srgb, var(--accento) 88%, #000) 100%);
  color: #fff;
}
/* Sul verde cambia tutto quello che era pensato per il fondo chiaro: il testo
   tenue, i bordi, i riquadri. Se ne dimentica uno e resta illeggibile — quindi
   si riscrivono qui tutti insieme, non uno alla volta quando qualcuno se ne
   accorge. */
/* `.camera-sotto` è uscita da questo elenco: la riga di carattere di una camera
   la disegna solo la pagina «Le stanze» (shared/sito/modelli/camere.php), che
   non ha fasce colorate. Restando qui faceva credere a chi legge che la home
   la emetta ancora — e la home ha smesso il 07/09/2026, quando quelle due righe
   sono scese sulla pagina delle stanze. Un selettore morto non fa danni: fa
   perdere tempo a chi cerca dove nasce una cosa. */
.fascia--accento .occhiello,
.fascia--accento .testo,
.fascia--accento .poi-dati,
.fascia--accento .poi-tipo,
.fascia--accento .poi-crediti,
.fascia--accento .poi-tempi,
.fascia--accento .poi-linee-eti { color: var(--su-accento-2); }
.fascia--accento h2,
.fascia--accento h3,
.fascia--accento strong,
.fascia--accento .poi-nome,
.fascia--accento .poi-tempi strong { color: #fff; }
.fascia--accento a { color: #fff; }
.fascia--accento .rec,
.fascia--accento details { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); }
/* ⚠️ LA GRIGLIA NON È UNA SCHEDA. Finché la regola diceva `.poi`, il fondo
   chiaro e il bordo li prendeva il contenitore — cioè un riquadro solo attorno
   a tutte le schede, con dentro le schede a loro volta riquadrate: due cornici
   annidate che sul verde si vedevano una dentro l'altra. Lo sfondo va sulle
   schede, che sono le cose separate. */
.fascia--accento .poi-carta {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
}
.fascia--accento .poi-segno { background: rgba(255, 255, 255, .16); color: #fff; }
.fascia--accento .poi-distanza { color: #fff; }
.fascia--accento .poi-linea { border-color: rgba(255, 255, 255, .45); color: #fff; }
.fascia--accento a.poi-linea:hover { background: #fff; color: var(--accento); }
.fascia--accento a.poi-linea:focus-visible { outline-color: #fff; }
.fascia--accento .camera-dotazioni li { border-color: rgba(255, 255, 255, .34); color: var(--su-accento-2); }
/* ⚠️ La testata perde qui il suo `max-width: 30em`, e in cambio prende la
   stessa colonna delle fasce. Con la misura addosso restava larga 480px e
   `margin-inline:auto` la centrava: partiva centoventi pixel PIÙ A DESTRA
   delle fasce sotto, e la pagina sembrava rientrata a metà senza che si
   capisse perché. La misura di lettura resta, ma la portano i figli — che è
   il posto dove sta il testo. */
.foglio--larga .apertura { max-width: none; }
/* Il padding delle fasce lo dà ora `.foglio--larga .fascia`, uguale per
   tutte: con gli sfondi diversi, una fascia più corta delle altre si vede. */

/* LA CORNICE.
   `container-type: inline-size` dichiara la hero un contenitore: da qui in giù
   `cqi` vale un centesimo della SUA larghezza. `width:100%` è obbligatorio —
   `inline-size` toglie all'elemento la larghezza presa dal contenuto, e senza
   il riquadro collassa.
   Il rapporto sta nel CSS e non solo negli attributi dell'immagine: così
   l'altezza della fascia è calcolabile PRIMA che la foto arrivi, e la pagina
   non salta quando arriva. Il tetto in `svh` evita la copertina che su un
   monitor largo occupa novecento pixel e spinge tutto il resto sotto la piega.
   `overflow:hidden`: se una scritta non ci sta si perde una riga, non si
   riversa sulla fascia dopo. */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(76svh, 680px);
  overflow: hidden;
  container-type: inline-size;
  container-name: hero;
  background: var(--accento-2);
}
/* ⚠️ Nessun margine sotto la copertina: quello che segue è la barra di
   prenotazione, che deve stare A CAVALLO — e un margine qui sarebbe una
   distanza che il suo margine negativo dovrebbe indovinare. Le due misure
   diventerebbero due, e basterebbe cambiarne una perché la barra scivolasse
   giù senza che niente lo segnali. */
.foglio--larga .hero { margin-bottom: 0; }

/* ⚠️ LA COPERTINA ESCE DALLA CORNICE, IL RESTO NO. Il sito è un foglio da 1440
   centrato su un fondo crema, e la fotografia d'apertura è l'unica cosa che
   deve andare da bordo a bordo: una foto che si ferma a 1440 con due strisce di
   fondo ai lati dichiara la larghezza del contenitore invece del paesaggio.
   `50% - 50vw` è metà della differenza fra la cornice e la finestra, in
   negativo: funziona perché `.foglio` è figlio diretto di `body` e centrato —
   se un giorno lo si annidasse dentro qualcos'altro, questa riga scivolerebbe
   di lato senza dirlo.
   ⚠️ E `overflow-x: clip` sulla radice NON è una pezza: `100vw` comprende la
   barra di scorrimento dove il sistema la disegna (Windows, Linux), quindi
   senza quella riga la pagina guadagnerebbe uno scorrimento orizzontale di
   quindici pixel su metà dei computer del mondo — invisibile sul Mac su cui è
   stata scritta. `clip` e non `hidden`: `hidden` crea un contenitore di
   scorrimento e spegnerebbe ogni `position: sticky` dentro la pagina. */
html { overflow-x: clip; }
.foglio--larga .hero {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.hero__pic, .hero__img, .hero__velo { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__velo { pointer-events: none; }

/* IL TESTO SOPRA LA FOTO.
   `justify-content: safe center` e non `center`: quando il testo è più alto
   della cornice, `center` lo centra lo stesso e le prime righe finiscono
   FUORI dall'alto, dove `overflow:hidden` le taglia e non c'è modo di
   raggiungerle. `safe` centra finché ci sta e poi si comporta da `start`: si
   perde il centraggio, non le parole. Conta per chi ingrandisce i caratteri.
   La misura: mai da bordo a bordo — oltre le 75 battute per riga l'occhio
   perde il capo della riga successiva. In `em`, non in `ch`: `ch` è la
   larghezza dello zero, che in questi caratteri è più larga della media, e
   `60ch` consegna quasi cento battute. */
/* ⚠️ LE SCRITTE DELLA COPERTINA SONO UNA COLONNA CENTRATA, non quattro pezzi
   posizionati a mano. Richiesta di Mario dell'08/09/2026 — «tutti i testi
   centrati, e un po' meno padding sopra» — e la strada per ottenerla non è
   ricalcolare le percentuali dei quattro pezzi su tre formati: è esattamente
   ciò che si era già rotto due volte oggi appena i testi si sono allungati
   (MIGLIORIE 7.236). Una colonna in flusso normale si centra da sé, cresce col
   testo e NON PUÒ sovrapporsi: il difetto sparisce invece di essere spostato.
   ⚠️ Il padding di sotto comprende l'alzata della barra: la copertina è
   centrata verticalmente, ma la sua parte bassa è coperta dalla barra di
   prenotazione — senza quel padding il centro ottico cade sotto la barra e il
   pulsante ci finisce addosso. Sopra invece il padding è più corto: è il «meno
   padding top» chiesto, e insieme al padding di sotto sposta il blocco in su
   nella parte di fotografia che si vede davvero. */
.hero__dentro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: flex-start;
  gap: 8px;
  max-width: min(36em, 62%);
  padding: clamp(16px, 4cqi, 48px);
}

/* ⚠️ LA COMPOSIZIONE LIBERA RESTA ACCESA PER LE MISURE, NON PER LE POSIZIONI.
   Quell'interruttore governa due cose in una: dove stanno le scritte E quanto
   sono grandi. Spegnendolo (migrazione 068, ritirata dalla 069) la copertina
   tornava alla tipografia predefinita e su schermo largo il titolo passava da
   due righe a sei, sfondando di 243px. Quindi resta acceso — e la posizione
   gliela toglie questo foglio, che impone una colonna centrata a ogni
   larghezza.
   ⚠️ `!important` è obbligato: si sta battendo uno stile IN RIGA, che nessun
   selettore raggiunge. `text-align` compreso, perché la disposizione salvata
   dice «a sinistra» ed è proprio quello che Mario ha chiesto di cambiare. */
.hero--libero .hero__dentro {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  gap: clamp(10px, 1.4cqi, 18px);
  max-width: min(52em, 84%);
  margin-inline: auto;
  /* Sopra corto — è il «meno padding top» chiesto; sotto lungo quanto l'alzata
     della barra di prenotazione, che copre quella fascia di fotografia: senza,
     il centro ottico cade dietro la barra e il pulsante ci finisce addosso. */
  padding: clamp(10px, 2.2cqi, 26px)
           clamp(16px, 4cqi, 48px)
           calc(clamp(16px, 4cqi, 48px) + var(--beddy-alzata, 0px));
}
.hero--libero .hero__dentro > * {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: auto !important; max-width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* ⚠️ TOLTA la vecchia `.hero--libero .hero__dentro { display:block; padding:0 }`.
   Serviva a disfare la colonna quando i pezzi si posizionavano da soli; adesso
   la colonna la vogliamo, e quella riga — scritta più avanti nel foglio —
   vinceva per ordine sulla nuova: le scritte finivano incollate al bordo di
   sopra, con `justify-content` che non poteva fare niente perché senza flex non
   significa niente. È la 7.189 in miniatura: una regola che c'è, sembra giusta,
   e ne spegne un'altra senza dirlo. */

/* LE MISURE DELLE SCRITTE.
   `calc(clamp(min, N cqi, max) * var(--hero-scala, 1))`, e i due pezzi vanno
   letti insieme:
   · `cqi` e non `vw`. `vw` è un centesimo della FINESTRA: se un giorno la hero
     finisse in una colonna stretta, un titolo scritto in `vw` resterebbe
     grande come su una pagina intera e sfonderebbe. `cqi` è un centesimo della
     hero, che si è dichiarata contenitore poco sopra.
   · `--hero-scala` è un MOLTIPLICATORE (0,5–2,5) che moltiplica il clamp
     invece di sostituirlo. «Un quarto più grande» resta vero su computer,
     tablet e telefono, e non si rifà la scelta tre volte.
   La doppia classe batte le regole generali del foglio (`h1`, `a`, `.occhiello`)
   senza `!important`, che toglierebbe a chiunque la possibilità di correggere
   dopo. */
.hero .hero__occhiello {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(clamp(12px, 1cqi, 16px) * var(--hero-scala, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.hero .hero__titolo {
  margin: 0;
  font-size: calc(clamp(28px, 4.4cqi, 66px) * var(--hero-scala, 1));
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: #fff;
}
.hero .hero__testo {
  margin: 0;
  font-size: calc(clamp(15px, 1.8cqi, 24px) * var(--hero-scala, 1));
  line-height: 1.5;
  color: #fff;
}
.hero .hero__azioni { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* ⚠️ UNA RIGA DI PULSANTI NON PUÒ ESSERE PIÙ STRETTA DEL SUO PULSANTE.
   Nella copertina a disposizione libera ogni pezzo porta una larghezza in
   percentuale, messa trascinando una maniglia nel compositore. Quella di
   «azioni» valeva 8,6% — cioè 155px — perché era stata regolata quando il
   pezzo conteneva solo il segnaposto «Pulsante», che è corto. Al primo
   pulsante vero, «Vedi le camere» è andato a capo dentro la pillola.
   `min-width: max-content` non toglie la maniglia: si può ancora allargare il
   pezzo quanto si vuole, ma non stringerlo sotto la misura di ciò che
   contiene — che è una larghezza che nessuno sceglie, si subisce. */
.hero--libero .hero__azioni { min-width: max-content; }

/* Il bersaglio non scende sotto i 44px nemmeno qui: è il pulsante che porta
   alla prenotazione, cioè l'unico che conta davvero. */
.hero .hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accento);
  color: #fff;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(clamp(15px, 1.35cqi, 19px) * var(--hero-scala, 1));
  transition: background .18s ease;
}
.hero .hero__cta:hover { background: var(--accento-2); }
.hero .hero__cta--2 { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .55); }
.hero .hero__cta--2:hover { background: rgba(255, 255, 255, .28); }
.hero .hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Alzare la specificità in un punto obbliga a rileggere tutte le regole sullo
   stesso elemento: se questa restasse a classe singola, non spegnerebbe più
   niente. */
@media (prefers-reduced-motion: reduce) {
  .hero .hero__cta { transition: none; }
}

/* SENZA FOTO. Il testo torna nel flusso su fondo pieno: una cornice vuota con
   dentro una scritta sospesa nel nulla è peggio di una fascia in meno. */
/* ⚠️ SOTTO I 768 LA COPERTINA SI IMPILA, QUALUNQUE COSA DICA LA DISPOSIZIONE.
   Le posizioni dei pezzi vivono in uno stile IN RIGA — percentuali dell'altezza
   della copertina — e uno stile in riga vale a ogni larghezza: la disposizione
   «libera» regolata sullo schermo grande arriva pari pari sul telefono, dove la
   copertina è alta 469px invece di 680 e ogni frase va a capo il doppio.
   L'08/09/2026, cambiate le frasi con altre più lunghe, su 375px si sono
   attraversati TRE pezzi su quattro: l'occhiello sopra il titolo, il titolo
   sopra il testo, il testo sotto il pulsante. In silenzio, perché due elementi
   assoluti si sovrappongono senza che niente protesti.
   ⚠️ E non si ripara scegliendo percentuali migliori: il testo ne occupa il
   91%, quindi la prima parola in più le rompe di nuovo. Su uno schermo stretto
   la posizione a mano è una promessa che nessun numero può mantenere — si
   impila, e la copertina cresce con quello che contiene.
   ⚠️ LA SOGLIA È 1024 E NON 767, e l'ho alzata dopo aver misurato: a 900px
   l'occhiello andava a capo e finiva sopra il titolo, che stanno a 4,5 punti
   percentuali di distanza. Sistemata la larghezza del telefono restava lo
   stesso difetto un gradino più in su — è il segno che il confine giusto non
   era «telefono» ma «dove lo spazio non basta». La composizione libera resta
   sopra i 1025, che è dove la si compone davvero.
   ⚠️ `!important` è obbligato e non è pigrizia: si sta battendo uno stile in
   riga, che nessun selettore raggiunge. È circoscritto a una sola media query e
   a una sola famiglia di pezzi. */
@media (max-width: 1024px) {
  /* Sotto i 1024 la copertina CRESCE col testo invece di ritagliarlo: la
     colonna centrata è già imposta dalla regola generale qui sopra, qui resta
     solo l'altezza, perché su uno schermo stretto le stesse frasi occupano il
     doppio delle righe.
     ⚠️ L'altezza minima è UN numero e la leggono in due: la copertina, che non
     deve diventare una striscia, e la colonna delle scritte, che in flusso ha
     bisogno di un'altezza su cui centrarsi — senza, `justify-content` non ha
     niente da distribuire e il testo si incolla al bordo di sopra. Scritta due
     volte, basterebbe cambiarne una perché il testo smetta di stare al centro
     senza che niente lo segnali. */
  .hero { --copertina-minima: 62svh; aspect-ratio: auto; max-height: none; min-height: var(--copertina-minima); }
  .hero--libero .hero__dentro { position: relative; min-height: var(--copertina-minima); }
}

.hero--senza-foto { aspect-ratio: auto; max-height: none; }
.hero--senza-foto .hero__dentro {
  position: static;
  max-width: min(36em, 100%);
  padding: clamp(32px, 7vw, 72px) clamp(20px, 5vw, 48px);
}
/* Senza fotografia E in disposizione libera, i pezzi sono assoluti e non
   fanno crescere niente: la misura minima va alla CORNICE, non al contenitore
   dentro — che in quel caso è assoluto anche lui e collasserebbe con la
   copertina, lasciando una fascia alta zero. */
.hero--senza-foto.hero--libero { min-height: clamp(260px, 30vw, 460px); }

/* TELEFONO. Si misura il CONTENITORE e non la finestra: la domanda è «quanto è
   larga questa hero», e la risposta non cambia se un giorno la fascia finisse
   dentro una colonna.
   Il ripiego per chi non ha le container query sta DENTRO `@supports not`, non
   accanto: lasciate fianco a fianco, su un browser moderno si applicherebbero
   tutte e due e vincerebbe l'ultima scritta. */
@container hero (max-width: 767px) {
  .hero__dentro {
    max-width: 100%;
    padding: 16px 16px 20px;
    justify-content: safe flex-end;
  }
  .hero .hero__cta { flex: 1 1 auto; justify-content: center; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 767px) {
    .hero__dentro { max-width: 100%; padding: 16px 16px 20px; }
    .hero .hero__cta { flex: 1 1 auto; justify-content: center; }
  }
}
@media (max-width: 767px) {
  /* Su una cornice stretta il 16:9 lascia una striscia alta duecento pixel:
     non è una copertina. La foto del telefono è verticale, e il rapporto
     della cornice la segue.
     ⚠️ `:not(.hero--senza-foto)` è obbligatorio. Le due regole hanno la stessa
     specificità, e questa — stando più in basso nel foglio — vinceva: la
     copertina senza fotografia, che deve essere alta quanto il suo testo,
     prendeva il rapporto d'aspetto di una foto che non c'è e diventava una
     fascia verde da settecento pixel con dentro tre righe. Una media query non
     aggiunge specificità: l'ordine di scrittura basta a ribaltare
     un'eccezione dichiarata prima. */
  .hero:not(.hero--senza-foto) { aspect-ratio: 4 / 5; max-height: 72svh; }
  /* ⚠️ Qui NON si rimette la colonna con una regola generale. C'era, e
     annullava il lavoro di chi la disposizione del telefono l'aveva composta a
     mano: il pannello mostrava le scritte dove le aveva messe, il telefono
     vero le impilava, e niente segnalava la differenza. A decidere è la regola
     legata all'id, che il renderer scrive apposta. */
}

/* ── LE CAMERE ─────────────────────────────────────────────────────────────
   Due schede, e su schermo largo stanno affiancate. Non una griglia a colonne
   fisse: `auto-fit` con un minimo vero fa sì che due camere stiano in due
   colonne, tre in tre, e una sola non si allarghi a tutta la fascia — che è
   il difetto tipico di una griglia scritta per il numero di oggi. */
/* ⚠️ `[hidden]` DICHIARATO QUI, e non è pignoleria. Il filtro della galleria
   nasconde le fotografie con la proprietà `hidden`; i browser hanno la loro
   regola, ma basta un `display` scritto su quegli elementi — da una regola di
   griglia, un giorno — perché la vinca in silenzio e le foto filtrate via
   tornino visibili. Con `!important` la scelta è dichiarata e non si può
   riaccendere per sbaglio. */
[hidden] { display: none !important; }

/* ⚠️ TOLTE le regole delle due schede (`.stanze`, `.stanza`,
   `.stanza-colore`, `.stanza-riga`): le righe di carattere delle camere sono
   scese sulla pagina «Le stanze», e qui non c'è più niente che le usi. Un
   foglio pieno di regole senza consumatore si legge tutto lo stesso, e la
   prossima persona perde tempo a capire quali contano. */

/* ⚠️ UNA LARGHEZZA SOLA PER TUTTA LA FASCIA. Occhiello, titolo, descrizione,
   galleria e pulsante stanno sullo stesso bordo: prima il titolo prendeva la
   colonna di lettura (720) e la galleria la sua misura (832), e due blocchi
   centrati ma larghi diverso si leggono come «uno è allineato a sinistra»,
   che è esattamente quello che si vedeva (DESIGN_SYSTEM §11-duodecies).
   ⚠️ Serve anche `max-width: none`: `.testo` porta un tetto suo di 30em, e un
   `max-width` batte sempre una `width` più larga — la regola sembra applicata
   e il paragrafo resta stretto.
   ⚠️ E la misura è più larga della colonna di lettura, di proposito: la
   descrizione deve arrivare almeno quanto le fotografie, o sotto una griglia
   larga sembra un ritaglio (richiesta di Mario). Sono tre paragrafi corti, non
   un testo lungo: la riga può permettersi di essere più lunga del solito. */
.foglio--larga .fascia.fascia-camere > * {
  width: min(60rem, 100% - 40px);
  max-width: none;
}

/* ⚠️ «DOVE SIAMO» PRENDE TUTTA LA LARGHEZZA DEL LAYOUT, non la colonna di
   lettura. Con 720 le schede ci stanno in due per riga: quattro punti di
   riferimento diventano due righe da due, la quarta scheda va a capo da sola
   se sono tre, e una griglia che va a capo per mancanza di spazio si legge
   come un errore di impaginazione, non come una scelta. A 1440 ce ne stanno
   quattro affiancate e la riga si chiude.
   ⚠️ `.testo` NON perde qui il suo tetto di lettura: un paragrafo lungo 1440
   non lo legge nessuno. Sono le schede a volere lo spazio, non le parole —
   ed è per questo che qui non c'è il `max-width: none` che serve alle camere. */
.foglio--larga .fascia.fascia-poi > * { width: min(var(--sito-largo), 100% - 40px); }

/* ⚠️ LA FASCIA «FOTO» TRADIVA LA PROPRIA DESCRIZIONE. Nel pannello quel blocco
   si chiama «Foto» e si presenta come «una fotografia A TUTTA LARGHEZZA»
   (shared/sito/blocchi.php): sul foglio stava a 720, cioè la colonna di
   lettura — la metà delle fasce che le stanno sopra e sotto (1440 «Dove
   siamo», 960 le camere). Misurato a 1600: 440|720 mentre le vicine partivano
   da 80 e da 320. Chi la sceglieva otteneva il contrario di quello che aveva
   letto, e non c'era niente che glielo dicesse.
   ⚠️ E `sizes` NELLO STESSO COMMIT: dichiarava 720px. Lasciato indietro, il
   browser continuerebbe a scaricare la copia da 1024 per disegnarla a 1440 —
   un'immagine sgranata su tutta la larghezza dello schermo, senza nessun
   errore. La larghezza vera e la larghezza dichiarata sono lo stesso numero
   detto in due lingue: si cambiano insieme o mentono. */
.foglio--larga .fascia.fascia-foto > * { width: min(var(--sito-largo), 100% - 40px); }
/* Un po' d'aria fra il titolo e la descrizione: erano attaccati. */
.fascia-camere > h2 { margin-bottom: clamp(14px, 1.6vw, 22px); }

/* ⚠️ IL CONTENITORE ERA LARGO 960 E IL PARAGRAFO DENTRO 480. `.testo` porta un
   tetto suo — la colonna di lettura — che vale anche per i `p` che contiene:
   allargare il contenitore non allarga il testo, e il risultato è un blocco
   che occupa metà della sua scatola e si legge come «allineato a sinistra»
   sotto una griglia di fotografie larga il doppio. Era la stessa causa già
   riparata nella fascia «Prenota una camera», qui non ancora.
   ⚠️ E si risolve con DUE COLONNE, non allargando la riga a 960: a quella
   misura una riga fa più di cento caratteri, e l'occhio torna a capo
   perdendo il segno. Le colonne tengono la riga a una misura leggibile e
   dimezzano l'altezza del blocco, che era l'altra cosa che non andava.
   ⚠️ `break-inside: avoid` sui paragrafi: uno spezzato a metà frase fra due
   colonne fa tornare l'occhio in cima a destra e perdere il filo. */
.foglio--larga .fascia.fascia-camere > .testo {
  column-width: 22rem;
  column-gap: clamp(28px, 3vw, 48px);
}
.foglio--larga .fascia.fascia-camere > .testo p {
  max-width: none;
  break-inside: avoid;
}


/* ── LA GALLERIA, COL FILTRO ──────────────────────────────────────────────*/
.galleria-filtri {
  /* Senza JavaScript i pulsanti non farebbero niente: non escono affatto, e
     le fotografie restano tutte visibili. Un pulsante inerte è peggio di un
     pulsante assente — chi lo preme crede di aver sbagliato lui. */
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 clamp(14px, 2vw, 22px);
  /* ⚠️ LO STACCO DAL TESTO È PADDING, NON MARGIN. `.fascia` è un contenitore
     a blocchi normale e `.galleria` non ha né bordo né padding: un margine
     qui salirebbe fuori dalla galleria e si FONDEREBBE col margine basso del
     paragrafo sopra — vince il più grande, non la somma, e i quindici pixel
     chiesti non si vedrebbero affatto. Il padding non si fonde mai.
     E sta sui filtri, non sulla galleria: senza JavaScript i filtri non
     escono, e con loro sparisce lo spazio che serviva a staccarli. */
  padding-top: clamp(16px, 1.6vw, 24px);
}
.js .galleria-filtri { display: flex; }
.filtro {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--bordo-deco);
  /* Il sito non ha un token per la pillola: qui il valore diretto, che è
     più onesto di un ripiego che lascia credere che il token esista. */
  border-radius: 999px;
  background: transparent;
  color: var(--testo-2);
  font: inherit; font-size: 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filtro:hover { border-color: var(--accento); color: var(--accento); }
.filtro.is-on { background: var(--accento); border-color: var(--accento); color: #fff; }
.filtro:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

.galleria-foto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Due per riga sul piccolo. ⚠️ `min(240px, 46%)` e non `240px` secco: su un
     telefono da 375 una traccia minima di 240 ne fa stare una sola per riga, e
     una galleria a una colonna è un elenco, non una galleria. */
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 46%), 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}
/* Quattro per riga dove lo spazio c'è: fotografie un po' più piccole, ma se ne
   vedono il doppio senza scorrere — e con l'ingranditore un clic le riporta
   grandi quanto serve. */
@media (min-width: 900px) {
  .galleria-foto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galleria-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sito-raggio);
}

/* La fotografia nella griglia è un pulsante: niente cornice, niente fondo —
   deve sembrare la fotografia che è, e comportarsi da comando solo quando la
   si raggiunge. */
.galleria-apri {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: var(--sito-raggio); overflow: hidden;
}
.galleria-apri:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }
.galleria-apri img { transition: transform .3s ease; }
.galleria-apri:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .galleria-apri img { transition: none; } }

/* ── L'INGRANDITORE ───────────────────────────────────────────────────────*/
.lente {
  border: 0; padding: 0; background: none;
  max-width: 100vw; max-height: 100svh;
  width: 100vw; height: 100svh;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(6px, 2vw, 24px);
  padding: clamp(12px, 3vw, 36px);
  overflow: hidden;
}
.lente:not([open]) { display: none; }
/* ⚠️ Il fondo è quasi nero e non nero pieno: un velo lascia intuire dove si
   torna quando si chiude, e una pagina sparita del tutto disorienta. */
.lente::backdrop { background: rgba(8, 8, 10, .92); }
.lente-foto {
  grid-column: 2;
  max-width: 100%; max-height: 88svh;
  width: auto; height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 4px;
}
.lente-prec, .lente-succ, .lente-chiudi {
  border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  border-radius: 999px; cursor: pointer;
  /* 48px: è il bersaglio minimo che si preme col pollice senza sbagliare. */
  width: 48px; height: 48px; min-width: 48px;
  font-size: 28px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lente-prec:hover, .lente-succ:hover, .lente-chiudi:hover { background: rgba(255, 255, 255, .26); }
.lente-prec:focus-visible, .lente-succ:focus-visible, .lente-chiudi:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
}
.lente-prec { grid-column: 1; }
.lente-succ { grid-column: 3; }
.lente-chiudi {
  position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px);
  font-size: 30px;
}
.lente-conta {
  grid-column: 2; margin: 10px 0 0; text-align: center;
  color: rgba(255, 255, 255, .75); font-size: 13px; letter-spacing: .06em;
}

.stanze-azione { margin: clamp(22px, 3vw, 36px) 0 0; text-align: center; }

/* ── «PRENOTA UNA CAMERA»: TITOLO E TESTO AL CENTRO ───────────────────────
   ⚠️ La fascia aveva TRE larghezze diverse — titolo 720, testo 480, riquadro
   di prenotazione 1360 — tutte centrate e nessuna allineata a un'altra: il
   titolo risultava spostato a sinistra sopra una scatola verde che va da
   bordo a bordo. Qui il centraggio non è una preferenza: sotto ci sono un
   invito già centrato e tre schede centrate, e un titolo allineato a sinistra
   sopra di loro è l'unico elemento fuori riga.
   Il testo prende una misura più larga di quella di lettura perché è una riga
   d'introduzione, non un paragrafo da leggere a lungo: a 480px andava a capo
   quattro volte sotto un titolo largo il doppio. */
.foglio--larga .fascia.fascia-cta > .occhiello,
.foglio--larga .fascia.fascia-cta > h2,
.foglio--larga .fascia.fascia-cta > .testo {
  /* ⚠️ Larga davvero: questa riga deve stare su DUE righe, e a 46em ne
     prendeva tre — con lo spazio a destra e a sinistra che restava vuoto
     mentre il testo si stringeva. Non è un paragrafo da leggere a lungo: è
     una frase d'introduzione sopra un modulo, e per una frase la misura di
     lettura non è un vincolo ma un impedimento. */
  width: min(70rem, 100% - 40px);
  max-width: none;
  text-align: center;
}
/* ⚠️ Anche il paragrafo dentro, non solo il contenitore: `.testo` porta un
   tetto suo che si applica ai `p`, quindi il div era largo 1120 e la riga
   dentro restava a 480 — allargato il contenitore e il testo fermo dov'era. */
.foglio--larga .fascia.fascia-cta > .testo p { max-width: none; }

.camere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 26px;
  margin-top: 20px;
}
.camera {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Il rapporto d'aspetto sta nel CSS e non solo negli attributi: l'altezza si
   può calcolare prima che la fotografia arrivi, e il testo sotto non salta
   sotto gli occhi di chi ha già cominciato a leggere. */
.camera-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.camera-testo h3 { margin: 0 0 2px; font-size: 20px; }
.camera-sotto {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--testo-2);
}
.camera .testo { margin: 0; }
.camera .testo p:first-child { margin-top: 0; }

/* Le dotazioni: un elenco, non una frase. Si leggono a colpo d'occhio, ed è
   quello che serve — nessuno legge una lista di comodità come prosa. */
.camera-dotazioni {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.camera-dotazioni li {
  font-size: 13px;
  line-height: 1.5;
  padding: 3px 10px;
  border: 1px solid var(--bordo-deco);
  border-radius: 999px;
  color: var(--testo-2);
}

/* ── La pagina delle stanze ────────────────────────────────────────────── */
.stanza { margin-top: 46px; }
.stanza h2 { margin-bottom: 2px; }
.stanza-grande {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
  margin: 14px 0 18px;
}
/* Le altre fotografie: una griglia che si adatta, non un numero di colonne
   scritto per le sette di oggi. `auto-fill` e non `auto-fit`: con poche foto
   si vogliono riquadri della misura giusta, non tre immagini stirate. */
.stanza-foto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr));
  gap: 8px;
  margin-top: 18px;
}
.stanza-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
}

/* L'indirizzo su «Dove siamo»: si legge da lontano, perché è la cosa che uno
   copia o inquadra prima di partire. */
/* L'INDIRIZZO È LA RIGA PER CUI QUALCUNO APRE QUESTA PAGINA, e va letta come
   tale: grande, col segnaposto davanti, e da sola.
   ⚠️⚠️ `flex` E NON `inline-flex`, ed è il contrario di quello che avevo
   scritto. Avevo scelto `inline-flex` proprio PER non perdere il centraggio —
   e quella scelta è ciò che lo rompeva: su una scatola di livello in linea
   `margin-inline: auto` non fa niente. La regola generale delle fasce dà ai
   figli `width` e `margin-inline: auto`, cioè centra dei BLOCCHI; l'elemento
   prendeva i 720 pixel di larghezza e restava appoggiato a sinistra, con il
   suo contenuto centrato dentro — che a occhio si legge come «è quasi
   centrato», e infatti il centro della riga cadeva a 379 invece che a 720.
   Da blocco, il centraggio arriva dalla regola generale e `justify-content`
   sistema il simbolo accanto al testo (MIGLIORIE 7.261).
   ⚠️ Il simbolo NON scende sotto il testo quando la riga va a capo: `gap` e
   `align-items: center` lo tengono accanto, e su un telefono l'indirizzo si
   spezza sulla virgola restando allineato. */
.indirizzo-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.45;
  margin: 0;
  text-align: left;
}
.indirizzo-grande svg {
  flex: 0 0 auto;
  color: var(--accento);
}
.indirizzo-grande a {
  /* 44px: è il link che si preme col pollice mentre si è già in macchina. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* LE DUE MAPPE AFFIANCATE: quella vera dice in che via, il disegno in che
   punto della Sicilia. Sono due domande diverse, e messe una sotto l'altra si
   leggerebbero come la stessa cosa ripetuta.
   ⚠️ Sotto i 900 vanno in colonna, e per PRIMA quella vera: su un telefono la
   domanda è «dove giro adesso», non «dove sono in Sicilia».
   ⚠️ Larghezza propria e non i 1440 della fascia: a settecento pixel per
   colonna il disegno diventa un poster e la mappa un plastico. Il tetto è la
   misura naturale del disegno (480 per colonna), non un numero scelto. */
.due-mappe {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(26px, 3.4vw, 44px);
  align-items: start;
}
@media (min-width: 900px) { .due-mappe { grid-template-columns: 1fr 1fr; } }
.foglio--larga .fascia > .due-mappe { width: min(1040px, 100% - 40px); }

/* La mappa vera è un riquadro di qualcun altro: prende il bordo e gli angoli
   che il disegno NON prende, perché è una finestra e va detto che lo è.
   ⚠️ `aspect-ratio` e non un'altezza fissa: il riquadro che chiediamo a
   OpenStreetMap ha le stesse proporzioni del disegno accanto (5:4), così le due
   figure finiscono alla stessa altezza senza ritagliare niente. */
.mappa-vera { margin: 0; }
.mappa-vera iframe {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--bordo-deco);
  border-radius: var(--sito-raggio);
  /* Il riquadro di terze parti non deve poter uscire dai suoi angoli tondi. */
  overflow: hidden;
  background: var(--fascia-tortora);
}
.mappa-vera figcaption,
.illustrazione figcaption {
  margin-top: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--testo-2);
  text-align: center;
}

/* L'ILLUSTRAZIONE DELLA PAGINA: un disegno, non una fotografia — quindi non
   prende né bordo né angoli tondi, che la farebbero sembrare una foto
   ritagliata male. Ha lo sfondo trasparente: vive sulla fascia chiara. */
.illustrazione {
  margin: 0;
  max-width: 560px;
  text-align: center;
}
.illustrazione img {
  display: block;
  width: 100%;
  height: auto;
}


/* ── Elenchi di voci: cosa visitare, dove mangiare ─────────────────────────
   Non una griglia di schede: una lista che si legge dall'alto in basso, come
   un consiglio dato a voce. Sono cinque o dieci voci, non cinquanta — una
   griglia le farebbe sembrare un catalogo, che è il contrario di quello che
   sono. */
.voci { list-style: none; margin: 30px 0 0; padding: 0; }
.voce { padding: 26px 0; border-top: 1px solid var(--bordo-deco); }
.voce:first-child { border-top: 0; padding-top: 6px; }
.voce h2 { margin: 0 0 8px; }
.voce .occhiello { margin-bottom: 2px; }
.voce .testo { margin: 0; }
.voce-mappa { margin: 10px 0 0; }
.voce-mappa a {
  /* 44px: è il link che si preme col pollice stando già per strada. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}

/* Il menu del piede: tutte le pagine che esistono. Va a capo da sé e resta
   centrato; i puntini di separazione li fa il bordo, non un carattere — così
   non finiscono letti a voce da chi usa uno schermo che parla. */
.piede-menu {
  width: min(720px, 100% - 40px);
  margin: 4px auto 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: safe center;
  gap: 0 4px;
}
.piede-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--testo-2);
}
.piede-menu a:hover { color: var(--testo); }

/* La fascia del modulo su /prenota/.
   ⚠️ Qui c'era `.beddy--motore`, con un `min-height: 150px` che il commento
   dichiarava «misurato». Era misurato davvero — ma sulla cosa sbagliata: 150px
   è l'ALTEZZA PREDEFINITA DI UN IFRAME quando nessuno gliene dà una, cioè il
   ripiego del browser, non la misura del widget. Avevo misurato il buco e
   l'avevo scambiato per il contenuto (MIGLIORIE 7.209).
   Il motore-iframe non c'è più: perché, sta scritto in `shared/sito/beddy.php`.

   ⚠️ `.fascia.fascia-cerca` e non `.fascia-cerca`: la regola generale delle
   fasce sta più su in questo foglio e a parità di specificità vincerebbe
   quella scritta dopo — cioè questa. Con due nomi di classe la precedenza è
   dichiarata, non affidata all'ordine delle righe (7.181 letta al contrario). */
.foglio--larga .fascia.fascia-cerca { padding-block: clamp(8px, 2vw, 20px) clamp(28px, 5vw, 48px); }
/* Il modulo prende la cornice, non la colonna di lettura: i campi data
   affiancati hanno bisogno di spazio, e sotto una certa larghezza il widget si
   impila da sé in verticale. */
.foglio--larga .fascia.fascia-cerca > * { width: min(var(--sito-largo), 100% - 40px); }
/* Un po' più d'aria sotto il modulo: sotto c'è la fascia delle tre parti, e
   senza respiro le due si leggono come una sola. */
.foglio--larga .fascia.fascia-cerca { padding-bottom: clamp(36px, 5.5vw, 64px); }
/* Il riquadro verde tiene DENTRO l'invito e il modulo: sono la stessa cosa —
   una riga che dice cosa fare e il modulo per farlo. */
.beddy-riquadro {
  /* Qui il fondo è il verde pieno: la firma prende un verde appena più chiaro,
     così resta presente e smette di essere la scritta più leggibile della
     fascia. È lo stesso principio del bianco qui sopra, con l'altro sfondo. */
  --gd-firma: #1B7F7D;
  background: var(--accento);
  border-radius: var(--sito-raggio);
  padding: clamp(16px, 2vw, 22px) clamp(12px, 1.6vw, 18px) clamp(14px, 1.8vw, 20px);
}

/* ⚠️ Agganciata al riquadro e non a `.fascia-cerca`: il riquadro vive su due
   pagine, e una regola legata al nome della fascia lo veste solo su una delle
   due — che è esattamente come la home si è ritrovata una barra diversa. */
.beddy-riquadro .beddy { background: none; padding: 0; box-shadow: none; }
.beddy-riquadro .beddy-invito {
  /* ⚠️ `auto` sui lati, non `0`: la larghezza gliela dà la regola della fascia,
     ma a CENTRARLA è il margine automatico — e una scorciatoia `margin: 0 0 12px`
     lo azzera senza dirlo. L'invito finiva incollato al bordo sinistro della
     finestra mentre il modulo, sotto, era al suo posto: due elementi fratelli
     allineati diversamente, che è il modo in cui questo errore si fa vedere. */
  margin: 0 auto 14px;
  /* Non è una didascalia: è la riga che dice cosa fare, e sta sopra la cosa da
     fare. Stesso carattere dei titoli delle tre parti — sul sito il serif è la
     voce che parla, il sans quella che etichetta. */
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.3;
  text-align: center;
  /* Dentro il riquadro verde il testo scuro non si legge: qui va il chiaro. */
  color: #fff;
}

/* La fascia della testata e quella che la segue hanno lo stesso sfondo: sono
   il titolo e il corpo di una cosa sola. Qui si toglie lo spazio doppio in
   mezzo, o si vedrebbe comunque una cucitura. */
/* ⚠️ TRE CLASSI, e non una. Queste righe c'erano già e non hanno MAI fatto
   niente: `.fascia-apertura` vale (0,1,0) e la regola generale
   `.foglio--larga .fascia { padding-block: … }` vale (0,2,0) — vince la
   seconda, comunque siano ordinate. Il sintomo erano 88 pixel morti sotto la
   fotografia, che spingevano la barra di prenotazione sotto la piega: un
   difetto che si vede solo misurando, perché uno spazio vuoto sembra sempre
   una scelta di qualcuno. È la 7.181 letta dal verso della specificità. */
.foglio--larga .fascia.fascia-apertura { padding-bottom: 0; }
.foglio--larga .fascia.fascia-apertura + .fascia { padding-top: clamp(16px, 2vw, 24px); }
.fascia-apertura .apertura { padding-top: 0; }