/**
 * Theme Name: Blocksy Child
 * Template: blocksy
 */

/* --- DICHIARAZIONE FONT LOCALI --- */

/* Regular (400) */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/BarlowCondensed-Regular.woff2') format('woff2');
}

/* Medium (500) */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/BarlowCondensed-Medium.woff2') format('woff2');
}

/* Bold (700) */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/BarlowCondensed-Bold.woff2') format('woff2');
}

/* Nota: Se ti servono altri pesi (es. Black, ExtraBold), 
   puoi aggiungere altri blocchi @font-face seguendo questo schema esatto, 
   cambiando solo il nome del file e il font-weight. */

/* --- APPLICAZIONE --- */

:root {
    --clr-primary: #00443f;
    --clr-primary-dark: #002a27;
    /* Tonalità più scura per il gradient */
    --clr-accent: #E6D0A5;
    /* Color Champagne */
    --clr-light: #FDF5E6;
    --clr-light-alpha: rgba(253, 245, 230, 0.85);
    --clr-border: rgba(253, 245, 230, 0.15);
    --font-heading: 'Simple Serenity', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;
    --theme-font-family: var(--font-condensed) !important;
}

/* Navigazione fluida e offset per header fisso */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* =========================================
   1. RESET E SETUP GLOBALE
   ========================================= */
html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--clr-primary);
}

#main-container,
.entry-content,
.ct-container,
#main-container>.container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.ct-header [data-row]>.ct-container,
.ct-header [data-row]>.ct-container-fluid {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

header .ct-header .ct-menu-link {
    font-family: var(--font-condensed) !important;
    font-weight: 500 !important;
}

/* =========================================
   1b. OVERRIDE GUTENBERG (GLOBALE E DEFINITIVO)
   ========================================= */

/* Forza larghezza totale e azzera TUTTI i margini nativi di Gutenberg per le nostre sezioni custom */
.is-layout-constrained>.alignfull,
body.home .is-layout-constrained>*,
.page-id-213 .is-layout-constrained>* {
    width: 100vw !important;
    max-width: 100% !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    /* Silenzia il var(--theme-content-spacing) ovunque! */
}

/* Disattiva lo spazio automatico e incontrollabile sotto i titoli nativi */
:is(.is-layout-flow, .is-layout-constrained) :where(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* =========================================
   1c. FIX GAP HEADER BLOCKSY (NATIVE SPACING)
   ========================================= */

/* Removes native Blocksy padding-top that creates gaps under the header */
body.home [data-vertical-spacing*="top"],
body.page-template-default [data-vertical-spacing*="top"] {
    padding-top: 0 !important;
}

/* =========================================
   2. TIPOGRAFIA GLOBALE (EDITORIAL LUXURY)
   ========================================= */
.heading-display {
    font-family: var(--font-heading);
    color: #E6D0A5;
    font-size: clamp(3.5rem, 6vw, 6rem);
    line-height: 1;
    /* Molto compatto */
    margin-bottom: 25px;
    margin-top: 2rem;
    font-weight: 400;
    /* Più leggero ed elegante */
    text-shadow: none;
    /* Nessuna ombra 3D */
}

.text-body-large {
    font-family: var(--font-body);
    color: rgba(252, 252, 252, 0.7);
    font-size: 1.1rem;
    line-height: 1.5;
    letter-spacing: 0.5px;
    font-weight: 300;
    margin-bottom: 35px;
    margin-top: 1rem;
    max-width: 80%;
}

.text-kicker {
    font-family: var(--font-condensed);
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
    font-weight: 400;
}

.text-kicker::before {
    content: '';
    display: block !important;
    width: 1rem;
    height: 1px;
    /* Linea finissima (hairline) */
    background-color: rgba(255, 255, 255, 0.4);
}

.text-accent {
    font-family: var(--font-heading);
    color: #E6D0A5;
    font-style: italic;
    font-size: 1.2em;
    display: block;
    margin: 10px 0 0 0;
}

/* =========================================
   2.5. DESIGN SYSTEM UTILITIES (LAYOUT & SPACING)
   ========================================= */

/* --- FLUID PADDING (Sezioni) --- */
.section-padding { padding: clamp(60px, 8vw, 120px) 0; }
.section-padding-large { padding: clamp(100px, 12vw, 180px) 0; }
.section-padding-small { padding: clamp(40px, 5vw, 80px) 0; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* --- MARGINS (Spaziatura interna) --- */
.mb-auto { margin-bottom: auto; }
.mb-xs { margin-bottom: 15px; }
.mb-sm { margin-bottom: 25px; }
.mb-md { margin-bottom: 40px; }
.mb-lg { margin-bottom: 60px; }
.mb-xl { margin-bottom: 80px; }
.mt-sm { margin-top: 25px; }
.mt-md { margin-top: 40px; }

/* --- LAYOUT WRAPPERS --- */
.container-standard { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 5%; }
.container-narrow { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 5%; }
.container-fluid { width: 100%; max-width: 100%; margin: 0; padding: 0; }

/* --- GRID & FLEX PRIMITIVES --- */
.grid-split-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
@media (min-width: 1025px) {
    .grid-split-2 { grid-template-columns: 1fr 1fr; }
}

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

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

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

/* =========================================
   3. BOTTONI (GHOST BUTTONS MINIMALISTI)
   ========================================= */
.btn-group {
    display: flex;
    gap: 20px;
}

.btn,
.btn--primary,
.btn--outline,
.btn--dark {
    display: inline-flex;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 45px !important;
    border-radius: 50% !important;
    /* Ovale perfetto */
    font-family: var(--font-condensed);
    font-weight: 400;
    font-size: 0.85rem !important;
    /* Testo più piccolo */
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.4s ease;

    /* PILL STYLE */
    background-color: transparent !important;
    border: 1px solid currentColor !important;
    color: inherit;
    box-shadow: none !important;
    /* Rimosse tutte le ombre */
    white-space: nowrap !important;
}

/* 1. Rimosso hover bianco globale, mantenuto solo il sollevamento */
.btn:hover,
.btn--primary:hover,
.btn--outline:hover,
.btn--dark:hover {
    transform: translateY(-2px);
}

/* Sfondi Scuri: Bottoni Bianchi/Trasparenti */
.bg-dark-pattern .btn,
.circus-hero .btn,
.site-custom-footer .btn,
.contact-footer-section .btn {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 2. Hover per sfondi Scuri (riempimento champagne) */
.bg-dark-pattern .btn:hover,
.circus-hero .btn:hover,
.site-custom-footer .btn:hover,
.contact-footer-section .btn:hover {
    background-color: var(--clr-accent) !important;
    border-color: var(--clr-accent) !important;
    color: var(--clr-primary-dark) !important;
}

/* Sfondi Chiari: Bottoni Verde Scuro */
/* 3. Sfondi Chiari: Bottoni Pieni Verde Scuro (Default) */
.bg-light .btn,
.services-hero--light .btn,
.review-card .btn,
.bollicine-section .btn,
.package-card__back .btn {
    color: var(--clr-primary) !important;
    border-color: rgba(0, 68, 63, 0.3) !important;
    background-color: var(--clr-primary) !important;
    color: var(--clr-light) !important;
    border-color: var(--clr-primary) !important;
}

/* 3. Hover per sfondi Chiari (riempimento verde scuro) */
/* Hover per sfondi Chiari (Trasparente/Champagne con testo scuro) */
.bg-light .btn:hover,
.services-hero--light .btn:hover,
.review-card .btn:hover,
.bollicine-section .btn:hover,
.package-card__back .btn:hover {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: #ffffff !important;
}

.hero-btn-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    margin-bottom: 45px !important;
    order: 5 !important;
    flex-wrap: nowrap !important;
}

/* ==========================================================================
   CIRCUS HERO - LA VERSIONE MASTER (CON ROTATOR E MARQUEE)
   ========================================================================== */

/* --- IMPOSTAZIONI BASE (DESKTOP) --- */
.circus-hero {
    position: relative;
    width: 100vw !important;
    min-height: 100svh !important;
    /* FIX: 100svh garantisce l'altezza esatta escludendo la barra del browser */
    background-color: #002a27;
    display: flex;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible !important;
    z-index: 10;
}

/* SFONDO ROTANTE */
.hero-bg-overflow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.hero-bg-rotator {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Si posiziona al centro esatto */
    width: 150vw;
    height: 150vw;
    max-width: 1400px;
    max-height: 1400px;
    background: url('/wp-content/uploads/2026/07/badge-def-1.png') no-repeat center center;
    background-size: contain;
    opacity: 0.04;
    animation: spinBadge 100s linear infinite;
}

@keyframes spinBadge {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* FADING IMMAGINI */
.img-fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: crossfade 15s infinite;
}

.img-fade-1 {
    animation-delay: 0s;
}

.img-fade-2 {
    animation-delay: 5s;
}

.img-fade-3 {
    animation-delay: 10s;
}

@keyframes crossfade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    43% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* COLONNA IMMAGINE E TOPPA MAGICA (Base condivisa) */
.circus-hero__media-col {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    width: 50vw;
    z-index: 1;
}

.bleed-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* STRUTTURA E SFUMATURA ORIGINALE (Preservata per Mobile e Tablet) */
.bleed-arch {
    width: 100%;
    height: 100%;
    border-radius: 400px 0 0 0;
    position: relative;
    overflow: hidden;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
}

.bleed-arch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #002a27 0%, rgba(0, 42, 39, 0.2) 20%, transparent 40%);
    z-index: 2;
    pointer-events: none;
}

.bleed-arch::after {
    content: '';
    position: absolute;
    inset: 20px -20px 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 380px 0 0 0;
    z-index: 3;
    pointer-events: none;
}

/* --- OVERRIDE LUSSO SOLO PER DESKTOP (Da 1025px in su) --- */
@media (min-width: 1025px) {
    .bleed-arch {
        box-shadow: none !important;
        /* Via l'ombra esterna su schermi grandi */
    }

    .bleed-arch::before {
        background: transparent !important;
        /* Via il gradiente verde su schermi grandi */
        box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.85) !important;
        /* Inner shade scura per profondità */
    }
}

.hero-seal {
    position: absolute;
    top: 22%;
    left: -70px;
    width: 140px;
    z-index: 10;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
    animation: floatBadge 6s ease-in-out infinite alternate;
}

/* CONTENITORE E TESTI */
.circus-hero__container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 10;
    display: flex;
}

.circus-hero__text-col {
    width: 50%;
    max-width: 600px;
    padding: 120px 0 80px 0;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
}

.hero-kicker-line {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 4px;
    color: var(--clr-accent);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    order: 1;
}

.hero-kicker-line::before {
    content: '';
    width: 1rem;
    height: 1px;
    background: var(--clr-accent);
}

.hero-title-main {
    font-family: var(--font-condensed) !important;
    color: #ffffff !important;
    font-size: clamp(2.8rem, 4.5vw, 5rem) !important;
    line-height: 0.92 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em;
    margin-bottom: 0;
    order: 2;
    white-space: nowrap;
}

.hero-title-accent {
    font-family: var(--font-heading) !important;
    font-size: clamp(4rem, 7vw, 6.5rem);
    font-weight: 400 !important;
    color: #E6D0A5 !important;
    display: block;
    line-height: 1;
    margin-top: 1rem;
    margin-bottom: 25px;
    font-style: italic;
    order: 3;
    text-shadow: none !important;
}

