body {
    color: var(--color7);
    background-color: var(--col-bianco);
    font-family: var(--font-principale);
}

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

#header.pos_fixed {
    background-color: var(--nero);
    -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: 80px;
}

.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 / 30%);
    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;
    display: none;
}

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: 300;
}

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

.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: 80px;
}

.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;
    left: 80px;
    top: 0;
    z-index: 10;
    height: 80px;
    display: flex;
}

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

header .logosito img {
    max-height: 65px;
    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;
}

h3.titolo_camera {
    display: none !important;
}

#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: 80px;
}

#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: 65px;
    width: auto;
}

.ch1 {
    width: 80px;
}

.ch2 {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}
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; */
    top: initial !important;
    /* left: inherit !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;
}

.checkin .datepicker.datepicker-dropdown.active {
    top: calc(50vh - 150px) !important;
}

.checkout .datepicker.datepicker-dropdown.active {
    top: calc(50vh - 50px) !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%; */
    /* padding-left: 10px; */
}

#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;
}


/* ============================================================
   VOX — PAGE LOADER cinematografico
   SOSTITUISCE il blocco "/* ===== PAGE LOADER (senza HTML) ===== "
   esistente in template.css (da #page-loader fino a .loader-logo
   e relativo @keyframes loader-spin, che non serve più).
   Struttura iniettata da vox-loader.js.
   ============================================================ */

#page-loader{
  position:fixed !important;inset:0 !important;z-index:99999999 !important;
  overflow:hidden !important;background:#0A0D11 !important;
}

/* due bande otturatore (coprono lo schermo, overlap anti-fessura) */
#page-loader .vl-band{position:absolute !important;left:0 !important;right:0 !important;height:50.6% !important;background:#0A0D11 !important;z-index:1 !important}
#page-loader .vl-band.top{top:0 !important;transform:translateY(0)}
#page-loader .vl-band.bottom{bottom:0 !important;transform:translateY(0)}
#page-loader .vl-band.top::after,
#page-loader .vl-band.bottom::after{
  content:"" !important;position:absolute !important;left:0 !important;right:0 !important;height:1px !important;
  background:linear-gradient(90deg,transparent,#F5C518 20%,#F5C518 80%,transparent) !important;
  opacity:0 !important;transition:opacity .3s ease !important;
}
#page-loader .vl-band.top::after{bottom:0 !important}
#page-loader .vl-band.bottom::after{top:0 !important}

/* grana sottile */
#page-loader::before{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:2 !important;pointer-events:none !important;opacity:.045 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}

/* corner brackets mirino */
#page-loader .vl-corner{position:absolute !important;width:26px !important;height:26px !important;z-index:4 !important;border-color:rgba(244,241,234,.4) !important;transition:opacity .25s ease !important}
#page-loader .vl-corner.tl{top:26px !important;left:26px !important;border-top:1.5px solid !important;border-left:1.5px solid !important}
#page-loader .vl-corner.tr{top:26px !important;right:26px !important;border-top:1.5px solid !important;border-right:1.5px solid !important}
#page-loader .vl-corner.bl{bottom:26px !important;left:26px !important;border-bottom:1.5px solid !important;border-left:1.5px solid !important}
#page-loader .vl-corner.br{bottom:26px !important;right:26px !important;border-bottom:1.5px solid !important;border-right:1.5px solid !important}

/* HUD REC in alto a sinistra */
#page-loader .vl-hud{
  position:absolute !important;top:30px !important;left:64px !important;z-index:4 !important;
  display:flex !important;align-items:center !important;gap:8px !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important;font-size:11px !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:rgba(244,241,234,.7) !important;
  transition:opacity .25s ease !important;
}
#page-loader .vl-hud .rec-dot{
  width:9px !important;height:9px !important;border-radius:50% !important;background:#FF3B30 !important;
  box-shadow:0 0 8px rgba(255,59,48,.6) !important;animation:vlBlink 1.1s steps(1) infinite !important;
}
@keyframes vlBlink{50%{opacity:.15}}

/* contenuto centrale */
#page-loader .vl-content{
  position:absolute !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;
  z-index:5 !important;display:flex !important;flex-direction:column !important;align-items:center !important;
  width:min(82vw,360px) !important;transition:opacity .35s ease,transform .35s ease !important;
}

/* logo — su fondo scuro va invertito (PNG scuro). Se il logo è già chiaro, togli il filter. */
#page-loader .loader-logo{
  height:100px !important;width:auto !important;max-width:80% !important;display:block !important;
  margin-bottom:34px !important;
}

/* riga meta: timecode a sx, percentuale a dx */
#page-loader .vl-meta{
  width:100% !important;display:flex !important;align-items:center !important;justify-content:space-between !important;
  font-family:'Space Mono',monospace !important;font-size:11px !important;letter-spacing:.12em !important;
  color:#9AA3B0 !important;margin-bottom:11px !important;
}
#page-loader .vl-tc{color:rgba(244,241,234,.55) !important}
#page-loader .vl-pct{color:#F5C518 !important;font-weight:700 !important}

/* barra di caricamento */
#page-loader .vl-bar{
  width:100% !important;height:2px !important;background:rgba(244,241,234,.14) !important;
  border-radius:2px !important;overflow:hidden !important;
}
#page-loader .vl-bar > i{
  display:block !important;height:100% !important;width:0% !important;background:#F5C518 !important;border-radius:2px !important;
  box-shadow:0 0 10px rgba(245,197,24,.5) !important;
}

/* flash otturatore */
#page-loader .vl-flash{position:absolute !important;inset:0 !important;z-index:6 !important;background:#F4F1EA !important;opacity:0 !important;pointer-events:none !important}

/* ---- USCITA: scatto + apertura otturatore ---- */
#page-loader.is-revealing .vl-content{opacity:0 !important;transform:translate(-50%,-50%) scale(.97) !important}
#page-loader.is-revealing .vl-hud,
#page-loader.is-revealing .vl-corner{opacity:0 !important}
#page-loader.is-revealing .vl-band.top::after,
#page-loader.is-revealing .vl-band.bottom::after{opacity:.8 !important}
#page-loader.is-revealing .vl-band.top{transform:translateY(-100%) !important;transition:transform .55s cubic-bezier(.83,0,.17,1) .12s !important}
#page-loader.is-revealing .vl-band.bottom{transform:translateY(100%) !important;transition:transform .55s cubic-bezier(.83,0,.17,1) .12s !important}
#page-loader.is-revealing .vl-flash{animation:vlFlash .32s ease-out forwards !important}
@keyframes vlFlash{0%{opacity:.16}100%{opacity:0}}

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

@media(min-width:768px){
  #page-loader .vl-hud{top:34px !important;left:80px !important}
}
@media(prefers-reduced-motion:reduce){
  #page-loader *,#page-loader{animation:none !important;transition:opacity .2s ease !important}
}



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

#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;
}

.accessibility-policy h1 {
    margin-top: 30px;
    margin-bottom: 30px;
    color: var(--color2);
    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);
}

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

.ch4 .pers1 span.prefix {
    display: block;
}

.ch4 .pers1 {
    display: block;
    position: fixed;
    right: 0;
}

.ch4 p {
    color: #fff;
}



/* -------------------------------

VOX

--------------------------------*/


/* ============================================================
   VOX — Cursore custom
   ============================================================ */

/* nascondi cursore nativo ovunque */
*, *::before, *::after {
    cursor: none !important;
}

/* cerchio esterno */
.vox-cursor {
    position: fixed;
    width: 36px;
    height: 36px;
    border: 1.5px solid #F4F1EA;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease,
                background 0.25s ease, border-color 0.25s ease,
                mix-blend-mode 0.25s ease;
    mix-blend-mode: normal;
    will-change: transform;
}

/* pallino centrale */
.vox-cursor-dot {
    position: fixed;
    width: 5px;
    height: 5px;
    background: #F4F1EA;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: width 0.15s ease, height 0.15s ease, background 0.15s ease;
}

/* stato hover su testi — invert */
.vox-cursor.is-text {
    width: 56px;
    height: 56px;
    background: #F4F1EA;
    border-color: #F4F1EA;
    mix-blend-mode: difference;
}

.vox-cursor-dot.is-text {
    background: #F4F1EA;
    mix-blend-mode: difference;
}

/* stato hover su link/bottoni — cerchio più piccolo giallo */
.vox-cursor.is-link {
    width: 24px;
    height: 24px;
    background: #F5C518;
    border-color: #F5C518;
}

.vox-cursor-dot.is-link {
    background: #F5C518;
}

/* mobile: ripristina cursore nativo */
@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after { cursor: auto !important; }
    .vox-cursor, .vox-cursor-dot { display: none !important; }
}


/* ============================================================
   VOX — HEADER
   Incollare in fondo a template.css
   ============================================================ */

/* ============================================================
   HAMBURGER — tre barrette CSS pure → X
   Il button non ha .icon-bar dentro, usiamo solo ::before e ::after
   + un elemento centrale creato con box-shadow
   ============================================================ */

/* nascondi immagine webp originale */
#bottone_menu_header .buttonmenu img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* nascondi label "Menu" */
#bottone_menu_header .label { display: none; }

/* contenitore button */
#bottone_menu_header .buttonmenu {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
}

/* riga superiore */
#bottone_menu_header .buttonmenu::before {
    content: "";
    position: absolute;
    left: 9px;
    width: 24px;
    height: 2px;
    background: #F4F1EA;
    border-radius: 2px;
    top: 12px;
    transform-origin: center;
    transition: top 0.3s cubic-bezier(.16,1,.3,1) 0.1s,
                transform 0.35s cubic-bezier(.16,1,.3,1);
}

/* riga inferiore */
#bottone_menu_header .buttonmenu::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 24px;
    height: 2px;
    background: #F4F1EA;
    border-radius: 2px;
    bottom: 12px;
    transform-origin: center;
    transition: bottom 0.3s cubic-bezier(.16,1,.3,1) 0.1s,
                transform 0.35s cubic-bezier(.16,1,.3,1);
}

/* riga centrale via box-shadow su ::before */
#bottone_menu_header .buttonmenu .icon-bar,
#bottone_menu_header .buttonmenu::before {
    box-shadow: 0 8px 0 0 #F4F1EA; /* simula la riga centrale */
}

/* aspetta — il button non ha .icon-bar, usiamo solo gli pseudo.
   La riga centrale la creiamo con un elemento dedicato via JS */

/* --- STATO APERTO (.is-x aggiunta dal nostro JS) --- */
#bottone_menu_header .buttonmenu.is-x::before {
    top: 20px; /* porta al centro */
    transform: rotate(45deg);
    transition: top 0.3s cubic-bezier(.16,1,.3,1),
                transform 0.35s cubic-bezier(.16,1,.3,1) 0.15s;
    box-shadow: none;
}

#bottone_menu_header .buttonmenu.is-x::after {
    bottom: 20px; /* porta al centro */
    transform: rotate(-45deg);
    transition: bottom 0.3s cubic-bezier(.16,1,.3,1),
                transform 0.35s cubic-bezier(.16,1,.3,1) 0.15s;
}

/* riga centrale (nascosta in stato aperto) */
#bottone_menu_header .buttonmenu .vox-bar {
    position: absolute;
    left: 9px;
    width: 24px;
    height: 2px;
    background: #F4F1EA;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#bottone_menu_header .buttonmenu.is-x .vox-bar {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
}


/* ============================================================
   MENU OVERLAY
   ============================================================ */

/* il CMS usa .down che posiziona il menu in basso — azzeriamo */
#menu_header.menumobile {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 150 !important;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

#menu_header.menumobile.menu-aperto {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* area contenuto */
#menu_header .areamenu {
    position: absolute !important;
    inset: 0 !important;
    background: #0A0D11 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 clamp(20px, 6vw, 80px) !important;
    padding-bottom: clamp(44px, 8vh, 80px) !important;
    padding-top: 80px !important;
    overflow-y: auto;
    z-index: 1;
}

/* sfondo immagine: nascondilo (lo rimuovi tu dal CMS) */
#menu_header .areabck {
    display: none !important;
}

/* pulsante chiudi */
#chiudi_menumobile {
    position: absolute !important;
    top: 20px !important;
    right: clamp(20px, 5vw, 80px) !important;
    background: transparent !important;
    border: none !important;
    color: #F4F1EA !important;
    font-size: 1.8rem !important;
    cursor: pointer;
    z-index: 10;
    transition: color 0.2s ease;
}
#chiudi_menumobile:hover { color: #F5C518 !important; }


/* ============================================================
   VOCI DI MENU
   ============================================================ */

#menu_header .navbar-nav-menu.liv1 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#menu_header .navbar-nav-menu.liv1 > li {
    border-bottom: 1px solid rgba(244, 241, 234, 0.1);
    width: 100% !important;
}

#menu_header .navbar-nav-menu.liv1 > li > a {
    font-family: 'Montserrat', var(--font-family-1), sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 7vw, 3rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    color: #F4F1EA !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 14px !important;
    padding: 10px 0 !important;
    transition: color 0.3s ease, padding-left 0.35s cubic-bezier(.16,1,.3,1) !important;
    position: relative;
    transition: .5s !important;
    text-transform: initial !important;
}

/* numeri di scena */
#menu_header .navbar-nav-menu.liv1 > li:nth-child(1) > a::before { content: "01"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(2) > a::before { content: "02"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(3) > a::before { content: "03"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(4) > a::before { content: "04"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(5) > a::before { content: "05"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(6) > a::before { content: "06"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(7) > a::before { content: "07"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(8) > a::before { content: "08"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(9) > a::before { content: "09"; }
#menu_header .navbar-nav-menu.liv1 > li:nth-child(10) > a::before { content: "10"; }

#menu_header .navbar-nav-menu.liv1 > li > a::before {
    font-family: 'Space Mono', var(--font-family-6), monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #F5C518 !important;
    letter-spacing: 0.1em !important;
    flex: none !important;
}

/* hover */
#menu_header .navbar-nav-menu.liv1 > li > a:hover {
    color: #F5C518 !important;
    margin-left: 10px !important;
    transition: .5s !important;
}

/* voce prenotazioni in evidenza */
#menu_header .navbar-nav-menu.liv1 > li.prenotazioni > a {
    color: #F5C518 !important;
}

/* ============================================================
   VOX — MENU SHUTTER
   Effetto otturatore fotografico in apertura/chiusura menu
   Incollare in fondo a template.css
   ============================================================ */

/* --- le due bande dell'otturatore --- */
.vox-shutter {
    position: fixed;
    inset: 0;
    z-index: 145; /* sotto il menu (150) ma sopra tutto il resto */
    pointer-events: none;
    overflow: hidden;
}

.vox-shutter__top,
.vox-shutter__bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 50.5%; /* mezzo px di overlap anti-fessura */
    background: #0A0D11;
}

.vox-shutter__top {
    top: 0;
    transform: translateY(-101%);
}

.vox-shutter__bottom {
    bottom: 0;
    transform: translateY(101%);
}

/* bordo oro sul fronte d'onda */
.vox-shutter__top::after,
.vox-shutter__bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #F5C518 20%, #F5C518 80%, transparent);
    opacity: 0.7;
}
.vox-shutter__top::after    { bottom: 0; }
.vox-shutter__bottom::after { top: 0; }

/* --- APERTURA: bande entrano (chiudono lo schermo) --- */
.vox-shutter.is-opening .vox-shutter__top {
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(.83, 0, .17, 1);
}
.vox-shutter.is-opening .vox-shutter__bottom {
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(.83, 0, .17, 1);
}

/* bande restano chiuse mentre il menu appare */
.vox-shutter.is-open .vox-shutter__top,
.vox-shutter.is-open .vox-shutter__bottom {
    transform: translateY(0);
    transition: none;
}

/* --- RIVELAZIONE: bande escono (aprono il menu) --- */
.vox-shutter.is-revealing .vox-shutter__top {
    transform: translateY(-101%);
    transition: transform 0.5s cubic-bezier(.83, 0, .17, 1);
}
.vox-shutter.is-revealing .vox-shutter__bottom {
    transform: translateY(101%);
    transition: transform 0.5s cubic-bezier(.83, 0, .17, 1);
}

/* --- CHIUSURA: bande entrano, menu sparisce, bande escono --- */
.vox-shutter.is-closing .vox-shutter__top {
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(.83, 0, .17, 1);
}
.vox-shutter.is-closing .vox-shutter__bottom {
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(.83, 0, .17, 1);
}

/* --- menu invisibile durante la transizione --- */
#menu_header.vox-transitioning {
    opacity: 0 !important;
    transition: none !important;
}

/* --- flash otturatore al momento della rivelazione --- */
.vox-shutter__flash {
    position: absolute;
    inset: 0;
    background: #F4F1EA;
    opacity: 0;
    pointer-events: none;
}
.vox-shutter.is-flashing .vox-shutter__flash {
    animation: vox-shutter-flash 0.25s ease-out forwards;
}
@keyframes vox-shutter-flash {
    0%   { opacity: 0.12; }
    100% { opacity: 0; }
}

/* --- voci menu: entrano a cascata dopo le bande --- */
#menu_header .navbar-nav-menu.liv1 > li {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.16,1,.3,1);
}
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li {
    opacity: 1;
    transform: none;
}
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(1)  { transition-delay: 0.05s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(2)  { transition-delay: 0.10s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(3)  { transition-delay: 0.15s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(4)  { transition-delay: 0.20s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(5)  { transition-delay: 0.25s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(6)  { transition-delay: 0.30s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(7)  { transition-delay: 0.35s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(8)  { transition-delay: 0.40s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(9)  { transition-delay: 0.45s; }
#menu_header.vox-menu-in .navbar-nav-menu.liv1 > li:nth-child(10) { transition-delay: 0.50s; }

@media (prefers-reduced-motion: reduce) {
    .vox-shutter { display: none; }
    #menu_header .navbar-nav-menu.liv1 > li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}



/* ============================================================
   VOX — HERO (sezione #slideshow)
   Stile "sala buia" · bronzo champagne · Montserrat + Inter
   Incollare in fondo a template.css
   ============================================================ */


/* --- watermark VOX gigante dietro (via CSS, no HTML) --- */
#slideshow .cbck_1::after {
    content: "VOX";
    position: absolute;
    right: -4vw;
    top: 15%;
    z-index: 0;
    font-family: 'Montserrat', var(--font-family-1), sans-serif;
    font-weight: 800;
    font-size: clamp(180px, 34vw, 500px);
    line-height: 0.8;
    color: rgba(244, 241, 234, 0.06);
    pointer-events: none;
    user-select: none;
}

/* --- contenitore testi: allineamento a sinistra, ancorato in basso --- */
#home .row.end.ao_center {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    padding: 0 clamp(20px, 5vw, 80px);
    padding-bottom: clamp(90px, 14vh, 160px);
    text-align: left;
}

/* --- eyebrow: etichetta tecnica (Space Mono) --- */
#slideshow h4 {
    font-family: 'Space Mono', var(--font-family-6), monospace;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #F5C518;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* --- claim principale: UPPERCASE Montserrat ExtraBold --- */
#slideshow h3 {
    font-family: 'Montserrat', var(--font-family-1), sans-serif;
    font-size: clamp(2rem, 8.5vw, 5.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #F4F1EA;
    text-transform: uppercase !important;
    white-space: normal;
    padding-bottom: 0 !important;
    margin-bottom: 0;
    max-width: 14ch;
}

#slideshow h3 strong {
    font-weight: 800;
    color: #F4F1EA;
    text-transform: initial !important;
}

/* --- sottotitolo --- */
#slideshow p {
    font-family: 'Inter', var(--font-family-2), sans-serif;
    font-size: clamp(1rem, 3.2vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    text-align: left !important;
    max-width: 42ch;
    margin-top: 18px;
    margin-bottom: 0;
}

/* --- accento gold (frase forte) --- */
#slideshow p strong {
    font-family: 'Montserrat', var(--font-family-1), sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 3.6vw, 1.35rem);
    color: #F5C518;
    display: block;
    margin-top: 14px;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* --- bottone CTA: bronzo piatto --- */
#slideshow .button.button--standard, .button.button--standard {
    background-color: #F5C518;
    color: #0A0D11;
    border: none;
    border-radius: 6px;
    font-family: 'Inter', var(--font-family-2), sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 32px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    transition: background-color 0.3s ease;
    box-shadow: none;
}

#slideshow .button.button--standard:hover {
    background-color: #FFD633 !important;
    color: #0A0D11 !important;
}

/* --- grana pellicola --- */
/* #slideshow::after {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: vox-grain 7s steps(8) infinite;
    
} */

@keyframes vox-grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4%, 3%); }
    40% { transform: translate(3%, -3%); }
    60% { transform: translate(-2%, 5%); }
    80% { transform: translate(4%, -2%); }
}

