/* ============================================================
   Case Bianche — v3, SOLO aggiunte sopra sito/css/style.css (v2)
   Questo file NON tocca sito/css/style.css: viene caricato DOPO,
   in ogni pagina di sito/v3/, e ridefinisce/aggiunge solo quello che
   serve alla v3 (docs/design/struttura-v3.md e, per le modifiche del
   30/09/2026, docs/design/modifiche-v3-2026-09-30.md).

   Regole di design v3 (approvate da Luca il 30/09/2026):
   - TRE BLU (regola di Luca 30/09): pieno #041729 per i fondi grandi (footer, bottoni grandi),
     piu' chiaro per i riempimenti piccoli, ancora piu' chiaro per le linee: vedi --blu-pieno,
     --blu-piccolo, --blu-linea in cima. Il blu pieno e' anche nelle scritte, nei contorni da tastiera e (piu' le
     sfumature scure sopra le foto). Nessuno sfondo blu.
   - Nessun crema: tutte le pagine sono bianche (#FFFFFF).
   - "Solo linee": tutto cio' che e' colorato (verde, rosso, oro,
     azzurro, grigio) e' un CONTORNO continuo sottilissimo, mai un fondo.
   - Linee SEMPRE continue (mai tratteggiate o punteggiate) e
     sottilissime: variabile --linea (1px; 0,5px sugli schermi ad alta
     densita'). UNICA eccezione: il contorno da tastiera (2-3px), che e'
     un obbligo di accessibilita'.
     Se sul telefono il verde a 0,5px non si vede: cambiare SOLO la
     riga "--linea: .5px" qui sotto in "--linea: 1px".
   - Angoli netti (radius 0) nel calendario e nella galleria.
   ============================================================ */

/* ---- Correzione bug trovato testando la v3 ----
   In style.css (v2) alcune classi impongono "display:flex" (es.
   ".messaggio"). Una regola d'autore con la stessa specificità di
   quella predefinita del browser per l'attributo "hidden" vince sempre
   su quella del browser: risultato, un elemento "hidden" che ha anche
   classe ".messaggio" restava visibile (vuoto). Qui si forza sempre
   "display:none" quando c'è l'attributo "hidden", qualunque classe
   abbia l'elemento. */
[hidden]{ display: none !important; }

/* ============================================================
   0. COLORI E SPESSORE DELLE LINEE (tabella §2 della specifica)
   Le variabili di style.css (v2) vengono ridefinite qui: la v2 resta
   identica perche' questo file si carica solo nelle pagine di sito/v3/.
   ============================================================ */
:root{
  --bianco-caldo: #FFFFFF;          /* il crema e' tolto: pagine tutte bianche */
  --bordo: #EEECE8;                 /* linea decorativa (non porta informazioni) */
  /* ---- I TRE BLU (regola di Luca, 30/09/2026) ----
     "Se c'e' un riempimento grosso usa il blu che ti ho dato (#041729);
      se c'e' un riempimento piu' piccolo schiariscilo un po'; se c'e' una
      linea schiariscilo di piu'."
     --blu-pieno    #041729  fondi pieni GRANDI: footer, bottoni grandi ("Prenota", "Continua")
     --blu-piccolo  #163F6B  riempimenti PICCOLI: pulsanti piccoli, elemento scelto piccolo,
                             pallino del video (bianco su questo blu = 10,9:1)
     --blu-linea    #1E466A  LINEE e contorni blu (via di mezzo tra #3975AC e #041729): bordi, frecce, riga sotto le date, giorno
                             scelto (circa 10:1 su bianco)
     Per cambiare un tipo di blu in tutto il sito basta cambiare la riga qui sotto.
     Restano scuri (#041729) solo: i testi, i contorni da tastiera (obbligo di accessibilita')
     e le sfumature scure sopra le foto. */
  --blu-pieno: #041729;
  --blu-piccolo: #163F6B;
  --blu-piccolo-hover: #1D4E7C;
  --blu-linea: #1E466A;

  --blu-primario: var(--blu-pieno);   /* nome usato da style.css (v2) per i fondi grandi e i testi */
  --blu-primario-hover: #163552;
  --blu-accento: var(--blu-pieno);    /* prima #3174AF: ora lo stesso blu */
  --blu-accento-hover: #163552;
  --blu-scurissimo: #041729;
  --blu-scuro-intermedio: #163552;
  --blu-chiaro-su-scuro: #2B4661;   /* linee sul footer blu */
  --bordo-su-scuro: #2B4661;
  --testo-secondario: #66727F;      /* non piu' chiaro: 4,9:1 su bianco */
  --ap-inchiostro: #041729;
  /* COLORE DELLE SCRITTE (richiesta di Luca 30/09/2026: non nero, ma grigio scuro).
     #3A3F44 su bianco = 10,6:1. Il testo secondario (#66727F, 4,9:1) resta piu' chiaro.
     Il blu #041729 resta solo per marca: bottoni, footer, linee, focus, link. */
  --testo: #3A3F44;

  /* Segnaposto ("DA DEFINIRE"): solo contorno. */
  --segnaposto-bg: #FFFFFF;         /* fondo tolto */
  --segnaposto-testo: #5A4A1F;
  --segnaposto-linea: #9C8646;
  /* Messaggi: solo contorno + testo colorato. */
  --errore: #B23F38;
  --successo: #327A55;
  --fondo-libero: #EEF6F0;   /* fondo chiarissimo della meta' libera nel calendario (prezzo #327A55 sopra: ~4,9:1) */
  /* WhatsApp: non piu' fondo verde, ma contorno (la scritta e' blu). */
  --whatsapp: #4A9A6E;
  /* Linee di stato del calendario. */
  --libero-linea: #4A9A6E;          /* camera libera (3,42:1 su bianco) */
  --occ-segno: #7A838D;             /* camera occupata (3,85:1) */
  --azzurro-linea: #5F8FBF;         /* passaggio del mouse (3,40:1) */

  /* LINEA SOTTILISSIMA: 1px sugli schermi normali; 0,5px (un solo punto
     dello schermo) su telefoni e Mac. */
  --linea: 1px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  :root{ --linea: .5px; }
}

