body {
    color: var(--color7);
    background-color: var(--col-bianco);
    font-family: var(--font-principale);
    overflow-x: hidden !important;
}

.button,
a {
    color: var(--col-bianco);
}

#header.pos_fixed {
    background-color: var(--color1);
    -webkit-box-shadow: 0px 8px 35px -18px rgba(66, 68, 90, 0.42);
    -moz-box-shadow: 0px 8px 35px -18px rgba(66, 68, 90, 0.42);
    box-shadow: 0px 8px 35px -18px rgba(66, 68, 90, 0.42);
    height: 100px;
}

.button {
    color: #FFF;
    transition: 1s;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    border-radius: 0;
    font-weight: 600;
    height: 75px;
    display: inline-block;
}

#experience button {
    border: 2px solid;
}

#header>* {
    color: var(--col-bianco);
}

a:hover {
    color: var(--col-principale);
}

header li,
footer li,
a.menulingua {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-family: var(--font-family-6);
    font-family: var(--font-family-2);
}

.anteprimacamera .blocco_dati p {
    color: var(--nero);
    text-transform: none;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center !important;
    font-weight: 500;
    letter-spacing: 0.2em;
    font-family: var(--font-family-2);
    font-size: 1rem;
}

#bottone_menu_header.bottone-fix,
#bottone_menu_footer.bottone-fix {
    display: flex;
    align-items: flex-start;
}

#bottone_menu_header .buttonmenu .icon-bar {
    background: var(--color1);
}

#bottone_menu_header.bottone-fix,
#bottone_menu_footer.bottone-fix {
    flex-direction: column !important;
    align-items: flex-start !important;
}

button.multilingue a {
    text-transform: uppercase;
    color: var(--color1);
    font-family: var(--font-family-6);
    letter-spacing: 0.15em;
}


.pos_fixed button.multilingue a {
    text-transform: uppercase;
    color: var(--color2);
    font-family: var(--font-family-6);
}

h1 {
    font-size: 3rem;
    font-family: var(--font-family-1);
    color: var(--color3);
    margin-bottom: 0px;
    line-height: 0.9em;
}

h2 {
    font-size: 17px;
    line-height: 1.1em;
    font-family: var(--font-family-2);
    color: var(--color7);
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.03em;
    margin-top: 25px;
    font-weight: 600;
}

h3 {
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    font-size: 2rem;
    font-family: var(--font-family-2);
    color: var(--color2);
    line-height: 1em;
    font-weight: 300;
}

h5 {
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    font-size: 2.2rem;
    font-family: var(--font-family-4);
    color: var(--color6);
    line-height: 1em;
}

p {
    font-family: var(--font-family-2);
    color: var(--nero);
    line-height: 1.8em;
    font-size: 1.2rem;
    text-align: justify !important;
    font-weight: 300;
}

.sez-bckg {
    background-color: #f0dfb5;
    width: 100%;
    height: 165px;
}

.sez-home-introcamere h2 {
    font-weight: 300;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 2rem;
    font-family: var(--font-family-4);
    color: var(--color6);
    line-height: 1.2em;
}

body#home section#slideshow {
    height: 100vh;
}

.sez-home-camere .blocco_foto_camera img {
    max-width: unset;
    height: 500px;
}

.sez-home-camere .blocco_dati {
    flex-flow: column wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: column !important;
}


.menu-selezione-hover .navbar-elem-menu {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}

.menu-selezione-hover .navbar-elem-menu {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
}

.menu-selezione-hover .navbar-elem-menu li {
    margin-bottom: 20px;
    opacity: 0.5;
}

.menu-selezione-hover .navbar-elem-menu>li a {
    color: #484848;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
}

.menu-selezione-hover .navbar-elem-menu li a p {
    display: none
}

.menu-selezione-hover .navbar-elem-menu li.sel {
    opacity: 1;
}

.menu-selezione-hover .navbar-elem-menu li.sel p {
    display: block
}

.buttonmenu label p {
    background-color: transparent;
    color: var(--color6);
}

#bottone_menu_header .label {
    text-transform: uppercase;
    background-color: transparent;
    color: var(--color6);
}

.bottone_aprimenu button.buttonmenu,
.bottone_aprimenu span.buttonmenu {
    margin-bottom: 5px;
}

#sezfooter1 .logosito {
    display: block;
    margin-bottom: 20px;
}

#sezfooter1 .label {
    text-align: justify;
    font-family: var(--font-family-2);
}

span.prefix {
    display: none;
}

/*STILE PERSONALIZZATO*/
.cbck_1 {
    background-color: rgb(0 0 0 / 20%);
    z-index: 1;
}

#camera #sez-camere h3 {
    color: #fff;
    text-align: center;
    margin-top: 0;
    padding-bottom: 0;
}

#camera .anteprimacamera.visuale_separati .blocco_dati {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spa-s p {
    color: var(--color1);
}

.spa-s h3 strong {
    color: var(--color1);
}

.cbck_51 {

    background: #52413C;
    background: linear-gradient(159deg, rgba(82, 65, 60, 1) 0%, rgba(82, 65, 60, 1) 37%, rgb(63 49 45) 67%, rgb(4 3 3) 88%, rgb(0 0 0) 100%) !important;
}

section#testo-intro.servizi-due .area {
    border-left: 5px;
    margin: 15px;
    width: calc(33% - 25px);
    background: #fff;
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 5%);
}

section#testo-intro.servizi-tre .area {
    /* border: 10px solid #ffffff; */
    border-left: 5px;
    margin: 15px;
    width: calc(33% - 25px);
    background: #fff;
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 5%);
}

section#testo-intro.servizi-due {
    background: #efe8e4;
    padding: 40px;
    padding-bottom: 0;
}

section#testo-intro.servizi-tre {
    background: #ede8e4;
    padding: 40px;
    /* margin-top: 30px; */
    padding-top: 0;
}

#testo-intro p {
    color: var(--nero);
}

.areabck {
    width: 100% !important;
}


/* Layout menu in 2 colonne uguali (6 elementi per colonna) */
#menu_header .navbar-nav-menu.liv1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 70%;
}

/* Uniforma le voci */
#menu_header .navbar-nav-menu.liv1>li {
    width: 100%;
}

/* Opzionale: migliora allineamento link */
#menu_header .navbar-nav-menu.liv1>li>a {
    display: block;
    width: fit-content;
}

.spa-home#sezione2 h3 strong {
    color: #fff !important;
}

.spa-home .primo p {
    color: #fff;
}

.spa-home .primo h3 {
    color: #fff;
}

.cbck_15 {
    /* background: #52413C !important; */
    background: #52413C;
    background: linear-gradient(159deg, rgba(82, 65, 60, 1) 0%, rgba(82, 65, 60, 1) 37%, rgb(63 49 45) 67%, rgb(4 3 3) 88%, rgb(0 0 0) 100%) !important;
}

footer#footer {
    background: #A78379;
    padding: 0;
}

div#sezfooter1 {
    background: #52413C;
}

#footer #sezfooter3 {
    border-top: 1px solid #00000000;
}

div#sezfooter1 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.cbck_14 {
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 37%, rgba(231, 224, 222, 1) 37%, rgba(231, 224, 222, 1) 83%, rgba(231, 224, 222, 1) 100%);
}

.cbck_108 {
    background: #D18975;
    background: linear-gradient(180deg, rgba(209, 137, 117, 1) 0%, rgba(209, 137, 117, 1) 37%, rgba(255, 255, 255, 1) 37%, rgba(255, 255, 255, 1) 83%, rgba(255, 255, 255, 1) 100%);
}

#experience .col-sm-12.col-md-6.area.sfondobckg.bckg_responsive.fisso {
    padding: 5%;
    border-right: 3px solid #FFF;
}

#experience .col-sm-12.col-md-3.area.sfondobckg.bckg_responsive.fisso {
    padding: 40px;
    border-right: 3px solid #fff;
}

.btn-chiudiFR i.zmdi.zmdi-close {
    color: var(--color2);
    font-size: 40px;
    font-weight: 100;
}

.contenitore-fr .button.button--standard,
.contenitore-fr button.button.button--standard:hover {
    background: var(--color1);
}

.menu-aperto .navbar-nav-menu li.nav-item .nav-link {
    padding: 5px 5px !important;
    font-family: var(--font-family-1);
    font-size: 1.4rem;
    margin-bottom: 5px;
    letter-spacing: 0em;
    text-align: center;
    text-transform: math-auto;
    background-color: transparent;
    font-weight: 400;
    color: var(--color1) !important;
    line-height: 1.5em;
    transition: .5s;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
}

li.nav-item.liv1.azioneher.prenotazioni a:hover {
    background-color: #ebb2a3 !important;
}

/*INIZIO MENU*/

/* RESET MENU MOBILE - PULIZIA TOTALE */
#menu_header {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
    height: auto !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: none !important;
    transition: none !important;
}

/* MENU CHIUSO */
#menu_header {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(100%) !important;
    pointer-events: none !important;
    transition:
        transform 0.5s ease,
        opacity 0.5s ease,
        visibility 0.5s ease !important;
}

/* MENU APERTO */
#menu_header.menu-aperto {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;

    pointer-events: auto !important;
}

/* MENU CHIUSO fade-out cinematografico con CHIUSURA LENTA */
#menu_header {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s linear 1.4s !important;
}

/* MENU APERTO fade-in cinematografico */
#menu_header.menu-aperto {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s linear 0s !important;
}

/* MENU CHIUSO fade-out cinematografico */
#menu_header {
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* MENU APERTO fade-in cinematografico */
#menu_header.menu-aperto {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition:
        opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

#menu_header .bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* fine MENU */

#sezione3 .primo span img {
    width: 18px;
    height: auto;
    transform: none;
}

#sezione3 .primo p {
    text-align: left !important;
}

#sezione3 .primo span {
    padding: 0;
    margin: 0;
}

#sezione3 .primo h3 {
    text-align: left;
}

#sezione3 .primo .button.button {
    float: left;
}

#menu_header.grndm .areamenu {
    width: calc(100% - 50px) !important;
    height: calc(100vh - 100px) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border-radius: 0;
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 1);
    backdrop-filter: contrast(0.5) brightness(0.5);
    width: calc(100% - 0px) !important;
    height: calc(100vh - 0px) !important;
    border: 40px solid #ffffff;
}

.navbar-menu.menumobile.bottone-fix {
    position: fixed;
    overflow: hidden;
    transition: 0.3s ease;
    padding: 20px 20px;
    z-index: 15;
    background-color: #000000a1 !important;
    backdrop-filter: blur(6px);
}

.navbar-menu.menumobile.bottone-fix {
    background-color: transparent !important;
}

#bottone_menu_header img {
    width: 48px;
    height: 48px;
    filter: brightness(10);
}

.pos_fixed #bottone_menu_header img {
    width: 48px;
    height: 48px;
    filter: none;
}

#header .sezheader {
    display: flex;
    height: 100px;
}

.colheader.ch4 {
    position: fixed;
    right: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos_absolute nav.navmenu-lingue ul.sottolingue-attivo {
    background: transparent;
}

nav.navmenu-lingue ul>li {
    height: 100px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.col-2.colheader.ch3 {
    position: fixed;
    right: 0px;
    top: 0;
    z-index: 10;
}

footer .logosito img {
    max-height: 70px;
    width: auto;
    filter: invert(1);
    margin-top: 25px;
}

header .logosito img {
    max-height: 200px;
    height: auto;
    width: 170px !important;
}

#foto-home .item {
    margin-right: 15px;
}

#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR {

    background: #D18874 !important;
}

#slideshow-interno h1 {
    color: #ffffff;
    font-family: var(--font-family-2);
    font-weight: 300;
    font-size: 1.6rem;
    text-transform: uppercase;
    line-height: 3rem;
    letter-spacing: 0.1em;
}

#slideshow-interno h1 strong {
    color: var(--color1);
    font-family: var(--font-family-1);
    font-weight: 800;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.col-sm-12.col-md-6.area.camere-sx-1 {
    overflow: visible;
    z-index: 10;
}

.index-camere .elemento_sing.el-camera {
    margin-top: 25px;
}

#camere-1 .index-camere h3 {
    text-align: left !important;
    color: var(--color1);
    font-family: var(--font-family-2);
    margin: 0 !important;
    margin-bottom: 20px;
    padding: 0 !important;
    float: left !important;
    font-weight: 600;
    font-size: 2.5rem;
}

#camere-1 .index-camere p {
    margin: 0 !important;
    width: 100%;
    font-size: 1.1rem;
    margin-top: 20px !important;
    text-align: left !important;
}

#camere-1 .index-camere a.button p {
    margin: 0 !important;
    width: 100%;
    margin-top: 0px !important;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    border-radius: 0;
    font-weight: 400;
}

.index-camere .blocco_dati {
    display: flex;
    align-items: flex-start !important;
}

.index-camere .testo_camera img {
    width: 15px !important;
    height: auto;
    display: flex !important;
    align-items: center;
    flex-direction: row;
    filter: invert(1);
}

.recensioni h5 {
    color: var(--color1);
    font-size: 1.1rem;
    font-family: var(--font-family-1);
}

.recensioni h5 {
    float: right;
    width: 100%;
    text-align: right;
    margin-right: 50px;
}

.recensioni h6 {
    float: right;
    color: #D18874;
    font-family: var(--font-family-2);
    width: 100%;
    text-align: right;
    margin-right: 50px;
    font-size: 1rem;
}

.recensioni .item {
    backdrop-filter: blur(4px);
    height: 300px;
    width: calc(100% - 30px);
    background: #00000061;
    border-radius: 5px;
    margin-left: 15px;
}

.recensioni p {
    color: var(--color1);
    padding: 9%;
    padding-top: 0;
    padding-bottom: 30px;
    font-family: var(--font-family-2);
    font-size: 1rem;
}

.recensioni h4 {
    padding: 80px;
    padding-top: 30px;
    padding-bottom: 15px;
    color: #D18874;
    font-family: var(--font-family-2);
    font-size: 1.8rem;
    font-weight: 600;
    padding-left: 9%;
}

.recensioni-titolo h4 {
    color: var(--color1);
    margin-top: 5%;
    text-align: center;
    width: 100%;
    font-family: var(--font-family-2);
    font-size: 2rem;
    font-weight: 300;
    display: block;
}

section#zoom {
    background-color: #52413c;
    padding-bottom: 15px;
}

.recensioni-titolo h4 strong {
    font-family: var(--font-family-2);
    font-size: 3rem;
    font-weight: 600;
}


.voti h4 {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-family: var(--font-family-2);
    line-height: 1;
}

.voti h4 img {
    margin-top: 15px;
}

.voti .col-sm-12 {
    width: 33%;
    padding: 50px;
}

.row.voti {
    width: 98%;
    margin-left: 1% !important;
    border-radius: 4px;
}

.voti h4 strong {
    margin-left: 10px;
    font-weight: 800;
    color: #D18874;
}

.testo_camera span {
    display: inline-flex;
}

.testo_camera img {
    width: 22px !important;
    height: 22px;
    display: flex !important;
    align-items: center;
    flex-direction: row;
}


.owl-theme .owl-dots .owl-dot span {
    -webkit-backface-visibility: visible;
    background-color: #00000091;
    border-radius: 30px;
    display: block;
    height: 10px !important;
    margin: 2px 2px !important;
    transition: opacity .2s;
    width: 10px !important;
}

section#video-home {
    padding: 0;
}

#video-home .cbck_107 {
    z-index: 1;
}

#slideshow h3 {
    color: var(--color1);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 3rem;
    line-height: 4rem;
    padding-bottom: 15%;
    font-family: var(--font-family-2);
}

#slideshow h3 strong {
    color: var(--color1);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 3.5rem;
    letter-spacing: 0;
}

section#sez-camere {
    padding-right: 0;
    padding-left: 0;
    padding: 0;
}


#sez-camere .blocco_foto_camera img.img-fluid {
    border-top: 2px solid #fff;
}

#sez-camere .item {
    margin-right: 10px;
    margin-left: 10px;
}

.row.testo-sezione-2 {
    position: absolute;
    overflow: visible;
    z-index: 10;
    margin-top: 200px;
    margin-left: 40px !important;
}

.sezione-2-1 {
    z-index: 10 !important;
    overflow: visible;
}

.sezione-2-2 {
    z-index: 9;
}

.testo-sezione-2 h3 {
    font-size: 5rem;
    color: var(--color1);
    font-family: var(--font-family-1);
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.primo {
    padding: 70px !important;
}

.primo p {
    margin-bottom: 30px;
    margin-top: 0px;
}

.primo h1 {
    margin-bottom: 0;
    font-family: var(--font-family-2);
    font-size: 3rem;
    line-height: 1.1em;
    font-weight: 400;
    color: #7C726F;
    text-align: left;
    text-transform: uppercase;
}

.primo h2 {
    text-align: left;
}

.primo h1 strong {
    font-size: 4rem;
    font-weight: 600;
    color: var(--nero);
    font-family: var(--font-family-2);
    text-transform: uppercase;
}

.primo h3 {
    margin-bottom: 30px;
    font-family: var(--font-family-2);
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: 300;
    color: #7C726F;
    line-height: 1;
}

.primo h3 strong,
#testo-intro h3 strong {
    font-size: 3rem;
    font-weight: 600;
    color: var(--nero);
}

#servizi #sezione4 .primo h3 strong {
    color: var(--color1);
}

.camere-sx-1 .primo h3 {
    margin-bottom: 30px;
    font-family: var(--font-family-2);
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: 200;
    color: var(--color1);
}

.camere-sx-1 .primo h3 strong {
    font-size: 2.4rem;
    font-weight: 300;
    color: var(--color1);
    font-family: var(--font-family-4);
}

#titolo-camere h3 {
    margin-bottom: 30px;
    font-family: var(--font-family-2);
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: 300;
    color: #7C726F;
    text-align: center;
    margin-top: 50px;
}

#titolo-camere h3 strong {
    font-size: 3rem;
    font-weight: 600;
    color: var(--nero);
    font-family: var(--font-family-2);
}

#titolo-camere p {
    margin-bottom: 80px;
    padding-left: 20%;
    padding-right: 20%;
}

section#titolo-camere {
    padding: 80px;
    padding-top: 120px;
    padding-bottom: 0;
}

#titolo-camere .home-c-1 {
    width: 60%;
    margin-left: 20%;
}

#experience .col-sm-12.col-md-4.area {
    width: calc(33.3% - 20px);
    margin-right: 10px;
    margin-left: 10px;
    padding: 50px;
}

#experience h3 {
    margin-bottom: 30px;
    font-family: var(--font-family-2);
    font-size: 1.7rem;
    line-height: 1.4em;
    font-weight: 200;
    color: var(--color1);
    text-align: center !important;
}

#experience h3 strong {
    font-size: 3rem;
    font-weight: 600;
    color: var(--color1);
    font-family: var(--font-family-2);
}

#experience p {
    color: var(--color1);

}

.col-sm-12.cont_sing {
    padding: 0px !important;
}

header#header {
    height: 100px;
}

#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR {
    height: 100px;
}

#header .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header button.button.button--standard.button--size-l.button--text-thin.btn-apriFR {
    height: 100px;
    border-right: none;
    border-left: none;
}