/* --- cornice mirino: alto sinistra --- */
#slideshow::before {
    content: "";
    position: absolute;
    top: 80px;
    left: clamp(20px, 5vw, 80px);
    width: 22px;
    height: 22px;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4);
    border-left: 1.5px solid rgba(244, 241, 234, 0.4);
    z-index: 10;
    pointer-events: none;
}

/* --- cornice mirino: alto destra --- */
#slideshow .cbck_1::before {
    content: "";
    position: absolute;
    top: 80px;
    right: clamp(20px, 5vw, 80px);
    width: 22px;
    height: 22px;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4);
    border-right: 1.5px solid rgba(244, 241, 234, 0.4);
    z-index: 10;
    pointer-events: none;
}

/* --- cornice mirino: basso sinistra --- */
#slideshow .area::before {
    content: "";
    position: absolute;
    bottom: 40px;
    left: clamp(20px, 5vw, 80px);
    width: 22px;
    height: 22px;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4);
    border-left: 1.5px solid rgba(244, 241, 234, 0.4);
    z-index: 10;
    pointer-events: none;
}

/* --- cornice mirino: basso destra --- */
#slideshow .area::after {
    content: "";
    position: absolute;
    bottom: 40px;
    right: clamp(20px, 5vw, 80px);
    width: 22px;
    height: 22px;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4);
    border-right: 1.5px solid rgba(244, 241, 234, 0.4);
    z-index: 10;
    pointer-events: none;
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 768px) {
    #slideshow h3 {
        font-size: clamp(3.2rem, 6.5vw, 5.4rem);
    }

    #slideshow p {
        font-size: 1.12rem;
    }

    #home .row.end.ao_center {
        padding-bottom: clamp(100px, 12vh, 180px);
    }
}

/* ============================================================
   RIDUZIONE ANIMAZIONE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #slideshow::after {
        animation: none !important;
    }
}

/* --- REC timecode header --- */
.vox-rec-hud {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Space Mono', var(--font-family-6), monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(244, 241, 234, 0.6);
    white-space: nowrap;
    margin-right: 12px;
}

.vox-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF3B30;
    flex: none;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6);
    animation: vox-rec-blink 1.2s steps(1) infinite;
}

@keyframes vox-rec-blink {
    50% { opacity: 0.15; }
}

/* ============================================================
   VOX — HERO camera (fix posizionamento)
   ============================================================ */

/* il section deve essere il reference per il posizionamento */
#slideshow {
    position: relative !important;
    overflow: hidden !important;
}

/* rimuovi ogni posizionamento dai wrapper intermedi */
#slideshow .col-sm-12.col-md-12.area,
#slideshow .col-sm-12.col-md-12.colonnaarea {
    position: static !important;
    height: 100% !important;
}

/* la row dei testi: occupa tutto lo schermo, testi sopra */
#slideshow .row.end.ao_center {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 clamp(20px, 5vw, 80px) !important;
    padding-bottom: clamp(90px, 14vh, 160px) !important;
}

/* la row dell'immagine: ancorata al section */
#slideshow .row:has(.cont_sing) {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

/* cont_sing: metà destra */
#slideshow .col-sm-12.col-md-12.cont_sing {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 58% !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
}

/* figure e picture: altezza piena */
#slideshow .cont_sing figure,
#slideshow .cont_sing picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* immagine: copre l'area */
#slideshow .cont_sing img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left center !important;
    display: block !important;
}

/* dissolvenza sinistra */
#slideshow .cont_sing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 55%;
    background: linear-gradient(to right, #0A0D11 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* dissolvenza basso */
#slideshow .cont_sing::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to top, #0A0D11 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* mobile */
@media (max-width: 767px) {
    #slideshow .col-sm-12.col-md-12.cont_sing {
        width: 100% !important;
        opacity: 0.3 !important;
    }

    #slideshow .cont_sing::before {
        width: 100%;
        background: linear-gradient(to right, #0A0D11 20%, transparent 100%);
    }
}

/* ============================================================
   VOX — SCENA 01 / SERVIZI (#scena1)
   Incollare in fondo a template.css
   ============================================================ */

/* --- sezione: sfondo ink, padding verticale, bordo top --- */
#scena1 {
    background: #0A0D11 !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

/* nascondi overlay CMS */
#scena1 .cbck_13 {
    display: none !important;
}

/* --- wrapper contenuto --- */
#scena1 .col-sm-12.col-md-12.area,
#scena1 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    width: 100% !important;
}

/* --- prima row: header sezione --- */
#scena1 .col-sm-12.col-md-12.colonnaarea > .row:first-child {
    margin-bottom: clamp(34px, 6vw, 56px) !important;
}

/* --- etichetta "Scena 01 · Cosa facciamo" --- */
#scena1 h4:first-child,
#scena1 .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#scena1 .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#scena1 .row:first-child h4 strong {
    color: #F5C518 !important;
    font-weight: 700 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: inherit !important;
}

/* --- titolo principale H3 --- */
#scena1 .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 6.4vw, 3.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: #F4F1EA !important;
    margin-bottom: 0.6em !important;
    white-space: normal !important;
}

/* --- intro lead --- */
#scena1 .row:first-child p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.06rem, 3vw, 1.35rem) !important;
    line-height: 1.55 !important;
    color: #F4F1EA !important;
    font-weight: 400 !important;
    max-width: 54ch !important;
    text-align: left !important;
}

/* --- griglia servizi --- */
#scena1 .row.servizi {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: rgba(244, 241, 234, 0.12) !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- card singola --- */
#scena1 .row.servizi > .col-sm-12 {
    background: #0F141A !important;
    padding: 30px clamp(20px, 3vw, 40px) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.35s ease !important;
    width: 100% !important;
    float: none !important;
}

#scena1 .row.servizi > .col-sm-12:hover {
    background: #161C24 !important;
}

/* --- linea gold in hover (bottom) --- */
#scena1 .row.servizi > .col-sm-12::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #FFD633, #F5C518) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#scena1 .row.servizi > .col-sm-12:hover::after {
    transform: scaleX(1) !important;
}

/* --- numero + titolo H4 nelle card --- */
#scena1 .row.servizi h4 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: #F5C518 !important;
    margin-bottom: 14px !important;
    display: block !important;
    line-height: 1 !important;
}

#scena1 .row.servizi h4 strong {
    font-family: 'Space Mono', monospace !important;
    color: #F5C518 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 0;
}

/* titolo del servizio (testo dopo il <br>) */
#scena1 .row.servizi h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.2rem, 4vw, 1.55rem) !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    color: #F4F1EA !important;
    margin-bottom: 10px !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#scena1 .row.servizi > .col-sm-12:hover h4 {
    transform: translateX(6px) !important;
}

/* --- paragrafo card --- */
#scena1 .row.servizi p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    margin: 0 !important;
}

#scena1 .row.servizi h4 {
    text-transform: inherit !important;
}

/* --- desktop: 2 colonne poi 3 --- */
@media (min-width: 768px) {
    #scena1 .row.servizi {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    #scena1 .row.servizi {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================================
   VOX — SCENA 02 / AI (#scena2)
   ============================================================ */

#scena2 {
    background:
        radial-gradient(90% 80% at 80% 10%, rgba(245, 197, 24, 0.10), transparent 55%),
        #0F141A !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

/* --- wrapper larghezza piena --- */
#scena2 .col-sm-12.col-md-12.area,
#scena2 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* --- prima row: etichetta + claim + lead --- */
#scena2 .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#scena2 .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#scena2 .row:first-child h4 strong {
    color: #F5C518 !important;
    font-weight: 700 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: inherit !important;
}

/* --- claim principale --- */
#scena2 .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.2rem, 7.5vw, 4.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    color: #F4F1EA !important;
    max-width: 16ch !important;
    margin-bottom: 26px !important;
    white-space: normal !important;
}

/* "È già il presente." in gold */
#scena2 .row:first-child h3 strong {
    color: #F5C518 !important;
    font-weight: 800 !important;
}

/* --- lead paragraph --- */
#scena2 .row:first-child p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.06rem, 3vw, 1.35rem) !important;
    line-height: 1.55 !important;
    color: #F4F1EA !important;
    font-weight: 400 !important;
    text-align: left !important;
    margin: 0 !important;
}

/* --- seconda row: body + kicker --- */
#scena2 .row:nth-child(2) p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    margin-bottom: 0 !important;
}

html.vox-light #scena2 .row:nth-child(2) p {
    color: #1b1b1c !important;
}

/* --- kicker finale --- */
#scena2 .row:nth-child(2) h4 {
    margin-top: 40px !important;
    padding-top: 0 !important;
    border-top: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.5rem, 5vw, 2.4rem) !important;
    color: #F4F1EA !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    max-width: 28ch !important;
    display: block !important;
    position: relative !important;
}

/* barretta gold sopra */
#scena2 .row:nth-child(2) h4::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 2px !important;
    background: #F5C518 !important;
    margin-bottom: 20px !important;
}


/* ============================================================
   VOX — SCENA 02 split testi/video (50/50 desktop)
   ============================================================ */
@media (min-width: 1024px) {
    /* la colonnaarea diventa il contenitore grid */
    #scena2 .col-sm-12.col-md-12.colonnaarea {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 0 clamp(40px, 5vw, 80px) !important;
        align-items: start !important;
    }

    /* prima row (etichetta + claim + lead): colonna sinistra, riga 1 */
    #scena2 .colonnaarea > .row:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* seconda row (body + kicker): colonna sinistra, riga 2 */
    #scena2 .colonnaarea > .row:nth-child(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    /* terza row (video): colonna destra, riga 1 */
    #scena2 .colonnaarea > .row:nth-child(3) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch !important;
        display: flex !important;
        margin: 0 !important;
    }

    /* il video riempie tutta la larghezza della colonna */
    #scena2 .colonnaarea > .row:nth-child(3) > .col-sm-12 {
        width: 100% !important;
        display: flex !important;
        padding: 0 !important;
    }

    /* quarta row (immagine statistiche): colonna destra, riga 2, sotto il video */
    #scena2 .colonnaarea > .row:nth-child(4) {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        align-self: start !important;
    }

    #scena2 .colonnaarea > .row:nth-child(4) > .col-sm-12 {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* ============================================================
   VOX — SCENA 02 immagine statistiche
   ============================================================ */

#scena2 .cont_sing {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 24px !important;
}

#scena2 .cont_sing figure,
#scena2 .cont_sing picture {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

#scena2 .cont_sing img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (min-width: 768px) {
    #scena2 .cont_sing {
        margin-top: 20px !important;
    }
}

/* il video: full width, angoli arrotondati come le card */
#scena2 .elemento_sing.el-video {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 40px !important;
}

@media (min-width: 1024px) {
    #scena2 .elemento_sing.el-video {
        margin-top: 0 !important;
        height: 100% !important;
    }
}

#scena2 .embed-responsive-16by9 {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding-top: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
}

@media (min-width: 1024px) {
    #scena2 .embed-responsive-16by9 {
        aspect-ratio: auto !important;
        min-height: 100% !important;
    }
}

#scena2 .embed-responsive-16by9 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* tema light: bordo video coerente */
html.vox-light #scena2 .embed-responsive-16by9 {
    border-color: rgba(10, 13, 17, 0.12) !important;
}
/* ============================================================
   VOX — SCENA 03 / PORTFOLIO (#scena3)
   Incollare in fondo a template.css
   ============================================================ */

#scena3 {
    background: #0A0D11 !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

/* --- wrapper header sezione --- */
#scena3 .col-sm-12.col-md-12.area,
#scena3 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* --- etichetta Scena 03 --- */
#scena3 .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#scena3 .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#scena3 .row:first-child h4 strong {
    color: #F5C518 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* --- titolo Portfolio --- */
#scena3 .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 6.4vw, 3.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: #F4F1EA !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
}

/* --- row carousel: padding zero, fuori dai margini laterali --- */
#scena3 .row:last-child {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: clamp(34px, 6vw, 56px) !important;
}

/* --- Owl Carousel: scroll orizzontale stile VOX --- */



/* --- Owl: reset visivo, lasciamo scorrere Owl normalmente --- */
#scena3 .owl-stage-outer {
    border-radius: 0 !important;
}

#scena3 .owl-item {
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #0F141A !important;
}

/* --- immagine prodotto --- */
#scena3 .blocco_foto_prodotto {
    aspect-ratio: 16 / 9 !important;
    position: relative !important;
    overflow: hidden !important;
}

#scena3 .blocco_foto_prodotto figure,
#scena3 .blocco_foto_prodotto picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#scena3 .blocco_foto_prodotto img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transform: scale(1.03) !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#scena3 .owl-item:hover .blocco_foto_prodotto img {
    transform: scale(1.1) !important;
}

/* --- info slide: titolo cliente --- */
#scena3 .blocco_dati {
    padding: 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    width: auto !important;
}

#scena3 .titolo_prodotto p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #F4F1EA !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
}

/* --- barra avanzamento VOX --- */
.vox-portfolio-foot {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px clamp(20px, 5vw, 80px) 0 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    color: #9AA3B0 !important;
}

.vox-portfolio-foot .vox-bar {
    flex: 1 !important;
    height: 2px !important;
    background: rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
    border-radius: 2px !important;
}

.vox-portfolio-foot .vox-bar i {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    background: #F5C518 !important;
    border-radius: 2px !important;
    transition: width 0.25s ease, transform 0.25s ease !important;
}
/* nascondi nav, dots e bottoni CMS */
#scena3 .owl-nav,
#scena3 .owl-dots {
    display: none !important;
}

#scena3 .owlbtns {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ripristina padding sul wrapper — uguale alle altre scene */
#scena3 .col-sm-12.col-md-12.area,
#scena3 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* la row del carousel sfonda i margini del wrapper */
#scena3 .row:last-child {
    margin-left: calc(-1 * clamp(20px, 5vw, 80px)) !important;
    margin-right: calc(-1 * clamp(20px, 5vw, 80px)) !important;
    margin-top: clamp(34px, 6vw, 56px) !important;
    padding: 0 !important;
    width: calc(100% + clamp(20px, 5vw, 80px) * 2) !important;
}

/* owl stage outer: larghezza piena */
#scena3 .owl-stage-outer {
    overflow: hidden !important;
    width: 100% !important;
}

#scena3 .owl-carousel {
    width: 100% !important;
    padding: 0 !important;
}

#scena3 .col-sm-12.col-md-12.colonnaarea .row:first-child h3 {
    font-size: clamp(2.2rem, 7.5vw, 4.4rem) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: #F4F1EA !important;
    white-space: normal !important;
    word-wrap: normal !important;
    margin-bottom: 0;
}

#scena3 .button {margin-bottom: 40px;}

/* ============================================================
   VOX — SCENA 04 / CHI SIAMO (#scena4)
   Incollare in fondo a template.css
   ============================================================ */

#scena4 {
    background: #0A0D11 !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

/* --- wrapper larghezza piena --- */
#scena4 .col-sm-12.col-md-12.area,
#scena4 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* --- etichetta Scena 04 --- */
#scena4 .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#scena4 .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#scena4 .row:first-child h4 strong {
    color: #F5C518 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* --- claim --- */
#scena4 .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 7vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.03 !important;
    letter-spacing: -0.025em !important;
    color: #F4F1EA !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
    white-space: normal !important;
    word-wrap: normal !important;
}

/* "La accelera." in gold */
#scena4 .row:first-child h3 strong {
    color: #F5C518 !important;
    font-weight: 800 !important;
}

/* --- primo paragrafo: lead --- */
#scena4 .row:first-child p:first-of-type {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.06rem, 3vw, 1.35rem) !important;
    line-height: 1.55 !important;
    color: #9AA3B0 !important;
    font-weight: 400 !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* --- secondo paragrafo: body --- */
#scena4 .row:first-child p:last-of-type {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- box missione --- */
#scena4 .row:last-child {
    margin-top: 34px !important;
}

#scena4 .row:last-child h4 {
    display: block !important;
    padding: 24px !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    border-radius: 6px !important;
    background: #0F141A !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.15rem, 4vw, 1.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: #F4F1EA !important;
    max-width: 100% !important;
}

/* "La nostra missione" — etichetta gold sopra */
#scena4 .row:last-child h4 strong {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    display: block !important;
    margin-bottom: 10px !important;
}

#scena4 .row:first-child h3 {
    max-width: 100% !important;
}

#scena4 .row:first-child p:first-of-type {
    max-width: 100% !important;
}

#scena4 .row:first-child p:last-of-type {
    max-width: 100% !important;
}

#scena4 .row:last-child h4 {
    max-width: 100% !important;
}

/* ============================================================
   VOX — SCENA 05 / FAQ (#scena5)
   Incollare in fondo a template.css
   ============================================================ */

#scena5 {
    background: #0A0D11 !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

/* --- wrapper --- */
#scena5 .col-sm-12.col-md-12.area,
#scena5 .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* --- etichetta Scena 05 --- */
#scena5 .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#scena5 .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#scena5 .row:first-child h4 strong {
    color: #F5C518 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* --- contenitore FAQ --- */
#scena5 .faq-container {
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    margin-top: 0 !important;
}

/* --- item singolo --- */
#scena5 .faq-item {
    border-bottom: 1px solid rgba(244, 241, 234, 0.12) !important;
    padding: 0 !important;
}

/* --- bottone domanda --- */
#scena5 .faq-question {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 24px 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.05rem, 4vw, 1.45rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #F4F1EA !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: color 0.25s ease !important;
}

#scena5 .faq-question:hover {
    color: #F5C518 !important;
    background: transparent !important;
}

#scena5 .faq-question[aria-expanded="true"] {
    color: #F5C518 !important;
}

/* --- icona +/× CSS pura (sovrascrive freccia CMS) --- */
#scena5 .faq-question::after {
    content: "" !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    flex: none !important;
    margin-top: 0.2em !important;
    background:
        linear-gradient(#F5C518, #F5C518) center/100% 2px no-repeat,
        linear-gradient(#F5C518, #F5C518) center/2px 100% no-repeat !important;
    border-radius: 2px !important;
    transition: transform 0.35s cubic-bezier(.16,1,.3,1) !important;
}

#scena5 .faq-question[aria-expanded="true"]::after {
    transform: rotate(45deg) !important;
}

/* nascondi freccia originale CMS */
#scena5 .faq-question .faq-arrow,
#scena5 .faq-item img {
    display: none !important;
}

/* --- risposta --- */
#scena5 .faq-answer {
    background: transparent !important;
    border-radius: 0 !important;
}

#scena5 .faq-answer > * {
    padding: 0 0 24px 0 !important;
}

#scena5 .faq-answer p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    max-width: 100% !important;
    margin: 0 !important;
}

#scena5 .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.2rem, 7.5vw, 4.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    color: #F4F1EA !important;
    white-space: normal !important;
    word-wrap: normal !important;
    margin-bottom: clamp(34px, 6vw, 56px) !important;
}

/* ============================================================
   VOX — Portfolio frecce circolari custom
   ============================================================ */

#scena3 .owlbtns {
    display: none !important;
}

.vox-arrows {
    display: flex !important;
    gap: 10px !important;
    padding: 16px clamp(20px, 5vw, 80px) 0 !important;
}

.vox-arrow {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    color: #0A0D11 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.6rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 0 14px rgba(245, 197, 24, 0.4) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.vox-arrow:hover {
    background: #FFD633 !important;
    box-shadow: 0 0 22px rgba(255, 214, 51, 0.55) !important;
}

.vox-arrow:active {
    transform: scale(0.93) !important;
}

.vox-arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .vox-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.4rem !important;
    }
}