/* Con "riduci le animazioni" nessuno scorrimento morbido. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ============================================================
   1. TESTI PIU' PICCOLI (§1): il testo di lettura non scende sotto
   16px; i campi dei moduli restano a 16px (sotto, l'iPhone
   ingrandisce da solo la pagina).
   ============================================================ */
body{ font-size: 16px; line-height: 1.6; }
h1{ font-size: 30px; }
h2{ font-size: 24px; }
h3{ font-size: 16px; }
.eyebrow{ font-size: 12px; }
.btn{ font-size: 15px; border-width: var(--linea); }
.messaggio{ font-size: 16px; }
.footer__colonna h3{ font-size: 15px; }
.footer__basso{ font-size: 13px; }
@media (min-width: 900px){
  body{ font-size: 17px; }
  h1{ font-size: 38px; }
  h2{ font-size: 28px; }
  h3{ font-size: 18px; }
  p{ font-size: 17px; }
  .eyebrow{ font-size: 13px; }
}

/* ---- Font — richiesta di Luca del 2026-09-26, SOLO v3 ----
   Century Gothic è un font commerciale (Monotype): non si scarica né si
   incorpora nel sito (costerebbe e sarebbe da installare per ogni
   visitatore). Si usa SOLO se il dispositivo di chi guarda il sito ce
   l'ha già (comune su Windows/Office, raro su Mac/telefoni). Quando non
   c'è, il browser passa da solo al font gratuito Questrial (Google
   Fonts, licenza SIL OFL — nessun costo, nessun account), scelto perché
   è il più simile per forma "geometrica e tonda" a Century Gothic tra le
   alternative gratuite verificate. Questrial ha un solo peso (400): dove
   serve un titolo più marcato si usa comunque questo, in maiuscolo o con
   più spaziatura, invece di un grassetto che non esiste nel font. */
:root{
  --font-titoli: "Century Gothic", Questrial, Arial, sans-serif;
  --font-corpo: "Century Gothic", Questrial, Arial, sans-serif;
}
/* Con un font sans-serif il testo non ha più bisogno della riga più
   larga che serviva a Bodoni Moda (font stretto e con grazie): qui i
   titoli tornano a una spaziatura un filo più chiusa, più leggibile. */
h1, h2{ letter-spacing: .02em; }
.eyebrow{ font-style: normal; } /* Questrial non ha un corsivo vero */

/* ============================================================
   2. "SOLO LINEE" sui componenti di style.css (v2) usati dalla v3
   Ogni fondo colorato diventa contorno continuo sottilissimo.
   ============================================================ */
/* Sezioni "alternate": prima crema, ora semplicemente bianche. Nessuna linea
   di separazione tra le sezioni (richiesta di Luca del 30/09/2026): lo
   stacco lo fa solo lo spazio bianco. */

/* Etichette "DA DEFINIRE": contorno oro, testo marrone. */
.badge-segnaposto{
  background: transparent;
  color: var(--segnaposto-testo);
  border: var(--linea) solid var(--segnaposto-linea);
}
/* ...ma dentro il footer blu il marrone non si leggerebbe: testo chiaro e
   linea chiara (ripiego dello sviluppatore, la specifica non prevedeva
   etichette nel footer). */
.footer .badge-segnaposto{
  color: #C9D8E6;
  border-color: rgba(255,255,255,.55);
}

/* Messaggi: niente fondo rosa/verdino, solo contorno + testo. */
.messaggio--successo{ background: transparent; color: var(--successo); border: var(--linea) solid var(--successo); }
.messaggio--errore{ background: transparent; color: var(--errore); border: var(--linea) solid var(--errore); }
.messaggio--info{ background: transparent; color: var(--testo); border: var(--linea) solid var(--bordo); }

/* Riquadro "foto in arrivo": bianco, linea continua. */
.foto-in-arrivo{
  background: transparent;
  border: var(--linea) solid var(--occ-segno);   /* era tratteggiato */
}
.blocco-aperitivi{ background: transparent; border: 1px solid var(--bordo); }

/* Bottoni: al passaggio del mouse cambia la LINEA, non un fondo. */
.btn--secondario:hover{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) var(--blu-linea);
}
.btn--whatsapp{
  background: transparent;
  color: var(--testo);
  border-color: var(--whatsapp);
}
.btn--whatsapp:hover{
  filter: none;
  border-color: var(--blu-linea);
  box-shadow: inset 0 0 0 var(--linea) var(--blu-linea);
}
.btn--disabilitato, .btn:disabled{
  background: transparent;
  border-color: #D9D6D0;
  color: var(--testo-secondario);
}
.lang-btn:not([aria-current="true"]):hover{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) currentColor;
}

/* Footer: blu pieno (consentito). Il bottone "Prenota" diventa contorno
   bianco sottile con scritta bianca. Il passaggio del mouse sui link
   usa il bianco (con il blu #041729 la scritta sparirebbe). */