.hero-body-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(253, 245, 230, 0.85);
    margin-bottom: 40px;
    order: 4;
    max-width: 550px;
}

/* FIX: BOTTONI DESKTOP BLINDATI IN RIGA */
.hero-btn-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 15px !important;
    margin-bottom: 45px !important;
    order: 5 !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.hero-btn-group .btn {
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 16px 50px !important;
    border-radius: 50% !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* STATISTICHE DESKTOP */
.hero-stats-wrapper {
    order: 6;
    width: 100%;
    display: block;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    border-top: 1px solid rgba(253, 245, 230, 0.1);
    padding-top: 25px;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-box strong {
    color: var(--clr-accent);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.stat-box span {
    color: var(--clr-light);
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.clone-mobile {
    display: none !important;
}


/* ==========================================================================
   TABLET E MOBILE (ABOVE THE FOLD GARANTITO E FULL SCREEN)
   ========================================================================== */
@media (max-width: 1024px) {
    .circus-hero {
        flex-direction: column;
        display: flex;
        min-height: 100svh !important;
        /* Occupa esattamente tutto lo schermo visibile */
        height: auto;
        padding-bottom: 0 !important;
    }

    .circus-hero__media-col {
        order: 1;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: auto !important;
        width: 100vw !important;
        height: 45svh !important;
        /* L'immagine prende il 45% dello schermo */
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    .circus-hero__media-col::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 10px;
        background-color: #002a27 !important;
        z-index: 10;
        pointer-events: none;
    }

    .bleed-arch {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .bleed-arch::before {
        background: linear-gradient(to top, #002a27 0%, #002a27 10%, rgba(0, 42, 39, 0.5) 45%, transparent 85%) !important;
    }

    .bleed-arch::after {
        inset: 15px !important;
        border-radius: 105px 0 0 0 !important;
        border-bottom: none !important;
        border-right: none !important;
    }

    .circus-hero__container {
        order: 2;
        width: 100%;
        position: relative;
        z-index: 15 !important;
        padding: 0;
        flex: 1 !important;
        /* Magia: il testo prende il restante 55% dello schermo automaticamente */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .circus-hero__text-col {
        width: 100%;
        max-width: 100%;
        padding: 0 6% 20px 6% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: -10svh !important;
        /* Sormonta l'immagine in modo fluido */
        position: relative;
        z-index: 20 !important;
        min-height: 55svh;
        justify-content: center;
    }

    .hero-kicker-line {
        order: 1;
        justify-content: center !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
        margin-bottom: 8px !important;
    }

    .hero-title-main {
        order: 2;
        text-align: center !important;
        text-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        margin-bottom: 0 !important;
    }

    .hero-title-accent {
        order: 3;
        text-align: center !important;
        text-shadow: 0 5px 25px rgba(0, 0, 0, 0.9);
        margin-top: 0.6rem !important;
        margin-bottom: 12px !important;
    }

    .hero-body-text {
        order: 4;
        text-align: center !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   SOLO TABLET (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-seal {
        top: auto !important;
        bottom: 15px !important;
        right: 5% !important;
        left: auto !important;
        width: 130px !important;
    }

    .hero-title-main {
        font-size: clamp(2.8rem, 6.5vw, 3.8rem) !important;
        line-height: 0.95 !important;
        white-space: nowrap;
    }

    .hero-title-accent {
        font-size: clamp(4.5rem, 11vw, 6rem) !important;
    }

    .hero-body-text {
        font-size: 1.1rem !important;
        max-width: 600px !important;
        margin-bottom: 25px !important;
    }

    .hero-btn-group {
        order: 5 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
        margin-top: 5px !important;
        margin-bottom: 30px !important;
    }

    .hero-btn-group .btn {
        width: auto !important;
        min-width: 200px !important;
        padding: 16px 50px !important;
        border-radius: 50% !important;
    }

    .hero-stats-wrapper {
        display: block !important;
        order: 6 !important;
        width: 100% !important;
    }

    .hero-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
        background: rgba(253, 245, 230, 0.03) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 15px !important;
        border-radius: 20px !important;
    }

    .stat-box {
        align-items: center;
        text-align: center;
    }
}

/* ==========================================================================
   SOLO MOBILE (Max 767px)
   ========================================================================== */
@media (max-width: 767px) {
    .hero-seal {
        top: auto !important;
        bottom: 10svh !important;
        right: 5% !important;
        left: auto !important;
        width: 110px !important;
        z-index: 20 !important;
    }

    .hero-title-main {
        font-size: clamp(2.6rem, 10vw, 3.4rem) !important;
        line-height: 0.95 !important;
    }

    .hero-title-accent {
        font-size: clamp(3.8rem, 10vw, 4.5rem) !important;
    }

    .hero-body-text {
        font-size: 0.95rem !important;
        max-width: 320px !important;
        margin-bottom: 20px !important;
    }

    .hero-btn-group {
        order: 5 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 5px !important;
        margin-bottom: 0 !important;
    }

    .hero-btn-group .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 16px 50px !important;
        border-radius: 50% !important;
    }

    .hero-stats-wrapper {
        display: none !important;
    }
}

/* Animazione del sigillo */
@keyframes floatBadge {
    0% {
        transform: translateY(0) rotate(-12deg);
    }

    100% {
        transform: translateY(-15px) rotate(-8deg);
    }
}

/* ==========================================================================
   SLIDER IMMAGINI (FADING)
   ========================================================================== */
.img-fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: crossfade 15s infinite;
}

.img-fade-1 {
    animation-delay: 0s;
}

.img-fade-2 {
    animation-delay: 5s;
}

.img-fade-3 {
    animation-delay: 10s;
}

@keyframes crossfade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    33% {
        opacity: 1;
    }

    43% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================
   8. UTILITIES GLOBALI (SEZIONI INTERNE)
   ========================================= */

/* Spaziature standard per le sezioni */
.section-padding {
    padding: clamp(80px, 10vw, 120px) 5%;
}

.bg-light {
    background-color: var(--clr-light);
}

/* Sfondo color crema */

/* Sfondo Scuro Profondo con Pattern Rotante Automatico */
.bg-dark-pattern {
    position: relative;
    background: linear-gradient(rgba(0, 42, 39, 0.85), rgba(0, 42, 39, 0.95)) !important;
    overflow: hidden;
    /* Fondamentale per non far sbordare l'immagine rotante gigante */
}

/* Iniezione automatica dell'immagine rotante */
.bg-dark-pattern::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centrato così va bene per tutte le sezioni */
    width: 90vw;
    height: 90vw;
    /* Altezza uguale alla larghezza per un cerchio perfetto */
    max-width: 1200px;
    max-height: 1200px;
    background-image: url('/wp-content/uploads/2026/07/badge-def-1.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    /* Delicatissimo, non disturba la lettura */
    z-index: 0;
    pointer-events: none;
    /* Usa la stessa animazione creata per la hero */
    animation: spinBadge 100s linear infinite;
}

/* Protezione: assicura che il contenuto (testi, card) stia SEMPRE sopra l'animazione */
.bg-dark-pattern>* {
    position: relative;
    z-index: 2;
}

/* Tipografia per sfondi chiari */
.heading-section {
    font-family: var(--font-condensed);
    color: var(--clr-primary);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-weight: 600;
}

.text-body-dark {
    font-family: var(--font-body);
    color: var(--clr-primary-dark);
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Supporto per output WYSIWYG (ACF) */
.text-body-dark p, .hero-body-text p {
    margin-bottom: 0.5rem;
}
.text-body-dark p:last-child, .hero-body-text p:last-child {
    margin-bottom: 0;
}

/* Modificatori per elementi della Hero da usare su sfondo chiaro */
.text-kicker--dark {
    color: var(--clr-primary);
    font-family: var(--font-condensed);
}

.text-kicker--dark::before {
    background-color: var(--clr-primary);
    width: 1rem;
}

.text-accent--green {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--clr-primary);
    text-transform: lowercase;
    font-size: 1.2em;
}

/* Griglia Split riutilizzabile (FLUIDA E SENZA MEDIA QUERIES) */
.grid-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 901px) {
    .grid-split {
        grid-template-columns: 1fr 1fr;
    }
}

/* Wrapper Immagine Specchiata */
.arch-wrapper-mirrored {
    position: relative;
    width: 100%;
}

/* La linea dorata (Ora posizionata perfettamente ALL'INTERNO dell'immagine) */
.arch-wrapper-mirrored::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 285px 0 0;
    /* Raggio matematicamente parallelo a quello esterno */
    pointer-events: none;
    z-index: 2;
}

/* L'immagine vera e propria */
.image-arch-mirrored {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0 300px 0 0;
    box-shadow: none !important;
    display: block;
}

/* Wrapper Immagine Standard (Top-Left): Perfetto per immagini a destra */
.arch-wrapper-standard {
    position: relative;
    width: 100%;
}

/* Linea dorata (Curva in alto a sinistra) */
.arch-wrapper-standard::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 285px 0 0 0;
    pointer-events: none;
    z-index: 2;
}

/* Immagine con curva in alto a sinistra */
.image-arch-standard {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 300px 0 0 0;
    box-shadow: none !important;
    display: block;
}

/* Arco Classico (Top-Left e Top-Right): Utile per foto centrate future */
.image-arch-center {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 300px 300px 0 0;
    box-shadow: none !important;
}



/* Responsive pulito e senza bug */
@media (max-width: 900px) {
    .grid-split__media {
        order: 1;
    }

    .grid-split__content {
        order: 2;
    }

    .heading-section {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   9. PACCHETTI OPEN BAR (BASE SOLIDA, NOBLE FLIP & CLICK UNIFICATO)
   ========================================================================== */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Card Struttura Base (Compattata per non sembrare un "mattone") */
.package-card,
.package-card__back {
    color: var(--clr-primary-dark);
    background-color: var(--clr-light);
    border-radius: 40px;
    padding: 40px 30px;
    /* Padding ridotto rispetto ai 45x35 originali */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, background 0.4s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(230, 208, 165, 0.4);
}

.package-card::before,
.package-card__back::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(230, 208, 165, 0.4);
    border-radius: 30px;
    pointer-events: none;
    z-index: 1;
}

.package-card>*,
.package-card__back>* {
    position: relative;
    z-index: 2;
}

/* Stile per la card evidenziata */
.package-card--flip.package-card--highlight .package-card__back {
    border: 1px solid var(--clr-accent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.package-card--flip.package-card--highlight .package-card__back::before {
    border-color: rgba(230, 208, 165, 0.7);
}

/* Tipografia interna condivisa */
/* FIX DEFINITIVO BADGE "IL PIÙ RICHIESTO" (Blocca l'espansione su Desktop e Mobile) */
.package-card__badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--clr-primary-dark);
    color: var(--clr-accent);
    padding: 6px 20px;
    border-radius: 50px;
    font-family: var(--font-condensed);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

    /* LA MAGIA CHE LO RENDE COMPATTO */
    width: max-content;
    max-width: 70%;
    text-align: center;
    z-index: 10;
    white-space: normal;
    line-height: 1.2;
}

.package-card__header {
    text-align: center;
    margin-bottom: 20px;
}

.package-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 2.6rem);
    color: var(--clr-primary);
    margin: 0 0 5px 0;
    line-height: 1;
}

.package-subtitle {
    font-family: var(--font-condensed);
    text-transform: uppercase;
    color: var(--clr-accent);
    background-color: var(--clr-primary);
    display: inline-block;
    padding: 6px 15px;
    border-radius: 8px;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 1.4rem;
}

.package-desc {
    font-family: var(--font-body);
    color: var(--clr-primary-dark);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(0, 68, 63, 0.2);
}

.package-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    flex-grow: 1;
}

.package-list li {
    font-family: var(--font-body);
    color: var(--clr-primary);
    font-weight: 500;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
}

.package-list li::before {
    content: '✦';
    color: var(--clr-accent);
    font-size: 1.1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.package-card .btn,
.package-card__back .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    padding: 16px 20px;
    font-size: 1rem;
}

/* 2. FIX: Isola la transizione dei bottoni sulle card per renderla più reattiva */
.package-card--flip .btn {
    /* Forza una transizione breve e scattante, ignorando quella ereditata dalla card */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}



/* ==========================================================================
   STRUTTURA FLIP 3D E GESTIONE CLICK (HOVER DISATTIVATO)
   ========================================================================== */
.package-card--flip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    perspective: 1500px;
    cursor: pointer;
}