#header .button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover,
#header button.button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover {
    height: 100px;
    width: 100%;
    background-color: #ebb2a3 !important;
    border-left: none;
    border-right: none;
}

#slideshow .row.centrale.ao_center {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

#slideshow .col-sm-12.col-md-12.area {
    z-index: inherit;
}

#camere-1 p {
    margin-left: 15%;
    margin-right: 15%;
    color: var(--color1);
    text-align: left;
    float: left;
    width: 60%;
}

#sez-1 p {
    width: 55%;
    margin-bottom: 35px;
}

#sez-camere h4 {
    font-family: var(--font-family-1);
    font-size: 5rem;
    color: var(--color1);
}

#sez-camere h3 {
    font-family: var(--font-family-2);
    font-size: 3rem;
    color: var(--nero);
    padding: 31px;
    margin-top: -160px;
    font-weight: 600;
    text-align: center;
}

#camere-1 h3 {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 25px;
}

#camere-1 h3 strong {
    font-size: 5rem;
    font-weight: 400;
}

#camere-1 h2 {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 25px;
    font-size: 3rem;
    font-family: var(--font-family-1);
    color: var(--color1);
    line-height: 1em;
}

#camere-1 h2 strong {
    font-size: 5rem;
    font-weight: 400;
}

#slideshow h2 {
    color: #fff;
    font-size: 1.8rem;
    line-height: 3rem;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-weight: 600;
}

#slideshow h2 strong {
    color: #fff;
    font-size: 4rem;
    font-weight: 400;
    font-family: var(--font-family-1);
    -webkit-transition: -webkit-filter 2s;
    transition: -webkit-filter 2s;
    transition: filter 2s;
    transition: filter 2s, -webkit-filter 2s;
    line-height: 1.2;
    text-transform: uppercase;
}

section#slideshow {
    overflow: hidden;
}

#bottone_menu_header p {
    font-family: var(--font-family-1);
    color: var(--color1);
    display: none;
}

#sez-1 h1 strong {
    font-weight: 400;
    font-size: 5rem;
    color: var(--color2);
    text-transform: uppercase;
    font-family: var(--font-family-1);
}

section#camere-1 {
    margin-bottom: 1px;
}

#camere-1 a.linkinterno {
    float: left;
    margin-left: 15%;
    margin-top: 30px;
    margin-right: 15%;
}

#servizi h3 {
    margin-bottom: 25px;
}


p strong {
    font-weight: 500;
}

#sez-8 p {
    margin-left: 15%;
    margin-right: 15%;
    color: var(--color1);
    width: 60%;
    float: right;
    text-align: right !important;
}

#sez-8 h3 {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 25px;
}

#sez-8 h3 strong {
    font-size: 5rem;
    font-weight: 400;
}

.galleriapres img.img-responsive {
    padding: 8px;
}

section#foto-home {
    padding-top: 130px;
    padding-bottom: 100px;
}

#foto-home h3 {
    text-align: center;
    margin-bottom: 0;
    margin-top: 60px;
    font-size: 2rem;
    color: #7C726F;
    font-weight: 300;
}

#foto-home h3 strong {
    font-weight: 600;
    font-size: 3rem;
    color: var(--nero);
}


.owl-theme .owl-dots .owl-dot {
    background: none !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
}

#servizi .button.button--winona.button--size-l,
#servizi button.button.button--winona.button--size-l {
    margin-top: 35px;
}

.aneprimacamera a.button {
    margin-top: 35px;
}

.anteprimacamera a.button {
    margin-top: 20px;
    padding: 0;
    border: none;
    padding-top: 0;
    border-bottom: 1px solid var(--color2);
    height: auto;
    margin-left: 5px;
    color: #FFF;
    transition: 1s;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    border-radius: 0;
    font-weight: 400;
    height: 75px;
    display: inline-block;
    background: var(--color2);
    padding-left: 15px;
    padding-right: 15px;
}

.index-camere .anteprimacamera a.button {
    margin-top: 20px;
    padding: 10px;
    border: none;
    height: auto;
    margin-left: 5px;
}

.anteprimacamera a.button p {
    font-weight: 300;
    font-size: 0.7rem;
    font-family: var(--font-family-5);
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 2;
    padding: 5px;
    color: var(--color1);
    color: #FFF;
    transition: 1s;
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    border-radius: 0;
    font-weight: 600;
}

.anteprimacamera a.button p:hover {
    color: var(--color2);
}

#sez-1 h3 {
    color: var(--color2);
    font-size: 1.5rem;
    width: 55%;
    margin-top: 0;
    line-height: 2rem;
    margin-bottom: 30px;
    font-family: var(--font-family-6);
}

.chiudi_menumobile {
    cursor: pointer;
    background: transparent;
}

div#headermenumobile\ bottone-fix {
    position: absolute;
    top: 5%;
    right: 5%;
    background: none;
    padding: 12px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 9;
}

#menu_header .navbar-nav-menu>li {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 100%;
    margin-bottom: 5px;
    justify-content: center;
}

.pos_fixed #bottone_menu_header .buttonmenu .icon-bar {
    background: #405666;
}

.pos_fixed #bottone_menu_header p {
    color: var(--color2);
    line-height: 1;
}

header.pos_fixed .logosito img {
    filter: none;
    width: auto;
    height: auto;
    width: 170px;
}

a.logosito.logodesktop.centrale {
    top: 0px !important;
    left: calc(50% - 100.5px) !important;
    top: 15px !important;
    left: calc(50% - 85px) !important;
    position: absolute;
    width: auto !important;
}

.pos_fixed a.logosito.logodesktop.centrale {
    top: 15px !important;
    left: calc(50% - 85px) !important;
    position: absolute;
    width: auto !important;
}

.button.button--winona.button--size-l.button--text-thick.button--round-s.btn-apriFR,
button.button.button--winona.button--size-l.button--text-thick.button--round-s.btn-apriFR {
    width: 70%;
    min-width: 225px;
    float: right;
    height: 75px;
}

button.ancorabtn-apriFR {
    background: #aaa69d;
    border: none;
}

#footer p {
    color: #9e847b;
    font-family: var(--font-family-2);
    font-weight: 600;
    letter-spacing: 0.1em;
}

#sezfooter3 .label a {
    color: var(--color1);
    font-family: 'Italiana';
    font-size: 1.3rem;
}

.navbar-menu.menumobile.bottone-fix.left.menu-aperto,
.navbar-menu.menumobile.bottone-fix.left {
    transition: 1s;
}

.prencanc_fr.component_fr span {
    font-family: var(--font-family-5);
    letter-spacing: .2rem;
}

.prencanc_fr.component_fr {
    margin-top: 15px !important;
}

#frHeader div.fastreservation.apertura-full {
    background-color: rgb(255 255 255) !important;
    font-family: var(--font-family-2);
    color: var(--color2) !important;
    z-index: 10;
}

#frHeader div.fastreservation .contenitore-fr {
    padding-left: 5%;
    padding-right: 5%;
}

.fastreservation .labelfastr {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--nero);
    letter-spacing: 0.1em;
    font-family: var(--font-family-2);
    font-weight: 600;
    font-size: 0.9rem;
}

#frHeader div.fastreservation.apertura-full .btn-chiudiFR,
#frHeader div.fastreservation.apertura-standard .btn-chiudiFR {
    right: 50px;
}

#slideshow h1 {
    color: #fff;
    font-weight: 100;
    line-height: 1.2em;
    font-family: var(--font-family-2);
}

#slideshow h1 strong {
    font-size: 5rem;
    font-family: var(--font-family-1);
}

#slideshow h1 strong {
    line-height: 1;
}

#sez-1 h2 {
    font-size: 2.5rem;
    text-transform: inherit;
    color: var(--color7);
}

.anteprimacamera {
    position: relative;
    float: left;
    padding: 0px !important;
    width: -webkit-fill-available;
}

#sez-camere .anteprimacamera.visuale_sovrapposti .blocco_dati {

    background: #ffffffa1;

    left: 0 !important;

    right: 0 !important;

    padding: 50px !important;

    width: 30% !important;
}


.anteprimacamera.visuale_sovrapposti .blocco_dati {

    background: #3535357a;

    left: 0 !important;

    right: 0 !important;

    padding: 50px !important;

}

#servizi p {
    margin-right: 45px;
}

#dotazioni h3,
#dotazioni p {
    color: var(--color2);
}

section#dotazioni {
    padding-top: 80px;
    padding-bottom: 80px;
}

#foto-home div#galleria-103,
#foto-home div#galleria-317,
#foto-home div#galleria-285,
#foto-home div#galleria-253 {
    margin-top: 60px;
    margin-bottom: 60px;
}

#testo-intro h2 {
    color: var(--color3);
    margin-bottom: 25px;
    font-size: 2.5rem
}

#testo-intro h2 strong {
    font-size: 4rem;
    font-weight: 400;
    color: var(--color2);
}

#testo-intro-2 h2 {
    color: var(--color3);
    margin-bottom: 25px;
    font-size: 2rem;
    margin-left: 30px;
    margin-right: 30px;
}

#testo-intro-2 h2 strong {
    font-size: 3rem;
    font-weight: 400;
    color: var(--color2);
}

#testo-intro-2 p {
    margin-left: 30px;
    margin-right: 30px;
}

#testo-intro-2 #mappa1 p {
    margin: 0;
}

.titolo-anteprima h3 {
    color: var(--color2);
    text-align: center;
    margin-bottom: 30px;
}

.testo-anteprima p {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.col-sm-12.col-md-6.ant-camera {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
}


.bottone-anteprima a {
    background: #000;
    text-align: center;
    width: 200px;
}

section#listacamere {
    height: auto;
}

.bottone-anteprima a {
    background-color: var(--color2_hover);
    color: #FFF;
    transition: 1s;
    text-transform: uppercase;
    font-family: 'EB Garamond';
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.bottone-anteprima {
    width: fit-content;
    background-color: var(--color3);
    padding: 20px 20px;
    border-radius: 0;
}

.bottone-anteprima p {
    color: var(--color1);
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--font-family-5);
}

#menu_header .navbar-nav-menu>li {
    align-items: anchor-center !important;
}

.menumobile.bottone-fix .navbar-nav-menu ul.sottomenu li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sottomenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1s ease, opacity 1s ease;
}

/* Quando attivo, mostra con animazione */
.apri-sottomenu.sottomenu-attivo .sottomenu {
    max-height: 500px;
    opacity: 1;
}

.index-camere #camere-1 button {
    float: left;
    margin-left: 0%;
    margin-top: 0px;
    margin-right: 0%;
}

#sezfooter3 span.label {
    display: none;
}

span.elemsocial {
    color: var(--color1);
    float: left;
}

#sezfooter3 span.elem.selezunder a {
    margin-left: 5px;
    margin-right: 5px;
}

.bottone_aprimenu button.buttonmenu .icon-bar,
.bottone_aprimenu span.buttonmenu .icon-bar {
    height: 2px !important;
}

section#foto-home.galleria {
    padding-top: 50px;
    padding-bottom: 100px;
}

div#galleria-204 {
    padding: 0;
}

#blocco1 div#galleria-204 figure {
    padding: 0 !important;
}

div#galleria-226,
div#galleria-349 {
    padding: 0;
}

.spa #blocco1 div#galleria-226 figure,
div#galleria-349 figure {
    padding: 0 !important;
}

div#galleria-229 {
    padding: 0;
}

.spa #blocco2 div#galleria-229 figure {
    padding: 0 !important;
}

div#galleria-208 {
    padding: 0;
}

#blocco2 div#galleria-208 figure {
    padding: 0 !important;
}


#blocco1 .galleriapres img.img-responsive {
    padding: 0;
}

#blocco1 p {
    margin-left: 50px;
    margin-right: 50px;
}

#blocco1 h3 {
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 25px;
    color: var(--color2);
}

#blocco2 div#galleria-208 {
    padding: 0;
}

#blocco2 .galleriapres img.img-responsive {
    padding: 0;
}

#blocco2 p {
    margin-left: 50px;
    margin-right: 50px;
}

#blocco2 h3 {
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 25px;
    color: var(--color2);
}

#sez-1 .spa h3 {
    font-size: 3rem;
    font-family: var(--font-family-1);
    color: var(--color4);
    margin-bottom: 0px;
    line-height: 0.9em;
    margin-bottom: 20px;
}

#sez-1 .spa h3 strong {
    font-weight: 400;
    font-size: 4rem;
    color: var(--color2);
    text-transform: none;
}

#blocco2 .button.button--winona.button--size-l.button--text-thick.button--round-s #blocco2 button.button.button--winona.button--size-l.button--text-thick.button--round-s {
    margin-left: 50px;
    margin-top: 30px;
}

.galleria header .logosito img {
    display: none;
}

.galleria header.pos_fixed .logosito img {
    display: inline-block;
}

.spa section#foto-home {
    padding: 50px;
}

.sottomenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
}

.sottomenu.aperto {
    opacity: 1;
}

.material-symbols-rounded {
    color: #fff;
    font-size: 3rem !important;
}

li.nav-item.liv1.azioneher.prenotazioni a {
    background-color: var(--color2);
    padding: 18px 30px !important;
    border-radius: 0px;
    color: var(--color1) !important;
    font-weight: 600;
    border-radius: 0;
    line-height: 1;
}

.datepicker-dropdown .datepicker-picker {
    font-family: var(--font-family-6);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


.datepicker-title {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div.fastreservation .area_input_notti .chiudi,
div.fastreservation .area_input_persone .chiudi,
div.fastreservation .area_input_listino .chiudi {
    font-family: var(--font-family-5);
    letter-spacing: .2rem;
    background-color: #cca951 !important;
}

header.pos_absolute .logosito img {
    display: block;
    width: auto;
}

#home header.pos_absolute .logosito img {
    display: block;
    width: auto;
}

#servizi-2 p {
    color: var(--color1);
    margin-left: 30px;
    margin-right: 30px;
}

#servizi-2 h3 {
    margin-left: 30px;
    margin-right: 30px;
}

.menu-aperto .navbar-nav-menu li.nav-item .sottomenu .nav-link {
    font-size: 1rem;
    color: var(--color1);
}

.menu-aperto .navbar-nav-menu li.nav-item .sottomenu .nav-link {
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.menumobile.bottone-fix .navbar-nav-menu ul.sottomenu.aperto {
    margin-bottom: 15px;
}

i.zmdi.zmdi-close {
    font-size: 30px;
    color: var(--color1);
}

#servizi-3 h3 {
    text-align: left;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 25px;
    color: var(--color3);
    width: 67%;
}

#servizi-3 h3 strong {
    font-size: 5rem;
    font-weight: 400;
    color: var(--color2);
}

#servizi-3 p {
    margin-left: 10%;
    color: var(--color2);
    font-family: var(--font-family-2);
    text-align: left;
    float: left;
    width: 60%;
}

#servizi-3 .button,
#servizi-3 button.button {
    margin-left: 10%;
    margin-top: 40px;
}

#frHeader div.fastreservation .btn-chiudiFR {

    color: var(--color4) !important;
}

div#bottone_menu_header {
    margin-left: 15px;
}

#servizi .button.button--ujarak.button--size-l.button--text-thick.button--round-s.button--border-thin,
#servizi button.button.button--ujarak.button--size-l.button--text-thick.button--round-s.button--border-thin {
    margin-top: 30px;
}

#foto-home div#owlcarousel-89 {
    padding: 50px;
}

#servizi .button.button--ujarak.button--size-l.button--text-thin.button--round-s,
#servizi button.button.button--ujarak.button--size-l.button--text-thin.button--round-s {
    margin-top: 30px;
}

#blocco2 .button.button--ujarak.button--size-l.button--text-thick.button--round-s,
#blocco2 button.button.button--ujarak.button--size-l.button--text-thick.button--round-s {
    margin-left: 50px;
    margin-top: 30px;
}

#servizi-2 .col-sm-12.col-md-6.area.sfondobckg.bckg_responsive.fisso {
    border-right: 1px solid #fff;
}

#servizi .button.button--ujarak.button--size-l.button--text-thick.button--round-s,
#servizi button.button.button--ujarak.button--size-l.button--text-thick.button--round-s {
    margin-top: 30px;
}

.contenitore-fr .button.button--standard,
.contenitore-fr button.button.button--standard {
    background: var(--color2);
}

#menulingueheader span.material-symbols-rounded {
    font-size: 1.2rem !important;
    color: #fff;
    display: none;
}

#header.pos_fixed span.material-symbols-rounded {
    font-size: 1.2rem !important;
    color: #000000;
    display: none;
}

#testo-intro-2 div[class^="cbck_"],
#testo-intro-2 div[class^="acbck_"] {
    position: absolute;
    top: 0;
    width: inherit;
    height: 100%;
}

#sez-1 h1 {
    font-family: var(--font-family-6);
    font-weight: 200;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.galleria #foto-home h3 {
    padding-bottom: 100px;
}

#dotazioni .col-sm-12 p {
    display: flex;
    flex-direction: row;
    text-align: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

#dotazioni .col-sm-12 strong {
    width: 20%;
    margin-bottom: 20px;
    font-weight: 200;
}

#dotazioni span.material-symbols-rounded {
    font-size: 2.2rem !important;
}

.datepicker-header .datepicker-controls {
    background: #a9a69e !important;
}

.datepicker-controls .button {
    background: #a9a69e !important;
    color: #fff !important;
    letter-spacing: 0 !important;
}

.datepicker-cell {
    height: 40px !important;
}

.datepicker-cell:not(.disabled):hover {
    background: #a9a69e !important;
}


div.fastreservation .area_input_persone {
    margin-top: 60px !important;
    border-radius: 10px !important;
}

div.fastreservation .area_input_persone .cont_input_persone {
    display: flex !important;
    flex-direction: column !important;
}

.cont_input_persone input,
.cont_input_persone select {
    min-width: 100% !important;
    width: 100% !important;
}

#frHeader div.fastreservation.apertura-full.animate__fadeOut {
    z-index: -1;
}

section#tipologie {
    padding-bottom: 50px;
}

section#mappa-home {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 250px;
    background-color: #d1ccc0;
    margin-top: 0 !important;
}

#mappa-home .leaflet-popup-content p img,
.leaflet-popup-content p img {
    height: 80px;
    width: auto;
    min-height: 80px !important;
    max-width: fit-content !important;
}

#mappa-home .leaflet-popup-content p {
    margin: 0;
}

#sez44 {
    padding: 100px;
}

#sez44 h3 {
    color: var(--color2);
    font-size: 2rem;
    padding-left: 40px;
    padding-right: 40px;
}

#sez44 p {
    padding-left: 40px;
    padding-right: 40px
}

#sez44 .col-sm-12.col-md-3 {
    border-right: 1px solid #00000075;
}

#sez44 h3 strong {
    font-size: 3rem;
    font-weight: 300;
}

#mappa-home #div#mappa1,
#mappa-home div#map-canvas1 {
    height: 400px !important;
}

.pos_fixed a.menulingua span {
    color: var(--color2);
    font-family: var(--font-family-2);
}

.pos_fixed a.menulingua {
    color: var(--color2);
}

.navbar-nav-menu {
    align-items: flex-start !important;
    align-content: flex-start !important;
}

button.multilingue span {
    color: var(--color1);
    font-family: var(--font-family-2);
}

