/* ===== Stile base — sito Redigo a pagine a blocchi ===== */

/* Cormorant Garamond — self-hosted (woff2, subset latin + latin-ext). Variable: un solo file per
   subset copre i pesi 400–600; l'italic (400) a parte. Sostituisce Google Fonts (GDPR: niente IP
   verso Google prima del consenso + una sola origine, niente CSS render-blocking esterno).
   unicode-range = il browser scarica solo il subset che gli serve. */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-latin.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-latinext.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-italic-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/cormorant-italic-latinext.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --clr-bg: #f2ece2;
    /* crema (sfondo pagina) */
    --clr-text: #1c2530;
    /* blu notte (testo su crema) */
    --clr-muted: #8a8172;
    /* grigio-caldo */
    --clr-dark: #1c2530;
    /* blu notte (sezioni scure) */
    --clr-cream: #f2ece2;
    --clr-on-dark: #f2ece2;
    /* testo su sezioni scure */
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --header-h: 90px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Link interni #anchor: la sezione target non resta nascosta sotto l'header fisso (90px) + scroll morbido */
html {
    scroll-padding-top: var(--header-h);
    scroll-behavior: smooth;
}

/* Ancora dei link interni (<a id> a inizio sezione): target di scroll a impatto zero sul layout */
.sec-anchor {
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Selezione del testo: standard dei siti a blocchi (guida §8.2) — testo bianco sul colore scuro
   del brand (qui blu notte, non nero: la palette di affidati non usa il nero). */
::selection {
    background: #1c2530;
    color: #ffffff;
}

/* Tipografia: tutto in Cormorant Garamond (titoli e testo/paragrafi/pulsanti) */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.titolo,
.titoletto {
    font-family: var(--font-serif);
    font-weight: 500;
}

p,
li,
span,
a,
small,
label,
blockquote,
figcaption,
td,
th,
button,
.btn,
input,
textarea,
select {
    font-family: var(--font-sans);
}

/* Occhiello (sopra il titolo) e sottotitolo (sotto il titolo): stile identico, Cormorant Garamond */
.occhiello,
.sottotitolo {
    font-family: var(--font-sans);
}

/* Titolo del blocco: h1 se e' il primo blocco-con-titolo della pagina, altrimenti h2.
   La classe .blocco-titolo garantisce resa identica a prescindere dal tag (base = default h2). */
.blocco-titolo {
    font-size: calc(2rem * var(--dim-titolo, 100) / 100);
    font-style: italic;
}

/* Margini blocco (enum MargineSuperiore/Inferiore): 'singolo' = pt-md-5 pt-3 / pb-md-5 pb-3 nativi
   Bootstrap (immutato); 'nessuno' = nessuna classe; 'doppio'/'triplo' = 2x/3x. A parita' di valore
   il gap e' identico sopra e sotto. */
.pt-blocco-2 {
    padding-top: 2rem;
}

.pb-blocco-2 {
    padding-bottom: 2rem;
}

.pt-blocco-3 {
    padding-top: 3rem;
}

.pb-blocco-3 {
    padding-bottom: 3rem;
}

.mt-blocco-2 {
    margin-top: 2rem;
}

.mb-blocco-2 {
    margin-bottom: 2rem;
}

.mt-blocco-3 {
    margin-top: 3rem;
}

.mb-blocco-3 {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .pt-blocco-2 {
        padding-top: 6rem;
    }

    .pb-blocco-2 {
        padding-bottom: 6rem;
    }

    .pt-blocco-3 {
        padding-top: 9rem;
    }

    .pb-blocco-3 {
        padding-bottom: 9rem;
    }

    .mt-blocco-2 {
        margin-top: 6rem;
    }

    .mb-blocco-2 {
        margin-bottom: 6rem;
    }

    .mt-blocco-3 {
        margin-top: 9rem;
    }

    .mb-blocco-3 {
        margin-bottom: 9rem;
    }
}

/* Blocco-Generico (padre + figli): titolo 2.8em (standard raddoppiato), occhiello/sottotitolo +20%
   rispetto al testo (base). font-size scalato da --dim-titolo/--dim-occhiello/--dim-sottotitolo (percentuale, default 100). */
.blocco-generico .blocco-titolo,
.blocco-generico h4 {
    font-size: calc(2.8em * var(--dim-titolo, 100) / 100);
    font-style: italic;
}

/* Heading dentro il contenuto RTE dei blocchi: scala tipografica coerente.
   Sta dopo la regola dei titoli blocco cosi', a pari specificita', vince su h2/h4 nel contenuto. */
.contenuto h1,
.contenuto h2,
.contenuto h3,
.contenuto h4,
.contenuto h5,
.contenuto h6 {
    line-height: 1.3;
    margin: 1.4em 0 0.4em;
}

.contenuto> :first-child {
    margin-top: 0;
}

.contenuto h1 {
    font-size: 1.5em;
}

.contenuto h2 {
    font-size: 1.3em;
}

.contenuto h3 {
    font-size: 1.15em;
}

.contenuto h4 {
    font-size: 1.05em;
}

.contenuto h5 {
    font-size: 1em;
}

.contenuto h6 {
    font-size: 0.9em;
}

/* Allegato del blocco: sotto il contenuto (i pulsanti Link stanno in .blocco-azioni) */
.blocco-allegato {
    margin-top: 1rem;
}

.blocco-allegato a {
    text-decoration: underline;
}

.blocco-generico .occhiello {
    font-size: 1.2em;
}

/* Sottotitolo: scalato da --dim-sottotitolo; interlinea ridotta (vicina, come il titolo), unitless
   cosi' resta coerente con la percentuale di dimensione. */
.blocco-generico .sottotitolo {
    font-size: calc(1.2em * var(--dim-sottotitolo, 100) / 100);
    line-height: 1.2;
}

/* Nessun margine inferiore residuo: l'ultimo sotto-blocco di contenuto (occhiello/titolo/sottotitolo/
   contenuto/azioni) non lascia spazio sotto. La spaziatura tra elementi presenti resta perche' e'
   il margine inferiore di quello sopra. */
.blocco-generico .container> :last-child,
.fullwidth-overlay-inner> :last-child,
.elenco-passi .np-txt> :last-child {
    margin-bottom: 0 !important;
}

/* Contenuto figlio allineato in basso: spinge il contenuto al fondo della col (equal-height),
   tutto flush senza margini tra gli elementi */
.blocco-generico .allinea-basso> :first-child {
    margin-top: auto;
}

.blocco-generico .allinea-basso>*,
.blocco-generico .allinea-basso *:last-child {
    margin-bottom: 0 !important;
}

/* Spaziatura di 1em prima del testo (contenuto) nei figli, solo se preceduto da altro */
.blocco-generico .testo-figlio:not(:first-child) {
    margin-top: 1em;
}

/* ===== Gallery orizzontale (scroll full-width, altezza fissa, lightbox) ===== */
.gallery-orizzontale {
    width: 100%;
    position: relative;
    /* contenitore per le frecce in overlay */
}

/* Slider Swiper (initGalleryTrack): scorrimento, trascinamento, loop e cursore li gestisce Swiper.
   Qui resta solo il margine laterale (con didascalie le immagini non toccano il bordo schermo);
   il gap tra le immagini e' spaceBetween nell'init. */
.gallery-track {
    padding: 0 0.75rem;
}

/* Le slide hanno larghezza propria (slidesPerView:'auto'): l'altezza la detta --gallery-h */
.gallery-track .swiper-wrapper {
    align-items: flex-start;
}

/* Senza didascalie: immagini edge-to-edge, prima foto full-width (nessun bordo bianco) */
.gallery-orizzontale.gallery-fullwidth .gallery-track {
    padding: 0;
}

.gallery-item {
    width: auto;
    /* slidesPerView:'auto': la larghezza viene dall'immagine (altezza fissa) */
    margin: 0;
    max-width: 90vw;
}

/* Altezza fissa dalla gallery (--gallery-h), larghezza proporzionale (auto) */
.gallery-img {
    height: var(--gallery-h, 60vh);
    width: auto;
    max-width: none;
    display: block;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
    /* evita il ghost-drag nativo dell'immagine */
}

/* Frecce di scorrimento: trasparenti, sopra le immagini, centrate sulla banda immagine */
.gallery-nav {
    position: absolute;
    top: calc(var(--gallery-h, 60vh) / 2);
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    /* leggibile anche su immagini chiare */
}

.gallery-nav-prev {
    left: 0.25rem;
}

.gallery-nav-next {
    right: 0.25rem;
}

/* Swiper disabilita i pulsanti a fine corsa: col loop non succede, ma con una sola immagine
   (watchOverflow) le frecce vanno nascoste invece di restare inerti. */
.gallery-nav.swiper-button-disabled,
.gallery-nav.swiper-button-lock {
    display: none;
}

/* La didascalia segue SEMPRE la larghezza dell'immagine sopra: width:0 non contribuisce
   alla larghezza della colonna (la fissa l'immagine), min-width:100% la fa poi combaciare. */
.gallery-caption {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    padding-top: 0.6rem;
}

.gallery-caption .occhiello {
    font-size: 0.85em;
    margin-bottom: 0.1rem;
}

.gallery-caption .titolo {
    font-size: 1.15em;
    margin-bottom: 0.1rem;
}

.gallery-caption .sottotitolo {
    font-size: 0.95em;
    margin-bottom: 0.2rem;
}

.gallery-caption .gallery-testo {
    font-size: 0.9em;
}

/* ===== Loader per-immagine (lazy loading): spinner sul contenitore finche' l'immagine carica ===== */
/* Wrapper stretto attorno all'immagine (nei punti dove il parent contiene anche testo): serve a
   centrare lo spinner esattamente sull'immagine e non sull'intero blocco. */
.lazy-img-holder {
    display: block;
    line-height: 0;
}

.img-loading {
    position: relative;
}

.img-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(90, 80, 55, 0.2);
    border-top-color: rgba(90, 80, 55, 0.7);
    border-radius: 50%;
    animation: img-spin 0.7s linear infinite;
    pointer-events: none;
    z-index: 1;
}

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