.package-card--flip::before {
    display: none !important;
}

.package-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 40px;
}

/* FIX JS: La card si gira SEMPRE e SOLO tramite la classe JS (is-flipped) */
.package-card--flip.is-flipped .package-card__inner {
    transform: rotateY(180deg);
}

/* FIX ALTEZZA COLLASSATA: Il Fronte è assoluto, il Retro è relativo e dà la struttura */
.package-card__front {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 35px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Stato di default: il fronte è cliccabile e sopra */
    z-index: 5;
    pointer-events: auto;
}

.package-card__back {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 35px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    background-color: var(--clr-light);
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    transform: rotateY(180deg);
    border: 1px solid rgba(230, 208, 165, 0.4);
    /* Stato di default: il retro è sotto e non cliccabile */
    z-index: 1;
    pointer-events: none;
}

/* Sfondi Velati */
.package-card--apericircus .package-card__front {
    background: linear-gradient(rgba(0, 42, 39, 0.7), rgba(0, 42, 39, 0.95)), url('/wp-content/uploads/2026/05/nicholas-tsalikis-9dsPXKc7t8E-unsplash-scaled.jpg') center/cover;
}

.package-card--cocktail-bar .package-card__front {
    background: linear-gradient(rgba(0, 42, 39, 0.7), rgba(0, 42, 39, 0.95)), url('/wp-content/uploads/2026/05/anil-sharma-JFpaEI8lMps-unsplash-scaled.jpg') center/cover;
}

.package-card--open-bar .package-card__front {
    background: linear-gradient(rgba(0, 42, 39, 0.7), rgba(0, 42, 39, 0.95)), url('/wp-content/uploads/2026/07/catering-open-bar-drinks-mixology-eventi-cocktail-prosecco-champagne-lombardia-milano-festa-scaled.jpg') center/cover;
}

.package-card__front::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(230, 208, 165, 0.3);
    border-radius: 25px;
    pointer-events: none;
    z-index: 1;
}

.package-card__back::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(230, 208, 165, 0.4);
    border-radius: 25px;
    pointer-events: none;
    z-index: 1;
}

.package-card__back>* {
    position: relative;
    z-index: 2;
}

.package-card .btn,
.package-card__back .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    margin-top: auto;
    padding: 14px 20px;
}


/* ==========================================================================
   LAYOUT DEL FRONTE CARD
   ========================================================================== */
.front-card-content {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-bottom: 50px;
    z-index: 5;
}

.front-package-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 2.6rem);
    color: var(--clr-accent);
    font-size: clamp(2.4rem, 5vw, 3rem);
    text-align: center;
    margin: 0;
    line-height: 1;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}

/* FLOATING COCKTAIL (PNG) */
.front-bottom-png-area {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 160px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.front-bottom-png-area img {
    width: auto;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.1) contrast(1.05) drop-shadow(0 15px 25px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fix: Use .is-flipped for consistency with JS-driven flip logic instead of :hover */
@media (hover: hover) {
    .package-card--flip:not(.is-flipped):hover .front-bottom-png-area img {
        transform: translateY(-10px) scale(1.05);
    }
}

/* ==========================================================================
   NUOVA BARRA AZIONI IN BASSO (CTA + X)
   ========================================================================== */
.package-back-actions {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: auto;
    /* La spinge sempre sul fondo */
    position: relative;
    z-index: 10;
}

.package-back-actions .btn {
    margin-top: 0 !important;
    width: 100% !important;
    flex-grow: 1;
    padding: 16px 20px !important;
}

/* NUOVO BOTTONE X: Posizionato in alto a destra, piccolo e discreto */
.package-flip-back {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0, 68, 63, 0.2);
    border-radius: 50%;
    background-color: rgba(253, 245, 230, 0.9);
    color: var(--clr-primary);
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.package-flip-back svg {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.package-flip-back:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent);
    background-color: var(--clr-primary-dark);
    transform: rotate(90deg);
}

/* Su smartphone rimpiccioliamo leggermente la X e il padding del bottone */
@media (max-width: 767px) {
    .package-back-actions .btn {
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
    }
}

/* FIX FANTASMA 3D: Disattiva i click sul fronte quando la card è girata altrimenti blocca la X */
.package-card--flip.is-flipped .package-card__front {
    pointer-events: none !important;
}

/* Assicurati che il retro invece riceva sempre i click */
.package-card--flip.is-flipped .package-card__back {
    pointer-events: auto !important;
}

/* ==========================================================================
   CARD FLIP: HOVER SU DESKTOP, CLICK SU MOBILE
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {

    /* Su desktop, la card si gira solo con l'hover */
    .package-card--flip:hover .package-card__inner {
        transform: rotateY(180deg);
    }

    .package-card--flip:not(:hover) .package-card__inner {
        transform: rotateY(0deg);
    }

    /* Nasconde il suggerimento di click su desktop */
    .package-card--flip .flip-hint {
        display: none;
    }

    /* 1. FIX: Nasconde il pulsante di chiusura (X) su desktop, dove è inutile */
    .package-flip-back {
        display: none !important;
    }

    /* FIX INTERAZIONE 3D: Gestione Z-Index e Pointer Events per HOVER (desktop) */
    .package-card--flip:hover .package-card__front {
        pointer-events: none !important;
        z-index: 1;
    }

    .package-card--flip:hover .package-card__back {
        pointer-events: auto !important;
        z-index: 5;
    }
}

/* ==========================================================================
   ELLISSI E HINTS UX (VISIBILI OVUNQUE)
   ========================================================================== */
.carousel-swipe-hint {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
    margin-bottom: -15px;
    background: rgba(230, 208, 165, 0.08);
    border: 1px solid rgba(230, 208, 165, 0.2);
    padding: 22px 60px;
    border-radius: 50%;
}