.pos_fixed button.multilingue span {
    color: var(--nero);
    font-family: var(--font-family-2);
}

#home section#mappa-home {
    min-height: auto !important;
    height: 400px;
}

/* Stile Faq */
#faq h3 strong {
    word-wrap: break-word;
    white-space: -moz-pre-wrap;
    white-space: pre-wrap;
    font-family: var(--font-family-5);
    line-height: 1em;
    font-weight: 600;
    font-size: 3rem;
    color: var(--nero);
}

.faq-container {
    margin-top: 3em;
}

.faq-item {
    padding: 0.1em 0.1em !important;
}

.faq-item .faq-question {
    font-size: 1.1rem;
    line-height: 1.1em;
    font-family: var(--font-family-5);
    letter-spacing: 0.03em;
    color: var(--color1);
    font-weight: 400;
    border-radius: 0;
    padding: 1.2em 1.2em !important;
    margin-bottom: 0.5em;
    background-color: #d18874;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.1em;
}

.faq-item .faq-answer {
    font-family: var(--font-family-6);
    border-radius: 0;
    color: var(--nero);
    background: var(--color1);
    font-size: 1.1em;
    letter-spacing: 0.05em;
    text-align: left;
    font-family: var(--font-family-2);
}

.faq-item .faq-answer>* {
    padding: 1.5em;
    line-height: 1.5em !important;
}

#foto-home .owl-dots {
    padding-top: 40px;
}

img.logo-sito-menu {
    filter: invert(1) brightness(5);
    width: 140px;
    height: auto;
    margin-bottom: 25px;
}

.datepicker-title .s_c_picker {
    background: var(--color2);
}

.datepicker-grid .datepicker-cell.selected,
.datepicker-grid .datepicker-cell.selected:hover {
    background: var(--color2);
}

div.fastreservation .area_input_notti .chiudi,
div.fastreservation .area_input_persone .chiudi,
div.fastreservation .area_input_listino .chiudi {
    background: var(--color2) !important;
}

div.fastreservation.stile-custom input.datepicker {
    width: 100% !important;
}

/* blocca scroll quando menu aperto */
html:has(#menu_header.menu-aperto) {
    overflow: hidden !important;
    height: 100% !important;
}

/* menu overlay fisso */
#menu_header {
    position: fixed;
    z-index: 9999;
}

.menumobile.bottone-fix.down .navbar-nav-menu,
.menumobile.bottone-fix.up .navbar-nav-menu {
    flex-flow: column;
    text-align: -webkit-center;
}

/*barre fr*/
.btn-apriFR::before,
.btn-apriFR::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #ffffffb5;
}

.btn-apriFR::before {
    left: 0;
}

.btn-apriFR::after {
    right: 0;
}

#header .btn-apriFR:hover::before,
#header .btn-apriFR:hover::after {
    display: none;
}


#header.pos_fixed .btn-apriFR::before,
#header.pos_fixed .btn-apriFR::after,
#header .btn-apriFR:hover::before,
#header .btn-apriFR:hover::after {
    opacity: 0;
}

.blocco_dati h3 strong {
    font-size: 3rem;
    font-weight: 600;
    color: var(--color1);
}

.col-sm-12.col-md-6.area.spa {
    padding: 50px;
}

section#sezione2,
section#sezione3 {
    padding: 0;
}

#home #sezione2 .embed-responsive-16by9 video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#home #sezione2 .embed-responsive-16by9 {
    padding-top: 0 !important;
    aspect-ratio: 1 / 1;
    height: auto;
}

#home #sezione3 .embed-responsive-16by9 video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#home #sezione3 .embed-responsive-16by9 {
    padding-top: 0 !important;
    aspect-ratio: 1 / 1;
    height: auto;
}

#sezione3 .elemento_sing.el-video {
    padding: 0;
}

#sezione2 .spa .acbck_ {
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%);
}

#sezione3 .spa .acbck_ {
    clip-path: polygon(0% 0, 84% 0, 84% 100%, 0% 100%);
}

section#sezione3 {
    display: flex;
    flex-direction: row-reverse;
}

span.poi-testo {
    display: none;
}


.menu-aperto a {
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease-in-out;
}

.menu-aperto a::before {
    content: "";
    position: absolute;
    border-bottom: 2px solid var(--color2);
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    transition: width 0.3s ease-in-out;
}

.menu-aperto a:hover {
    color: #ffffff !important;
    z-index: 1;
}

.menu-aperto a:hover::before {
    width: 100%;
}

#camera section#striscia,
#ristorante section#striscia {
    margin-top: -60px;
    z-index: 2;
}

#camera section#sezione2 {
    margin-top: -60px;
}

#camera #sezione2 p img {
    width: auto;
}


#slideshow-interno .full-slider {
    z-index: 1;
}

#slideshow-interno ul.p-slide-control {
    justify-content: right;
    padding-right: 45px;
    z-index: 4;
}

.blocco_dati h3 img {
    filter: invert(1);
    height: 100px;
}

#servizi section#sezione3 {
    display: flex;
    flex-direction: row;
}

#spa section#titolo-camere {
    padding-bottom: 120px;
    padding-left: inherit;
    padding-right: initial;
}

h4 {
    margin-bottom: 0px;
    font-family: var(--font-family-2);
    font-size: 1.2rem;
    margin-top: 20px;
    font-weight: 600;
    color: var(--nero);
    line-height: 1.2;
    display: flex;
    align-items: center;
}

h4 img {
    height: 35px;
    width: auto;
    margin-left: 5px;
}

#ristorante #sezione2 .primo .col-sm-12:nth-child(2),
#ristorante #sezione2 .primo .col-sm-12:nth-child(3) {
    width: auto;
    float: left;
}

#ristorante #sezione2 .row.centrale.ao_left.primo {
    text-align: left;
    float: left;
    display: flex;
    justify-content: flex-start;
}


#ristorante #sezione2 .embed-responsive-16by9 video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#ristorante #sezione2 .embed-responsive-16by9 {
    padding-top: 0 !important;
    aspect-ratio: 1 / 1;
    height: auto;
}

#ristorante section#striscia.bellevue {
    margin-top: 0;
}

#ristoranti .col-sm-12.col-md-4.area {
    padding: 40px;
    background: #f7f7f7;
}

#ristorante h3 {
    font-family: var(--font-family-2);
    font-size: 2rem;
    line-height: 1.4em;
    font-weight: 600;
    color: var(--nero);
    margin-bottom: 20px;
}

#ristoranti h4 {
    color: var(--color2);
    margin-bottom: 20px;
    font-weight: 500;
}

#ristoranti p {
    margin-bottom: 20px;
}

#ristorante #testo-intro h4 {
    display: block;
    color: var(--color2);
    font-weight: 500;
}

.elemento_sing.el-camera:empty {
    display: none;
}

#sezione3 h3 img {
    width: auto;
    margin-bottom: 30px;
}

#testo-intro h3 img {
    width: auto;
}

#ristorante section#testo-intro {
    border: 50px solid #d18874;
    margin: 50px;
}

#ristorante section#ristoranti {
    border: 50px solid #d18874;
    margin: 50px;
    margin-top: -100px;
    border-top: none;
}

#testo-intro h3 {
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: 600;
}

section#foto {
    padding: 40px;
    padding-top: 0;
}

#testo-intro.servizi h3 {
    line-height: 1.2;
}

section#testo-intro2 {
    padding: 70px;
    padding-top: 0;
}

#mappa section#testo-intro .primo {
    padding-bottom: 0 !important;
}

#mappa #testo-intro h3:last-child {
    margin-bottom: 0;
}

#prima h2 {
    margin-bottom: 20px;
    margin-top: 5px;
}

section#testo-intro.servizi.due .primo {
    padding-bottom: 0 !important;
}

#villa section#foto {
    padding: 40px;
}

#footer span.elem,
#footer span.elem {
    font-family: var(--font-family-1);
    font-weight: 300;
}

#home #sezione2 h3 strong {
    color: var(--nero);
    text-transform: math-auto;
}

a.button:hover {
    background-color: #ebb2a3 !important;
    color: var(--color1) !important;
}


/* ===== PAGE LOADER (senza HTML) ===== */
#page-loader {
    position: fixed;
    inset: 0;
    background: #f3efea;
    z-index: 99999999;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity .25s ease, visibility .25s ease;
}

#page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#page-loader .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.35);
    border-top-color: #000;
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}


#page-loader .loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#page-loader .loader-logo {
    max-width: auto;
    height: 50px;
    display: block;
}


.scrolling img {
    filter: invert(1);
    height: 45px;
    width: auto;
}

.scrolling {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    width: 100%;
    z-index: 9999;
    top: inherit;
}

#home .scrolling img.img-fluid {
    transform: none;
    height: 40px;
    cursor: pointer;
    animation: bounceSoft 3s infinite ease-in-out;
    margin-top: 15px;
}

@keyframes bounceSoft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

#zoom .owl-theme .owl-dots .owl-dot.active span {
    background-color: #ffffff3d;
}


#zoom .owl-theme .owl-dots .owl-dot span {
    background: #ffffff;
}

#slideshow-interno div[class^="cbck_"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

#slideshow-interno div[class^="cbck_"] {
    z-index: 2 !important;
}

#slideshow-interno .col-sm-12.col-md-12.area {
    z-index: 3 !important;
}

#home #sez-camere .blocco_foto_camera img.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#frHeader div.fastreservation .contenitore-fr .datepicker,
.datepicker-title .s_c_picker,
.datepicker-controls .view-switch,
.datepicker span {
    font-family: var(--font-family-2) !important;
    font-weight: 400 !important;
}

div.fastreservation.stile-custom input.datepicker {
    height: 50px !important;
}

#camera section#sez-camere {
    padding-left: 70px;
    padding-right: 70px;
    padding-bottom: 70px;
}


#camera section#titolo-camere {
    padding-top: 0;
    padding-top: 70px;
}

#servizi .servizi-due p {
    margin-right: 0;
    margin-bottom: 0;
}

#servizi #sezione4 p {
    margin-right: 0;
}

#spa #testo-intro .col-sm-12.col-md-6.area.camere-sx-1 {
    z-index: 1;
}

#spa #titolo-camere p {
    margin-bottom: 30px;
    text-align: center !important;
}

#spa #titolo-camere h3 {
    margin-top: 0;
}

nav.navmenu-lingue ul.sottolingue-attivo {
    top: 100px;
    width: 100px;
    right: 0;
    background: #fff;
}



.accessibility-policy p,
.accessibility-policy li {
    line-height: 1.8em;
    font-size: 1.1rem;
    font-family: var(--font-family-2);
}


.accessibility-policy h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: #000;
}

.accessibility-policy h1 {
    margin-top: 30px;
    margin-bottom: 30px;
    color: #000;
    line-height: 1.2;
}

section#faq {
    padding: 100px;
}

.btn-apriFR::before {
    display: none;
}

.faq-item img {
    width: 25px;
    height: auto;
    transform: none !important;
    filter: invert(1);
}

/* freccia */
.faq-question .faq-arrow {
    transition: transform 0.3s ease;
    margin-left: 10px;
    flex-shrink: 0;
}

/* rotazione quando la FAQ aperta */
.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg) !important;
}

.faq-question {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
}

.faq-question .faq-arrow {
    margin-left: auto;
    flex-shrink: 0;
}

button.faq-question:hover {
    background-color: #ebb2a3 !important;
    transition: 1s;
}

body.menu-open {
    overflow: hidden;
    height: 100dvh;
}

#home .row.end.ao_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

#home .row.end.ao_center h3 {
    padding-bottom: 0 !important;
    text-transform: uppercase !important;
}

#slideshow .metropole-fade-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 20;
    font-size: 0;
    color: transparent;
    line-height: 0;
}

#slideshow .mft-word {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-family-1);
    font-size: clamp(28px, 4vw, 58px);
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    filter: blur(14px);
    transition: opacity 2s ease, filter 2s ease;
    pointer-events: none;
}

#slideshow .mft-word.mft-in {
    opacity: 1;
    filter: blur(0px);
}

#slideshow-interno .metropole-fade-text.mft-static {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 20;
    font-size: 0;
    color: transparent;
    line-height: 0;
}

#slideshow-interno .metropole-fade-text.mft-static .mft-word {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-family-1);
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    filter: blur(14px);
    transition: opacity 2s ease, filter 2s ease;
    pointer-events: none;
}

#slideshow-interno .metropole-fade-text.mft-static .mft-word.mft-title {
    top: calc(50% - 1.4em);
    font-size: clamp(21px, 3.3vw, 48px);
    font-weight: 600;
    line-height: 1.2;
}

#slideshow-interno .metropole-fade-text.mft-static .mft-word.mft-subtitle {
    top: calc(50% + 0.2em);
    font-size: clamp(13px, 2vw, 28px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.18em;
}

#slideshow-interno .metropole-fade-text.mft-static .mft-word.mft-in {
    opacity: 1;
    filter: blur(0px);
}


/******************************

BLOG IL BLEISERIANO

******************************/


/* =======================================================
   IL BLEISERIANO — Foglio di stile (MOBILE FIRST)
   Incolla questo blocco nel CSS personalizzato del sito.
   Crescerà sezione per sezione.

   METODO: gli stili base sono per mobile; da 768px in su
   (breakpoint 'md' del tema, dove col-md-6 affianca le
   colonne) si aggiungono le regole con @media (min-width).

   NOTE:
   • I font NON sono impostati qui di proposito: vengono
     ereditati dal tema, così usi i font ufficiali del Bleis.
   • Il colore d'accento è una variabile: cambia --bleis-accent
     per allinearlo esattamente al brand.
   ======================================================= */

:root{
  --bleis-accent: #1E3A5F;  /* occhiello + dettagli — DA CONFERMARE col brand */
  --bleis-ink:    #17150F;  /* titoli e testo forte */
  --bleis-body:   #46413A;  /* corpo del testo */
  --bleis-soft:   #6E685C;  /* testo tenue */
}

/* ============ SEZIONE: Intro (#intro-blog) ============ */
/* --- BASE: mobile --- */

#intro-blog{
  padding: 44px 0;
}

/* Occhiello — <h1> "Il blog del Bleis Hotel" */
#intro-blog h1{
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--bleis-accent);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
#intro-blog h1::before{          /* trattino dell'occhiello */
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: .6;
  flex: none;
}

/* Titolo — <h3> "La trasferta, raccontata bene." */
#intro-blog h3{
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bleis-ink);
  margin: 0 0 1.1rem;
}
#intro-blog h3 span{ color: var(--bleis-soft); }   /* seconda parte più tenue (opzionale) */

/* Testo */
#intro-blog p{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bleis-body);
  margin: 0;
}
#intro-blog p b{                 /* la frase-firma in evidenza */
  color: var(--bleis-ink);
  font-weight: 600;
}

/* Immagine */
#intro-blog .cont_sing{ margin-top: 28px; }   /* stacco testo -> foto su mobile */
#intro-blog .cont_sing figure{ margin: 0; }
#intro-blog .cont_sing img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* --- DA 768px IN SU: colonne affiancate (tablet/desktop) --- */
@media (min-width: 768px){
  #intro-blog{
    align-items: center;                  /* testo e foto centrati in verticale */
    padding: clamp(64px, 8vw, 104px) 0;
  }
  #intro-blog h1{
    font-size: .78rem;
    letter-spacing: .18em;
    margin-bottom: 1.1rem;
  }
  #intro-blog h1::before{ width: 28px; }
  #intro-blog h3{
    font-size: clamp(2.6rem, 4.5vw, 3.7rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    max-width: 16ch;
  }
  #intro-blog p{
    font-size: clamp(1.02rem, 1.2vw, 1.15rem);
    max-width: 46ch;
  }
  #intro-blog .cont_sing{ margin-top: 0; }   /* affiancati: niente stacco */
}

/* =======================================================
   IL BLEISERIANO — Foglio di stile (MOBILE FIRST)
   Incolla questo blocco nel CSS personalizzato del sito.

   METODO: stili base = mobile; da 768px in su si aggiunge
   con @media (min-width). Telaio (larghezza + padding
   laterali) incluso nelle sezioni: vedi --bleis-gutter.

   NOTE:
   • I font NON sono impostati qui: si ereditano dal tema.
   • Colori e misure nelle variabili qui sotto.
   ======================================================= */

:root{
  --bleis-accent: #1E3A5F;  /* occhiello + dettagli — DA CONFERMARE col brand */
  --bleis-ink:    #17150F;  /* titoli e testo forte */
  --bleis-body:   #46413A;  /* corpo del testo */
  --bleis-soft:   #6E685C;  /* testo tenue */
  --bleis-line:   #E3DDD0;  /* bordi/filetti */
  --bleis-card:   #FBFAF6;  /* superficie card */
  --bleis-max:    1180px;            /* larghezza massima contenuto */
  --bleis-gutter: clamp(8px, 3vw, 44px);  /* padding sx/dx delle sezioni */
}


/* ===== TELAIO comune delle sezioni del blog =====
   max-width centrata + padding laterali. margin-inline:auto
   annulla anche i margini negativi della .row di Bootstrap. */
#intro-blog,
#articoli-blog{
  max-width: var(--bleis-max);
  margin-inline: auto;
}


/* =======================================================
   SEZIONE: Intro (#intro-blog)
   ======================================================= */
/* --- BASE: mobile --- */
#intro-blog{ padding: 44px var(--bleis-gutter); }

#intro-blog h1{                  /* occhiello */
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.1; color: var(--bleis-accent); margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
#intro-blog h1::before{ content:""; width:24px; height:1px; background: currentColor; opacity:.6; flex:none; }

#intro-blog h3{                  /* titolo */
  font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--bleis-ink); margin: 0 0 1.1rem;
}
#intro-blog h3 span{ color: var(--bleis-soft); }

#intro-blog p{ font-size: 1rem; line-height: 1.65; color: var(--bleis-body); margin: 0; }
#intro-blog p b{ color: var(--bleis-ink); font-weight: 600; }

#intro-blog .cont_sing{ margin-top: 28px; }
#intro-blog .cont_sing figure{ margin: 0; }
#intro-blog .cont_sing img{ width: 100%; height: auto; display: block; border-radius: 20px; }

/* --- DA 768px IN SU --- */
@media (min-width: 768px){
  #intro-blog{ align-items: center; padding-block: clamp(64px, 8vw, 104px); }
  #intro-blog h1{ font-size: .78rem; letter-spacing: .18em; margin-bottom: 1.1rem; }
  #intro-blog h1::before{ width: 28px; }
  #intro-blog h3{ font-size: clamp(2.6rem, 4.5vw, 3.7rem); line-height: 1.05; margin-bottom: 1.5rem; max-width: 16ch; }
  #intro-blog p{ font-size: clamp(1.02rem, 1.2vw, 1.15rem); max-width: 46ch; }
  #intro-blog .cont_sing{ margin-top: 0; }
}


/* =======================================================
   SEZIONE: Articoli — slider Owl (#articoli-blog)
   ======================================================= */
/* --- BASE: mobile --- */
#articoli-blog{ padding: clamp(40px, 6vw, 72px) var(--bleis-gutter); }

#articoli-blog .colonnaarea{ position: relative; }
/* niente ancoraggi intermedi: le frecce devono agganciarsi a .colonnaarea */
#articoli-blog .colonnaarea > .row{ position: static !important; }

