/* Stili del sito. Modifica qui. */

:root {
  --color-surface: #fff;
  --color-surface-warm: #d8d0bd;
  --color-surface-warm-alt: #cec8b8;
  --color-surface-secondary: #c1cdb7;
  --color-accent: #8c9a8d;
  --color-text: #111;
  --color-on-dark: #fff
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url("../fonts/EncodeSansExpanded-Regular.ttf")format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url("../fonts/EncodeSansExpanded-Medium.ttf")format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url("../fonts/EncodeSansExpanded-SemiBold.ttf")format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url("../fonts/EncodeSansExpanded-Bold.ttf")format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url("../fonts/EncodeSansExpanded-ExtraBold.ttf")format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

/* Sul telefono si ingrandisce solo allargando due dita sullo schermo.
   Il doppio colpetto, che nei browser da telefono ingrandisce di suo, qui
   non fa piu nulla: capitava di farlo senza volerlo scorrendo le
   fotografie o aprendo il menu, e la pagina restava ingrandita di
   traverso. "manipulation" toglie solo quello: lo scorrimento resta, e
   soprattutto resta l'ingrandimento con due dita, che a chi ci vede poco
   non si puo togliere. Da non sostituire con "user-scalable=no" nel
   viewport, che vieta di ingrandire del tutto. */
html {
  touch-action: manipulation
}

body {
  background: var(--color-surface);
  color: var(--color-text);
  margin: 0;
  font-family: Arial,Helvetica,sans-serif
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1,
h2 {
  font-family: Georgia,Times New Roman,serif;
  font-weight: 400
}

h2 {
  font-size: clamp(2rem,3.4vw,3.6rem);
  line-height: 1.05
}

.wrap {
  width: min(1180px,100% - 48px);
  margin-inline: auto
}

.light {
  color: var(--color-on-dark)
}

.button {
  min-height: 48px;
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0 25px;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex
}

.coral,
.coral:hover {
  background: var(--color-text)
}

.site-header {
  background: var(--color-on-dark);
  z-index: 20;
  position: relative
}

.utility {
  min-height: 30px;
  flex-wrap: wrap;
  row-gap: 2px;
  padding-block: 4px;
  color: var(--color-on-dark);
  background: var(--color-text);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: none;
  padding-inline: max(24px,50vw - 590px);
  font-size: .7rem;
  display: flex
}

.utility span {
  align-items: center;
  gap: 7px;
  display: flex
}

.nav-wrap {
  justify-content: space-between;
  align-items: center;
  min-height: 96px;
  padding-block: 10px;
  display: flex
}

.logo img {
  width: 200px;
  height: auto;
  display: block
}

/* La localita sotto il logo: chi arriva da una ricerca deve capire subito
   dove si trova l'hotel, senza cercarla in fondo alla pagina. */
.logo-luogo,
.hotel-home .hotel-logo .logo-luogo {
  color: var(--color-gold-deep,#6f4e05);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 4px;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.2;
  display: block
}

.logo {
  text-decoration: none;
  display: block
}

.nav-wrap nav {
  align-items: center;
  gap: 26px;
  display: flex
}

.nav-wrap nav>a {
  color: var(--color-text);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  text-decoration: none
}

.nav-wrap nav>a:hover {
  color: var(--color-text)
}

.nav-wrap nav .nav-cta {
  color: var(--color-on-dark)
}

/* Il bottone delle tre righe: giallo ocra come il resto del marchio. Prima
   l'icona arrivava come immagine e la tingeva il filtro di .ui-icon, che la
   rendeva blu. */
.menu {
  color: var(--color-gold,#8a6209);
  background: 0 0;
  border: 0;
  display: none
}

.menu .menu-icon {
  width: 28px;
  height: 28px;
  display: block
}

.final-cta {
  background: var(--color-text);
  color: var(--color-on-dark);
  padding: 42px 0
}

.final-cta .wrap {
  justify-content: space-between;
  align-items: center;
  display: flex
}

.final-cta h2 {
  margin-bottom: 5px;
  font-size: 2rem
}

.final-cta p {
  color: var(--color-surface-secondary);
  margin: 0
}

footer {
  background: var(--color-on-dark);
  padding-top: 56px
}

.footer-grid {
  grid-template-columns: 1.5fr repeat(3,1fr);
  gap: 55px;
  display: grid
}

.footer-grid img {
  width: 180px
}

.footer-grid h3 {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem
}

.footer-grid p,
.footer-grid a {
  color: var(--color-text);
  font-size: .78rem;
  line-height: 1.8;
  text-decoration: none;
  display: block
}

.legal {
  border-top: 1px solid var(--color-accent);
  color: var(--color-text);
  margin-top: 38px;
  padding: 18px 0;
  font-size: .68rem
}

.page-hero {
  height: 470px;
  color: var(--color-on-dark);
  align-items: end;
  display: flex;
  position: relative
}

.page-hero>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0
}

.page-hero .wrap {
  padding-bottom: 70px;
  position: relative
}

.page-hero h1 {
  margin-bottom: 15px;
  font-size: clamp(3rem,6vw,5.6rem)
}

.page-hero p {
  max-width: 600px;
  font-size: 1.1rem
}

@media (max-width:900px) {
  .wrap {
    width: min(100% - 32px,720px)
  }

  .utility {
    padding-inline: 16px
  }

  .nav-wrap {
    height: 78px
  }

  .logo img {
    width: 160px
  }

  .menu {
    display: block
  }

  .nav-wrap nav {
    background: var(--color-on-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: 0 12px 25px #1112
  }

  .nav-wrap nav.open {
    display: flex
  }

  .nav-wrap nav>a {
    padding: 14px
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  /* Sul telefono restano il numero e le bandiere: la nota occuperebbe
     una riga intera andando a capo. */
  .utility .utility-note {
    display: none
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .final-cta .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .page-hero {
    height: 400px
  }

  .page-hero h1 {
    font-size: 3.2rem
  }
}

.ui-icon {
  filter: invert(20%)sepia(66%)saturate(1600%)hue-rotate(180deg);
  width: 24px;
  height: 24px;
  display: inline-block
}

.utility .ui-icon {
  filter: brightness(0)invert();
  width: 14px;
  height: 14px
}

.menu .ui-icon {
  width: 28px;
  height: 28px
}

body,
button,
input,
select,
textarea {
  font-family: "Encode Sans Expanded",Arial,sans-serif!important
}

h1,
h2,
.hotel-review blockquote,
.story-quote blockquote {
  letter-spacing: .01em!important;
  font-weight: 400!important
}

h3,
strong {
  font-family: "Encode Sans Expanded",Arial,sans-serif!important
}

.story-chapter-image>span,
.story-timeline article>strong,
.price-table-row div:not(:first-child) strong,
.price-highlight strong {
  font-weight: 400!important
}

p,
li,
label,
a,
small,
span {
  font-family: "Encode Sans Expanded",Arial,sans-serif
}

.nav-wrap nav>a {
  white-space: nowrap
}

.site-header {
  box-shadow: none!important;
  border-bottom: 0!important
}

.services-hero,
.rooms-hero,
.restaurant-hero,
.page-hero {
  margin-top: 0!important
}

.hotel-home,
.rooms-page,
.contacts-page,
.gallery-page,
.price-page,
.restaurant-page,
.services-page,
.story-page {
  color: var(--color-text);
  background: var(--color-surface)!important
}

.site-header .nav-wrap nav>a {
  color: var(--color-text)
}

.site-header .nav-cta,
.button.coral,
.rooms-primary,
.rooms-search button,
.room-card-body>a,
.rooms-experience-copy>a,
.price-cta>a,
.restaurant-note>a,
.services-note>a,
.story-cta>a {
  background: var(--color-text)!important;
  color: var(--color-on-dark)!important
}

body:not(.home) .site-header .nav-cta {
  background: #2f7d6b!important;
  color: #fff!important
}

body:not(.home) .site-header .nav-cta:hover {
  background: #286b5c!important;
  color: #fff!important
}

body:not(.home) .site-header .nav-cta:focus-visible {
  background: #286b5c!important;
  color: #fff!important;
  outline: 3px solid #286b5c;
  outline-offset: 3px
}

body:not(.home) .final-cta .button.coral {
  background: #2f7d6b!important;
  color: #fff!important
}

body:not(.home) .final-cta .button.coral:hover {
  background: #286b5c!important;
  color: #fff!important
}

body:not(.home) .final-cta .button.coral:focus-visible {
  background: #286b5c!important;
  color: #fff!important;
  outline: 3px solid #286b5c;
  outline-offset: 3px
}

.rooms-experience,
.contacts-details,
.price-included,
.restaurant-note,
.services-note,
.story-timeline {
  color: var(--color-text);
  background: var(--color-surface-warm)!important
}

.contact-info-card,
.price-details article,
.conditions-grid article,
.price-table-row {
  color: var(--color-text);
  background: var(--color-surface-secondary)!important
}

.restaurant-hero-copy>span,
.services-hero-copy>span {
  color: var(--color-on-dark)
}

@media (max-width:650px) {
  .rooms-hero-copy>span {
    color: var(--color-on-dark)
  }
}

/* Stili della home page. Erano dentro @scope(.hotel-home),
sostituito
  perche non supportato da Safari < 17.4 e Firefox < 128: su quei
browser la home restava senza stile. Ora ogni regola e discendente
di .hotel-home,
con lo stesso effetto e nessun requisito nuovo. */
.hotel-home,
.hotel-home * {
  box-sizing: border-box
}

.hotel-home {
  scroll-behavior: smooth;
  min-width: 320px;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: "Encode Sans Expanded",Arial,sans-serif
}

.hotel-home button,
.hotel-home input,
.hotel-home select {
  font: inherit
}

.hotel-home button {
  cursor: pointer
}

.hotel-home {
  overflow: hidden
}

/* "clip" taglia quello che esce come "hidden", ma senza fare del contenitore
   un'area che scorre per conto sua. Serve alla barra in basso: una barra
   sticky dentro un contenitore che scorre resta incollata a quello invece che
   al bordo dello schermo. Dove "clip" non esiste resta "hidden". */
@supports (overflow: clip) {
  .hotel-home {
    overflow: clip
  }
}

.hotel-home .hotel-hero {
  height: 720px;
  color: var(--color-on-dark);
  background: url(../images/hero.jpg) 50%/cover no-repeat;
  position: relative
}

.hotel-home .hotel-hero-shade {
  background: linear-gradient(90deg,#11111152,#11111108 62%);
  position: absolute;
  inset: 0
}

.hotel-home .hotel-topbar {
  z-index: 5;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 28px;
  width: min(100% - 64px,1320px);
  height: 124px;
  margin: auto;
  display: grid;
  position: relative
}

.hotel-home .hotel-logo {
  background: #d8d0bdf5;
  border: 0;
  border-radius: 0 0 28px 28px;
  align-self: start;
  width: 245px;
  height: 175px;
  padding: 24px 22px;
  box-shadow: 0 12px 35px #11111124
}

.hotel-home .hotel-logo img {
  width: 100%
}

.hotel-home .hotel-nav {
  justify-content: flex-end;
  align-items: center;
  gap: 23px;
  display: flex
}

.hotel-home .hotel-nav>button {
  color: var(--color-on-dark);
  background: 0 0;
  border: 0;
  padding: 8px 0;
  font-size: 14px
}

.hotel-home .hotel-primary {
  color: var(--color-on-dark);
  background: var(--color-text);
  text-transform: uppercase;
  border: 0;
  border-radius: 6px;
  padding: 17px 26px;
  font-size: 13px;
  font-weight: 700
}

.hotel-home .hotel-menu {
  color: var(--color-on-dark);
  background: 0 0;
  border: 0;
  width: 44px;
  height: 44px;
  display: none
}

.hotel-home .hotel-hero-content {
  z-index: 2;
  width: min(100% - 64px,1320px);
  margin: 120px auto 0;
  padding-left: 390px;
  position: relative
}

.hotel-home .hotel-eyebrow {
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: .16em;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700
}

.hotel-home .hotel-eyebrow.light {
  color: var(--color-on-dark);
  opacity: .86
}

.hotel-home h1,
.hotel-home h2 {
  margin: 0;
  font-family: "Libre Baskerville",Baskerville,"Baskerville Old Face","Times New Roman",serif;
  font-weight: 500
}

.hotel-home h1 {
  letter-spacing: -.025em;
  font-size: 64px;
  line-height: 1.08
}

.hotel-home h1 em {
  color: var(--color-text)
}

.hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
  margin: 24px 0;
  font-size: 18px;
  line-height: 1.65
}

.hotel-home .hotel-hero-actions {
  gap: 12px;
  display: flex
}

.hotel-home .hotel-secondary {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  text-transform: uppercase;
  background: 0 0;
  border-radius: 6px;
  padding: 16px 25px;
  font-size: 13px;
  font-weight: 700
}

.hotel-home .hotel-secondary.light {
  color: var(--color-on-dark);
  border-color: #fffc
}

  .hotel-home .hotel-outline:hover,
.hotel-home .hotel-secondary:hover {
  background: var(--color-text);
  color: var(--color-on-dark)
}

.hotel-home .hotel-booking-wrap {
  z-index: 6;
  width: min(100% - 64px,1130px);
  margin: -61px auto 0;
  scroll-margin-top: 20px;
  position: relative
}

.hotel-home .hotel-booking-bar {
  background: var(--color-surface-warm-alt);
  border-radius: 13px;
  grid-template-columns: 1.2fr 1.2fr .65fr .65fr 1.5fr;
  align-items: end;
  padding: 19px 20px;
  display: grid;
  box-shadow: 0 16px 40px #1111112e
}

.hotel-home .hotel-booking-bar label {
  border-right: 1px solid var(--color-accent);
  color: var(--color-text);
  text-transform: uppercase;
  flex-direction: column;
  gap: 7px;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  /* Una casella di una griglia parte larga quanto il suo contenuto: il
     campo data col calendario dentro non si lascia stringere, e su
     schermo stretto le colonne sommavano piu della fascia, mandando
     "Partenza" e "Camere" oltre il bordo destro. Con questo la casella
     puo restringersi fino alla larghezza che la colonna le da. */
  min-width: 0
}

.hotel-home .hotel-booking-bar input,
.hotel-home .hotel-booking-bar select {
  color: var(--color-text);
  background: var(--color-surface-warm-alt);
  border: 0;
  outline: 0;
  width: 100%;
  padding: 5px 0
}

.hotel-home .hotel-availability {
  background: var(--color-text);
  height: 53px;
  color: var(--color-on-dark);
  text-transform: uppercase;
  border: 0;
  border-radius: 7px;
  margin-left: 19px;
  font-size: 12px;
  font-weight: 700
}

.hotel-home .hotel-section {
  width: min(100% - 64px,1220px);
  margin-inline: auto
}

.hotel-home .hotel-services {
  padding-top: 40px;
  padding-bottom: 56px
}

.hotel-home .hotel-service-grid {
  grid-template-columns: repeat(6,minmax(0,196px));
  justify-content: center;
  gap: 18px;
  display: grid
}

.hotel-home .hotel-service-card {
  color: var(--color-on-dark);
  text-align: center;
  border-radius: 28px;
  min-height: 230px;
  padding: 32px 18px 27px;
  transition: all .25s;
  box-shadow: 0 12px 25px #1111111c
}

.hotel-home .hotel-service-card:hover {
  transform: translateY(-6px)
}

.hotel-home .hotel-service-card svg {
  width: 58px;
  height: 58px;
  margin-bottom: 16px
}

.hotel-home .hotel-service-card h3 {
  text-transform: uppercase;
  margin: 0 0 14px;
  font-size: 14px
}

.hotel-home .hotel-service-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65
}

.hotel-home .teal,
.hotel-home .orange,
.hotel-home .aqua,
.hotel-home .blue,
.hotel-home .sand {
  background: var(--color-text)
}

.hotel-home .hotel-rooms {
  grid-template-columns: 280px 1fr;
  align-items: center;
  gap: 70px;
  padding: 35px 0 74px;
  scroll-margin-top: 80px;
  display: grid
}

.hotel-home .hotel-section-copy h2,
.hotel-home .hotel-split-copy h2,
.hotel-home .hotel-location h2 {
  color: var(--color-text);
  font-size: 38px;
  line-height: 1.15
}

  .hotel-home .hotel-section-copy>p:not(.hotel-eyebrow),
.hotel-home .hotel-split-copy>p:not(.hotel-eyebrow) {
  color: var(--color-text);
  margin: 20px 0 25px;
  line-height: 1.75
}

.hotel-home .hotel-outline {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  background: var(--color-surface-warm-alt);
  text-transform: uppercase;
  border-radius: 5px;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 700
}

.hotel-home .hotel-room-grid {
  --shift: 0;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  display: grid
}

.hotel-home .hotel-room-card {
  border: 1px solid var(--color-accent);
  background: var(--color-surface-warm-alt);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px #1111110f
}

.hotel-home .hotel-room-card img {
  aspect-ratio: 1.35;
  object-fit: cover;
  width: 100%;
  display: block
}

.hotel-home .hotel-room-card>div {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 18px 18px;
  font-size: 15px;
  display: flex
}

.hotel-home .hotel-room-card strong {
  font-size: 1.15rem;
  line-height: 1.2
}

.hotel-home .hotel-room-card span {
  text-align: left;
  white-space: normal;
  font-size: 14px
}

.hotel-home .hotel-room-card b {
  font-size: 15px;
  font-weight: 700
}

.hotel-home .hotel-room-card small {
  opacity: .75;
  font-size: 13px;
  display: block
}

.hotel-home .hotel-carousel {
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
  margin-top: 16px;
  display: none
}

.hotel-home .hotel-carousel button {
  border: 1px solid var(--color-accent);
  background: var(--color-surface-warm-alt);
  width: 38px;
  height: 38px;
  color: var(--color-text);
  border-radius: 50%
}

.hotel-home .hotel-carousel button svg {
  width: 20px
}

.hotel-home .hotel-carousel>div {
  gap: 7px;
  display: flex
}

.hotel-home .hotel-carousel i {
  background: var(--color-surface-secondary);
  border-radius: 50%;
  width: 7px;
  height: 7px
}

.hotel-home .hotel-carousel i.active {
  background: var(--color-text)
}

.hotel-home .hotel-split {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 480px;
  display: grid
}

.hotel-home .hotel-split>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 460px;
  max-height: 530px
}

.hotel-home .hotel-restaurant>img {
  object-position: center 42%
}

.hotel-home .hotel-family>img {
  object-position: center 62%
}

.hotel-home .hotel-split-copy {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 70px max(56px,50vw - 610px);
  display: flex
}

.hotel-home .hotel-split-copy.warm {
  background: linear-gradient(115deg,var(--color-surface-secondary),var(--color-surface-warm-alt))
}

.hotel-home .hotel-restaurant .hotel-split-copy {
  padding-left: max(32px,50vw - 610px)
}

.hotel-home .hotel-offers {
  padding: 55px 0
}

.hotel-home .hotel-section-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  display: flex
}

.hotel-home .hotel-section-heading h2 {
  color: var(--color-text);
  font-size: 32px
}

.hotel-home .hotel-section-heading button,
.hotel-home .hotel-offer-grid button {
  color: var(--color-text);
  text-transform: uppercase;
  background: 0 0;
  border: 0;
  font-size: 11px;
  font-weight: 700
}

.hotel-home .hotel-offer-grid {
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 18px;
  display: grid
}

.hotel-home .hotel-offer-grid article {
  background: var(--color-surface-warm-alt);
  border-radius: 13px;
  gap: 23px;
  padding: 26px;
  display: flex
}

.hotel-home .hotel-offer-grid svg {
  color: var(--color-text);
  flex: none;
  width: 60px;
  height: 60px
}

.hotel-home .hotel-offer-grid h3 {
  text-transform: uppercase;
  margin: 0 0 6px;
  font-size: 14px
}

.hotel-home .hotel-offer-grid p {
  margin: 7px 0;
  font-size: 13px
}

.hotel-home .hotel-reviews-location {
  background: var(--color-surface-warm-alt);
  grid-template-columns: 1fr;
  align-items: center;
  gap: 65px;
  padding: 48px max(32px,50vw - 610px);
  display: grid
}

.hotel-home .hotel-review {
  padding-left: 45px;
  position: relative
}

.hotel-home .hotel-review>svg {
  width: 30px;
  position: absolute;
  top: 0;
  left: 0
}

.hotel-home .hotel-review blockquote {
  margin: 0;
  font-family: "Libre Baskerville",Baskerville,"Baskerville Old Face","Times New Roman",serif;
  font-size: 22px;
  line-height: 1.5
}

.hotel-home .hotel-review p {
  font-size: 12px;
  font-weight: 700
}

.hotel-home .hotel-stars {
  color: var(--color-text);
  display: flex
}

.hotel-home .hotel-stars svg {
  fill: currentColor;
  width: 20px
}

.hotel-home .hotel-location {
  background: var(--color-surface-warm-alt);
  border-radius: 17px;
  grid-template-columns: .8fr 1.2fr;
  min-height: 265px;
  display: grid;
  overflow: hidden
}

.hotel-home .hotel-location>div {
  flex-direction: column;
  justify-content: center;
  padding: 35px;
  display: flex
}

.hotel-home .hotel-location>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 330px
}

.hotel-home .hotel-location h2,
.hotel-home .hotel-location p:not(.hotel-eyebrow) {
  margin: 8px 0 14px
}

.hotel-home .hotel-location h2 {
  font-size: 28px
}

.hotel-home .hotel-location p:not(.hotel-eyebrow) {
  font-size: 15px;
  line-height: 1.65
}

.hotel-home .hotel-location a {
  color: var(--color-text);
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex
}

.hotel-home .hotel-location a svg {
  width: 18px
}

.hotel-home .hotel-location-azioni {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 6px;
  display: flex
}

.hotel-home .hotel-location-scopri {
  color: var(--color-gold-deep,#6f4e05);
  gap: 8px;
  transition: gap .25s
}

.hotel-home .hotel-location-scopri:hover {
  gap: 14px
}

.hotel-home .hotel-location iframe {
  border: 0;
  width: 100%;
  height: 100%
}

.hotel-home .hotel-final {
  background: var(--color-text);
  color: var(--color-on-dark);
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 30px;
  min-height: 150px;
  padding: 25px max(32px,50vw - 610px);
  display: grid
}

.hotel-home .hotel-final>img {
  width: 125px
}

.hotel-home .hotel-final h2 {
  font-size: 30px
}

.hotel-home .hotel-final-actions {
  gap: 10px;
  display: flex
}

.hotel-home .hotel-footer {
  color: var(--color-text);
  grid-template-columns: 1.2fr 1fr .7fr;
  gap: 35px;
  padding: 34px max(32px,50vw - 610px) 40px;
  font-size: 12px;
  display: grid
}

.hotel-home .hotel-footer a {
  color: var(--color-text);
  gap: 7px;
  margin-bottom: 7px;
  text-decoration: none;
  display: flex
}

.hotel-home .hotel-footer a svg {
  width: 17px
}

.hotel-home .hotel-mobile-actions {
  display: none
}

@media (max-width:1000px) {
  .hotel-home .hotel-topbar {
    grid-template-columns: 190px 1fr auto;
    width: calc(100% - 30px);
    height: 90px
  }

  .hotel-home .hotel-logo {
    width: 180px;
    height: 125px;
    padding: 18px
  }

  .hotel-home .hotel-nav {
    background: var(--color-surface-warm-alt);
    border-radius: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(330px,100vw - 30px);
    padding: 18px;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    box-shadow: 0 18px 35px #1113
  }

  .hotel-home .hotel-nav.open {
    display: flex
  }

  .hotel-home .hotel-nav>button {
    color: var(--color-text);
    text-align: left;
    padding: 12px
  }

  .hotel-home .hotel-menu {
    display: block
  }

  .hotel-home .hotel-hero-content {
    width: calc(100% - 50px);
    margin-top: 130px;
    padding-left: 250px
  }

  .hotel-home .hotel-hero-content h1 {
    font-size: 50px
  }

  .hotel-home .hotel-booking-bar {
    grid-template-columns: 1fr 1fr 1fr 1fr
  }

  .hotel-home .hotel-availability {
    grid-column: 1/-1;
    margin: 16px 0 0
  }

  .hotel-home .hotel-service-grid {
    grid-template-columns: repeat(3,1fr)
  }

  .hotel-home .hotel-rooms {
    grid-template-columns: 1fr;
    gap: 35px
  }

  .hotel-home .hotel-reviews-location {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-final {
    grid-template-columns: 120px 1fr
  }

  .hotel-home .hotel-final-actions {
    grid-column: 2
  }
}

@media (max-width:680px) {

  .hotel-home .hotel-hero {
    background-position: 34%;
    height: 660px
  }

  .hotel-home .hotel-hero-shade {
    background: linear-gradient(#1111112e,#111111a8)
  }

  .hotel-home .hotel-topbar {
    grid-template-columns: 130px 1fr auto;
    height: 80px
  }

  .hotel-home .hotel-logo {
    border-radius: 0 0 18px 18px;
    width: 130px;
    height: 95px;
    padding: 12px
  }

  .hotel-home .hotel-menu {
    place-items: center;
    margin-left: auto;
    display: grid
  }

  .hotel-home .hotel-hero-content {
    width: calc(100% - 36px);
    margin-top: 190px;
    padding: 0
  }

  .hotel-home .hotel-hero-content h1 {
    font-size: 42px
  }

  .hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
    font-size: 16px
  }

  .hotel-home .hotel-hero-actions {
    flex-direction: column;
    max-width: 310px
  }

  .hotel-home .hotel-booking-wrap {
    width: calc(100% - 28px);
    margin: -55px auto 0
  }

  .hotel-home .hotel-booking-bar {
    border-radius: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 0;
    padding: 18px 14px
  }

  .hotel-home .hotel-booking-bar label {
    padding: 0 10px
  }

  .hotel-home .hotel-booking-bar label:nth-child(2),
  .hotel-home .hotel-booking-bar label:nth-child(4) {
    border-right: 0
  }

  .hotel-home .hotel-availability {
    border-radius: 10px;
    grid-column: 1/-1
  }

  .hotel-home .hotel-section {
    width: calc(100% - 32px)
  }

  .hotel-home .hotel-services {
    padding-top: 28px
  }

  /* I punti di forza erano una fila che si scorre di lato. Sul telefono
     non funzionava: le tessere fuori dallo schermo sono ritagliate dal
     contenitore, quindi non entravano mai nel campo dell'osservatore e
     restavano ferme al punto di partenza del ventaglio, invisibili e
     spostate. Si apriva il sito e si vedeva la terza tessera, mentre le
     prime due non tornavano piu scorrendo.

     Adesso stanno tutte su due colonne, dentro la pagina: si vedono per
     intero senza scorrere di lato, niente resta nascosto e il ventaglio
     misura le distanze su una griglia vera, come da desktop. */
  .hotel-home .hotel-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 12px;
    padding: 0;
    display: grid;
    overflow-x: visible;
    scroll-snap-type: none
  }

  .hotel-home .hotel-service-card {
    scroll-snap-align: none;
    min-width: 0;
    min-height: 160px
  }

  .hotel-home .hotel-rooms {
    padding-top: 25px
  }

  .hotel-home .hotel-section-copy h2,
  .hotel-home .hotel-split-copy h2 {
    font-size: 33px
  }

  .hotel-home .hotel-carousel {
    display: flex
  }

  .hotel-home .hotel-room-grid {
    transform: translateX(calc(var(--shift) * -88%));
    transition: transform .35s ease;
    display: flex
  }

  .hotel-home .hotel-room-card {
    min-width: 86%
  }

  .hotel-home .hotel-rooms-carousel {
    padding: 2px;
    overflow: hidden
  }

  .hotel-home .hotel-split {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-split>img {
    min-height: 300px
  }

  .hotel-home .hotel-split-copy {
    padding: 45px 26px
  }

  .hotel-home .hotel-restaurant .hotel-split-copy {
    order: 2;
    padding: 45px 26px
  }

  .hotel-home .hotel-restaurant img {
    order: 1
  }

  .hotel-home .hotel-section-heading {
    align-items: flex-end;
    gap: 15px
  }

  .hotel-home .hotel-section-heading h2 {
    font-size: 29px
  }

  .hotel-home .hotel-offer-grid {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-reviews-location {
    gap: 36px;
    padding: 44px 20px
  }

  .hotel-home .hotel-review {
    padding-left: 34px
  }

  .hotel-home .hotel-review blockquote {
    font-size: 19px
  }

  .hotel-home .hotel-location {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-location iframe {
    min-height: 250px
  }

  .hotel-home .hotel-final {
    grid-template-columns: 70px 1fr;
    padding: 25px 20px
  }

  .hotel-home .hotel-final>img {
    width: 70px
  }

  .hotel-home .hotel-final h2 {
    font-size: 24px
  }

  .hotel-home .hotel-final-actions {
    grid-column: 1/-1;
    display: grid
  }

  .hotel-home .hotel-final-actions button {
    width: 100%
  }

  .hotel-home .hotel-footer {
    grid-template-columns: 1fr;
    padding: 30px 24px
  }

  /* Barra "sticky" e non "fixed": una barra fissa la disegna il sistema
     fuori dal contenuto, e su iPhone durante lo scorrimento resta indietro,
     lasciando scoperta la striscia che il browser libera ritirando la propria
     barra. Una barra sticky viaggia insieme al contenuto, quindi tocca sempre
     il primo bordo disponibile, con qualunque browser. Il padding in fondo
     copre la fascia del tasto home. */
  .hotel-home .hotel-mobile-actions {
    z-index: 20;
    background: var(--color-surface-warm-alt);
    grid-template-columns: repeat(3,1fr);
    min-height: calc(68px + env(safe-area-inset-bottom, 0px));
    display: grid;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -8px 24px #11111121
  }

  /* La fascia del tasto home la coprono le voci, non il contenitore: cosi
     prende il loro colore invece del fondo della barra, e il padding non
     rimpicciolisce l'altezza utile perche' icona e scritta restano centrate
     nei 68px sopra. */
  .hotel-home .hotel-mobile-actions button,
  .hotel-home .hotel-mobile-actions a {
    background: var(--color-surface-warm-alt);
    color: var(--color-text);
    border: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    display: flex
  }

  .hotel-home .hotel-mobile-actions button:first-child {
    background: var(--color-text);
    color: var(--color-on-dark)
  }

  .hotel-home .hotel-mobile-actions svg {
    width: 22px;
    height: 22px
  }
}

@media (prefers-reduced-motion:reduce) {
  .hotel-home,
  .hotel-home * {
    scroll-behavior: auto!important;
    transition: none!important
  }
}

.hotel-home .hotel-location>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 265px;
  display: block
}

@media (max-width:680px) {
  .hotel-home .hotel-location>img {
    min-height: 250px
  }
}

.hotel-home .hotel-service-card svg {
  margin: 0 auto 16px;
  display: block
}

.hotel-home .hotel-hero-shade {
  background: linear-gradient(90deg,#111111c7 0%,#11111194 48%,#11111147 100%)
}

@media (max-width:680px) {
  .hotel-home .hotel-hero-shade {
    background: linear-gradient(#11111147 0%,#1111118f 48%,#111c 100%)
  }
}

.hotel-home .hotel-booking-bar label {
  font-size: 12px;
  line-height: 1.35
}

.hotel-home .hotel-booking-bar input,
.hotel-home .hotel-booking-bar select {
  font-size: 16px;
  font-weight: 500
}

.hotel-home .hotel-availability {
  letter-spacing: .02em;
  font-size: 13px
}

@media (min-width:681px) {
  .hotel-home .hotel-split-copy {
    padding-block: 70px
  }

  .hotel-home .hotel-split-copy>p:not(.hotel-eyebrow) {
    max-width: 560px
  }

  .hotel-home .hotel-family .hotel-split-copy {
    padding-left: 56px;
    padding-right: max(32px,50vw - 610px)
  }

  .hotel-home .hotel-restaurant .hotel-split-copy {
    padding-left: max(32px,50vw - 610px);
    padding-right: 56px
  }
}


.hotel-home .hotel-hero-content {
  text-align: center;
  padding-left: 0
}

.hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
  margin-inline: auto
}

.hotel-home .hotel-hero-actions {
  justify-content: center
}

.hotel-home .hotel-year {
  color: var(--color-text);
  font-size: 1.32em;
  font-weight: 700;
  line-height: 1
}

.hotel-home .hotel-section-copy .hotel-outline,
.hotel-home .hotel-split-copy .hotel-outline {
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: inline-flex
}

.hotel-home .hotel-nav>a {
  color: var(--color-on-dark);
  background: 0 0;
  border: 0;
  padding: 8px 0;
  font-size: 14px;
  text-decoration: none
}

.hotel-home .hotel-nav>button,
.hotel-home .hotel-nav>a {
  transition: color .2s
}

  .hotel-home .hotel-nav>button:hover,
.hotel-home .hotel-nav>a:hover {
  color: var(--color-text)
}

@media (max-width:1000px) {
  .hotel-home .hotel-nav>a {
    color: var(--color-text);
    text-align: left;
    padding: 12px
  }
}

@media (min-width:1001px) {
  .hotel-home .hotel-hero-content {
    width: min(100% - 64px,1000px)
  }
}

@media (max-width:680px) {
  .hotel-home .hotel-hero-actions {
    margin-inline: auto
  }
}

.hotel-home .hotel-nav>button,
.hotel-home .hotel-nav>a {
  white-space: nowrap;
  font-weight: 600
}

.hotel-home .hotel-eyebrow {
  font-weight: 800
}

.hotel-home .hotel-hero-content>p:not(.hotel-eyebrow) {
  font-weight: 400
}

.hotel-home .hotel-service-card h3 {
  letter-spacing: .035em;
  font-size: 15px;
  font-weight: 800
}

.hotel-home .hotel-service-card p {
  font-weight: 400
}

.hotel-home .hotel-room-card strong,
.hotel-home .hotel-offer-grid h3 {
  font-weight: 700
}

.hotel-home .hotel-room-card span,
.hotel-home .hotel-offer-grid p,
  .hotel-home .hotel-section-copy>p:not(.hotel-eyebrow),
.hotel-home .hotel-split-copy>p:not(.hotel-eyebrow) {
  font-weight: 400
}

.hotel-home .hotel-primary,
.hotel-home .hotel-secondary,
.hotel-home .hotel-outline,
.hotel-home .hotel-availability {
  font-weight: 800
}

.hotel-home .hotel-footer strong {
  font-weight: 700
}

.hotel-home .hotel-service-card {
  height: 215px;
  min-height: 215px;
  border-radius: 14px;
  color: var(--color-on-dark);
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--color-text)!important
}

.hotel-home .hotel-strength-inner {
  width: 100%;
  height: 100%;
  display: block;
  position: relative
}

.hotel-home .hotel-service-card:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 5px;
  border-radius: 20px
}

.hotel-home .hotel-strength-face {
  border-radius: 14px!important;
  position: absolute;
  inset: 0;
  overflow: hidden
}

.hotel-home .hotel-strength-front {
  z-index: 1;
  color: var(--color-on-dark);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 16px 58px;
  display: flex
}

.hotel-home .hotel-strength-front h3 {
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
  letter-spacing: .04em;
  text-shadow: 0 2px 14px #0b1219e6;
  color: var(--color-on-dark);
  margin-bottom: 0;
  line-height: 1.25;
  font-family: "Encode Sans Expanded",Arial,sans-serif!important;
  font-size: 15px!important;
  font-weight: 800!important
}

.hotel-home .hotel-strength-front svg {
  filter: drop-shadow(0 2px 10px #0b1219cc);
  width: 42px;
  height: 42px;
  margin-bottom: 12px
}

.hotel-home .hotel-strength-front .hotel-beach-umbrella-icon {
  object-fit: contain;
  width: 44px;
  height: 44px;
  margin-bottom: 12px
}

.hotel-home .hotel-strength-front small {
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .58;
  margin-top: 13px;
  font-size: 10px;
  font-weight: 700
}

.hotel-home .hotel-strength-back {
  background: var(--color-text)
}

.hotel-home .hotel-strength-back img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  display: block
}

.hotel-home .hotel-service-card:hover .hotel-strength-back img {
  transform: scale(1.07)
}

.hotel-home .hotel-strength-back:after {
  content: "";
  background: linear-gradient(180deg,#0b1219a6 0%,#0b12194d 42%,#0b1219e0 100%);
  position: absolute;
  inset: 0
}

.hotel-home .hotel-strength-back>span {
  z-index: 2;
  color: var(--color-gold-light,#eec97a);
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 2px 14px #0b1219e6;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  position: absolute;
  bottom: 16px;
  left: 14px;
  right: 14px
}

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

.hotel-home {
  background: var(--color-surface);
  color: var(--color-text)
}

.hotel-home .hotel-booking-bar,
.hotel-home .hotel-location {
  background: var(--color-surface)
}

.hotel-home .hotel-offer-grid article,
.hotel-home .hotel-reviews-location {
  background: var(--color-surface-secondary);
  color: var(--color-text)
}

.hotel-home .hotel-split-copy.warm {
  background: var(--color-surface-warm);
  color: var(--color-text)
}

.hotel-home .hotel-primary,
.hotel-home .hotel-availability,
.hotel-home .hotel-mobile-actions button:first-child {
  background: var(--color-text);
  color: var(--color-on-dark)
}

.hotel-home .hotel-outline {
  border-color: var(--color-text);
  color: var(--color-text);
  background: var(--color-surface)
}

.hotel-home .hotel-outline:hover {
  background: var(--color-text);
  color: var(--color-on-dark)
}

.hotel-home .hotel-booking-bar,
.hotel-home .hotel-booking-bar label,
.hotel-home .hotel-booking-bar input,
.hotel-home .hotel-booking-bar select {
  background: var(--color-surface)
}

.hotel-home .hotel-booking-bar input,
.hotel-home .hotel-booking-bar select {
  box-shadow: none;
  color: var(--color-text);
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  border: 0;
  border-radius: 0
}

.hotel-home .hotel-booking-bar select {
  appearance: none;
  background-image: none
}

/* ------------------------------------------------------------------
 * Aggiunte richieste dalla proprieta:
 * punto di forza "pensione completa", finestra dedicata al Ferragosto,
 * sezione per le famiglie, anteprima della SPA 2027 e barra di contatto
 * anche nelle pagine interne.
 * ------------------------------------------------------------------ */

/* Sei punti di forza su una riga sola, centrati nella pagina. */
.hotel-home .hotel-service-grid {
  grid-template-columns: repeat(6, minmax(0, 196px));
  justify-content: center;
  gap: 18px
}

.hotel-home .hotel-service-card {
  min-height: 215px;
  padding: 0
}

.hotel-home .hotel-service-card h3 {
  line-height: 1.3
}

.hotel-home .hotel-service-card svg,
.hotel-home .hotel-strength-front .hotel-beach-umbrella-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px
}

/* --- Finestra Ferragosto --- */
.hotel-ferragosto {
  color: var(--color-on-dark);
  isolation: isolate;
  position: relative;
  overflow: hidden
}

.hotel-ferragosto>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -2
}

.hotel-ferragosto-shade {
  background: linear-gradient(100deg, #10203ae6 0%, #10203ab3 55%, #10203a80 100%);
  position: absolute;
  inset: 0;
  z-index: -1
}

.hotel-ferragosto-copy {
  max-width: 680px;
  padding: 66px max(56px, 50vw - 610px)
}

.hotel-ferragosto-eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800
}

.hotel-ferragosto h2 {
  margin: 0 0 14px;
  font-size: 38px
}

.hotel-ferragosto p:not(.hotel-ferragosto-eyebrow) {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.7
}

.hotel-ferragosto-actions {
  flex-wrap: wrap;
  gap: 12px;
  display: flex
}

.hotel-ferragosto-actions button {
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 700
}

.hotel-ferragosto-outline {
  color: var(--color-on-dark);
  background: 0 0;
  border: 1px solid currentColor
}

/* --- Sezione famiglie: testo a sinistra, fotografia a destra --- */
.hotel-home .hotel-family .hotel-split-copy {
  padding-left: max(56px, 50vw - 610px);
  padding-right: 56px
}

/* --- Anteprima SPA 2027 --- */
.hotel-spa {
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  display: grid
}

.hotel-spa-annuncio {
  grid-template-columns: 1fr;
  min-height: 0
}

.hotel-spa>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 360px
}

.hotel-spa-copy {
  background: linear-gradient(115deg, var(--color-surface-secondary), var(--color-surface-warm-alt));
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 70px 56px 70px max(56px, 50vw - 610px);
  display: flex
}

.hotel-spa-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800
}

.hotel-spa h2 {
  margin: 0 0 14px;
  font-size: 34px
}

.hotel-spa p:not(.hotel-spa-eyebrow) {
  max-width: 560px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7
}

.hotel-spa .hotel-outline {
  border: 1px solid var(--color-text);
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: 999px;
  margin-top: 12px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none
}

/* --- Barra Prenota / Chiama / Preventivo nelle pagine interne --- */
.site-mobile-actions {
  display: none
}

@media (max-width:1000px) {
  .hotel-home .hotel-service-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch
  }

  .hotel-home .hotel-service-card {
    min-height: 215px;
    padding: 0
  }

  .hotel-ferragosto-copy {
    max-width: none;
    padding: 48px 26px
  }

  .hotel-ferragosto h2 {
    font-size: 30px
  }

  .hotel-home .hotel-family {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-family .hotel-split-copy {
    order: 2;
    padding: 45px 26px
  }

  .hotel-home .hotel-family>img {
    order: 1
  }

  .hotel-spa {
    grid-template-columns: 1fr
  }

  .hotel-spa-copy {
    order: 2;
    padding: 45px 26px
  }

  .hotel-spa>img {
    order: 1;
    min-height: 260px
  }
}

@media (max-width:680px) {
  /* Stessa scelta della barra della home: sticky invece che fixed, cosi
     resta attaccata al bordo anche mentre si scorre. */
  .site-mobile-actions {
    background: var(--color-surface);
    border-top: 1px solid #00000014;
    justify-content: space-around;
    gap: 6px;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 60
  }

  .site-mobile-actions a {
    color: var(--color-text);
    text-align: center;
    border-radius: 999px;
    flex: 1;
    gap: 4px;
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    display: flex
  }

  .site-mobile-actions a:first-child {
    background: var(--color-text);
    color: var(--color-on-dark)
  }

  .site-mobile-actions svg {
    width: 18px;
    height: 18px;
    flex: none
  }

  /* Niente spazio riservato in fondo al piede: la barra sticky occupa il
     posto suo nel flusso, quindi lo spazio se lo prende da sola. */
}

/* Sotto i 560px le quattro voci in riga non ci stanno: l'ultima
   ("Indicazioni", "Directions", "Wegbeschreibung") finiva oltre il bordo
   destro e restava tagliata. Come nella barra della home, l'icona va sopra
   alla scritta: cosi ogni voce sta nella sua quarta parte di schermo. */
@media (max-width:560px) {
  .site-mobile-actions {
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom))
  }

  .site-mobile-actions a {
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 8px 4px;
    font-size: 10px;
    line-height: 1.2
  }

  .site-mobile-actions svg {
    width: 20px;
    height: 20px
  }
}