.footer a:hover{
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: var(--linea);
  text-underline-offset: 3px;
}
.footer .btn--accento{
  background: transparent;
  color: #FFFFFF;
  border: var(--linea) solid #FFFFFF;
}
.footer .btn--accento:hover{
  background: transparent;
  text-decoration: none;
  box-shadow: inset 0 0 0 var(--linea) #FFFFFF;
}
.footer .lang-btn[aria-current="true"]{
  background: transparent;
  box-shadow: inset 0 0 0 var(--linea) #FFFFFF;
}
.footer :focus-visible{ outline-color: #FFFFFF; }

/* Icona WhatsApp fluttuante: resta a linee, in --blu-linea (l'icona ha
   il colore scritto nell'HTML come "stroke", qui lo si ridefinisce). */
.whatsapp-flottante{
  color: var(--blu-linea);
  border: var(--linea) solid var(--blu-linea);
}
.whatsapp-flottante svg{ stroke: var(--blu-linea); }

/* Campi dei moduli: il contorno deve vedersi (una linea che porta
   un'informazione ha bisogno di almeno 3:1 di contrasto: #EEECE8 sul
   bianco e' solo 1,18:1). Grigio #7A838D (3,85:1), continuo e sottile.
   Aggiunto anche il campo password, che in style.css (v2) non era
   previsto e restava senza stile. Il testo resta a 16px. */
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="date"],
.campo input[type="password"],
.campo select,
.campo textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: var(--linea) solid var(--occ-segno);
  border-radius: var(--radius);
  font-family: var(--font-corpo);
  font-size: 16px;
  color: var(--testo);
  background: var(--bianco);
}
.campo.campo--errore input,
.campo.campo--errore select,
.campo.campo--errore textarea{ border-color: var(--errore); }

/* ============================================================
   3. Fascia CTA login / area riservata (struttura-v3.md §2, §5)
   ============================================================ */
.cta-login{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: transparent;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  padding: 28px 24px;
  min-height: 96px;
  text-align: left;
  text-decoration: none;
  color: var(--testo);
  cursor: pointer;
  transition: border-color .15s ease;
}
/* Al passaggio del mouse la LINEA diventa blu e la freccia si sposta
   (niente fondo che si scurisce). */
.cta-login:hover{ border-top-color: var(--blu-linea); border-bottom-color: var(--blu-linea); }
.cta-login:hover .cta-login__freccia,
.cta-login:focus-visible .cta-login__freccia{ transform: translateX(4px); }
/* Da tastiera (tasto Tab): contorno ben visibile su tutta la fascia.
   Il contorno sta DENTRO la fascia (offset negativo) perché la fascia è
   larga quanto lo schermo e un contorno esterno verrebbe tagliato. */
