/* Fraunces (SOFT 100, pesi 600-700) ospitato sul sito — sostituisce Recoleta */
/* Fraunces — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/Fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* DM Sans ospitato sul sito (non più da Google Fonts) — font variabile, pesi 100-1000 */
/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-Italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
  }

:root {
  --background: #F8F4EF;
  --blu: #0D2644;
  --azzurro: #AFCAD6;
  --giallo: #FFCC33;
  --bianco: #FFFFFF;
  --testi: "DM Sans", sans-serif;
  --titoli: "Fraunces", serif;
}

/* TIPOGRAFIA ED ELEMENTI GLOBALI */

body {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  color: var(--blu);
  font-size: 1.1em;
  line-height: 1.3em;
}

h1 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  color: var(--blu);
  font-size: 4em;
  text-wrap: balance;
  white-space: pre-line;
  line-height: 1.1em;
}

h2, h3 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  color: var(--blu);
  font-size: 1.5em;
  text-wrap: balance;
  white-space: pre-line;
  padding-bottom: 5px;
  width: fit-content;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--giallo);
    transform: scaleX(var(--bordo, 1));
    transform-origin: center;
  }
}

h4 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  color: var(--azzurro);
  font-size: 2.5em;
  line-height: 1.1em;
  text-wrap: balance;
  white-space: pre-line;
}

h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--blu);
  font-size: 1.2em;
  line-height: 1.3em;
  text-wrap: balance;
}

.font-weight-bold {
  font-weight: 600!important;
  color: var(--blu);
}

a {
  color: var(--blu);

  &:hover {
    text-decoration: none;
    color: var(--blu);
  }
}

p {
  margin-bottom: 0;
}




/* PADDING - MARGINI */
.pd-top-200 {
  padding-top: 200px;
}

.pd-top-100 {
  padding-top: 100px;
}

.pd-top-50 {
  padding-top: 50px;
}

.pd-top-25 {
  padding-top: 25px;
}

.pd-top-10 {
  padding-top: 10px;
}

.pd-top-btm-100 {
  padding: 100px 0;
}

.pd-btm-50 {
  padding-bottom: 50px;
}

.pd-btm-25 {
  padding-bottom: 25px;
}

.pd-btm-10 {
  padding-bottom: 10px;
}

.mg-top-100 {
  margin-top: 100px;
}

.img-par {
  overflow: hidden;
  position: relative;
}

.img-par img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
}

.illustrazione {
  filter: blur(20px);
  will-change: filter;
}

.split-heading {
  text-wrap: wrap;
}

.cont-img {
  width: 100%;
  height: 100vh;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ------------------------------------------------ CTA ------------------------------------------------ */

.cta-std {
  background: var(--giallo);
  font-family: "Fraunces", serif;
  font-size: 1.2em;
  padding: 10px 30px;
  border-radius: 10em;
  transition: all .5s cubic-bezier(.215, .61, .355, 1);

  &:hover {
    background: var(--blu);
    color: var(--giallo);
    border-radius: 10px;
  }
}



/* ------------------------------------------------ HOME PAGE ------------------------------------------------ */

#heroHome {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 250px 0 120px;

  #videoHero {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .filtro {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(13, 38, 68, .9);
  }

  .cont-hero {
    position: relative;
    text-align: center;
    width: 100%;

    h1 {
      color: var(--bianco);
      padding: 15px 0 50px;
      font-size: 5em;

      span {
        font-size: 65%;
      }
    }

    h2 {
      color: var(--bianco);
      width: 50%;
      margin: 0 auto;
      white-space: pre-line;
      margin-bottom: 100px;
      font-size: 1.1em;
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      padding-bottom: 0;

      &::after {
        display: none;
      }
    }
  }
}

#homeDue {
  background-color: rgba(13, 38, 68, 1);
  background-image: url('../img/Cover_Hero.webp');
  background-size: cover;
  background-blend-mode: multiply;
  color: var(--bianco);
  padding: 100px 0 0;
  text-align: center;
  height: 100vh;

  h2 {
    color: var(--bianco);
    margin: 0 auto;
    margin-bottom: 50px;
  }

  p {
    font-size: 3vw;
    line-height: 1.2em;
  }
}

#smooth-wrapper {
  position: relative;
  z-index: 2;
}