/* Lightbox (aperta al click su .gallery-img, gestita in main.js) */
body.gallery-lightbox-open {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.gallery-lightbox.is-open {
    display: flex;
}

/* Slider interno (Swiper): trascinamento, frecce e bullets. Largo quanto la foto puo' essere,
   cosi' frecce e bullets restano sopra l'immagine e non ai bordi dello schermo. */
.gallery-lightbox-swiper {
    width: min(92vw, 1400px);
    height: 92vh;
    position: relative;
}

.gallery-lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Spinner per-slide: la full-size e' generata on-demand, puo' metterci un attimo */
.gallery-lightbox-slide.is-loading::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gallery-lightbox-spin 0.8s linear infinite;
}

.gallery-lightbox-slide.is-loading .gallery-lightbox-img {
    opacity: 0;
}

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

/* Bullets: dentro la foto, in basso al centro */
.gallery-lightbox-bullets {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    pointer-events: none;
    /* i bullet restano cliccabili, la fascia no (chiuderebbe la lightbox) */
}

.gallery-lightbox-bullets .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    background: #fff;
    opacity: 0.45;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-lightbox-bullets .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.3);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem 1rem;
}

.gallery-lightbox-close {
    top: 1rem;
    right: 1.25rem;
    font-size: 2.5rem;
    z-index: 3;
}

/* Frecce dentro la foto (non ai bordi dello schermo): stanno nello slider, sopra le slide */
.gallery-lightbox-prev,
.gallery-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    z-index: 3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    /* leggibili anche su foto chiare */
}