/* frecce affiancate alla barra portfolio */
#scena3 .vox-arrows {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#scena3 .vox-portfolio-foot {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.vox-arrow {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    color: #0A0D11 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.25s ease, box-shadow 0.25s ease !important;
    box-shadow: 0 0 12px rgba(245, 197, 24, 0.4) !important;
    -webkit-tap-highlight-color: transparent !important;
    font-size: 0 !important; /* nasconde il testo ‹ › */
}

.vox-arrow:hover {
    background: #FFD633 !important;
    box-shadow: 0 0 22px rgba(255, 214, 51, 0.55) !important;
}

.vox-arrow:active {
    background: #F5C518 !important;
}

.vox-arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* freccia sinistra via SVG mask */
.vox-arrow--prev {
    background-color: #F5C518 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.vox-arrow--next {
    background-color: #F5C518 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
    -webkit-mask: none !important;
    mask: none !important;
}

.vox-arrow--prev:hover,
.vox-arrow--next:hover {
    background-color: #FFD633 !important;
}

.vox-arrow--prev:hover,
.vox-arrow--next:hover {
    background-color: #FFD633 !important;
}

.vox-arrow--prev:hover {
    background-color: #FFD633 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
}

.vox-arrow--next:hover {
    background-color: #FFD633 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px !important;
}

/* ============================================================
   VOX — SLIDE FOTO (#slide-foto)
   ============================================================ */

#slide-foto {
    background: #0A0D11 !important;
    padding-block: clamp(68px, 13vw, 128px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

#slide-foto .col-sm-12.col-md-12.area,
#slide-foto .col-sm-12.col-md-12.colonnaarea {
    padding: 0 clamp(20px, 5vw, 80px) !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* etichetta */
#slide-foto .row:first-child h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin-bottom: 22px !important;
    line-height: 1 !important;
}

#slide-foto .row:first-child h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#slide-foto .row:first-child h4 strong {
    color: #F5C518 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* titolo — stesso font size di scena2 */
#slide-foto .row:first-child h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.2rem, 7.5vw, 4.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    color: #F4F1EA !important;
    white-space: normal !important;
    word-wrap: normal !important;
    margin-bottom: clamp(34px, 6vw, 56px) !important;
}

/* carousel a larghezza piena */
#slide-foto .row:last-child {
    margin-left: calc(-1 * clamp(20px, 5vw, 80px)) !important;
    margin-right: calc(-1 * clamp(20px, 5vw, 80px)) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: calc(100% + clamp(20px, 5vw, 80px) * 2) !important;
}

#slide-foto .owl-stage-outer {
    overflow: hidden !important;
    width: 100% !important;
}

#slide-foto .owl-carousel {
    width: 100% !important;
    padding: 0 !important;
}

#slide-foto .owl-nav,
#slide-foto .owl-dots {
    display: none !important;
}

#slide-foto .owlbtns {
    display: none !important;
}

/* immagini */
#slide-foto .cont_sing figure,
#slide-foto .cont_sing picture {
    display: block !important;
    margin: 0 !important;
}

#slide-foto .cont_sing img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    display: block !important;
    transition: filter 0.4s ease !important;
}

#slide-foto .owl-item:hover .cont_sing img {
    filter: brightness(1) !important;
}

/* barra avanzamento — stessa di scena3 */
#slide-foto .vox-portfolio-foot {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px clamp(20px, 5vw, 80px) 0 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    color: #9AA3B0 !important;
}

#slide-foto .vox-bar {
    flex: 1 !important;
    height: 2px !important;
    background: rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
    border-radius: 2px !important;
}

#slide-foto .vox-bar i {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    background: #F5C518 !important;
    border-radius: 2px !important;
    transition: width 0.25s ease, transform 0.25s ease !important;
}

#slide-foto .vox-portfolio-foot {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px clamp(20px, 5vw, 80px) 0 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    color: #9AA3B0 !important;
}

#slide-foto .vox-arrows {
    display: flex !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
}















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

CAMBIO COLORE

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

/* ============================================================
   VOX — TEMA LIGHT (attivo con .vox-light su <html>)
   ============================================================ */

/* sfondo generale */
html.vox-light,
html.vox-light body { background: #F4F1EA !important; }

/* sfondo sezioni + bordi */
html.vox-light #scena1,
html.vox-light #scena2,
html.vox-light #scena3,
html.vox-light #scena4,
html.vox-light #scena5,
html.vox-light #slide-foto {
    background: #F4F1EA !important;
    border-top-color: rgba(10,13,17,0.10) !important;
}

/* scena2 ha un radial gold: lo rifaccio su base chiara */
html.vox-light #scena2 {
    background:
        radial-gradient(90% 80% at 80% 10%, rgba(245,197,24,0.16), transparent 55%),
        #EFEAE0 !important;
}

/* --- TITOLI H3 scuri --- */
html.vox-light #scena1 .row:first-child h3,
html.vox-light #scena2 .row:first-child h3,
html.vox-light #scena3 .row:first-child h3,
html.vox-light #scena3 .col-sm-12.col-md-12.colonnaarea .row:first-child h3,
html.vox-light #scena4 .row:first-child h3,
html.vox-light #scena5 .row:first-child h3,
html.vox-light #slide-foto .row:first-child h3 {
    color: #0A0D11 !important;
}

/* --- ETICHETTE h4 (testo grigio) scure --- */
html.vox-light #scena1 .row:first-child h4,
html.vox-light #scena2 .row:first-child h4,
html.vox-light #scena3 .row:first-child h4,
html.vox-light #scena4 .row:first-child h4,
html.vox-light #scena5 .row:first-child h4,
html.vox-light #slide-foto .row:first-child h4 {
    color: #6E6A66 !important;
}

/* --- PARAGRAFI --- */
html.vox-light #scena1 .row:first-child p,
html.vox-light #scena2 .row:first-child p { color: #2B2B2B !important; }

html.vox-light #scena2 .row:last-child p,
html.vox-light #scena4 .row:first-child p:first-of-type,
html.vox-light #scena4 .row:first-child p:last-of-type { color: #6E6A66 !important; }

/* --- KICKER scena2 --- */
html.vox-light #scena2 .row:nth-child(2) h4 {
    color: #0A0D11 !important;
}

/* --- SCENA 01: griglia servizi --- */
html.vox-light #scena1 .row.servizi {
    background: rgba(10,13,17,0.10) !important;
    border-color: rgba(10,13,17,0.10) !important;
}
html.vox-light #scena1 .row.servizi > .col-sm-12 { background: #FFFFFF !important; }
html.vox-light #scena1 .row.servizi > .col-sm-12:hover { background: #F6F2E9 !important; }
html.vox-light #scena1 .row.servizi h4 { color: #0A0D11 !important; }
html.vox-light #scena1 .row.servizi p { color: #6E6A66 !important; }

/* --- SCENA 03: card carousel --- */
html.vox-light #scena3 .owl-item {
    border-color: rgba(10,13,17,0.12) !important;
    background: #FFFFFF !important;
}
html.vox-light #scena3 .titolo_prodotto p { color: #0A0D11 !important; }

/* --- BARRA avanzamento (portfolio + slide-foto) --- */
html.vox-light .vox-portfolio-foot { color: #6E6A66 !important; }
html.vox-light .vox-portfolio-foot .vox-bar,
html.vox-light #slide-foto .vox-bar { background: rgba(10,13,17,0.12) !important; }

/* --- SCENA 04: box missione --- */
html.vox-light #scena4 .row:last-child h4 {
    background: #FFFFFF !important;
    color: #0A0D11 !important;
}

/* --- SCENA 05: FAQ --- */
html.vox-light #scena5 .faq-container,
html.vox-light #scena5 .faq-item { border-color: rgba(10,13,17,0.12) !important; }
html.vox-light #scena5 .faq-question { color: #0A0D11 !important; }
html.vox-light #scena5 .faq-answer p { color: #6E6A66 !important; }

/* --- CURSORE custom: scuro su sfondo chiaro --- */
html.vox-light .vox-cursor { border-color: #0A0D11 !important; }
html.vox-light .vox-cursor-dot { background: #0A0D11 !important; }


/* ============================================================
   VOX — BOTTONE SWITCH TEMA
   ============================================================ */
.vox-theme-toggle {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(244,241,234,0.25);
    background-color: rgba(10,13,17,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 140;
    transition: background-color .3s ease, border-color .3s ease,
                transform .2s ease, box-shadow .3s ease;
    /* icona luna (tema scuro attivo) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

.vox-theme-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(245,197,24,0.4);
}

/* in tema light: sfondo chiaro + icona sole */
html.vox-light .vox-theme-toggle {
    border-color: rgba(10,13,17,0.15);
    background-color: rgba(255,255,255,0.85);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8860B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='2' x2='12' y2='4'/%3E%3Cline x1='12' y1='20' x2='12' y2='22'/%3E%3Cline x1='4.93' y1='4.93' x2='6.34' y2='6.34'/%3E%3Cline x1='17.66' y1='17.66' x2='19.07' y2='19.07'/%3E%3Cline x1='2' y1='12' x2='4' y2='12'/%3E%3Cline x1='20' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.93' y1='19.07' x2='6.34' y2='17.66'/%3E%3Cline x1='17.66' y1='6.34' x2='19.07' y2='4.93'/%3E%3C/svg%3E");
}

/* cursore chiaro quando il menu è aperto, anche in tema light */
html.vox-light:has(#menu_header.menu-aperto) .vox-cursor {
    border-color: #F4F1EA !important;
}

html.vox-light:has(#menu_header.menu-aperto) .vox-cursor-dot {
    background: #F4F1EA !important;
}

/* transizione morbida tema scuro/chiaro — solo contenitori senza scroll-reveal */
html,
body,
#scena1, #scena2, #scena3, #scena4, #scena5, #slide-foto,
#scena1 .row.servizi > .col-sm-12,
#scena3 .owl-item,
#scena4 .row:last-child h4,
.vox-portfolio-foot .vox-bar,
#slide-foto .vox-bar,
.vox-theme-toggle,
.vox-cursor,
.vox-cursor-dot,
.vox-portfolio-foot {
    transition: background-color 0.4s ease, color 0.4s ease,
                border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* testi con scroll-reveal: aggiungo color/border-color SENZA toccare opacity/transform */
.vox-anim {
    transition: opacity 0.7s cubic-bezier(.16,1,.3,1),
                transform 0.7s cubic-bezier(.16,1,.3,1),
                color 0.4s ease,
                border-color 0.4s ease !important;
}


/* ============================================================
   VOX — PORTFOLIO HERO (#slideshow)
   Incollare in fondo a template.css
   ============================================================ */

/* --- sezione fullscreen, reference per posizionamento --- */
#portfolio #slideshow {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 100svh !important;
}

/* --- overlay scuro: gradiente cinematico dal basso --- */
#portfolio #slideshow .cbck_72 {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.25) 0%,
        rgba(10, 13, 17, 0.50) 45%,
        rgba(10, 13, 17, 0.92) 100%
    ) !important;
}

html.vox-light #portfolio #slideshow .cbck_72 {
    background: linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.10) 0%,
        rgba(244, 241, 234, 0.55) 45%,
        rgba(244, 241, 234, 0.97) 100%
    ) !important;
}

/* --- wrapper contenuto: z sopra overlay, ancorato in basso --- */
#portfolio #slideshow > .col-sm-12.col-md-12.area {
    position: relative !important;
    z-index: 5 !important;
    height: 100% !important;
}

#portfolio #slideshow .colonnaarea {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 100svh !important;
    padding: 0 clamp(20px, 5vw, 80px) !important;
    padding-bottom: clamp(80px, 14vh, 160px) !important;
}

/* --- row testi: allineamento sinistra --- */
#portfolio #slideshow .row.centrale.ao_center {
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- H1: parte normale = eyebrow, strong = titolo grande --- */
#portfolio #slideshow h1 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

/* linea oro prima dell'eyebrow */
#portfolio #slideshow h1::before {
    content: "" !important;
    width: 34px !important;
    height: 1px !important;
    background: #F5C518 !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* "Portfolio" grande */
#portfolio #slideshow h1 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.4rem, 14vw, 9rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    display: block !important;
}

html.vox-light #portfolio #slideshow h1 strong {
    color: #0A0D11 !important;
}

/* --- sottotitolo --- */
#portfolio #slideshow .row.centrale.ao_center p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 3.4vw, 1.18rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: rgba(244, 241, 234, 0.78) !important;
    text-align: left !important;
    max-width: 46ch !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}

html.vox-light #portfolio #slideshow .row.centrale.ao_center p {
    color: #3a3a3a !important;
}

/* --- riga meta "08 PROGETTI / 2023 — 2025" --- */
#portfolio #slideshow .row.progetti {
    margin-top: 24px !important;
}

#portfolio #slideshow .row.progetti h4 {
    display: inline-block !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(244, 241, 234, 0.85) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.18) !important;
    padding-top: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

html.vox-light #portfolio #slideshow .row.progetti h4 {
    color: #0A0D11 !important;
    border-top-color: rgba(10, 13, 17, 0.18) !important;
}

/* --- grana pellicola --- */
/* #portfolio #slideshow::after {
    content: "" !important;
    position: absolute !important;
    inset: -50% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0.04 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
    animation: vox-grain 7s steps(8) infinite !important;
} */

/* --- mirino: 4 angoli --- */
#portfolio #slideshow::before {
    content: "" !important;
    position: absolute !important;
    top: 80px !important;
    left: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-left: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

#portfolio #slideshow .cbck_72::before {
    content: "" !important;
    position: absolute !important;
    top: 80px !important;
    right: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-right: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

#portfolio #slideshow .cbck_72::after {
    content: "" !important;
    position: absolute !important;
    bottom: 40px !important;
    left: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-left: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* basso destra via .area::after */
#portfolio #slideshow > .col-sm-12.col-md-12.area::after {
    content: "" !important;
    position: absolute !important;
    bottom: 40px !important;
    right: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-right: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* tema light: mirino scuro */
html.vox-light #portfolio #slideshow::before,
html.vox-light #portfolio #slideshow .cbck_72::before,
html.vox-light #portfolio #slideshow .cbck_72::after,
html.vox-light #portfolio #slideshow > .col-sm-12.col-md-12.area::after {
    border-color: rgba(10, 13, 17, 0.4) !important;
}


/* --- desktop --- */
@media (min-width: 768px) {
    #portfolio #slideshow h1 strong {
        font-size: clamp(4rem, 12vw, 9rem) !important;
    }
}

/* ============================================================
   VOX — PORTFOLIO LAVORI (#portfolio-1, #portfolio-2 … )
   Incollare in fondo a template.css
   ============================================================ */

/* --- sezione base --- */
#portfolio #portfolio-1 {
    background: #0A0D11 !important;
    padding: clamp(54px, 10vw, 104px) clamp(20px, 5vw, 80px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
}

html.vox-light #portfolio #portfolio-1 {
    background: #F4F1EA !important;
    border-top-color: rgba(10, 13, 17, 0.12) !important;
}

/* --- colonnaarea: reset --- */
#portfolio #portfolio-1 .colonnaarea {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   EYEBROW  —  h4 con "Scena 01" + tag span
   ============================================================ */

#portfolio #portfolio-1 h4 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin: 0 0 18px 0 !important;
    line-height: 1 !important;
    height: auto !important;
}

/* pallino oro */
#portfolio #portfolio-1 h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

/* tag pillole */
#portfolio #portfolio-1 h4 span {
    font-family: 'Space Mono', monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    border: 1px solid rgba(244, 241, 234, 0.16) !important;
    border-radius: 2px !important;
    padding: 3px 8px !important;
    font-weight: 400 !important;
}

html.vox-light #portfolio #portfolio-1 h4 span {
    color: #6E6A66 !important;
    border-color: rgba(10, 13, 17, 0.16) !important;
}

/* ============================================================
   TITOLO  —  h3 > strong = nome lavoro, dopo br = sottotitolo
   ============================================================ */

#portfolio #portfolio-1 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.2rem, 9vw, 4rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    color: #F5C518 !important;
    margin: 0 0 16px 0 !important;
    white-space: normal !important;
    word-wrap: normal !important;
}

#portfolio #portfolio-1 h3 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.2rem, 9vw, 4rem) !important;
    color: #F4F1EA !important;
    text-transform: uppercase !important;
    display: block !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0px !important;
}

html.vox-light #portfolio #portfolio-1 h3 strong {
    color: #0A0D11 !important;
}

/* sottotitolo dopo il <br>: piccolo, gold */
/* già gestito dal font-size/color base dell'h3 → 
   il testo "Regia: Erik…" eredita dal h3 normale */
#portfolio #portfolio-1 h3 {
    font-size: clamp(1.1rem, 3.6vw, 1.35rem) !important;
}

/* il strong sovrascrive il font-size con il suo clamp grande */

/* ============================================================
   DESCRIZIONE  —  p
   ============================================================ */

#portfolio #portfolio-1 p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.98rem, 3.4vw, 1.08rem) !important;
    line-height: 1.65 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    max-width: 56ch !important;
    margin: 0 0 22px 0 !important;
}

html.vox-light #portfolio #portfolio-1 p {
    color: #6E6A66 !important;
}

/* ============================================================
   PREMI  —  h5 (badge con stella oro)
   ============================================================ */

#portfolio #portfolio-1 h5 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #F5C518 !important;
    border-radius: 2px !important;
    padding: 8px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #F4F1EA !important;
    margin: 0 10px 10px 0 !important;
    white-space: normal !important;
}

#portfolio #portfolio-1 h5::before {
    content: "★" !important;
    color: #F5C518 !important;
    flex: none !important;
}

html.vox-light #portfolio #portfolio-1 h5 {
    color: #0A0D11 !important;
}

/* ============================================================
   VIDEO  —  embed 16:9 con frame cinematico
   ============================================================ */

#portfolio #portfolio-1 .elemento_sing.el-video {
    width: 100% !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

#portfolio #portfolio-1 .embed-responsive-16by9 {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding-top: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
}

html.vox-light #portfolio #portfolio-1 .embed-responsive-16by9 {
    border-color: rgba(10, 13, 17, 0.12) !important;
}

#portfolio #portfolio-1 .embed-responsive-16by9 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */

#portfolio #portfolio-1 .row:first-child,
#portfolio #portfolio-1 .row:last-child {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
                transform 0.8s cubic-bezier(.16, 1, .3, 1),
                color 0.4s ease, border-color 0.4s ease;
}

#portfolio #portfolio-1 .row:first-child.is-visible,
#portfolio #portfolio-1 .row:last-child.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   DESKTOP  —  2 colonne, testo sx / video dx
   ============================================================ */

@media (min-width: 900px) {
    #portfolio #portfolio-1 .colonnaarea {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 clamp(40px, 5vw, 80px) !important;
        align-items: center !important;
    }

    #portfolio #portfolio-1 .elemento_sing.el-video {
        margin-top: 0 !important;
    }

    #portfolio #portfolio-1 .embed-responsive-16by9 {
        aspect-ratio: 16 / 9 !important;
    }
}

/* ============================================================
   FRAME CINEMATICO SUL VIDEO
   ============================================================ */

/* contenitore: reference per i tick */
#portfolio #portfolio-1 .embed-responsive-16by9 {
    position: relative !important;
}

/* tick angolo alto-sx */
#portfolio #portfolio-1 .embed-responsive-16by9::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid #F5C518 !important;
    border-left: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* tick angolo alto-dx + tag REC */
#portfolio #portfolio-1 .embed-responsive-16by9::after {
    content: "● REC" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: #FF3B30 !important;
    animation: recBlink 1.2s steps(1) infinite !important;
}

@keyframes recBlink {
    50% { opacity: 0.15; }
}

/* tick basso-sx */
#portfolio #portfolio-1 .el-video::before {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid #F5C518 !important;
    border-left: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* tick basso-dx */
#portfolio #portfolio-1 .el-video::after {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid #F5C518 !important;
    border-right: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* el-video deve essere reference */
#portfolio #portfolio-1 .el-video {
    position: relative !important;
}


/* ============================================================
   VOX — PORTFOLIO 2: TUNNEL STUDIOS
   ============================================================ */

/* --- sezione --- */
#portfolio #portfolio2 {
    background: #0A0D11 !important;
    padding: clamp(54px, 10vw, 104px) clamp(20px, 5vw, 80px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
}

