:root {
    /*  DIMENSIONI LAYOUT */
    --max-width: 1440px; /* Larghezza massima globale - MODIFICA QUI per cambiare ovunque */
    --setcont-padding-top: 200px; /*  NUOVA VARIABILE: Padding top predefinito per .setcont - MODIFICA QUI */
    
    /*  BACKGROUND PRINCIPALE */
    --bg-main-color: hsla(0,0%,0%,1);
    --bg-main-gradient: 
        radial-gradient(at 49% 1%, hsla(235,62%,54%,1) 0px, transparent 50%),
        radial-gradient(at 40% 20%, hsla(22,31%,81%,0) 0px, transparent 50%);
    
    /*  BACKGROUND ALTERNATIVO (per uso futuro) */
    --bg-alt-color: hsla(220,20%,10%,1);
    --bg-alt-gradient: 
        radial-gradient(at 30% 80%, hsla(280,70%,60%,1) 0px, transparent 50%),
        radial-gradient(at 70% 10%, hsla(120,50%,70%,0.3) 0px, transparent 50%);
}

/* =============================================================================
    CLASSE SETCONT - Container con padding-top predefinito
   =============================================================================
   Usa questa classe per container standard con un padding-top impostato da variabile.
   Applica: "setcont" nelle CSS Classes di Elementor
*/

/*  SELETTORE PRINCIPALE */
.elementor-element.setcont.e-con {
    /*  PADDING PERSONALIZZABILE */
    --leftright: clamp(0.75rem, 0.6471rem + 0.3922vw, 1rem); /* Padding laterali responsivi */
    
    /*  BACKGROUND (decommenta se necessario) */
    /* background-color: var(--bg-main-color); */
    /* background-image: var(--bg-main-gradient); */
    
    /*  DIMENSIONI E POSIZIONAMENTO */
    width: 100% !important;
    max-width: var(--max-width) !important; /* Usa la variabile globale */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 🔲 PADDING */
    padding-left: var(--leftright) !important;
    padding-right: var(--leftright) !important;
    padding-top: var(--setcont-padding-top) !important; /* ⬅️ ORA USA LA VARIABILE GLOBALE */
    
    /* ⚙️ IMPOSTAZIONI TECNICHE */
    box-sizing: border-box !important;
}

/* 🎯 SELETTORE SPECIFICO (per casi ostinati) */
.elementor-element[data-element_type="container"].setcont.e-con,
section.elementor-element.setcont.e-con {
    /* 🎨 BACKGROUND (decommenta se necessario) */
    /* background-color: var(--bg-main-color) !important; */
    /* background-image: var(--bg-main-gradient) !important; */
    
    /* 📐 DIMENSIONI E POSIZIONAMENTO */
    width: 100% !important;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 🗂️ GESTIONE WRAPPER INTERNO (mantiene flex ma rimuove dimensioni extra) */
.setcont .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Manteniamo il display flex di default di Elementor */
}

/* 🔧 OVERRIDE PER CONTAINER NON FULL-WIDTH */
.setcont.e-con:not(.e-con-full) {
    width: 100% !important;
    max-width: var(--max-width) !important;
}

/* =============================================================================
   📦 CLASSE SETCONT-CUSTOM - Container senza padding-top fisso
   =============================================================================
   Usa questa classe quando vuoi controllare il padding-top manualmente
   Applica: "setcont-custom" nelle CSS Classes di Elementor
   Poi imposta il padding-top in Advanced > Padding
*/

/* 🎯 SELETTORE PRINCIPALE */
.elementor-element.setcont-custom.e-con {
    /* 📏 PADDING PERSONALIZZABILE */
    --leftright: clamp(0.75rem, 0.6471rem + 0.3922vw, 1rem); /* Padding laterali responsivi */
    
    /* 🎨 BACKGROUND (decommenta se necessario) */
    /* background-color: var(--bg-main-color); */
    /* background-image: var(--bg-main-gradient); */
    
    /* 📐 DIMENSIONI E POSIZIONAMENTO */
    width: 100% !important;
    max-width: var(--max-width) !important; /* Usa la variabile globale */
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* 🔲 PADDING (solo laterali - top controllabile da Elementor) */
    padding-left: var(--leftright) !important;
    padding-right: var(--leftright) !important;
    /* NOTA: padding-top NON impostato - controllabile da Elementor */
    
    /* ⚙️ IMPOSTAZIONI TECNICHE */
    box-sizing: border-box !important;
}

/* 🎯 SELETTORE SPECIFICO (per casi ostinati) */
.elementor-element[data-element_type="container"].setcont-custom.e-con,
section.elementor-element.setcont-custom.e-con {
    /* 🎨 BACKGROUND (decommenta se necessario) */
    /* background-color: var(--bg-main-color) !important; */
    /* background-image: var(--bg-main-gradient) !important; */
    
    /* 📐 DIMENSIONI E POSIZIONAMENTO */
    width: 100% !important;
    max-width: var(--max-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 🗂️ GESTIONE WRAPPER INTERNO (mantiene flex ma rimuove dimensioni extra) */
.setcont-custom .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Manteniamo il display flex di default di Elementor */
}

/* 🔧 OVERRIDE PER CONTAINER NON FULL-WIDTH */
.setcont-custom.e-con:not(.e-con-full) {
    width: 100% !important;
    max-width: var(--max-width) !important;
}