/* Con una sola foto le frecce vanno nascoste invece che restare inerti */
.gallery-lightbox-prev.swiper-button-disabled,
.gallery-lightbox-next.swiper-button-disabled {
    display: none;
}

.gallery-lightbox-prev {
    left: 0.5rem;
}

.gallery-lightbox-next {
    right: 0.5rem;
}

/* Bottoni: override degli stili Bootstrap con il bottone solido del sito (nero/bianco, squadrato,
   niente radius/ombre/focus blu). Vale per .btn e per le varianti Bootstrap. style.css e' caricato
   dopo Bootstrap -> a parita' di specificita' vincono queste regole. */
.btn,
.btn-primary,
.btn-secondary,
.btn-dark,
.btn-light,
.btn-outline-primary,
.btn-outline-dark {
    display: inline-block;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0.7rem 2rem;
    font-family: var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: none;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-dark:hover,
.btn-dark:focus,
.btn-light:hover,
.btn-light:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background: #000;
    color: #fff;
    opacity: 0.85;
    box-shadow: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: default;
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(242, 236, 226, 0.94);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid rgba(28, 37, 48, 0.08);
}

.header-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--header-h);
    gap: 1rem;
}

.nav-group {
    list-style: none;
    display: flex;
    gap: 2.75rem;
    margin: 0;
    padding: 0;
}

.nav-right {
    justify-content: flex-end;
}

.nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--clr-text);
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.6;
}

/* Sezione che si sta guardando (scroll-spy in main.js): stessa resa della voce corrente di
   mingardo (guida §7.6c). L'header e' trasparente sull'hero e crema allo scroll: l'underline
   usa currentColor, quindi resta leggibile in entrambi gli stati. */
.nav-link.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-logo img {
    height: 22px;
    width: auto;
    display: block;
}