.cta-login:focus-visible{
  outline: 3px solid var(--blu-accento);
  outline-offset: -6px;
}
.cta-login__testo{ display: flex; flex-direction: column; gap: 4px; max-width: 720px; }
.cta-login__testo strong{ font-size: 17px; font-weight: 500; }
.cta-login__pulsante{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: var(--linea) solid var(--blu-linea);
  color: var(--testo);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-size: 14px;
  white-space: nowrap;
  background: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cta-login__freccia{ transition: transform .15s ease; }
/* Dopo il login-demo il pulsante diventa un bottone PICCOLO: --blu-piccolo. */
.cta-login--loggato .cta-login__pulsante{
  background: var(--blu-piccolo);
  border-color: var(--blu-piccolo);
  color: #fff;
}
.cta-login--loggato:hover .cta-login__pulsante{ background: var(--blu-piccolo-hover); border-color: var(--blu-piccolo-hover); }
@media (prefers-reduced-motion: reduce){
  .cta-login__freccia, .cta-login{ transition: none; }
}

/* ============================================================
   4. Testata ridotta ".fascia-superiore" (struttura-v3.md §3.2, §4)
   ============================================================ */
.fascia-superiore{
  width: 100%;
  height: 25vh;
  min-height: 200px;
  overflow: hidden;
}
.fascia-superiore img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.fascia-superiore-testo{ padding-top: 28px; }

/* ============================================================
   5. CALENDARIO DI DISPONIBILITA' (pagina Camere)
   Ogni giorno e' un piccolo quadrato con DUE rettangoli:
     sopra = camere singole (1 letto)   sotto = camere doppie (2 letti)
   Un rettangolo e' LIBERO se almeno una camera di quel tipo e' libera,
   OCCUPATO se sono tutte occupate (mai quante, mai quali).
   Angoli netti; linee continue sottilissime; nessun riempimento.
   Regole portate da docs/design/bozze-v3/anteprima-modifiche-2026-09-30.html
   (sezione CALENDARIO); classi rinominate con il prefisso "cal-".
   ============================================================ */
.cal-wrap{ container-type: inline-size; margin: 20px 0 12px; }
.cal{ --q: 56px; --gap: 8px; --fade: 22px; --etl: 58px; --linea-q: #D0CCC5; }
@container (min-width: 640px){
  .cal{ --q: 68px; --gap: 10px; --fade: 56px; --etl: 124px; }
}

/* In alto, al centro: ‹ Ottobre ›   ‹ 2026 ›  — frecce sottili che puntano
   verso l'esterno, niente tendine ne' menu del browser. Il segno e' sottile
   (1px) ma l'area di tocco resta di 40x44 px. */
.cal-top{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 20px; margin-bottom: 10px; }
@container (min-width: 640px){ .cal-top{ gap: 0 44px; } }
.cal-nav{ display: inline-flex; align-items: center; }
.cal-fr{
  width: 40px; height: 44px; padding: 0;
  border: 0; background: none; border-radius: 0;
  cursor: pointer; color: var(--blu-linea);
  display: grid; place-items: center;
}
.cal-fr svg{ width: 14px; height: 14px; }
.cal-fr:hover{ color: var(--azzurro-linea); }            /* cambia il colore della linea, non il fondo */
.cal-fr:focus-visible{ outline: 2px solid var(--blu-primario); outline-offset: -4px; }
.cal-fr[aria-disabled="true"]{ opacity: .3; cursor: default; }
.cal-fr[aria-disabled="true"]:hover{ color: var(--blu-linea); }
/* Larghezza fissa per il nome del mese: le frecce non "ballano" cambiando mese. */
.cal-nome{ min-width: 5.6em; text-align: center; font-size: 17px; line-height: 44px; color: var(--testo); white-space: nowrap; }
.cal-nome--anno{ min-width: 2.9em; }

.cal-body{ display: flex; align-items: flex-start; }
.cal-eti{
  flex: 0 0 var(--etl); height: var(--q); margin-top: 8px;
  padding: var(--linea) 8px;
  display: flex; flex-direction: column;
  font-size: 12px; line-height: 1.05; color: var(--testo-secondario); text-align: right;   /* telefono: 2 righe stanno dentro la riga del loro rettangolo (28px) */
}
.cal-eti__voce{ flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; }

/* Striscia scorrevole: bordi destro e sinistro che sfumano. La sfumatura e'
   solo grafica: i giorni sotto restano toccabili. */
.cal-scroller{
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--fade);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.cal-scroller::-webkit-scrollbar{ display: none; }
.cal-scroller.is-drag{ scroll-snap-type: none; cursor: grabbing; }
.cal-scroller{ -webkit-user-select: none; user-select: none; }
/* Spazio in alto 8px: serve a non tagliare il contorno da tastiera (2px + 3px di distacco). */
.cal-track{ position: relative; display: flex; gap: var(--gap); padding: 8px 0 18px var(--fade); width: max-content; }
.cal-track::after{ content: ""; flex: 0 0 var(--fade); }

.cal-g{
  flex: 0 0 var(--q); width: var(--q); padding: 0; border: 0; background: none; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  scroll-snap-align: start; -webkit-tap-highlight-color: transparent; text-align: center;
}
.cal-q{
  display: flex; flex-direction: column; width: 100%; height: var(--q);
  padding: 0; border: var(--linea) solid var(--linea-q); border-radius: 0; background: #fff;
  transition: border-color .15s ease;
}
/* Solo DUE linee per giorno: il quadrato esterno e una linea orizzontale al
   centro che divide le singole (sopra) dalle doppie (sotto). */
.cal-st{
  flex: 1 1 0; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; border-radius: 0;
}
.cal-st + .cal-st{ border-top: var(--linea) solid var(--linea-q); }
/* PREZZO A NOTTE dentro il rettangolo (sopra: suite singola, sotto: suite doppia).
   I prezzi stanno in js/prezzi-v3.js.
   STATI — nessun tratteggio:
   libera   = prezzo in VERDE scuro (#327A55) su fondo verde chiarissimo (--fondo-libero)
   occupata = prezzo GRIGIO e BARRATO (non e' scegliibile). Il colore non e' l'unico
              segnale: cambia anche il disegno (barrato); in piu' il giorno ha
              un'etichetta "non disponibile" per i lettori di schermo. */
.cal-prezzo{ font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (min-width: 640px){ .cal-prezzo{ font-size: 13px; } }
@container (min-width: 640px){ .cal-eti{ font-size: 13px; line-height: 1.25; } }
.cal-st--lib{ color: var(--successo); background: var(--fondo-libero); background-clip: padding-box; }  /* fondo verde chiarissimo: solo la meta' libera; bordo e linea centrale restano sopra, netti */
.cal-st--occ{ color: var(--testo-secondario); }
.cal-st--occ .cal-prezzo{ text-decoration: line-through; text-decoration-thickness: var(--linea); }
.cal-n{ margin-top: 6px; height: 36px; line-height: 1.15; }
.cal-n b{ display: block; font-weight: 400; font-size: 15px; color: var(--testo); }
.cal-n i{ display: block; font-style: normal; font-size: 13px; color: var(--testo-secondario); margin-top: 2px; }
@media (hover: hover){
  .cal-g:not([disabled]):not(.cal-g--arr):not(.cal-g--par):hover .cal-q{ outline: var(--linea) solid var(--azzurro-linea); outline-offset: 2px; }
}
/* GIORNO SCELTO (arrivo e partenza) = bordo BLU SPESSO (3px, --blu-linea).
   E' un "outline" tirato verso l'interno (offset = -spessore): copre il bordo sottile e
   sta sopra la linea che divide singole e doppie, cosi' il bordo e' pieno e uniforme.
   Non cambia la dimensione del quadrato (nessuno spostamento). */
.cal-g--arr .cal-q, .cal-g--par .cal-q{ border-color: var(--blu-linea); outline: 3px solid var(--blu-linea); outline-offset: -3px; }
/* da tastiera il giorno scelto tiene il bordo spesso e in piu' ha un anello esterno scuro */
.cal-g--arr:focus-visible .cal-q, .cal-g--par:focus-visible .cal-q{ outline: 3px solid var(--blu-linea); outline-offset: -3px; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--blu-pieno); }
.cal-g:focus-visible{ outline: none; }
/* unica eccezione allo spessore: il contorno da tastiera (obbligo di accessibilita') */
.cal-g:focus-visible .cal-q{ outline: 2px solid var(--blu-primario); outline-offset: 3px; }
.cal-g[disabled]{ cursor: not-allowed; }
.cal-g[disabled] .cal-q{ opacity: .45; }
.cal-g[disabled] .cal-n{ opacity: .55; }
/* caricamento: linea grigia continua che "respira" (niente fondo sfumato, niente tratteggio) */
.cal-g--scheletro .cal-q{ border-color: var(--occ-segno); animation: cal-respira 1.4s ease-in-out infinite; }
.cal-g--scheletro .cal-q > *, .cal-g--scheletro .cal-n > *{ visibility: hidden; }
@keyframes cal-respira{ 0%, 100%{ opacity: 1; } 50%{ opacity: .35; } }

/* Riga sottile sotto i giorni: si allunga dall'arrivo alla partenza.
   Solo la linea (nessuna terminazione rettangolare alle estremita', richiesta del 30/09). */
.cal-riga{
  position: absolute; left: 0; bottom: 8px; height: 1px; width: 0; background: var(--blu-linea); opacity: 0; pointer-events: none;
  transition: width .38s cubic-bezier(.3, .7, .2, 1), opacity .15s ease;
}
@media (prefers-reduced-motion: reduce){
  .cal-riga{ transition: none; }
  .cal-g--scheletro .cal-q{ animation: none; }
  .cal-q{ transition: none; }
}

.cal-info{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; min-height: 44px; }
.cal-riep{ margin: 0; font-size: 16px; }
.cal-riep a{ color: var(--blu-primario); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
.cal-lnk{
  background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: 14px; color: var(--blu-primario);
  text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; cursor: pointer; border-radius: 0;
}

/* ============================================================
   6. TRE FOTO CHE CAMBIANO A TURNO (pagina Camere, sotto il calendario)
   Al posto della vecchia galleria a scorrimento (richiesta di Luca
   30/09/2026). Tre rettangoli ORIZZONTALI 3:2 affiancati (spazio 18 px; telefono: impilati, 10 px); ogni 2 secondi UNO cambia
   con dissolvenza incrociata (sinistra, centro, destra, sinistra...).
   La logica e' in js/galleria-camere.js: li' si regolano intervallo
   (INTERVALLO) e durata della dissolvenza (DISSOLVENZA).
   Per regolare lo spazio tra i riquadri: --tre-foto-spazio.
   Telefono: impilati in colonna (vedi sotto).
   ============================================================ */
.tre-foto{
  --tre-foto-spazio: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tre-foto-spazio);
}
@media (max-width: 639px){
  /* Telefono: 3 riquadri orizzontali affiancati sarebbero minuscoli (110 x 73 px):
     si impilano uno sotto l'altro, a tutta larghezza. Il cambio a turno resta
     identico (alto, centro, basso). */
  .tre-foto{ --tre-foto-spazio: 10px; grid-template-columns: 1fr; }
}
.tre-foto__box{
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: var(--linea) solid var(--bordo);
  background: #FFFFFF;
}
.tre-foto__img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  -webkit-user-drag: none;
  user-select: none;
}
/* La foto nuova arriva sopra la vecchia e sale da 0 a 1; la vecchia resta
   sotto finche' non e' coperta (nessun "buco" bianco a meta' dissolvenza). */
.tre-foto__box > .tre-foto__img:not(:first-child){
  opacity: 0;
  transition: opacity var(--tre-foto-dissolvenza, 1.3s) ease-in-out;
}
.tre-foto__box > .tre-foto__img.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .tre-foto__box > .tre-foto__img:not(:first-child){ transition: none; }
}