.link-prenotazione {
  display: flex;
  align-items: center;
  width: fit-content;
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 997;
  opacity: 0;
  visibility: hidden;

  &.dietro {
    z-index: 1;
  }

  .prenota-ora {
    background: var(--giallo);
    padding: 0 40px 0 40px;
    height: 60px;
    border-top-left-radius: 10em;
    border-bottom-left-radius: 10em;
    display: flex;
    align-items: center;

    a {
      font-family: var(--titoli);
      font-size: 1.7em;
    }
  }

  .mail {
    padding: 0 30px;
    background: var(--background);
    height: 60px;
    display: flex;
    align-items: center;
  }

  .wa {
    padding: 0 30px 0;
    background: var(--azzurro);
    border-top-right-radius: 10em;
    border-bottom-right-radius: 10em;
    height: 60px;
    display: flex;
    align-items: center;
  }
}

#homeTre {
  padding: 200px 0 100px;

  .col-due {

    p {
      padding: 20px 0 50px;
    }
    
    img {
      width: 50%;
      aspect-ratio: 1 / 1;
      margin: 50px 0;
    }
  }

  .illustrazione {
    width: 30%;
    margin: 0 auto;
    margin-top: 100px;

    img {
     width: 100%;
    }
  }
}

#testoMarquee {
  overflow: hidden;
  white-space: nowrap;

  .marquee-inner {
    display: flex;
    width: max-content;
    will-change: transform;
  }

  p {
    font-family: var(--titoli);
    font-size: 6vw;
    line-height: 3em;
    color: var(--azzurro);
  }

  span {
    padding-right: 5vw;
  }
}

.servizi {
  background: var(--background);
  padding: 50px;

  .blocco {
    display: flex;
    align-items: center;
    padding: 15px 0;

    .img {
      width: 15%;
      margin-right: 25px;
    }

    .testo {
      width: 85%;
    }
  }
}

#homeQuattro {
  padding: 150px 0 200px;

  .cont-img {
    width: 100%;
    height: 75vh;
    display: flex;
    justify-content: end;
    margin: 100px 0 0;
    
    img {
      width: 60%;
    }
  }

  .testo-dx {
    padding-left: 50px;

    p {
      padding: 20px 0 50px;
      white-space: pre-line;
      width: 90%;
    }
  }
}

#homeCinque {
  padding: 0 0 200px;
  display: flex;

  .row {
    align-items: center;
  }

  .cont-img.uno {
    height: 60vh;
  }

  .cont-img.due {
    height: 80vh;
  }

  p {
    padding-bottom: 50px;
  }
}

.box-offerta {
  padding: 1em;
  width: 100%;
  display: flex;
  align-items: center;

  .cont-img {
    width: 35%;
    height: 50vh;
  }

  .cont-testo {
    width: 60%;
    padding-left: 50px;

    p {
      color: var(--bianco);
      width: 90%;
      padding: 25px 0 50px;
    }
  }
}

.box-offerta.uno {
  background-color: var(--blu);

  a {
    &:hover {
      background: var(--bianco);
      color: var(--blu);
    }
  }
}

.box-offerta.due {
  background-color: var(--azzurro);

  h4, p {
    color: var(--blu);
  }
}

#homeSei {

  padding-top: 100px;

  h2 {
    margin-bottom: 25px;
    font-size: 5em;
    color: var(--azzurro);

    &::after {
      display: none;
    }
  }

  .offerte {
    background-color: var(--background);
    padding: 1em;
  }

  .slider-offerte {

    .swiper-slide {
      width: 60%;
      height: auto;
    }
  }
}

#cta {
  background: var(--background);
  padding: 200px 0 0;

  h4 {
    text-align: center;
    font-size: 7vw;
    padding-bottom: 100px;
  }

  p {
    font-family: var(--titoli);
    font-size: 1.2em;
    white-space: pre-line;
    padding-bottom: 50px;
    padding-top: 150px;
  }

  .uno {
    height: 50vh;
    margin-top: 100px;
  }

  .due {
    height: 80vh;
  }
}