.lang-link {
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

/* hover solo sulla lingua non corrente: quella corrente e' uno <span>, non un link */
a.lang-link:hover {
    color: var(--clr-text);
}

/* Lingua corrente: non cliccabile, underline sempre visibile (il colore lo danno le regole
   per-stato dell'header: trasparente sull'hero, crema allo scroll, navy nel dropdown mobile) */
.lang-link.active {
    color: var(--clr-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: default;
}

.lang-sep {
    color: rgba(0, 0, 0, 0.25);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--clr-text);
    display: block;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Menu aperto: le tre barre diventano una X (la centrale sparisce, le altre due si incrociano).
   7px = meta' barra (1px) + gap (5px) + meta' barra (1px): le porta entrambe sulla mediana.
   Standard dei siti a blocchi (guida §7.15b). */
.site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== Blocchi ===== */
main {
    flex: 1 0 auto;
}

section.sec-auto {
    width: 100%;
}

/* ===== Footer ===== */
.site-footer {
    margin-top: auto;
    padding: 3rem 0 2rem;
    font-size: 0.9rem;
    color: var(--clr-text);
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .header-nav {
        grid-template-columns: 1fr auto;
        min-height: 0;
        padding: 16px 1rem;
        row-gap: 0;
        align-content: center;
    }

    .site-logo {
        order: 1;
        justify-content: flex-start;
    }

    .site-logo img {
        height: 18px;
    }

    .nav-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    /* Il menu mobile a tendina è gestito nel blocco @media (max-width: 991.98px) più sotto
       (.nav-right absolute dark dropdown). Le vecchie regole .nav-group/.nav-left/.nav-social
       (accordion di un header precedente) sono state rimosse: sovrascrivevano il padding del
       dropdown (.site-header.nav-open .nav-group{padding:1rem 0} vinceva su .nav-right) e
       schiacciavano le voci a sinistra. */
}

/* Video (mp4 o iframe Vimeo background) a tutta larghezza (Immagine-Fullwidth): copre la section (cover) */
.sec-fullwidth-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* Embed Vimeo inline (blocchi generici/custom-code): iframe responsivo 16:9 */
.video-vimeo-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-vimeo-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Immagine-Fullwidth: slide a tutta larghezza con overlay testo (singola o gallery) =====
   Slider Swiper (initGalleryTrack) con loop infinito, ma SENZA lightbox: le slide non hanno
   [data-gallery-full], quindi il click non apre l'ingrandimento. Ogni slide occupa la banda intera. */
.sec-fullwidth-gallery {
    width: 100%;
    position: relative;
}

.sec-fullwidth-gallery .gallery-track {
    padding: 0;
    /* niente margine laterale: le slide sono edge-to-edge */
    height: var(--gallery-h, 100vh);
}

.sec-fullwidth-gallery .swiper-wrapper {
    align-items: stretch;
}

.fullwidth-slide {
    width: 100%;
    height: var(--gallery-h, 100vh);
    position: relative;
    overflow: hidden;
    background-color: #f8f6f2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Overlay testuale sopra il media (z sopra il video/immagine), colonna flex per l'allineamento verticale */
.fullwidth-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.fullwidth-overlay-inner {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Scrim: pannello colorato semi-trasparente DIETRO il solo blocco di testo (colore = Sfondo del record,
   passato in --scrim). L'alpha sta sul ::before, così il testo sopra resta pieno/leggibile. */
.fullwidth-overlay-inner.has-scrim {
    position: relative;
}

.fullwidth-overlay-inner.has-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--scrim);
    opacity: 0.5;
    z-index: 0;
}

.fullwidth-overlay-inner.has-scrim>* {
    position: relative;
    z-index: 1;
}

.fullwidth-overlay a {
    color: inherit;
}

/* ============================================================================
   HOMEPAGE AFFIDATI — stili specifici (elenco numerato, sezione condizioni, footer)
   ============================================================================ */

/* Hero (Immagine-Fullwidth, titolo h1): standard raddoppiato a 4rem, scalato da DimTitolo; sottotitolo corsivo 2x */
.fullwidth-overlay h1.blocco-titolo {
    font-size: calc(4rem * var(--dim-titolo, 100) / 100);
    font-style: italic;
    line-height: 1.02;
}

/* Spazio verticale attorno al titolo fullwidth (prima e dopo), piu' arioso dei blocchi standard.
   Copre sia il titolo-blocco (h1) sia i titoli dei figli (div.titolo.blocco-titolo).
   !important perche' l'utility Bootstrap mb-2 sul titolo e' a sua volta !important. */
.fullwidth-overlay .blocco-titolo {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.fullwidth-overlay .sottotitolo {
    font-size: calc(1.2em * var(--dim-sottotitolo, 100) / 100);
    font-style: normal;
    /* default non corsivo, come negli altri blocchi; forzabile via TipografiaSottoTitolo */
    line-height: 1.15;
}

/* Pulsanti dei blocchi (Link / Link 2), skin dal catalogo psbottoneskin (classe CSS = campo Classe) */
.blocco-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* AllineaLinkAllegato: il contenitore e' flex, quindi le classi text-* (text-align) non
   spostano i pulsanti -> mappa l'allineamento orizzontale su justify-content. */
.blocco-azioni.text-center {
    justify-content: center;
}

.blocco-azioni.text-end {
    justify-content: flex-end;
}

.btn-blocco {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid currentColor;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Skin "scuro": sfondo e bordo #06151C, testo bianco */
.btn-skin-scuro {
    background: #06151c;
    border-color: #06151c;
    color: #ffffff;
}

.btn-skin-scuro:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #06151c;
}

/* Skin "bianco": sfondo trasparente, testo e bordo bianchi */
.btn-skin-bianco {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
}

.btn-skin-bianco:hover {
    background: #ffffff;
    color: #06151c;
}

/* Blocco-Generico con immagine a lato (PosizioneImmagine sinistra/destra): la colonna immagine
   riempie l'altezza della riga (pari al pannello testo), immagine in cover, niente margine sotto
   (elimina lo spazio del colore di sfondo sotto l'immagine). Scoped alla riga immagine-a-lato
   (.align-items-start), NON tocca le immagini impilate a piena larghezza. */
.blocco-generico .row.align-items-start {
    align-items: stretch !important;
    /* vince su Bootstrap .align-items-start (flex-start !important) */
}

/* La colonna immagine si stira all'altezza della riga (= pannello testo); l'immagine, fuori dal
   flusso (absolute), riempie la colonna in cover senza dettarne l'altezza. */
.blocco-generico .row.align-items-start>[class*="col-"] {
    position: relative;
    min-height: 280px;
}

.blocco-generico .row.align-items-start .lazy-img-holder {
    display: block;
    margin-bottom: 0;
    overflow: hidden;
}

.blocco-generico .row.align-items-start .lazy-img-holder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spazio tra immagine e testo (immagine a lato), ~5x il gutter di default. Padding sul lato interno
   della colonna testo (dentro la colonna: niente overflow). Solo da desktop; su mobile le colonne
   impilano. Gestisce sia immagine a sinistra sia a destra. */
@media (min-width: 768px) {
    .blocco-generico .row.align-items-start>[class*="col-"]:has(.lazy-img-holder)+[class*="col-"] {
        padding-left: 5rem;
    }

    .blocco-generico .row.align-items-start>[class*="col-"]:has(+ [class*="col-"] .lazy-img-holder) {
        padding-right: 5rem;
    }
}

/* ===== Blocco con immagine a lato (blocchi figlio come elenco o card) =====
   Le dimensioni/margini del contenuto (titolo/sottotitolo) NON dipendono da StileFigli: sono uniformi
   e si regolano coi campi Dim*. Cosi' passare da Card a Elenco non cambia il resto del contenuto. */

/* Immagine flush (margini sezione rimossi): il margine sopra/sotto resta nella colonna testo.
   Scoped alla riga immagine-a-lato (non a StileFigli) → uguale per Card ed Elenco. */
@media (min-width: 768px) {
    .blocco-generico .row.align-items-start>[class*="col-"]:not(:has(.lazy-img-holder)) {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Elenco numerato "passi" (I/II/III) usato nel Contenuto RTE dei blocchi scuri
   (Between Land and Sea / The forms of the evening). Nessun pallino, divisori sottili. */
.elenco-passi {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.elenco-passi li {
    display: flex;
    gap: 1.5rem;
    padding: 1.05rem 0;
    border-top: 1px solid rgba(242, 236, 226, 0.22);
    align-items: baseline;
    /* numero (occhiello) allineato alla baseline del titolo */
}

.elenco-passi li:last-child {
    border-bottom: 1px solid rgba(242, 236, 226, 0.22);
}

.elenco-passi .np-num {
    flex: 0 0 auto;
    min-width: 2.2rem;
    font-size: 1.25rem;
    opacity: 0.65;
    letter-spacing: 0.02em;
}

.elenco-passi .np-txt {
    font-size: 1.05rem;
    line-height: 1.5;
}

.elenco-passi .np-txt strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
    font-size: calc(1.5rem * var(--dim-titolo, 100) / 100);
    font-style: italic;
}

/* Occhiello del figlio nell'elenco: SOPRA il titolo, piccolo (non è il numero) */
.elenco-passi .np-occhiello {
    font-size: calc(0.8rem * var(--dim-occhiello, 100) / 100);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.25rem;
}

/* Marcatore automatico (non dai campi) secondo lo stile: romani / arabi / punto */
.elenco-passi.elenco-romani,
.elenco-passi.elenco-arabi {
    counter-reset: elpasso;
}

.elenco-passi.elenco-romani li,
.elenco-passi.elenco-arabi li {
    counter-increment: elpasso;
}

.elenco-passi.elenco-romani .np-num::before {
    content: counter(elpasso, upper-roman) ".";
}

.elenco-passi.elenco-arabi .np-num::before {
    content: counter(elpasso, decimal) ".";
}

.elenco-passi.elenco-punti .np-num::before {
    content: "\2022";
    font-size: 1.4em;
    line-height: 1;
}

/* Elenco semplice (senza numeri ne' punti): nessun marcatore, testo a filo */
.elenco-passi.elenco .np-num {
    display: none;
}

/* Figlio a card con testo sovrapposto all'immagine (LayoutFigli titoli-sovrapp / tutto-sovrapp).
   Il testo si sovrappone all'immagine con uno scrim per leggibilita'; allineamento verticale dal figlio
   (justify-content sulla colonna flex). Il colore testo eredita dal figlio/blocco. */
.figlio-overlay {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* riempie l'altezza della col (righe equal-height); l'altezza la detta il testo */
}

.figlio-overlay .lazy-img-holder {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0 !important;
    /* vince su .mb-2 (Bootstrap !important): immagine a filo, cover */
    z-index: 0;
}

.figlio-overlay .lazy-img-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.figlio-overlay-text {
    position: relative;
    /* in flusso: detta l'altezza del blocco (niente clipping del testo) */
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.figlio-overlay-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

.figlio-overlay-text>* {
    position: relative;
    z-index: 1;
}

/* Cards "The experiences": occhiello (numero romano) più marcato sopra il titolo card */
.blocco-generico .occhiello {
    font-size: calc(1.15rem * var(--dim-occhiello, 100) / 100);
    letter-spacing: 0.04em;
    opacity: 0.7;
}

/* Sezione "Before the encounter" (Custom-Code via template CustomCode/): due colonne. Sinistra =
   calendario (Settimana/Weekend) + Gift card con pulsante; destra = condizioni (key | valore). */
.home-before {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
}

.home-before .hb-col-label {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 1.25rem;
}

/* Calendario: due voci affiancate, ognuna label (Settimana/Weekend) + giorno (corsivo) + orario */
.home-cal {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 3rem;
    text-align: left;
    margin: 0 0 2rem;
}

.home-cal .hc-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 0.6rem;
}

.home-cal .hc-day {
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.home-cal .hc-when {
    font-size: 0.95rem;
    opacity: 0.7;
}

/* Gift card */
.home-gift {
    padding: 1.6rem;
    border: 1px solid rgba(28, 37, 48, 0.2);
    border-radius: 24px;
}

.home-gift .hg-title {
    font-size: 1.3rem;
    font-style: italic;
    margin-bottom: 0.4rem;
}

.home-gift p {
    opacity: 0.8;
    margin: 0 0 1.2rem;
}

/* Condizioni: una riga per voce, key a sinistra + valore (titolo + descrizione) a destra */
.home-cond {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-cond li {
    display: grid;
    grid-template-columns: 1fr 2.3fr;
    gap: 1.5rem;
    align-items: center;
    /* key centrata verticalmente rispetto al valore a destra */
    padding: 0.9rem 0;
    border-top: 1px solid rgba(28, 37, 48, 0.16);
}

.home-cond li:last-child {
    border-bottom: 1px solid rgba(28, 37, 48, 0.16);
}

.home-cond .hc-key {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #06151C;
    /* nero (brand) a piena opacita' */
}

.home-cond .hc-val strong {
    display: block;
    font-weight: 400;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}

.home-cond .hc-val span {
    display: block;
    opacity: 0.7;
    font-size: 0.98rem;
}

@media (max-width: 767.98px) {
    .home-before {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* I due giorni (Settimana/Weekend) restano AFFIANCATI anche su mobile */
    .home-cal {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .home-cond li {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}

/* ===== Footer scuro (blu notte) — override per la homepage Affidati ===== */
.site-footer {
    background: var(--clr-dark);
    color: var(--clr-on-dark);
    padding: 4rem 0 1.5rem;
}

.site-footer a {
    color: var(--clr-on-dark);
}

.site-footer .footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(242, 236, 226, 0.16);
}

.site-footer .footer-col-title {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 1rem;
}

.site-footer .footer-col p {
    margin: 0 0 0.4rem;
    line-height: 1.7;
}

.site-footer .footer-col a {
    display: block;
    opacity: 0.85;
    padding: 0.15rem 0;
}

.site-footer .footer-col a:hover {
    opacity: 1;
}

.site-footer .footer-logo {
    height: 51px;
    width: auto;
    margin-bottom: 1rem;
}

.site-footer .footer-end {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.5rem;
    font-size: 0.72rem;
    opacity: 0.6;
}

@media (max-width: 767.98px) {
    .site-footer .footer-cols {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .site-footer .footer-end {
        flex-direction: column;
    }
}

/* ===== Header Affidati: trasparente sopra l'hero, crema solido allo scroll ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition: background 0.3s ease, border-color 0.3s ease;
}

body.header-solid {
    padding-top: var(--header-h);
}

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Switch lingua ancorato al bordo destro, staccato dal gruppo nav */
.header-nav .nav-right .header-lang {
    margin-left: 1rem;
}

.site-logo {
    justify-content: flex-start;
}

.site-logo img {
    height: 39px;
    width: auto;
    display: block;
}

.site-logo .logo-dark {
    display: none;
}

.nav-right {
    align-items: center;
    gap: 2rem;
}

.site-header .nav-link,
.site-header .site-logo {
    color: var(--clr-on-dark);
}

/* Testo header in maiuscolo */
.header-nav .nav-link,
.header-nav .nav-cta {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

.site-header .lang-link {
    color: rgba(242, 236, 226, 0.6);
}

.site-header .lang-link.active {
    color: var(--clr-on-dark);
}

.site-header .lang-sep {
    color: rgba(242, 236, 226, 0.35);
}

.nav-cta {
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-cta:hover {
    background: #ffffff;
    color: var(--clr-dark);
}

/* stato "scrolled": header solido crema, testo blu notte, logo scuro */
.site-header.scrolled {
    background: rgba(242, 236, 226, 0.97);
    border-bottom-color: rgba(28, 37, 48, 0.1);
    backdrop-filter: saturate(180%) blur(6px);
}

.site-header.scrolled .nav-link,
.site-header.scrolled .site-logo {
    color: var(--clr-text);
}

.site-header.scrolled .nav-cta {
    color: var(--clr-text);
    border-color: var(--clr-text);
}

.site-header.scrolled .logo-light {
    display: none;
}

.site-header.scrolled .logo-dark {
    display: block;
}

.site-header.scrolled .lang-link {
    color: var(--clr-muted);
}

.site-header.scrolled .lang-link.active {
    color: var(--clr-text);
}

.site-header.scrolled .lang-sep {
    color: rgba(28, 37, 48, 0.25);
}

.site-header.scrolled .nav-cta:hover {
    background: var(--clr-dark);
    color: var(--clr-on-dark);
}

/* Mobile: burger + menu a tendina scuro */
@media (max-width: 991.98px) {
    .nav-toggle {
        display: flex;
        order: 2;
        z-index: 2;
    }

    .nav-toggle span {
        background: var(--clr-on-dark);
    }

    .site-header.scrolled .nav-toggle span {
        background: var(--clr-text);
    }

    .header-nav {
        position: relative;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .site-logo img {
        height: 27px;
    }

    .nav-right {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        background: rgba(28, 37, 48, 0.98);
        padding: 1.5rem;
        display: none;
    }

    .site-header.nav-open .nav-right {
        display: flex;
    }

    .site-header.nav-open .nav-link,
    .site-header.nav-open .nav-cta,
    .site-header.nav-open .lang-link.active {
        color: var(--clr-on-dark);
    }

    /* Dropdown mobile: sempre sfondo navy → la CTA deve avere bordo/testo CHIARI anche quando
       l'header è .scrolled (altrimenti .scrolled .nav-cta mette bordo navy = invisibile su navy). */
    .site-header.nav-open .nav-cta {
        display: inline-block;
        color: var(--clr-on-dark);
        border-color: var(--clr-on-dark);
    }

    .site-header.nav-open .nav-cta:hover {
        background: var(--clr-on-dark);
        color: var(--clr-dark);
    }
}

/* ============================================================================
   Griglia figli con CAMPI OMOLOGHI ALLINEATI tra card (CSS subgrid)
   AllineaFigliGriglia = 'omogeneo-*'. Ogni campo (occhiello/titolo/sottotitolo/
   contenuto/link) occupa la STESSA traccia-riga su tutte le card della stessa riga
   visiva -> occhiello sotto occhiello, titolo sotto titolo, ecc. L'immagine e' una
   traccia propria (layout impilati) o lo sfondo in cover (layout sovrapposti).
   L'enum detta l'ancoraggio verticale (alto/centro/basso) via align-items.
   Multi-riga: 'grid-row: span R' + auto-flow -> ogni riga di card si allinea da se'.
   ============================================================================ */
.blocco-generico .figli-omogeneo {
    display: grid;
    grid-template-columns: repeat(var(--figli-cols, 3), minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 0;
    /* niente gap tra le tracce-campo (subgrid eredita il gap dell'outer): spaziatura via margini .fg */
    margin-top: 1.5rem;
}

@media (max-width: 767.98px) {
    .blocco-generico .figli-omogeneo {
        grid-template-columns: minmax(0, 1fr);
    }
}

.blocco-generico .figli-omogeneo>.card-figlio {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
    margin-bottom: 2.5rem;
    /* spazio tra righe di card (row-gap outer = 0) */
    min-width: 0;
}

.blocco-generico .figli-omogeneo .fg {
    min-width: 0;
    grid-column: 1;
}

/* Ancoraggio verticale del gruppo: posizione dei campi entro la propria traccia
   (rilevante per il campo a lunghezza variabile, es. contenuto: 'basso' allinea i
   fondi -> prezzi allineati; 'alto' allinea i vertici). */
.figli-omogeneo.figancora-alto>.card-figlio {
    align-content: start;
    align-items: start;
}

.figli-omogeneo.figancora-centro>.card-figlio {
    align-content: center;
    align-items: center;
}

.figli-omogeneo.figancora-basso>.card-figlio {
    align-content: end;
    align-items: end;
}

/* Ritmo verticale dei campi (row-gap outer = 0) */
.figli-omogeneo .fg-occhiello {
    margin-bottom: 0.25rem;
}

.figli-omogeneo .fg-titolo {
    margin-bottom: 0.25rem;
}

.figli-omogeneo .fg-sottotitolo {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-contenuto {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-media {
    margin-bottom: 0.75rem;
}

.figli-omogeneo .fg-link {
    margin-bottom: 0;
}

/* Niente margine inferiore residuo in fondo alla card: l'ultimo campo e l'ultimo elemento dentro un
   campo (es. ultimo <p>/prezzo del contenuto RTE) non lasciano spazio sotto -> resta solo il padding
   della card. Regola generale "ultimo figlio dell'albero senza margin-bottom se non c'e' nulla dopo". */
.figli-omogeneo .card-figlio>.fg:last-child,
.figli-omogeneo .fg> :last-child {
    margin-bottom: 0;
}

/* Numero di righe (span) per layout: impilati = 6 tracce (media inclusa), sovrapposti = 5 */
.figli-omogeneo.figli-testo-sotto>.card-figlio,
.figli-omogeneo.figli-titoli-sopra>.card-figlio,
.figli-omogeneo.figli-tutto-sopra>.card-figlio {
    grid-row: span 6;
}

.figli-omogeneo.figli-titoli-sovrapp>.card-figlio,
.figli-omogeneo.figli-tutto-sovrapp>.card-figlio {
    grid-row: span 6;
    /* riga 1 = spacer (banda immagine in alto), righe 2-6 = campi */
}

/* Posizione dei campi entro la card (numero di riga della subgrid) per ciascun layout */
.figli-testo-sotto .fg-media {
    grid-row: 1;
}

.figli-testo-sotto .fg-occhiello {
    grid-row: 2;
}

.figli-testo-sotto .fg-titolo {
    grid-row: 3;
}

.figli-testo-sotto .fg-sottotitolo {
    grid-row: 4;
}

.figli-testo-sotto .fg-contenuto {
    grid-row: 5;
}

.figli-testo-sotto .fg-link {
    grid-row: 6;
}

.figli-titoli-sopra .fg-occhiello {
    grid-row: 1;
}

.figli-titoli-sopra .fg-titolo {
    grid-row: 2;
}

.figli-titoli-sopra .fg-sottotitolo {
    grid-row: 3;
}

.figli-titoli-sopra .fg-media {
    grid-row: 4;
}

.figli-titoli-sopra .fg-contenuto {
    grid-row: 5;
}

.figli-titoli-sopra .fg-link {
    grid-row: 6;
}

.figli-tutto-sopra .fg-occhiello {
    grid-row: 1;
}

.figli-tutto-sopra .fg-titolo {
    grid-row: 2;
}

.figli-tutto-sopra .fg-sottotitolo {
    grid-row: 3;
}

.figli-tutto-sopra .fg-contenuto {
    grid-row: 4;
}

.figli-tutto-sopra .fg-media {
    grid-row: 5;
}

.figli-tutto-sopra .fg-link {
    grid-row: 6;
}

.figli-overlay .fg-spacer {
    grid-row: 1;
}

.figli-overlay .fg-occhiello {
    grid-row: 2;
}

.figli-overlay .fg-titolo {
    grid-row: 3;
}

.figli-overlay .fg-sottotitolo {
    grid-row: 4;
}

.figli-overlay .fg-contenuto {
    grid-row: 5;
}

.figli-overlay .fg-link {
    grid-row: 6;
}

/* Banda immagine in alto (altezza minima card overlay): lo spacer sizza la traccia 1 -> immagine
   visibile sopra il testo, che resta ancorato in basso. min-height 0 se AltezzaImmagineFigli non impostata. */
.figli-overlay .fg-spacer {
    min-height: var(--fig-altezza, 0);
    pointer-events: none;
}

/* Media come traccia (layout impilati): altezza da AltezzaImmagineFigli (cover) se impostata,
   altrimenti box ad aspect-ratio uniforme 3/2. Immagine sempre in cover. */
.figli-omogeneo:not(.figli-overlay) .fg-media .lazy-img-holder {
    display: block;
    aspect-ratio: 3 / 2;
    height: var(--fig-altezza, auto);
    /* se impostata vince sull'aspect-ratio */
    overflow: hidden;
    line-height: 0;
}

.figli-omogeneo:not(.figli-overlay) .fg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout sovrapposti: immagine di sfondo full-card in cover + scrim, testo sopra */
.figli-omogeneo.figli-overlay>.card-figlio {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    color: #fff;
    /* default leggibile su immagine; sovrascritto dal ColoreTesto inline del figlio */
}

.figli-omogeneo.figli-overlay .fg-media {
    position: absolute;
    inset: 0;
    /* niente piazzamento di griglia: un item abs-pos CON grid-column/row prende come containing
       block la cella (dentro il padding) invece del padding-box -> l'immagine rientrava a sinistra.
       Con grid auto il containing block torna il padding-box della card = immagine full-bleed. */
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    z-index: 0;
}

.figli-omogeneo.figli-overlay .fg-media .lazy-img-holder {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    line-height: 0;
}

.figli-omogeneo.figli-overlay .fg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradiente scrim VERTICALE tra immagine e testo: trasparente (alto) -> #06151C (basso).
   Intensita' dal campo figlio Gradiente (classe .grad-*); l'estensione verso l'alto cresce col livello. */
.figli-omogeneo.figli-overlay>.card-figlio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* SOPRA l'immagine (z-index 0), SOTTO il testo (z-index 2) */
    pointer-events: none;
    background: linear-gradient(to top, #06151C 0%, rgba(6, 21, 28, 0) 65%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-nessuno::before {
    display: none;
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-leggero::before {
    /* leggero: velo tenue solo in fondo, immagine ancora visibile dietro il testo */
    background: linear-gradient(to top, rgba(6, 21, 28, 0.55) 0%, rgba(6, 21, 28, 0) 38%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-medio::before {
    /* medio: fondo pieno #06151C che sfuma a meta' card */
    background: linear-gradient(to top, #06151C 0%, rgba(6, 21, 28, 0) 62%);
}

.figli-omogeneo.figli-overlay>.card-figlio.grad-forte::before {
    /* forte: base piena piu' alta, tinta navy su quasi tutta la card */
    background: linear-gradient(to top, #06151C 0%, #06151C 22%, rgba(6, 21, 28, 0) 100%);
}

.figli-omogeneo.figli-overlay .fg:not(.fg-media) {
    position: relative;
    z-index: 2;
    /* sopra lo scrim (::before z-index 1) e l'immagine (z-index 0) */
}

/* ============================================================================
   Spaziatura (prima/dopo) e forzatura tipografica per elemento (campi Spaziatura + Tipografia
   su psblocco/psbloccofiglio, applicati a occhiello/titolo/sottotitolo/contenuto).
   Spaziatura ADDITIVA via pseudo-spacer (non tocca i margini base del layout): 'doppio' = 2rem,
   'triplo' = 3rem; prima = ::before, dopo = ::after. 'default' = nessuna classe.
   Tipografia = forzatura di stile/peso (override sul layout, quindi !important).
   ============================================================================ */
.sp-prima-doppio::before,
.sp-prima-triplo::before,
.sp-dopo-doppio::after,
.sp-dopo-triplo::after {
    content: "";
    display: block;
}

.sp-prima-doppio::before {
    height: 2rem;
}

.sp-prima-triplo::before {
    height: 3rem;
}

.sp-dopo-doppio::after {
    height: 2rem;
}

.sp-dopo-triplo::after {
    height: 3rem;
}

.tipo-normale {
    font-style: normal !important;
    font-weight: 400 !important;
}

.tipo-grassetto {
    font-weight: 700 !important;
    font-style: normal !important;
}

.tipo-corsivo {
    font-style: italic !important;
    font-weight: 400 !important;
}

.tipo-grassetto-corsivo {
    font-weight: 700 !important;
    font-style: italic !important;
}

/* Sezione titoli su due colonne (LayoutTitoli = titoli-sx / titoli-dx): occhiello+titolo da un lato,
   sottotitolo+contenuto dall'altro. Colonne allineate in alto (NON stretch: niente allungamento della
   colonna corta all'altezza dell'altra); niente margine inferiore residuo in fondo a ciascuna colonna. */
.blocco-generico .titoli-2col {
    align-items: flex-start;
}

.blocco-generico .titoli-2col>[class*="col-"]> :last-child {
    margin-bottom: 0;
}

/* ===== Pulsante "torna su" (back-to-top) — feature standard siti a blocchi (guida §7.15) =====
   In basso a destra, cerchio navy con freccia crema. Nascosto di default; .visible (aggiunta da
   main.js dopo lo scroll) lo mostra con fade + slide. Solo icona, nessuna label. */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1c2530;
    color: #f2ece2;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #2b3a49;
}

.back-to-top:focus-visible {
    outline: 2px solid #f2ece2;
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* ============================================================
   Blocco Prenotazione-Evento ("Reserve your place") — dominio Affidati.
   Card scura (blu notte) su crema, testo/accenti crema, pulsante crema.
   Palette e font ereditati dalle :root vars del sito.
   ============================================================ */
.prenotazione-evento .prenotazione-intro {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.prenotazione-form,
.prenotazione-evento .prenotazione-vuoto {
    max-width: 46rem;
    margin: 2rem auto 0;
}

.prenotazione-evento .prenotazione-vuoto {
    text-align: center;
    color: var(--clr-muted);
}

.prenotazione-form {
    /* Sfondo uniforme dalla sezione (campo Sfondo del blocco): il form resta trasparente. */
    background: transparent;
    color: var(--clr-on-dark);
    border: 1px solid rgba(242, 236, 226, 0.25);
    padding: 2.5rem;
}

.prenotazione-sezione {
    margin-bottom: 2rem;
}

.prenotazione-etichetta {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 236, 226, 0.6);
    margin-bottom: 0.9rem;
}

/* Esperienze (tab) */
.prenotazione-esperienze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.prenotazione-esperienza {
    flex: 1 1 auto;
    min-width: 12rem;
    padding: 0.9rem 1.2rem;
    background: transparent;
    color: var(--clr-on-dark);
    border: 1px solid rgba(242, 236, 226, 0.35);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.prenotazione-esperienza:hover {
    background: rgba(242, 236, 226, 0.1);
}

.prenotazione-esperienza.is-active {
    background: var(--clr-cream);
    color: var(--clr-dark);
    border-color: var(--clr-cream);
}

/* Giorni (card data) */
.prenotazione-giorni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.prenotazione-giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 6.5rem;
    padding: 1rem 0.5rem;
    background: transparent;
    color: var(--clr-on-dark);
    border: 1px solid rgba(242, 236, 226, 0.35);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.prenotazione-giorno:hover {
    background: rgba(242, 236, 226, 0.1);
}

.prenotazione-giorno.is-active {
    background: var(--clr-cream);
    color: var(--clr-dark);
    border-color: var(--clr-cream);
}

.prenotazione-giorno .giorno-settimana {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.75;
}

.prenotazione-giorno .giorno-data {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1;
}

.prenotazione-giorno .giorno-orario {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* Ospiti (stepper) */
.prenotazione-ospiti {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ospiti-btn {
    width: 2.6rem;
    height: 2.6rem;
    background: transparent;
    color: var(--clr-on-dark);
    border: 1px solid rgba(242, 236, 226, 0.35);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.ospiti-btn:hover {
    background: rgba(242, 236, 226, 0.1);
}

.ospiti-numero {
    min-width: 2rem;
    text-align: center;
    font-family: var(--font-serif);
    font-size: 1.5rem;
}

.ospiti-hint {
    color: rgba(242, 236, 226, 0.6);
    font-size: 0.9rem;
}

/* Riepilogo (totale + azione) */
.prenotazione-riepilogo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    /* Margini negativi = padding del form: il bordo separatore arriva a filo del riquadro esterno. */
    margin: 2.5rem -2.5rem 0;
    padding: 2rem 2.5rem 0;
    border-top: 1px solid rgba(242, 236, 226, 0.25);
}

.riepilogo-totale .totale-cifra {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.6rem;
    line-height: 1;
}

.riepilogo-totale .totale-dettaglio {
    color: rgba(242, 236, 226, 0.6);
    font-size: 0.9rem;
}

.riepilogo-azione {
    text-align: right;
}

.prenotazione-submit {
    display: inline-block;
    padding: 0.9rem 1.8rem;
    background: var(--clr-cream);
    color: var(--clr-dark);
    border: 1px solid var(--clr-cream);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s;
}

.prenotazione-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.riepilogo-nota {
    display: block;
    margin-top: 0.6rem;
    color: rgba(242, 236, 226, 0.55);
    font-size: 0.8rem;
}

@media (max-width: 576px) {
    .prenotazione-form {
        padding: 1.5rem;
    }

    .prenotazione-esperienza {
        min-width: 100%;
    }

    .prenotazione-riepilogo {
        justify-content: center;
        text-align: center;
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .riepilogo-azione {
        text-align: center;
    }
}