html.vox-light #portfolio #portfolio2 {
    background: #F4F1EA !important;
    border-top-color: rgba(10, 13, 17, 0.12) !important;
}

#portfolio #portfolio2 .colonnaarea {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- eyebrow h4 --- */
#portfolio #portfolio2 h4 {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin: 0 0 18px 0 !important;
    line-height: 1 !important;
    height: auto !important;
}

#portfolio #portfolio2 h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

#portfolio #portfolio2 h4 span {
    font-family: 'Space Mono', monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    border: 1px solid rgba(244, 241, 234, 0.16) !important;
    border-radius: 2px !important;
    padding: 3px 8px !important;
    font-weight: 400 !important;
}

html.vox-light #portfolio #portfolio2 h4 span {
    color: #6E6A66 !important;
    border-color: rgba(10, 13, 17, 0.16) !important;
}

/* --- titolo h3 --- */
#portfolio #portfolio2 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.1rem, 3.6vw, 1.35rem) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    color: #F5C518 !important;
    margin: 0 0 16px 0 !important;
    white-space: normal !important;
    word-wrap: normal !important;
}

#portfolio #portfolio2 h3 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.2rem, 9vw, 4rem) !important;
    color: #F4F1EA !important;
    text-transform: uppercase !important;
    display: block !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0px !important;
}

html.vox-light #portfolio #portfolio2 h3 strong {
    color: #0A0D11 !important;
}

/* --- descrizione --- */
#portfolio #portfolio2 p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.98rem, 3.4vw, 1.08rem) !important;
    line-height: 1.65 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    max-width: 56ch !important;
    margin: 0 !important;
}

html.vox-light #portfolio #portfolio2 p {
    color: #6E6A66 !important;
}

/* --- video --- */
#portfolio #portfolio2 .el-video {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 30px !important;
}

#portfolio #portfolio2 .embed-responsive-16by9 {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    padding-top: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
}

html.vox-light #portfolio #portfolio2 .embed-responsive-16by9 {
    border-color: rgba(10, 13, 17, 0.12) !important;
}

#portfolio #portfolio2 .embed-responsive-16by9 video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* --- frame cinematico: tick + REC --- */
#portfolio #portfolio2 .embed-responsive-16by9::before {
    content: "" !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid #F5C518 !important;
    border-left: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

#portfolio #portfolio2 .embed-responsive-16by9::after {
    content: "● REC" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 4 !important;
    pointer-events: none !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: #FF3B30 !important;
    animation: recBlink 1.2s steps(1) infinite !important;
}

#portfolio #portfolio2 .el-video::before {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid #F5C518 !important;
    border-left: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

#portfolio #portfolio2 .el-video::after {
    content: "" !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid #F5C518 !important;
    border-right: 2px solid #F5C518 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

/* --- scroll reveal --- */
#portfolio #portfolio2 .colonnaarea > .row {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
                transform 0.8s cubic-bezier(.16, 1, .3, 1),
                color 0.4s ease, border-color 0.4s ease;
}

#portfolio #portfolio2 .colonnaarea > .row.is-visible {
    opacity: 1;
    transform: none;
}

/* --- desktop: video SX, testo DX (sezione pari = invertita) --- */
@media (min-width: 900px) {
    #portfolio #portfolio2 .colonnaarea {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 clamp(40px, 5vw, 80px) !important;
        align-items: center !important;
    }

    /* testo va a destra */
    #portfolio #portfolio2 .colonnaarea > .row:first-child {
        order: 2 !important;
    }

    /* video va a sinistra */
    #portfolio #portfolio2 .colonnaarea > .row:last-child {
        order: 1 !important;
    }

    #portfolio #portfolio2 .el-video {
        margin-top: 0 !important;
    }
}

/* ============================================================
   VOX — VIDEO: no blur
   ============================================================ */
#portfolio [id^="portfolio"] video {
    filter: none !important;
}







/* ============================================================
   VOX — PLAYER VIDEO CUSTOM (play + fullscreen)
   ============================================================ */

/* nascondi controlli nativi */
#portfolio [id^="portfolio"] video {
    filter: none !important;
}

/* wrapper video: reference */
#portfolio [id^="portfolio"] .embed-responsive-16by9 {
    position: relative !important;
    cursor: pointer !important;
}

/* --- PLAY centrato --- */
#portfolio [id^="portfolio"] .vox-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    border: 1.5px solid #F5C518 !important;
    background: rgba(10, 13, 17, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !important;
    pointer-events: none !important;
}

#portfolio [id^="portfolio"] .embed-responsive-16by9:hover .vox-play {
    background: rgba(245, 197, 24, 0.15) !important;
    box-shadow: 0 0 24px rgba(245, 197, 24, 0.35) !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
}

/* triangolo play */
#portfolio [id^="portfolio"] .vox-play::before {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 18px solid #F5C518 !important;
    border-top: 11px solid transparent !important;
    border-bottom: 11px solid transparent !important;
    margin-left: 4px !important;
}

/* pausa: due barrette */
#portfolio [id^="portfolio"] .vox-play.is-pause::before {
    border: none !important;
    width: 16px !important;
    height: 20px !important;
    margin-left: 0 !important;
    border-left: 4px solid #F5C518 !important;
    border-right: 4px solid #F5C518 !important;
}

/* nasconde play durante riproduzione (riappare su hover) */
#portfolio [id^="portfolio"] .embed-responsive-16by9.is-playing .vox-play {
    opacity: 0 !important;
}

#portfolio [id^="portfolio"] .embed-responsive-16by9.is-playing:hover .vox-play {
    opacity: 1 !important;
}

/* --- FULLSCREEN basso destra --- */
#portfolio [id^="portfolio"] .vox-fs {
    position: absolute !important;
    bottom: 14px !important;
    right: 14px !important;
    z-index: 5 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(244, 241, 234, 0.3) !important;
    background: rgba(10, 13, 17, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s ease, border-color 0.25s ease !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

#portfolio [id^="portfolio"] .embed-responsive-16by9:hover .vox-fs {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.vox-fs:hover {
    background: rgba(245, 197, 24, 0.2) !important;
    border-color: #F5C518 !important;
}

/* icona fullscreen via SVG */
#portfolio [id^="portfolio"] .vox-fs::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F1EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

/* --- barra progresso minima in basso --- */
#portfolio [id^="portfolio"] .vox-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: rgba(244, 241, 234, 0.15) !important;
    z-index: 5 !important;
    border-radius: 0 0 6px 6px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#portfolio [id^="portfolio"] .embed-responsive-16by9.is-playing .vox-progress,
#portfolio [id^="portfolio"] .embed-responsive-16by9:hover .vox-progress {
    opacity: 1 !important;
}

#portfolio [id^="portfolio"] .vox-progress i {
    display: block !important;
    height: 100% !important;
    width: 0% !important;
    background: #F5C518 !important;
    transition: width 0.2s linear !important;
}


/* ============================================================
   VOX — PORTFOLIO CTA / CONTATTI
   ============================================================ */

#portfolio #contatti-portfolio {
    background: #0A0D11 !important;
    padding: clamp(80px, 14vw, 140px) clamp(20px, 5vw, 80px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    text-align: center !important;
}

html.vox-light #portfolio #contatti-portfolio {
    background: #F4F1EA !important;
    border-top-color: rgba(10, 13, 17, 0.12) !important;
}

#portfolio #contatti-portfolio .colonnaarea {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- titolo --- */
#portfolio #contatti-portfolio h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(2.2rem, 8vw, 4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    margin: 0 auto 18px !important;
    white-space: normal !important;
    word-wrap: normal !important;
}

html.vox-light #portfolio #contatti-portfolio h3 {
    color: #0A0D11 !important;
}

/* --- sottotitolo --- */
#portfolio #contatti-portfolio p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 3.4vw, 1.12rem) !important;
    line-height: 1.6 !important;
    color: #9AA3B0 !important;
    text-align: center !important;
    max-width: 44ch !important;
    margin: 0 auto !important;
}

html.vox-light #portfolio #contatti-portfolio p {
    color: #6E6A66 !important;
}

/* --- scroll reveal --- */
#portfolio #contatti-portfolio .colonnaarea > .row {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(.16, 1, .3, 1),
                transform 0.8s cubic-bezier(.16, 1, .3, 1),
                color 0.4s ease, border-color 0.4s ease;
}

#portfolio #contatti-portfolio .colonnaarea > .row.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   VOX — CHI SIAMO · HERO (#chisiamo #slideshow)
   Replica ESATTA dell'hero Portfolio, adattata al markup Chi Siamo.
   Differenze di markup gestite:
     · Portfolio ha overlay .cbck_72 → qui c'è .js-full-slider (slideshow)
     · Portfolio ha .row.progetti → qui assente (rimosso)
   Titolo "Chi Siamo" reso identico a "Portfolio".
   Incollare in fondo a template.css.
   ============================================================ */

/* --- sezione fullscreen, reference per posizionamento --- */
#chisiamo #slideshow {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 100svh !important;
    background-color: #0A0D11 !important;
}

/* --- slideshow di sfondo: copre tutta la sezione, dietro a tutto --- */
#chisiamo #slideshow .js-full-slider,
#chisiamo #slideshow .full-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#chisiamo #slideshow .p-slide {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* --- overlay scuro: gradiente cinematico dal basso (come .cbck_72) --- */
#chisiamo #slideshow .js-full-slider::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.25) 0%,
        rgba(10, 13, 17, 0.50) 45%,
        rgba(10, 13, 17, 0.92) 100%
    ) !important;
}

html.vox-light #chisiamo #slideshow .js-full-slider::after {
    background: linear-gradient(
        180deg,
        rgba(244, 241, 234, 0.10) 0%,
        rgba(244, 241, 234, 0.55) 45%,
        rgba(244, 241, 234, 0.97) 100%
    ) !important;
}

/* --- wrapper contenuto: z sopra overlay, ancorato in basso --- */
#chisiamo #slideshow > .col-sm-12.col-md-12.area {
    position: relative !important;
    z-index: 5 !important;
    height: 100% !important;
}

#chisiamo #slideshow .colonnaarea {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 100svh !important;
    padding: 0 clamp(20px, 5vw, 80px) !important;
    padding-bottom: clamp(80px, 14vh, 160px) !important;
}

/* --- row testi: allineamento sinistra --- */
#chisiamo #slideshow .row.centrale.ao_center {
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
}

/* --- H1: parte normale = eyebrow, strong = titolo grande --- */
#chisiamo #slideshow h1 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

/* linea oro prima dell'eyebrow */
#chisiamo #slideshow h1::before {
    content: "" !important;
    width: 34px !important;
    height: 1px !important;
    background: #F5C518 !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* "Chi Siamo" grande */
#chisiamo #slideshow h1 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.4rem, 17vw, 9rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    display: block !important;
}

html.vox-light #chisiamo #slideshow h1 strong {
    color: #0A0D11 !important;
}

/* --- sottotitolo --- */
#chisiamo #slideshow .row.centrale.ao_center p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 3.4vw, 1.18rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: rgba(244, 241, 234, 0.78) !important;
    text-align: left !important;
    max-width: 50ch !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}

html.vox-light #chisiamo #slideshow .row.centrale.ao_center p {
    color: #3a3a3a !important;
}

/* prima riga "Due autori. Una visione." in evidenza (Montserrat oro) */
#chisiamo #slideshow .row.centrale.ao_center p::first-line {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
    color: #F5C518 !important;
    letter-spacing: -0.01em !important;
}

/* --- grana pellicola --- */
/* #chisiamo #slideshow::after {
    content: "" !important;
    position: absolute !important;
    inset: -50% !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 0.04 !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
    animation: vox-grain 7s steps(8) infinite !important;
} */

/* --- mirino: 4 angoli (identico al portfolio) --- */
/* alto sinistra → su #slideshow::before */
#chisiamo #slideshow::before {
    content: "" !important;
    position: absolute !important;
    top: 80px !important;
    left: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-left: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* alto destra → su .js-full-slider::before (rimpiazza il .cbck_72::before del portfolio) */
#chisiamo #slideshow .js-full-slider::before {
    content: "" !important;
    position: absolute !important;
    top: 80px !important;
    right: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-top: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-right: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* basso sinistra → su .colonnaarea::before */
#chisiamo #slideshow .colonnaarea::before {
    content: "" !important;
    position: absolute !important;
    bottom: 40px !important;
    left: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-left: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* basso destra → su .area::after (identico al portfolio) */
#chisiamo #slideshow > .col-sm-12.col-md-12.area::after {
    content: "" !important;
    position: absolute !important;
    bottom: 40px !important;
    right: clamp(20px, 5vw, 80px) !important;
    width: 22px !important;
    height: 22px !important;
    border-bottom: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    border-right: 1.5px solid rgba(244, 241, 234, 0.4) !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

/* tema light: mirino scuro */
html.vox-light #chisiamo #slideshow::before,
html.vox-light #chisiamo #slideshow .js-full-slider::before,
html.vox-light #chisiamo #slideshow .colonnaarea::before,
html.vox-light #chisiamo #slideshow > .col-sm-12.col-md-12.area::after {
    border-color: rgba(10, 13, 17, 0.4) !important;
}

/* --- desktop --- */
@media (min-width: 768px) {
    #chisiamo #slideshow h1 strong {
        font-size: clamp(4rem, 12vw, 9rem) !important;
    }
}

/* --- riduzione animazione --- */
@media (prefers-reduced-motion: reduce) {
    #chisiamo #slideshow::after {
        animation: none !important;
    }
}
/* ============================================================
   VOX — CHI SIAMO · INTRO con LOCANDINA (#intro-chisiamo)
   BLOCCO COMPLETO E AUTOSUFFICIENTE — sostituisce il precedente.
   Locandina a SINISTRA · credo a DESTRA · h4 + h3 + p impilati.
   ============================================================ */

#intro-chisiamo {
    background: #0A0D11 !important;
    padding: clamp(80px, 14vw, 160px) clamp(24px, 6vw, 80px) !important;
}
html.vox-light #intro-chisiamo {
    background: #F4F1EA !important;
}

/* reset wrapper CMS */
#intro-chisiamo .col-sm-12.col-md-12.area,
#intro-chisiamo .colonnaarea,
#intro-chisiamo .colonnaarea > .row,
#intro-chisiamo .colonnaarea > .row > .col-sm-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* --- credo: contenitore --- */
#intro-chisiamo .credo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;          /* h4 > h3 > p impilati */
}

/* --- occhiello "Il nostro credo" --- */
#intro-chisiamo .credo h4 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    white-space: nowrap !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin: 0 0 clamp(20px, 3vw, 30px) 0 !important;
    line-height: 1 !important;
}
#intro-chisiamo .credo h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}

/* --- claim --- */
#intro-chisiamo .credo h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 6.4vw, 3.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    margin: 0 !important;
    max-width: 22ch !important;
    white-space: normal !important;
}
html.vox-light #intro-chisiamo .credo h3 {
    color: #0A0D11 !important;
}
#intro-chisiamo .credo h3 strong {
    color: #F5C518 !important;
    font-weight: 800 !important;
}
#intro-chisiamo .credo h3::after {
    content: "" !important;
    display: block !important;
    width: 48px !important;
    height: 2px !important;
    background: #F5C518 !important;
    margin: clamp(18px, 2.4vw, 26px) 0 0 0 !important;
}

/* --- corpo --- */
#intro-chisiamo .credo p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 2.8vw, 1.15rem) !important;
    line-height: 1.75 !important;
    color: rgba(244, 241, 234, 0.65) !important;
    font-weight: 400 !important;
    max-width: 60ch !important;
    text-align: left !important;
    margin: clamp(18px, 2.4vw, 26px) 0 0 0 !important;
}
html.vox-light #intro-chisiamo .credo p {
    color: #4a4a4a !important;
}

/* --- locandina --- */
#intro-chisiamo .cont_sing {
    margin: 0 0 clamp(28px, 6vw, 48px) 0 !important;   /* spazio sotto solo da mobile */
}
#intro-chisiamo .cont_sing figure,
#intro-chisiamo .cont_sing picture {
    display: block !important;
    margin: 0 !important;
}
#intro-chisiamo .cont_sing img {
    display: block !important;
    width: 100% !important;
    max-width: 480px !important;       /* tetto poster */
    height: auto !important;
    border-radius: 2px !important;
    margin-bottom: clamp(28px, 6vw, 48px) !important;   /* stacco foto→testo, solo mobile */

}

/* --- DESKTOP ≥992px: due colonne, locandina sx / testo dx --- */
@media (min-width: 992px) {
    #intro-chisiamo .colonnaarea {
        display: grid !important;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
        gap: clamp(48px, 6vw, 100px) !important;
        align-items: center !important;
    }
    #intro-chisiamo .colonnaarea > .row {
        width: 100% !important;
        margin: 0 !important;
    }
    #intro-chisiamo .cont_sing {
        margin: 0 !important;          /* affiancata: niente spazio sotto */
    }

    #intro-chisiamo .cont_sing img {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   VOX — CHI SIAMO · FONDATORI (selettore [id^="fondatore"])
   Copre #fondatore (Erik) e futuri #fondatore-2 ecc. (Liam).
   Markup CMS: h2 (numero) · h3 (nome) · h4 (ruolo) · h5 (lead) ·
               h6 (titolo blocco) + p · p.cosafare (lista)
   Sequenza verticale completa. Contenuto SEMPRE visibile.
   Incollare in fondo a template.css.
   ============================================================ */

[id^="fondatore"] {
    background: #0A0D11 !important;
    padding: clamp(70px, 12vw, 130px) clamp(24px, 6vw, 80px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.10) !important;
}

html.vox-light [id^="fondatore"] {
    background: #F4F1EA !important;
    border-top-color: rgba(10, 13, 17, 0.10) !important;
}

[id^="fondatore"] .col-sm-12.col-md-12.area,
[id^="fondatore"] .colonnaarea,
[id^="fondatore"] .colonnaarea > .row,
[id^="fondatore"] .colonnaarea > .row > .col-sm-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* contenitore a larghezza piena (coerente col portfolio) */
[id^="fondatore"] .colonnaarea > .row > .col-sm-12 {
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- h2: numero fondatore --- */
[id^="fondatore"] h2 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* --- h3: nome --- */
[id^="fondatore"] h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.4rem, 9vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}

html.vox-light [id^="fondatore"] h3 {
    color: #0A0D11 !important;
}

/* --- h4: ruolo --- */
[id^="fondatore"] h4 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* --- h5: lead (testo introduttivo grande) --- */
[id^="fondatore"] h5 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.05rem, 2.9vw, 1.25rem) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #F4F1EA !important;
    text-transform: none !important;
    white-space: normal !important;
    margin: 0 0 clamp(36px, 6vw, 56px) 0 !important;
    padding: 0 0 clamp(36px, 6vw, 56px) 0 !important;
    border-bottom: 1px solid rgba(244, 241, 234, 0.12) !important;
    /* max-width: 75ch !important; */
}

html.vox-light [id^="fondatore"] h5 {
    color: #0A0D11 !important;
    border-bottom-color: rgba(10, 13, 17, 0.12) !important;
}

/* --- h6: titolo blocco (Il percorso / L'approccio / Cosa posso fare) --- */
[id^="fondatore"] h6 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin: clamp(32px, 5vw, 44px) 0 14px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1 !important;
}

[id^="fondatore"] h6::before {
    content: "" !important;
    width: 18px !important;
    height: 1px !important;
    background: #F5C518 !important;
    flex: none !important;
}

/* --- p: corpo dei blocchi --- */
[id^="fondatore"] p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.95rem, 2.5vw, 1.02rem) !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: rgba(244, 241, 234, 0.72) !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    /* max-width: 80ch !important; */
}

html.vox-light [id^="fondatore"] p {
    color: #4a4a4a !important;
}

/* spazio tra le righe interne separate da <br> */
[id^="fondatore"] p br {
    content: "" !important;
    display: block !important;
    margin-bottom: 10px !important;
}

/* --- p.cosafare: lista "Cosa posso fare per te" --- */
/* --- p.cosafare: voci come etichette/chip --- */
[id^="fondatore"] p.cosafare {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    border-left: none !important;
    background: none !important;
    padding: 0 !important;
    margin-top: 4px !important;
    line-height: normal !important;
}