/* ============================================================
   7. HOME — schede degli argomenti con "VETRO OPACO" (§9)
   A riposo: foto sfocata + velo BIANCO semitrasparente (dal 30/09 ore 19:15), titolo e
   "Scopri di piu'" visibili.
   Mouse (solo dove esiste davvero): il vetro sparisce, la foto e'
   nitida, la scritta scompare (solo opacity: il testo resta per i
   lettori di schermo).
   Tastiera (Tab): vetro via come col mouse, ma la scritta RESTA + contorno.
   Telefono: la scheda al centro dello schermo e' nitida (classe
   .is-centro messa da js/argomenti-vetro.js); il tocco apre subito la pagina.
   La dissolvenza in sequenza della v2 (.argomenti--animata) NON e' toccata:
   agisce sull'opacita' dell'intera scheda, il vetro sta dentro.
   ============================================================ */
.argomenti__tile{ background: #FFFFFF; }
/* ---- Forma delle schede (richiesta di Luca del 30/09/2026) ----
   Rettangoli PIU' LARGHI CHE ALTI, su 2 colonne x 3 righe (6 schede).
   Telefono: 1 colonna, un po' meno larghi (4:3) per non diventare
   strisce sottili. Sostituisce l'impaginazione a 3 colonne della v2.
   Il ritaglio della foto si regola scheda per scheda con --pos (in
   index.html), uguale per la foto nitida e per la copia sfocata. */
.argomenti__griglia{ grid-template-columns: 1fr; gap: 24px; }
.argomenti__tile{ aspect-ratio: 4 / 3; }
.argomenti__tile img{ object-position: var(--pos, 50% 50%); }
.argomenti__titolo{ font-size: clamp(24px, 3.2vw, 40px); }
@media (min-width: 768px){
  .argomenti__griglia{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .argomenti__tile{ aspect-ratio: 3 / 2; }
}

/* Copia sfocata: statica (si anima solo l'opacita'), niente backdrop-filter. */
.argomenti__sfocata{
  filter: blur(16px);
  transform: scale(1.12);          /* nasconde i bordi trasparenti della sfocatura */
  transition: opacity .45s ease;
}
/* VELO BIANCO (richiesta di Luca 30/09/2026 ore 19:15): il vetro deve
   sembrare chiaro e lattiginoso, non scuro. Sopra la foto sfocata c'e'
   un velo bianco semitrasparente (da .42 in alto a .62 in basso, dove sta
   la scritta). Per schiarire o scurire il vetro si cambiano SOLO questi
   due numeri. La scritta a riposo e' blu #041729 (contrasto >= 10:1 anche
   sul caso peggiore, foto nera sotto il velo); con foto nitida (tastiera
   o telefono) torna bianca perche' si accende la sfumatura scura. */
.argomenti__tile{ --velo-vetro-alto: .42; --velo-vetro-basso: .62; }
.argomenti__tile::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,var(--velo-vetro-alto)) 0%, rgba(255,255,255,var(--velo-vetro-basso)) 100%);
  transition: opacity .45s ease;
}
.argomenti__testo{ color: var(--blu-primario); transition: opacity .3s ease, color .45s ease; }
.argomenti__tile:focus-visible .argomenti__testo,
.argomenti__tile.is-centro .argomenti__testo{ color: var(--bianco); }
/* La sfumatura scura di style.css e' spenta a riposo (la sostituisce il velo)
   e si accende solo quando la foto e' nitida e la scritta resta. */