footer {
  background: var(--blu);
  padding: 50px 0 20px;
  color: var(--bianco);

  .info {
    display: flex;
    gap: 50px;
  }

  .box {
    width: 20%;

    img {
      width: 50%;
    }

    p {
      font-family: var(--titoli);
      border-bottom: solid 1px var(--giallo);
      width: fit-content;
      margin-bottom: 10px;
    }

    small {
      white-space: pre-line;
    }

    a {
      color: var(--bianco);
      transition: all .5s cubic-bezier(.215, .61, .355, 1);

      &:hover {
        color: var(--azzurro);
      }
    }
  }

  .social {
    display: flex;
    align-items: end;

    a {
      font-family: var(--titoli);
      transition: all .5s cubic-bezier(.215, .61, .355, 1);
      font-size: 1.3em;

      &:hover {
        color: var(--azzurro);
      }
    }

    span {
      display: block;
      width: 30px;
      height: 1px;
      background: var(--giallo);
      margin: 0 10px;
    }
  }

  .legali {
    padding: 50px 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    small {
      color: var(--azzurro);
    }

    a {
      color: var(--azzurro);
      transition: all .5s cubic-bezier(.215, .61, .355, 1);

      &:hover {
        color: var(--bianco);
      }
    }

    span {
      display: block;
      width: 100%;
      height: 1px;
      background: var(--azzurro);
      margin-bottom: 10px;
    }
  }
}

/* ------------------------------------------------ PAGINA CAMERE ------------------------------------------------ */

#heroCamere {
  background-image: url('../img/Hero_Camere.webp');
}

#heroRistorante {
  background-image: url('../img/Hero_Ristorante.webp');
}

.hero-interna {
  background-color: rgba(13, 38, 68, 1);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  padding: 250px 0 120px;

  .cont-hero {
    text-align: center;
  }

  h1 {
    color: var(--bianco);
    padding: 30px 0 50px;
  }

  p {
    color: var(--bianco);
    width: 60%;
    margin: 0 auto;
  }

  .ancore {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 40px;
    margin-top: 80px;

    h3::after {
      display: none;
    }

    a {
      font-family: var(--titoli);
      font-size: 1.5em;
      color: var(--azzurro);
      padding-bottom: 5px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--giallo);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .5s cubic-bezier(.215, .61, .355, 1);
      }

      &:hover {
        color: var(--azzurro);

        &::after {
          transform: scaleX(1);
        }
      }
    }
  }
}

#camereDue {
  

  h2 {
    margin-bottom: 25px;
  }

  p {
    width: 90%;
  }

  .row {
    align-items: end;
  }

  .cont-img {
    height: 50vh!important;
  }

  .cont-img.due {
    width: 75%;
    height: 35vh!important;
    margin-bottom: 50px;
  }
}

#camereTre {
  padding-bottom: 100px;

  .tipologia {
    padding: 100px 0;

    .row {
      align-items: center;
    }

    .cont-img {
      height: 70vh;
    }

    .disponibilita {
      font-family: var(--titoli);
      color: var(--azzurro);
      display: block;
      margin-bottom: 15px;
    }

    h2 {
      margin-bottom: 25px;
    }

    p {
      padding-bottom: 50px;
    }
  }
}

#camere {
  background: var(--blu);
  margin: 200px 0 0;
  color: var(--bianco);
  padding: 100px;

  .row {
    padding: 100px 0;
  }

  h2 {
    color: var(--azzurro);
    font-size: 2.5em;
    line-height: 1.1em;
    text-wrap: wrap;
    white-space: pre-line;
    padding: 35px 0 15px;

    &::after {
      display: none;
    }
  }

  .cta-std:hover {
    background: var(--background)!important;
    color: var(--blu)!important;
  }

  .dettagli span {
    background: var(--azzurro);
    width: fit-content;
    color: var(--blu);
    padding: 5px 15px;
    margin-right: 10px;
    border-radius: 10em;
  }

  p {
    margin-bottom: 50px;
  }

  .largo {
    background: var(--background);
    padding: 0 50px;
    border-radius: 35px;

    h2 {
      color: var(--blu);
    }

    p {
      color: var(--blu);
    }

    .cta-std:hover {
      background: var(--azzurro)!important;
      color: var(--blu)!important;
    }

    .dettagli {
      position: relative;
      top: -10px;
    }
  }

  .dettagli.family {
    color: var(--blu);

    span {
      margin-bottom: 50px;
    }
  }

  .gallery {
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    h2 {
      font-size: 4em;
      color: var(--giallo);
    }

    .cta-std {
      background: var(--bianco);
    }
  }
}




.contatti-diretti {
  display: flex;
  flex-direction: column;
  margin-top: 50px;

  a {
    font-family: var(--titoli);
    padding-bottom: 10px;
  }
}