[id^="fondatore"] p.cosafare span {
    display: inline-flex !important;
    align-items: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #F4F1EA !important;
    padding: 9px 16px !important;
    border: 1px solid rgba(245, 197, 24, 0.35) !important;
    background: rgba(245, 197, 24, 0.06) !important;
    border-radius: 2px !important;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

[id^="fondatore"] p.cosafare span:hover {
    background: rgba(245, 197, 24, 0.13) !important;
    border-color: #F5C518 !important;
    transform: translateY(-2px) !important;
}

/* tema light */
html.vox-light [id^="fondatore"] p.cosafare span {
    color: #0A0D11 !important;
    border-color: rgba(245, 197, 24, 0.5) !important;
    background: rgba(245, 197, 24, 0.10) !important;
}
/* trattino oro davanti a ogni voce: non possibile per riga via CSS,
   quindi diamo enfasi al blocco con il bordo oro a sinistra */

/* ============================================================
   DESKTOP — alternanza: Fondatore 02 testo allineato come 01,
   con possibilità di layout speculare se il markup avrà una classe.
   Per ora sequenza verticale centrata, leggibile.
   ============================================================ */
@media (min-width: 768px) {
    [id^="fondatore"] h3 {
        font-size: clamp(3rem, 6vw, 4.4rem) !important;
    }
}

/* ============================================================
   REVEAL OPZIONALE — additivo, non nasconde mai (richiede .vox-anim)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    [id^="fondatore"].vox-anim h3,
    [id^="fondatore"].vox-anim h5,
    [id^="fondatore"].vox-anim .col-sm-12 > * {
        /* lasciato come hook: attivo solo con .vox-anim sul section */
    }
}


/* ============================================================
   VOX — CHI SIAMO · GALLERIA FOTO (#foto-chisiamo)
   Markup CMS: .galleriapres > .col-sm-6.col-md-3 > a.foto-gallery
               > figure > picture > img + .mask-gallery (icona espandi)
   Griglia "contact sheet" cinematografica, hover oro, lightbox swipebox.
   Incollare in fondo a template.css.
   ============================================================ */

#foto-chisiamo {
    background: #0A0D11 !important;
    padding: clamp(68px, 13vw, 128px) clamp(20px, 5vw, 80px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    position: relative !important;
}

html.vox-light #foto-chisiamo {
    background: #F4F1EA !important;
    border-top-color: rgba(10, 13, 17, 0.12) !important;
}

/* --- reset wrapper --- */
#foto-chisiamo .col-sm-12.col-md-12.area,
#foto-chisiamo .col-sm-12.col-md-12.colonnaarea,
#foto-chisiamo .colonnaarea > .row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   EYEBROW + TITOLO opzionali
   Se nel CMS aggiungi un <h4> e/o <h3> sopra la galleria,
   verranno stilizzati come nelle altre sezioni. Se non ci sono,
   la galleria parte direttamente (nessuno spazio vuoto).
   ============================================================ */
#foto-chisiamo h4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    margin: 0 0 22px 0 !important;
    line-height: 1 !important;
}
#foto-chisiamo h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
    box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.16) !important;
}
#foto-chisiamo h4 strong {
    color: #F5C518 !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-size: inherit !important;
}
#foto-chisiamo h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 6.4vw, 3.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.022em !important;
    color: #F4F1EA !important;
    margin: 0 0 clamp(34px, 6vw, 56px) 0 !important;
    white-space: normal !important;
}
html.vox-light #foto-chisiamo h3 { color: #0A0D11 !important; }

/* ============================================================
   GRIGLIA — contact sheet 2 / 3 / 4 colonne
   ============================================================ */
#foto-chisiamo .galleriapres {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    background: rgba(244, 241, 234, 0.12) !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.vox-light #foto-chisiamo .galleriapres {
    background: rgba(10, 13, 17, 0.12) !important;
    border-color: rgba(10, 13, 17, 0.12) !important;
}

/* annulla le colonne bootstrap del CMS: ora è la grid a comandare */
#foto-chisiamo .galleriapres > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* --- cella / link --- */
#foto-chisiamo .galleriapres .foto-gallery {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0F141A !important;
    aspect-ratio: 16 / 9 !important;
    cursor: pointer !important;
}

/* --- figure / picture --- */
#foto-chisiamo .galleriapres figure,
#foto-chisiamo .galleriapres picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- immagine --- */
#foto-chisiamo .galleriapres img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
    transform: scale(1.02) !important;
    transition: transform 0.8s cubic-bezier(.16, 1, .3, 1),
                filter 0.5s ease !important;
}

#foto-chisiamo .galleriapres .foto-gallery:hover img {
    transform: scale(1.09) !important;
}

/* ============================================================
   OVERLAY HOVER + icona espandi (.mask-gallery)
   ============================================================ */
#foto-chisiamo .galleriapres .mask-gallery {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(
        to top,
        rgba(10, 13, 17, 0.55) 0%,
        rgba(10, 13, 17, 0.10) 60%,
        transparent 100%
    ) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

#foto-chisiamo .galleriapres .foto-gallery:hover .mask-gallery {
    opacity: 1 !important;
}

/* cerchietto oro con icona */
#foto-chisiamo .galleriapres .mask-gallery .material-symbols-rounded {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(245, 197, 24, 0.15) !important;
    border: 1.5px solid #F5C518 !important;
    color: #F5C518 !important;
    font-size: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: scale(0.8) !important;
    transition: transform 0.4s cubic-bezier(.16, 1, .3, 1),
                box-shadow 0.4s ease !important;
    box-shadow: 0 0 0 rgba(245, 197, 24, 0) !important;
}

#foto-chisiamo .galleriapres .foto-gallery:hover .mask-gallery .material-symbols-rounded {
    transform: scale(1) !important;
    box-shadow: 0 0 20px rgba(245, 197, 24, 0.35) !important;
}

/* tick angolo oro: appare in hover (alto-sx) */
#foto-chisiamo .galleriapres .foto-gallery::before {
    content: "" !important;
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 2px solid #F5C518 !important;
    border-left: 2px solid #F5C518 !important;
    z-index: 4 !important;
    opacity: 0 !important;
    transform: translate(4px, 4px) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
    pointer-events: none !important;
}

#foto-chisiamo .galleriapres .foto-gallery:hover::before {
    opacity: 0.9 !important;
    transform: translate(0, 0) !important;
}

/* ============================================================
   DESKTOP — 3 poi 4 colonne
   ============================================================ */
@media (min-width: 768px) {
    #foto-chisiamo .galleriapres {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1100px) {
    #foto-chisiamo .galleriapres {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================================
   RIDUZIONE ANIMAZIONE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #foto-chisiamo .galleriapres img {
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================
   VOX — ESCLUSIONI TEMA LIGHT
   Hero (#slideshow: portfolio + chi siamo) e galleria foto
   (#foto-chisiamo) restano SEMPRE scuri anche con html.vox-light:
   hanno foto di sfondo, schiarirli rovina l'effetto.

   Incollare in FONDO a template.css (DOPO tutti gli altri blocchi),
   così sovrascrive le regole light precedenti per stesso selettore.
   ============================================================ */

/* ---------- HERO PORTFOLIO ---------- */
html.vox-light #portfolio #slideshow .cbck_72 {
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.25) 0%,
        rgba(10, 13, 17, 0.50) 45%,
        rgba(10, 13, 17, 0.92) 100%
    ) !important;
}

html.vox-light #portfolio #slideshow h1 strong {
    color: #F4F1EA !important;
}

html.vox-light #portfolio #slideshow .row.centrale.ao_center p {
    color: rgba(244, 241, 234, 0.78) !important;
}

html.vox-light #portfolio #slideshow .row.progetti h4 {
    color: rgba(244, 241, 234, 0.85) !important;
    border-top-color: rgba(244, 241, 234, 0.18) !important;
}

/* mirini: tornano chiari */
html.vox-light #portfolio #slideshow::before,
html.vox-light #portfolio #slideshow .cbck_72::before,
html.vox-light #portfolio #slideshow .cbck_72::after,
html.vox-light #portfolio #slideshow > .col-sm-12.col-md-12.area::after {
    border-color: rgba(244, 241, 234, 0.4) !important;
}

/* ---------- HERO CHI SIAMO ---------- */
html.vox-light #chisiamo #slideshow .js-full-slider::after {
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.25) 0%,
        rgba(10, 13, 17, 0.50) 45%,
        rgba(10, 13, 17, 0.92) 100%
    ) !important;
}

html.vox-light #chisiamo #slideshow h1 strong {
    color: #F4F1EA !important;
}

html.vox-light #chisiamo #slideshow .row.centrale.ao_center p {
    color: rgba(244, 241, 234, 0.78) !important;
}

/* mirini: tornano chiari */
html.vox-light #chisiamo #slideshow::before,
html.vox-light #chisiamo #slideshow .js-full-slider::before,
html.vox-light #chisiamo #slideshow .colonnaarea::before,
html.vox-light #chisiamo #slideshow > .col-sm-12.col-md-12.area::after {
    border-color: rgba(244, 241, 234, 0.4) !important;
}

/* ---------- GALLERIA FOTO CHI SIAMO ---------- */
html.vox-light #foto-chisiamo {
    background: #0A0D11 !important;
    border-top-color: rgba(244, 241, 234, 0.12) !important;
}

html.vox-light #foto-chisiamo h3 {
    color: #F4F1EA !important;
}

html.vox-light #foto-chisiamo .galleriapres {
    background: rgba(244, 241, 234, 0.12) !important;
    border-color: rgba(244, 241, 234, 0.12) !important;
}

/* ============================================================
   VOX — POPUP CONTATTI (diaframma cinematografico)
   Da appendere in fondo a template.css.
   Il markup è iniettato da vox-contatti.js.
   Resta SEMPRE scuro, anche in tema light.
   ============================================================ */

/* ---------- OVERLAY ---------- */
.vox-contact-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(10, 13, 17, 0) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.45s ease, visibility 0s linear 0.5s,
                background 0.45s ease, backdrop-filter 0.45s ease !important;
}

.vox-contact-overlay.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: rgba(10, 13, 17, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity 0.45s ease, visibility 0s linear 0s,
                background 0.45s ease, backdrop-filter 0.45s ease !important;
}

/* grana pellicola */

/* @keyframes vox-grain già definito nel blocco hero — non ridichiararlo */

/* ---------- CARD: apertura a diaframma ---------- */
.vox-contact-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 460px !important;
    background: #0F141A !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    border-radius: 8px !important;
    padding: clamp(28px, 6vw, 44px) !important;
    overflow: hidden !important;
    clip-path: circle(0% at 50% 50%) !important;
    transform: scale(0.96) !important;
    transition: clip-path 0.6s cubic-bezier(.83, 0, .17, 1),
                transform 0.6s cubic-bezier(.83, 0, .17, 1) !important;
}

.vox-contact-overlay.is-open .vox-contact-card {
    clip-path: circle(150% at 50% 50%) !important;
    transform: scale(1) !important;
}

/* flash otturatore */
.vox-contact-card .vox-flash {
    position: absolute !important;
    inset: 0 !important;
    z-index: 6 !important;
    background: #F4F1EA !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.vox-contact-overlay.is-open .vox-contact-card .vox-flash {
    animation: vox-contact-flash 0.4s ease-out 0.18s forwards !important;
}
@keyframes vox-contact-flash {
    0%   { opacity: 0.14; }
    100% { opacity: 0; }
}

/* mirini agli angoli */
.vox-contact-card::before,
.vox-contact-card::after {
    content: "" !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}
.vox-contact-card::before {
    top: 14px !important;
    left: 14px !important;
    border-top: 1.5px solid rgba(245, 197, 24, 0.6) !important;
    border-left: 1.5px solid rgba(245, 197, 24, 0.6) !important;
}
.vox-contact-card::after {
    bottom: 14px !important;
    right: 14px !important;
    border-bottom: 1.5px solid rgba(245, 197, 24, 0.6) !important;
    border-right: 1.5px solid rgba(245, 197, 24, 0.6) !important;
}

/* ---------- HEADER ---------- */
.vox-contact-card .vox-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 26px !important;
}
.vox-contact-card .vox-rec {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
}
.vox-contact-card .vox-rec .rec-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #FF3B30 !important;
    flex: none !important;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.6) !important;
    animation: vox-rec-blink 1.2s steps(1) infinite !important;
}
/* @keyframes vox-rec-blink già definito nell'header — non ridichiararlo */
.vox-contact-card .vox-tc { color: #F5C518 !important; }

.vox-contact-card .vox-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(244, 241, 234, 0.2) !important;
    background: transparent !important;
    color: #F4F1EA !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}
.vox-contact-card .vox-close:hover {
    border-color: #F5C518 !important;
    color: #F5C518 !important;
    transform: rotate(90deg) !important;
}

/* ---------- TITOLO ---------- */
.vox-contact-card .vox-card-eyebrow {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}
.vox-contact-card .vox-card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    margin-bottom: 10px !important;
}
.vox-contact-card .vox-card-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    color: #9AA3B0 !important;
    margin-bottom: 30px !important;
    text-align: left !important;
}

/* ---------- RIGHE CONTATTO ---------- */
.vox-contact-card .vox-contact-list {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: rgba(244, 241, 234, 0.1) !important;
    border: 1px solid rgba(244, 241, 234, 0.1) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vox-contact-card .vox-contact-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 18px !important;
    background: #0F141A !important;
    text-decoration: none !important;
    position: relative !important;
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity 0.5s ease,
                transform 0.5s cubic-bezier(.16, 1, .3, 1),
                background 0.3s ease !important;
}
.vox-contact-overlay.is-open .vox-contact-row { opacity: 1 !important; transform: none !important; }
.vox-contact-overlay.is-open .vox-contact-row:nth-child(1) { transition-delay: 0.30s !important; }
.vox-contact-overlay.is-open .vox-contact-row:nth-child(2) { transition-delay: 0.38s !important; }
.vox-contact-overlay.is-open .vox-contact-row:nth-child(3) { transition-delay: 0.46s !important; }

.vox-contact-card .vox-contact-row:hover { background: #161C24 !important; }
.vox-contact-card .vox-contact-row::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #F5C518 !important;
    transform: scaleY(0) !important;
    transform-origin: center !important;
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1) !important;
}
.vox-contact-card .vox-contact-row:hover::before { transform: scaleY(1) !important; }

.vox-contact-card .vox-ico {
    width: 42px !important;
    height: 42px !important;
    flex: none !important;
    border-radius: 50% !important;
    border: 1px solid rgba(245, 197, 24, 0.35) !important;
    background: rgba(245, 197, 24, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
}
.vox-contact-card .vox-contact-row:hover .vox-ico {
    background: rgba(245, 197, 24, 0.14) !important;
    border-color: #F5C518 !important;
}
.vox-contact-card .vox-ico svg {
    width: 19px !important;
    height: 19px !important;
    stroke: #F5C518 !important;
    fill: none !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.vox-contact-card .vox-row-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
}
.vox-contact-card .vox-row-label {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
}
.vox-contact-card .vox-row-value {
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #F4F1EA !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    transition: color 0.25s ease !important;
    line-height: 1.3 !important;
}
.vox-contact-card .vox-contact-row:hover .vox-row-value { color: #F5C518 !important; }

.vox-contact-card .vox-arrow {
    margin-left: auto !important;
    flex: none !important;
    color: #9AA3B0 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}
.vox-contact-card .vox-contact-row:hover .vox-arrow {
    transform: translateX(4px) !important;
    color: #F5C518 !important;
}
.vox-contact-card .vox-arrow svg {
    width: 16px !important;
    height: 16px !important;
    stroke: #000 !important;
    fill: none !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* ---------- FOOTER ---------- */
.vox-contact-card .vox-card-foot {
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(244, 241, 234, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
    color: #9AA3B0 !important;
}
.vox-contact-card .vox-card-foot .pin {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #F5C518 !important;
    flex: none !important;
}

/* ---------- riduzione animazione ---------- */
@media (prefers-reduced-motion: reduce) {
    .vox-contact-card {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }
    .vox-contact-overlay::after { animation: none !important; }
    .vox-contact-card .vox-contact-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}



/* ============================================================
   VOX — BOTTONE "CONTATTACI" (header)
   Il link sta dentro span.prefix (nascosto dal tema): lo riveliamo,
   lo estraiamo dalla colonna lingua (.ch4) e lo rendiamo pill oro.
   Apre il popup via data-vox-contatti (già nel markup).
   Appendi in fondo a template.css.
   ============================================================ */

/* rivela il link: il tema nasconde span.prefix ovunque */
#header .ch4 .elem.pers1 .prefix {
    display: block !important;
}

/* estrai il blocco dalla colonna lingua e posizionalo alla sua sinistra */
#header .ch4 .elem.pers1 {
    position: fixed !important;
    top: 0 !important;
    right: 96px !important;          /* ← nudge se vuoi più/meno spazio dal selettore lingua */
    height: 80px !important;        /* = altezza header in cima */
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    z-index: 12 !important;
}

/* quando l'header si rimpicciolisce in scroll, ricentra */
#header.pos_fixed .ch4 .elem.pers1 {
    height: 80px !important;
}

/* reset del wrapper <p> ereditato dal tema */
#header .ch4 .elem.pers1 .prefix p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
}

/* ---------- IL BOTTONE ---------- */
#header .ch4 a[data-vox-contatti] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #F5C518 !important;
    color: #0A0D11 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    height: 50px !important;
    padding: 0 18px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}

#header .ch4 a[data-vox-contatti]:hover {
    background: #FFD633 !important;
    color: #0A0D11 !important;
    box-shadow: 0 0 18px rgba(245, 197, 24, 0.4) !important;
}

#header .ch4 a[data-vox-contatti]:active {
    transform: scale(0.96) !important;
}

/* pallino lampeggiante coerente con il REC */
#header .ch4 a[data-vox-contatti]::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #0A0D11 !important;
    flex: none !important;
    animation: vox-rec-blink 1.4s steps(1) infinite !important;
}
/* @keyframes vox-rec-blink già definito nel template — non ridichiararlo */

/* ---------- MOBILE: più compatto ---------- */
@media (max-width: 767px) {
    #header .ch4 .elem.pers1 {
        right: 82px !important;
    }
    #header .ch4 a[data-vox-contatti] {
        height: 36px !important;
        padding: 0 13px !important;
        font-size: 0.64rem !important;
        letter-spacing: 0.08em !important;
        width: 100%;
        height: 80px !important;
        display: flex !important;
        text-align: center !important;
        justify-content: center;
        font-size: 1rem !important;
    }
}


.vox-contact-card .vox-close:focus,
.vox-contact-card .vox-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* =========================================================
   VOX · SEZIONE RECENSIONI  (#recensioni)
   Append in fondo a template.css
   Scoped + !important per vincere specificità senza toccare le regole esistenti.
   --------------------------------------------------------
   GIALLO: --rc-yellow (#F5C518, come portfolio). Hover #FFD633.
   FONDO sezione: --rc-bg (grigio scuro, theme-aware col widget).
========================================================= */

#recensioni{
  /* token locali: la sezione è autosufficiente sul tema */
  --rc-yellow:#F5C518 !important;
  --rc-bg:#14181E !important;        /* << GRIGIO SCURO di fondo sezione */
  --rc-card:#1C222B !important;      /* card un filo più chiare, per staccare */
  --rc-line:rgba(255,255,255,.10) !important;
  --rc-text:#F4F1EA !important;
  --rc-muted:#9AA3B0 !important;
  --rc-ink:#0A0D11 !important;

  position:relative !important;
  overflow:hidden !important;
  background:var(--rc-bg) !important;
  padding:clamp(56px,12vw,120px) clamp(20px,5vw,80px) clamp(64px,12vw,120px) !important;
}
/* tema chiaro (widget: html.vox-light) — il fondo cambia, niente bianco pieno */
html.vox-light #recensioni{
  --rc-bg:#E9E5DB !important;
  --rc-card:#FFFFFF !important;
  --rc-line:rgba(10,13,17,.12) !important;
  --rc-text:#0A0D11 !important;
  --rc-muted:#5A636E !important;
}