/* intestazione */
#articoli-blog .colonnaarea > .row:first-child{ margin-bottom: clamp(22px, 3vw, 32px); }
#articoli-blog .colonnaarea > .row:first-child h3{
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: var(--bleis-ink); margin: 0;
}
#articoli-blog .colonnaarea > .row:first-child h3 span{   /* "Dal diario" -> occhiello */
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bleis-accent); line-height: 1; margin-bottom: .55rem;
}
#articoli-blog .colonnaarea > .row:first-child h4{
  font-size: .98rem; font-weight: 400; line-height: 1.5;
  color: var(--bleis-soft); margin: .6rem 0 0;
}

/* gutter tra le card */
#articoli-blog .item{ padding-inline: clamp(8px, 1.2vw, 12px); }

/* la card (chiara) */
#articoli-blog .anteprimacamera{
  background: var(--bleis-card);
  border: 1px solid var(--bleis-line);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* foto sopra */
#articoli-blog .blocco_foto_camera{ margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
#articoli-blog .blocco_foto_camera figure,
#articoli-blog .blocco_foto_camera picture{ display: block; height: 100%; margin: 0; }
#articoli-blog .blocco_foto_camera img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}

/* testo sotto */
#articoli-blog .blocco_dati{
  position: static;
  padding: 1.1rem 1.2rem 1.25rem;
  display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; flex: 1;
}
#articoli-blog .titolo_camera{ margin: 0; }
#articoli-blog .titolo_camera span{
  color: var(--bleis-ink); font-weight: 700; font-size: 1.18rem; line-height: 1.22; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* link "Leggi l'articolo ->" */
#articoli-blog .blocco_dati .button{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--bleis-accent); font-size: .84rem; font-weight: 600; line-height: 1; text-decoration: none;
}
#articoli-blog .blocco_dati .button p{ margin: 0; }
#articoli-blog .blocco_dati .button::after{ content: "\2192"; transition: transform .25s ease; }

/* hover (solo puntatore) */
@media (hover: hover){
  #articoli-blog .anteprimacamera:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -24px rgba(23,21,15,.5);
    border-color: #d6cfbf;
  }
  #articoli-blog .anteprimacamera:hover img{ transform: scale(1.05); }
  #articoli-blog .anteprimacamera:hover .button::after{ transform: translateX(4px); }
}

/* frecce: nascoste su mobile (si scorre con il dito) */
#articoli-blog .owl-nav{ display: none !important; }
#articoli-blog .owlbtns{ display: none; }

/* --- DA 768px IN SU --- */
@media (min-width: 768px){
  #articoli-blog .colonnaarea > .row:first-child h3{ font-size: clamp(1.9rem, 3vw, 2.5rem); }
  #articoli-blog .colonnaarea > .row:first-child > [class*="col-"]{ padding-right: 130px; } /* spazio per le frecce */
  #articoli-blog .titolo_camera span{ font-size: 1.28rem; }

  /* CLUSTER frecce in alto a destra (forziamo la posizione, il tema le centra) */
  #articoli-blog .owlbtns{
    display: flex !important; gap: .5rem;
    position: absolute !important;
    top: 0 !important; right: clamp(8px, 1.2vw, 12px) !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;
    z-index: 5;
  }
  /* i singoli pulsanti tornano nel flusso del cluster */
  #articoli-blog .owlbtns .owlPrev,
  #articoli-blog .owlbtns .owlNext{
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    margin: 0;
    width: 46px; height: 46px; border-radius: 999px;
    border: 1px solid var(--bleis-line); background: var(--bleis-card);
    color: var(--bleis-ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0;                 /* nasconde i caratteri < > */
    transition: background .2s, color .2s, border-color .2s;
  }
  #articoli-blog .owlbtns .owlPrev::before,
  #articoli-blog .owlbtns .owlNext::before{
    content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor;
  }
  #articoli-blog .owlbtns .owlPrev::before{ border-left: 2px solid currentColor; transform: rotate(-45deg); margin-left: 3px; }
  #articoli-blog .owlbtns .owlNext::before{ border-right: 2px solid currentColor; transform: rotate(45deg); margin-right: 3px; }
  #articoli-blog .owlbtns .owlPrev:hover,
  #articoli-blog .owlbtns .owlNext:hover{ background: var(--bleis-ink); color: var(--bleis-card); border-color: var(--bleis-ink); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   IL BLEISERIANO — DARK THEME (versione inversa)
   ─────────────────────────────────────────────────────────────────────────
   Inverte la palette del blog: sfondo nero, testo chiaro, accenti caldi
   (oro brand). Riutilizza le stesse variabili --bleis-* dei blocchi sopra
   ridichiarandole con valori dark — l'ultima dichiarazione vince.

   Sezioni coperte: body globale, #header (sopra il video hero), #slideshow
   (video full-screen), #intro-blog (testo + foto), #articoli-blog (carousel
   articoli con card scure).

   Per tornare al tema chiaro: commentare/eliminare l'intero blocco sotto.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Palette DARK MONOCROMATICA — solo scala bianco/grigio/nero */
  --bleis-accent: #ffffff;             /* bianco puro — occhielli, CTA, linee accent */
  --bleis-accent-2: #d4d4d4;           /* grigio chiaro — hover state */
  --bleis-ink:    #ffffff;             /* titoli bianco puro */
  --bleis-body:   #b8b8b8;             /* corpo testo grigio chiaro */
  --bleis-soft:   #777777;             /* testo tenue grigio medio */
  --bleis-line:   rgba(255, 255, 255, 0.10);   /* divider sottili */
  --bleis-card:   #141414;             /* superficie card */
  --bleis-bg:     #0a0a0a;             /* sfondo principale */
  --bleis-bg-alt: #111111;             /* sezione alternata */
  --bleis-font:   'Montserrat', sans-serif;    /* font unificato per tutto il blog */
}


/* ===== BODY ===== */
body[data-tipopag="interna"]{
  background-color: var(--bleis-bg);
  color: var(--bleis-body);
  font-family: var(--bleis-font);
}
/* Tutto dentro la pagina blog usa Montserrat — propagazione forte */
body[data-tipopag="interna"] *:not(i):not(.zmdi):not(.material-symbols-rounded){
  font-family: var(--bleis-font);
}


/* ===== HEADER ===== */
/* Stato default (sopra video hero): trasparente, contenuti BIANCHI */
#header.pos_absolute{
  background-color: transparent !important;
  border-bottom: 1px solid var(--bleis-line);
  box-shadow: none !important;
}
#header.pos_absolute,
#header.pos_absolute * {
  color: #ffffff;
}

/* Header fisso (dopo scroll): sfondo BIANCO, contenuti NERI */
#header.pos_fixed{
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.25) !important;
  transition: background-color 0.4s var(--bleis-ease);
}
#header.pos_fixed,
#header.pos_fixed *{
  color: #ffffff;
}

/* Link menu */
#header .nav-link{
  font-family: var(--bleis-font);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}
#header.pos_absolute .nav-link{ color: #ffffff !important; }
#header.pos_fixed    .nav-link{ color: #000000 !important; }
#header.pos_absolute .nav-link:hover{ color: rgba(255,255,255,0.6) !important; }
#header.pos_fixed    .nav-link:hover{ color: rgba(0,0,0,0.55) !important; }

/* Bottone "Prenota ora!" — inverte stato con header */
/* BOTTONE "Prenota ora!" � Fill from bottom + tracking dilatante.
   Override completo: il template aveva ::before/::after come barre laterali 1px
   (riga 2249-2278) e li nascondeva al hover. Devo annullare tutte quelle
   regole esplicitamente, poi riusare gli pseudo per il mio fill effect. */
#header#header .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: #4d8594 !important;
  background-image: none !important;
  font-family: var(--bleis-font) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: 0 38px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  z-index: 1;
  transition:
    color 0.45s var(--bleis-ease),
    letter-spacing 0.5s var(--bleis-ease),
    border-color 0.4s var(--bleis-ease) !important;
}

/* Annullo le barre laterali originali (width:1px, bg #ffffffb5) e
   ridefinisco ::before come VELO che si solleva dal basso (fill animation) */
#header#header .btn-apriFR::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: -1 !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 0.55s var(--bleis-ease) !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  background-color: transparent;
}
/* Annullo completamente ::after originale */
#header#header .btn-apriFR::after{
  content: "" !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

/* Stato HEADER SOPRA VIDEO (pos_absolute): outline bianco, testo bianco */
#header#header.pos_absolute .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header.pos_absolute button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}
/* Velo che si solleva dal basso: BIANCO su video */
#header#header.pos_absolute .btn-apriFR::before{
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Stato HEADER FISSO (pos_fixed): outline nero, testo nero */
#header#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  border: 1px solid rgba(0,0,0,0.55) !important;
  color: #ffffff !important;
}
/* Velo: NERO su header bianco */
#header#header.pos_fixed .btn-apriFR::before{
  background: #000000 !important;
  background-color: #000000 !important;
}

/* HOVER � annulla anche display:none del template (riga 2267-2270)
   e l'opacity:0 (riga 2273-2278), poi solleva il velo */
#header#header .btn-apriFR:hover{
  letter-spacing: 0.34em !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
#header#header .btn-apriFR:hover::before{
  display: block !important;
  opacity: 1 !important;
  transform: scaleY(1) !important;
}
#header#header .btn-apriFR:hover::after{
  display: none !important;
  opacity: 0 !important;
}
/* Hover su pos_absolute: testo diventa NERO (velo bianco coperto) */
#header#header.pos_absolute .button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover,
#header#header.pos_absolute button.button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover{
  color: #000000 !important;
  border-color: #ffffff !important;
}
/* Hover su pos_fixed: testo diventa BIANCO (velo nero coperto) */
#header#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover,
#header#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover{
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* Selettore lingua */
#header .multilingue,
#header .multilingue *{
  font-family: var(--bleis-font);
}
#header.pos_absolute .multilingue,
#header.pos_absolute .multilingue *{ color: #ffffff !important; }
#header.pos_fixed    .multilingue,
#header.pos_fixed    .multilingue *{ color: #000000 !important; }


/* ===== LOGO — centrato al 100% della viewport (no rispetto a ch2) ===== */
/* L'header è position:absolute o fixed → ancoraggio sicuro per il logo
   posizionato in absolute al 50% della larghezza del viewport. */
#header{
  position: relative;
}

/* Logo: position absolute con transition fluida tra stati */
#header .ch2 .logosito,
#header .ch2 a.logosito{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: auto !important;
  z-index: 5;
  transition:
    top 0.8s var(--bleis-ease),
    transform 0.8s var(--bleis-ease) !important;
}
#header .ch2 .logosito svg{
  display: block;
  width: clamp(280px, 28vw, 420px);
  height: auto;
  transition:
    width 0.8s var(--bleis-ease),
    filter 0.5s var(--bleis-ease);
}

/* STATO APERTURA (pos_absolute) — logo GIGANTE centrato verticalmente nello slideshow.
   Lo slideshow è alto 50vh, header height 100px. Il logo viene posizionato a 25vh
   dal top viewport (centro slideshow) e ingrandito al triplo della dimensione. */
#header.pos_absolute .ch2 .logosito,
#header.pos_absolute .ch2 a.logosito{
  top: 25vh !important;
}
#header.pos_absolute .ch2 .logosito svg{
  width: clamp(720px, 70vw, 1200px) !important;   /* ~triplo: da 280→720, 420→1200 */
  filter: brightness(0) invert(1);
}

/* STATO SCROLL (pos_fixed) — logo torna piccolo, centrato nell'header bianco */
#header.pos_fixed .ch2 .logosito,
#header.pos_fixed .ch2 a.logosito{
  top: 50% !important;
}
#header.pos_fixed .ch2 .logosito svg{
  width: clamp(220px, 22vw, 320px) !important;
  filter: none;
}

/* Header con overflow visible per permettere al logo gigante di uscire */
#header.pos_absolute{
  overflow: visible !important;
}

/* Icona menu hamburger — inverte allo stato header */
#header #bottone_menu_header .buttonmenu img{
  transition: filter 0.5s var(--bleis-ease);
}
#header.pos_absolute #bottone_menu_header .buttonmenu img{
  filter: brightness(0) invert(1);
}
#header.pos_fixed #bottone_menu_header .buttonmenu img{
  filter: none;
}


/* ===== SLIDESHOW — video hero full-screen ===== */
#slideshow.fullscreen{
  background-color: var(--bleis-bg);
  position: relative;
  overflow: hidden;
  min-height: 50vh !important;
  height: 50vh !important;
  padding: 0 !important;
  /* Taglio obliquo in fondo: polygon a 6 vertici = 4 linee diagonali
     irregolari che si accavallano. Fa sembrare il video "strappato" in basso. */
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 86%,
    72% 100%,
    38% 84%,
    0 96%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 86%,
    72% 100%,
    38% 84%,
    0 96%
  );
}
#slideshow .bck_video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#slideshow .bck_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay sottile sul video per migliorare la leggibilità in caso di contenuti */
#slideshow.fullscreen::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
#slideshow .col-sm-12.col-md-12.area{
  position: relative;
  z-index: 3;
}

/* Linee diagonali bianche traslucide che attraversano il video
   ("graffi" editoriali � multiple linee a inclinazioni diverse che si accavallano) */
#slideshow.fullscreen .bck_video::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Riga 1: diagonale 105� spessa 1.5px */
    linear-gradient(105deg,
      transparent 0%,
      transparent 76.9%,
      rgba(255,255,255,0.18) 77%,
      rgba(255,255,255,0.18) 77.2%,
      transparent 77.3%,
      transparent 100%),
    /* Riga 2: diagonale opposta -75� spessa 1px */
    linear-gradient(-75deg,
      transparent 0%,
      transparent 88.9%,
      rgba(255,255,255,0.10) 89%,
      rgba(255,255,255,0.10) 89.2%,
      transparent 89.3%,
      transparent 100%),
    /* Riga 3: diagonale 115� quasi orizzontale */
    linear-gradient(115deg,
      transparent 0%,
      transparent 62.9%,
      rgba(255,255,255,0.08) 63%,
      rgba(255,255,255,0.08) 63.2%,
      transparent 63.3%,
      transparent 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* Linee orizzontali accavallate SUL TAGLIO inferiore (sotto il clip-path)
   Ancorate all'article container per essere sopra lo slideshow. */
body[data-tipopag="interna"] #article{
  position: relative;
}
body[data-tipopag="interna"] #article::before{
  content: "";
  position: absolute;
  top: calc(50vh - 36px);
  left: -2vw;
  right: -2vw;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.45) 22%,
    rgba(255,255,255,0.45) 62%,
    transparent 100%);
  transform: rotate(-2.4deg);
  transform-origin: left center;
  z-index: 6;
  pointer-events: none;
}
body[data-tipopag="interna"] #article::after{
  content: "";
  position: absolute;
  top: calc(50vh - 10px);
  left: -3vw;
  right: -3vw;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 30%,
    rgba(255,255,255,0.25) 78%,
    transparent 100%);
  transform: rotate(1.7deg);
  transform-origin: left center;
  z-index: 6;
  pointer-events: none;
}


/* ===== INTRO BLOG — dark override ===== */
#intro-blog{
  background-color: var(--bleis-bg);
  color: var(--bleis-body);
  padding-block: clamp(60px, 8vw, 110px);
}
/* L'occhiello h1 con il trattino davanti — oro */
#intro-blog h1{
  color: var(--bleis-accent);
}
#intro-blog h1::before{
  background: var(--bleis-accent);
  opacity: 1;
}
/* Titolo h3 grande — avorio */
#intro-blog h3{
  color: var(--bleis-ink);
  font-family: var(--bleis-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}
#intro-blog h3 span{
  color: var(--bleis-soft);
}
/* Paragrafo */
#intro-blog p{
  color: var(--bleis-body);
  font-family: var(--bleis-font);
  font-weight: 300;
}
#intro-blog p b{
  color: var(--bleis-ink);
  font-weight: 500;
}
/* Immagine */
#intro-blog .cont_sing img{
  filter: brightness(0.92) saturate(0.95);
  transition: filter 0.6s ease, transform 0.8s ease;
}
#intro-blog .cont_sing:hover img{
  filter: brightness(1) saturate(1);
  transform: scale(1.015);
}


/* ===== ARTICOLI BLOG — dark override ===== */
#articoli-blog{
  background-color: var(--bleis-bg-alt);
  color: var(--bleis-body);
  padding-block: clamp(60px, 7vw, 100px);
}
/* Intestazione: occhiello h3 + h4 sottotitolo */
#articoli-blog .colonnaarea > .row:first-child h3{
  color: var(--bleis-ink);
  font-family: var(--bleis-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}
#articoli-blog .colonnaarea > .row:first-child h3 span{
  color: var(--bleis-accent);
}
#articoli-blog .colonnaarea > .row:first-child h4{
  color: var(--bleis-ink);
  font-family: var(--bleis-font);
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────────────────
   CARD ARTICOLO — taglio editoriale dark
   Easing comune: easeOutQuint (--bleis-ease) per movimento misurato
   Ombre piatte, linee che si allungano, niente glow saturi.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bleis-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#articoli-blog .anteprimacamera{
  position: relative;
  background: var(--bleis-card);
  border: 1px solid var(--bleis-line);
  border-radius: 4px;                 /* meno smussato, più rivista */
  overflow: hidden;
  transition:
    transform 0.7s var(--bleis-ease),
    border-color 0.5s var(--bleis-ease),
    box-shadow 0.7s var(--bleis-ease);
}

/* Linea oro orizzontale IN CIMA alla card — cresce da sinistra al hover */
#articoli-blog .anteprimacamera::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--bleis-accent);
  z-index: 5;
  transition: width 0.9s var(--bleis-ease);
  pointer-events: none;
}

/* Foto */
#articoli-blog .blocco_foto_camera{
  position: relative;
  overflow: hidden;
}
#articoli-blog .blocco_foto_camera img{
  filter: brightness(0.78) saturate(0.92);
  transition:
    transform 1.2s var(--bleis-ease),
    filter 0.8s var(--bleis-ease);
}
/* Velatura permanente sopra la foto — sfuma in basso per leggibilità titolo */
#articoli-blog .blocco_foto_camera::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 50%,
    rgba(10,10,10,0.55) 100%);
  pointer-events: none;
  transition: opacity 0.6s var(--bleis-ease);
}

/* Blocco testi */
#articoli-blog .blocco_dati{
  position: relative;
  padding: 1.4rem 1.4rem 1.6rem;
}

/* Titolo con sottolineatura editoriale */
#articoli-blog .titolo_camera{
  position: relative;
  margin: 0 0 1.1rem !important;
  padding-bottom: 0.9rem;
}
#articoli-blog .titolo_camera span{
  color: var(--bleis-ink);
  font-family: var(--bleis-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.28;
  font-size: 1.18rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Linea sottile sotto il titolo — cresce al hover */
#articoli-blog .titolo_camera::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;            /* stato di riposo: breve trattino */
  height: 1px;
  background: var(--bleis-accent);
  opacity: 0.55;
  transition:
    width 0.8s var(--bleis-ease),
    opacity 0.5s var(--bleis-ease);
}