.argomenti__scrim{ opacity: 0; transition: opacity .45s ease; }
.argomenti__testo{ z-index: 2; }

@media (hover: hover) and (pointer: fine){
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover .argomenti__sfocata,
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover::after{ opacity: 0; }
  .argomenti__tile:not(.argomenti__tile--segnaposto):hover .argomenti__testo{ opacity: 0; }
}
/* Tastiera e telefono (scheda al centro): vetro via, foto nitida, scritta che resta, sfumatura scura accesa. */
.argomenti__tile:focus-visible .argomenti__sfocata,
.argomenti__tile.is-centro .argomenti__sfocata,
.argomenti__tile:focus-visible::after,
.argomenti__tile.is-centro::after{ opacity: 0; }
.argomenti__tile:focus-visible .argomenti__scrim,
.argomenti__tile.is-centro .argomenti__scrim{ opacity: 1; }
.argomenti__tile:focus-visible .argomenti__testo{ opacity: 1; }
.argomenti__tile:focus-visible{ outline: 3px solid var(--blu-primario); outline-offset: 4px; }

/* Scheda senza foto (Colazioni): nessun vetro. Bianca, solo contorno
   CONTINUO sottilissimo (era tratteggiato); al mouse diventa blu, ~1,5px. */
.argomenti__tile--segnaposto{ border: var(--linea) solid var(--occ-segno); }
.argomenti__tile--segnaposto::after{ display: none; }
.argomenti__tile--segnaposto .foto-in-arrivo{ border: 0; }
.argomenti__tile--segnaposto:hover{ border-color: var(--blu-linea); box-shadow: inset 0 0 0 1px var(--blu-linea); }

/* Ripiego NITIDO (foto senza vetro, con la sfumatura scura di prima):
   - browser senza filter: blur;
   - preferenza "risparmio dati" (su telefono);
   - classe .argomenti--nitida messa da argomenti-vetro.js se il browser
     dichiara il risparmio dati (Save-Data). */
@supports not (filter: blur(1px)){
  .argomenti__sfocata{ display: none; }
  .argomenti__tile::after{ display: none; }
  .argomenti__scrim{ opacity: 1; }
}
@media (prefers-reduced-data: reduce) and (hover: none){
  .argomenti__sfocata{ display: none; }
  .argomenti__tile::after{ display: none; }
  .argomenti__scrim{ opacity: 1; }
}
.argomenti--nitida .argomenti__sfocata{ display: none; }
.argomenti--nitida .argomenti__tile::after{ display: none; }
.argomenti--nitida .argomenti__scrim{ opacity: 1; }
/* Ripiego nitido: nessun velo bianco, sfumatura scura accesa, quindi scritta bianca. */
.argomenti--nitida .argomenti__testo{ color: var(--bianco); }
@supports not (filter: blur(1px)){ .argomenti__testo{ color: var(--bianco); } }
@media (prefers-reduced-data: reduce) and (hover: none){ .argomenti__testo{ color: var(--bianco); } }

@media (prefers-reduced-motion: reduce){
  /* con "riduci le animazioni" il passaggio vetro/nitido e' immediato */
  .argomenti__sfocata, .argomenti__tile::after, .argomenti__scrim, .argomenti__testo{ transition: none; }
}

/* ============================================================
   8. Login (struttura-v3.md §6) — riusa .campo/.btn di style.css
   ============================================================ */
.modulo-login{ max-width: 400px; }
.separatore-oppure{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--testo-secondario);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.separatore-oppure::before, .separatore-oppure::after{ content: ""; flex: 1; height: 1px; background: var(--bordo); }

/* ============================================================
   9. Area riservata — scorrimento "Info sulla camera" (struttura-v3.md §7.2)
   ============================================================ */
.scorrimento-info{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 4px 16px;
  scroll-snap-type: x proximity;
}
.scorrimento-info__card{
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 190px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--bordo);
  background: #fff;
}
.scorrimento-info__card img,
.scorrimento-info__card .foto-in-arrivo{
  width: 100%;
  height: 140px;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}