.swipe-hint-text {
    font-family: var(--font-condensed);
    color: var(--clr-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.swipe-hint-track {
    width: 60px;
    height: 3px;
    background-color: rgba(253, 245, 230, 0.15);
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
}

.swipe-hint-dot {
    width: 20px;
    height: 100%;
    background-color: var(--clr-accent);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    animation: swipeTrackMotion 2s ease-in-out infinite;
}

@keyframes swipeTrackMotion {
    0% {
        left: -15%;
        width: 15px;
    }

    50% {
        left: 70%;
        width: 25px;
    }

    100% {
        left: 115%;
        width: 15px;
    }
}

/* HINT FLIP VISIBILE SEMPRE */
.flip-hint {
    position: absolute;
    bottom: 35px;
    /* FIX CENTRATURA: Sostituisce transform con il metodo a margini, più solido su mobile */
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    pointer-events: none;
    z-index: 20;
    background: rgba(0, 42, 39, 0.85);
    border: 1px solid var(--clr-accent);
    padding: 18px 48px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    width: max-content;
    text-align: center;
    animation: pulseHintLabel 2.5s ease-in-out infinite alternate;
}

.flip-hint span {
    font-family: var(--font-condensed);
    color: var(--clr-accent);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
}

/* FRECCIA NEXT (Ellisse) */
.next-section-trigger {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    position: relative;
    z-index: 10;
}

.scroll-next-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-next-text {
    font-family: var(--font-condensed);
    color: var(--clr-light-alpha);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.scroll-next-link:hover .scroll-next-text {
    opacity: 1;
    color: var(--clr-accent);
    transform: translateY(-2px);
}

.scroll-next-arrow {
    width: 75px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(230, 208, 165, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 42, 39, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: pulseArrow 2s infinite alternate;
}

.scroll-next-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.scroll-next-link:hover .scroll-next-arrow {
    border-color: var(--clr-accent);
    background-color: var(--clr-primary-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.scroll-next-link:hover .scroll-next-arrow svg {
    transform: translateY(3px);
}

@keyframes pulseArrow {
    0% {
        transform: translateY(0);
        border-color: rgba(230, 208, 165, 0.2);
    }

    100% {
        transform: translateY(6px);
        border-color: rgba(230, 208, 165, 0.6);
    }
}


/* ==========================================================================
   RESPONSIVE LAYOUT & BARRA SCORRIMENTO (MOBILE)
   ========================================================================== */
@media (max-width: 1024px) {
    .packages-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 40px 5% 60px 5%;
        gap: 20px;
        margin: 0 -5%;
        /* FIX BARRA CHROME: Sostituito "none" con "thin" per farla riapparire */
        scrollbar-width: thin;
        scrollbar-color: var(--clr-accent) rgba(230, 208, 165, 0.1);
        -ms-overflow-style: auto;
    }

    .packages-grid::-webkit-scrollbar {
        height: 6px;
        display: block;
    }

    .packages-grid::-webkit-scrollbar-track {
        background: rgba(230, 208, 165, 0.1);
        border-radius: 10px;
        margin: 0 15vw;
    }

    .packages-grid::-webkit-scrollbar-thumb {
        background: var(--clr-accent);
        border-radius: 10px;
    }

    .package-card {
        min-width: 85vw;
        scroll-snap-align: center;
    }

    .package-card--highlight:not(.package-card--flip) {
        transform: none;
    }

    .carousel-swipe-hint {
        display: flex;
    }
}

/* ==========================================================================
   COMPATTAZIONE ESTREMA MOBILE (RIDUZIONE ALTEZZA CARD)
   ========================================================================== */
@media (max-width: 767px) {

    .package-card__front,
    .package-card__back {
        border-radius: 25px;
    }

    /* Taglio drastico dei padding interni per recuperare altezza! */
    .package-card__back {
        padding: 20px 15px !important;
    }

    .package-card__front::before,
    .package-card__back::before {
        inset: 5px;
        border-radius: 20px;
    }

    /* Ridimensionamento del badge SOLO per i telefoni */
    .package-card__badge {
        max-width: 65%;
        font-size: 0.65rem;
        padding: 4px 15px;
        top: -12px;
    }

    /* Compattazione margini testi */
    .package-desc {
        margin-bottom: 10px;
        padding-bottom: 10px;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .package-list {
        margin-bottom: 15px;
    }

    .package-list li {
        margin-bottom: 6px;
        font-size: 0.85rem;
        gap: 8px;
    }

    .package-title {
        font-size: 1.8rem;
    }

    .package-subtitle {
        margin-top: 0.3rem;
        margin-bottom: 10px;
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* Barra azioni e X in basso rimpicciolite */
    .package-back-actions {
        gap: 10px;
    }

    .package-back-actions .btn {
        padding: 10px 15px !important;
        font-size: 0.85rem !important;
    }

    .package-flip-back {
        width: 38px;
        height: 38px;
        padding: 8px;
    }

    /* Fronte card molto più compatto */
    .front-card-content {
        padding-bottom: 20px;
    }

    .front-package-title {
        font-size: 2rem;
    }

    .front-bottom-png-area {
        height: 90px;
        bottom: -10px;
    }

    /* Pillole UX rimpicciolite */
    .carousel-swipe-hint {
        padding: 12px 40px;
        margin-top: 10px;
    }

    .flip-hint {
        padding: 10px 30px;
        bottom: 15px;
    }

    .flip-hint span {
        font-size: 0.7rem;
    }
}

@keyframes pulseHintLabel {
    0% {
        opacity: 0.5;
        transform: translateY(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* =========================================
   10. SIGNATURE DRINKS SPOTLIGHT (OVERLAP ELEGANT FIX)
   ========================================= */

/* Pulizia totale dello sfondo per questa sezione */
#signatures.bg-dark-pattern::before,
#cocktail-list.bg-dark-pattern::before {
    display: none !important;
}

/* Trasformato in Flexbox per centrare perfettamente la seconda riga (4 sopra, 3 sotto) */
.signature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px 40px;
    /* 100px verticale per far respirare i bicchieri, 40px orizzontale */
    max-width: 1250px;
    /* Contenitore massimo per non "sbrodolare" sugli schermi enormi */
    margin: 100px auto 0 auto;
}

.signature-item {
    width: 270px;
    text-align: center;
    position: relative;
    /* Necessario per lo z-index sull'hover */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.signature-thumb {
    width: 210px;
    height: 210px;
    margin: 0 auto 30px;
    border-radius: 50%;
    position: relative;
    background-color: transparent;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* Transizione più fluida per sfondo e ombra */
}

.signature-thumb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: url('/wp-content/uploads/2026/07/badge-def-1.png') no-repeat center center;
    background-size: contain;
    animation: spinBadge 40s linear infinite;
    z-index: -1;
    opacity: 0.5;
    transition: filter 0.5s ease;
}

.signature-img-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -35px;
    width: 125%;
    height: 125%;
    overflow: visible;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* Transizione più lunga per l'immagine */
}

.signature-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
    transition: filter 0.5s ease;
}

/* Badge Signature Drink */
.signature-badge {
    position: absolute;
    bottom: 15px;
    right: -20px;
    background-color: var(--clr-primary-dark);
    color: var(--clr-accent);
    padding: 6px 16px;
    border-radius: 30px;
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(230, 208, 165, 0.4);
    z-index: 20;
    white-space: nowrap;
}

/* Nuovo wrapper per il testo */
.signature-text {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* --- STATO HOVER RAFFINATO --- */
.signature-item:hover {
    transform: translateY(-10px);
    /* Sollevamento più evidente */
    z-index: 10;
    /* Lo porta in primo piano */
}


.signature-item:hover .signature-thumb::before {
    filter: drop-shadow(0 15px 25px rgba(230, 208, 165, 0.3)) brightness(1.1);
    /* Effetto "glow" sull'immagine rotante */
}

.signature-item:hover .signature-img-wrapper {
    transform: translateX(-50%) scale(1.08) translateY(-15px);
    /* Effetto "float" più pronunciato */
}

.signature-item:hover .signature-thumb img {
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.5));
    /* Ombra più profonda in hover */
}

.signature-item:hover .signature-title {
    color: #ffffff;
    /* Il titolo diventa bianco in hover */
}

/* --- TIPOGRAFIA RAFFINATA --- */
.signature-title {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--clr-accent);
    margin-bottom: 12px;
    /* Più spazio */
    line-height: 1;
    transition: color 0.4s ease;
    /* Transizione per il cambio colore */
}

.signature-ingredients {
    font-family: var(--font-body);
    color: var(--clr-light-alpha);
    font-size: 0.95rem;
    line-height: 1.5;
    /* Interlinea più stretta */
    max-width: 260px;
    margin: 0 auto;
    padding: 0;
}

.signature-garnish {
    display: block;
    margin-top: 10px;
    /* Meno spazio */
    font-family: var(--font-condensed);
    text-transform: uppercase;
    font-size: 0.85rem;
    /* Più piccolo */
    color: var(--clr-accent);
    letter-spacing: 1.5px;
    /* Meno spazio tra le lettere */
    opacity: 0.8;
}

/* Responsive fix per tablet e mobile */
@media (max-width: 900px) {
    .signature-grid {
        gap: 80px 20px;
        margin-top: 80px;
    }

    .signature-thumb {
        width: 200px;
        height: 200px;
    }

    .signature-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 767px) {
    .signature-grid {
        gap: 85px 0;
    }

    .signature-item {
        width: 100%;
        max-width: 300px;
    }

    /* Su mobile torna a colonna singola perfetta */
    .signature-thumb {
        width: 220px;
        height: 220px;
    }
}

/* =========================================
   11. MODIFICATORI E UTILITIES (Chi Siamo & Co.)
   ========================================= */

/* Variante più compatta del titolo principale (Utile per le sezioni interne) */
.heading-display--compact {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 25px;
}

/* Testo in evidenza: colore solido luminoso e font leggermente ridimensionato */
.text-body-large--highlight {
    color: var(--clr-light);
    font-size: 1.1rem;
}

/* Gestione standard dello spazio sopra un pulsante a fine paragrafo */
.action-area {
    margin-top: 40px;
}

/* =========================================
   11b. EFFETTO "GLOW" LUXURY SUI FONDI SCURI
   ========================================= */

/* Crea un alone luminoso dietro gli archi solo nelle sezioni scure (es. Chi Siamo) */
.bg-dark-pattern .arch-wrapper-mirrored::before,
.bg-dark-pattern .arch-wrapper-standard::before {
    content: '';
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at center, rgba(230, 208, 165, 0.12) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

/* Spinge l'immagine in primo piano e ne scurisce l'ombra per staccarla dal fondo */
.bg-dark-pattern .image-arch-mirrored,
.bg-dark-pattern .image-arch-standard {
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* =========================================
   13. SEZIONE RECENSIONI E CARD
   ========================================= */

/* Utilities di Allineamento e Spaziatura */
.text-center {
    text-align: center;
}

.section-header-center {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mt-50 {
    margin-top: 50px;
}

/* Griglia Recensioni (Passata a Flexbox per centratura automatica su Tablet) */
.reviews-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* Design della singola Card Recensione */
.review-card {
    flex: 1 1 300px;
    max-width: 400px;
    /* Impedisce che diventino giganti quando sono sole */
    background: #ffffff;
    padding: 40px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 68, 63, 0.05);
    border: 1px solid rgba(230, 208, 165, 0.3);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 68, 63, 0.1);
}

/* Elementi interni alla Card */
.review-rating {
    color: var(--clr-accent);
    font-size: 1.5rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.review-text {
    font-family: var(--font-body);
    color: var(--clr-primary-dark);
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* Area Autore (Flexbox) */
.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.review-author__name {
    font-family: var(--font-condensed);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--clr-primary);
    letter-spacing: 1px;
}

.review-author__divider {
    width: 20px;
    height: 1px;
    background: var(--clr-accent);
}

.review-author__source {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #999;
}

/* Link Sottolineato per call to action testuali */
.link-underline-accent {
    font-family: var(--font-condensed);
    color: var(--clr-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.link-underline-accent:hover {
    color: var(--clr-accent);
    border-bottom-color: var(--clr-accent);
}

/* =========================================
   14. SEZIONE SIGNATURE DRINKS E UTILITIES
   ========================================= */

/* Nuova utility per il margine inferiore (Header sezione) */
.mb-80 {
    margin-bottom: 80px;
}

/* Riduzione automatica per Tablet e Mobile */
@media (max-width: 900px) {
    .mb-80 {
        margin-bottom: 30px !important;
        /* Il !important serve a vincere contro i blocchi nativi di Gutenberg */
    }
}

/* Modificatore per i testi descrittivi centrati (es. sottotitoli sezioni) */
.text-body-large--intro {
    margin: 0 auto;
    max-width: 800px;
    opacity: 0.9;
    text-align: center;
    margin-top: 1.5rem;
}

/* =========================================
   15. SEZIONE SCENOGRAFIE - MOODBOARD BENTO
   ========================================= */

/* Griglia Base (Impostazione Mobile-First) */
.scenografie-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.scenografie-bento__item {
    position: relative;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Forziamo la flessibilità geometrica annullando i rapporti 1:1 nativi dei blocchi generici */
.scenografie-bento .image-crossfade-wrapper,
.scenografie-bento .image-arch-standard,
.scenografie-bento .image-arch-mirrored {
    aspect-ratio: auto !important;
    width: 100%;
    height: 100%;
}

/* --- COMPOSIZIONE EDITORIALE SU DESKTOP (Min 900px) --- */
@media (min-width: 900px) {
    .scenografie-bento {
        grid-template-columns: 1.1fr 1fr;
        /* La colonna sinistra è leggermente più imponente */
        grid-template-rows: repeat(2, 1fr);
        gap: 40px;
        margin-bottom: 70px;
    }

    /* Regia della griglia asimmetrica */
    .bento-item--main {
        grid-column: 1;
        grid-row: 1 / span 2;
        /* Si espande su entrambe le righe diventando un ritratto slanciato */
    }

    .bento-item--side-top {
        grid-column: 2;
        grid-row: 1;
        aspect-ratio: 4 / 3;
        /* Blocca la riga superiore in un elegante 4:3 cinematico */
    }

    .bento-item--side-bottom {
        grid-column: 2;
        grid-row: 2;
        aspect-ratio: 4 / 3;
        /* Blocca la riga inferiore */
    }

    /* Feedback interattivo Luxury al passaggio del mouse */
    @media (hover: hover) {
        .scenografie-bento__item:hover {
            transform: translateY(-6px) scale(1.01);
            z-index: 10;
        }
    }
}

/* --- RITMO DI COMPOSIZIONE SU SMARTPHONE (Max 899px) --- */
@media (max-width: 899px) {
    .bento-item--main {
        aspect-ratio: 4 / 5;
        /* Ritratto editoriale per l'impatto iniziale */
    }

    .bento-item--side-top {
        aspect-ratio: 1 / 1;
        /* Quadrato perfetto incentrato sul dettaglio */
    }

    .bento-item--side-bottom {
        aspect-ratio: 4 / 3;
        /* Chiusura orizzontale panoramica */
    }
}

/* Struttura interna per la sovrapposizione perfetta del Crossfade */
.scenografie-bento .image-crossfade-wrapper {
    position: relative;
    background: transparent;
    display: block;
}

.image-crossfade-back,
.image-crossfade-front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-crossfade-back {
    z-index: 1;
}

.image-crossfade-front {
    transition: opacity 1.5s ease-in-out !important;
    /* Sfalsamento lussuoso e morbido */
    z-index: 2;
}

.image-crossfade-front.fade-out {
    opacity: 0 !important;
}

/* Regola salvavita: costringe la linea d'oro dell'arco a seguire le nuove forme asimmetriche */
.scenografie-bento .arch-wrapper-standard::after,
.scenografie-bento .arch-wrapper-mirrored::after {
    z-index: 3 !important;
}

/* =========================================
   16. ANIMAZIONI DI SCROLL (REVEAL LUXURY)
   ========================================= */

/* Stati di partenza (Invisibili e spostati) */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    /* La curva cubic-bezier crea quell'effetto "frenata dolce" alla fine del movimento */
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
    /* Ottimizza le performance grafiche */
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

/* Stato di arrivo (Aggiunto dal JavaScript quando si scorre) */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translate(0);
}

/* Ritardi per l'effetto a cascata (Staggering) */
.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* Su mobile, riduciamo lo spostamento per non creare scroll orizzontali accidentali */
@media (max-width: 767px) {
    .reveal-left {
        transform: translateX(-20px);
    }

    .reveal-right {
        transform: translateX(20px);
    }
}

/* =========================================
   17. SEZIONE CONTATTI E FOOTER FORM
   ========================================= */
.contact-footer-section.bg-dark-pattern::before {
    display: none !important;
}

.contact-footer-section {
    position: relative;
    background: linear-gradient(rgba(0, 42, 39, 0.85), rgba(0, 42, 39, 0.95)) !important;
    border-top: none !important;
}

.contact-footer-section::before {
    /* Delicate gold line accent at the top */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(230, 208, 165, 0.4) 50%, transparent 100%);
    z-index: 1;
}

.contact-footer-section > * {
    position: relative;
    z-index: 2;
}

.contact-footer-container {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   18. CENTRATURA E RIORDINO EDITORIALE SU MOBILE
   ========================================= */

@media (max-width: 900px) {

    /* Trasformiamo la griglia base in una colonna flessibile */
    .grid-split {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Dissolviamo la scatola del testo per riordinare gli elementi */
    .grid-split__content {
        display: contents;
    }

    /* --- REGIA DELL'ORDINE DEGLI ELEMENTI --- */

    /* 1. Kicker (Sempre primo in cima) */
    .grid-split__content .text-kicker {
        order: 1;
        justify-content: center;
        margin-bottom: 15px;
        width: 100%;
    }

    /* 2. Titolo (Subito sotto il kicker) */
    .grid-split__content .heading-section,
    .grid-split__content .heading-display {
        order: 2;
        margin-bottom: 20px;
        width: 100%;
    }

    /* 3. L'Immagine (Incastrata al centro, sotto il titolo) */
    .grid-split__media {
        order: 3;
        margin-bottom: 35px;
        width: 100%;
    }

    /* 4. I Paragrafi e i testi descrittivi */
    .grid-split__content p {
        order: 4;
        text-align: center;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 5. Liste, Pulsanti e Aree d'azione (In fondo) */
    .grid-split__content .action-area,
    .grid-split__content>div:not(.heading-section):not(.text-kicker) {
        order: 5;
        order: 99 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* FIX DEFINITIVO: Centra l'intero blocco lista, ma mantiene i testi allineati a sinistra tra loro */
    .grid-split__content .package-list {
        order: 4;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* Mantiene le stelline allineate a sinistra */
        width: max-content !important;
        /* Stringe la scatola attorno al testo più lungo */
        max-width: 90% !important;
        text-align: left !important;
        margin: 0 auto !important;
        /* Centra la lista sotto il titolo della proposta */
    }

    /* --- ECCEZIONE SEZIONE VISION (Immagine tra i paragrafi) --- */
    #vision .grid-split__media {
        display: none;
    }

    #vision .mobile-only-image {
        display: flex !important;
        order: 5 !important;
        width: 100%;
        justify-content: center;
    }

    #vision .grid-split__content p:nth-of-type(1) {
        order: 4;
    }

    #vision .grid-split__content p:nth-of-type(2) {
        order: 6;
    }

    #vision .grid-split__content .action-area {
        order: 7;
    }
}

/* ==========================================================================
   PAGINA SERVIZI - HERO COMPLESSA (VERSIONE LIGHT - COLORI INVERTITI)
   ========================================================================== */

.services-hero--light {
    position: relative;
    width: 100vw !important;
    min-height: 100svh !important;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden !important;
    z-index: 10;
    display: flex;
    align-items: center;
    background-color: var(--clr-light) !important;
    /* Inversione: Sfondo Chiaro Crema */
    padding: 140px 0 80px 0 !important;
    margin: 0 !important;
}

/* Forza l'asset del brand in background a diventare scuro ed etereo */
.services-rotator-light {
    filter: brightness(0) opacity(0.03) !important;
}

.services-hero--light .services-hero__container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto auto auto;
    align-items: center;
    gap: 0 40px;
    position: relative;
    z-index: 5;
}

/* --- COLONNA TESTI INVERTITI (VERDE SCURO) --- */
.services-hero--light .services-kicker-item {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 20px;
}

.services-hero--light .services-title-item {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    margin-bottom: 25px;
    color: var(--clr-primary-dark) !important;
    /* Titolo principale in Verde Scuro */
    font-weight: 600 !important;
    font-family: var(--font-condensed) !important;
}

#chi-siamo .heading-display {
    font-family: var(--font-condensed);
}

/* La parola d'accento (Mixology) diventa un corsivo verde profondo ed elegante, senza riflessi metallici */
.services-accent-dark {
    font-family: var(--font-heading);
    font-style: italic;
    text-transform: none;
    color: var(--clr-primary) !important;
    display: block;
    margin-top: 10px;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    animation: none !important;
}

.services-hero--light .services-text-item {
    grid-column: 1;
    grid-row: 3;
    font-family: var(--font-body);
    color: var(--clr-primary-dark) !important;
    /* Testo descrittivo in Verde Scuro */
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 95%;
    margin: 0;
    text-shadow: none !important;
    /* Rimosso l'effetto ombra per una lettura pulitissima sul chiaro */
}

.services-hero--light .services-btn-item {
    grid-column: 1;
    grid-row: 4;
    margin-top: 35px;
    text-align: left;
    display: flex;
    justify-content: flex-start;
}

/* --- COLONNA MEDIA COLLAGE INVARIATA (CON ADATTAMENTO BORDI) --- */
.services-hero--light .services-hero__media-col {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
}

.services-hero--light .media-collage {
    position: relative;
    width: 100%;
    max-width: 650px;
    display: flex;
    align-items: center;
}

.services-hero--light .media-collage__main {
    width: 75%;
    position: relative;
    z-index: 2;
}

.services-hero--light .media-collage__secondary {
    width: 50%;
    aspect-ratio: 3 / 4;
    position: absolute;
    bottom: -15%;
    right: -5%;
    z-index: 3;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
    border: 6px solid var(--clr-light);
    /* Il bordo della seconda foto si adatta allo sfondo crema */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.services-hero--light .media-collage__secondary img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-hero--light .services-seal-override {
    top: -20px !important;
    left: 20px !important;
    width: 130px !important;
    z-index: 10;
}


/* ==========================================================================
   RESPONSIVE DESIGN LIGHT HERO (ORDINE COMPOSIZIONE PRESERVATO)
   ========================================================================== */

@media (max-width: 1024px) {
    .services-hero--light .services-hero__container {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .services-hero--light .services-kicker-item {
        order: 1;
        justify-content: center;
        margin-bottom: 25px;
    }

    .services-hero--light .services-hero__media-col {
        order: 2;
        width: 100% !important;
        justify-content: center;
        margin-bottom: 75px !important;
    }

    .services-hero--light .services-title-item {
        order: 3;
        text-align: center;
        margin-bottom: 15px;
        font-weight: 600 !important;
    }

    .services-hero--light .services-text-item {
        order: 4;
        text-align: center;
        max-width: 700px;
        margin-bottom: 0;
    }

    .services-hero--light .services-btn-item {
        order: 5;
        justify-content: center;
        margin-top: 25px;
        margin-bottom: 20px;
        width: 100%;
    }

    .services-hero--light .media-collage {
        max-width: 500px;
    }

    .services-hero--light .services-seal-override {
        top: -15px !important;
        left: 0px !important;
        width: 110px !important;
    }
}

@media (max-width: 767px) {
    .services-hero--light {
        padding-top: 100px !important;
        min-height: auto !important;
        padding-bottom: 40px !important;
    }

    .services-hero--light .services-hero__media-col {
        margin-bottom: 55px !important;
    }

    .services-hero--light .media-collage {
        max-width: 310px;
    }

    .services-hero--light .media-collage__secondary {
        right: -2%;
        bottom: -12%;
        width: 52%;
        border-width: 4px;
    }

    .services-hero--light .services-seal-override {
        top: -20px !important;
        left: -10px !important;
        width: 85px !important;
    }
}

/* ==========================================================================
   SEZIONE PACCHETTI - DETTAGLI DI STILE E NAVIGAZIONE (PULITO)
   ========================================================================== */

.services-packages {
    position: relative;
    width: 100vw !important;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 60px !important;
    /* Lascia spazio al trigger di scorrimento */
}

/* Centratura Intestazione interna alla sezione */
.services-section-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.services-section-header .text-kicker {
    justify-content: center;
    margin-bottom: 15px;
}

.services-section-header .heading-display {
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* --- INDICATORE GEOMETRICO SCROLL NEXT (PILLOLA ELLITTICA) --- */
.next-section-trigger {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    position: relative;
    z-index: 10;
}

.scroll-next-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-next-text {
    font-family: var(--font-condensed);
    color: var(--clr-light-alpha);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

/* Freccia a Pillola/Ovale Perfetto */
.scroll-next-arrow {
    width: 80px;
    height: 40px;
    border: 1px solid rgba(230, 208, 165, 0.2);
    border-radius: 50px;
    /* Trasforma il cerchio in ellisse */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: rgba(0, 42, 39, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: pulseArrow 2s infinite alternate;
}

.scroll-next-arrow svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* Effetti di interazione raffinati (Hover) */
.scroll-next-link:hover .scroll-next-text {
    opacity: 1;
    color: var(--clr-accent);
    transform: translateY(-2px);
}

.scroll-next-link:hover .scroll-next-arrow {
    border-color: var(--clr-accent);
    background-color: var(--clr-primary-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.scroll-next-link:hover .scroll-next-arrow svg {
    transform: translateY(3px);
}

@keyframes pulseArrow {
    0% {
        transform: translateY(0);
        border-color: rgba(230, 208, 165, 0.2);
    }

    100% {
        transform: translateY(6px);
        border-color: rgba(230, 208, 165, 0.6);
    }
}

@media (max-width: 767px) {
    .next-section-trigger {
        margin-top: 30px;
    }

    /* Proporzione pillola mantenuta su mobile */
    .scroll-next-arrow {
        width: 75px;
        height: 38px;
    }
}

/* ==========================================================================
   SEZIONE BOLLICINE - MICRO STILI AGGIUNTIVI
   ========================================================================== */

.bollicine-features-list {
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
}

.bollicine-features-list li {
    font-family: var(--font-body);
    color: var(--clr-primary-dark);
    font-weight: 500;
    font-size: 1.05rem;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Stellina Verde Scuro per risaltare sul fondo Crema */
.bollicine-features-list li::before {
    content: '✦';
    color: var(--clr-primary);
    font-size: 1.2rem;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .bollicine-features-list li {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
}

/* Pulizia totale dello sfondo per i Signature Drinks (Home + Pagina Servizi) */
#signatures.bg-dark-pattern::before,
#cocktail-list.bg-dark-pattern::before {
    display: none !important;
}

/* Centriamo l'ultima riga di Cocktail (essendo 7 sono dispari) */
.signature-grid {
    justify-content: center;
}


/* ==========================================================================
   HERO SPECCHIATA (VARIANTE CHI SIAMO)
   ========================================================================== */
.circus-hero--mirrored .circus-hero__media-col {
    left: 0;
    right: 50%;
    /* Sposta l'immagine a sinistra */
}

.circus-hero--mirrored .circus-hero__text-col {
    margin-left: auto;
    /* Spinge il testo a destra */
}

.circus-hero--mirrored .bleed-arch {
    border-radius: 0 400px 0 0;
    /* Curva in alto a destra */
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.4);
}

.circus-hero--mirrored .bleed-arch::before {
    background: linear-gradient(to left, var(--clr-primary-dark) 0%, rgba(0, 42, 39, 0.2) 20%, transparent 40%);
}

.circus-hero--mirrored .bleed-arch::after {
    border-left: none;
    border-right: 1px solid rgba(230, 208, 165, 0.4);
    border-radius: 0 380px 0 0;
}

/* Su Tablet/Mobile la curva specchiata si adatta nativamente */
@media (max-width: 1024px) {
    .circus-hero--mirrored .bleed-arch::after {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 105px 0 0 !important;
    }
}


/* ==========================================================================
   RESTYLING ED IMPAGINAZIONE FLUENT FORMS (VERSIONE SU SFONDO SCURO)
   ========================================================================== */
/* ==========================================================================
   GLASSMORPHISM FORM CARD (GLOBAL)
   ========================================================================== */
.glass-form-card {
    background: rgba(0, 42, 39, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(230, 208, 165, 0.15);
    border-radius: 24px;
    padding: 35px 25px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    z-index: 10;
}
@media (min-width: 1025px) {
    .glass-form-card {
        padding: 40px;
    }
}

/* Resetta e pulisce i contenitori grezzi di Fluent Forms */
.circus-contact-form-wrapper .fluentform,
.circus-contact-form-wrapper form,
.circus-contact-form-wrapper .ff-form-management {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 1. Spaziatura tra le righe del modulo */
.circus-contact-form-wrapper .ff-el-group {
    margin-bottom: 24px !important;
}

/* 2. Etichette sopra i campi (Label): Testo chiaro ed elegante */
.circus-contact-form-wrapper label,
.circus-contact-form-wrapper .ff-el-form-check_ {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--clr-accent) !important;
    /* Colore Champagne per massima eleganza */
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}

/* Asterisco obbligatorio */
.circus-contact-form-wrapper .ff-el-is-required label::after {
    content: " *" !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* 3. I Campi di Input: Linea sottile, bianchi e puliti all'interno */
.circus-contact-form-wrapper .ff-el-form-control,
.circus-contact-form-wrapper input[type="text"],
.circus-contact-form-wrapper input[type="email"],
.circus-contact-form-wrapper select,
.circus-contact-form-wrapper textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(230, 208, 165, 0.2) !important;
    border-radius: 50px !important;
    /* Pillola fluida per i campi */
    padding: 12px 24px !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    color: var(--clr-primary-dark) !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

/* Area messaggio quadrata ma con angoli morbidi luxury */
.circus-contact-form-wrapper textarea.ff-el-form-control {
    border-radius: 18px !important;
    height: 120px !important;
    padding: 14px 24px !important;
}

/* Cliccando dentro i campi */
.circus-contact-form-wrapper .ff-el-form-control:focus {
    border-color: var(--clr-accent) !important;
    box-shadow: 0 0 0 3px rgba(230, 208, 165, 0.15) !important;
    outline: none !important;
}

/* Freccia personalizzata verde scuro per la tendina dei Pacchetti */
.circus-contact-form-wrapper select.ff-el-form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300443f'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 40px !important;
}

/* 4. Testo della spunta Privacy Policy (Colore chiaro) */
.circus-contact-form-wrapper .ff-el-form-check-label {
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    color: var(--clr-light) !important;
    opacity: 0.9;
}

/* 5. Il Pulsante SUBMIT: Centrato ed Ellittico a Pillola */
.circus-contact-form-wrapper .ff-el-group.ff-el-submit-btn {
    margin-top: 30px !important;
    /* 4. FIX: Centratura infallibile del pulsante */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.circus-contact-form-wrapper .ff-btn-submit {
    font-family: var(--font-condensed) !important;
    background-color: transparent !important;
    color: var(--clr-accent) !important;
    padding: 14px 45px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    width: auto !important;
    display: inline-flex !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 50% !important;
    border: 1px solid var(--clr-accent) !important;
    /* Forma ovale perfetta */
    margin: 0 !important;
    float: none !important;
}

/* Hover del bottone (Inverte i colori lussuosamente passando a solid) */
.circus-contact-form-wrapper .ff-btn-submit:hover {
    background-color: var(--clr-accent) !important;
    color: var(--clr-primary-dark) !important;
    border: 1px solid var(--clr-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
}

/* 6. Layout rigido per Nome e Cognome affiancati */
.circus-contact-form-wrapper .ff-t-container {
    display: flex !important;
    gap: 15px !important;
    margin-bottom: 0 !important;
}

.circus-contact-form-wrapper .ff-t-cell {
    flex: 1 !important;
    width: auto !important;
    max-width: 100% !important;
}

@media (max-width: 600px) {
    .circus-contact-form-wrapper .ff-t-container {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .circus-contact-form-wrapper .ff-t-cell {
        margin-bottom: 24px !important;
    }

    .circus-contact-form-wrapper .ff-btn-submit {
        width: 100% !important;
        /* Bottone pieno per un tocco facilissimo su mobile */
    }
}

/* ==========================================================================
   HEADER INTELLIGENTE — trasparente su dark, pill su light
   ========================================================================== */

/* BASE: Pill verde su TUTTE le pagine 
   (default sicuro per sfondi chiari come la pagina Pacchetti) */
#header [data-row="middle"]>.ct-container-fluid {
    margin-top: 20px !important;
    border-radius: 60px !important;
    background-color: rgba(0, 42, 39, 0.95) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    box-shadow:
        0 2px 0 rgba(230, 208, 165, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.30) inset,
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.20) !important;
    width: 92% !important;
    max-width: 1500px !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation: headerSlideDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes headerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* OVERRIDE: Trasparente sulle pagine con hero SCURA
   → homepage (.home) + le tue pagine scure (aggiungi i page-id che ti servono) */
body.home #header [data-row="middle"]>.ct-container-fluid,
body.page-id-CHI_SIAMO #header [data-row="middle"]>.ct-container-fluid {
    background-color: rgba(0, 42, 39, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(230, 208, 165, 0.12) !important;
}

/* Hover sulle dark pages: appare leggermente */
body.home #header [data-row="middle"]>.ct-container-fluid:hover,
body.page-id-CHI_SIAMO #header [data-row="middle"]>.ct-container-fluid:hover {
    background-color: rgba(0, 42, 39, 0.85) !important;
    border-color: rgba(230, 208, 165, 0.2) !important;
}

/* SCROLLED: pill compatto su tutte le pagine (JS aggiunge .header-scrolled al body) */
.header-scrolled #header [data-row="middle"]>.ct-container-fluid {
    margin-top: 8px !important;
    width: 85% !important;
    background-color: rgba(0, 42, 39, 0.96) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    box-shadow:
        0 2px 0 rgba(230, 208, 165, 0.08) inset,
        0 -1px 0 rgba(0, 0, 0, 0.40) inset,
        0 12px 40px rgba(0, 0, 0, 0.50),
        0 4px 12px rgba(0, 0, 0, 0.30) !important;
    border: none !important;
}

/* Bordo gradiente (solo su stato non-scrolled e non-trasparente) */
#header [data-row="middle"]>.ct-container-fluid::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 60px !important;
    padding: 1px !important;
    background: linear-gradient(135deg,
            rgba(230, 208, 165, 0.35) 0%,
            rgba(230, 208, 165, 0.08) 40%,
            rgba(255, 255, 255, 0.04) 60%,
            rgba(230, 208, 165, 0.18) 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Tema base riga header */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: 65px;
    background-color: transparent;
    background-image: none;
    --theme-border-top: none;
    --theme-border-bottom: none;
    --theme-box-shadow: none;
    position: relative;
}

/* --- HERO DINAMICA LANDING PAGES --- */
.hero-dynamic-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: slowZoom 25s linear infinite alternate;
}

.hero-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 15, 13, 0.5), rgba(10, 15, 13, 0.85));
    z-index: 1;
}

@keyframes slowZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* ==========================================================================
   19. PAGINA CONTATTI (HERO)
   ========================================================================== */
.contact-hero-link {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.contact-hero-link:hover {
    color: var(--clr-accent);
    transform: translateY(-3px);
}

.contact-info-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--clr-accent);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* ==========================================================================
   20. SEO FOOTER LINKS & STYLES
   ========================================================================== */

/* Contenitore Principale Footer */
.services-drinks {
    background-color: var(--clr-primary-dark) !important;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 80%) !important;
    padding: 70px 0 50px 0;
    border-top: 1px solid rgba(230, 208, 165, 0.15);
    position: relative;
    z-index: 10;
}

.site-custom-footer {
    background: linear-gradient(rgba(0, 36, 33, 0.88), rgba(0, 22, 20, 0.95)) !important;
    padding: 70px 0 50px 0;
    border-top: 1px solid rgba(230, 208, 165, 0.15);
    position: relative;
    z-index: 10;
}

@media (max-width: 900px) {

    .site-custom-footer .footer-container,
    .site-custom-footer .footer-grid {
        text-align: center;
        justify-items: center;
        align-items: center;
    }
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
}

/* Tipografia Colonna 1 */
.footer-logo {
    max-width: 200px !important;
    width: auto !important;
    height: auto !important;
    max-height: 90px;
    /* object-fit protegge il rapporto d'aspetto anche se un genitore
       (grid/flex) impone un box diverso da quello naturale dell'immagine */
    object-fit: contain;
    margin-bottom: 20px;
    display: inline-block;
}

.footer-brand-title {
    font-family: var(--font-heading, serif);
    color: var(--clr-accent, #e6d0a5);
    font-size: 2.2rem;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
}

.footer-text {
    font-family: var(--font-body, sans-serif);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.footer-contact-link {
    color: var(--clr-accent, #e6d0a5);
    text-decoration: none;
    font-family: var(--font-condensed, sans-serif);
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}

.footer-contact-link:hover {
    opacity: 0.8;
}

/* Intestazioni Liste (Colonna 2 e 3) */
.footer-heading {
    font-family: var(--font-condensed, sans-serif);
    color: #ffffff;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 25px 0;
}

/* Liste e Link SEO */
.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-link-list li {
    margin-bottom: 12px;
}

.seo-footer-link {
    font-family: var(--font-body, sans-serif);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.seo-footer-link:hover {
    color: var(--clr-accent, #e6d0a5);
    transform: translateX(5px);
    /* Invece del padding, il transform è più fluido sulle animazioni */
}

/* ==========================================================================
   21. STILI PAGINA GALLERIA BRAND
   ========================================================================== */

/* Animazione più profonda sulle immagini per la galleria */
.page-template-template-galleria .scenografie-bento__item {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-template-template-galleria .scenografie-bento__item:hover {
    transform: translateY(-8px) scale(1.02);
    z-index: 20;
}

/* Effetto glow al passaggio del mouse */
.page-template-template-galleria .scenografie-bento__item:hover .image-crossfade-front,
.page-template-template-galleria .scenografie-bento__item:hover .image-crossfade-back {
    filter: contrast(1.05) brightness(1.05);
}

/* Linea dorata che si espande morbidamente */
.page-template-template-galleria .arch-wrapper-standard::after,
.page-template-template-galleria .arch-wrapper-mirrored::after {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-template-template-galleria .scenografie-bento__item:hover .arch-wrapper-standard::after,
.page-template-template-galleria .scenografie-bento__item:hover .arch-wrapper-mirrored::after {
    inset: 5px;
    border-color: rgba(230, 208, 165, 0.8);
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   22. NUOVI COMPONENTI FOOTER & SOCIAL
   ========================================================================== */
.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-social-link {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social-link:hover {
    color: var(--clr-accent);
    transform: translateY(-3px);
}

.footer-copyright-bar {
    border-top: 1px solid rgba(230, 208, 165, 0.1);
    margin-top: 50px;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.copyright-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.copyright-links a:hover {
    color: var(--clr-accent);
}

.copyright-links .divider {
    margin: 0 10px;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .footer-copyright-bar {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .footer-socials {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   23. MENU MOBILE OVERLAY & FLOATING PILL
   ========================================================================== */

/* Nascondi header mobile nativo Blocksy se presente per non far confusione */
.ct-header [data-device="mobile"],
.ct-header .ct-toggle {
    display: none !important;
}

.mobile-side-tab-container {
    position: fixed;
    top: 20%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    display: none;
    /* Solo su mobile */
}

@media (max-width: 899px) {
    .mobile-side-tab-container {
        display: block;
    }
}

.mobile-side-tab {
    background: rgba(0, 42, 39, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(230, 208, 165, 0.3);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--clr-accent);
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.mobile-side-tab:hover,
.mobile-side-tab:active {
    background: #000000;
}

.tab-text {
    font-family: var(--font-condensed);
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* OVERLAY */
.custom-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    /* dvh per dynamic viewport support */
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
}

.custom-mobile-menu-overlay.is-open {
    pointer-events: all;
    opacity: 1;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    /* Stesso registro cromatico del footer: verde profondo che scivola verso il nero */
    background: linear-gradient(165deg, #003a35 0%, #002a27 45%, #001614 100%);
    z-index: 1;
}

/* Texture radiale delicata, come le sezioni scure del sito */
.mobile-menu-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(230, 208, 165, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.mobile-menu-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 4vw, 32px) clamp(24px, 6vw, 40px);
    padding-bottom: calc(clamp(20px, 4vw, 32px) + env(safe-area-inset-bottom, 0px));
}

.mobile-menu-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 0;
}

.mobile-menu-logo {
    height: clamp(100px, 26vw, 140px);
    width: auto;
    display: block;
    margin: 0 auto clamp(20px, 4.5vh, 32px) auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
}

/* Bottone di chiusura circolare, in linea con gli altri controlli del sito */
.mobile-menu-close {
    background: none;
    border: 1px solid rgba(230, 208, 165, 0.35);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    color: var(--clr-accent);
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.mobile-menu-close:active {
    transform: rotate(90deg);
    border-color: rgba(230, 208, 165, 0.8);
}

.mobile-menu-nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.mobile-menu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* La hairline dorata del design system separa il sigillo dalle voci */
.mobile-menu-nav ul::before {
    content: '';
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto clamp(22px, 4vh, 34px);
    background: linear-gradient(90deg, transparent 0%, rgba(230, 208, 165, 0.5) 50%, transparent 100%);
}

.mobile-menu-nav li {
    margin-bottom: clamp(16px, 3vh, 26px);
    overflow: hidden;
    /* Per animazione reveal */
}

.mobile-menu-nav li:last-child {
    margin-bottom: 0;
}

.menu-link-item {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.menu-link-item:hover .menu-text {
    color: var(--clr-accent);
    transform: translateX(10px);
}

.menu-num {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--clr-accent);
    font-weight: 600;
    opacity: 0.6;
}

.menu-text {
    font-family: var(--font-heading, serif);
    font-size: clamp(2rem, 7.5vw, 2.6rem);
    font-weight: 300;
    line-height: 1.15;
    color: #ffffff;
    transition: all 0.4s ease;
}

/* Pagina corrente: testo champagne e stellina Circus */
.menu-link-item.is-active .menu-text {
    color: var(--clr-accent);
}

.menu-link-item.is-active .menu-text::after {
    content: ' ✦';
    font-size: 0.45em;
    vertical-align: super;
    opacity: 0.85;
}

.is-open .menu-link-item {
    transform: translateY(0);
    opacity: 1;
}

.is-open li:nth-child(1) .menu-link-item {
    transition-delay: 0.1s;
}

.is-open li:nth-child(2) .menu-link-item {
    transition-delay: 0.15s;
}

.is-open li:nth-child(3) .menu-link-item {
    transition-delay: 0.2s;
}

.is-open li:nth-child(4) .menu-link-item {
    transition-delay: 0.25s;
}

.is-open li:nth-child(5) .menu-link-item {
    transition-delay: 0.3s;
}

.menu-highlight .menu-text {
    color: var(--clr-accent);
    font-style: italic;
}

.mobile-menu-footer {
    border-top: 1px solid rgba(230, 208, 165, 0.2);
    padding-top: clamp(16px, 3vh, 25px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.mobile-menu-footer p {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.mobile-menu-footer strong {
    color: #ffffff;
    font-family: var(--font-condensed);
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* ==========================================================================
   SEO LANDING PAGE SPECIFIC STYLES
   ========================================================================== */

/* Il titolo pagina (dinamico, a volte lungo: es. "Catering Open Bar Milano Aziendale")
   passa dal font script a uno condensato leggibile. Lo script resta solo sulle
   parole fisse e brevi (es. "Circus.", "senza compromessi.") tramite .text-accent
   e .text-accent--green, che impostano il proprio font-family e vincono per specificità. */
.page-template-page-seo-landing .heading-display {
    font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
    font-family: var(--font-condensed);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

/* Hero split: i titoli città sono più lunghi delle righe fisse della home
   ("RENDIAMO UNICI"): consenti il wrap e contieni il corpo massimo del font */
.page-template-page-seo-landing .hero-title-main {
    white-space: normal !important;
    font-size: clamp(2.6rem, 4vw, 4.2rem) !important;
    text-transform: uppercase;
}

/* Hero landing su DESKTOP: torna il vecchio hero centrato con foto a tutta
   pagina e slow zoom. Sotto i 1025px resta il layout split (foto ad arco
   sopra, testo sotto) che eredita il comportamento mobile di .circus-hero. */
.hero-landing-desktop-bg {
    display: none;
}

@media (min-width: 1025px) {
    .page-template-page-seo-landing .circus-hero .hero-landing-desktop-bg {
        display: block;
        position: absolute;
        inset: 0;
        overflow: hidden;
        z-index: 1;
    }

    /* Il badge rotante gira sopra la foto, come nel vecchio hero */
    .page-template-page-seo-landing .circus-hero .hero-bg-overflow {
        z-index: 2;
        opacity: 0.15;
    }

    /* Via l'arco fotografico laterale: lo sfondo copre tutto */
    .page-template-page-seo-landing .circus-hero .circus-hero__media-col {
        display: none;
    }

    .page-template-page-seo-landing .circus-hero__container {
        justify-content: center;
    }

    .page-template-page-seo-landing .circus-hero__text-col {
        width: 100%;
        max-width: 900px;
        align-items: center;
        text-align: center;
    }

    .page-template-page-seo-landing .circus-hero__text-col .hero-kicker-line {
        justify-content: center;
    }

    .page-template-page-seo-landing .circus-hero__text-col .hero-title-main {
        text-align: center;
        text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    }

    .page-template-page-seo-landing .circus-hero__text-col .hero-body-text {
        text-align: center;
        max-width: 640px;
    }

    .page-template-page-seo-landing .circus-hero__text-col .hero-btn-group {
        justify-content: center !important;
    }

    /* Il vecchio hero desktop non aveva le statistiche */
    .page-template-page-seo-landing .circus-hero__text-col .hero-stats-wrapper {
        display: none;
    }
}

/* Badge rotante dedicato all'hero delle landing (le altre pagine restano su badge-def-1) */
.page-template-page-seo-landing .circus-hero .hero-bg-rotator {
    background-image: url('/wp-content/uploads/2026/07/BADGE-MIN-scaled.png');
}

/* Paragrafo "esperienza" nell'hero: solo desktop, su mobile l'hero resta compatto */
.hero-body-text--vision {
    order: 4;
}

@media (max-width: 1024px) {
    .hero-body-text--vision {
        display: none;
    }
}

/* La sezione card parte dallo stesso identico colore su cui muore il gradient
   dell'hero (#002a27): i due background si leggono come uno solo.
   Il ::before di .bg-dark-pattern (badge rotante) resta attivo. */
.page-template-page-seo-landing #pacchetti.bg-dark-pattern {
    background: #002a27 !important;
}

/* --- BADGE WHATSAPP FLOTTANTE (solo landing) --- */
.circus-wa-badge {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;
    /* Sotto la linguetta menu mobile (9999) e l'overlay (10000) */
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #25D366;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.circus-wa-badge svg {
    width: 30px;
    height: 30px;
    display: block;
}

.circus-wa-badge:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);
    color: #ffffff;
}

@media (max-width: 480px) {
    .circus-wa-badge {
        right: 14px;
        bottom: 14px;
        width: 52px;
        height: 52px;
    }
}

.page-template-page-seo-landing .heading-section {
    font-size: clamp(2rem, 4vw, 3rem) !important;
}

@media screen and (max-width: 768px) {
    /* Titoli città lunghi su schermi piccoli: evita 3-4 righe di testo enorme */
    .page-template-page-seo-landing .heading-display {
        font-size: clamp(1.7rem, 6.5vw, 2.3rem) !important;
    }
}

/* =========================================
   CONTATTI PAGE GLASSMORPHISM & HOVERS
   ========================================= */
.hover-accent:hover {
    color: var(--clr-accent) !important;
}

.glass-form-card input, 
.glass-form-card textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.glass-form-card input::placeholder,
.glass-form-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* =========================================
   PAGINE LEGALI (Privacy Policy / Cookie Policy)
   ========================================= */
body.legal-doc-page #main {
    background: var(--clr-light);
}

body.legal-doc-page .entry-content {
    /* !important necessario: una regola globale early in questo file
       (".entry-content { padding: 0 !important }") altrimenti vince sempre,
       a prescindere da specificità/ordine, perché usa anch'essa !important. */
    max-width: 800px !important;
    margin: 0 auto !important;
    /* padding-top extra per liberare lo spazio dell'header trasparente:
       queste pagine non hanno una hero sotto l'header, quindi va riservato
       a mano lo spazio che altrove viene dalla sezione hero. */
    padding: clamp(130px, 16vw, 190px) 24px clamp(80px, 10vw, 140px) !important;
    width: auto !important;
}

.legal-doc-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 68, 63, 0.12);
}

.legal-doc-title {
    font-family: var(--font-condensed);
    color: var(--clr-primary);
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1.1;
    font-weight: 600;
    margin: 10px 0 0;
}

/* Titolo di sezione (h2) come da default Complianz/Gutenberg */
.legal-doc-body h2,
.legal-doc-body .wp-block-heading {
    font-family: var(--font-condensed);
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 68, 63, 0.12);
}

.legal-doc-body > *:first-child,
.legal-doc-body h2:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-doc-body h3 {
    font-family: var(--font-condensed);
    color: var(--clr-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 0.6rem;
}

.legal-doc-body p,
.legal-doc-body li,
.legal-doc-body span {
    font-family: var(--font-body);
    color: var(--clr-primary-dark);
}

.legal-doc-body p {
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 1.1rem;
}

.legal-doc-body ul {
    margin: 1rem 0 1.5rem;
    padding-left: 0;
    list-style: none;
}

.legal-doc-body li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.legal-doc-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-accent);
}

.legal-doc-body a {
    color: var(--clr-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-doc-body strong {
    color: var(--clr-primary);
    font-weight: 700;
}

.legal-doc-body em {
    color: rgba(0, 42, 39, 0.65);
}

/* Blocco "documento generato da Complianz": stessa spaziatura dei paragrafi normali */
.legal-doc-body #cmplz-document {
    display: block;
}

.legal-doc-body #cmplz-cookies-overview table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
}

.legal-doc-body #cmplz-cookies-overview th,
.legal-doc-body #cmplz-cookies-overview td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 68, 63, 0.12);
    color: var(--clr-primary-dark);
}

.legal-doc-body #cmplz-cookies-overview th {
    color: var(--clr-primary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* =========================================
   COMPLIANZ: linguetta "Gestisci consenso"
   Di default è un tab bianco quasi invisibile, appena visibile sul
   bordo inferiore della pagina. Ricolorato con i colori del brand e
   reso più visibile a riposo (non solo al passaggio del mouse).
   ========================================= */
#cmplz-manage-consent .cmplz-manage-consent {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-accent) !important;
    font-family: var(--font-condensed);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 42, 39, 0.35);
    bottom: -18px !important;
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus {
    color: #ffffff !important;
}

/* Complianz nasconde di default questo tab sotto i 768px (display:none nel suo
   CSS generato). Su mobile lo mostriamo in basso a sinistra (il tab "MENU"
   presidia già il bordo destro): una pillola compatta ed elegante, non un
   elemento che compete visivamente con la navigazione. */
@media (max-width: 768px) {
    #cmplz-manage-consent {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 9999 !important;
    }

    #cmplz-manage-consent .cmplz-manage-consent {
        display: flex !important;
        position: static !important;
        align-items: center;
        justify-content: center;
        animation: none !important;
        background: rgba(0, 42, 39, 0.95) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(230, 208, 165, 0.35) !important;
        border-radius: 30px !important;
        color: var(--clr-accent) !important;
        padding: 10px 18px !important;
        height: auto !important;
        min-width: 0 !important;
        width: auto !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
        font-family: var(--font-condensed);
        font-size: 0.68rem !important;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none !important;
        white-space: nowrap;
    }
}

/* =========================================
   18. GALLERIA - COLLAGE FOTO DI DESIGN
   ========================================= */

/* Questa pagina non ha una hero sotto l'header (trasparente/overlay):
   va riservato a mano lo spazio in alto, come per le pagine legali. */
.gallery-intro {
    padding-top: clamp(130px, 16vw, 190px) !important;
}

/* --- Griglia a mosaico (CSS columns = collage organico) --- */
.photo-collage {
    columns: 2 260px;
    column-gap: 22px;
}

@media (min-width: 700px) {
    .photo-collage {
        columns: 3 300px;
    }
}

@media (min-width: 1100px) {
    .photo-collage {
        columns: 4 300px;
        column-gap: 28px;
    }
}

.photo-collage__item {
    display: block;
    position: relative;
    width: 100%;
    break-inside: avoid;
    margin: 0 0 22px;
    padding: 0;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--clr-primary);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.photo-collage__item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    .photo-collage__item:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 45px rgba(0, 42, 39, 0.25);
    }

    .photo-collage__item:hover img {
        transform: scale(1.08);
    }
}

.photo-collage__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 18px 16px;
    background: linear-gradient(to top, rgba(0, 42, 39, 0.88), transparent);
    color: var(--clr-light);
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .photo-collage__item:hover .photo-collage__caption {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (hover: none) {
    .photo-collage__caption {
        opacity: 1;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0, 42, 39, 0.75), transparent);
    }
}

/* Il motivo ad arco che ruota sui quattro angoli, riletto in scala ridotta per il collage */
.collage-item--arch-tl {
    border-radius: 90px 16px 16px 16px;
}

.collage-item--arch-tr {
    border-radius: 16px 90px 16px 16px;
}

.collage-item--arch-br {
    border-radius: 16px 16px 90px 16px;
}

.collage-item--arch-bl {
    border-radius: 16px 16px 16px 90px;
}

.collage-item--arch-tl::after,
.collage-item--arch-tr::after,
.collage-item--arch-br::after,
.collage-item--arch-bl::after {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 2;
}

.collage-item--arch-tl::after { border-radius: 78px 6px 6px 6px; }
.collage-item--arch-tr::after { border-radius: 6px 78px 6px 6px; }
.collage-item--arch-br::after { border-radius: 6px 6px 78px 6px; }
.collage-item--arch-bl::after { border-radius: 6px 6px 6px 78px; }

/* --- Collage a riga singola con crossfade (Landing SEO): stesso arco iconico
   e stesso motore di crossfade (js/gallery-crossfade.js, pool 'default') della
   Galleria principale, ridotto a 3 posizioni in fila --- */
.landing-collage-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 3vw, 40px);
    max-width: 1100px;
    margin: 40px auto 0;
}

.landing-collage-row .image-crossfade-wrapper {
    /* Fuori da .scenografie-bento il wrapper non riceve altezza dal grid-item:
       gliela diamo qui, così le immagini in position:absolute del crossfade
       (che altrimenti collasserebbero a 0) hanno una base su cui appoggiarsi. */
    aspect-ratio: 4 / 5;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
    .landing-collage-row .image-crossfade-wrapper:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .landing-collage-row .arch-wrapper-standard:hover::after,
    .landing-collage-row .arch-wrapper-mirrored:hover::after {
        border-color: rgba(230, 208, 165, 0.8);
    }
}

@media (max-width: 700px) {
    .landing-collage-row {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        margin: 40px -5% 0;
        padding: 4px 5% 16px;
        scrollbar-width: thin;
        scrollbar-color: var(--clr-accent) rgba(230, 208, 165, 0.15);
    }

    .landing-collage-row::-webkit-scrollbar {
        height: 6px;
    }

    .landing-collage-row::-webkit-scrollbar-track {
        background: rgba(230, 208, 165, 0.12);
        border-radius: 10px;
    }

    .landing-collage-row::-webkit-scrollbar-thumb {
        background: var(--clr-accent);
        border-radius: 10px;
    }

    .landing-collage-row > .image-crossfade-wrapper {
        flex: 0 0 min(62vw, 260px);
        scroll-snap-align: center;
    }
}

/* --- Lightbox --- */
.circus-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 40px);
    background: rgba(0, 26, 24, 0.97);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
}

.circus-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.circus-lightbox__frame {
    margin: 0;
    max-width: min(90vw, 1100px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.circus-lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.circus-lightbox__caption {
    margin-top: 18px;
    color: var(--clr-accent);
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

.circus-lightbox__close,
.circus-lightbox__nav {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.35s ease;
}

.circus-lightbox__close:hover,
.circus-lightbox__nav:hover {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: var(--clr-primary-dark);
}

.circus-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
}

@media (max-width: 700px) {
    .circus-lightbox {
        flex-direction: column;
        gap: 16px;
    }

    .circus-lightbox__nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .circus-lightbox__nav--prev {
        left: 14px;
    }

    .circus-lightbox__nav--next {
        right: 14px;
    }
}

/* ==========================================================================
   COOKIE CONSENT (Complianz) - LINGUETTA IN BASSO A SINISTRA
   Non tocchiamo /wp-content/uploads/complianz/css/banner-1-optin.css perche'
   viene rigenerato dal plugin ad ogni salvataggio impostazioni: l'override
   vive qui, nel child theme, che si carica dopo e vince sempre con !important.
   ========================================================================== */

/* 1. Banner iniziale: da modale centrale a card compatta, come le altre
   card in glassmorphism del sito (stesso linguaggio di .glass-form-card) */
.cmplz-cookiebanner {
    top: auto !important;
    left: 20px !important;
    bottom: 20px !important;
    transform: none !important;
    width: calc(100% - 40px) !important;
    max-width: 400px !important;
    max-height: calc(100vh - 40px) !important;
    background: rgba(0, 42, 39, 0.92) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(230, 208, 165, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 480px) {
    .cmplz-cookiebanner {
        left: 12px !important;
        bottom: 12px !important;
        width: calc(100% - 24px) !important;
    }
}

.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-category-title,
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-close {
    color: var(--clr-light) !important;
}

.cmplz-cookiebanner .cmplz-message a,
.cmplz-cookiebanner .cmplz-links .cmplz-link {
    color: var(--clr-accent) !important;
}

.cmplz-cookiebanner .cmplz-categories .cmplz-category {
    background-color: rgba(253, 245, 230, 0.06) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
    background-color: var(--clr-accent) !important;
    border-color: var(--clr-accent) !important;
    color: var(--clr-primary-dark) !important;
}

.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences {
    background-color: transparent !important;
    border-color: rgba(230, 208, 165, 0.4) !important;
    color: var(--clr-light) !important;
}

/* 2. Linguetta "Gestisci consenso" (post-scelta): stessa estetica e stesso
   comportamento a scomparsa della linguetta menu mobile, ma a sinistra */
#cmplz-manage-consent .cmplz-manage-consent {
    left: 20px !important;
    right: auto !important;
    background: rgba(0, 42, 39, 0.95) !important;
    border: 1px solid rgba(230, 208, 165, 0.3) !important;
    border-radius: 8px 8px 0 0 !important;
    color: var(--clr-accent) !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4) !important;
}

/* Sul mobile Complianz nasconde di default la linguetta "Gestisci consenso":
   la riportiamo visibile, coerente con la linguetta menu che su mobile c'e' sempre */
@media (max-width: 768px) {
    #cmplz-manage-consent .cmplz-manage-consent {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}