/* CTA "Leggi l'articolo →" — minimal, no background, freccia che si allunga */
#articoli-blog .blocco_dati .button{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  color: var(--bleis-accent) !important;
  font-family: var(--bleis-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: color 0.4s var(--bleis-ease), gap 0.6s var(--bleis-ease);
}
#articoli-blog .blocco_dati .button p{
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
}
/* Linea della freccia: shaft che si allunga + punta */
#articoli-blog .blocco_dati .button::after{
  content: "";
  display: inline-block;
  width: 24px;            /* lunghezza riposo */
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.6s var(--bleis-ease);
}
#articoli-blog .blocco_dati .button::before{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.6s var(--bleis-ease);
}


/* ===== HOVER — rivelazione editoriale ===== */
@media (hover: hover){
  #articoli-blog .anteprimacamera:hover{
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 1px 0 0 var(--bleis-line),
      0 18px 40px -22px rgba(0, 0, 0, 0.85),
      0 30px 60px -30px rgba(0, 0, 0, 0.65);
  }

  /* La riga oro in cima si estende per tutta la card */
  #articoli-blog .anteprimacamera:hover::before{
    width: 100%;
  }

  /* Foto: scoperta — più luce, micro-zoom */
  #articoli-blog .anteprimacamera:hover .blocco_foto_camera img{
    filter: brightness(0.96) saturate(1);
    transform: scale(1.04);
  }
  #articoli-blog .anteprimacamera:hover .blocco_foto_camera::after{
    opacity: 0.55;
  }

  /* Sottolineatura titolo si estende */
  #articoli-blog .anteprimacamera:hover .titolo_camera::after{
    width: 100%;
    opacity: 1;
  }

  /* CTA: freccia che si allunga */
  #articoli-blog .anteprimacamera:hover .blocco_dati .button{
    gap: 22px;
    color: var(--bleis-ink) !important;
  }
  #articoli-blog .anteprimacamera:hover .blocco_dati .button::after{
    width: 44px;
  }
}

/* Frecce carousel su dark */
@media (min-width: 768px){
  #articoli-blog .owlbtns .owlPrev,
  #articoli-blog .owlbtns .owlNext{
    background: transparent;
    border: 1px solid var(--bleis-line);
    color: var(--bleis-ink);
  }
  #articoli-blog .owlbtns .owlPrev:hover,
  #articoli-blog .owlbtns .owlNext:hover{
    background: var(--bleis-accent);
    color: var(--bleis-bg);
    border-color: var(--bleis-accent);
  }
}

/* Page loader (sfondo iniziale) */
#page-loader{
  background-color: var(--bleis-bg) !important;
}
#page-loader .spinner{
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-top-color: var(--bleis-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LINEE VERTICALI FISSE — taglio editoriale stile San Montano
   ─────────────────────────────────────────────────────────────────────────
   Due hairlines avorio che corrono dall'alto verso il basso del browser.
   • Position fixed → restano visibili durante tutto lo scroll
   • Si "disegnano" progressivamente (transform: scaleY 0→1) man mano che
     l'utente scorre la pagina, grazie a animation-timeline: scroll(root)
   • Animazione completata al 30% dello scroll totale
   • Spessore 1px, colore avorio molto tenue (alpha ~0.14)
   • Nascoste sotto 768px (su mobile la pagina è già stretta)

   Browser supporto: Chrome/Edge 115+, Safari 26+.
   Fallback automatico per browser più vecchi: linee sempre piene (statiche).
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bleis-draw-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

body[data-tipopag="interna"]::before,
body[data-tipopag="interna"]::after{
  content: "";
  position: fixed;
  top: 0;
  width: 1px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top center;
  animation: bleis-draw-line linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 30%;
}

body[data-tipopag="interna"]::before{ left: 6vw; }
body[data-tipopag="interna"]::after { right: 6vw; }


/* ─── Linee verticali INTERNE aggiuntive (binari centrali) ─────────────────
   Ancorate a #wrappagina per usare un secondo paio di ::before/::after.
   Posizionate a ~25% / 75% della viewport. Più tenui delle perimetrali
   per non disturbare la lettura, ma percepibili. */
body[data-tipopag="interna"] #wrappagina{
  position: relative;
}
body[data-tipopag="interna"] #wrappagina::before,
body[data-tipopag="interna"] #wrappagina::after{
  content: "";
  position: fixed;
  top: 0;
  width: 1px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top center;
  animation: bleis-draw-line linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 45%;            /* leggermente più lente */
}
body[data-tipopag="interna"] #wrappagina::before{ left: 25vw; }
body[data-tipopag="interna"] #wrappagina::after { right: 25vw; }


/* ─── Linea verticale CENTRALE in #intro-blog ─────────────────────────────
   Separa visivamente la colonna testo dalla colonna immagine.
   Statica (non scroll-driven) ma con animazione di entrata al primo load. */
@media (min-width: 768px){
  #intro-blog{
    position: relative;
  }
  #intro-blog::before{
    content: "";
    position: absolute;
    top: 12%;
    bottom: 12%;
    left: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
    z-index: 2;
    transform: scaleY(0);
    transform-origin: top center;
    animation: bleis-draw-line 1.4s var(--bleis-ease) 0.4s forwards;
  }
}


/* Fallback per browser senza scroll-driven animations */
@supports not (animation-timeline: scroll()) {
  body[data-tipopag="interna"]::before,
  body[data-tipopag="interna"]::after,
  body[data-tipopag="interna"] #wrappagina::before,
  body[data-tipopag="interna"] #wrappagina::after{
    transform: scaleY(1);
    animation: none;
  }
}

/* Nascondi linee perimetrali e centrali su mobile/tablet stretto */
@media (max-width: 767px){
  body[data-tipopag="interna"]::before,
  body[data-tipopag="interna"]::after,
  body[data-tipopag="interna"] #wrappagina::before,
  body[data-tipopag="interna"] #wrappagina::after{
    display: none;
  }
}
@media (max-width: 991px){
  /* le 2 centrali (25vw/75vw) scompaiono prima per non soffocare il layout */
  body[data-tipopag="interna"] #wrappagina::before,
  body[data-tipopag="interna"] #wrappagina::after{
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAST RESERVATION — Dark monocromatico, taglio editoriale minimal
   ─────────────────────────────────────────────────────────────────────────
   Tutto trasparente: niente blocchi colorati pieni, niente sfondi.
   Solo hairlines bianche sottili come divisori e bottoni outline.
   Stile coerente con il resto del blog (Montserrat, scala bianco/nero).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Overlay full-screen ─── */
#frHeader div.fastreservation.apertura-full{
  background-color: rgba(0, 0, 0, 0.94) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--bleis-font);
}


/* Contenitore form */
#frHeader div.fastreservation .contenitore-fr{
  background: transparent !important;
  color: #ffffff;
  max-width: min(1200px, 90vw);
  margin: 0 auto;
  padding: 0;
}
#frHeader div.fastreservation .contenitore-fr form{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  position: relative;
}

div.fastreservation.stile-custom input.datepicker {
    height: 55px;
}

/* Bottone CHIUDI (X) — in alto a destra fuori dal form */
#frHeader div.fastreservation.apertura-full .btn-chiudiFR,
#frHeader div.fastreservation.apertura-standard .btn-chiudiFR{
  position: absolute;
  top: -56px;
  right: 10%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--bleis-ease), color 0.3s var(--bleis-ease);
}
#frHeader div.fastreservation .btn-chiudiFR:hover{
  border-color: #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;
}

/* ─── Label uppercase ─── */
.fastreservation .labelfastr{
  display: block;
  font-family: var(--bleis-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 14px;
}

.data_fr.checkin.component_fr, .data_fr.checkout.component_fr {
    border-bottom: 1px solid #fff !important;
}

.input_persone.component_fr {
    border-bottom: 1px solid #fff !important;
}

.input_listino.component_fr {
    border-bottom: 1px solid #fff !important;
}

/* ─── Componenti (data, persone, promocode) ─── */
#frHeader div.fastreservation .component_fr{
  /* flex: 1 1 0; */
  /* min-width: 0; */
  /* padding: 28px 30px; */
  /* border-right: 1px solid rgba(255, 255, 255, 0.10); */
  background: transparent !important;
  cursor: pointer;
  position: relative;
  /* min-height: 140px; */
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
  transition: background 0.3s var(--bleis-ease);
  border-bottom: none;
  padding-left: 0;
}
#frHeader div.fastreservation .component_fr:hover{
  background: rgba(255, 255, 255, 0.03) !important;
}
#frHeader div.fastreservation .component_fr.prencanc_fr,
#frHeader div.fastreservation .prencanc_fr{
  border-right: none;
}

/* Numero giorno / persone — grande ma misurato */
#frHeader div.fastreservation .blckelem{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#frHeader div.fastreservation .elem-grande,
#frHeader div.fastreservation .giorno,
#frHeader div.fastreservation .numeropersone,
#frHeader div.fastreservation .listino{
  font-family: var(--bleis-font);
  /* font-size: clamp(2rem, 3.2vw, 2.6rem); */
  font-weight: 300;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.02em;
}
#frHeader div.fastreservation .elem-piccolo,
#frHeader div.fastreservation .mese,
#frHeader div.fastreservation .anno,
#frHeader div.fastreservation .settimana,
#frHeader div.fastreservation .npersone,
#frHeader div.fastreservation .ncamere{
  font-family: var(--bleis-font);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255);
  line-height: 1.3;
}
#frHeader div.fastreservation .box_data{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#frHeader div.fastreservation .box_settimana{
  margin-top: 4px;
}

/* ─── Bottone "PRENOTA ORA" finale — outline trasparente ─── */
#frHeader div.fastreservation .prencanc_fr{
  flex: 0 0 auto;
  padding: 0 !important;
  background: transparent !important;
  display: flex;
  align-items: stretch;
}
#frHeader div.fastreservation .prencanc_fr .btn_fastres,
#frHeader div.fastreservation .prencanc_fr a.btn_fastres,
#frHeader div.fastreservation .prencanc_fr a.elemfr.btn_fastres{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: #4d8594 !important;
  color: #ffffff !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  font-family: var(--bleis-font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none !important;
  height: 100%;
  min-height: 70px;
  cursor: pointer;
  transition: background 0.35s var(--bleis-ease), letter-spacing 0.4s var(--bleis-ease);
  box-shadow: none !important;
}
#frHeader div.fastreservation .prencanc_fr .btn_fastres:hover,
#frHeader div.fastreservation .prencanc_fr a.btn_fastres:hover,
#frHeader div.fastreservation .prencanc_fr a.elemfr.btn_fastres:hover{
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  letter-spacing: 0.32em;
  border: 1px solid #fff !important;
  min-height: 70px;
}
#frHeader div.fastreservation .prencanc_fr .btn_fastres span{
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* ─── Popup interni (persone, listino) ─── */
div.fastreservation .area_input_persone,
div.fastreservation .area_input_listino{
  background: rgba(0, 0, 0, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8) !important;
  border-radius: 0 !important;
  padding: 26px 24px !important;
  margin-top: 8px;
  color: #ffffff;
  border: 1px solid rgb(255 255 255) !important;
}
div.fastreservation .area_input_persone .elemfr,
div.fastreservation .area_input_listino .elemfr{
  display: block;
  font-family: var(--bleis-font);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(255 255 255) !important;
  margin-bottom: 10px;
}
.cont_input_persone select,
.cont_input_persone input,
div.fastreservation .area_input_listino .listinoinput{
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: var(--bleis-font);
  font-size: 1rem;
  padding: 8px 0 !important;
  outline: none;
  transition: border-color 0.3s var(--bleis-ease);
}
.cont_input_persone select:focus,
.cont_input_persone input:focus,
div.fastreservation .area_input_listino .listinoinput:focus{
  border-bottom-color: #ffffff !important;
}
.cont_input_persone select option{
  background: #000000;
  color: #ffffff;
}

/* Bottoni "OK" dentro popup — outline trasparente */
div.fastreservation .area_input_notti .chiudi,
div.fastreservation .area_input_persone .chiudi,
div.fastreservation .area_input_listino .chiudi{
  width: 100% !important;
  margin-top: 22px !important;
  padding: 12px 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 0 !important;
  font-family: var(--bleis-font);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--bleis-ease), background 0.3s var(--bleis-ease);
  height: auto !important;
}
div.fastreservation .area_input_notti .chiudi:hover,
div.fastreservation .area_input_persone .chiudi:hover,
div.fastreservation .area_input_listino .chiudi:hover{
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ─── Datepicker — tema dark ─── */
#frHeader div.fastreservation .datepicker.datepicker-dropdown,
#frHeader div.fastreservation .datepicker-dropdown .datepicker-picker{
  background: rgba(0, 0, 0, 0.96) !important;
  color: #ffffff !important;
  border: 1px solid rgb(255 255 255) !important;
  border-radius: 0 !important;
  /* box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.85) !important; */
}

#frHeader div.fastreservation .datepicker-dropdown .datepicker-picker {
    border: none !important;
}

.datepicker-controls{
  background: transparent !important;
  border-bottom: 1px solid #ffffff59 !important;
  padding: 6px 4px !important;
}
.datepicker-controls .view-switch{
  color: #ffffff !important;
  font-family: var(--bleis-font);
  font-size: 0.74rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent !important;
}
.datepicker-controls .prev-button,
.datepicker-controls .next-button{
  background: transparent !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  transition: background 0.3s var(--bleis-ease);
}
.datepicker-controls .prev-button:hover,
.datepicker-controls .next-button:hover{
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.datepicker .dow{
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: var(--bleis-font);
  font-size: 0.62rem !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.datepicker-cell.day{
  color: #ffffff !important;
  font-family: var(--bleis-font);
  font-size: 0.86rem !important;
  font-weight: 400;
}
.datepicker-cell:not(.disabled):not(.today):not(.selected):hover{
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
}
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled){
  color: rgba(255, 255, 255, 0.22) !important;
}
.datepicker-cell.disabled{
  color: rgba(255, 255, 255, 0.14) !important;
}
.datepicker-grid .datepicker-cell.today:not(.selected){
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
.datepicker-grid .datepicker-cell.selected,
.datepicker-grid .datepicker-cell.selected:hover{
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-weight: 600 !important;
}

/* Input datepicker hidden (il valore si vede nei blocchi giorno/mese) */
div.fastreservation.stile-custom input.datepicker{
  position: absolute;
  opacity: 0;
}



/* ═══════════════════════════════════════════════════════════════════════════
   PATCH FAST RESERVATION + LINEE EDITORIALI + FONT WEIGHT
   ─────────────────────────────────────────────────────────────────────────
   1) Force trasparenza definitiva al bottone "Prenota ora!" finale
      (sovrascrive .contenitore-fr .button.button--standard rosa salmone)
   2) X close più evidente, croce ridisegnata in CSS, bordo bianco pieno
   3) Linee tra h e p (intro-blog + articoli-blog) → trattino editoriale
   4) Gioco di font-weight: numeri sottili 200, titoli 300, occhielli 700
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1) BOTTONE "Prenota ora!" finale — TRASPARENZA FORZATA ──────────────
   Selettore con specificità (1, 6, 1) = batte .contenitore-fr .button.button--standard (0,3,0).
   Override anche di tutti i background possibili (color, image, hover). */
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.button.button--standard.btn_fastres,
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.elemfr.btn_fastres,
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.btn_fastres.button{
  background: #4d8594 !important;
  background-color: #4d8594 !important;
  background-image: none !important;
  color: #ffffff !important;
  /* border: none !important; */
  /* border-left: 1px solid rgba(255, 255, 255, 0.20) !important; */
  box-shadow: none !important;
}
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.button.button--standard.btn_fastres:hover,
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.elemfr.btn_fastres:hover{
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  /* border-left-color: #ffffff !important; */
}


/* ─── 2) BOTTONE CHIUDI (X) — più evidente + croce ridisegnata ──────────── */
body[data-tipopag="interna"] #frHeader div.fastreservation.apertura-full .btn-chiudiFR,
body[data-tipopag="interna"] #frHeader div.fastreservation.apertura-standard .btn-chiudiFR{
            /* nasconde l'icona originale del template */
            position: absolute;
            top: -56px;
            right: 10%;
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            color: #ffffff !important;
            border-radius: 50%;
            cursor: pointer;
            font-size: 0.95rem;
            transition: border-color 0.3s var(--bleis-ease), color 0.3s var(--bleis-ease);
}
/* Nasconde l'<i> icona zmdi-close originale del template */
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR i{
  display: none !important;
}
/* Croce X ridisegnata con due linee CSS */
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR::before,
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: #ffffff;
  transition: background 0.3s var(--bleis-ease);
}
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
body[data-tipopag="interna"] #frHeader div.fastreservation .btn-chiudiFR:hover{
  background: rgba(255, 255, 255, 0.08) !important;
  transform: rotate(90deg);
}


/* ─── 3) LINEE EDITORIALI tra titoli e paragrafi ─────────────────────────
   Trattino orizzontale che separa h1/h3 dal p o h4 successivi.
   Pattern: piccolo segmento ~60-80px, hairline bianco/avorio. */

/* INTRO BLOG: h1 (occhiello) → h3 (titolo) → p (testo) */
#intro-blog h1::after{
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  margin: 22px 0 0;
}
#intro-blog h3::after{
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 26px 0 8px;
}

/* ARTICOLI BLOG: h3 (titolo) → h4 (sotto) */
#articoli-blog .colonnaarea > .row:first-child h3::after{
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 22px auto 18px;
}


/* ─── 4) GIOCO FONT-WEIGHT — taglio editoriale forte ─────────────────────
   • Numeri grandi: weight 200 (extra-light) → eleganza tipografica
   • Titoli h1/h3: weight 300 (light) → contrasto coi paragrafi
   • Occhielli/Label uppercase: weight 700 (bold) → puntate
   • Paragrafi: weight 400 (regular)
   • Bottoni CTA: weight 500 con tracking ampio */

/* Numeri del fast reservation (giorno, persone, mese, anno) */
#frHeader div.fastreservation .elem-grande,
#frHeader div.fastreservation .giorno,
#frHeader div.fastreservation .numeropersone,
#frHeader div.fastreservation .listino{
  font-weight: 200 !important;
}
/* Label "CheckIN" / "CheckOUT" / "Persone" / "Promocode" */
.fastreservation .labelfastr{
  font-weight: 700 !important;
}
/* Etichette popup interni (Camere, Persone, Promocode) */
div.fastreservation .area_input_persone .elemfr,
div.fastreservation .area_input_listino .elemfr{
  font-weight: 700 !important;
}
/* Bottone CTA finale */
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.btn_fastres,
body[data-tipopag="interna"] #frHeader div.fastreservation .prencanc_fr a.elemfr.btn_fastres{
  font-weight: 500 !important;
}
/* Bottoni "OK" interni */
div.fastreservation .area_input_notti .chiudi,
div.fastreservation .area_input_persone .chiudi,
div.fastreservation .area_input_listino .chiudi{
  font-weight: 500 !important;
}