/* Il numero nella barra in alto e cliccabile: la telefonata e uno degli
   obiettivi del sito. */
.utility-phone {
  color: inherit;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  display: flex
}

.utility-phone:hover {
  text-decoration: underline
}

/* Con tre azioni l'hero deve poter andare a capo. */
.hotel-home .hotel-hero-actions {
  flex-wrap: wrap;
  align-items: center
}

/* Numero di telefono accanto ai pulsanti dell'hero: prenotare, chiedere un
   preventivo o telefonare sono i tre modi per arrivare in hotel. */
.hotel-home .hotel-hero-phone {
  color: var(--color-on-dark);
  border: 1px solid #ffffff80;
  border-radius: 999px;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex
}

.hotel-home .hotel-hero-phone svg {
  width: 17px;
  height: 17px;
  flex: none
}

@media (max-width:680px) {
  .hotel-home .hotel-hero-phone {
    justify-content: center;
    width: 100%
  }
}

@media (max-width:680px) {
  /* La barra della home ha quattro azioni: prenota, chiama, preventivo,
     indicazioni. */
  .hotel-home .hotel-mobile-actions {
    grid-template-columns: repeat(4, 1fr)
  }

  .hotel-home .hotel-mobile-actions svg {
    width: 20px;
    height: 20px
  }

  .hotel-home .hotel-mobile-actions button,
  .hotel-home .hotel-mobile-actions a {
    font-size: 10px
  }
}