/* ------------------------------------------------ GALLERY ------------------------------------------------ */

body:has(.gallery-modale.aperta) #menuDesk {
  opacity: 0;
  visibility: hidden;
}

body.blocca-scroll {
  overflow: hidden;
}

.gallery-modale {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(13, 38, 68, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 8%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s cubic-bezier(.215, .61, .355, 1), visibility .5s;

  &.aperta {
    opacity: 1;
    visibility: visible;
  }

  .slider-gallery {
    width: 100%;
    max-width: 1200px;
  }

  .swiper-slide img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    border-radius: 35px;
  }

  .freccia {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--giallo);
    cursor: pointer;
    z-index: 2;
    transition: background .5s cubic-bezier(.215, .61, .355, 1);

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      border-top: solid 2px var(--blu);
      border-right: solid 2px var(--blu);
    }

    &:hover {
      background: var(--azzurro);
    }
  }

  .freccia.avanti {
    right: 3%;

    &::before {
      transform: translate(-65%, -50%) rotate(45deg);
    }
  }

  .freccia.indietro {
    left: 3%;

    &::before {
      transform: translate(-35%, -50%) rotate(-135deg);
    }
  }

  .chiudi {
    position: absolute;
    top: 50px;
    right: 8%;
    width: 50px;
    height: 50px;
    cursor: pointer;

    span {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--bianco);
      transition: background .5s cubic-bezier(.215, .61, .355, 1);
    }

    span:first-child {
      transform: rotate(45deg);
    }

    span:last-child {
      transform: rotate(-45deg);
    }

    &:hover span {
      background: var(--giallo);
    }
  }
}


/* ------------------------------------------------ PAGINA RISTORANTE ------------------------------------------------ */

#colazione {
  padding: 200px 0 150px;

  .row {
    align-items: center;
  }

  .cont-img.grande {
    height: 85vh;
  }

  .testo {

    h2 {
      font-size: 2.5em;
      line-height: 1.1em;
      padding: 25px 0 25px;

      &::after {
        display: none;
      }
    }
  }
}

.dettagli span {
  background: var(--azzurro);
  width: fit-content;
  color: var(--blu);
  padding: 5px 15px;
  margin-right: 10px;
  border-radius: 10em;
  display: inline-block;
}

#ristorante {
  background: var(--blu);
  color: var(--bianco);
  padding: 150px 100px;

  h2 {
    color: var(--azzurro);
    font-size: 2.5em;
    line-height: 1.1em;
    padding: 25px 0;

    &::after {
      display: none;
    }
  }

  p {
    margin-bottom: 50px;
  }

  .chiaro {
    background: var(--background);
    color: var(--blu);
    border-radius: 35px;
    padding: 50px;

    h2 {
      color: var(--blu);
    }

    .cta-std:hover {
      background: var(--azzurro)!important;
      color: var(--blu)!important;
    }
  }

  .evidenza {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .voce {
      padding-bottom: 20px;
      margin-bottom: 35px;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--giallo);
        transform: scaleX(var(--bordo, 1));
        transform-origin: center;
      }

      h3 {
        color: var(--bianco);
        font-size: 2em;
        width: 100%;

        &::after {
          display: none;
        }
      }
    }
  }

  .cont-img.basso {
    height: 60vh;
    border-radius: 35px;
    overflow: hidden;
    margin-top: 100px;
    padding: 0;
  }
}

#trattamenti {
  padding: 100px 0 120px;

  .row {
    margin: 0;
  }

  h2 {
    font-size: 5.5em;
    line-height: 1.1em;
    margin: 0 auto;

    &::after {
      display: none;
    }
  }

  .intro {
    text-align: center;
    width: 50%;
    margin: 25px auto 45px;
  }

  .formula {
    background: var(--background);
    border-radius: 35px;
    padding: 40px 30px;
    position: relative;
    will-change: transform;

    .numero {
      font-family: var(--titoli);
      font-size: 3em;
      color: var(--giallo);
      line-height: 1em;
    }

    h3 {
      font-size: 1.8em;
      width: 100%;
      padding: 15px 0 20px;

      &::after {
        display: none;
      }
    }
  }

  .formula.prima {
    z-index: 3;
  }

  .formula.seconda {
    background: var(--azzurro);
    margin-top: 50px;
    z-index: 2;
  }

  .formula.terza {
    background: var(--blu);
    margin-top: 100px;
    z-index: 1;

    h3, p {
      color: var(--bianco);
    }
  }
}

