/*
 * Prima schermata della home.
 *
 * Caricato dopo atmosfera.css e solo sulla home, quindi qui si riscrive
 * l'hero senza toccare i fogli condivisi. Questo file e l'unico posto in
 * cui la prima schermata viene composta e animata: fotografia a tutto
 * schermo, barra di navigazione trasparente appoggiata sulla foto (menu
 * a sinistra, logo al centro geometrico della finestra, telefono e
 * lingue a destra), titolo editoriale allineato a sinistra e barra di
 * prenotazione compatta in fondo, dentro la prima schermata.
 *
 * Come nel resto del sito si animano soltanto "opacity" e "transform":
 * nessuna proprieta che sposta il testo, quindi la pagina non balla
 * mentre entra.
 */

/* ==================================================================
 * 1. L'hero occupa la prima schermata
 *
 * Colonna in verticale: barra in alto, titolo nello spazio che avanza,
 * modulo di prenotazione in fondo. Niente posizionamenti assoluti da
 * rincorrere quando cambia l'altezza della finestra.
 * ================================================================== */

.hotel-home .hotel-hero {
  /* Altezza della barra di navigazione e della fascia di prenotazione:
     nessuna delle due occupa spazio nella colonna, ma il titolo deve
     lasciare libere tutte e due, quindi le somma nel proprio
     riempimento. */
  --cds-topbar-h: 88px;
  /* Due righe, ma non due piani separati: la fotografia le attraversa
     tutte e due, la fascia di prenotazione occupa solo la seconda e le
     sale sopra.

     Prima la fotografia stava nella sola prima riga: la fascia non la
     copriva, ma le toglieva un centinaio di pixel di altezza, e con
     "object-fit: cover" quei pixel in meno diventano un ritaglio piu
     stretto — lo scatto arrivava mozzato in basso. Adesso la
     fotografia e alta quanto tutta la prima schermata e la fascia le
     entra davanti, salendo da sotto il bordo come nella clip.

     Il vantaggio di tenere due righe invece di sovrapporre tutto e che
     il titolo si centra da solo nella prima: non serve sapere quanto e
     alta la fascia, che sul telefono diventa una griglia di campi alta
     il triplo che sul computer. */
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  /* Stringendo la finestra sul computer la prima schermata si accorcia
     insieme alla larghezza. Serve alla fotografia: "object-fit: cover"
     ingrandisce il ritaglio ogni volta che il riquadro si allontana
     dalle proporzioni dello scatto, e senza questo, tirando la finestra
     verso sinistra, l'immagine si ingrandiva sempre di piu. Resta un
     minimo, quindi l'hero non diventa mai una fascia bassa, e resta un
     "min-height": se il contenuto e piu alto, cresce. */
  min-height: max(560px, min(100svh, 62vw + 140px));
  /* La banda entra da sotto il bordo: finche scorre non deve vedersi
     oltre la prima schermata. Quando si apre il calendario il taglio
     si toglie (regola in fondo al foglio), cosi il riquadro si vede
     intero anche se sconfina. */
  overflow: hidden;
  background: var(--ink, #101a24)
}

/* Fotografia, velo, barra di navigazione e alone attraversano tutte e
   due le righe: sono la prima schermata intera, fascia compresa. */
.hotel-home .hotel-hero>.hotel-hero-foto,
.hotel-home .hotel-hero>.hotel-hero-shade,
.hotel-home .hotel-hero>.hotel-hero-film,
.hotel-home .hotel-hero>.hotel-topbar,
.hotel-home .hotel-hero::after {
  grid-row: 1 / -1;
  grid-column: 1
}

/* Il titolo resta nella prima riga: cosi si centra nello spazio che la
   fascia gli lascia, a qualunque larghezza di finestra. */
.hotel-home .hotel-hero>.hotel-hero-content {
  grid-row: 1;
  grid-column: 1
}

/* La fascia occupa la seconda riga e si disegna sopra la fotografia,
   che le passa dietro. */
.hotel-home .hotel-hero>.hotel-booking-wrap {
  grid-row: 2;
  grid-column: 1
}

/* La fotografia: riempie sempre la schermata senza deformarsi. Il
   soggetto (la stella del logo sulla facciata) sta nel terzo sinistro,
   percio il ritaglio tiene il centro e su schermi stretti si sposta
   verso sinistra per non perderlo. */
.hotel-home .hotel-hero-foto,
.hotel-home .hotel-hero-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il ritaglio si sposta verso la facciata mentre la finestra si
     stringe. Senza transizione: "object-position" non e una proprieta
     che la scheda grafica sa animare da sola, e farla scorrere su una
     fotografia larga 1672 pixel voleva dire ridisegnarla a ogni
     fotogramma mentre si trascina il bordo della finestra. */
  object-position: 50% 48%
}

/* Le scene dopo la prima. Stanno impilate sopra alla facciata
   nell'ordine in cui compaiono nel documento — ognuna sopra quella
   che la precede — e restano spente finche il JavaScript non da loro
   il turno. Senza JavaScript, o con "riduci animazioni", non si
   accendono mai e la prima schermata resta la sola fotografia della
   facciata: non e mai vuota.

   Il selettore nomina tutte e due le classi apposta: le regole di
   ritaglio qui sotto valgono per ogni ".hotel-hero-foto" e arrivano
   dopo nel foglio, quindi a parita di peso vincerebbero loro. */
.hotel-home .hotel-hero-foto.hotel-hero-scena {
  opacity: 0;
  /* Nove decimi di secondo: la dissolvenza deve stare comoda dentro i
     tre secondi di ogni scena, altrimenti la sequenza sembra sempre a
     meta strada fra due fotografie. */
  transition: opacity .9s var(--ease-soft);
  pointer-events: none;
  /* Queste fotografie hanno il soggetto al centro, quindi il ritaglio
     resta centrato a ogni larghezza invece di scivolare verso sinistra
     come fa quello della facciata, dove la stella sta nel terzo
     sinistro. */
  object-position: 50% 50%
}

.hotel-home .hotel-hero-foto.hotel-hero-scena.e-in-onda {
  opacity: 1
}

@media (max-width: 1200px) {
  .hotel-home .hotel-hero-foto,
  .hotel-home .hotel-hero-film {
    object-position: 46% 49%
  }
}