/* ==========================================================================
   Barra superiore della home
   --------------------------------------------------------------------------
   Un solo blocco per tutta la testata: prima erano quattro rattoppi
   sovrapposti che si contraddicevano (il logo veniva ridefinito quattro volte)
   e il risultato era il logo al centro, le sezioni piccole e slavate contro il
   cielo e le lingue sospese a meta pagina.

   Impaginazione: logo in alto a sinistra, lingue in alto a destra, sezioni su
   una riga propria subito sotto, centrate. Le scritte sono bianche e
   appoggiate a una velatura scura che scende dal bordo superiore, cosi restano
   leggibili anche quando dietro passa il cielo chiaro del filmato: il sito si
   rivolge in gran parte a persone anziane, quindi il testo e grande e il
   contrasto e alto.
   ========================================================================== */

.hotel-home .hotel-hero:before {
  content: "";
  z-index: 1;
  background: linear-gradient(#111111a8, #1111116b 42%, #11111100);
  height: 300px;
  position: absolute;
  inset: 0 0 auto;
  pointer-events: none
}

.hotel-home .hotel-logo {
  background: 0 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: auto;
  height: auto;
  text-align: left;
  display: block
}

.hotel-home .hotel-logo img {
  height: 82px
}

/* Sopra la fotografia dell'hero l'oro scuro sparirebbe: qui serve chiaro. */
.hotel-home .hotel-logo .logo-luogo {
  color: var(--color-gold-light,#eec97a);
  text-shadow: 0 2px 14px #0b1219e6
}

.hotel-home .hotel-logo img {
  object-fit: contain;
  width: auto;
  height: 82px;
  filter: drop-shadow(0 3px 12px #111111a6)
}

@media (min-width:1001px) {
  .hotel-home .hotel-topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo . lingue"
                         "nav nav nav";
    align-items: center;
    height: auto;
    padding: 24px 0 0;
    row-gap: 14px;
    column-gap: 24px;
    display: grid
  }

  .hotel-home .hotel-topbar .hotel-logo {
    grid-area: logo
  }

  .hotel-home .hotel-topbar .lang-switcher {
    grid-area: lingue;
    justify-self: end;
    margin-left: 0
  }

  .hotel-home .hotel-topbar .hotel-nav {
    grid-area: nav;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 34px
  }

  .hotel-home .hotel-hero-content {
    margin-top: 58px
  }
}

/* Le voci di menu: piu grandi dei 14px originali e con l'oro solo al passaggio
   del mouse, per non fare due colori d'oro sovrapposti al titolo. */
.hotel-home .hotel-nav>a,
.hotel-home .hotel-nav>button {
  color: var(--color-on-dark);
  text-shadow: 0 2px 10px #111111a6;
  border-bottom: 2px solid #0000;
  padding: 6px 2px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s, border-color .2s
}

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

/* Le bandiere: erano minuscole. Qui hanno la misura di un bottone vero. */
.hotel-home .hotel-topbar .lang-switcher-item {
  border-color: #ffffff5c;
  gap: 8px;
  padding: 7px 12px;
  font-size: .8rem;
  opacity: .88
}

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

.hotel-home .hotel-topbar .lang-switcher-item.is-current {
  background: #11111159;
  border-color: var(--color-gold-light);
  opacity: 1
}

@media (max-width:1000px) {
  .hotel-home .hotel-topbar {
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    column-gap: 12px;
    height: 96px
  }

  .hotel-home .hotel-logo {
    height: 62px
  }

  .hotel-home .hotel-topbar .lang-switcher {
    grid-column: 3;
    margin-left: auto
  }

  .hotel-home .hotel-menu {
    grid-column: 4
  }

  .hotel-home .hotel-nav {
    grid-column: 1/-1
  }

  .hotel-home .hotel-nav>a,
  .hotel-home .hotel-nav>button {
    text-shadow: none;
    border-bottom: 0;
    padding: 14px 12px;
    font-size: 18px
  }
}

@media (max-width:680px) {
  .hotel-home .hotel-logo {
    height: 52px
  }

  .hotel-home .hotel-hero-content {
    margin-top: 120px
  }
}

/* --- Azioni dell'hero ---------------------------------------------------- */
/*
 * Nell'hero c'era "Verifica disponibilita" e cento pixel piu sotto il modulo di
 * ricerca con lo stesso bottone: due volte la stessa cosa nella stessa
 * schermata. E rimasta una sola azione, in oro perche non si confonda con il
 * bottone nero del modulo, piu il numero di telefono, che per il pubblico a cui
 * si rivolge l'hotel resta il modo piu diretto per prenotare.
 */
.hotel-home .hotel-hero-actions .hotel-primary.light {
  color: var(--color-text);
  background: var(--color-gold-light);
  border-radius: 8px;
  padding: 18px 30px;
  font-size: 15px
}

.hotel-home .hotel-hero-actions .hotel-primary.light:hover {
  background: #f6dda4
}

.hotel-home .hotel-hero-phone {
  border-color: #ffffffa3;
  padding: 17px 26px;
  font-size: 16px
}

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

.hotel-home .hotel-hero-phone:hover {
  background: #ffffff1f
}

/* Le etichette delle schede servizi devono poter andare a capo: in tedesco
   "Strandvereinbarung" e una parola sola piu larga della scheda, e usciva dal
   riquadro tagliata a meta. */
.hotel-home .hotel-service-card h3 {
  overflow-wrap: break-word;
  text-wrap: balance
}

/* Sotto la fotografia della camera il testo va incolonnato: nome, capienza,
   prezzo. Prima stava tutto su una riga e in tedesco "4 oder mehr Personen"
   spingeva la terza scheda fuori dalla griglia. */
.hotel-home .hotel-room-card>div {
  flex-wrap: wrap;
  align-items: flex-start
}

.hotel-home .hotel-room-card strong {
  overflow-wrap: anywhere
}

.hotel-home .hotel-room-card span {
  white-space: normal
}

.hotel-home .hotel-room-card b {
  white-space: nowrap
}

/* ==================================================================
 * SPA e animali: arrivavano dalla pagina Servizi, che non esiste piu.
 * ================================================================== */

.hotel-home .hotel-spa-annuncio {
  border-radius: 22px;
  width: min(1180px, 100% - 48px);
  margin: 70px auto 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, #ffffffb3 0%, #0000 55%),
    linear-gradient(160deg, var(--color-surface-warm) 0%, var(--color-surface-warm-alt) 100%)
}

.hotel-home .hotel-spa-annuncio .hotel-spa-copy {
  background: 0 0;
  padding: 52px 55px
}

.hotel-home .hotel-spa-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid
}

.hotel-home .hotel-spa-list li {
  border-top: 1px solid #00000014;
  gap: 3px;
  padding-top: 12px;
  display: grid
}

.hotel-home .hotel-spa-list strong {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800
}

.hotel-home .hotel-spa-list span {
  font-size: .96rem;
  line-height: 1.65
}

.hotel-home .hotel-spa-copy>a {
  background: var(--color-text);
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 8px;
  padding: 16px 25px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex
}

.hotel-home .hotel-animali {
  background: var(--color-surface-warm-alt);
  border-radius: 22px;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  width: min(1180px, 100% - 48px);
  margin: 70px auto 0;
  padding: 44px 55px;
  display: flex
}

.hotel-home .hotel-animali>div>span {
  color: var(--color-gold-deep, #6f4e05);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.hotel-home .hotel-animali h2 {
  letter-spacing: -.03em;
  margin: 10px 0 12px;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem)
}

.hotel-home .hotel-animali p {
  max-width: 640px;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7
}

.hotel-home .hotel-animali>a {
  background: var(--color-text);
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 8px;
  flex: none;
  padding: 16px 25px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex
}

@media (max-width: 900px) {
  .hotel-home .hotel-spa-annuncio,
  .hotel-home .hotel-animali {
    width: calc(100% - 32px)
  }

  .hotel-home .hotel-spa-annuncio .hotel-spa-copy,
  .hotel-home .hotel-animali {
    padding: 34px 26px
  }

  .hotel-home .hotel-spa-list {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-animali {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }
}

/* ==================================================================
 * I tre riquadri della home: Ferragosto, la SPA del 2027 e Bellaria.
 *
 * Stessa forma ad arco per tutti e tre, disposti a triangolo: il
 * Ferragosto e il vertice in cima, centrato; sotto, appoggiate alle due
 * colonne, la SPA del 2027 e Bellaria. Sono piu piccoli di prima, cosi
 * il gruppo si legge come una composizione e non come tre fasce.
 *
 * Il fondo resta quello della pagina: i riquadri sono fotografie con un
 * velo sopra, la sezione non ha un colore suo e il gradiente della home
 * prosegue dietro di loro.
 * ================================================================== */

/* Tre proposte con lo stesso peso: stessa larghezza, stessa altezza,
   stesso velo, stesso raggio, stessa gerarchia di scritte. Prima la
   scheda di sinistra teneva due righe di griglia ed era alta il doppio
   delle altre due: a finestra piena la fascia risultava sbilanciata,
   mentre nella versione stretta, dove le schede diventavano tutte
   uguali, era ordinata. Quella forma e diventata la forma unica: la
   fascia si legge come una fila sola, non come un riquadro grande con
   due riquadri di contorno. */
.hotel-home .hotel-banner-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 24px;
  width: min(1180px, 100% - 64px);
  margin: 70px auto 130px;
  background: 0 0
}

/* Una forma sola per tutte e tre: rettangolo con gli angoli
   addolciti, lo stesso raggio delle camere e dei servizi piu in alto.
   L'altezza cresce con la finestra ma resta la stessa per tutte, cosi
   le fotografie si tagliano allo stesso modo e la fila e regolare. */
.hotel-home .hotel-banner {
  border-radius: 20px;
  min-height: clamp(400px, 32vw, 440px);
  margin: 0;
  display: flex;
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.hotel-home .hotel-banner>img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1.2s var(--ease-out, cubic-bezier(.2,.7,.2,1))
}

.hotel-home .hotel-banner:hover>img {
  transform: scale(1.04)
}

/* Un velo solo per tutte e tre, leggero in alto e pieno in basso: la
   fotografia si vede dove non ci sono parole e le scritte restano
   leggibili dove ci sono. Prima la scheda principale aveva un velo piu
   scuro delle altre e la fila sembrava fatta di due materiali. */
.hotel-home .hotel-banner-velo {
  background:
    linear-gradient(180deg, #16202b8f 0%, #16202b47 28%, #16202bcc 62%, #16202bf7 100%);
  position: absolute;
  inset: 0;
  z-index: -1
}

.hotel-home .hotel-banner-copy {
  color: var(--color-on-dark);
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
  width: 100%;
  padding: 28px 26px;
  display: flex
}

.hotel-home .hotel-banner-eyebrow {
  color: var(--color-gold-light, #eec97a);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px #0b1219e6;
  margin: 0;
  font-size: .76rem;
  font-weight: 800
}

.hotel-home .hotel-banner-copy h2 {
  color: var(--color-gold-light, #eec97a);
  letter-spacing: -.02em;
  text-shadow: 0 4px 26px #0b1219cc;
  margin: 10px 0 10px;
  font-size: clamp(1.4rem, 1.65vw, 1.72rem);
  line-height: 1.14
}

.hotel-home .hotel-banner-copy>p:not(.hotel-banner-eyebrow) {
  color: var(--color-on-dark);
  max-width: 34ch;
  margin: 0 0 20px;
  font-size: .92rem;
  line-height: 1.6
}

.hotel-home .hotel-banner-azione {
  background: var(--color-gold-light, #eec97a);
  color: var(--color-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  align-self: flex-start;
  padding: 13px 22px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  display: inline-flex
}

.hotel-home .hotel-banner-azione:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px #0b12194d
}

/* Il riquadro di Bellaria ha due strade invece di una: scoprire il paese
   sul sito e aprirlo sulla mappa. Il pulsante pieno resta uno solo,
   quello che porta dentro il sito; la mappa e un collegamento in
   chiaro sotto, cosi le due azioni non si contendono l'occhio e la
   scheda non diventa piu alta delle altre. */
.hotel-home .hotel-banner-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px
}

.hotel-home .hotel-banner-mappa {
  color: var(--color-on-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .03em;
  text-shadow: 0 2px 14px #0b1219e6;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #ffffff59;
  padding-bottom: 2px;
  transition: color .25s, border-color .25s
}

.hotel-home .hotel-banner-mappa:hover,
.hotel-home .hotel-banner-mappa:focus-visible {
  color: var(--color-gold-light, #eec97a);
  border-bottom-color: var(--color-gold-light, #eec97a)
}

.hotel-home .hotel-banner-mappa svg {
  flex: none
}

/* Sotto i 1180px si stringono solo i margini e lo spazio fra le
   schede: le colonne restano tre fino a 1000px, poi si passa alla
   colonna sola. Una disposizione intermedia a due schede affiancate
   piu una larga tutta la riga rimetterebbe in fila un riquadro diverso
   dagli altri, che e proprio quello che si voleva togliere. */
@media (max-width: 1180px) {
  .hotel-home .hotel-banner-trio {
    width: calc(100% - 48px);
    gap: 20px
  }

  .hotel-home .hotel-banner-copy {
    padding: 26px 22px
  }
}

@media (max-width: 1000px) {
  /* In una colonna sola le tre schede si incolonnano nell'ordine in cui
     si leggono, tutte della stessa altezza. */
  .hotel-home .hotel-banner-trio {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    margin: 50px auto 90px;
    gap: 18px
  }

  .hotel-home .hotel-banner {
    min-height: clamp(340px, 68vw, 400px);
    border-radius: 18px
  }

  .hotel-home .hotel-banner-copy {
    padding: 24px 20px
  }
}

/* Riga legale del footer: testo societario a sinistra, collegamenti
   a privacy e cookie a destra; sotto i 700px vanno uno sotto l'altro. */
.legal {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 28px;
  display: flex
}

.legal-links {
  flex-wrap: wrap;
  gap: 6px 18px;
  display: flex
}

.legal-links a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.25);
  padding-bottom: 1px;
  transition: opacity .25s ease
}

.legal-links a:hover,
.legal-links a:focus-visible {
  opacity: .65
}

/* Pagine di testo lungo (privacy e cookie policy): una colonna stretta,
   righe alte, nessun elemento decorativo che disturbi la lettura. */
.policy-page {
  padding: 90px 0 110px
}

.policy-page .wrap {
  width: min(760px,100% - 48px)
}

.policy-head span {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  display: block;
  margin-bottom: 14px
}

.policy-head h1 {
  font-size: clamp(2.4rem,4.5vw,3.6rem);
  line-height: 1.05;
  margin-bottom: 18px
}

.policy-head p {
  font-size: 1rem;
  line-height: 1.8
}

.policy-head .policy-date {
  font-size: .82rem;
  opacity: .7;
  margin-top: 10px
}

.policy-section {
  border-top: 1px solid var(--color-accent);
  margin-top: 44px;
  padding-top: 32px
}

.policy-section h2 {
  font-size: clamp(1.3rem,2vw,1.6rem);
  line-height: 1.25;
  margin-bottom: 16px
}

.policy-section p,
.policy-section li {
  font-size: .98rem;
  line-height: 1.85
}

.policy-section p + p {
  margin-top: 14px
}

.policy-section ul {
  margin: 14px 0 0;
  padding-left: 20px;
  list-style: disc
}

.policy-section li {
  margin-bottom: 10px
}

.policy-section a {
  color: var(--color-gold-deep,#6f4e05);
  text-decoration: underline;
  text-underline-offset: 3px
}

@media (max-width:700px) {
  .legal {
    flex-direction: column
  }

  .policy-page {
    padding: 60px 0 80px
  }
}

/* Riga di privacy e cookie in fondo al footer della home: occupa tutte
   le colonne della griglia, cosi resta sotto ai tre blocchi di contatti. */
.hotel-home .hotel-footer .hotel-legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-accent);
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 16px;
  display: flex
}

.hotel-home .hotel-footer .hotel-legal a {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0,0,0,.25);
  padding-bottom: 1px;
  display: inline-block
}

/* ==========================================================================
   Adattamento al telefono
   ==========================================================================
   Il sito nasce per lo schermo grande e sul telefono le sezioni venivano solo
   impilate mantenendo le misure del desktop: fotografie alte quanto mezzo
   schermo, titoli da 33px, spazi vuoti larghi. Il risultato era una pagina
   lunghissima da scorrere.

   Qui le misure vengono riportate alla scala del telefono: fotografie piu
   basse, titoli piu contenuti, spazi ridotti. Il blocco sta in fondo al file
   per vincere sulle regole precedenti senza doverle riscrivere una a una. */

@media (max-width: 680px) {
  /* Fascia di apertura delle pagine interne: 400px erano piu di meta
     schermo prima ancora di leggere una riga. */
  .page-hero {
    height: 300px
  }

  .page-hero .wrap {
    padding-bottom: 34px
  }

  .page-hero h1 {
    margin-bottom: 10px;
    font-size: 2.3rem
  }

  .page-hero p {
    font-size: .98rem
  }

  .hotel-home {
    padding-bottom: 44px
  }

  /* Le tre fotografie grandi in fondo alla home occupavano insieme piu di
     una schermata e mezza. */
  .hotel-home .hotel-banner {
    min-height: 230px;
    border-radius: 16px
  }

  .hotel-home .hotel-banner-trio {
    gap: 14px;
    margin: 34px auto 56px
  }

  .hotel-home .hotel-banner-copy {
    padding: 20px 18px
  }

  .hotel-home .hotel-banner-copy h2 {
    font-size: 25px
  }

  /* Blocchi con fotografia sopra e testo sotto. */
  .hotel-home .hotel-split > img {
    min-height: 210px;
    max-height: 210px
  }

  .hotel-home .hotel-split-copy,
  .hotel-home .hotel-restaurant .hotel-split-copy {
    padding: 30px 20px
  }

  /* Titoli: la scala del desktop era rimasta quasi intatta. */
  .hotel-home .hotel-section-copy h2,
  .hotel-home .hotel-split-copy h2 {
    font-size: 26px
  }

  .hotel-home .hotel-section-heading h2 {
    font-size: 23px
  }

  /* Spazi fra una sezione e l'altra. */
  .hotel-home .hotel-services {
    padding-top: 20px;
    padding-bottom: 34px
  }

  .hotel-home .hotel-rooms {
    padding-top: 18px
  }

  /* Due colonne, non tre: piu in alto la fila diventa una griglia
     invece di una striscia da scorrere, ma il blocco dei 1000px viene
     dopo e la rimetterebbe a tre colonne da 105px l'una. */
  .hotel-home .hotel-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  /* La carta e' solo il contenitore: le due facce sono in posizione
     assoluta dentro di essa, quindi un padding qui non le rimpicciolisce,
     le stacca dal bordo e lascia vedere il fondo nero della carta. */
  .hotel-home .hotel-service-card {
    height: 185px;
    min-height: 185px;
    padding: 0
  }

  .hotel-home .hotel-reviews-location {
    gap: 24px;
    padding: 32px 18px
  }

  .hotel-home .hotel-location iframe {
    min-height: 190px
  }

  .hotel-home .hotel-location > div {
    padding: 26px 20px
  }

  .hotel-home .hotel-location > img {
    max-height: 210px
  }
}

/* Scala dei titoli sul telefono.
   I titoli di sezione restavano fra i 37 e i 38px: su uno schermo largo
   390px una riga ne contiene otto o nove lettere, quindi ogni titolo
   occupava tre righe e spingeva in basso tutto il resto. */
@media (max-width: 680px) {
  main h1 {
    font-size: clamp(26px, 7.2vw, 32px);
    line-height: 1.12
  }

  main h2 {
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.18
  }

  main h3 {
    font-size: clamp(17px, 4.6vw, 20px)
  }

  .price-cta h2,
  .story-cta h2 {
    font-size: 25px
  }
}

/* Richiamo finale in fondo a ogni pagina: il titolo restava a 2rem. */
@media (max-width: 680px) {
  .final-cta h2 {
    font-size: 1.55rem;
    line-height: 1.2
  }
}

/* ------------------------------------------------------------------
 * Telefono: il piede della pagina e il richiamo finale.
 *
 * Sotto i 560px le quattro colonne del footer si incolonnavano tutte,
 * con 55px di stacco fra una e l'altra: il solo piede occupava 908px,
 * piu di una schermata intera, ripetuto in fondo a ogni pagina.
 * Con due colonne, il logo largo su tutta la riga e uno stacco ridotto
 * il piede scende sotto i 500px senza togliere nulla.
 * ------------------------------------------------------------------ */
@media (max-width: 680px) {
  footer {
    padding-top: 34px
  }

  .footer-grid,
  .hotel-home .hotel-footer .hotel-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px
  }

  /* Il blocco con il logo e la presentazione resta a tutta larghezza:
     e' l'unico che ha bisogno di una riga di testo lunga. */
  .footer-grid>div:first-child {
    grid-column: 1/-1
  }

  /* Sui telefoni piu' stretti (320px) l'indirizzo di posta e le parole
     lunghe del tedesco allargavano la colonna: il piede diventava piu'
     largo dello schermo e la pagina scorreva di lato. Le colonne possono
     restringersi e le parole troppo lunghe vanno a capo. */
  .footer-grid>div {
    min-width: 0
  }

  .footer-grid p,
  .footer-grid a {
    overflow-wrap: anywhere
  }

  .footer-grid img {
    width: 140px
  }

  .footer-grid>div:first-child p {
    margin-top: 8px
  }

  .footer-grid h3 {
    margin-bottom: 6px
  }

  .footer-grid p,
  .footer-grid a {
    line-height: 1.6
  }

  .legal {
    margin-top: 22px;
    padding: 14px 0
  }

  .final-cta {
    padding: 30px 0
  }

  .final-cta .wrap {
    gap: 16px
  }
}

/* ------------------------------------------------------------------
 * Telefono: la home.
 *
 * I blocchi con fotografia sopra e testo sotto, i tre riquadri in fondo
 * e le schede delle camere tenevano misure pensate per il desktop: sul
 * telefono si susseguivano tutti alti uguali e la pagina arrivava a
 * cinque schermate e mezza.
 * ------------------------------------------------------------------ */
@media (max-width: 680px) {
  .hotel-home .hotel-split > img {
    min-height: 175px;
    max-height: 175px
  }

  .hotel-home .hotel-split-copy,
  .hotel-home .hotel-restaurant .hotel-split-copy {
    padding: 22px 18px
  }

  .hotel-home .hotel-banner {
    min-height: 200px
  }

  .hotel-home .hotel-banner-copy {
    padding: 18px 16px
  }

  .hotel-home .hotel-banner-trio {
    gap: 10px;
    margin: 26px auto 40px
  }

  /* Le schede delle camere scorrono di lato: la fotografia era alta
     quanto mezzo schermo anche dentro il carosello. */
  .hotel-home .hotel-room-card > img {
    height: 165px;
    min-height: 165px;
    max-height: 165px
  }

  .hotel-home .hotel-room-card > div {
    padding: 16px 18px
  }
}