#ristoranteDue {
  padding: 200px 0 100px;

  .cont-img.uno {
    height: 50vh;
    margin-top: 100px;
  }
}


/* ------------------------------------------------ PAGINA DINTORNI ------------------------------------------------ */

#heroDintorni {
  background-image: url('../img/Cover_Hero.webp');
}

#posizione {
  padding: 200px 0 150px;

  .row {
    align-items: center;
  }

  .testo {
    padding-left: 50px;
  }

  .testo h2 {
    font-size: 2.5em;
    line-height: 1.1em;
    padding: 25px 0;

    &::after {
      display: none;
    }
  }

  .cont-img.mappa {
    height: 75vh;
    overflow: hidden;
  }
}

#mare {
  position: relative;

  .cont-img.sfondo {
    height: 90vh;
  }

  .sovrapposta {
    background: var(--blu);
    color: var(--bianco);
    border-radius: 50px;
    padding: 60px;
    width: 55%;
    margin-top: -150px;
    position: relative;

    h2 {
      color: var(--azzurro);
      font-size: 2.5em;
      line-height: 1.1em;
      padding: 25px 0;

      &::after {
        display: none;
      }
    }
  }
}

#bici {
  padding: 150px 0;

  p a {
    border-bottom: solid 1px var(--giallo);
  }

  h2 {
    font-size: 2.5em;
    line-height: 1.1em;
    padding-bottom: 25px;

    &::after {
      display: none;
    }
  }

  .testo {
    padding-left: 50px;
  }

  .evidenza .voce {
    border-top: solid 1px var(--giallo);
    padding-top: 20px;
    margin-bottom: 35px;

    h3 {
      width: 100%;
      margin-bottom: 10px;

      &::after {
        display: none;
      }
    }
  }
}

#borghi {
  background: var(--background);
  padding: 150px 0 100px;

  .row.tit {
    align-items: end;

    h3 {
      padding-bottom: 25px;
    }

    h3::after {
      display: none;
    }
  }

  .riga {
    background: var(--blu);
    margin: 0;
    padding: 50px;
    border-radius: 50px;
    color: var(--bianco);
    margin: 100px 0;

    .cont-img {
      height: 50vh;

      img {
        border-radius: 50px;
      }
    }

    h3 {
      font-size: 3em;
      color: var(--azzurro);
      margin-bottom: 25px;
      width: fit-content;
    }

    p {
      width: 90%;
    }
  }

  .riga.due {
    background: var(--bianco);
    color: var(--blu);

    .box {
      padding-left: 50px;
    }
  }

  h2 {
    font-size: 7em;
    line-height: 1.1em;
    color: var(--azzurro);

    &::after {
      display: none;
    }
  }

  .intro {
    text-align: left;
  }

  .tessera {

    .cont-img {
      height: 45vh;
      overflow: hidden;
      margin-bottom: 10px;
    }

    h3 {
      width: 100%;
      margin-bottom: 10px;

      &::after {
        display: none;
      }
    }
  }

  .tessera.bassa {
    margin-top: 100px;
  }
}

#faq {
  padding: 150px 0 0;

  h2 {
    font-size: 7em;
    line-height: 1.1em;
    margin-bottom: 25px;

    &::after {
      display: none;
    }
  }

  .cont {
    background: var(--azzurro);
    border-radius: 50px;
    padding: 0 50px;
    margin: 25px 0;

    .cont-titolo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30px 0;
      cursor: pointer;

      h3 {
        width: 90%;
        font-size: 1.3em;
        margin-bottom: 0;
        padding: 0;

        &::after {
          display: none;
        }
      }

      span {
        font-size: 2.5em;
        line-height: 1em;
        color: var(--blu);
        transition: transform .5s cubic-bezier(.215, .61, .355, 1);
      }

      &[aria-expanded="true"] span {
        transform: rotate(45deg);
      }
    }

    .cont-testo p {
      padding: 0 0 30px;
      width: 80%;
    }


    .cont-titolo.due h3 {
      color: var(--blu);
    }
  }
}


/* ------------------------------------------------ PAGINA OFFERTE ------------------------------------------------ */

#heroOfferte {
  background-image: url('../img/Cover_Hero.webp');
}

