
.bentopadding-longtile {
    --tile-padding: clamp(1.25rem, 0.6667rem + 2.2222vw, 2.5rem);
  padding-top: var(--tile-padding) !important;
  padding-right: var(--tile-padding) !important;
  padding-left: var(--tile-padding) !important;
}
.bentopadding-shorttile {
    --tile-padding: clamp(1.25rem, 0.6667rem + 2.2222vw, 2.5rem);
  padding-top: var(--tile-padding) !important;
  padding-right: var(--tile-padding) !important;
  padding-left: var(--tile-padding) !important;
}

.allsidepadding {
    --tile-padding: clamp(1.25rem, 0.6667rem + 2.2222vw, 2.5rem);
  padding-top: var(--tile-padding) !important;
  padding-right: var(--tile-padding) !important;
  padding-left: var(--tile-padding) !important;
padding-bottom: var(--tile-padding) !important;
}

.margintop-container{
  --cont-margin: clamp(3.125rem, 2.25rem + 3.3333vw, 5rem);
    margin-top: var(--cont-margin) !important;
}

/* Altezza fluida */
.fim-test {
  width: 100%;
  height: clamp(200px, 30vh, 500px);
  object-fit: cover;
}

/*
=============================================================================
 CLASSI CONTAINER PERSONALIZZATE PER ELEMENTOR
=============================================================================
Queste classi forzano i container Elementor a comportarsi come full-width
con larghezza massima centrata e padding personalizzabili.

 COME USARE:
- setcont: Container con padding-top da variabile
- setcont-custom: Container senza padding-top (da impostare manualmente)

🔧 APPLICAZIONE:
In Elementor > Advanced > CSS Classes aggiungi:
- "setcont" oppure "setcont-custom"

⚙️ PERSONALIZZAZIONE:
- Larghezza massima: modifica --max-width in :root
- Padding laterali: modifica --leftright nelle singole classi
- Padding top: modifica --padding-top in :root
- Background: decommenta le righe background nelle classi
*/

/* =============================================================================
   🌐 VARIABILI GLOBALI
   =============================================================================
   Qui sono definite tutte le variabili riutilizzabili del progetto
*/
:root {
    /* 📏 DIMENSIONI LAYOUT */
    --max-width: 1440px; /* Larghezza massima globale - MODIFICA QUI per cambiare ovunque */
    --padding-top: 200px; /* Padding top globale - MODIFICA QUI per cambiare ovunque */
    
    /* 🎨 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%);
}