/* Blog content — font-weight editoriali */
#intro-blog h1{
  font-weight: 700 !important;        /* occhiello uppercase punta forte */
}
#intro-blog h3{
  font-weight: 300 !important;        /* titolo light per eleganza */
}
#intro-blog p{
  font-weight: 400 !important;
}
#intro-blog p b{
  font-weight: 600 !important;
}
#articoli-blog .colonnaarea > .row:first-child h3{
  font-weight: 300 !important;
}
#articoli-blog .colonnaarea > .row:first-child h3 span{
  font-weight: 700 !important;        /* occhiello "Dal diario" punta forte */
}
#articoli-blog .colonnaarea > .row:first-child h4{
  font-weight: 300 !important;
}
#articoli-blog .titolo_camera span{
  font-weight: 400 !important;        /* titolo card neutro, leggibile */
}


/* ═══════════════════════════════════════════════════════════════════════════
   SEZIONE-BLOG CINEMATIC — finale fullscreen con effetto WOW editoriale
   ─────────────────────────────────────────────────────────────────────────
   • Ken Burns lento sul background image (drift orizzontale + zoom subdolo)
   • Overlay stratificato a 3 livelli per profondità e leggibilità
   • Linea verticale decorativa che si disegna dall'alto
   • Titolo h3 a doppia gravità tipografica (200 vs 700)
   • Numero gigante "04" in trasparenza come marker editoriale di fine
   • Reveal staggered di titolo, paragrafo, link (animate-in da basso)
   • Link monumentali con freccia che si allunga al hover
   • Filetto orizzontale "endmark" in basso
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bleis-rise{
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bleis-draw-vert{
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes bleis-draw-horz{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes bleis-kenburns{
  0%   { background-position: 50% 50%; background-size: 110% auto; }
  50%  { background-position: 30% 55%; background-size: 116% auto; }
  100% { background-position: 70% 45%; background-size: 112% auto; }
}

#sezione-blog{
  position: relative !important;
  overflow: hidden !important;

  /* Sfondo full-width, contenuto interno ristretto */
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  min-height: 100vh !important;
  display: flex !important;
  align-items: center;
  isolation: isolate;

  /* Ken Burns sul background image inline */
  background-attachment: scroll !important;
  background-size: 112% auto;
  background-position: center;
  background-repeat: no-repeat !important;
  animation: bleis-kenburns 28s ease-in-out infinite alternate;
}

/* ─── Overlay stratificato sopra l'immagine ─── */
#sezione-blog::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Vignettatura radiale dai lati verso il centro per focalizzare */
    radial-gradient(ellipse at 35% 60%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.55) 90%,
      rgba(0,0,0,0.85) 100%),
    /* Gradient verticale: scuro in alto, schiarisce in mezzo, molto scuro in basso */
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.20) 25%,
      rgba(0,0,0,0.25) 55%,
      rgba(0,0,0,0.75) 85%,
      rgba(0,0,0,0.95) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ─── Numero decorativo gigante "04" ───
   Ancorato al box interno ristretto via .colonnaarea (non al viewport). */
#sezione-blog .colonnaarea::after{
  content: "04";
  position: absolute;
  bottom: clamp(20px, 4vw, 50px);
  right: var(--bleis-gutter);
  font-family: var(--bleis-font);
  font-size: clamp(6rem, 14vw, 16rem);
  font-weight: 100;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.10);
  line-height: 0.78;
  letter-spacing: -0.04em;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* ─── Area contenuto sopra l'overlay ─── */
#sezione-blog .area{
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
/* Il box-contenuto interno è ristretto al max-width del blog e centrato */
#sezione-blog .colonnaarea{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--bleis-max);
  margin: 0 auto !important;
  padding: 0 var(--bleis-gutter) !important;
}

#sezione-blog .colonnaarea > .row{
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

/* Linea verticale decorativa SOPRA il titolo */
#sezione-blog .colonnaarea > .row:first-child{
  padding-top: clamp(40px, 6vh, 70px);
  padding-bottom: clamp(20px, 3vh, 36px);
}
#sezione-blog .colonnaarea > .row:first-child::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;          /* allineata al bordo sinistro del row (già dentro il gutter) */
  width: 1px;
  height: clamp(40px, 6vh, 70px);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.55));
  transform-origin: top;
  transform: scaleY(0);
  animation: bleis-draw-vert 1.2s var(--bleis-ease) 0.3s forwards;
}

/* ─── Titolo h3 — doppia gravità ─── */
#sezione-blog h3{
  font-family: var(--bleis-font);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 200 !important;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 28px;
  max-width: 22ch;
  text-align: left !important;
  opacity: 0;
  animation: bleis-rise 1.1s var(--bleis-ease) 0.6s forwards;
}
#sezione-blog h3 strong{
  display: block;
  font-weight: 700 !important;
  margin-top: 0.05em;
  color: #ffffff;
}
#sezione-blog h3 br{
  display: block;
  content: "";
  margin-bottom: 0;
}

/* ─── Paragrafo ─── */
#sezione-blog p{
  font-family: var(--bleis-font);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 300 !important;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 0 56px;
  text-align: left !important;
  opacity: 0;
  animation: bleis-rise 1.1s var(--bleis-ease) 0.95s forwards;
}

/* ─── Riga link CTA — pillole monumentali ─── */
#sezione-blog .colonnaarea > .row:nth-child(2){
  padding-top: 0;
  padding-bottom: clamp(40px, 6vh, 70px);
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}
#sezione-blog .colonnaarea > .row:nth-child(2) > div{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Link esterni */
#sezione-blog a.linkesterno, #cta-articolo a.button{
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 22px 38px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: var(--bleis-font);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  animation: bleis-rise 1s var(--bleis-ease) 1.35s forwards;
  transition:
    border-color 0.5s var(--bleis-ease),
    background 0.5s var(--bleis-ease),
    letter-spacing 0.5s var(--bleis-ease),
    padding 0.5s var(--bleis-ease),
    color 0.4s var(--bleis-ease);
  background: #4d8594 !important;
}
/* Stagger sul secondo link */
#sezione-blog .colonnaarea > .row:nth-child(2) > div:nth-child(2) a.linkesterno{
  animation-delay: 1.55s;
}

/* Shaft della freccia */
#sezione-blog a.linkesterno::after, #cta-articolo a.button::after{
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--bleis-ease);
  flex-shrink: 0;
}
/* Wash di luce diagonale che attraversa il link al hover */
#sezione-blog a.linkesterno::before, #cta-articolo a.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.06) 50%,
    transparent 100%);
  transition: left 0.7s var(--bleis-ease);
  pointer-events: none;
}

#sezione-blog a.linkesterno:hover, #cta-articolo a.button:hover{
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.04) !important;
  letter-spacing: 0.34em;
  padding-right: 56px;
  color: #ffffff !important;
}
#sezione-blog a.linkesterno:hover::after{
  width: 52px;
}
#sezione-blog a.linkesterno:hover::before{
  left: 120%;
}


/* ─── Endmark: hairline orizzontale in basso, agganciato al box interno ─── */
#sezione-blog .colonnaarea::before{
  content: "";
  position: absolute;
  bottom: clamp(20px, 3vh, 36px);
  left: var(--bleis-gutter);
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.55);
  z-index: 4;
  transform-origin: left;
  transform: scaleX(0);
  animation: bleis-draw-horz 1s var(--bleis-ease) 1.9s forwards;
}


/* ─── Responsive ─── */
@media (max-width: 768px){
  #sezione-blog{
    background-size: cover;
    animation-duration: 36s;
    min-height: clamp(440px, 100vh, 600px) !important;
    background-size: cover !important;
  }
  #sezione-blog::after{
    font-size: clamp(5rem, 22vw, 9rem);
  }
    #sezione-blog .colonnaarea > .row:nth-child(2) {
        justify-content: flex-start;
        margin-left: 10px !important;
    }
  #sezione-blog a.linkesterno{
    width: 100%;
    justify-content: space-between;
  }

    #header.pos_absolute .ch2 .logosito svg {
    width: clamp(400px, 70vw, 1200px) !important;
}
}

@media (prefers-reduced-motion: reduce){
  #sezione-blog,
  #sezione-blog h3,
  #sezione-blog p,
  #sezione-blog a.linkesterno,
  #sezione-blog .colonnaarea > .row:first-child::before,
  #sezione-blog .area::before{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }


}


/* ---------------------------------------------------------------------------
   FOOTER � Dark monocromatico, linee in movimento, logo Bleiseriano
   -------------------------------------------------------------------------
   � Sfondo nero, coerente col blog
   � Linea orizzontale animata in cima (entrance mark)
   � Logo bianco grande, centrato (filter invert sul PNG esistente)
   � 4 colonne con divisori verticali animati
   � Label uppercase con trattino orizzontale animato
   � Link con underline che cresce al hover
   � Social icons in cerchi outline minimal
   � Sezione legale finale a hairline
   --------------------------------------------------------------------------- */

@keyframes bleis-footer-line-h{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes bleis-footer-line-v{
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* --- Container footer --- */
body[data-tipopag="interna"] footer#footer{
  background: #000000 !important;
  background-image: none !important;
  padding: 0 !important;
  position: relative;
  color: #ffffff;
  font-family: var(--bleis-font);
  overflow: hidden;
}

/* Linea orizzontale animata in cima al footer � entrance mark
   Si estende dall'esterno verso il centro al primo ingresso nel viewport. */
body[data-tipopag="interna"] footer#footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: clamp(50px, 7vw, 110px);
  right: clamp(50px, 7vw, 110px);
  height: 1px;
  background: rgba(255,255,255,0.22);
  transform: scaleX(0);
  transform-origin: center;
  animation: bleis-footer-line-h linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
/* Fallback (browser senza view timeline) */
@supports not (animation-timeline: view()) {
  body[data-tipopag="interna"] footer#footer::before{
    transform: scaleX(1);
    animation: none;
  }
}

/* Sezione 1 footer: 5 colonne grid con 10% di gutter laterali sulle info,
   logo invece full-width (occupa anche i 10% laterali). */
body[data-tipopag="interna"] footer#footer #sezfooter1{
  background: transparent !important;
  background-color: transparent !important;
  display: grid !important;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  gap: 0 40px;
  row-gap: clamp(50px, 6vw, 90px);
  align-items: start;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(80px, 8vw, 130px) 0 clamp(60px, 6vw, 90px) !important;
  position: relative;
}

/* LOGO � full-width 100% (occupa tutta la riga, anche oltre il 10% gutter) */
body[data-tipopag="interna"] footer#footer .colfooter-logo,
body[data-tipopag="interna"] footer#footer .colfooter:first-child{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;        /* batte Bootstrap .col-sm-3 */
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 0 clamp(20px, 5vw, 80px) !important;
  position: relative;
  margin-bottom: 0;
}
body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito,
body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito{
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  transition: opacity 0.4s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito svg,
body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito svg{
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  transition: filter 0.4s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito img,
body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito img{
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  display: block;
}
body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito:hover svg,
body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito:hover svg,
body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito:hover img,
body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito:hover img{
  filter: brightness(0) invert(1) opacity(0.85);
}

/* COLONNE INFO (Indirizzo, Telefono, Email/Social) � centrate,
   ognuna nella sua colonna del grid (saltando i 10% laterali) */
body[data-tipopag="interna"] footer#footer .colfooter:not(.colfooter-logo):not(:first-child){
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start;
  text-align: center;
  gap: 14px;
  grid-row: 2;
  width: 100%;
}
body[data-tipopag="interna"] footer#footer .colfooter:nth-child(2):not(.colfooter-logo){ grid-column: 2; }
body[data-tipopag="interna"] footer#footer .colfooter:nth-child(3):not(.colfooter-logo){ grid-column: 3; }
body[data-tipopag="interna"] footer#footer .colfooter:nth-child(4):not(.colfooter-logo){ grid-column: 4; }

/* Divisori verticali tra le 3 colonne info (tra 1-2 e 2-3, non dopo l'ultima) */
body[data-tipopag="interna"] footer#footer .colfooter:not(.colfooter-logo):not(:first-child):not(:last-child)::after{
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -20px;
  width: 1px;
  background: rgba(255,255,255,0.10);
}

/* Label colonne ("Indirizzo", "Telefono", "Email", "Social") � centrate */
body[data-tipopag="interna"] footer#footer .colfooter .label{
  display: block;
  font-family: var(--bleis-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 auto 8px;
  padding-bottom: 18px;
  position: relative;
  text-align: center;
}
body[data-tipopag="interna"] footer#footer .colfooter .label p{
  display: inline;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* Trattino animato sotto la label � centrato */
body[data-tipopag="interna"] footer#footer .colfooter .label::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  transform: translateX(-50%);
  transition: width 0.5s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer .colfooter:hover .label::after{
  width: 60px;
  background: #ffffff;
}

/* Etichette/righe info */
body[data-tipopag="interna"] footer#footer .colfooter .elem{
  font-family: var(--bleis-font);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Link telefono / email */
body[data-tipopag="interna"] footer#footer .colfooter .elem a{
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.3s var(--bleis-ease);
}
/* Underline animata sotto i link */
body[data-tipopag="interna"] footer#footer .colfooter .elem a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer .colfooter .elem a:hover::after{
  width: 100%;
}
body[data-tipopag="interna"] footer#footer .colfooter .elem a:hover{
  color: rgba(255,255,255,0.7) !important;
}

/* Nasconde span.prefix (Telefono / Email) � ridondante con la label */
body[data-tipopag="interna"] footer#footer span.prefix{
  display: none !important;
}

/* SOCIAL � cerchi outline minimal */
body[data-tipopag="interna"] footer#footer .colfooter .elemsocial{
  display: inline-block;
  margin: 0 8px 0 0;
}
body[data-tipopag="interna"] footer#footer .colfooter .elemsocial a.linksocial{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition:
    border-color 0.4s var(--bleis-ease),
    background 0.4s var(--bleis-ease),
    transform 0.4s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer .colfooter .elemsocial a.linksocial:hover{
  border-color: #ffffff;
  background: rgba(255,255,255,0.06);
  transform: translateY(-3px);
}
body[data-tipopag="interna"] footer#footer .colfooter .elemsocial a.linksocial i{
  color: inherit;
  font-size: 0.95rem;
}

/* --- SEZIONE 3 (legale) � full-width, gradient nero ? grigio scuro --- */
body[data-tipopag="interna"] footer#footer #sezfooter3{
  background: linear-gradient(180deg,
    #000000 0%,
    #0d0d0d 30%,
    #181818 65%,
    #232323 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(28px, 3.2vw, 44px) clamp(50px, 7vw, 110px) clamp(40px, 4.5vw, 60px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  position: relative;
}

body[data-tipopag="interna"] footer#footer #sezfooter3 span.label{
  font-family: var(--bleis-font);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 span.label a{
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity 0.3s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer #sezfooter3 span.label a:hover{
  opacity: 0.7;
}

body[data-tipopag="interna"] footer#footer #sezfooter3 .datiaziendali,
body[data-tipopag="interna"] footer#footer #sezfooter3 .dat-aziend,
body[data-tipopag="interna"] footer#footer #sezfooter3 .dat-circin{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--bleis-font);
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  display: none;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .datiaziendali .elem,
body[data-tipopag="interna"] footer#footer #sezfooter3 .datiaziendali .prefix{
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .datiaziendali .prefix{
  color: rgba(255,255,255,0.30);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Link Privacy / Cookie / Accessibility / Sitemap */
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.selezunder{
  font-family: var(--bleis-font);
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.selezunder a{
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 1px;
  transition: color 0.3s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.selezunder a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.4s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.selezunder a:hover{
  color: #ffffff !important;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.selezunder a:hover::after{
  width: 100%;
}

/* Copyright easyc */
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.easyc{
  font-family: var(--bleis-font);
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.easyc a{
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  transition: color 0.3s var(--bleis-ease);
}
body[data-tipopag="interna"] footer#footer #sezfooter3 .elem.easyc a:hover{
  color: #ffffff !important;
}


/* --- Responsive --- */
@media (max-width: 991px){
  body[data-tipopag="interna"] footer#footer #sezfooter1{
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 70px 36px 50px !important;
  }
  body[data-tipopag="interna"] footer#footer .colfooter:not(.colfooter-logo):not(:first-child){
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 30px;
  }
  body[data-tipopag="interna"] footer#footer .colfooter:not(.colfooter-logo):not(:first-child):not(:last-child)::after{
    display: none;     /* nascondo i divisori verticali */
  }
  body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito svg,
  body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito img,
  body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito svg,
  body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito img{
    max-width: 480px;
  }
  body[data-tipopag="interna"] footer#footer #sezfooter3{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 36px 48px !important;
  }
}
@media (max-width: 575px){
  body[data-tipopag="interna"] footer#footer #sezfooter1{
    padding: 50px 28px 36px !important;
  }
  body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito svg,
  body[data-tipopag="interna"] footer#footer .colfooter-logo .logosito img,
  body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito svg,
  body[data-tipopag="interna"] footer#footer .colfooter:first-child .logosito img{
    max-width: 320px;
  }
  body[data-tipopag="interna"] footer#footer #sezfooter3{
    padding: 24px 28px 36px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARTICOLO BLEISERIANO — Estensione tema dark a body[data-tipopag="articolo"]
   ─────────────────────────────────────────────────────────────────────────
   Le pagine articolo hanno body data-tipopag="articolo" (diverso da
   "interna" della home). Qui mappo tutte le regole dark del blog
   per applicarle anche alle pagine articolo: header, logo, footer,
   linee verticali, fast reservation, bottoni, fonts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body base */
body[data-tipopag="articolo"]{
  background-color: var(--bleis-bg);
  color: var(--bleis-body);
  font-family: var(--bleis-font);
}
body[data-tipopag="articolo"] *:not(i):not(.zmdi):not(.material-symbols-rounded){
  font-family: var(--bleis-font);
}

/* Linee verticali perimetrali + centrali scroll-driven */
body[data-tipopag="articolo"]::before,
body[data-tipopag="articolo"]::after{
  content: "";
  position: fixed;
  top: 0;
  width: 1px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top center;
  animation: bleis-draw-line linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 30%;
}
body[data-tipopag="articolo"]::before{ left: 6vw; }
body[data-tipopag="articolo"]::after { right: 6vw; }

body[data-tipopag="articolo"] #wrappagina{
  position: relative;
}
body[data-tipopag="articolo"] #wrappagina::before,
body[data-tipopag="articolo"] #wrappagina::after{
  content: "";
  position: fixed;
  top: 0;
  width: 1px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
  z-index: 1;
  transform: scaleY(0);
  transform-origin: top center;
  animation: bleis-draw-line linear forwards;
  animation-timeline: scroll(root);
  animation-range: 0% 45%;
}
body[data-tipopag="articolo"] #wrappagina::before{ left: 25vw; }
body[data-tipopag="articolo"] #wrappagina::after { right: 25vw; }

@supports not (animation-timeline: scroll()) {
  body[data-tipopag="articolo"]::before,
  body[data-tipopag="articolo"]::after,
  body[data-tipopag="articolo"] #wrappagina::before,
  body[data-tipopag="articolo"] #wrappagina::after{
    transform: scaleY(1);
    animation: none;
  }
}
@media (max-width: 767px){
  body[data-tipopag="articolo"]::before,
  body[data-tipopag="articolo"]::after,
  body[data-tipopag="articolo"] #wrappagina::before,
  body[data-tipopag="articolo"] #wrappagina::after{ display: none; }
}
@media (max-width: 991px){
  body[data-tipopag="articolo"] #wrappagina::before,
  body[data-tipopag="articolo"] #wrappagina::after{ display: none; }
}