#strisciaDiretta {
  background: var(--giallo);
  padding: 30px 0;

  p {
    font-family: var(--titoli);
    font-size: 1.3em;
    text-align: center;
    text-wrap: balance;
  }
}

#offerte {

  .offerta {
    padding: 150px 0;

    .row {
      align-items: center;
    }

    .cont-img {
      height: 80vh;
      overflow: hidden;
    }

    .numero {
      font-family: var(--titoli);
      font-size: 3em;
      line-height: 1em;
      color: var(--giallo);
    }

    h2 {
      font-size: 2.5em;
      line-height: 1.1em;
      padding: 15px 0 25px;

      &::after {
        display: none;
      }
    }

    p {
      width: 80%;
    }

    .dettagli {
      margin-bottom: 25px;
    }

    h5 {
      font-family: var(--titoli);
      margin: 35px 0 15px;
    }

    .include {
      list-style: none;
      padding: 0;

      li {
        padding: 8px 0 8px 25px;
        position: relative;
        border-bottom: solid 1px var(--azzurro);
        width: 80%;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 18px;
          width: 10px;
          height: 2px;
          background: var(--giallo);
        }
      }
    }

    .tariffe {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      li {
        background: var(--giallo);
        color: var(--blu);
        border-radius: 20px;
        padding: 15px 25px;
        font-family: var(--titoli);
        line-height: 1.3em;
      }

      span {
        display: block;
        font-family: var(--testi);
        font-weight: 300;
        font-size: .85em;
        opacity: .8;
      }
    }

    .condizioni {
      font-size: .9em;
      margin: 25px 0 35px;
      opacity: .8;
    }
  }

  .offerta.blu {
    background: var(--blu);
    color: var(--bianco);

    h2 {
      color: var(--azzurro);
    }

    .include li {
      border-bottom-color: rgba(255, 255, 255, .2);
    }

    p a {
      color: var(--azzurro);
      border-bottom: solid 1px var(--giallo);
    }

    .cta-std:hover {
      background: var(--background)!important;
      color: var(--blu)!important;
    }
  }

  .offerta.evidenza {

    .etichetta {
      display: block;
      width: fit-content;
      background: var(--giallo);
      color: var(--blu);
      border-radius: 20px;
      padding: 6px 18px;
      font-size: .85em;
      margin-bottom: 20px;
    }

    h2 {
      font-size: 3.2em;
    }
  }

  .offerta.azzurra {
    background: var(--azzurro);
  }

  .offerta.chiara {
    background: var(--background);
  }
}

.da-confermare {
  background: rgba(255, 204, 51, .35);
  border-left: solid 3px var(--giallo);
  padding-left: 10px!important;
  font-style: italic;

  &::before {
    display: none!important;
  }
}

#offerte .dettagli span {
margin-bottom: 10px;
} 


/* ------------------------------------------------ PAGINA CONTATTI ------------------------------------------------ */

#heroContatti {
  background-image: url('../img/Cover_Hero.webp');
}

/* ------------------------------------------------ PAGINA TYP E 404 ------------------------------------------------ */

#heroTyp, #heroErrore {
  background-image: url('../img/Cover_Hero.webp');
  min-height: 100vh;

  p a {
    color: var(--azzurro);
    border-bottom: solid 1px var(--giallo);
  }

  .azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 60px;
  }
}

#recapiti {
  padding: 150px 0;

  .row {
    align-items: center;
  }

  h2 {
    font-size: 2.5em;
    line-height: 1.1em;
    padding-bottom: 25px;

    &::after {
      display: none;
    }
  }

  .testo p {
    width: 90%;
    margin-bottom: 50px;
  }

  .griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  .recapito {
    background: var(--azzurro);
    border-radius: 35px;
    padding: 35px;

    h3 {
      font-family: var(--testi);
      font-weight: 400;
      font-size: 1em;
      width: 100%;
      padding: 0;
      margin-bottom: 15px;

      &::after {
        display: none;
      }
    }

    a, span {
      font-family: var(--titoli);
      font-size: 1.3em;
      line-height: 1.2em;
      display: block;
      white-space: pre-line;
      word-break: break-word;
    }
  }

  .recapito.giallo {
    background: var(--giallo);
  }
}