.scorrimento-info__card .foto-in-arrivo{ display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12px; border: 0; }
.scorrimento-info__didascalia{ padding: 10px 12px; font-weight: 500; font-size: 14px; }
.scorrimento-info__didascalia small{ display: block; color: var(--testo-secondario); font-weight: 400; margin-top: 4px; }
.scorrimento-info__play{ position: relative; }
.scorrimento-info__play::after{
  content: "\25B6";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(4,23,41,.75); color: #fff;   /* blu semitrasparente su foto: consentito */
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
@media (min-width: 900px){ .scorrimento-info__card{ width: 230px; } .scorrimento-info__card img, .scorrimento-info__card .foto-in-arrivo{ height: 170px; } }

/* ============================================================
   10. Area riservata — "La mia colazione di domani" (struttura-v3.md §8)
   ============================================================ */
.switch-luogo{ display: flex; gap: 10px; margin: 16px 0 24px; }
.switch-luogo button{
  padding: 10px 20px;
  min-height: 44px;
  border: var(--linea) solid #D9D6D0;
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-corpo);
  color: var(--testo);
}
.switch-luogo button:hover{ border-color: var(--blu-linea); }
.switch-luogo button[aria-pressed="true"]{ background: var(--blu-piccolo); color: #fff; border-color: var(--blu-piccolo); }
.lista-colazione{ list-style: none; margin: 0; padding: 0; max-width: 640px; }
.lista-colazione li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordo);
}
.lista-colazione .voce-nome{ font-weight: 500; }
.lista-colazione .voce-allergeni{ display: block; font-size: 13px; color: var(--testo-secondario); margin-top: 2px; }

/* ============================================================
   11. Area riservata — aperitivi / carta prepagata: SOLO blocchi
   descrittivi (struttura-v3.md §9/§10).
   ============================================================ */
.blocco-descrittivo{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 680px;
  margin-top: 16px;
}
.blocco-descrittivo img{
  width: 220px;
  max-width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius);
  flex: 0 0 auto;
}
.blocco-descrittivo p{ flex: 1 1 260px; margin: 0; }

.link-esci{ font-size: 14px; color: var(--blu-accento); text-decoration: underline; }

/* ============================================================
   COLORE DELLE SCRITTE (30/09/2026): grigio scuro, non nero/blu.
   Le regole di style.css (v2) usavano il blu di marca anche per le
   scritte: qui, solo per la v3, passano alla variabile --testo.
   Restano blu (scelta voluta): bottoni pieni, footer, linee/bordi,
   focus, link sottolineati, voce di menu attiva/al passaggio.
   ============================================================ */
body{
  color: var(--testo);
  /* Scritte del menu/apertura: dal quasi-bianco (sopra il video) al grigio scuro. */
  --ap-testo: color-mix(in oklab, var(--ap-testo-base), var(--testo) calc(var(--chiaro) * 100%));
}
.eyebrow,
.header__wordmark,
.btn--secondario,
.card-camera__prezzo,
.campo textarea,
.hero--segnaposto .hero__contenuto h1,
.hero--segnaposto .hero__contenuto p,
.argomenti__tile--segnaposto .argomenti__testo,
.fascia-demo,
.passo__titolo,
.calendario-demo__giorno,
.scelta-riquadro__prezzo,
.contapezzi button,
.riepilogo-box .riepilogo-box__totale,
.admin-tab button,
.fascia-legale{ color: var(--testo); }
.eyebrow--su-scuro{ color: var(--bianco); }   /* su fondo scuro resta bianco */

/* ============================================================
   APERTURA DELLA HOME (richieste di Luca 30/09/2026, ore 17:45)
   a) foto a filo dello schermo: niente cornice bianca (inset 0);
   b) foto in BIANCO E NERO (grayscale(1), come in style.css) coperta da
      un VELO BIANCO semitrasparente ("come un foglio bianco davanti alla
      foto", correzione di Luca 30/09/2026 ore 18:20): risulta molto chiara
      e sbiadita. Il velo e' un ::after DENTRO ".apertura__foto-full": ne
      segue il ritaglio e si allarga insieme alla foto nell'animazione.
      Per rendere la foto piu' o meno chiara si cambia SOLO il valore
      di --velo-apertura (0 = nessun velo, 1 = tutto bianco);
   c) animazione piu' lenta del 30%: TUTTE le durate e i ritardi
      della sequenza sono moltiplicati per 1,3 (poi ancora per 1,3 il 30/09 sera: foto, C, lettere,
      spostamento del nome, riquadro video, sottotitolo), cosi' l'ordine
      resta identico e la sequenza e' solo piu' calma.
      Valori originali di style.css: foto 1,6s/.1s; C 1,25s/.29s;
      lettere .92s/--d; nome 1,75s/1,83s; video 1s/1,35s; sottotitolo 1,4s/4,3s.
   d) il nome "Case Bianche" e' in blu #1F3A5A (vedi piu' sotto).
   ============================================================ */
.apertura__foto-full{
  inset: 0;
  animation-duration: 2.704s;  /* 1,6 x 1,3 x 1,3 */
  animation-delay: .169s;      /* .1 x 1,3 x 1,3 */
}
@media (min-width: 640px){
  .apertura__foto-full{ inset: 0; }
}
.apertura__foto-full{ --velo-apertura: .71; }
.apertura__foto-full img{ filter: grayscale(1); }
.apertura__foto-full::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,var(--velo-apertura));
  pointer-events: none;
}
/* ---- Il nome (richiesta di Luca 30/09/2026, ore 19:13) ----
   e) TUTTE le lettere, compresa la C, compaiono da zero una dopo l'altra
      con lo stesso effetto (dissolvenza .92 s x 1,3 x 1,3 = 1,555 s). Non c'e'
      piu' la C sola che si sposta: il nome sta gia' al centro. I ritardi
      (gia' moltiplicati per 1,3 due volte: +30% del 17:45, altro +30% del 30/09 sera) sono in
      index.html, variabile --d di ogni lettera (passo 0,169 s); la C parte
      per prima (.377 s).
   f) nome piu' piccolo, MAIUSCOLO, con molto spazio tra le lettere
      (letter-spacing .65em: per cambiarlo basta il numero qui sotto).
      Dimensione in vw cosi' il nome resta su UNA riga anche su telefono
      stretto (320 px), senza uscire dallo schermo. Blu #1F3A5A. */