/* azzera i padding bootstrap delle colonne per andare full-width */
#recensioni > .area,
#recensioni .colonnaarea{
  padding-left:0 !important;
  padding-right:0 !important;
  max-width:none !important;
}

/* ---------- viewfinder corners (iniettati via JS) ---------- */
#recensioni .vox-rec-vf{
  position:absolute !important;
  width:22px !important;height:22px !important;
  border-color:var(--rc-yellow) !important;
  opacity:.55 !important;z-index:2 !important;pointer-events:none !important;
}
#recensioni .vox-rec-vf.tl{top:18px !important;left:18px !important;border-top:2px solid !important;border-left:2px solid !important}
#recensioni .vox-rec-vf.tr{top:18px !important;right:18px !important;border-top:2px solid !important;border-right:2px solid !important}
#recensioni .vox-rec-vf.bl{bottom:18px !important;left:18px !important;border-bottom:2px solid !important;border-left:2px solid !important}
#recensioni .vox-rec-vf.br{bottom:18px !important;right:18px !important;border-bottom:2px solid !important;border-right:2px solid !important}

/* ======================= INTESTAZIONE ======================= */
#recensioni .titolo-recensioni{
  position:relative !important;z-index:3 !important;
  max-width:1180px !important;margin:0 auto 6px !important;
}
/* eyebrow Space Mono + dot REC lampeggiante */
#recensioni .titolo-recensioni h4{
  display:flex !important;align-items:center !important;gap:9px !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:12px !important;letter-spacing:.22em !important;text-transform:uppercase !important;
  color:var(--rc-yellow) !important;margin:0 0 14px !important;
}
#recensioni .titolo-recensioni h4 strong{font-weight:700 !important;color:inherit !important}
#recensioni .titolo-recensioni h4::before{
  content:"" !important;width:8px !important;height:8px !important;border-radius:50% !important;
  background:#FF3B30 !important;flex:0 0 auto !important;
  animation:voxRecBlink 1.4s steps(1) infinite !important;
}
@keyframes voxRecBlink{50%{opacity:.15}}

/* titolo Montserrat */
#recensioni .titolo-recensioni h3{
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  font-size:clamp(30px,8vw,58px) !important;line-height:1.02 !important;
  letter-spacing:-.02em !important;text-transform:uppercase !important;
  color:var(--rc-text) !important;margin:0 !important;
}
#recensioni .titolo-recensioni h3 strong{color:var(--rc-yellow) !important;font-weight:800 !important}

/* barra orizzontale gialla sotto al titolo */
#recensioni .titolo-recensioni h3::after{
  content:"" !important;display:block !important;
  width:64px !important;height:3px !important;border-radius:2px !important;
  background:var(--rc-yellow) !important;margin:20px 0 8px !important;
}
#recensioni .titolo-recensioni p{
  color:var(--rc-muted) !important;font-family:'Inter',sans-serif !important;
  font-size:15px !important;max-width:52ch !important;margin:0 !important;
}

/* ======================= CAROSELLO / CARD ======================= */
#recensioni .owl-carousel{position:relative !important;z-index:3 !important;margin-top:clamp(28px,6vw,44px) !important}

/* la CARD = div interno dell'item */
#recensioni .owl-item .item > div{
  position:relative !important;
  background:var(--rc-card) !important;
  border:1px solid var(--rc-line) !important;
  border-radius:14px !important;
  padding:42px 24px 24px !important;
  margin:0 9px !important;            /* gap tra card */
  height:100% !important;
  display:flex !important;flex-direction:column !important;
  overflow:hidden !important;
}
/* virgoletta signature */
#recensioni .owl-item .item > div::after{
  content:"\201C" !important;
  position:absolute !important;top:2px !important;right:18px !important;
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  font-size:96px !important;line-height:1 !important;
  color:var(--rc-yellow) !important;opacity:.16 !important;pointer-events:none !important;
}
/* stelle 5★ (decorative — per rimuoverle, elimina questo blocco) */
#recensioni .owl-item .item > div::before{
  content:"\2605\2605\2605\2605\2605" !important;
  color:var(--rc-yellow) !important;letter-spacing:3px !important;
  font-size:13px !important;line-height:1 !important;
  margin-bottom:16px !important;display:block !important;
}
/* testo recensione */
#recensioni .owl-item .item > div p{
  font-family:'Inter',sans-serif !important;font-weight:400 !important;
  font-size:clamp(15px,1.9vw,17px) !important;line-height:1.6 !important;
  color:var(--rc-text) !important;margin:0 !important;flex:1 1 auto !important;
}
/* footer: nome */
#recensioni .owl-item .item > div h4{
  font-family:'Inter',sans-serif !important;font-weight:600 !important;
  font-size:15px !important;color:var(--rc-text) !important;
  margin:22px 0 0 !important;padding-top:16px !important;
  border-top:1px solid var(--rc-line) !important;
}
/* footer: ruolo */
#recensioni .owl-item .item > div h5{
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.12em !important;text-transform:uppercase !important;
  color:var(--rc-muted) !important;margin:3px 0 0 !important;
}

/* nascondi i controlli nativi Owl + i div btns del CMS */
#recensioni .owl-nav,
#recensioni .owl-dots,
#recensioni .owlbtns{display:none !important}

/* ======================= BARRETTA (stile "Frame dai nostri set") =======================
   Layout:  01  ───────────────  08   ‹ ›
   contatore + barra avanzamento + totale + frecce, tutto su una riga.
   Iniettata via JS.
========================================================================================= */
#recensioni .vox-rec-foot{
  position:relative !important;z-index:3 !important;
  max-width:1180px !important;margin:clamp(28px,6vw,40px) auto 0 !important;
  display:flex !important;align-items:center !important;gap:16px !important;
}
/* contatore corrente / totale (Space Mono) */
#recensioni .vox-rec-count,
#recensioni .vox-rec-total{
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:13px !important;letter-spacing:.1em !important;
  flex:0 0 auto !important;line-height:1 !important;
}
#recensioni .vox-rec-count{color:var(--rc-yellow) !important}
#recensioni .vox-rec-total{color:var(--rc-muted) !important}

/* barra di avanzamento */
#recensioni .vox-rec-bar{
  flex:1 1 auto !important;height:2px !important;
  background:var(--rc-line) !important;border-radius:2px !important;overflow:hidden !important;
}
#recensioni .vox-rec-bar > i{
  display:block !important;height:100% !important;width:12%;
  background:var(--rc-yellow) !important;border-radius:2px !important;
  transition:width .35s ease !important;
}

/* frecce gialle — freccia come SVG background-image (ripetuta su hover) */
#recensioni .vox-rec-nav{display:flex !important;gap:10px !important;flex:0 0 auto !important;margin-left:6px !important}
#recensioni .vox-rec-arrow{
  width:44px !important;height:44px !important;border:none !important;border-radius:50% !important;
  background-color:var(--rc-yellow) !important;cursor:pointer !important;
  background-repeat:no-repeat !important;background-position:center !important;background-size:18px 18px !important;
  transition:box-shadow .25s ease,opacity .25s ease !important;
}
#recensioni .vox-rec-arrow.prev{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
#recensioni .vox-rec-arrow.next{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
#recensioni .vox-rec-arrow:hover.prev{
  box-shadow:0 0 0 4px rgba(245,197,24,.22) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
#recensioni .vox-rec-arrow:hover.next{
  box-shadow:0 0 0 4px rgba(245,197,24,.22) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0D11' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
#recensioni .vox-rec-arrow:focus-visible{outline:none !important;box-shadow:0 0 0 4px rgba(245,197,24,.45) !important}

/* ======================= ACCESSIBILITÀ ======================= */
@media(prefers-reduced-motion:reduce){
  #recensioni *{animation:none !important;transition:none !important}
}

nav#menulingueheader {
    display: none;
}


/* ===================== VOX · PUNTEGGI / COUNTER ===================== */
/* base = MOBILE FIRST */
#punteggi{
  position:relative !important;
  margin:0 !important;
  padding:clamp(48px,11vw,72px) clamp(20px,5vw,40px) !important;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(245,197,24,.07) 0%, transparent 58%),
    linear-gradient(180deg,#12171E 0%,#0F141A 100%) !important;
  border-top:1px solid rgba(244,241,234,.07) !important;
  border-bottom:1px solid rgba(244,241,234,.07) !important;
  overflow:hidden !important;
}
/* grana cinematografica */
#punteggi::before{
  content:"" !important;position:absolute !important;inset:0 !important;
  pointer-events:none !important;opacity:.07 !important;mix-blend-mode:overlay !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}

/* reset wrapper CMS */
#punteggi .area,
#punteggi .colonnaarea{
  position:relative !important;z-index:2 !important;padding:0 !important;
}
#punteggi .colonnaarea > .row{ margin:0 !important; }
#punteggi .colonnaarea > .row > [class*="col-"]{ padding:0 !important; }

/* ===== TESTATA ===== */
#punteggi .titolo{
  text-align:center !important;
  margin-bottom:clamp(34px,6vw,56px) !important;
}
#punteggi .titolo h4{
  display:inline-flex !important;align-items:center !important;gap:9px !important;
  margin:0 0 14px !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.34em !important;text-transform:uppercase !important;
  color:var(--op,#F5C518) !important;
}
#punteggi .titolo h4 strong{ font-weight:700 !important; }
/* dot REC lampeggiante */
#punteggi .titolo h4::before{
  content:"" !important;width:7px !important;height:7px !important;border-radius:50% !important;
  background:var(--rec,#FF3B30) !important;box-shadow:0 0 10px var(--rec,#FF3B30) !important;
  animation:vox-rec-blink 1.4s steps(1) infinite !important;
}
@keyframes vox-rec-blink{ 50%{ opacity:.2; } }
#punteggi .titolo h3{
  margin:0 !important;
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  font-size:clamp(24px,5.4vw,40px) !important;line-height:1.1 !important;
  letter-spacing:-.01em !important;color:var(--paper,#F4F1EA) !important;
}

/* ===== RIGA CARD (flex, ricostruisce le 3 colonne) ===== */
#punteggi .colonnaarea > .row:not(.titolo){
  display:flex !important;
  flex-direction:column !important;   /* mobile: stack */
  gap:14px !important;
}
#punteggi .colonnaarea > .row:not(.titolo) > [class*="col-"]{
  flex:1 1 auto !important;width:100% !important;
}

/* card */
#punteggi .vox-stat{
  position:relative !important;display:block !important;height:100% !important;
  padding:34px 22px !important;text-align:center !important;
  border:1px solid rgba(244,241,234,.1) !important;
  background:rgba(255,255,255,.028) !important;border-radius:2px !important;
  transition:border-color .4s ease, background .4s ease !important;
}
#punteggi .vox-stat:hover{
  border-color:rgba(245,197,24,.35) !important;background:rgba(255,255,255,.045) !important;
}

/* corner brackets */
#punteggi .vox-stat .br{
  position:absolute !important;width:15px !important;height:15px !important;
  border:2px solid var(--op,#F5C518) !important;opacity:.85 !important;
}
#punteggi .vox-stat .br.tl{top:10px !important;left:10px !important;border-right:0 !important;border-bottom:0 !important;}
#punteggi .vox-stat .br.tr{top:10px !important;right:10px !important;border-left:0 !important;border-bottom:0 !important;}
#punteggi .vox-stat .br.bl{bottom:10px !important;left:10px !important;border-right:0 !important;border-top:0 !important;}
#punteggi .vox-stat .br.br{bottom:10px !important;right:10px !important;border-left:0 !important;border-top:0 !important;}

/* numero */
#punteggi .vox-stat__num{
  display:flex !important;align-items:baseline !important;justify-content:center !important;
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  line-height:1 !important;color:var(--paper,#F4F1EA) !important;
  font-size:clamp(52px,16vw,82px) !important;letter-spacing:-.02em !important;
}
#punteggi .vox-stat__num .plus{
  color:var(--op,#F5C518) !important;font-size:.55em !important;
  margin-right:.04em !important;transform:translateY(-.18em) !important;
}
#punteggi .vox-stat__num .val{
  font-variant-numeric:tabular-nums !important;
  text-shadow:0 0 34px rgba(245,197,24,.2) !important;
}
#punteggi .vox-stat.is-counting .vox-stat__num .val{ color:var(--op,#F5C518) !important; }

/* label + codice */
#punteggi .vox-stat__label{
  margin-top:12px !important;
  font-family:'Inter',sans-serif !important;font-weight:600 !important;
  font-size:14px !important;color:var(--muted,#9AA3B0) !important;
  text-transform:uppercase !important;letter-spacing:.14em !important;
}
#punteggi .vox-stat__code{
  margin-top:6px !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:10px !important;letter-spacing:.2em !important;
  color:var(--gold,#f5c518) !important;opacity:.5 !important;
}

/* ===== da tablet in su: 3 colonne ===== */
@media (min-width:768px){
  #punteggi{ padding:clamp(80px,9vw,120px) clamp(40px,5vw,80px) !important; }
  #punteggi .colonnaarea > .row:not(.titolo){
    flex-direction:row !important;
    gap:clamp(20px,3vw,40px) !important;
    max-width:1100px !important;margin:0 auto !important;
  }
  #punteggi .colonnaarea > .row:not(.titolo) > [class*="col-"]{
    flex:1 1 0 !important;width:auto !important;min-width:0 !important;
  }
  #punteggi .vox-stat{ padding:clamp(32px,3.4vw,46px) clamp(20px,2vw,28px) !important; }
  #punteggi .vox-stat__num{ font-size:clamp(58px,6vw,86px) !important; }
}

/* ===== LIGHT THEME (additivo) ===== */
html.vox-light #punteggi{
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(245,197,24,.1) 0%, transparent 58%),
    linear-gradient(180deg,#FBF9F3 0%,#F1EDE3 100%) !important;
  border-top-color:rgba(10,13,17,.1) !important;border-bottom-color:rgba(10,13,17,.1) !important;
}
html.vox-light #punteggi .titolo h3{ color:var(--ink,#0A0D11) !important; }
#punteggi .titolo h3{
  margin:0 0 0.6em !important;
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  font-size:clamp(24px,5.4vw,40px) !important;line-height:1.1 !important;
  letter-spacing:-.01em !important;color:var(--paper,#F4F1EA) !important;
}
html.vox-light #punteggi .vox-stat{ border-color:rgba(10,13,17,.12) !important;background:rgba(10,13,17,.02) !important; }
html.vox-light #punteggi .vox-stat:hover{ border-color:rgba(245,197,24,.55) !important; }
html.vox-light #punteggi .vox-stat__num{ color:var(--ink,#0A0D11) !important; }
html.vox-light #punteggi .vox-stat__num .val{ text-shadow:0 0 28px rgba(245,197,24,.3) !important; }
html.vox-light #punteggi .vox-stat__label{ color:#5a626e !important; }
/* ===================================================================== */


/* voce menu "Contatti": il testo è dentro un <p data-vox-contatti>,
   lo uniformo alle altre voci facendogli ereditare lo stile dell'<a> */
#menu_header .navbar-nav-menu.liv1 > li > a > p[data-vox-contatti]{
    margin:0 !important;
    padding:0 !important;
    font-family:inherit !important;
    font-size:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    color:inherit !important;
    text-transform:inherit !important;
    text-align:left !important;
    background:transparent !important;
    display:inline !important;
    cursor:pointer !important;
}   






/* home hero: h1 occhiello come pagine interne */
#home #slideshow h1{
    font-family:'Space Mono',monospace !important;
    font-size:0.74rem !important;
    font-weight:700 !important;
    letter-spacing:0.22em !important;
    text-transform:uppercase !important;
    color:#F5C518 !important;
    line-height:1.5 !important;
    margin:0 0 18px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
}

/* lineetta oro prima dell'occhiello */
#home #slideshow h1::before{
    content:"" !important;
    width:34px !important;
    height:1px !important;
    background:#F5C518 !important;
    display:block !important;
}

/* annulla lo stile generico h1 strong sul claim home */
#home #slideshow h1 strong{
    font-family:'Space Mono',monospace !important;
    font-size:inherit !important;
    font-weight:700 !important;
    color:inherit !important;
}


/* =========================================================
   VOX · BOTTONI HOVER "TIMECODE" (06)
   Appendere in fondo a template.css.
   Il JS (11-vox-btn-timecode.js) aggiunge da solo la classe
   .vox-tc-btn ai .button--standard: qui scopiamo tutto su quella,
   così non tocchiamo gli altri bottoni del sito.
   ========================================================= */

.vox-tc-btn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* --- RETE DI SICUREZZA -----------------------------------
   .button--standard usa data-text: probabilmente ha gia' un
   hover su uno pseudo-elemento. Se vedi il testo "doppio" o due
   animazioni sovrapposte, DECOMMENTA il blocco qui sotto: spegne
   l'hover CMS solo sui bottoni col timecode.
--------------------------------------------------------- */
/*
.vox-tc-btn::before,
.vox-tc-btn::after{
  content:none !important;
  opacity:0 !important;
}
*/

/* etichetta: griglia 1x1 -> testo e timecode nella stessa cella,
   il bottone prende la larghezza del piu' largo (niente layout shift) */
.vox-tc-btn .vox-tc-label{
  display:grid !important;
  place-items:center !important;
  z-index:2 !important;
}

.vox-tc-btn .vox-tc-txt,
.vox-tc-btn .vox-tc{
  grid-area:1 / 1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  transition:transform .28s cubic-bezier(.65,0,.35,1),
             opacity .28s ease !important;
}

/* timecode: stato di riposo (nascosto, leggermente piu' in basso) */
.vox-tc-btn .vox-tc{
  font-family:'Space Mono', monospace !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  opacity:0 !important;
  transform:translateY(45%) !important;
  pointer-events:none !important;
}

/* HOVER / FOCUS: il testo sale ed esce, il timecode entra dal basso */
.vox-tc-btn:hover  .vox-tc-txt,
.vox-tc-btn:focus-visible .vox-tc-txt{
  opacity:0 !important;
  transform:translateY(-45%) !important;
}
.vox-tc-btn:hover  .vox-tc,
.vox-tc-btn:focus-visible .vox-tc{
  opacity:1 !important;
  transform:translateY(0) !important;
}

/* accessibilita': niente movimento se l'utente lo ha disattivato */
@media (prefers-reduced-motion:reduce){
  .vox-tc-btn .vox-tc-txt,
  .vox-tc-btn .vox-tc{ transition:none !important; }
}

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

FOOTER

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

/* ============================================================
   VOX FOOTER — "Sala buia"  ·  da APPENDERE in fondo a template.css
   Scope: #vox-footer · !important per vincere la specificità CMS
   Footer sempre scuro (ancora cinematografica), anche in vox-light.
   ============================================================ */

#vox-footer{
  position:relative !important;
  background:#0A0D11 !important;
  color:#F4F1EA !important;
  font-family:'Inter',sans-serif !important;
  padding:clamp(48px,7vw,104px) clamp(20px,5vw,80px) clamp(22px,3vw,34px) !important;
  overflow:hidden !important;
  border-top:1px solid rgba(245,197,24,.16) !important;
}

/* grana cinematografica */
#vox-footer::before{
  content:"" !important;
  position:absolute !important;inset:0 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  opacity:.05 !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* staffe da mirino agli angoli */
#vox-footer .vox-ftr-corner{
  position:absolute !important;width:22px !important;height:22px !important;
  border:0 solid rgba(245,197,24,.55) !important;
  z-index:2 !important;pointer-events:none !important;
}
#vox-footer .vox-ftr-corner.tl{top:18px !important;left:18px !important;border-top-width:2px !important;border-left-width:2px !important}
#vox-footer .vox-ftr-corner.tr{top:18px !important;right:18px !important;border-top-width:2px !important;border-right-width:2px !important}
#vox-footer .vox-ftr-corner.bl{bottom:18px !important;left:18px !important;border-bottom-width:2px !important;border-left-width:2px !important}
#vox-footer .vox-ftr-corner.br{bottom:18px !important;right:18px !important;border-bottom-width:2px !important;border-right-width:2px !important}

#vox-footer .vox-ftr-inner{position:relative !important;z-index:1 !important;max-width:1320px !important;margin:0 auto !important}

