/* 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
}

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)
}

.menu {
  color: var(--color-text);
  background: 0 0;
  border: 0;
  display: none
}

.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
}

.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
}

.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 {
    padding-bottom: 68px
  }

  .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
  }

  .hotel-home .hotel-service-grid {
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 2px 14px;
    display: flex;
    overflow-x: auto
  }

  .hotel-home .hotel-service-card {
    scroll-snap-align: start;
    min-width: 235px;
    min-height: 220px
  }

  .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
  }

  .hotel-home .hotel-mobile-actions {
    z-index: 20;
    background: var(--color-surface-warm-alt);
    grid-template-columns: repeat(3,1fr);
    height: 68px;
    display: grid;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -8px 24px #11111121
  }

  .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;
    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) {
  .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: fixed;
    bottom: 0;
    left: 0;
    right: 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
  }

  footer:not(.hotel-footer) {
    padding-bottom: 76px
  }
}

/* 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
  }

  .hotel-home .hotel-service-card {
    min-height: 185px;
    padding: 24px 16px 22px
  }

  .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
  }
}