@media (max-width: 980px) {
  .hotel-home .hotel-hero-foto,
  .hotel-home .hotel-hero-film {
    object-position: 42% 50%
  }
}

/* Velo: la barra di navigazione non ha piu un fondo suo, quindi la
   leggibilita del menu bianco la garantisce questa fascia scura in
   cima, che si spegne entro un quinto dell'altezza. Al centro un alone
   morbido dietro al titolo; in fondo un ultimo scuro leggero.

   Il velo e stato alleggerito: la fotografia arrivava spenta perche
   sommava tre scuri, la fascia alta, l'alone centrale e il fondo, e
   nel mezzo restava poco della luce del mare. Adesso l'alone centrale
   e quasi la meta e il fondo non deve piu reggere la fascia di
   prenotazione, che ha un fondo bianco suo. Restano invece pieni i
   primi otto centesimi, che sono quelli che tengono leggibile il menu
   bianco. */
.hotel-home .hotel-hero-shade {
  z-index: 1;
  background:
    linear-gradient(180deg,
      #0b1219a6 0%,
      #0b121963 8%,
      #0b12190f 22%,
      #0b121912 48%,
      #0b12192e 84%,
      #0b12194d 100%),
    radial-gradient(52% 38% at 34% 56%, #0b121938 0%, #0b12191a 54%, #0000 80%)
}

/* Dalla seconda scena in avanti il velo si alza di poco. La prima
   fotografia e stata scelta anche per il titolo che le sta sopra, le
   altre no: sotto a una stessa parola il fondo passa dal muro chiaro
   dell'insegna al cielo del tramonto, e il titolo deve restare la cosa
   piu leggibile della pagina. Il velo che atmosfera.css metteva qui
   era pero tarato sull'hero scuro di prima e spegneva del tutto le
   inquadrature. Questo e lo stesso disegno del velo fermo, con una
   decina di punti di scuro in piu e l'alone centrale portato sotto al
   titolo, che ora sta in mezzo. */
.hotel-home .hotel-hero-scena.e-in-onda~.hotel-hero-shade {
  background:
    linear-gradient(180deg,
      #0b1219b8 0%,
      #0b121970 8%,
      #0b12191c 22%,
      #0b12191f 48%,
      #0b12193d 84%,
      #0b12195e 100%),
    radial-gradient(62% 46% at 50% 50%, #0b121973 0%, #0b121942 48%, #0b12191a 68%, #0000 86%)
}

/* Sopra a un'immagine che cambia le scritte hanno bisogno di un
   contorno d'ombra un poco piu pieno. */
.hotel-home .hotel-hero-scena.e-in-onda~.hotel-hero-content h1 {
  text-shadow: 0 2px 10px #0b1219bf, 0 12px 46px #0b1219a6
}

.hotel-home .hotel-hero-scena.e-in-onda~.hotel-hero-content>p:not(.hotel-eyebrow) {
  text-shadow: 0 2px 7px #0b1219cc, 0 10px 34px #0b1219a6
}

/* La fotografia si accende un poco: alzare la luce sullo scatto rende
   il mare e il cielo, mentre alzarla sul velo schiarirebbe anche le
   scritte bianche. E' un filtro fermo, applicato una volta sola: non
   si ricalcola mentre la pagina scorre. */
.hotel-home .hotel-hero-foto,
.hotel-home .hotel-hero-film {
  filter: brightness(1.09) contrast(1.03) saturate(1.06)
}

/* ==================================================================
 * 2. Barra di navigazione appoggiata sulla fotografia
 *
 * Nessun fondo, nessun bordo, nessuna ombra: solo i tre gruppi di
 * comandi sopra la foto, come nel riferimento. Il testo e bianco con
 * una piccola ombra, cosi resta leggibile anche a chi non ha piu una
 * vista da vent'anni, senza bisogno di una fascia chiara.
 * ================================================================== */

.hotel-home .hotel-topbar {
  display: block;
  /* Fuori dal flusso: la barra e appoggiata sopra la fotografia e non si
     prende nemmeno un pixel della colonna, quindi la prima schermata
     resta tutta fotografia. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: 0 0;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}

/* Griglia 1fr auto 1fr: la colonna centrale prende la larghezza del
   logo e le due laterali si dividono il resto in parti uguali. Il logo
   resta quindi al centro della finestra qualunque cosa ci sia ai lati. */
.hotel-home .hotel-topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(10px, 1.4vw, 20px);
  /* Come nel riferimento la barra non e incollata ai bordi: c'e aria
     sopra e di lato, cosi le voci respirano e la fotografia si legge
     anche dietro di loro. */
  width: min(100% - clamp(32px, 5vw, 88px), 1460px);
  min-height: 60px;
  padding-top: 22px;
  margin-inline: auto
}

/* Il vecchio layout metteva logo, lingue e menu in caselle con un nome
   ("logo", "lingue") e in colonne fisse. Qui la griglia e un'altra: se
   quei riferimenti restassero, il browser creerebbe colonne in piu e i
   pezzi finirebbero uno sopra l'altro. */
.hotel-home .hotel-topbar-inner>*,
.hotel-home .hotel-topbar .hotel-logo,
.hotel-home .hotel-topbar .hotel-nav,
.hotel-home .hotel-topbar .hotel-menu,
.hotel-home .hotel-topbar .lang-switcher {
  grid-area: auto
}

.hotel-home .hotel-topbar-lato {
  display: flex;
  align-items: center;
  min-width: 0
}

.hotel-home .hotel-topbar-menu {
  position: relative;
  justify-content: flex-start;
  gap: 10px
}

.hotel-home .hotel-topbar-utility {
  justify-content: flex-end;
  gap: 12px
}

/* --- Voci del menu, a sinistra --- */

.hotel-home .hotel-topbar .hotel-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  /* Distanze e corpo del testo seguono la larghezza della finestra: le
     sei voci si stringono un poco alla volta mentre si trascina il bordo
     e restano leggibili fino al punto in cui passano nel pannello. */
  gap: clamp(11px, 1.5vw, 22px);
  background: 0 0;
  padding: 0;
  box-shadow: none
}

.hotel-home .hotel-topbar .hotel-nav>a,
.hotel-home .hotel-topbar .hotel-nav>button {
  color: var(--color-on-dark);
  text-shadow: 0 1px 8px #0b1219a6;
  border-bottom: 0;
  padding: 6px 0;
  font-size: clamp(13px, 1.02vw, 15px);
  font-weight: 600;
  white-space: nowrap
}

.hotel-home .hotel-topbar .hotel-nav>a:hover,
.hotel-home .hotel-topbar .hotel-nav>a:focus-visible,
.hotel-home .hotel-topbar .hotel-nav>button:hover,
.hotel-home .hotel-topbar .hotel-nav>button:focus-visible {
  color: var(--color-gold-light);
  border-bottom-color: #0000
}

/* --- Logo, al centro --- */

.hotel-home .hotel-topbar .hotel-logo {
  display: grid;
  justify-items: center;
  justify-self: center;
  align-self: center;
  gap: 2px;
  width: auto;
  height: auto;
  padding: 8px 0;
  background: 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none
}

.hotel-home .hotel-topbar .hotel-logo img {
  width: auto;
  height: clamp(38px, 3.5vw, 50px);
  filter: drop-shadow(0 2px 12px #0b121980)
}

.hotel-home .hotel-topbar .hotel-logo .logo-luogo {
  display: none
}

/* --- Telefono e lingue, a destra ---
   Restano i componenti chiari di sempre (pillola con bordo bianco,
   bandiere nei selettori): cambiano solo di una misura, perche la barra
   adesso e piu bassa. */

.hotel-home .hotel-topbar .hotel-hero-phone {
  padding: 10px 18px;
  font-size: 15px;
  /* Il numero resta su una riga sola: se va a capo la pillola diventa
     alta il doppio e la barra si sforma. */
  flex: 0 0 auto;
  white-space: nowrap
}

.hotel-home .hotel-topbar .hotel-hero-phone svg {
  width: 18px;
  height: 18px
}

.hotel-home .hotel-topbar .lang-switcher {
  gap: 5px;
  margin-left: 0
}

.hotel-home .hotel-topbar .lang-switcher-item {
  padding: 6px 10px;
  font-size: .76rem
}

.hotel-home .hotel-topbar .lang-switcher-item svg {
  width: 20px;
  height: 15px
}

.hotel-home .hotel-menu {
  color: var(--color-on-dark);
  place-items: center;
  width: 44px;
  height: 44px
}

/* ==================================================================
 * 3. Titolo e sottotitolo
 *
 * Impaginazione editoriale: colonna allineata a sinistra, seconda riga
 * del titolo rientrata e testo secondario incolonnato sotto di essa.
 * Il blocco sta nella meta bassa dell'hero, cosi sopra resta aria e la
 * fotografia si vede per intero.
 * ================================================================== */

.hotel-home .hotel-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Le scritte principali stanno al centro della fotografia: e il
     blocco che si legge per primo, quindi resta incolonnato con il
     logo e con il centro dell'immagine. */
  align-items: center;
  text-align: center;
  width: min(100% - 56px, 1180px);
  margin: 0 auto;
  /* Il rientro editoriale non serve piu a colonna centrata: resta la
     variabile perche le regole che seguono la usano. */
  --rientro: 0px;
  /* Il blocco sta al centro dello spazio che gli resta davvero libero:
     la prima riga meno la barra di navigazione, che e uno strato
     sovrapposto e non occupa posto nella colonna. Il riempimento va
     percio solo in alto. Mettendone altrettanto sotto — com'era prima —
     il blocco tornava al centro della riga intera, cioe una quarantina
     di pixel piu su del centro visibile: sopra il titolo restava meno
     aria che sotto il pulsante. */
  padding: var(--cds-topbar-h, 88px) 0 0
}

.hotel-home .hotel-hero-content h1 {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(29px, 3.2vw, 48px);
  line-height: 1.1;
  text-shadow: 0 2px 8px #0b1219a6, 0 10px 40px #0b12198f
}

/* Le due righe del titolo restano due blocchi: cosi entrano una dopo
   l'altra, ma incolonnate al centro. */
.hotel-home .hotel-hero-content h1>span {
  display: block
}

.hotel-home .hotel-hero-content h1>span+span {
  padding-left: var(--rientro)
}

.hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  padding-left: var(--rientro);
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.6;
  text-shadow: 0 2px 5px #0b1219b3, 0 8px 30px #0b121999
}

/* Anche il testo secondario entra riga per riga: ognuna e un blocco. */
.hotel-home .hotel-hero-content>p:not(.hotel-eyebrow)>span {
  display: block
}

.hotel-home .hotel-hero-actions {
  justify-content: center;
  margin-top: clamp(18px, 2.8vh, 30px);
  padding-left: var(--rientro)
}

/* Il pulsante resta quello di sempre: solo un poco piu discreto. */
.hotel-home .hotel-hero-actions .hotel-primary {
  padding: 15px 26px;
  font-size: 13px
}

/* ==================================================================
 * 4. Banda di prenotazione sotto la fotografia
 *
 * Come nel riferimento non e piu un riquadro appoggiato sopra la
 * fotografia: e una fascia a tutta larghezza, incollata al bordo basso
 * della prima schermata, che occupa una riga sua. La fotografia resta
 * intera e la banda non le toglie niente.
 *
 * La fascia e bianca come il resto della pagina: sopra ha un filo
 * d'oro sottile che chiude la fotografia, sotto continua il bianco.
 * Prima era una sfumatura alta tutta la fascia, dall'oro al crema, e
 * si vedeva finire a meta strada: il colore della banda e quello della
 * sezione che segue non coincidevano mai del tutto, e il passaggio
 * risultava disomogeneo. Un fondo unico e un filo netto tolgono il
 * problema alla radice.
 *
 * Il modulo dentro la banda e sempre lo stesso — arrivo, partenza,
 * adulti, camere, verifica disponibilita, stessi campi e stesso invio:
 * restano i campi chiari di sempre, che sul fondo chiaro si leggono
 * senza cambiare niente.
 * ================================================================== */

/* Il fondo della home e bianco pieno, come era in origine.
   La sfumatura non fa piu da tappeto continuo a tutta la pagina: si e
   spezzata in aloni morbidi, uno per gruppo di figure, che nascono
   dietro le fotografie e muoiono nel bianco (punto 4b qui sotto). Il
   bianco resta il fondo; il colore e solo la luce che ci cade sopra. */
.hotel-home {
  --cds-fondo-alto: #fff;
  --cds-fondo-basso: #fff;

  /* Il fondo della pagina in globals.css e dichiarato con la stessa
     forza di quello delle altre pagine: per cambiarlo solo qui serve
     "!important". */
  background-color: var(--color-surface, #fff) !important;
  background-image: none !important
}

/* La fascia non e piu un blocco bianco pieno: quello copriva l'ultima
   fetta di fotografia e la faceva sembrare tagliata. Adesso e un vetro
   scuro che nasce trasparente sul bordo alto e si chiude in basso: la
   spiaggia e la balaustra continuano a vedersi dentro la fascia, e
   l'occhio legge una prima schermata sola invece di una fotografia con
   una striscia appiccicata sotto.

   Lo scuro serve: sotto ci sono etichette bianche e caselle chiare, e
   sopra una fotografia che in quel punto e chiara e mossa. Niente
   sfocatura del fondo, che qui costerebbe un ridisegno a ogni
   fotogramma dello scorrimento: bastano due sfumature ferme. */
.hotel-home .hotel-booking-wrap {
  position: relative;
  z-index: 6;
  width: 100%;
  margin: 0;
  padding: clamp(14px, 2.2vh, 22px) clamp(20px, 4vw, 56px);
  background:
    linear-gradient(180deg, #0b121900 0%, #0b12197a 34%, #0b1219b3 100%);
  border-top: 0;
  box-shadow: none;
  scroll-margin-top: 20px
}

/* Sul bordo alto della fascia resta un filo di luce dorata, la stessa
   dell'alone dell'hero: e il segno che la fascia comincia, senza che
   serva una riga netta ne un cambio di fondo. */
.hotel-home .hotel-booking-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  background: linear-gradient(180deg, #eec97a2b 0%, #eec97a0d 44%, #eec97a00 100%);
  pointer-events: none
}

/* Il modulo perde il vetro sospeso: dentro la fascia sarebbe una
   seconda scatola dentro una scatola. Resta la stessa griglia. */
.hotel-home .hotel-booking-wrap .hotel-booking-bar {
  align-items: end;
  width: min(100%, 1240px);
  margin-inline: auto;
  padding: 0;
  background: 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none
}

/* La fascia e ferma: il sollevamento al passaggio del mouse serviva
   alla scheda sospesa, qui non c'e piu niente da sollevare. */
.hotel-home .hotel-booking-wrap .hotel-booking-bar:hover {
  transform: none
}

/* Sul vetro scuro le etichette diventano bianche, con una piccola
   ombra: sono scritte piccole e devono restare leggibili anche dove la
   fotografia sotto e chiara. */
.hotel-home .hotel-booking-wrap .hotel-booking-bar label {
  gap: 6px;
  padding: 0 14px;
  font-size: 11px;
  color: var(--color-on-dark, #fff);
  text-shadow: 0 1px 6px #0b1219a6;
  /* Le caselle avevano il fondo panna del modulo sospeso: dentro la
     fascia devono essere trasparenti, altrimenti restano cinque
     rettangoli piatti sopra la sfumatura. */
  background: 0 0;
  border-right-color: #ffffff2e
}

.hotel-home .hotel-booking-wrap .hotel-booking-bar label:first-of-type {
  padding-left: 0
}

/* --- I campi ---
   Restano gli stessi <input> e <select> chiari del resto del sito:
   sulla fascia chiara si leggono senza toccare ne fondo ne colore.
   Qui cambiano solo le misure, perche la fascia e piu bassa. */
.hotel-home .hotel-booking-wrap .hotel-booking-bar input,
.hotel-home .hotel-booking-wrap .hotel-booking-bar select {
  font-size: 15px
}

.hotel-home .hotel-booking-wrap .hotel-booking-bar input[type="date"],
.hotel-home .hotel-booking-wrap .hotel-booking-bar select {
  min-height: 46px;
  padding-block: 11px
}

/* Il pulsante passa all'oro: sul vetro scuro il nero pieno di prima
   spariva dentro il fondo, e questo e il comando che deve vedersi per
   primo di tutta la prima schermata. E' lo stesso oro del pulsante
   dell'hero, quindi la schermata non guadagna un colore nuovo. */
.hotel-home .hotel-booking-wrap .hotel-availability {
  height: 46px;
  margin-left: 14px;
  font-size: 12px;
  background: var(--color-gold-light, #eec97a);
  color: var(--ink, #101a24);
  border: 0;
  box-shadow: 0 12px 28px -14px #0b1219a6
}

.hotel-home .hotel-booking-wrap .hotel-availability:hover,
.hotel-home .hotel-booking-wrap .hotel-availability:focus-visible {
  background: #f3d896;
  color: var(--ink, #101a24)
}

/* Il modulo non e piu appeso sotto l'hero: la sezione che segue si
   prende da sola l'aria che prima arrivava da quel margine negativo. */
.hotel-home .hotel-services {
  padding-top: 76px
}

/* ==================================================================
 * 4b. Aloni di colore intorno alle figure
 *
 * Il fondo della pagina e bianco, ma bianco e basta vuol dire schermate
 * piatte. Il colore torna come luce, non come tappeto e non come
 * cornice: intorno a ogni gruppo di figure — le cinque tessere, le
 * schede delle camere, i tre banner, la scheda "Dove siamo" — si apre
 * un alone morbido che nasce dietro le fotografie e muore nel bianco
 * prima di toccare la sezione vicina.
 *
 * Perche funzioni devono valere tre cose:
 *
 * - l'alone finisce sempre in trasparente, quindi non crea mai un
 *   gradino di colore fra una fascia e l'altra: il bianco resta il
 *   fondo di tutta la pagina;
 * - e disegnato sulla sezione, non sull'elemento, cosi puo debordare
 *   dalle schede che hanno "overflow: hidden";
 * - i colori sono due soli, l'oro del marchio e il verde-mare della
 *   rosa dei venti, e nel punto piu carico non superano il 12% di
 *   opacita. Sopra quella soglia smettono di essere luce e tornano a
 *   essere una fascia colorata, cioe il difetto da cui si veniva.
 *
 * Le figure si staccano dal bianco con un'ombra calda invece che
 * grigia: e la stessa luce dell'alone, vista da sotto.
 * ================================================================== */

/* Regola di costruzione, da rispettare a ogni ritocco: l'ellisse deve
   spegnersi PRIMA del bordo della sezione, cioe la sua meta-larghezza
   non puo superare la distanza fra il centro e il bordo piu vicino, e
   lo stesso in verticale. Le sezioni della home sono larghe 1120-1220
   px dentro una finestra piu larga: se l'alone arriva ancora colorato
   al bordo del riquadro, sul bianco si vede lo spigolo e il risultato
   e un rettangolo, non una luce. */

/* L'ombra che la prima schermata lascia cadere sul bianco. Serve da
   quando la fascia di prenotazione e diventata un vetro scuro: senza,
   il suo bordo basso incontrava il bianco di colpo e si leggeva come un
   taglio netto.

   Sta su "main", che e largo quanto la finestra, e non sulla sezione
   delle tessere, che invece e larga 1220 pixel: li l'ombra si sarebbe
   fermata a meta strada dai bordi, lasciando due spigoli verticali. */
.hotel-home main {
  background: linear-gradient(180deg, #0b121926 0%, #0b12190f 38%, #0b121900 100%) 0 0 / 100% 104px no-repeat
}

/* Le cinque tessere: una sola pozza di luce calda dietro la fila. */
.hotel-home .hotel-services {
  background:
    radial-gradient(44% 40% at 50% 50%, #eec97a24 0%, #eec97a0d 54%, #eec97a00 100%),
    radial-gradient(20% 26% at 78% 74%, #2f7d6b12 0%, #2f7d6b00 100%)
}

/* Camere: il verde-mare sta dietro al titolo, l'oro dietro alle
   fotografie, cosi le due meta della sezione non sono uguali. */
.hotel-home .hotel-rooms {
  background:
    radial-gradient(22% 40% at 26% 48%, #2f7d6b14 0%, #2f7d6b00 100%),
    radial-gradient(24% 36% at 72% 58%, #eec97a26 0%, #eec97a0d 52%, #eec97a00 100%)
}

/* I tre banner: adesso le schede sono tre e uguali, quindi l'alone non
   segue piu una scheda sola. L'oro sta al centro, dietro la fila, e il
   verde, piu tenue, resta ai due lati: la luce accompagna il gruppo
   invece di indicare un riquadro. */
.hotel-home .hotel-banner-trio {
  background:
    radial-gradient(42% 44% at 50% 46%, #eec97a22 0%, #eec97a00 100%),
    radial-gradient(26% 30% at 10% 72%, #2f7d6b10 0%, #2f7d6b00 100%),
    radial-gradient(26% 30% at 90% 72%, #2f7d6b10 0%, #2f7d6b00 100%)
}

/* Recensioni e "Dove siamo": questa fascia e larga quanto la finestra,
   quindi l'alone puo uscire di lato senza lasciare spigoli; resta
   contenuto solo in altezza. */
.hotel-home .hotel-reviews-location {
  background:
    radial-gradient(46% 42% at 80% 50%, #eec97a24 0%, #eec97a0d 50%, #eec97a00 100%),
    radial-gradient(34% 34% at 8% 42%, #2f7d6b10 0%, #2f7d6b00 100%)
}

/* Nelle due fasce con fotografia il colore non fa da riga di
   separazione: e la fotografia stessa che sembra tingere il pannello
   di testo accanto. La luce parte dal confine e si spegne dentro il
   testo, quindi il pannello resta bianco dove ci sono le parole. */
.hotel-home .hotel-restaurant .hotel-split-copy {
  --cds-cucitura: #fff;
  background:
    radial-gradient(88% 120% at 100% 50%, #eec97a2b 0%, #eec97a0f 40%, #eec97a00 72%),
    #fff
}

.hotel-home .hotel-split-copy.warm {
  --cds-cucitura: #fff;
  background:
    radial-gradient(88% 120% at 0% 50%, #2f7d6b1c 0%, #2f7d6b0a 42%, #2f7d6b00 72%),
    #fff
}

/* La fascia scura di chiusura non ha un filo sopra: sale invece una
   luce dorata che si spegne nel bianco della sezione precedente, cosi
   il nero non arriva di colpo. */
.hotel-home .hotel-final {
  position: relative
}

.hotel-home .hotel-final::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 130px;
  background: linear-gradient(180deg, #eec97a00 0%, #eec97a14 62%, #eec97a2b 100%);
  pointer-events: none
}

/* Le figure si staccano dal bianco con un'ombra calda: sul bianco
   un'ombra grigia sporca, una dorata sembra luce riflessa. */
.hotel-home .hotel-service-card,
.hotel-home .hotel-room-card,
.hotel-home .hotel-banner,
.hotel-home .hotel-location {
  box-shadow:
    0 2px 6px #8a620914,
    0 26px 60px -32px #8a620966
}

.hotel-home .hotel-service-card:hover,
.hotel-home .hotel-room-card:hover {
  box-shadow:
    0 2px 8px #8a62091f,
    0 40px 80px -34px #8a620987
}

/* La scheda "Dove siamo" teneva un bordo pieno: sul bianco, con
   l'alone dietro, il bordo non serve piu. */
.hotel-home .hotel-location {
  border: 0
}

@media (max-width: 900px) {
  /* In colonna sola le fotografie stanno sopra il testo: la luce
     laterale cadrebbe di fianco al nulla, quindi scende dall'alto. */
  .hotel-home .hotel-restaurant .hotel-split-copy {
    background:
      radial-gradient(120% 70% at 50% 0%, #eec97a21 0%, #eec97a00 70%),
      #fff
  }

  .hotel-home .hotel-split-copy.warm {
    background:
      radial-gradient(120% 70% at 50% 0%, #2f7d6b14 0%, #2f7d6b00 70%),
      #fff
  }
}

/* ==================================================================
 * 5. Apertura
 *
 * Ricalcata sulla clip di riferimento: la fotografia e la barra di
 * navigazione ci sono gia, poi sale il titolo, poi il testo secondario
 * una riga alla volta, poi il pulsante e per ultima la barra di
 * prenotazione, che entra dal basso. Tutto fermo entro un secondo e
 * mezzo. Movimenti piccoli, nessun rimbalzo.
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hotel-home .hotel-topbar,
  .hotel-home .hotel-hero-content h1>span,
  .hotel-home .hotel-hero-content>p:not(.hotel-eyebrow)>span,
  .hotel-home .hotel-hero-actions,
  .hotel-home .hotel-booking-wrap {
    animation: cds-apertura-sale .58s cubic-bezier(.22, .61, .36, 1) both
  }

  /* 1. La barra di navigazione scende appena. */
  .hotel-home .hotel-topbar {
    animation-name: cds-apertura-scende;
    animation-duration: .45s;
    animation-delay: .05s
  }

  /* 2. e 3. Le due righe del titolo salgono una dopo l'altra: e questo
     che fa leggere il titolo come una frase che si scrive, non come un
     blocco che compare tutto insieme. */
  .hotel-home .hotel-hero-content h1>span {
    animation-delay: .16s
  }

  .hotel-home .hotel-hero-content h1>span+span {
    animation-delay: .30s
  }

  /* 4. e 5. Il testo secondario, sempre una riga alla volta, con uno
     spostamento piu corto: entra piu leggero del titolo. */
  .hotel-home .hotel-hero-content>p:not(.hotel-eyebrow)>span {
    animation-name: cds-apertura-riga;
    animation-duration: .5s;
    animation-delay: .52s
  }

  .hotel-home .hotel-hero-content>p:not(.hotel-eyebrow)>span+span {
    animation-delay: .64s
  }

  /* 6. Il pulsante. */
  .hotel-home .hotel-hero-actions {
    animation-name: cds-apertura-riga;
    animation-duration: .5s;
    animation-delay: .8s
  }

  /* 7. Per ultima la banda di prenotazione: entra tutta intera da
     sotto il bordo basso, senza sbiadire, come nel riferimento. Poi i
     campi si accendono uno dopo l'altro. Finisce entro 1,7 secondi. */
  .hotel-home .hotel-booking-wrap {
    animation-name: cds-apertura-banda;
    animation-duration: .46s;
    animation-delay: .98s
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar>* {
    animation: cds-apertura-riga .4s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: 1.2s
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar>*:nth-child(2) {
    animation-delay: 1.26s
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar>*:nth-child(3) {
    animation-delay: 1.32s
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar>*:nth-child(4) {
    animation-delay: 1.38s
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar>*:nth-child(5) {
    animation-delay: 1.44s
  }
}

@keyframes cds-apertura-scende {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-apertura-sale {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-apertura-riga {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* La banda e alta quanto e alta: si sposta della propria altezza,
   cosi parte esattamente da sotto il bordo dello schermo. */
@keyframes cds-apertura-banda {
  from {
    transform: translate3d(0, 100%, 0)
  }

  to {
    transform: none
  }
}

/* ==================================================================
 * 6. Schermi stretti
 *
 * Le voci del menu si rimpiccioliscono da sole insieme alla finestra
 * (misure fluide nel punto 2): passano nel pannello a scomparsa solo
 * sotto i 1180px, cioe quando davvero non ci stanno piu. Cosi
 * trascinando il bordo della finestra non spariscono di colpo a meta
 * strada, e il passaggio al pulsante con le tre righe arriva alla fine
 * di una riduzione graduale.
 * ================================================================== */

@media (max-width: 1179px) {
  .hotel-home .hotel-topbar-inner {
    width: calc(100% - 56px);
    column-gap: 12px;
    min-height: 56px;
    padding-top: 18px
  }

  /* Il pannello resta nel documento e si apre con un movimento invece di
     comparire di colpo. Da chiuso e "visibility: hidden", quindi non si
     puo cliccare ne raggiungere con il tasto di tabulazione: per chi
     naviga da tastiera si comporta come se non ci fosse. */
  .hotel-home .hotel-topbar .hotel-nav {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 7;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(320px, 100vw - 32px);
    padding: 10px;
    background: var(--color-surface-warm-alt);
    border-radius: 16px;
    box-shadow: 0 18px 40px #101a2440;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -10px, 0);
    transform-origin: top left;
    transition:
      opacity .26s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
      transform .3s var(--ease-out, cubic-bezier(.2, .7, .2, 1)),
      visibility .3s
  }

  .hotel-home .hotel-topbar .hotel-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none
  }

  @media (prefers-reduced-motion: reduce) {
    .hotel-home .hotel-topbar .hotel-nav {
      transition: none
    }
  }

  /* Dentro il pannello chiaro il testo torna scuro. */
  .hotel-home .hotel-topbar .hotel-nav>a,
  .hotel-home .hotel-topbar .hotel-nav>button {
    color: var(--color-text);
    text-shadow: none;
    text-align: left;
    padding: 13px 12px;
    font-size: 17px
  }

  .hotel-home .hotel-menu {
    display: grid;
    /* Nei fogli condivisi il pulsante ha "margin-left: auto" e finirebbe
       in mezzo alla barra: qui resta appoggiato a sinistra, come nel
       riferimento. */
    margin-left: 0;
    margin-right: auto
  }

  .hotel-home .hotel-hero {
    --cds-topbar-h: 74px
  }

  .hotel-home .hotel-hero-content {
    width: calc(100% - 36px)
  }

  /* La banda resta a tutta larghezza: si stringe solo il riempimento. */
  .hotel-home .hotel-booking-wrap {
    padding-inline: clamp(16px, 3vw, 32px)
  }
}

/* Sotto i 1180 pixel, cioe da dove il menu passa nel pannello, il
   telefono e le quattro bandiere devono stare nella meta destra senza
   toccare il logo: restano gli stessi componenti, con le bandiere senza
   sigla e la pillola del telefono di una misura piu piccola. Senza
   questo il numero andava a capo e la barra diventava alta il doppio. */
@media (max-width: 1179px) {
  .hotel-home .hotel-topbar .hotel-hero-phone {
    padding: 8px 13px;
    font-size: 14px
  }

  .hotel-home .hotel-topbar .hotel-hero-phone svg {
    width: 16px;
    height: 16px
  }

  .hotel-home .hotel-topbar .lang-switcher-item span {
    display: none
  }

  .hotel-home .hotel-topbar .lang-switcher-item {
    padding: 5px 7px
  }

  .hotel-home .hotel-topbar .lang-switcher-item svg {
    width: 18px;
    height: 13px
  }
}

/* Ancora piu stretto: il numero deve restare su una riga sola il piu a
   lungo possibile, altrimenti la barra si alza e non e piu una fascia
   sottile appoggiata alla fotografia. */
@media (max-width: 860px) {
  .hotel-home .hotel-topbar .hotel-hero-phone {
    padding: 7px 11px;
    gap: 7px;
    font-size: 13px
  }

  .hotel-home .hotel-topbar .hotel-hero-phone svg {
    width: 15px;
    height: 15px
  }

  .hotel-home .hotel-topbar .lang-switcher {
    gap: 4px
  }

  .hotel-home .hotel-topbar .lang-switcher-item {
    padding: 4px 6px
  }

  .hotel-home .hotel-topbar .lang-switcher-item svg {
    width: 17px;
    height: 12px
  }
}

@media (max-width: 680px) {
  /* Sul telefono la barra resta staccata dai bordi, solo di meno:
     poco piu di un dito d'aria sopra e ai lati, e i pezzi rimpiccioliti
     quel tanto che basta perche stiano tutti su una riga. */
  .hotel-home .hotel-topbar-inner {
    width: calc(100% - 32px);
    column-gap: 6px;
    min-height: 50px;
    padding-top: 14px
  }

  .hotel-home .hotel-topbar .hotel-logo {
    padding: 6px 0
  }

  .hotel-home .hotel-topbar .hotel-logo img {
    height: 34px
  }

  /* Sul telefono le quattro bandiere e il logo si dividono una riga
     sola: senza queste misure ridotte il gruppo delle lingue finirebbe
     sopra il logo. Restano i selettori di sempre, solo piu piccoli. */
  .hotel-home .hotel-topbar-utility {
    gap: 8px
  }

  .hotel-home .hotel-topbar .lang-switcher {
    gap: 4px
  }

  .hotel-home .hotel-topbar .lang-switcher-item {
    padding: 4px 5px
  }

  .hotel-home .hotel-topbar .lang-switcher-item svg {
    width: 16px;
    height: 12px
  }

  /* Il telefono in alto sparisce: in fondo allo schermo c'e gia la
     barra fissa con "Chiama", e due volte lo stesso pulsante nella
     stessa schermata confonde. */
  .hotel-home .hotel-topbar .hotel-hero-phone {
    display: none
  }

  .hotel-home .hotel-menu {
    width: 42px;
    height: 42px
  }

  /* Sul telefono la prima schermata deve restare una fotografia, non un
     muro di scritte. L'hero prende quasi tutta l'altezza dello schermo:
     cosi sopra il titolo e sotto il modulo resta fotografia da vedere, e
     l'ultimo dito di schermo lascia intravedere la sezione che segue,
     che e il modo piu semplice per far capire che la pagina continua. */
  .hotel-home .hotel-hero {
    --cds-topbar-h: 64px;
    min-height: 88svh
  }

  .hotel-home .hotel-hero-content {
    padding-bottom: 20px
  }

  /* Il pulsante "Richiedi preventivo" sparisce dalla prima schermata:
     in fondo allo schermo c'e gia "Preventivo" nella barra fissa, e qui
     toglieva una riga alla fotografia mettendosi in concorrenza con
     "Verifica disponibilita", che e il comando della prima schermata. */
  .hotel-home .hotel-hero-actions {
    display: none
  }

  /* La barra fissa in fondo allo schermo non arriva piu a coprire il
     pulsante: l'hero si ferma a 88svh, quindi il modulo finisce un
     centinaio di pixel piu su della barra. Lo spazio che teneva
     libero, adesso, e solo una fascia scura vuota sotto il pulsante. */
  .hotel-home .hotel-booking-wrap {
    padding: 12px 16px 18px
  }

  /* Sul telefono la banda deve restare bassa: la fotografia sopra ha
     poca altezza e la fascia non deve mangiarsela. */
  .hotel-home .hotel-booking-wrap .hotel-booking-bar {
    gap: 10px 0
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar label {
    gap: 4px;
    padding: 0 10px
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar input[type="date"],
  .hotel-home .hotel-booking-wrap .hotel-booking-bar select {
    min-height: 42px;
    padding-block: 9px
  }

  .hotel-home .hotel-booking-wrap .hotel-booking-bar label:nth-of-type(odd) {
    padding-left: 0
  }

  .hotel-home .hotel-booking-wrap .hotel-availability {
    height: 44px;
    margin: 2px 0 0
  }

  /* Su schermo stretto il rientro della seconda riga mangerebbe mezza
     larghezza: le righe tornano incolonnate a sinistra. */
  .hotel-home .hotel-hero-content h1 {
    max-width: none;
    font-size: 27px
  }

  .hotel-home .hotel-hero-content {
    --rientro: 0px
  }

  .hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
    margin-top: 14px;
    font-size: 15px
  }

  /* Su schermo stretto il ritaglio si sposta verso la facciata: la
     stella del logo resta dentro l'inquadratura. */
  .hotel-home .hotel-hero-foto,
  .hotel-home .hotel-hero-film {
    object-position: 36% 50%
  }
}

/* ==================================================================
 * 7. Calendario della barra di prenotazione
 *
 * Il riquadro di sistema del browser e grigio, grande e diverso su
 * ogni computer: al suo posto si apre un calendario nostro, piccolo,
 * color panna con i blu e gli ori del marchio. I due campi restano
 * gli stessi <input type="date"> di prima — stesso nome, stesso
 * valore, stesso vincolo sul minimo — quindi il modulo continua a
 * funzionare esattamente come prima; qui cambia solo cio che si vede.
 *
 * Le regole valgono soltanto quando il JavaScript ha acceso il
 * calendario (classe "cds-data-campo"): senza JavaScript il campo
 * resta quello di serie, con il suo riquadro di sistema.
 * ================================================================== */

/* L'hero e un piano a se (isolation: isolate), quindi tutto quello che
   contiene resta sotto le sezioni che seguono. Finche il calendario e
   aperto il piano dell'hero sale sopra il resto della pagina: cosi il
   riquadro si vede intero anche quando sconfina sotto la prima
   schermata. Resta sotto la barra fissa del telefono (z-index 20). */
.hotel-home .hotel-hero.cds-cal-aperto {
  z-index: 12;
  /* L'hero taglia quello che esce dai suoi bordi (serve alla banda che
     entra dal basso): finche il calendario e aperto il taglio si toglie,
     altrimenti il riquadro resterebbe mozzato. */
  overflow: visible
}

/* Il calendario e appeso alla casella del campo, cosi si apre
   incolonnato sotto la data a cui appartiene. Finche e aperto la
   casella sale sopra le altre: senza questo, gli altri campi e il
   pulsante "Verifica disponibilita", che nel codice vengono dopo, si
   disegnerebbero sopra il riquadro. */
.hotel-home .hotel-booking-bar label {
  position: relative
}

.hotel-home .hotel-booking-bar label.cds-cal-attivo {
  z-index: 30
}

/* Il campo diventa un pulsante: si legge la data, si clicca, si apre
   il calendario. L'icona di serie sparisce e torna come disegno di
   fondo, nello stesso posto di prima. */
.hotel-home .hotel-booking-bar input[type="date"].cds-data-campo {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1219' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='4'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3Ccircle cx='12' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3Ccircle cx='15.5' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px
}

.hotel-home .hotel-booking-bar input[type="date"].cds-data-campo::-webkit-calendar-picker-indicator {
  display: none
}

.hotel-home .hotel-booking-bar input[type="date"].cds-data-campo::-webkit-inner-spin-button,
.hotel-home .hotel-booking-bar input[type="date"].cds-data-campo::-webkit-clear-button {
  display: none
}

/* Campo aperto: stesso oro del fuoco, cosi si vede subito a quale
   delle due date appartiene il calendario. */
.hotel-home .hotel-booking-bar input[type="date"].cds-data-campo[aria-expanded="true"] {
  background-color: #fff;
  border-color: var(--color-gold, #8a6209);
  box-shadow: 0 0 0 4px #eec97a4d
}

/* --- Il riquadro --- */

.cds-cal {
  position: absolute;
  top: calc(100% + 10px);
  left: 16px;
  z-index: 30;
  width: 292px;
  padding: 14px 14px 12px;
  background: #fffdf8;
  color: var(--ink, #101a24);
  border: 1px solid #101a2414;
  border-radius: 16px;
  box-shadow: 0 26px 60px -22px #101a2473, 0 2px 6px #101a2414;
  font-size: 13px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  cursor: default;
  -webkit-user-select: none;
  user-select: none
}

/* Se sotto non c'e spazio (il campo e in fondo alla prima schermata),
   il JavaScript mette questa classe e il calendario si apre sopra. */
.cds-cal.cds-cal-sopra {
  top: auto;
  bottom: calc(100% + 10px)
}

@media (prefers-reduced-motion: no-preference) {
  .cds-cal {
    animation: cds-cal-apre .18s cubic-bezier(.22, .61, .36, 1) both
  }

  .cds-cal.cds-cal-sopra {
    animation-name: cds-cal-apre-sopra
  }
}

@keyframes cds-cal-apre {
  from {
    opacity: 0;
    transform: translate3d(0, -6px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-cal-apre-sopra {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* --- Mese e frecce --- */

.cds-cal-head {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px
}

.cds-cal-titolo {
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #101a24);
  text-transform: capitalize;
  white-space: nowrap
}

.cds-cal-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: 0 0;
  color: var(--ink, #101a24);
  border: 1px solid #101a2417;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s
}

.cds-cal-nav svg {
  width: 15px;
  height: 15px
}

.cds-cal-nav:hover:not([disabled]) {
  background: #101a240a;
  border-color: var(--color-gold, #8a6209);
  color: var(--color-gold-deep, #6f4e05)
}

.cds-cal-nav[disabled] {
  opacity: .28;
  cursor: default
}

/* --- Iniziali dei giorni --- */

.cds-cal-settimana,
.cds-cal-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px
}

.cds-cal-settimana {
  margin-bottom: 4px
}

.cds-cal-settimana span {
  padding: 4px 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #101a2480
}

/* --- I giorni --- */

.cds-cal-giorno {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  background: 0 0;
  color: var(--ink, #101a24);
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s, color .18s
}

.cds-cal-giorno.cds-cal-vuoto {
  visibility: hidden;
  cursor: default
}

.cds-cal-giorno:hover:not([disabled]):not(.cds-cal-scelto) {
  background: #eec97a3d
}

/* Oggi: un filo d'oro sotto il numero. */
.cds-cal-giorno.cds-cal-oggi:not(.cds-cal-scelto) {
  box-shadow: inset 0 -2px 0 var(--color-gold-light, #eec97a)
}

/* Il giorno scelto: pieno blu, come il resto del sito. */
.cds-cal-giorno.cds-cal-scelto {
  background: var(--ink, #101a24);
  color: #fffdf8;
  font-weight: 700
}

.cds-cal-giorno[disabled] {
  color: #101a2438;
  cursor: default
}

.cds-cal-giorno:focus-visible {
  outline: 2px solid var(--color-gold, #8a6209);
  outline-offset: 1px
}

/* Su schermo stretto la barra si dispone su due colonne e la casella
   di un campo e troppo stretta per sette giorni leggibili: il riquadro
   allora esce dalla casella — verso destra sotto "Arrivo", verso
   sinistra sotto "Partenza" — e resta comunque dentro lo schermo. */
@media (max-width: 680px) {
  .cds-cal {
    left: 0;
    right: auto;
    width: min(288px, 100vw - 28px);
    padding: 12px 10px 10px
  }

  .hotel-home .hotel-booking-bar label:nth-of-type(2) .cds-cal {
    left: auto;
    right: 0
  }
}

/* I due pulsanti del riquadro della SPA — prenotare e vedere il filmato —
   stanno affiancati, come chiede la scheda. Fra i 1000 e i 1500 pixel la
   colonna e' stretta e il primo, che e' lungo, li mandava a capo: qui si
   stringono i fianchi e si accorcia la spaziatura fra le lettere, quel
   tanto che basta per restare sulla stessa riga. Se in una lingua il
   testo e' comunque troppo lungo vanno a capo da soli, senza rompere
   niente: la riga resta a capo libero. */
@media (min-width: 1001px) and (max-width: 1500px) {
  .hotel-home .hotel-banner-spa .hotel-banner-azioni {
    gap: 10px 12px
  }

  .hotel-home .hotel-banner-spa .hotel-banner-azione {
    padding-left: 17px;
    padding-right: 17px;
    letter-spacing: .02em
  }
}