/* eyebrow tecnico */
#vox-footer .vox-ftr-eyebrow{
  display:block !important;
  font-family:'Space Mono',monospace !important;font-weight:700 !important;
  font-size:11px !important;letter-spacing:.22em !important;text-transform:uppercase !important;
  color:#F5C518 !important;margin-bottom:18px !important;
}

/* ---------- banda CTA ---------- */
#vox-footer .vox-ftr-cta{
  display:flex !important;align-items:flex-end !important;justify-content:space-between !important;
  gap:32px !important;flex-wrap:wrap !important;
  padding-bottom:clamp(36px,5vw,60px) !important;
  border-bottom:1px solid rgba(244,241,234,.10) !important;
  margin-bottom:clamp(40px,5vw,64px) !important;
}
#vox-footer .vox-ftr-cta-title{
  font-family:'Montserrat',sans-serif !important;font-weight:800 !important;
  font-size:clamp(28px,4.4vw,56px) !important;line-height:1.02 !important;
  letter-spacing:-.01em !important;color:#F4F1EA !important;max-width:14ch !important;
}
#vox-footer .vox-ftr-btn{
  display:inline-flex !important;align-items:center !important;gap:12px !important;
  background:#F5C518 !important;color:#0A0D11 !important;
  font-family:'Inter',sans-serif !important;font-weight:600 !important;font-size:15px !important;
  text-decoration:none !important;white-space:nowrap !important;
  padding:16px 26px !important;border-radius:999px !important;
  transition:background .25s ease,box-shadow .25s ease !important;
}
#vox-footer .vox-ftr-btn svg{width:18px !important;height:18px !important;display:block !important}
#vox-footer .vox-ftr-btn:hover{
  background:#FFD633 !important;
  box-shadow:0 0 0 1px rgba(245,197,24,.5),0 8px 34px rgba(245,197,24,.30) !important;
}

/* ---------- griglia colonne ---------- */
#vox-footer .vox-ftr-grid{
  display:grid !important;
  grid-template-columns: 1fr 1.1fr 1fr !important;
  gap:clamp(28px,4vw,56px) !important;
  align-items:start !important;
}

#vox-footer .vox-ftr-logo{height:38px !important;width:auto !important;display:block !important;margin-bottom:22px !important;filter:none !important}
#vox-footer .vox-ftr-tagline{
  color:#9AA3B0 !important;font-size:15px !important;line-height:1.6 !important;max-width:34ch !important;margin-bottom:26px !important;
}

/* REC + timecode */
#vox-footer .vox-ftr-rec{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  font-family:'Space Mono',monospace !important;
  font-weight:700 !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  color:#F4F1EA !important;
  display: none !important;
}
#vox-footer .vox-ftr-rec-dot{
  width:9px !important;height:9px !important;border-radius:50% !important;background:#FF3B30 !important;
  box-shadow:0 0 10px rgba(255,59,48,.8) !important;
  animation:voxFtrBlink 1.4s steps(1,end) infinite !important;
}
#vox-footer .vox-ftr-rec-label{color:#FF3B30 !important}
#vox-footer .vox-ftr-tc{color:#9AA3B0 !important;letter-spacing:.12em !important}
@keyframes voxFtrBlink{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* liste nav / contatti / social */
#vox-footer .vox-ftr-col ul{list-style:none !important;margin:0 !important;padding:0 !important}
#vox-footer .vox-ftr-col li{margin-bottom:13px !important;line-height:1.4 !important}
#vox-footer .vox-ftr-col a{
  color:#9AA3B0 !important;
  text-decoration:none !important;
  font-size:15px !important;
  transition:color .2s ease !important;
  font-family: var(--font-family-2);
  text-transform: math-auto;
  letter-spacing: 1px;
}
#vox-footer .vox-ftr-col a:hover{color:#F5C518 !important}
#vox-footer .vox-ftr-addr{color:#9AA3B0 !important;font-size:15px !important;line-height:1.5 !important}

/* ---------- barra inferiore ---------- */
#vox-footer .vox-ftr-bottom{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:18px !important;flex-wrap:wrap !important;
  margin-top:clamp(44px,5vw,72px) !important;
  padding-top:22px !important;
  border-top:1px solid rgba(244,241,234,.10) !important;
  font-family:'Space Mono',monospace !important;font-size:12px !important;letter-spacing:.04em !important;
  color:#6c7480 !important;
}
#vox-footer .vox-ftr-credits{color:#9AA3B0 !important}
#vox-footer .vox-ftr-legal{display:inline-flex !important;gap:18px !important}
#vox-footer .vox-ftr-legal a{color:#6c7480 !important;text-decoration:none !important;transition:color .2s ease !important}
#vox-footer .vox-ftr-legal a:hover{color:#F5C518 !important}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #vox-footer .vox-ftr-grid{grid-template-columns:1fr 1fr !important}
  #vox-footer .vox-ftr-brand{grid-column:1 / -1 !important}
}
@media (max-width:560px){
  #vox-footer .vox-ftr-grid{grid-template-columns:1fr !important}
  #vox-footer .vox-ftr-cta{flex-direction:column !important;align-items:flex-start !important;gap:24px !important}
  #vox-footer .vox-ftr-btn{width:100% !important;justify-content:center !important}
  #vox-footer .vox-ftr-bottom{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
}

@media (prefers-reduced-motion:reduce){
  #vox-footer .vox-ftr-rec-dot{animation:none !important}
}

nav.vox-ftr-col.vox-ftr-nav {
    display: none;
}
/* ============================================================
   VOX — INSTAWALL (#vox-instawall)
   Contenuto SEMPRE visibile: neutralizzo l'opacity:0 di .vox-anim
   scopando sull'id, senza toccare .vox-anim altrove.
   ============================================================ */

/* fix reveal: la sezione non deve mai restare trasparente */
#vox-instawall.vox-anim{
  opacity:1 !important;
  transform:none !important;
}

/* sfondo scuro coerente con le scene */
#vox-instawall{
  background:#0A0D11 !important;
  padding:clamp(48px,8vw,96px) clamp(20px,5vw,80px) !important;
}
/* la struttura CMS interna non deve stringere il contenuto */
#vox-instawall .area,
#vox-instawall .colonnaarea,
#vox-instawall > .area > .colonnaarea > .row,
#vox-instawall .col-sm-12{
  padding:0 !important;
  margin:0 !important;
}

/* header sezione */
#vox-instawall .iw-head{
  display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:16px !important;
  margin-bottom:clamp(20px,3vw,32px) !important;
}
#vox-instawall .iw-eyebrow{
  font-family:'Space Mono',monospace !important; font-weight:700 !important;
  font-size:clamp(11px,1.4vw,14px) !important; letter-spacing:.14em !important;
  color:#f5c518 !important; text-transform:uppercase !important;
  margin:0 !important;
}
#vox-instawall .iw-cta{
  font-family:'Inter',sans-serif !important; font-weight:600 !important;
  font-size:14px !important; line-height:1 !important;
  background:#f5c518 !important; color:#0A0D11 !important;
  padding:10px 20px !important; border-radius:2px !important;
  text-decoration:none !important; white-space:nowrap !important;
  transition:transform .25s ease !important;
}
#vox-instawall .iw-cta:hover{ transform:translateY(-2px) !important; color:#0A0D11 !important; }

/* griglia */
#vox-instawall .iw-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:clamp(6px,1vw,14px) !important;
}
@media (min-width:1024px){
  #vox-instawall .iw-grid{ grid-template-columns:repeat(3,1fr) !important; }
}

/* singola card */
#vox-instawall .iw-item{
  position:relative !important; display:block !important;
  aspect-ratio:1/1 !important; overflow:hidden !important;
  background:#12161B !important; border-radius:2px !important;
  margin:0 !important;
}
#vox-instawall .iw-item img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block !important; filter:grayscale(1) !important;
  transition:transform .6s cubic-bezier(.16,1,.3,1), filter .5s ease !important;
}
#vox-instawall .iw-item:hover img{
  transform:scale(1.06) !important; filter:grayscale(0) !important;
}
/* cornice oro all'hover */
#vox-instawall .iw-item::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  border:1px solid transparent !important;
  transition:border-color .3s ease !important; pointer-events:none !important;
}
#vox-instawall .iw-item:hover::after{ border-color:#f5c518 !important; }

/* badge REEL */
#vox-instawall .iw-badge{
  position:absolute !important; top:10px !important; right:10px !important;
  font-family:'Space Mono',monospace !important; font-size:10px !important;
  font-weight:700 !important; letter-spacing:.1em !important;
  color:#0A0D11 !important; background:#f5c518 !important;
  padding:3px 6px !important; border-radius:2px !important;
}

/* caption in overlay */
#vox-instawall .iw-cap{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  margin:0 !important; padding:14px !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important; line-height:1.4 !important; color:#F4F1EA !important;
  background:linear-gradient(to top,rgba(10,13,17,.92),transparent) !important;
  opacity:0 !important; transform:translateY(8px) !important;
  transition:opacity .35s ease, transform .35s ease !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important; overflow:hidden !important;
}
#vox-instawall .iw-item:hover .iw-cap{ opacity:1 !important; transform:none !important; }

#vox-instawall.iw-empty{ display:none !important; }



/* ============================================================
   VOX — BLOG · HERO (#blog #slideshow)
   Da appendere in fondo a template.css, PRIMA del blocco
   "VOX — BLOG INDEX (#blog-index)".
   Markup: section#slideshow (background-image inline, nessun .cbck_)
           > .area > .colonnaarea > .row.centrale.ao_left > .col-sm-12
             h1 (occhiello + <br> + <strong>Blog</strong>) · p
   Overlay e mirini generati via pseudo-elementi.
   L'hero resta SEMPRE scuro, anche in tema light.
   ============================================================ */

/* --- sezione fullscreen --- */
#blog #slideshow {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 100svh !important;
    background-color: #0A0D11 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* --- overlay cinematico dal basso (sostituisce .cbck_72) --- */
#blog #slideshow::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.30) 0%,
        rgba(10, 13, 17, 0.55) 45%,
        rgba(10, 13, 17, 0.93) 100%
    ) !important;
}

html.vox-light #blog #slideshow::after {
    background: linear-gradient(
        180deg,
        rgba(10, 13, 17, 0.30) 0%,
        rgba(10, 13, 17, 0.55) 45%,
        rgba(10, 13, 17, 0.93) 100%
    ) !important;
}

/* --- wrapper contenuto sopra l'overlay --- */
#blog #slideshow > .col-sm-12.col-md-12.area {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

#blog #slideshow .colonnaarea {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 100svh !important;
    padding: 0 clamp(20px, 5vw, 80px) !important;
    padding-bottom: clamp(80px, 14vh, 160px) !important;
}

/* --- row testi --- */
#blog #slideshow .row.centrale {
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#blog #slideshow .row.centrale > [class*="col-"] {
    padding: 0 !important;
}

/* ============================================================
   H1 — testo normale = occhiello · <strong> = titolone
   ============================================================ */

#blog #slideshow h1 {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
}

/* il <br> in contenitore flex creerebbe uno spazio fantasma */


/* lineetta oro sopra l'occhiello */
#blog #slideshow h1::before {
    content: "" !important;
    width: 34px !important;
    height: 1px !important;
    background: #F5C518 !important;
    display: block !important;
    flex: none !important;
}

/* "Blog" grande */
#blog #slideshow h1 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(3.4rem, 17vw, 9rem) !important;
    line-height: 0.88 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
    color: #F4F1EA !important;
    display: block !important;
}

html.vox-light #blog #slideshow h1 strong {
    color: #F4F1EA !important;
}

@media (min-width: 768px) {
    #blog #slideshow h1 strong {
        font-size: clamp(4rem, 12vw, 9rem) !important;
    }
}

/* ============================================================
   SOTTOTITOLO
   ============================================================ */

#blog #slideshow .row.centrale p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 3.4vw, 1.18rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: rgba(244, 241, 234, 0.78) !important;
    text-align: left !important;
    max-width: 50ch !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}

html.vox-light #blog #slideshow .row.centrale p {
    color: rgba(244, 241, 234, 0.78) !important;
}

/* ============================================================
   MIRINO — 4 angoli
   tl → section::before · tr → .area::before
   bl → .colonnaarea::before · br → .area::after
   ============================================================ */

#blog #slideshow::before,
#blog #slideshow > .col-sm-12.col-md-12.area::before,
#blog #slideshow > .col-sm-12.col-md-12.area::after,
#blog #slideshow .colonnaarea::before {
    content: "" !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    z-index: 10 !important;
    pointer-events: none !important;
    border-color: rgba(244, 241, 234, 0.4) !important;
    border-style: solid !important;
    border-width: 0 !important;
}

/* alto sinistra */
#blog #slideshow::before {
    top: 80px !important;
    left: clamp(20px, 5vw, 80px) !important;
    border-top-width: 1.5px !important;
    border-left-width: 1.5px !important;
}

/* alto destra */
#blog #slideshow > .col-sm-12.col-md-12.area::before {
    top: 80px !important;
    right: clamp(20px, 5vw, 80px) !important;
    border-top-width: 1.5px !important;
    border-right-width: 1.5px !important;
}

/* basso sinistra */
#blog #slideshow .colonnaarea::before {
    bottom: 40px !important;
    left: clamp(20px, 5vw, 80px) !important;
    border-bottom-width: 1.5px !important;
    border-left-width: 1.5px !important;
}

/* basso destra */
#blog #slideshow > .col-sm-12.col-md-12.area::after {
    bottom: 40px !important;
    right: clamp(20px, 5vw, 80px) !important;
    border-bottom-width: 1.5px !important;
    border-right-width: 1.5px !important;
}

/* tema light: il mirino resta chiaro (hero sempre scuro) */
html.vox-light #blog #slideshow::before,
html.vox-light #blog #slideshow > .col-sm-12.col-md-12.area::before,
html.vox-light #blog #slideshow > .col-sm-12.col-md-12.area::after,
html.vox-light #blog #slideshow .colonnaarea::before {
    border-color: rgba(244, 241, 234, 0.4) !important;
}

/* ============================================================
   RIGA META opzionale
   Se aggiungi una row con classe "meta" sotto ai testi:
   <h4>05 articoli · Torino / Piemonte</h4>
   ============================================================ */

#blog #slideshow .row.meta {
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
}

#blog #slideshow .row.meta h4 {
    display: inline-block !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(244, 241, 234, 0.85) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.18) !important;
    padding-top: 14px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ============================================================
   MOBILE — l'immagine di sfondo "fisso" su iOS fa scatti:
   la riporto a scroll sotto i 992px
   ============================================================ */

@media (max-width: 992px) {
    #blog #slideshow {
        background-attachment: scroll !important;
    }

    #blog #slideshow::before,
    #blog #slideshow > .col-sm-12.col-md-12.area::before {
        top: 100px !important;
    }
}

/* ============================================================
   VOX — BLOG · LISTA ARTICOLI (#blog #articoli)
   Da appendere in fondo a template.css, DOPO il blocco hero.
   Sostituisce il vecchio "vox-blog-index.css".

   Ogni <section id="articoli"> = una riga da 2 card.
   Le sezioni si ripetono: il contatore 01·02·03… scorre su tutte.

   Foto in formato CINEMASCOPE + effetto "monitor di macchina da presa":
   vignettatura, bracket del mirino, e all'hover la thumbnail
   "va in REC" (dot lampeggiante + timecode + reticolo di fuoco).
   Tutto CSS puro, nessun elemento aggiunto al markup.

   Struttura per card:
     section#articoli (.row)                      ← 2 card affiancate
       .col-md-6.area                             ← LA CARD
         .colonnaarea > .row
           .cont_sing  (figure>picture>img)       ← immagine
           .col-md-12  (h2 + p)                   ← testo
           .col-md-12  (a.linkinterno.button…)    ← link (facoltativo)

   NB: metti il div del link su OGNI card (nel markup di esempio
   la 2ª card ne è priva): serve a rendere l'intera card cliccabile.
   ============================================================ */

#blog {
    background: #0A0D11 !important;
    counter-reset: vox-art !important;
}
html.vox-light #blog {
    background: #F4F1EA !important;
}

/* ============================================================
   SEZIONE = riga da 2 card
   ============================================================ */

#blog #articoli {
    background: transparent !important;
    padding: clamp(10px, 1.4vw, 16px) clamp(20px, 5vw, 80px) !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(18px, 2.4vw, 28px) !important;
    width: 100% !important;
    max-width: 100% !important;
}

#blog #slideshow + #articoli {
    padding-top: clamp(40px, 7vw, 88px) !important;
}

@media (min-width: 900px) {
    #blog #articoli {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================
   CARD
   ============================================================ */

#blog #articoli > .area {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;

    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0F141A !important;
    border: 1px solid rgba(244, 241, 234, 0.12) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    counter-increment: vox-art !important;
    transition: background 0.35s ease, border-color 0.35s ease,
                transform 0.5s cubic-bezier(.16, 1, .3, 1),
                box-shadow 0.5s ease !important;
}

#blog #articoli > .area:hover {
    background: #161C24 !important;
    border-color: rgba(245, 197, 24, 0.35) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9) !important;
}

html.vox-light #blog #articoli > .area {
    background: #FFFFFF !important;
    border-color: rgba(10, 13, 17, 0.12) !important;
}
html.vox-light #blog #articoli > .area:hover {
    background: #FBF9F3 !important;
    border-color: rgba(245, 197, 24, 0.55) !important;
    box-shadow: 0 24px 48px -28px rgba(10, 13, 17, 0.25) !important;
}

/* linea oro che cresce in basso all'hover */
#blog #articoli > .area::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, #FFD633, #F5C518) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.5s cubic-bezier(.16, 1, .3, 1) !important;
    z-index: 6 !important;
}
#blog #articoli > .area:hover::after {
    transform: scaleX(1) !important;
}

/* catene di altezza: card a pari altezza, testo che spinge il link giù */
#blog #articoli > .area > .colonnaarea {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}
#blog #articoli .colonnaarea > .row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
}

/* ============================================================
   IMMAGINE — formato cinemascope + telaio da cinepresa
   ============================================================ */

#blog #articoli .cont_sing {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 2.35 / 1 !important;   /* CINEMASCOPE */
    background: #12161B !important;
    flex: none !important;
}

@media (max-width: 640px) {
    #blog #articoli .cont_sing {
        aspect-ratio: 16 / 9 !important;  /* mobile: non troppo stretto */
    }
}

#blog #articoli .cont_sing figure {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#blog #articoli .cont_sing picture {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#blog #articoli .cont_sing img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
    transform: scale(1.04) !important;
    filter: saturate(0.92) contrast(1.04) !important;
    transition: transform 0.9s cubic-bezier(.16, 1, .3, 1),
                filter 0.6s ease !important;
}

#blog #articoli > .area:hover .cont_sing img {
    transform: scale(1.12) !important;
    filter: saturate(1.06) contrast(1.02) !important;
}

/* --- VIGNETTATURA da obiettivo (picture::before, sopra la foto) --- */
#blog #articoli .cont_sing picture::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        radial-gradient(120% 130% at 50% 45%,
            transparent 52%, rgba(10, 13, 17, 0.55) 100%),
        linear-gradient(to top,
            rgba(10, 13, 17, 0.55) 0%, transparent 40%) !important;
}

/* --- BRACKET DEL MIRINO ai 4 angoli (cont_sing::before) ---
       4 layer a dimensione FISSA: restano quadrati a ogni proporzione */
#blog #articoli .cont_sing::before {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0.4 !important;
    transition: opacity 0.4s ease !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 15 V2 H15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 2 H18 V15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 5 V18 H15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M18 5 V18 H5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position: left top, right top, left bottom, right bottom !important;
    background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px !important;
}
#blog #articoli > .area:hover .cont_sing::before {
    opacity: 0.65 !important;
}

/* --- RETICOLO DI FUOCO al centro (picture::after) — appare in hover --- */
#blog #articoli .cont_sing picture::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transform: scale(1.25) !important;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.16, 1, .3, 1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 235 100' fill='none' stroke='%23F5C518' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M101 40 h-9 v9'/%3E%3Cpath d='M134 40 h9 v9'/%3E%3Cpath d='M101 60 h-9 v-9'/%3E%3Cpath d='M134 60 h9 v-9'/%3E%3C/svg%3E") !important;    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 66% 66% !important;
}
#blog #articoli > .area:hover .cont_sing picture::after {
    opacity: 0.85 !important;
    transform: scale(1) !important;
}