.apertura__lettera-c{ animation-duration: 1.555s; animation-delay: .49s; }
.apertura__resto > span{
  animation-duration: 1.555s;                 /* .92 x 1,3 x 1,3 */
  animation-delay: var(--d);                  /* gia' in secondi finali */
}
.apertura__titolo{
  transform: none;             /* niente piu' spostamento verso il centro */
  animation: none;
  text-transform: uppercase;
  font-size: clamp(18px, 4.95vw, 42.5px);   /* +12% rispetto a prima (era clamp(16px, 4.4vw, 38px)), richiesta 30/09 */
  letter-spacing: .65em;
  padding-left: .65em;          /* compensa lo spazio dopo l'ultima lettera: il nome resta centrato */
  color: #1F3A5A;   /* blu un po' piu' chiaro del #041729 (richiesta di Luca 30/09 19:55) */
  text-shadow: none;   /* sulla foto chiara e velata il blu si legge da solo: alone bianco tolto */
}
/* g) il video e' piu' piccolo del 10% (52 -> 46,8 ; 420 -> 378), proporzioni invariate.
   h) il riquadro del video compare COME LA FOTO di sfondo (richiesta di Luca
      30/09 19:55): stessa animazione (ap-foto-allarga: si allarga da una
      striscia centrale), stessa durata (2,704 s), stesso ritardo (.169 s),
      quindi parte insieme alla foto. Se si cambia la foto, cambiare anche qui. */
.apertura__quadro{
  width: min(46.8vw, 46.8svh, 378px);
  opacity: 1;
  clip-path: inset(0 calc(50% - 5px) 0 calc(50% - 5px));
  animation-name: ap-foto-allarga;
  animation-duration: 2.704s;
  animation-delay: .169s;
  animation-timing-function: cubic-bezier(.22,.85,.23,1);
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce){
  .apertura__quadro{ animation: none; clip-path: inset(0 0 0 0); }
}
.apertura__sottotitolo{ animation-duration: 2.366s; animation-delay: 7.267s; color: var(--blu-primario); text-shadow: none; }
.header__wordmark{ color: var(--blu-primario); }

/* ============================================================
   REGOLA DEI TRE BLU — applicata ai componenti di style.css (v2)
   (vedi le tre variabili --blu-pieno / --blu-piccolo / --blu-linea in cima)
   - riempimento grande  -> --blu-pieno    (footer, .btn--primario, .btn--accento)
   - riempimento piccolo -> --blu-piccolo  (vedi i singoli componenti sopra + questi)
   - linea / contorno    -> --blu-linea
   I bottoni grandi ("Prenota", "Continua", "Prenota suite ...") usano gia'
   --blu-primario = --blu-pieno: nessuna riga in piu' serve.
   ============================================================ */
.menu-laterale__sottolineatura{ background: var(--blu-linea); }                       /* linea sotto l'icona del menu */
.scelta-riquadro[aria-pressed="true"]{ border-color: var(--blu-linea); box-shadow: inset 0 0 0 2px var(--blu-linea); } /* tipo di suite scelto: contorno di stato, 2,5-3px */
.contapezzi button:hover{ border-color: var(--blu-linea); }
.admin-tab button[aria-selected="true"]{ border-color: var(--blu-linea); }
.lang-btn[aria-current="true"]{ background: var(--blu-piccolo); }                     /* lingua scelta: riempimento piccolo */
.scorrimento-info__play::after{ background: color-mix(in srgb, var(--blu-piccolo) 85%, transparent); } /* pallino play: riempimento piccolo */
.footer .lang-btn[aria-current="true"]{ background: transparent; }                    /* nel footer resta contorno bianco (vedi sopra) */

/* ============================================================
   CALENDARIO: nota prezzi, pulsanti "Prenota suite ..." (30/09 sera)
   I pulsanti sono riempimenti grandi: .btn--accento = --blu-pieno.
   ============================================================ */
.cal-nota{ margin: 4px 0 0; }
.cal-azioni{ margin-top: 20px; }
.cal-azioni:empty{ display: none; }
.cal-azioni{ display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.cal-azione{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cal-azione__tot{ font-size: 14px; color: var(--testo-secondario); }
.cal-nessuna{ margin: 0; font-size: 16px; max-width: 52ch; }
.cal-nessuna a{ color: var(--blu-pieno); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: 3px; }
@media (max-width: 479px){
  .cal-azione{ width: 100%; }
  .cal-azione .btn{ width: 100%; text-align: center; }
}

/* Pagina Prenota: scelta del tipo di suite (singola / doppia) */
.scelta-suite-griglia{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 520px; margin: 20px 0 32px; }
.scelta-suite-griglia .scelta-riquadro{ padding: 10px; font-size: 15px; }

/* ============================================================
   PAGINE COLAZIONI E APERITIVI: niente menu, solo una descrizione
   elegante di come funziona (30/09 sera). Testo largo al massimo
   ~60 caratteri per riga, tanto spazio bianco.
   ============================================================ */
.come-funziona{ max-width: 60ch; }
.come-funziona p{ margin: 0 0 14px; font-size: 18px; line-height: 1.75; color: var(--testo); }
.come-funziona .invito{ margin-top: 28px; }
.invito__riga{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.invito__riga span{ color: var(--testo-secondario); }
@media (min-width: 900px){ .come-funziona p{ font-size: 19px; } }