/* Page loader, header, logo, footer ereditano dalle regole "interna"
   con la stessa logica — aggiungo gli stessi selettori per articolo */
body[data-tipopag="articolo"] #page-loader{
  background-color: var(--bleis-bg) !important;
}
body[data-tipopag="articolo"] #page-loader .spinner{
  border-color: rgba(255, 255, 255, 0.15) !important;
  border-top-color: var(--bleis-accent) !important;
}

/* Footer — eredita styling completo del blog */
body[data-tipopag="articolo"] footer#footer{
  background: #000000 !important;
  background-image: none !important;
  padding: 0 !important;
  position: relative;
  color: #ffffff;
  font-family: var(--bleis-font);
  overflow: hidden;
}
body[data-tipopag="articolo"] footer#footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: clamp(50px, 7vw, 110px);
  right: clamp(50px, 7vw, 110px);
  height: 1px;
  background: rgba(255,255,255,0.22);
  transform: scaleX(0);
  transform-origin: center;
  animation: bleis-footer-line-h linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
body[data-tipopag="articolo"] footer#footer #sezfooter1{
  background: transparent !important;
  display: grid !important;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  gap: 0 40px;
  row-gap: clamp(50px, 6vw, 90px);
  align-items: start;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(80px, 8vw, 130px) 0 clamp(60px, 6vw, 90px) !important;
}
body[data-tipopag="articolo"] footer#footer #sezfooter3{
  background: linear-gradient(180deg, #000000 0%, #0d0d0d 30%, #181818 65%, #232323 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  width: 100%;
  margin: 0 !important;
  padding: clamp(28px, 3.2vw, 44px) clamp(50px, 7vw, 110px) clamp(40px, 4.5vw, 60px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ARTICOLO BLEISERIANO — Stile sezioni interne
   ─────────────────────────────────────────────────────────────────────────
   1)  #slide-blog        → hero come home ma con taglio diagonale OPPOSTO
   2)  section.elemento   → separator invisibile / linea decorativa
   3)  #pezzo1            → intro con h1 grande + p
   4)  #foto-1, #foto2    → foto cinematic full-width
   5)  #pezzo2-5          → blocchi di testo con numerazione capitolo
   6)  #hotel-bleis       → finale UGUALE a #sezione-blog della home
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1) HERO #slide-blog — altezza ridotta + taglio AGGRESSIVO ─── */
body[data-tipopag="articolo"] #slide-blog{
  position: relative !important;
  overflow: hidden !important;
  min-height: 55vh !important;
  height: 55vh !important;
  padding: 0 !important;
  background-attachment: scroll !important;
  background-size: 115% auto;
  background-position: center;
  background-repeat: no-repeat !important;
  animation: bleis-kenburns 32s ease-in-out infinite alternate;
  /* Taglio MOLTO marcato in basso: 2 angoli che entrano profondi, asimmetrici */
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 78%,
    78% 96%,
    55% 75%,
    28% 92%,
    0 70%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 78%,
    78% 96%,
    55% 75%,
    28% 92%,
    0 70%
  );
}
/* Overlay sul video */
body[data-tipopag="articolo"] #slide-blog::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.40) 0%,
      rgba(0,0,0,0.10) 35%,
      rgba(0,0,0,0.25) 70%,
      rgba(0,0,0,0.70) 100%),
    radial-gradient(ellipse at 30% 60%, transparent 30%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Linee diagonali bianche traslucide che attraversano la foto */
body[data-tipopag="articolo"] #slide-blog::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 0%, transparent 73.9%,
      rgba(255,255,255,0.18) 74%, rgba(255,255,255,0.18) 74.3%,
      transparent 74.4%, transparent 100%),
    linear-gradient(-95deg,
      transparent 0%, transparent 85.9%,
      rgba(255,255,255,0.10) 86%, rgba(255,255,255,0.10) 86.3%,
      transparent 86.4%, transparent 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}


/* ─── 2) Sezione elemento intermedia — separator hairline ─── */
body[data-tipopag="articolo"] #article > section.elemento.sezione{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: relative;
}
body[data-tipopag="articolo"] #article > section.elemento.sezione .colonnaelemento{
  height: 1px;
  background: rgba(255,255,255,0.10);
  max-width: 60%;
  margin: 50px auto !important;
  padding: 0 !important;
}


/* ─── 3-5) BLOCCHI TESTO #pezzo1..#pezzo5 — layout editoriale uniforme ─── */
body[data-tipopag="articolo"] #article > section[id^="pezzo"]{
  background: var(--bleis-bg);
  padding: clamp(40px, 5vw, 70px) 0 !important;
  position: relative;
  counter-increment: pezzo-articolo;
}
body[data-tipopag="articolo"] #article > section[id^="pezzo"] .area,
body[data-tipopag="articolo"] #article > section[id^="pezzo"] .colonnaarea{
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
body[data-tipopag="articolo"] #article > section[id^="pezzo"] > .area > .colonnaarea > .row{
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 40px) !important;
  position: relative;
}

/* Numero capitolo GIGANTE in trasparenza dietro al titolo — wow editoriale */
body[data-tipopag="articolo"] #article > section[id^="pezzo"]:not(#pezzo1) > .area > .colonnaarea > .row::before{
  content: counter(pezzo-articolo, decimal-leading-zero);
  display: block;
  font-family: var(--bleis-font);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.20);
  margin: 0 0 10px;
  text-align: left;
  user-select: none;
}
/* Label CAPITOLO sopra il numero */
body[data-tipopag="articolo"] #article > section[id^="pezzo"]:not(#pezzo1) > .area > .colonnaarea > .row::after{
  content: "CAPITOLO";
  display: block;
  position: absolute;
  top: 26px;
  left: clamp(20px, 5vw, 40px);
  font-family: var(--bleis-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.55);
  z-index: 3;
}

/* H1 grande del primo pezzo (titolo articolo) */
body[data-tipopag="articolo"] #pezzo1 h1{
  font-family: var(--bleis-font);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 40px;
  text-align: left;
  position: relative;
  padding-bottom: 30px;
}
/* Trattino oro sotto al titolo */
body[data-tipopag="articolo"] #pezzo1 h1::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 1px;
  background: #ffffff;
}

/* H2 dei capitoli successivi (pezzo2..5) */
body[data-tipopag="articolo"] #article > section[id^="pezzo"] h2{
  font-family: var(--bleis-font);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 30px;
  padding-top: 20px;
  text-align: left;
}

/* Paragrafi */
body[data-tipopag="articolo"] #article > section[id^="pezzo"] p{
  font-family: var(--bleis-font);
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,0.82);
  text-align: justify !important;
  margin: 0 0 1.4em;
}
body[data-tipopag="articolo"] #article > section[id^="pezzo"] p:last-child{
  margin-bottom: 0;
}
body[data-tipopag="articolo"] #article > section[id^="pezzo"] p strong{
  color: #ffffff;
  font-weight: 600;
}
body[data-tipopag="articolo"] #article > section[id^="pezzo"] p em{
  color: rgba(255,255,255,0.95);
  font-style: italic;
  font-weight: 400;
}

/* Drop cap sul primo paragrafo di #pezzo1 */
body[data-tipopag="articolo"] #pezzo1 p:first-of-type::first-letter{
  font-family: var(--bleis-font);
  font-size: 4.6rem;
  font-weight: 200;
  float: left;
  line-height: 0.9;
  margin: 6px 14px 0 0;
  color: #ffffff;
}

/* Variazione bg leggera tra sezioni pari/dispari */
body[data-tipopag="articolo"] #pezzo2,
body[data-tipopag="articolo"] #pezzo4{
  background: linear-gradient(180deg, var(--bleis-bg) 0%, #0e0e0e 50%, var(--bleis-bg) 100%);
}


/* ─── 4) FOTO editoriali WOW — #foto-1 e #foto2 ───
   Pattern: numero gigante "FIG. 01" in trasparenza, cornice doppia con
   offset, hover che scala + linee diagonali entrano dai lati. */
body[data-tipopag="articolo"] #article > section[id^="foto"]{
  padding: clamp(60px, 8vw, 110px) 0 !important;
  background: var(--bleis-bg);
  position: relative;
  counter-increment: foto-articolo;
}
body[data-tipopag="articolo"] #article > section[id^="foto"] .area,
body[data-tipopag="articolo"] #article > section[id^="foto"] .colonnaarea{
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}
body[data-tipopag="articolo"] #article > section[id^="foto"] > .area > .colonnaarea > .row{
  max-width: 1100px;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
  position: relative;
}

/* LABEL "FIG. 01" sopra a destra, prima della foto */
body[data-tipopag="articolo"] #article > section[id^="foto"] > .area > .colonnaarea > .row::before{
  content: "FIG. " counter(foto-articolo, decimal-leading-zero);
  position: absolute;
  top: -38px;
  right: clamp(20px, 5vw, 60px);
  font-family: var(--bleis-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.55);
  z-index: 3;
}
/* Trattino dopo la label */
body[data-tipopag="articolo"] #article > section[id^="foto"] > .area > .colonnaarea > .row::after{
  content: "";
  position: absolute;
  top: -34px;
  right: calc(clamp(20px, 5vw, 60px) + 88px);
  width: 50px;
  height: 1px;
  background: rgba(255,255,255,0.40);
}

/* Container foto con cornice doppia editoriale */
body[data-tipopag="articolo"] #article > section[id^="foto"] .cont_sing{
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  width: 100%;
  position: relative;
}
/* Cornice outline che esce dalla foto (decorativa, al hover si sposta) */
body[data-tipopag="articolo"] #article > section[id^="foto"] .cont_sing::before{
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border: 1px solid rgba(255,255,255,0.18);
  z-index: 0;
  transition: all 0.7s var(--bleis-ease);
  pointer-events: none;
}
/* Numero GIGANTE in trasparenza dietro la foto */
body[data-tipopag="articolo"] #article > section[id^="foto"] .cont_sing::after{
  content: counter(foto-articolo, decimal-leading-zero);
  position: absolute;
  bottom: -50px;
  left: -30px;
  font-family: var(--bleis-font);
  font-size: clamp(7rem, 14vw, 13rem);
  font-weight: 100;
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.20);
  z-index: 0;
  user-select: none;
  pointer-events: none;
  transition: transform 1s var(--bleis-ease);
}

body[data-tipopag="articolo"] #article > section[id^="foto"] figure,
body[data-tipopag="articolo"] #article > section[id^="foto"] picture{
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  background: var(--bleis-bg);
}

body[data-tipopag="articolo"] #article > section[id^="foto"] img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
  filter: brightness(0.86) saturate(0.92) contrast(1.04);
  transition:
    filter 0.9s var(--bleis-ease),
    transform 1.3s var(--bleis-ease),
    clip-path 1s var(--bleis-ease);
  border-radius: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* HOVER: cornice si scosta, foto si schiarisce + scala leggera,
   numero gigante si muove diagonalmente */
body[data-tipopag="articolo"] #article > section[id^="foto"] .cont_sing:hover::before{
  top: 28px;
  left: 28px;
  right: -28px;
  bottom: -28px;
  border-color: rgba(255,255,255,0.45);
}
body[data-tipopag="articolo"] #article > section[id^="foto"] .cont_sing:hover::after{
  transform: translate(-12px, 8px);
  -webkit-text-stroke-color: rgba(255,255,255,0.35);
}
body[data-tipopag="articolo"] #article > section[id^="foto"] figure:hover img{
  filter: brightness(1) saturate(1) contrast(1);
  transform: scale(1.03);
}

/* Linea diagonale che ATTRAVERSA la foto (graffio editoriale, sempre presente) */
body[data-tipopag="articolo"] #article > section[id^="foto"] figure::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 0%, transparent 79.9%,
    rgba(255,255,255,0.22) 80%, rgba(255,255,255,0.22) 80.2%,
    transparent 80.3%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.7;
  transition: opacity 0.6s var(--bleis-ease);
}
body[data-tipopag="articolo"] #article > section[id^="foto"] figure:hover::after{
  opacity: 1;
}


/* ─── 5) #hotel-bleis — finale UGUALE a #sezione-blog della home ─── */
body[data-tipopag="articolo"] #hotel-bleis{
  position: relative !important;
  overflow: hidden !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center;
  isolation: isolate;
  background-attachment: scroll !important;
  background-size: 112% auto;
  background-position: center;
  background-repeat: no-repeat !important;
  animation: bleis-kenburns 28s ease-in-out infinite alternate;
}

/* L'overlay nero inline (cbck_283) — lo trasformo in vignettatura */
body[data-tipopag="articolo"] #hotel-bleis .cbck_283{
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  z-index: 1;
}
body[data-tipopag="articolo"] #hotel-bleis .cbck_283::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 60%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 25%,
      rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.75) 85%,
      rgba(0,0,0,0.95) 100%);
  pointer-events: none;
}

/* Endmark decorativo "✦" gigante */
body[data-tipopag="articolo"] #hotel-bleis::after{
  content: "✦";
  position: absolute;
  bottom: clamp(20px, 4vw, 50px);
  right: clamp(20px, 5vw, 80px);
  font-family: var(--bleis-font);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 100;
  color: rgba(255,255,255,0.06);
  line-height: 0.78;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Area contenuto del bleis: max-width centrato a sx + ristretto */
body[data-tipopag="articolo"] #hotel-bleis .area{
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
body[data-tipopag="articolo"] #hotel-bleis .colonnaarea{
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--bleis-max);
  margin: 0 auto !important;
  padding: 0 var(--bleis-gutter) !important;
}
body[data-tipopag="articolo"] #hotel-bleis .colonnaarea > .row{
  padding: clamp(50px, 8vh, 90px) 0 !important;
  margin: 0 !important;
  position: relative;
}
/* Linea verticale decorativa sopra il titolo */
body[data-tipopag="articolo"] #hotel-bleis .colonnaarea > .row::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: clamp(40px, 6vh, 70px);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.55));
  transform-origin: top;
  transform: scaleY(0);
  animation: bleis-draw-vert 1.2s var(--bleis-ease) 0.3s forwards;
}

/* H3 finale — doppia gravità tipografica */
body[data-tipopag="articolo"] #hotel-bleis h3{
  font-family: var(--bleis-font);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 200 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 30px;
  max-width: 24ch;
  text-align: left !important;
  opacity: 0;
  animation: bleis-rise 1.1s var(--bleis-ease) 0.6s forwards;
}

/* Paragrafi della sezione hotel-bleis */
body[data-tipopag="articolo"] #hotel-bleis p{
  font-family: var(--bleis-font);
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  font-weight: 300 !important;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  max-width: 64ch;
  margin: 0 0 1.4em;
  text-align: left !important;
  opacity: 0;
  animation: bleis-rise 1.1s var(--bleis-ease) 0.95s forwards;
}
body[data-tipopag="articolo"] #hotel-bleis p:last-of-type{
  margin-bottom: 0;
}
body[data-tipopag="articolo"] #hotel-bleis p strong{
  color: #ffffff;
  font-weight: 600;
}
body[data-tipopag="articolo"] #hotel-bleis p em{
  color: rgba(255,255,255,0.95);
  font-style: italic;
  font-family: var(--bleis-font);
}


/* ─── Article container reset + counter reset ─── */
body[data-tipopag="articolo"] #article{
  background: var(--bleis-bg);
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
  counter-reset: pezzo-articolo 0 foto-articolo 0;
}

/* Responsive */
@media (max-width: 768px){
  body[data-tipopag="articolo"] #slide-blog{
    min-height: 36vh !important;
    height: 36vh !important;
    animation-duration: 40s;
  }
  body[data-tipopag="articolo"] #pezzo1 h1{
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  body[data-tipopag="articolo"] #pezzo1 p:first-of-type::first-letter{
    font-size: 3.4rem;
    margin: 4px 10px 0 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PATCH ARTICOLO — uniformazione headings, allineamento p, sezione hotel,
   bottone Prenota ora dell'header (replica di body[data-tipopag="interna"])
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Tutti gli H della pagina articolo: weight 700 */
body[data-tipopag="articolo"] h1,
body[data-tipopag="articolo"] h2,
body[data-tipopag="articolo"] h3,
body[data-tipopag="articolo"] h4,
body[data-tipopag="articolo"] h5,
body[data-tipopag="articolo"] h6{
  font-weight: 700 !important;
}

/* 2) Tutti i paragrafi: text-align LEFT (non più justify) */
body[data-tipopag="articolo"] p,
body[data-tipopag="articolo"] #article > section[id^="pezzo"] p,
body[data-tipopag="articolo"] #hotel-bleis p{
  text-align: left !important;
}

/* 3) ULTIMA SEZIONE #hotel-bleis — più larga e più leggibile */
body[data-tipopag="articolo"] #hotel-bleis .colonnaarea{
  max-width: 1320px !important;
  padding: 0 clamp(40px, 6vw, 90px) !important;
}
body[data-tipopag="articolo"] #hotel-bleis .colonnaarea > .row{
  padding: clamp(70px, 10vh, 120px) 0 !important;
}
body[data-tipopag="articolo"] #hotel-bleis h3{
  max-width: 32ch !important;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
  margin-bottom: 40px !important;
}
body[data-tipopag="articolo"] #hotel-bleis p{
  font-size: clamp(1.05rem, 1.35vw, 1.22rem) !important;
  line-height: 1.85 !important;
  max-width: 78ch !important;
  color: rgba(255,255,255,0.92) !important;
  margin: 0 0 1.6em !important;
}
body[data-tipopag="articolo"] #hotel-bleis p strong{
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* Overlay un po' più scuro per migliorare il contrasto del testo */
body[data-tipopag="articolo"] #hotel-bleis .cbck_283::before{
  background:
    radial-gradient(ellipse at 30% 55%,
      rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.75) 90%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.40) 25%,
      rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.80) 85%,
      rgba(0,0,0,0.95) 100%);
}


/* 4) BOTTONE "Prenota ora!" — replica esatta dello stato in body[data-tipopag="interna"] */
#header#header .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  position: relative !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: #4d8594 !important;
  background-image: none !important;
  font-family: var(--bleis-font) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  padding: 0 38px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  z-index: 1;
  transition:
    color 0.45s var(--bleis-ease),
    letter-spacing 0.5s var(--bleis-ease),
    border-color 0.4s var(--bleis-ease) !important;
}
#header#header .btn-apriFR::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: -1 !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 0.55s var(--bleis-ease) !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  background-color: transparent;
}
#header#header .btn-apriFR::after{
  content: "" !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}