/* --- NUMERO progressivo 01·02·03… (cont_sing::after) — sempre visibile --- */
#blog #articoli .cont_sing::after {
    content: counter(vox-art, decimal-leading-zero) !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #F5C518 !important;
    background: rgba(10, 13, 17, 0.72) !important;
    border: 1px solid rgba(245, 197, 24, 0.35) !important;
    border-radius: 2px !important;
    padding: 5px 9px !important;
    line-height: 1 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* --- REC HUD in alto a destra (figure::before) — "va in REC" all'hover --- */
#blog #articoli .cont_sing figure::before {
    content: "\25CF REC" !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #FF3B30 !important;
    text-shadow: 0 0 8px rgba(255, 59, 48, 0.5) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}
#blog #articoli > .area:hover .cont_sing figure::before {
    opacity: 1 !important;
    animation: recBlink 1.2s steps(1) infinite !important;
}

/* --- TIMECODE in basso a sinistra (figure::after) — appare all'hover --- */
#blog #articoli .cont_sing figure::after {
    content: "00:00:00:00" !important;
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: rgba(244, 241, 234, 0.85) !important;
    opacity: 0 !important;
    transform: translateY(4px) !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
    pointer-events: none !important;
}
#blog #articoli > .area:hover .cont_sing figure::after {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ============================================================
   TESTO — padding solo sui blocchi non-immagine
   ============================================================ */

#blog #articoli .colonnaarea > .row > [class*="col-"]:not(.cont_sing) {
    padding-left: clamp(22px, 2.4vw, 30px) !important;
    padding-right: clamp(22px, 2.4vw, 30px) !important;
    width: 100% !important;
}

#blog #articoli .cont_sing + [class*="col-"] {
    flex: 1 1 auto !important;
    padding-top: clamp(24px, 2.6vw, 32px) !important;
    padding-bottom: 6px !important;
}

#blog #articoli h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    color: #F4F1EA !important;
    margin: 0 0 14px 0 !important;
    transition: color 0.3s ease !important;
}
html.vox-light #blog #articoli h2 { color: #0A0D11 !important; }
#blog #articoli > .area:hover h2 { color: #F5C518 !important; }

#blog #articoli p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    color: #9AA3B0 !important;
    text-align: left !important;
    margin: 0 !important;
}
html.vox-light #blog #articoli p { color: #6E6A66 !important; }

/* ============================================================
   LINK / BOTTONE
   Eredita già .button--standard (oro) + .vox-tc-btn (timecode).
   ============================================================ */

#blog #articoli .cont_sing + [class*="col-"] + [class*="col-"] {
    padding-top: 4px !important;
    padding-bottom: clamp(24px, 2.6vw, 32px) !important;
    margin-top: auto !important;
}

#blog #articoli a.linkinterno.button {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
}

/* l'intera card diventa cliccabile grazie al link */
#blog #articoli a.linkinterno::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 7 !important;
}
#blog #articoli a.linkinterno .vox-tc-label {
    position: relative !important;
    z-index: 8 !important;
}

@media (max-width: 640px) {
    #blog #articoli a.linkinterno.button {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   RIDUZIONE ANIMAZIONE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #blog #articoli > .area,
    #blog #articoli .cont_sing img,
    #blog #articoli .cont_sing picture::after {
        transition: none !important;
        transform: none !important;
    }
    #blog #articoli > .area:hover .cont_sing figure::before {
        animation: none !important;
    }
}


/* ============================================================
   VOX — ARTICOLO · HERO (#articolo #slideshow-articolo)
   Da appendere in fondo a template.css.
   Prima sezione della pagina articolo: SEMPRE scura, set cinepresa.

   Markup:
     section#slideshow-articolo (bg-image inline)
       .cbck_295            ← overlay nero (lo trasformo in gradiente)
       .area > .colonnaarea > .row.centrale.ao_left > .col-md-12
         h1: riga1 (brand) + riga2 (keyphrase) + <strong> (TITOLO)

   Decorazioni (CSS puro, nessun elemento aggiunto):
     · overlay a gradiente cinematografico
     · vignettatura da obiettivo
     · perforazioni pellicola 35mm sui due lati
     · bracket del mirino ai 4 angoli
   ============================================================ */

/* --- sezione: fullscreen ridotto, reference posizionamento --- */
#articolo #slideshow-articolo {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 80svh !important;
    background-color: #0A0D11 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ============================================================
   OVERLAY — QUALSIASI .cbck_* diventa gradiente cinematografico (scuro)
   ============================================================ */
#articolo #slideshow-articolo div[class^="cbck_"] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-color: transparent !important;
    background:
        radial-gradient(120% 120% at 70% 15%,
            rgba(10, 13, 17, 0.35) 0%, rgba(10, 13, 17, 0.78) 62%,
            rgba(10, 13, 17, 0.94) 100%),
        linear-gradient(180deg,
            rgba(10, 13, 17, 0.55) 0%, rgba(10, 13, 17, 0.35) 40%,
            rgba(10, 13, 17, 0.92) 100%) !important;
    pointer-events: none !important;
}
/* resta scuro anche in tema light */
html.vox-light #articolo #slideshow-articolo div[class^="cbck_"] {
    background:
        radial-gradient(120% 120% at 70% 15%,
            rgba(10, 13, 17, 0.35) 0%, rgba(10, 13, 17, 0.78) 62%,
            rgba(10, 13, 17, 0.94) 100%),
        linear-gradient(180deg,
            rgba(10, 13, 17, 0.55) 0%, rgba(10, 13, 17, 0.35) 40%,
            rgba(10, 13, 17, 0.92) 100%) !important;
}

/* ============================================================
   CONTENUTO
   ============================================================ */
#articolo #slideshow-articolo > .col-sm-12.col-md-12.area {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

#articolo #slideshow-articolo .colonnaarea {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 80svh !important;
    padding: 0 clamp(48px, 8vw, 120px) !important;   /* spazio per le perforazioni */
    padding-bottom: clamp(64px, 11vh, 130px) !important;
}

#articolo #slideshow-articolo .row.centrale {
    position: static !important;
    transform: none !important;
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#articolo #slideshow-articolo .row.centrale > [class*="col-"] {
    padding: 0 !important;
}

/* ============================================================
   H1 — riga1 (brand) + riga2 (keyphrase) = occhiello
        <strong> = TITOLO articolo
   ============================================================ */
#articolo #slideshow-articolo h1 {
    font-family: 'Space Mono', monospace !important;
    font-size: clamp(0.68rem, 1.5vw, 0.8rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    line-height: 1.9 !important;
    margin: 0 !important;
    display: block !important;
}

/* lineetta oro sopra l'occhiello */
#articolo #slideshow-articolo h1::before {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 1px !important;
    background: #F5C518 !important;
    margin-bottom: 16px !important;
}

/* TITOLO grande su riga propria */
#articolo #slideshow-articolo h1 strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(1.9rem, 4.6vw, 3.5rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #F4F1EA !important;
    display: block !important;
    margin-top: 20px !important;
    max-width: 22ch !important;
}
html.vox-light #articolo #slideshow-articolo h1 strong {
    color: #F4F1EA !important;
}

/* ============================================================
   RIDUZIONE ANIMAZIONE — (statico, nessuna animazione qui)
   ============================================================ */
/* ============================================================
   VOX — ARTICOLO · CORPO (#articolo)
   Da appendere in fondo a template.css, DOPO l'hero articolo.

   Copre, via pattern (valido anche per sezioni successive):
     · TESTO   → section[id^="articolo-"]   (#articolo-1, #articolo-2, …)
     · FOTO    → section[id^="foto-articolo"] (#foto-articolo-1, …)

   Testo in colonna di lettura stretta e centrata.
   Foto contenuta e AREOSA sui lati (non a tutta larghezza su desktop),
   trattata come un fotogramma di pellicola.
   ============================================================ */

/* pagina articolo: fondo scuro continuo (coerente "sala buia") */
#articolo {
    background: #0A0D11 !important;
}
html.vox-light #articolo {
    background: #F4F1EA !important;
}

/* ============================================================
   SEZIONI DI TESTO
   ============================================================ */

#articolo section[id^="articolo-"] {
    background: transparent !important;
    padding: clamp(30px, 4.5vw, 56px) clamp(20px, 5vw, 40px) !important;
    margin: 0 !important;
}

/* più aria tra hero e primo blocco di testo */
#articolo #slideshow-articolo + section[id^="articolo-"] {
    padding-top: clamp(48px, 7vw, 88px) !important;
}

/* colonna di lettura stretta e centrata */
#articolo section[id^="articolo-"] .col-sm-12.col-md-12.area,
#articolo section[id^="articolo-"] .colonnaarea {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}
#articolo section[id^="articolo-"] .colonnaarea > .row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
#articolo section[id^="articolo-"] .colonnaarea > .row > [class*="col-"] {
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* --- paragrafi --- */
#articolo section[id^="articolo-"] p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.04rem, 2.4vw, 1.15rem) !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: rgba(244, 241, 234, 0.82) !important;
    text-align: left !important;
    margin: 0 0 1.4em 0 !important;
}
html.vox-light #articolo section[id^="articolo-"] p {
    color: #3a3a3a !important;
}

/* --- LEAD: primo paragrafo del primo blocco, più grande --- */
#articolo #articolo-1 .colonnaarea > .row > [class*="col-"] > p:first-child {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.2rem, 3vw, 1.42rem) !important;
    line-height: 1.6 !important;
    color: #F4F1EA !important;
    margin-bottom: 1.6em !important;
}
html.vox-light #articolo #articolo-1 .colonnaarea > .row > [class*="col-"] > p:first-child {
    color: #0A0D11 !important;
}

/* --- sottotitoli H3, con accento oro sopra --- */
#articolo section[id^="articolo-"] h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.018em !important;
    text-transform: none !important;
    color: #F4F1EA !important;
    margin: clamp(38px, 5vw, 58px) 0 16px 0 !important;
}
html.vox-light #articolo section[id^="articolo-"] h3 {
    color: #0A0D11 !important;
}

#articolo section[id^="articolo-"] h3::before {
    content: "" !important;
    display: block !important;
    width: 38px !important;
    height: 2px !important;
    background: #F5C518 !important;
    margin-bottom: 20px !important;
}

/* grassetti dentro il testo */
#articolo section[id^="articolo-"] p strong {
    color: #F4F1EA !important;
    font-weight: 700 !important;
}
html.vox-light #articolo section[id^="articolo-"] p strong {
    color: #0A0D11 !important;
}

/* ============================================================
   SEZIONE FOTO — contenuta e areosa sui lati (desktop)
   ============================================================ */

#articolo section[id^="foto-articolo"] {
    background: transparent !important;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 40px) !important;
    margin: 0 !important;
}

/* contenitore: max-width < pagina → aria a sx e dx su PC */
#articolo section[id^="foto-articolo"] .col-sm-12.col-md-12.area,
#articolo section[id^="foto-articolo"] .colonnaarea {
    max-width: 1080px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}
#articolo section[id^="foto-articolo"] .colonnaarea > .row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
#articolo section[id^="foto-articolo"] .colonnaarea > .row > [class*="col-"] {
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* --- il fotogramma --- */
#articolo section[id^="foto-articolo"] .cont_sing {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(244, 241, 234, 0.14) !important;
    background: #12161B !important;
}
html.vox-light #articolo section[id^="foto-articolo"] .cont_sing {
    border-color: rgba(10, 13, 17, 0.14) !important;
}

#articolo section[id^="foto-articolo"] figure,
#articolo section[id^="foto-articolo"] picture {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#articolo section[id^="foto-articolo"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
    filter: none !important;
    transform: scale(1.02) !important;
    transition: transform 0.9s cubic-bezier(.16, 1, .3, 1) !important;
}
#articolo section[id^="foto-articolo"] .cont_sing:hover img {
    transform: scale(1.06) !important;
}

/* vignettatura da obiettivo */
#articolo section[id^="foto-articolo"] picture::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: radial-gradient(120% 130% at 50% 45%,
        transparent 66%, rgba(10, 13, 17, 0.28) 100%) !important;
}

/* bracket del mirino ai 4 angoli (dimensione fissa) */
#articolo section[id^="foto-articolo"] .cont_sing::before {
    content: "" !important;
    position: absolute !important;
    inset: 12px !important;
    z-index: 3 !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 15 V2 H15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 2 H18 V15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 5 V18 H15'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23F5C518' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M18 5 V18 H5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
    background-position: left top, right top, left bottom, right bottom !important;
    background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px !important;
}

/* HUD REC in alto a destra (statico, discreto) */
#articolo section[id^="foto-articolo"] figure::before {
    content: "\25CF REC" !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 4 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: #FF3B30 !important;
    text-shadow: 0 0 6px rgba(255, 59, 48, 0.35) !important;
    pointer-events: none !important;
}

/* etichetta STILL in basso a sinistra (statica, discreta) */
#articolo section[id^="foto-articolo"] figure::after {
    content: "FRAME · VOX" !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 14px !important;
    z-index: 4 !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    color: rgba(244, 241, 234, 0.7) !important;
    pointer-events: none !important;
}

/* ============================================================
   MOBILE — la foto può andare a tutta larghezza (già padded dalla sezione)
   ============================================================ */
@media (max-width: 640px) {
    #articolo section[id^="foto-articolo"] .cont_sing {
        aspect-ratio: 16 / 10 !important;
    }
}

/* ============================================================
   VOX — ARTICOLO · BARRE PELLICOLA su tutta la pagina
   Fisse a schermo, coprono l'intera altezza. Footer escluso.
   Sostituiscono le barre dell'hero (rimuovi quelle sul .cbck_).
   ============================================================ */

/* aggancio: pseudo-elementi su #contenitorepagina (solo pagina articolo) */
#articolo #contenitorepagina::before,
#articolo #contenitorepagina::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    z-index: 40 !important;          /* sopra i contenuti, sotto header/menu/popup */
    pointer-events: none !important;
    background-color: rgba(10, 13, 17, 0.55) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 44'%3E%3Crect x='9' y='13' width='12' height='18' rx='2.5' fill='%23F4F1EA' fill-opacity='0.16'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-y !important;
    background-position: center top !important;
    background-size: 30px 44px !important;
}

/* barra sinistra */
#articolo #contenitorepagina::before {
    left: 0 !important;
    border-right: 1px solid rgba(244, 241, 234, 0.08) !important;
}

/* barra destra */
#articolo #contenitorepagina::after {
    right: 0 !important;
    border-left: 1px solid rgba(244, 241, 234, 0.08) !important;
}

/* FOOTER ESCLUSO: lo alzo sopra le barre così le copre in fondo */
#articolo #vox-footer {
    position: relative !important;
    z-index: 50 !important;
}

/* mobile: barre più strette */
@media (max-width: 640px) {
    #articolo #contenitorepagina::before,
    #articolo #contenitorepagina::after {
        width: 18px !important;
        background-size: 18px 30px !important;
    }
}

/* ============================================================
   VOX — ARTICOLO · CTA DI CHIUSURA (#cta-articolo)
   Da appendere in fondo a template.css.
   Sezione finale dell'articolo: apre il popup contatti.

   Markup CMS (sezione con id "cta-articolo"):
     h4  → occhiello   (es. "— Ciak, si gira")
     h3  → titolo       (es. "Hai un progetto da girare?")
     p   → sottotitolo
     a.button (tipo "bottone" del CMS, testo "Contattaci", href "#")
        → viene agganciato al popup dal JS vox-cta-contatti.js
     [facoltativo] un secondo link di testo → Portfolio
   ============================================================ */

#cta-articolo {
    position: relative !important;
    background: #0F141A !important;
    padding: clamp(72px, 13vw, 132px) clamp(20px, 5vw, 40px) !important;
    border-top: 1px solid rgba(244, 241, 234, 0.12) !important;
    text-align: center !important;
    overflow: hidden !important;
}
html.vox-light #cta-articolo {
    background: #EFEAE0 !important;
    border-top-color: rgba(10, 13, 17, 0.12) !important;
}

/* alone oro dietro il titolo */
#cta-articolo::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: radial-gradient(70% 90% at 50% 0%,
        rgba(245, 197, 24, 0.12) 0%, transparent 60%) !important;
}

/* watermark VOX gigante dietro */
#cta-articolo::after {
    content: "VOX" !important;
    position: absolute !important;
    right: -3vw !important;
    bottom: -6vw !important;
    z-index: 0 !important;
    pointer-events: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(120px, 24vw, 340px) !important;
    line-height: 0.8 !important;
    color: rgba(244, 241, 234, 0.035) !important;
    user-select: none !important;
}
html.vox-light #cta-articolo::after {
    color: rgba(10, 13, 17, 0.04) !important;
}

/* wrapper */
#cta-articolo .col-sm-12.col-md-12.area,
#cta-articolo .colonnaarea {
    position: relative !important;
    z-index: 2 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}
#cta-articolo .colonnaarea > .row { padding: 0 !important; margin: 0 !important; width: 100% !important; }
#cta-articolo .colonnaarea > .row > [class*="col-"] { padding: 0 !important; width: 100% !important; }

/* occhiello */
#cta-articolo h4 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: #F5C518 !important;
    margin: 0 0 22px 0 !important;
    line-height: 1 !important;
    height: auto !important;
}
#cta-articolo h4::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #FF3B30 !important;
    box-shadow: 0 0 8px rgba(255, 59, 48, 0.6) !important;
    flex: none !important;
    animation: recBlink 1.3s steps(1) infinite !important;
}

/* titolo */
#cta-articolo h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 6.4vw, 3.6rem) !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.025em !important;
    text-transform: none !important;
    color: #F4F1EA !important;
    margin: 0 auto 20px !important;
    max-width: 18ch !important;
}
html.vox-light #cta-articolo h3 { color: #0A0D11 !important; }
#cta-articolo h3 strong { color: #F5C518 !important; font-weight: 800 !important; }

/* sottotitolo */
#cta-articolo p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 3vw, 1.15rem) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #9AA3B0 !important;
    text-align: center !important;
    max-width: 48ch !important;
    margin: 0 auto clamp(30px, 4vw, 40px) !important;
}
html.vox-light #cta-articolo p { color: #6E6A66 !important; }

/* --- BOTTONE (eredita .button--standard oro) --- */
#cta-articolo a.button.button--standard {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 62px !important;
    padding: 0 40px !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.14em !important;
    margin: 0 !important;
    border-radius: 6px !important;
}

/* --- link secondario "Portfolio" (facoltativo) --- */
#cta-articolo a:not(.button) {
    display: inline-block !important;
    margin-top: 22px !important;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #9AA3B0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(244, 241, 234, 0.2) !important;
    padding-bottom: 3px !important;
    transition: color 0.25s ease, border-color 0.25s ease !important;
}
#cta-articolo a:not(.button):hover {
    color: #F5C518 !important;
    border-color: #F5C518 !important;
}

/* ============================================================
   VOX — ARTICOLO · correzioni MOBILE
   ============================================================ */
@media (max-width: 640px) {

    /* 1 — hero più basso */
    #articolo #slideshow-articolo {
        min-height: 62svh !important;
    }
    #articolo #slideshow-articolo .colonnaarea {
        min-height: 62svh !important;
        padding-bottom: 0 !important;
    }

    /* 2 — il bottone "Contattaci" resta sopra le barre pellicola */
    #header .ch4 .elem.pers1 {
        z-index: 45 !important;   /* barre = 40 */
    }

    /* 3 — sezioni testo/foto: stesso respiro dai bordi dell'hero,
           così p, titoletti e foto non toccano le barre */
    #articolo section[id^="articolo-"],
    #articolo section[id^="foto-articolo"] {
        padding-left: clamp(34px, 11vw, 48px) !important;
        padding-right: clamp(34px, 11vw, 48px) !important;
    }

    /* la CTA segue lo stesso respiro */
    #cta-articolo {
        padding-left: clamp(34px, 11vw, 48px) !important;
        padding-right: clamp(34px, 11vw, 48px) !important;
    }

    #articolo header#header {z-index: 45;}
}