#preventivo {
  background: var(--blu);
  color: var(--bianco);
  padding: 150px 0;

  h2 {
    color: var(--azzurro);
    font-size: 2.5em;
    line-height: 1.1em;
    padding-bottom: 25px;

    &::after {
      display: none;
    }
  }

  .testo p {
    width: 90%;
  }

  form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 35px;
  }

  .campo {
    display: flex;
    flex-direction: column;
  }

  .campo.largo {
    grid-column: 1 / -1;
  }

  .avviso-errore {
    border-left: solid 3px var(--giallo);
    padding-left: 20px;

    p {
      font-family: var(--titoli);
      margin-bottom: 8px;
    }

    ul {
      margin: 0;
      padding-left: 18px;
    }
  }

  .campo-trappola {
    position: absolute;
    left: -9999px;
  }

  label {
    font-family: var(--titoli);
    color: var(--azzurro);
    margin-bottom: 8px;
  }

  input, select, textarea {
    background: transparent;
    border-bottom: solid 1px var(--azzurro);
    border-radius: 0;
    color: var(--bianco);
    padding: 10px 0;
    font-size: 1em;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .5s cubic-bezier(.215, .61, .355, 1);

    &:focus {
      border-bottom-color: var(--giallo);
    }
  }

  select option {
    color: var(--blu);
  }

  textarea {
    resize: vertical;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
  }

  .privacy {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    font-size: .9em;

    input {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      border: solid 1px var(--azzurro);
      border-radius: 4px;
      padding: 0;
      margin-top: 2px;
      cursor: pointer;

      &:checked {
        background: var(--giallo);
        border-color: var(--giallo);
      }
    }

    label {
      font-family: var(--testi);
      color: var(--bianco);
      margin: 0;
    }

    a {
      color: var(--azzurro);
      text-decoration: underline;
    }
  }

  .cta-std {
    width: fit-content;
    cursor: pointer;
    margin-top: 15px;

    &:hover {
      background: var(--background)!important;
      color: var(--blu)!important;
    }
  }
}

#arrivare {
  padding: 150px 0;

  h2 {
    font-size: 2.5em;
    line-height: 1.1em;
    padding-bottom: 25px;

    &::after {
      display: none;
    }
  }

  .testo p {
    width: 90%;
  }

  .testo .cta-std {
    display: inline-block;
    margin-top: 35px;
  }

  .evidenza .voce {
    border-top: solid 1px var(--giallo);
    padding-top: 20px;
    margin-bottom: 35px;

    h3 {
      width: 100%;
      margin-bottom: 10px;

      &::after {
        display: none;
      }
    }
  }
}

#mappa {
  padding: 0 0 150px;

  .row.tit {
    align-items: end;
    margin-bottom: 50px;
  }

  h2 {
    font-size: 7em;
    line-height: 1.1em;

    &::after {
      display: none;
    }
  }
}

.cont-mappa {
  height: 50vh;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 50px;

  iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(1) contrast(.9);
    transition: filter .5s cubic-bezier(.215, .61, .355, 1);

    &:hover {
      filter: none;
    }
  }
}


/* ------------------------------------------------ PAGINA NOTE LEGALI ------------------------------------------------ */

#heroLegali {
  background-image: url('../img/Cover_Hero.webp');
}

#testoLegale {
  padding: 150px 0;

  .container-fluid {
    max-width: 900px;
  }

  .blocco {
    margin-bottom: 60px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  h2 {
    font-size: 1.8em;
    line-height: 1.2em;
    margin-bottom: 25px;

    &::after {
      display: none;
    }
  }

  p {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  a {
    border-bottom: solid 1px var(--giallo);
    transition: color .5s cubic-bezier(.215, .61, .355, 1);

    &:hover {
      color: var(--azzurro);
    }
  }

  .dati {
    list-style: none;
    padding: 0;
    margin-top: 25px;

    li {
      border-top: solid 1px var(--azzurro);
      padding: 15px 0;
      display: flex;
      gap: 25px;
    }

    span {
      font-family: var(--titoli);
      width: 180px;
      flex-shrink: 0;
    }
  }

  .aggiornamento {
    font-size: .9em;
    opacity: .7;
    margin-top: 35px;
  }
}


/* ------------------------------------------------ CREDITI FOTOGRAFICI ------------------------------------------------ */

.credito-foto {
  font-size: .8em;
  line-height: 1.4em;
  opacity: .6;
  margin-top: 35px;

  a {
    border-bottom: solid 1px var(--giallo);
  }
}