#header#header.pos_absolute .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header.pos_absolute button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #ffffff !important;
}
#header#header.pos_absolute .btn-apriFR::before{
  background: #ffffff !important;
  background-color: #ffffff !important;
}
#header#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR,
#header#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR{
  border: 1px solid rgba(0,0,0,0.55) !important;
  color: #ffffff !important;
}
#header#header.pos_fixed .btn-apriFR::before{
  background: #000000 !important;
  background-color: #000000 !important;
}
#header#header .btn-apriFR:hover{
  letter-spacing: 0.34em !important;
  background: transparent !important;
}
#header#header .btn-apriFR:hover::before{
  display: block !important;
  opacity: 1 !important;
  transform: scaleY(1) !important;
}
#header#header .btn-apriFR:hover::after{
  display: none !important;
  opacity: 0 !important;
}
#header#header.pos_absolute .button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover,
#header#header.pos_absolute button.button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover{
  color: #000000 !important;
  border-color: #ffffff !important;
}
#header#header.pos_fixed .button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover,
#header#header.pos_fixed button.button.button--standard.button--size-l.button--text-thin.btn-apriFR:hover{
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* Replicare anche header colors per articolo (default bianco/trasparente, scroll bianco/nero) */
#header#header.pos_absolute{
  background-color: transparent !important;
  border-bottom: 1px solid var(--bleis-line);
  box-shadow: none !important;
}
#header#header.pos_absolute,
#header#header.pos_absolute *{
  color: #ffffff;
}
#header#header.pos_fixed{
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 20px -12px rgba(0,0,0,0.25) !important;
  transition: background-color 0.4s var(--bleis-ease);
}
#header#header.pos_fixed,
#header#header.pos_fixed *{
  /* color: #000000; */
}
#header#header.pos_absolute .nav-link{ color: #ffffff !important; }
#header#header.pos_fixed    .nav-link{ color: #000000 !important; }
#header#header.pos_absolute .multilingue,
#header#header.pos_absolute .multilingue *{ color: #ffffff !important; }
#header#header.pos_fixed    .multilingue,
#header#header.pos_fixed    .multilingue *{ color: #000000 !important; }

/* Logo header articolo — stesso comportamento di interna (filter brightness/invert) */
#header#header .ch2 .logosito svg,
#header#header .ch2 a.logosito svg{
  transition: filter 0.5s var(--bleis-ease);
}
#header#header.pos_absolute .ch2 .logosito svg{
  filter: brightness(0) invert(1);
}
#header#header.pos_fixed .ch2 .logosito svg{
  filter: none;
}
/* Icona hamburger menu */
#header#header #bottone_menu_header .buttonmenu img{
  transition: filter 0.5s var(--bleis-ease);
}
#header#header.pos_absolute #bottone_menu_header .buttonmenu img{
  filter: brightness(0) invert(1);
}
#header#header.pos_fixed #bottone_menu_header .buttonmenu img{
  filter: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TOC LATERALE — Indice dei capitoli dell'articolo (fixed a sinistra)
   ─────────────────────────────────────────────────────────────────────────
   Iniettata via JS in footer.php quando data-tipopag="articolo".
   Visibile da ≥1100px (su mobile/tablet nascosta).
   Stile editoriale: numeri 01..N, label uppercase Montserrat, hairline
   verticale a sinistra che marca l'attivo (active = lettera bianca piena
   + linea a sx più alta + trattino esteso).
   ═══════════════════════════════════════════════════════════════════════════ */

body[data-tipopag="articolo"] .article-toc{
  position: fixed;
  top: 50%;
  left: clamp(20px, 3vw, 50px);
  transform: translateY(-50%);
  z-index: 50;
  max-width: 220px;
  font-family: var(--bleis-font);
  pointer-events: auto;
  /* Animazione di entrata: invisibile finché lo scroll non raggiunge il primo pezzo */
  opacity: 0;
  transition: opacity 0.5s var(--bleis-ease);
}
body[data-tipopag="articolo"] .article-toc.is-visible{
  opacity: 1;
}

/* Label "INDICE" in alto */
body[data-tipopag="articolo"] .article-toc-label{
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
  padding-bottom: 14px;
  position: relative;
}
body[data-tipopag="articolo"] .article-toc-label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}

/* Lista voci */
body[data-tipopag="articolo"] .article-toc ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  /* Hairline verticale sx che corre lungo la lista */
  border-left: 1px solid rgba(255,255,255,0.10);
}
body[data-tipopag="articolo"] .article-toc li{
  margin: 0;
  padding: 0;
  position: relative;
}
body[data-tipopag="articolo"] .article-toc li a{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0 10px 18px;
  text-decoration: none !important;
  color: rgba(255,255,255,0.50) !important;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--bleis-ease), padding-left 0.4s var(--bleis-ease);
  position: relative;
}
/* Numero capitolo (01, 02, ecc.) */
body[data-tipopag="articolo"] .article-toc li a .toc-num{
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.35);
  flex: 0 0 auto;
  transition: color 0.3s var(--bleis-ease);
}
/* Testo del titolo */
body[data-tipopag="articolo"] .article-toc li a .toc-text{
  flex: 1 1 auto;
  /* Tronca a 2 righe per non esplodere */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Indicatore "ATTIVO" — barra bianca a sinistra + testo bianco pieno */
body[data-tipopag="articolo"] .article-toc li.is-active a{
  color: #ffffff !important;
  padding-left: 26px;
}
body[data-tipopag="articolo"] .article-toc li.is-active a .toc-num{
  color: #ffffff;
}
body[data-tipopag="articolo"] .article-toc li.is-active::before{
  content: "";
  position: absolute;
  left: -1px;        /* sovrappone alla hairline del ul */
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #ffffff;
}

/* Hover */
body[data-tipopag="articolo"] .article-toc li a:hover{
  color: rgba(255,255,255,0.85) !important;
  padding-left: 22px;
}
body[data-tipopag="articolo"] .article-toc li a:hover .toc-num{
  color: rgba(255,255,255,0.7);
}

/* Nascondi sotto i 1100px (la pagina è già stretta) */
@media (max-width: 1099px){
  body[data-tipopag="articolo"] .article-toc{
    display: none !important;
  }
}


/* Calendario ancorato SOTTO il campo, come persone/promocode */
#frHeader div.fastreservation .checkin  .datepicker.datepicker-dropdown.active,
#frHeader div.fastreservation .checkout .datepicker.datepicker-dropdown.active,
.checkin  .datepicker.datepicker-dropdown.active,
.checkout .datepicker.datepicker-dropdown.active {
  position: absolute !important;
  top: calc(100% + 8px) !important;   /* subito sotto la cella */
  bottom: auto !important;
  margin: 0 !important;
  z-index: 16 !important;             /* sopra l'overlay che è a 15 */
  /* il left NON lo tocco: resta quello del plugin, che ti va bene */
}

/* ========================
   DATEPICKER
   ======================== */

.datepicker-picker {
  border-radius: 20px;
  background: #ffffff;
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.05);
}

/* Header — colonna: prima i controlli, poi il giorno */
.datepicker-header {
  display: flex;
  flex-direction: column;
}

.datepicker-header .datepicker-controls {
  order: 1;
  padding: 0;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

/* Titolo: mostrato, ma solo il giorno della settimana */
.datepicker-title {
  order: 2;
  display: block !important;
  background: none !important;
  box-shadow: none !important;
  padding: 2px 0 10px !important;  
  text-align: left;
}

.datepicker-title .s_c_picker {
  background: none !important;
  color: #000000 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: capitalize;
  letter-spacing: 0.03em;
  text-align: left;
}

/* Nasconde data estesa (giorno/mese/anno) */
.datepicker-title .d_c_picker {
  display: none !important;
}

/* Bottone mese/anno */
.datepicker-controls .view-switch {
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em;
  flex: 1;
  text-align: left;
  padding: 0;
  height: auto;
  order: -1; /* ← va prima di tutto */
  display: flex;
  justify-content: flex-start;
}

/* Frecce — cerchio grigio morbido */
.datepicker-controls .prev-button,
.datepicker-controls .next-button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  border-radius: 50% !important;
  border: none !important;
  background: #4d8594 !important;
  box-shadow: none !important;
  flex: 0 0 30px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s, transform 0.1s;
  /* Nasconde il carattere < > */
  font-size: 0 !important;
  color: #ffffff !important;
  position: relative;
}

.datepicker-controls .prev-button:hover,
.datepicker-controls .next-button:hover {
  background: #e0c873 !important;
}

.datepicker-controls .prev-button:active,
.datepicker-controls .next-button:active {
  transform: scale(0.93);
}

/* Chevron CSS al posto di < > */
.datepicker-controls .prev-button::after,
.datepicker-controls .next-button::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.75px solid #ffffff;
  border-top: 1.75px solid #ffffff;
}

.datepicker-controls .prev-button::after {
  transform: rotate(-135deg) translateX(-1px);
}

.datepicker-controls .next-button::after {
  transform: rotate(45deg) translateX(-1px);
}

/* Giorni della settimana */
.datepicker .days-of-week {
  margin-bottom: 6px;
}

.datepicker .dow {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #000000 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: 1.75rem;
}

/* Celle giorno */
.datepicker-cell.day {
  height: 2.25rem;
  font-size: 15px;
  color: #1a1a1a;
  font-weight: 400;
  transition: background 0.12s, color 0.12s, transform 0.1s;
}

/* Hover */
.datepicker-cell:not(.disabled):not(.today):not(.selected):hover {
  background: #f2f2f2 !important;
  border-radius: 50% !important;
  /* transform: scale(1.08); */
  color: #000 !important;
}

/* Giorni mesi prev/next */
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
  color: #1a1a1a !important;
  opacity: 0.18;
}

/* Disabilitati */
.datepicker-cell.disabled {
  color: #ccc !important;
  opacity: 0.3;
}

/* Oggi */
.datepicker-grid .datepicker-cell.today:not(.selected) {
  background-color: #1a1a1a !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 50% !important;
}

/* Selezionato */
.datepicker-grid .datepicker-cell.selected,
.datepicker-grid .datepicker-cell.selected:hover {
  background-color: #4d8594 !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 50% !important;
}

/* Focused */
.datepicker-cell.focused:not(.selected) {
  background-color: #f2f2f2 !important;
  border-radius: 50% !important;
  color: #000 !important;
}

/* Footer nascosto */
.datepicker-footer {
  display: none !important;
}

button.button.view-switch {
    display: flex;
    justify-content: flex-start;
    padding: 0;
}

.datepicker-picker {
  /* transform: scale(1.15); */
  transform-origin: top left;
}

/* ========================
   AREA PERSONE / CAMERE
   ======================== */

div.fastreservation .area_input_persone {
  background: #000000 !important;
  padding: 1.25rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.05);
}

div.fastreservation .area_input_persone .cont_input_persone {
  gap: 1rem;
  margin-bottom: 1rem;
}

div.fastreservation .area_input_persone .component_fr label.elemfr {
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

div.fastreservation .area_input_persone select.elemfr {
  width: 100%;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 4px 0;
  background: transparent;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

div.fastreservation .area_input_persone select.elemfr:focus {
  border-bottom-color: #4d8594;
}

div.fastreservation .area_input_persone .button.btn.chiudi {
  width: 100%;
  height: 42px !important;
  background: #4d8594 !important;
  color: #fff !important;
  /* border-radius: 10px !important; */
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s;
  border: none !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

div.fastreservation .area_input_persone .button.btn.chiudi:hover {
  background: #4d8594 !important;
}

div.fastreservation .area_input_persone.elementovisible{
    position: absolute !important;
  z-index: 16 !important;
}

#frHeader div.fastreservation .contenitore-fr {
  z-index: 16;
}

.datepicker-header .datepicker-controls {
    background: transparent !important;
    padding-left: 0 !important;
}

.datepicker-dropdown .datepicker-picker {
    border-radius: 10px;
}

/* Allarga la view direttamente */
.datepicker-view {
  width: 100% !important;
}

.datepicker-picker {
  width: 320px;
}

/* ========================
   AREA LISTINO / PROMOCODE
   ======================== */

div.fastreservation .area_input_listino {
  display: none !important;
  /* background: #ffffff !important; */
  /* border-radius: 20px !important; */
  padding: 1.25rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 0 0 0.5px rgba(0,0,0,0.05);
  position: absolute !important;
  z-index: 16 !important;
}

div.fastreservation .area_input_listino.elementovisible {
  display: block !important;
}

div.fastreservation .area_input_listino .elemfr {
  font-size: 12px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

div.fastreservation .area_input_listino .listinoinput {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 4px 0;
  background: transparent;
  outline: none;
  margin-bottom: 1rem;
}

div.fastreservation .area_input_listino .listinoinput:focus {
  border-bottom-color: #4d8594;
}

div.fastreservation .area_input_listino .button.btn.chiudi {
  width: 100%;
  height: 42px !important;
  background: #4d8594 !important;
  color: #fff !important;
  /* border-radius: 10px !important; */
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.15s;
  border: none !important;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

div.fastreservation .area_input_listino .button.btn.chiudi:hover {
  background: #5f6e4f !important;
}

div.fastreservation.stile-custom .listino_fr.component_fr {
  margin-left: 0;
  margin-right: 0;
}



/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER UNIFICATO — identico su pagine "interna" (blog) e "articolo"
   Incollare in FONDO al CSS. Sovrascrive il footer parziale dell'articolo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container */
footer#footer{
  background: #000000 !important;
  background-image: none !important;
  padding: 0 !important;
  position: relative;
  color: #ffffff;
  font-family: var(--bleis-font);
  overflow: hidden;
}

/* Linea orizzontale animata in cima */
footer#footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: clamp(50px, 7vw, 110px);
  right: clamp(50px, 7vw, 110px);
  height: 1px;
  background: rgba(255,255,255,0.22);
  transform: scaleX(0);
  transform-origin: center;
  animation: bleis-footer-line-h linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
@supports not (animation-timeline: view()){
  footer#footer::before{
    transform: scaleX(1);
    animation: none;
  }
}

/* Sezione 1: griglia 5 colonne */
footer#footer #sezfooter1{
  background: transparent !important;
  background-color: transparent !important;
  display: grid !important;
  grid-template-columns: 10% 1fr 1fr 1fr 10%;
  gap: 0 40px;
  row-gap: clamp(50px, 6vw, 90px);
  align-items: start;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(80px, 8vw, 130px) 0 clamp(60px, 6vw, 90px) !important;
  position: relative;
}

/* LOGO full-width */
footer#footer .colfooter-logo,
footer#footer .colfooter:first-child{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 0 clamp(20px, 5vw, 80px) !important;
  position: relative;
  margin-bottom: 0;
}
footer#footer .colfooter-logo .logosito,
footer#footer .colfooter:first-child .logosito{
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  transition: opacity 0.4s var(--bleis-ease);
}
footer#footer .colfooter-logo .logosito svg,
footer#footer .colfooter:first-child .logosito svg{
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  transition: filter 0.4s var(--bleis-ease);
}
footer#footer .colfooter-logo .logosito img,
footer#footer .colfooter:first-child .logosito img{
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1);
  display: block;
}
footer#footer .colfooter-logo .logosito:hover svg,
footer#footer .colfooter:first-child .logosito:hover svg,
footer#footer .colfooter-logo .logosito:hover img,
footer#footer .colfooter:first-child .logosito:hover img{
  filter: brightness(0) invert(1) opacity(0.85);
}

/* Colonne info */
footer#footer .colfooter:not(.colfooter-logo):not(:first-child){
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start;
  text-align: center;
  gap: 14px;
  grid-row: 2;
  width: 100%;
}
footer#footer .colfooter:nth-child(2):not(.colfooter-logo){ grid-column: 2; }
footer#footer .colfooter:nth-child(3):not(.colfooter-logo){ grid-column: 3; }
footer#footer .colfooter:nth-child(4):not(.colfooter-logo){ grid-column: 4; }

footer#footer .colfooter:not(.colfooter-logo):not(:first-child):not(:last-child)::after{
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -20px;
  width: 1px;
  background: rgba(255,255,255,0.10);
}

/* Label colonne */
footer#footer .colfooter .label{
  display: block;
  font-family: var(--bleis-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 auto 8px;
  padding-bottom: 18px;
  position: relative;
  text-align: center;
}
footer#footer .colfooter .label p{
  display: inline;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
footer#footer .colfooter .label::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  transform: translateX(-50%);
  transition: width 0.5s var(--bleis-ease);
}
footer#footer .colfooter:hover .label::after{
  width: 60px;
  background: #ffffff;
}

/* Righe info */
footer#footer .colfooter .elem{
  font-family: var(--bleis-font);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}

/* Link telefono/email */
footer#footer .colfooter .elem a{
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color 0.3s var(--bleis-ease);
}
footer#footer .colfooter .elem a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--bleis-ease);
}
footer#footer .colfooter .elem a:hover::after{
  width: 100%;
}
footer#footer .colfooter .elem a:hover{
  color: rgba(255,255,255,0.7) !important;
}

/* Prefix nascosto */
footer#footer span.prefix{
  display: none !important;
}

/* Social */
footer#footer .colfooter .elemsocial{
  display: inline-block;
  margin: 0 8px 0 0;
}
footer#footer .colfooter .elemsocial a.linksocial{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  color: #ffffff !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition:
    border-color 0.4s var(--bleis-ease),
    background 0.4s var(--bleis-ease),
    transform 0.4s var(--bleis-ease);
}
footer#footer .colfooter .elemsocial a.linksocial:hover{
  border-color: #ffffff;
  background: rgba(255,255,255,0.06);
  transform: translateY(-3px);
}
footer#footer .colfooter .elemsocial a.linksocial i{
  color: inherit;
  font-size: 0.95rem;
}

/* Sezione 3 legale */
footer#footer #sezfooter3{
  background: linear-gradient(180deg,#000000 0%,#0d0d0d 30%,#181818 65%,#232323 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(28px, 3.2vw, 44px) clamp(50px, 7vw, 110px) clamp(40px, 4.5vw, 60px) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  position: relative;
}
footer#footer #sezfooter3 span.label{
  font-family: var(--bleis-font);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
footer#footer #sezfooter3 span.label a{
  color: #ffffff !important;
  text-decoration: none !important;
  transition: opacity 0.3s var(--bleis-ease);
}
footer#footer #sezfooter3 span.label a:hover{
  opacity: 0.7;
}
footer#footer #sezfooter3 .dat-aziend,
footer#footer #sezfooter3 .dat-circin{
  display: none;
}
footer#footer #sezfooter3 .elem.selezunder{
  font-family: var(--bleis-font);
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}
footer#footer #sezfooter3 .elem.selezunder a{
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  position: relative;
  padding-bottom: 1px;
  transition: color 0.3s var(--bleis-ease);
}
footer#footer #sezfooter3 .elem.selezunder a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #ffffff;
  transition: width 0.4s var(--bleis-ease);
}
footer#footer #sezfooter3 .elem.selezunder a:hover{
  color: #ffffff !important;
}
footer#footer #sezfooter3 .elem.selezunder a:hover::after{
  width: 100%;
}
footer#footer #sezfooter3 .elem.easyc{
  font-family: var(--bleis-font);
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.1em;
}
footer#footer #sezfooter3 .elem.easyc a{
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  transition: color 0.3s var(--bleis-ease);
}
footer#footer #sezfooter3 .elem.easyc a:hover{
  color: #ffffff !important;
}

#footer #sezfooter3 .datiaziendali .dat-circin .elem {display: none;}

#footer .dat-aziend span.elem {
    margin-left: 10px;
    margin-right: 10px;
}

#footer .dat-aziend span.elem .prefix {
    display: inline-block !important;
    margin-right: 5px;
}

#cta-articolo h3 {
    color: #fff;
    text-align: center;
    text-transform: initial;
    line-height: 1.5;
    margin-bottom: 30px;
}

section#cta-articolo {
    background: #767a7a;
}

#cta-articolo h3 strong {
    font-weight: 300;
}