/* ========================================
   CSS COMPLETO PER DATA ATTRIBUTES 
   Scala: 0-100 con scatti di 5
   Versione: 2.0 - Con supporto completo Tablet
======================================== */

/* === UTILITY CLASSES BASE === */

.marg { 
margin-bottom: 10%;


}

/* Hide/Show su mobile */
.no-mobile {
    display: block;
}

.no-desk {
    display: block;
}

.np {
    padding: 0px !important;
}

@media (min-width: 768px) {
    .no-desk {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .no-mobile {
        display: none !important;
    }
}

/* Hide/Show su tablet */
.no-tablet {
    display: block;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .no-tablet {
        display: none !important;
    }
    
    .only-tablet {
        display: block !important;
    }
}

@media (max-width: 767px), (min-width: 1025px) {
    .only-tablet {
        display: none !important;
    }
}


.svg-opacity {
    opacity: 0.8; /* Riduce l'intensità del nero del 20% */
	
}
/* === SEZIONI BLOCCO-CUSTOM === */
.blocco-custom {
    box-sizing: border-box;
    gap: 0 !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center;
    position: relative;
}
 

/* Centratura automatica per sezioni con una sola colonna */
.blocco-custom > .colonna:only-child {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    align-items: center;
}

/* Se c'è una sola colonna, centra il contenitore flex della section */
.blocco-custom:has(> .colonna:only-child) {
    justify-content: center;
}

/* Forza i sottotitoli a non andare in maiuscolo (override su altre definizioni) */
.sottotitolo {
    text-transform: none !important;
}
/* Overlay helper controllato da data-overlay */
.blocco-custom[data-overlay] {
    position: relative;
}
.blocco-custom[data-overlay]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.blocco-custom[data-overlay] > * {
    position: relative;
    z-index: 2;
}
.blocco-custom[data-overlay="dark"]::before {
    opacity: 1;
    background: rgba(0, 0, 0, 0.45);
}
.blocco-custom[data-overlay="extra-dark"]::before {
    opacity: 1;
    background: rgba(0, 0, 0, 0.65);
}
.blocco-custom[data-overlay="light"]::before {
    opacity: 1;
    background: rgba(255, 255, 255, 0.35);
}
.blocco-custom[data-overlay="accent"]::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.blocco-custom[data-overlay="off"]::before,
.blocco-custom[data-overlay="none"]::before {
    content: none;
}

/* === WIDTH PERCENTUALI (0-100, step 5) === */
.blocco-custom[data-width="w-0p"] { width: 0% !important; }
.blocco-custom[data-width="w-5p"] { width: 5% !important; }
.blocco-custom[data-width="w-10p"] { width: 10% !important; }
.blocco-custom[data-width="w-15p"] { width: 15% !important; }
.blocco-custom[data-width="w-20p"] { width: 20% !important; }
.blocco-custom[data-width="w-25p"] { width: 25% !important; }
.blocco-custom[data-width="w-30p"] { width: 30% !important; }
.blocco-custom[data-width="w-35p"] { width: 35% !important; }
.blocco-custom[data-width="w-40p"] { width: 40% !important; }
.blocco-custom[data-width="w-45p"] { width: 45% !important; }
.blocco-custom[data-width="w-50p"] { width: 50% !important; }
.blocco-custom[data-width="w-55p"] { width: 55% !important; }
.blocco-custom[data-width="w-60p"] { width: 60% !important; }
.blocco-custom[data-width="w-65p"] { width: 65% !important; }
.blocco-custom[data-width="w-70p"] { width: 70% !important; }
.blocco-custom[data-width="w-75p"] { width: 75% !important; }
.blocco-custom[data-width="w-80p"] { width: 80% !important; }
.blocco-custom[data-width="w-85p"] { width: 85% !important; }
.blocco-custom[data-width="w-90p"] { width: 90% !important; }
.blocco-custom[data-width="w-95p"] { width: 95% !important; }
.blocco-custom[data-width="w-100p"] { width: 100% !important; }

/* === WIDTH VIEWPORT (0-100, step 5) === */
.blocco-custom[data-width="w-0vw"] { width: 0vw !important; }
.blocco-custom[data-width="w-5vw"] { width: 5vw !important; }
.blocco-custom[data-width="w-10vw"] { width: 10vw !important; }
.blocco-custom[data-width="w-15vw"] { width: 15vw !important; }
.blocco-custom[data-width="w-20vw"] { width: 20vw !important; }
.blocco-custom[data-width="w-25vw"] { width: 25vw !important; }
.blocco-custom[data-width="w-30vw"] { width: 30vw !important; }
.blocco-custom[data-width="w-35vw"] { width: 35vw !important; }
.blocco-custom[data-width="w-40vw"] { width: 40vw !important; }
.blocco-custom[data-width="w-45vw"] { width: 45vw !important; }
.blocco-custom[data-width="w-50vw"] { width: 50vw !important; }
.blocco-custom[data-width="w-55vw"] { width: 55vw !important; }
.blocco-custom[data-width="w-60vw"] { width: 60vw !important; }
.blocco-custom[data-width="w-65vw"] { width: 65vw !important; }
.blocco-custom[data-width="w-70vw"] { width: 70vw !important; }
.blocco-custom[data-width="w-75vw"] { width: 75vw !important; }
.blocco-custom[data-width="w-80vw"] { width: 80vw !important; }
.blocco-custom[data-width="w-85vw"] { width: 85vw !important; }
.blocco-custom[data-width="w-90vw"] { width: 90vw !important; }
.blocco-custom[data-width="w-95vw"] { width: 95vw !important; }
.blocco-custom[data-width="w-100vw"] { width: 100vw !important; }

/* === HEIGHT VIEWPORT (0-100, step 5) === */
.blocco-custom[data-height="h-0vh"] { height: 0vh !important; }
.blocco-custom[data-height="h-5vh"] { height: 5vh !important; }
.blocco-custom[data-height="h-10vh"] { height: 10vh !important; }
.blocco-custom[data-height="h-15vh"] { height: 15vh !important; }
.blocco-custom[data-height="h-20vh"] { height: 20vh !important; }
.blocco-custom[data-height="h-25vh"] { height: 25vh !important; }
.blocco-custom[data-height="h-30vh"] { height: 30vh !important; }
.blocco-custom[data-height="h-35vh"] { height: 35vh !important; }
.blocco-custom[data-height="h-40vh"] { height: 40vh !important; }
.blocco-custom[data-height="h-45vh"] { height: 45vh !important; }
.blocco-custom[data-height="h-50vh"] { height: 50vh !important; }
.blocco-custom[data-height="h-55vh"] { height: 55vh !important; }
.blocco-custom[data-height="h-60vh"] { height: 60vh !important; }
.blocco-custom[data-height="h-65vh"] { height: 65vh !important; }
.blocco-custom[data-height="h-70vh"] { height: 70vh !important; }
.blocco-custom[data-height="h-75vh"] { height: 75vh !important; }
.blocco-custom[data-height="h-80vh"] { height: 80vh !important; }
.blocco-custom[data-height="h-85vh"] { height: 85vh !important; }
.blocco-custom[data-height="h-90vh"] { height: 90vh !important; }
.blocco-custom[data-height="h-95vh"] { height: 95vh !important; }
.blocco-custom[data-height="h-100vh"] { height: 100vh !important; }
.blocco-custom[data-height="h-auto"] { height: auto !important; }

/* === MARGIN Y (0-100, step 5) === */
.blocco-custom[data-margin-y="m-0"] { margin-top: 0px; margin-bottom: 0px; }
.blocco-custom[data-margin-y="m-5"] { margin-top: 5px; margin-bottom: 5px; }
.blocco-custom[data-margin-y="m-10"] { margin-top: 10px; margin-bottom: 10px; }
.blocco-custom[data-margin-y="m-15"] { margin-top: 15px; margin-bottom: 15px; }
.blocco-custom[data-margin-y="m-20"] { margin-top: 20px; margin-bottom: 20px; }
.blocco-custom[data-margin-y="m-25"] { margin-top: 25px; margin-bottom: 25px; }
.blocco-custom[data-margin-y="m-30"] { margin-top: 30px; margin-bottom: 30px; }
.blocco-custom[data-margin-y="m-35"] { margin-top: 35px; margin-bottom: 35px; }
.blocco-custom[data-margin-y="m-40"] { margin-top: 40px; margin-bottom: 40px; }
.blocco-custom[data-margin-y="m-45"] { margin-top: 45px; margin-bottom: 45px; }
.blocco-custom[data-margin-y="m-50"] { margin-top: 50px; margin-bottom: 50px; }
.blocco-custom[data-margin-y="m-55"] { margin-top: 55px; margin-bottom: 55px; }
.blocco-custom[data-margin-y="m-60"] { margin-top: 60px; margin-bottom: 60px; }
.blocco-custom[data-margin-y="m-65"] { margin-top: 65px; margin-bottom: 65px; }
.blocco-custom[data-margin-y="m-70"] { margin-top: 70px; margin-bottom: 70px; }
.blocco-custom[data-margin-y="m-75"] { margin-top: 75px; margin-bottom: 75px; }
.blocco-custom[data-margin-y="m-80"] { margin-top: 80px; margin-bottom: 80px; }
.blocco-custom[data-margin-y="m-85"] { margin-top: 85px; margin-bottom: 85px; }
.blocco-custom[data-margin-y="m-90"] { margin-top: 90px; margin-bottom: 90px; }
.blocco-custom[data-margin-y="m-95"] { margin-top: 95px; margin-bottom: 95px; }
.blocco-custom[data-margin-y="m-100"] { margin-top: 100px; margin-bottom: 100px; }

/* === MARGIN X (0-100, step 5) === */
.blocco-custom[data-margin-x="m-0"] { margin-left: 0px; margin-right: 0px; }
.blocco-custom[data-margin-x="m-5"] { margin-left: 5px; margin-right: 5px; }
.blocco-custom[data-margin-x="m-10"] { margin-left: 10px; margin-right: 10px; }
.blocco-custom[data-margin-x="m-15"] { margin-left: 15px; margin-right: 15px; }
.blocco-custom[data-margin-x="m-20"] { margin-left: 20px; margin-right: 20px; }
.blocco-custom[data-margin-x="m-25"] { margin-left: 25px; margin-right: 25px; }
.blocco-custom[data-margin-x="m-30"] { margin-left: 30px; margin-right: 30px; }
.blocco-custom[data-margin-x="m-35"] { margin-left: 35px; margin-right: 35px; }
.blocco-custom[data-margin-x="m-40"] { margin-left: 40px; margin-right: 40px; }
.blocco-custom[data-margin-x="m-45"] { margin-left: 45px; margin-right: 45px; }
.blocco-custom[data-margin-x="m-50"] { margin-left: 50px; margin-right: 50px; }
.blocco-custom[data-margin-x="m-55"] { margin-left: 55px; margin-right: 55px; }
.blocco-custom[data-margin-x="m-60"] { margin-left: 60px; margin-right: 60px; }
.blocco-custom[data-margin-x="m-65"] { margin-left: 65px; margin-right: 65px; }
.blocco-custom[data-margin-x="m-70"] { margin-left: 70px; margin-right: 70px; }
.blocco-custom[data-margin-x="m-75"] { margin-left: 75px; margin-right: 75px; }
.blocco-custom[data-margin-x="m-80"] { margin-left: 80px; margin-right: 80px; }
.blocco-custom[data-margin-x="m-85"] { margin-left: 85px; margin-right: 85px; }
.blocco-custom[data-margin-x="m-90"] { margin-left: 90px; margin-right: 90px; }
.blocco-custom[data-margin-x="m-95"] { margin-left: 95px; margin-right: 95px; }
.blocco-custom[data-margin-x="m-100"] { margin-left: 100px; margin-right: 100px; }
.blocco-custom[data-margin-x="m-auto"] { margin-left: auto; margin-right: auto; }

/* === BACKGROUND COLORS === */
.blocco-custom[data-bg="#ffffff"] { background-color: #ffffff; }
.blocco-custom[data-bg="#000000"] { background-color: #000000; }
.blocco-custom[data-bg="#f5f5f5"] { background-color: #f5f5f5; }
.blocco-custom[data-bg="#333333"] { background-color: #333333; }
.blocco-custom[data-bg="#d0cdcd"] { background-color: #d0cdcd; }
.blocco-custom[data-bg="#e0e0e0"] { background-color: #e0e0e0; }
.blocco-custom[data-bg="transparent"] { background-color: transparent; }

/* === COLONNE === */
.colonna {
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
}

/* === COLONNE - WIDTH PERCENTUALI (0-100, step 5) === */
.colonna[data-width="w-0p"] { width: 0% !important; }
.colonna[data-width="w-5p"] { width: 5% !important; }
.colonna[data-width="w-10p"] { width: 10% !important; }
.colonna[data-width="w-15p"] { width: 15% !important; }
.colonna[data-width="w-20p"] { width: 20% !important; }
.colonna[data-width="w-25p"] { width: 25% !important; }
.colonna[data-width="w-30p"] { width: 30% !important; }
.colonna[data-width="w-33p"] { width: 33.333% !important; }
.colonna[data-width="w-35p"] { width: 35% !important; }
.colonna[data-width="w-40p"] { width: 40% !important; }
.colonna[data-width="w-45p"] { width: 45% !important; }
.colonna[data-width="w-50p"] { width: 50% !important; }
.colonna[data-width="w-55p"] { width: 55% !important; }
.colonna[data-width="w-60p"] { width: 60% !important; }
.colonna[data-width="w-65p"] { width: 65% !important; }
.colonna[data-width="w-66p"] { width: 66.666% !important; }
.colonna[data-width="w-70p"] { width: 70% !important; }
.colonna[data-width="w-75p"] { width: 75% !important; }
.colonna[data-width="w-80p"] { width: 80% !important; }
.colonna[data-width="w-85p"] { width: 85% !important; }
.colonna[data-width="w-90p"] { width: 90% !important; }
.colonna[data-width="w-95p"] { width: 95% !important; }
.colonna[data-width="w-100p"] { width: 100% !important; }

/* === COLONNE - HEIGHT === */
.colonna[data-height="h-0vh"] { height: 0vh !important; }
.colonna[data-height="h-5vh"] { height: 5vh !important; }
.colonna[data-height="h-10vh"] { height: 10vh !important; }
.colonna[data-height="h-15vh"] { height: 15vh !important; }
.colonna[data-height="h-20vh"] { height: 20vh !important; }
.colonna[data-height="h-25vh"] { height: 25vh !important; }
.colonna[data-height="h-30vh"] { height: 30vh !important; }
.colonna[data-height="h-35vh"] { height: 35vh !important; }
.colonna[data-height="h-40vh"] { height: 40vh !important; }
.colonna[data-height="h-45vh"] { height: 45vh !important; }
.colonna[data-height="h-50vh"] { height: 50vh !important; }
.colonna[data-height="h-55vh"] { height: 55vh !important; }
.colonna[data-height="h-60vh"] { height: 60vh !important; }
.colonna[data-height="h-65vh"] { height: 65vh !important; }
.colonna[data-height="h-70vh"] { height: 70vh !important; }
.colonna[data-height="h-75vh"] { height: 75vh !important; }
.colonna[data-height="h-80vh"] { height: 80vh !important; }
.colonna[data-height="h-85vh"] { height: 85vh !important; }
.colonna[data-height="h-90vh"] { height: 90vh !important; }
.colonna[data-height="h-95vh"] { height: 95vh !important; }
.colonna[data-height="h-100vh"] { height: 100vh !important; }
.colonna[data-height="h-auto"] { height: auto !important; }
.colonna[data-height="h-100p"] { height: 100% !important; }
.colonna[data-height="h-section"] { height: inherit !important; }

/* === COLONNE - PADDING (0-100, step 5) === */
.colonna[data-padding="p-0"] { padding: 0px; }
.colonna[data-padding="p-5"] { padding: 5px; }
.colonna[data-padding="p-10"] { padding: 10px; }
.colonna[data-padding="p-15"] { padding: 15px; }
.colonna[data-padding="p-20"] { padding: 20px; }
.colonna[data-padding="p-25"] { padding: 25px; }
.colonna[data-padding="p-30"] { padding: 30px; }
.colonna[data-padding="p-35"] { padding: 35px; }
.colonna[data-padding="p-40"] { padding: 40px; }
.colonna[data-padding="p-45"] { padding: 45px; }
.colonna[data-padding="p-50"] { padding: 50px; }
.colonna[data-padding="p-55"] { padding: 55px; }
.colonna[data-padding="p-60"] { padding: 60px; }
.colonna[data-padding="p-65"] { padding: 65px; }
.colonna[data-padding="p-70"] { padding: 70px; }
.colonna[data-padding="p-75"] { padding: 75px; }
.colonna[data-padding="p-80"] { padding: 80px; }
.colonna[data-padding="p-85"] { padding: 85px; }
.colonna[data-padding="p-90"] { padding: 90px; }
.colonna[data-padding="p-95"] { padding: 95px; }
.colonna[data-padding="p-100"] { padding: 100px; }

/* === COLONNE - MARGIN (0-100, step 5) === */
.colonna[data-margin="m-0"] { margin: 0px; }
.colonna[data-margin="m-5"] { margin: 5px; }
.colonna[data-margin="m-10"] { margin: 10px; }
.colonna[data-margin="m-15"] { margin: 15px; }
.colonna[data-margin="m-20"] { margin: 20px; }
.colonna[data-margin="m-25"] { margin: 25px; }
.colonna[data-margin="m-30"] { margin: 30px; }
.colonna[data-margin="m-35"] { margin: 35px; }
.colonna[data-margin="m-40"] { margin: 40px; }
.colonna[data-margin="m-45"] { margin: 45px; }
.colonna[data-margin="m-50"] { margin: 50px; }
.colonna[data-margin="m-55"] { margin: 55px; }
.colonna[data-margin="m-60"] { margin: 60px; }
.colonna[data-margin="m-65"] { margin: 65px; }
.colonna[data-margin="m-70"] { margin: 70px; }
.colonna[data-margin="m-75"] { margin: 75px; }
.colonna[data-margin="m-80"] { margin: 80px; }
.colonna[data-margin="m-85"] { margin: 85px; }
.colonna[data-margin="m-90"] { margin: 90px; }
.colonna[data-margin="m-95"] { margin: 95px; }
.colonna[data-margin="m-100"] { margin: 100px; }

/* === COLONNE - ALIGN === */
.colonna[data-align="center"] { text-align: center; }
.colonna[data-align="left"] { text-align: left; }
.colonna[data-align="right"] { text-align: right; }

/* === COLONNE - VALIGN === */
.colonna[data-valign="middle"] { 
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.colonna[data-valign="top"] { 
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
}
.colonna[data-valign="bottom"] { 
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
}

/* === COLONNE - BACKGROUND === */
.colonna[data-bg="#ffffff"] { background-color: #ffffff; }
.colonna[data-bg="#000000"] { background-color: #000000; }
.colonna[data-bg="#f5f5f5"] { background-color: #f5f5f5; }
.colonna[data-bg="#333333"] { background-color: #333333; }
.colonna[data-bg="#d0cdcd"] { background-color: #d0cdcd; }
.colonna[data-bg="#e0e0e0"] { background-color: #e0e0e0; }
.colonna[data-bg="transparent"] { background-color: transparent; }

/* ========================================
   TABLET RESPONSIVE (768px - 1024px)
======================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    
    /* SEZIONI - Comportamento su tablet */
    .blocco-custom {
        flex-wrap: wrap !important;
    }
    
    /* SEZIONI - Tablet Width */
    .blocco-custom[data-width-tablet="w-0p"] { width: 0% !important; }
    .blocco-custom[data-width-tablet="w-5p"] { width: 5% !important; }
    .blocco-custom[data-width-tablet="w-10p"] { width: 10% !important; }
    .blocco-custom[data-width-tablet="w-15p"] { width: 15% !important; }
    .blocco-custom[data-width-tablet="w-20p"] { width: 20% !important; }
    .blocco-custom[data-width-tablet="w-25p"] { width: 25% !important; }
    .blocco-custom[data-width-tablet="w-30p"] { width: 30% !important; }
    .blocco-custom[data-width-tablet="w-35p"] { width: 35% !important; }
    .blocco-custom[data-width-tablet="w-40p"] { width: 40% !important; }
    .blocco-custom[data-width-tablet="w-45p"] { width: 45% !important; }
    .blocco-custom[data-width-tablet="w-50p"] { width: 50% !important; }
    .blocco-custom[data-width-tablet="w-55p"] { width: 55% !important; }
    .blocco-custom[data-width-tablet="w-60p"] { width: 60% !important; }
    .blocco-custom[data-width-tablet="w-65p"] { width: 65% !important; }
    .blocco-custom[data-width-tablet="w-70p"] { width: 70% !important; }
    .blocco-custom[data-width-tablet="w-75p"] { width: 75% !important; }
    .blocco-custom[data-width-tablet="w-80p"] { width: 80% !important; }
    .blocco-custom[data-width-tablet="w-85p"] { width: 85% !important; }
    .blocco-custom[data-width-tablet="w-90p"] { width: 90% !important; }
    .blocco-custom[data-width-tablet="w-95p"] { width: 95% !important; }
    .blocco-custom[data-width-tablet="w-100p"] { width: 100% !important; }
    
    /* SEZIONI - Tablet Height */
    .blocco-custom[data-height-tablet="h-auto"] { height: auto !important; }
    .blocco-custom[data-height-tablet="h-50vh"] { height: 50vh !important; }
    .blocco-custom[data-height-tablet="h-60vh"] { height: 60vh !important; }
    .blocco-custom[data-height-tablet="h-70vh"] { height: 70vh !important; }
    .blocco-custom[data-height-tablet="h-80vh"] { height: 80vh !important; }
    .blocco-custom[data-height-tablet="h-90vh"] { height: 90vh !important; }
    .blocco-custom[data-height-tablet="h-100vh"] { height: 100vh !important; }
    
    /* COLONNE - Tablet Width */
    .colonna[data-width-tablet="w-0p"] { width: 0% !important; }
    .colonna[data-width-tablet="w-5p"] { width: 5% !important; }
    .colonna[data-width-tablet="w-10p"] { width: 10% !important; }
    .colonna[data-width-tablet="w-15p"] { width: 15% !important; }
    .colonna[data-width-tablet="w-20p"] { width: 20% !important; }
    .colonna[data-width-tablet="w-25p"] { width: 25% !important; }
    .colonna[data-width-tablet="w-30p"] { width: 30% !important; }
    .colonna[data-width-tablet="w-33p"] { width: 33.333% !important; }
    .colonna[data-width-tablet="w-35p"] { width: 35% !important; }
    .colonna[data-width-tablet="w-40p"] { width: 40% !important; }
    .colonna[data-width-tablet="w-45p"] { width: 45% !important; }
    .colonna[data-width-tablet="w-50p"] { width: 50% !important; }
    .colonna[data-width-tablet="w-55p"] { width: 55% !important; }
    .colonna[data-width-tablet="w-60p"] { width: 60% !important; }
    .colonna[data-width-tablet="w-65p"] { width: 65% !important; }
    .colonna[data-width-tablet="w-66p"] { width: 66.666% !important; }
    .colonna[data-width-tablet="w-70p"] { width: 70% !important; }
    .colonna[data-width-tablet="w-75p"] { width: 75% !important; }
    .colonna[data-width-tablet="w-80p"] { width: 80% !important; }
    .colonna[data-width-tablet="w-85p"] { width: 85% !important; }
    .colonna[data-width-tablet="w-90p"] { width: 90% !important; }
    .colonna[data-width-tablet="w-95p"] { width: 95% !important; }
    .colonna[data-width-tablet="w-100p"] { width: 100% !important; }
    
    /* COLONNE - Tablet Height */
    .colonna[data-height-tablet="h-auto"] { height: auto !important; }
    .colonna[data-height-tablet="h-100p"] { height: 100% !important; }
    .colonna[data-height-tablet="h-50vh"] { height: 50vh !important; }
    .colonna[data-height-tablet="h-60vh"] { height: 60vh !important; }
    .colonna[data-height-tablet="h-70vh"] { height: 70vh !important; }
    .colonna[data-height-tablet="h-80vh"] { height: 80vh !important; }
    .colonna[data-height-tablet="h-90vh"] { height: 90vh !important; }
    .colonna[data-height-tablet="h-100vh"] { height: 100vh !important; }
    
    /* COLONNE - Tablet Padding */
    .colonna[data-padding-tablet="p-0"] { padding: 0px !important; }
    .colonna[data-padding-tablet="p-5"] { padding: 5px !important; }
    .colonna[data-padding-tablet="p-10"] { padding: 10px !important; }
    .colonna[data-padding-tablet="p-15"] { padding: 15px !important; }
    .colonna[data-padding-tablet="p-20"] { padding: 20px !important; }
    .colonna[data-padding-tablet="p-25"] { padding: 25px !important; }
    .colonna[data-padding-tablet="p-30"] { padding: 30px !important; }
    .colonna[data-padding-tablet="p-35"] { padding: 35px !important; }
    .colonna[data-padding-tablet="p-40"] { padding: 40px !important; }
    .colonna[data-padding-tablet="p-45"] { padding: 45px !important; }
    .colonna[data-padding-tablet="p-50"] { padding: 50px !important; }
    
    /* COLONNE - Tablet Margin */
    .colonna[data-margin-tablet="m-0"] { margin: 0px !important; }
    .colonna[data-margin-tablet="m-5"] { margin: 5px !important; }
    .colonna[data-margin-tablet="m-10"] { margin: 10px !important; }
    .colonna[data-margin-tablet="m-15"] { margin: 15px !important; }
    .colonna[data-margin-tablet="m-20"] { margin: 20px !important; }
    .colonna[data-margin-tablet="m-25"] { margin: 25px !important; }
    .colonna[data-margin-tablet="m-30"] { margin: 30px !important; }
    
    /* Classi helper per layout tablet */
    .tablet-col-1 > .colonna {
        width: 100% !important;
    }
    
    .tablet-col-2 > .colonna {
        width: 50% !important;
    }
    
    .tablet-col-3 > .colonna {
        width: 33.333% !important;
    }
    
    /* Mix: prima riga 2 colonne, resto 100% */
    .tablet-2-then-full > .colonna:nth-child(1),
    .tablet-2-then-full > .colonna:nth-child(2) {
        width: 50% !important;
    }
    
    .tablet-2-then-full > .colonna:nth-child(n+3) {
        width: 100% !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 768px)
======================================== */

@media (max-width: 768px) {
    
    /* SEZIONI - Mobile behavior */
    .blocco-custom {
        flex-wrap: wrap !important;
    }
    
    /* SEZIONI - Mobile Width */
    .blocco-custom[data-width-mobile="w-0p"] { width: 0% !important; }
    .blocco-custom[data-width-mobile="w-5p"] { width: 5% !important; }
    .blocco-custom[data-width-mobile="w-10p"] { width: 10% !important; }
    .blocco-custom[data-width-mobile="w-15p"] { width: 15% !important; }
    .blocco-custom[data-width-mobile="w-20p"] { width: 20% !important; }
    .blocco-custom[data-width-mobile="w-25p"] { width: 25% !important; }
    .blocco-custom[data-width-mobile="w-30p"] { width: 30% !important; }
    .blocco-custom[data-width-mobile="w-35p"] { width: 35% !important; }
    .blocco-custom[data-width-mobile="w-40p"] { width: 40% !important; }
    .blocco-custom[data-width-mobile="w-45p"] { width: 45% !important; }
    .blocco-custom[data-width-mobile="w-50p"] { width: 50% !important; }
    .blocco-custom[data-width-mobile="w-55p"] { width: 55% !important; }
    .blocco-custom[data-width-mobile="w-60p"] { width: 60% !important; }
    .blocco-custom[data-width-mobile="w-65p"] { width: 65% !important; }
    .blocco-custom[data-width-mobile="w-70p"] { width: 70% !important; }
    .blocco-custom[data-width-mobile="w-75p"] { width: 75% !important; }
    .blocco-custom[data-width-mobile="w-80p"] { width: 80% !important; }
    .blocco-custom[data-width-mobile="w-85p"] { width: 85% !important; }
    .blocco-custom[data-width-mobile="w-90p"] { width: 90% !important; }
    .blocco-custom[data-width-mobile="w-95p"] { width: 95% !important; }
    .blocco-custom[data-width-mobile="w-100p"] { width: 100% !important; }
    
    /* SEZIONI - Mobile Height */
    .blocco-custom[data-height-mobile="h-0vh"] { height: 0vh !important; }
    .blocco-custom[data-height-mobile="h-5vh"] { height: 5vh !important; }
    .blocco-custom[data-height-mobile="h-10vh"] { height: 10vh !important; }
    .blocco-custom[data-height-mobile="h-15vh"] { height: 15vh !important; }
    .blocco-custom[data-height-mobile="h-20vh"] { height: 20vh !important; }
    .blocco-custom[data-height-mobile="h-25vh"] { height: 25vh !important; }
    .blocco-custom[data-height-mobile="h-30vh"] { height: 30vh !important; }
    .blocco-custom[data-height-mobile="h-35vh"] { height: 35vh !important; }
    .blocco-custom[data-height-mobile="h-40vh"] { height: 40vh !important; }
    .blocco-custom[data-height-mobile="h-45vh"] { height: 45vh !important; }
    .blocco-custom[data-height-mobile="h-50vh"] { height: 50vh !important; }
    .blocco-custom[data-height-mobile="h-55vh"] { height: 55vh !important; }
    .blocco-custom[data-height-mobile="h-60vh"] { height: 60vh !important; }
    .blocco-custom[data-height-mobile="h-65vh"] { height: 65vh !important; }
    .blocco-custom[data-height-mobile="h-70vh"] { height: 70vh !important; }
    .blocco-custom[data-height-mobile="h-75vh"] { height: 75vh !important; }
    .blocco-custom[data-height-mobile="h-80vh"] { height: 80vh !important; }
    .blocco-custom[data-height-mobile="h-85vh"] { height: 85vh !important; }
    .blocco-custom[data-height-mobile="h-90vh"] { height: 90vh !important; }
    .blocco-custom[data-height-mobile="h-95vh"] { height: 95vh !important; }
    .blocco-custom[data-height-mobile="h-100vh"] { height: 100vh !important; }
    .blocco-custom[data-height-mobile="h-auto"] { height: auto !important; }
    
    /* COLONNE - Mobile Width */
    .colonna[data-width-mobile="w-0p"] { width: 0% !important; }
    .colonna[data-width-mobile="w-5p"] { width: 5% !important; }
    .colonna[data-width-mobile="w-10p"] { width: 10% !important; }
    .colonna[data-width-mobile="w-15p"] { width: 15% !important; }
    .colonna[data-width-mobile="w-20p"] { width: 20% !important; }
    .colonna[data-width-mobile="w-25p"] { width: 25% !important; }
    .colonna[data-width-mobile="w-30p"] { width: 30% !important; }
    .colonna[data-width-mobile="w-35p"] { width: 35% !important; }
    .colonna[data-width-mobile="w-40p"] { width: 40% !important; }
    .colonna[data-width-mobile="w-45p"] { width: 45% !important; }
    .colonna[data-width-mobile="w-50p"] { width: 50% !important; }
    .colonna[data-width-mobile="w-55p"] { width: 55% !important; }
    .colonna[data-width-mobile="w-60p"] { width: 60% !important; }
    .colonna[data-width-mobile="w-65p"] { width: 65% !important; }
    .colonna[data-width-mobile="w-70p"] { width: 70% !important; }
    .colonna[data-width-mobile="w-75p"] { width: 75% !important; }
    .colonna[data-width-mobile="w-80p"] { width: 80% !important; }
    .colonna[data-width-mobile="w-85p"] { width: 85% !important; }
    .colonna[data-width-mobile="w-90p"] { width: 90% !important; }
    .colonna[data-width-mobile="w-95p"] { width: 95% !important; }
    .colonna[data-width-mobile="w-100p"] { width: 100% !important; }
    
    /* COLONNE - Mobile Height */
    .colonna[data-height-mobile="h-0vh"] { height: 0vh !important; }
    .colonna[data-height-mobile="h-5vh"] { height: 5vh !important; }
    .colonna[data-height-mobile="h-10vh"] { height: 10vh !important; }
    .colonna[data-height-mobile="h-15vh"] { height: 15vh !important; }
    .colonna[data-height-mobile="h-20vh"] { height: 20vh !important; }
    .colonna[data-height-mobile="h-25vh"] { height: 25vh !important; }
    .colonna[data-height-mobile="h-30vh"] { height: 30vh !important; }
    .colonna[data-height-mobile="h-35vh"] { height: 35vh !important; }
    .colonna[data-height-mobile="h-40vh"] { height: 40vh !important; }
    .colonna[data-height-mobile="h-45vh"] { height: 45vh !important; }
    .colonna[data-height-mobile="h-50vh"] { height: 50vh !important; }
    .colonna[data-height-mobile="h-55vh"] { height: 55vh !important; }
    .colonna[data-height-mobile="h-60vh"] { height: 60vh !important; }
    .colonna[data-height-mobile="h-65vh"] { height: 65vh !important; }
    .colonna[data-height-mobile="h-70vh"] { height: 70vh !important; }
    .colonna[data-height-mobile="h-75vh"] { height: 75vh !important; }
    .colonna[data-height-mobile="h-80vh"] { height: 80vh !important; }
    .colonna[data-height-mobile="h-85vh"] { height: 85vh !important; }
    .colonna[data-height-mobile="h-90vh"] { height: 90vh !important; }
    .colonna[data-height-mobile="h-95vh"] { height: 95vh !important; }
    .colonna[data-height-mobile="h-100vh"] { height: 100vh !important; }
    .colonna[data-height-mobile="h-auto"] { height: auto !important; }
    .colonna[data-height-mobile="h-100p"] { height: 100% !important; }
    
    /* COLONNE - Mobile Padding */
    .colonna[data-padding-mobile="p-0"] { padding: 0px !important; }
    .colonna[data-padding-mobile="p-5"] { padding: 5px !important; }
    .colonna[data-padding-mobile="p-10"] { padding: 10px !important; }
    .colonna[data-padding-mobile="p-15"] { padding: 15px !important; }
    .colonna[data-padding-mobile="p-20"] { padding: 20px !important; }
    .colonna[data-padding-mobile="p-25"] { padding: 25px !important; }
    .colonna[data-padding-mobile="p-30"] { padding: 30px !important; }
    .colonna[data-padding-mobile="p-35"] { padding: 35px !important; }
    .colonna[data-padding-mobile="p-40"] { padding: 40px !important; }
    .colonna[data-padding-mobile="p-45"] { padding: 45px !important; }
    .colonna[data-padding-mobile="p-50"] { padding: 50px !important; }
    
    /* COLONNE - Mobile Margin */
    .colonna[data-margin-mobile="m-0"] { margin: 0px !important; }
    .colonna[data-margin-mobile="m-5"] { margin: 5px !important; }
    .colonna[data-margin-mobile="m-10"] { margin: 10px !important; }
    .colonna[data-margin-mobile="m-15"] { margin: 15px !important; }
    .colonna[data-margin-mobile="m-20"] { margin: 20px !important; }
    .colonna[data-margin-mobile="m-25"] { margin: 25px !important; }
    .colonna[data-margin-mobile="m-30"] { margin: 30px !important; }
}

/* ========================================
   GESTIONE AUTOMATICA RESPONSIVE
======================================== */

/* Automatico: 3 colonne desktop → 2 colonne tablet → 1 colonna mobile */
@media (min-width: 1025px) {
    .colonna[data-responsive="auto"] {
        width: 33.333% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .colonna[data-responsive="auto"] {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .colonna[data-responsive="auto"] {
        width: 100% !important;
    }
}

/* ========================================
   LAYOUT PREDEFINITI
======================================== */

/* Layout 3 colonne: desktop 3 → tablet 2+1 → mobile 1 */
.blocco-custom[data-layout="3-cols"] {
    display: flex;
    flex-wrap: nowrap;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .blocco-custom[data-layout="3-cols"] {
        flex-wrap: wrap !important;
    }
    
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(1),
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(2) {
        width: 50% !important;
    }
    
    .blocco-custom[data-layout="3-cols"] > .colonna:nth-child(3) {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .blocco-custom[data-layout="3-cols"] > .colonna {
        width: 100% !important;
    }
}

/* Layout 4 colonne: desktop 4 → tablet 2+2 → mobile 1 */
@media (min-width: 768px) and (max-width: 1024px) {
    .blocco-custom[data-layout="4-cols"] {
        flex-wrap: wrap !important;
    }
    
    .blocco-custom[data-layout="4-cols"] > .colonna {
        width: 50% !important;
    }
}

@media (max-width: 767px) {
    .blocco-custom[data-layout="4-cols"] > .colonna {
        width: 100% !important;
    }
}

/* ========================================
   EXTRA UTILITIES
======================================== */

/* Pixel values per casi speciali */
.blocco-custom[data-width="w-300px"] { width: 300px !important; }
.blocco-custom[data-width="w-400px"] { width: 400px !important; }
.blocco-custom[data-width="w-500px"] { width: 500px !important; }
.blocco-custom[data-width="w-600px"] { width: 600px !important; }
.blocco-custom[data-width="w-800px"] { width: 800px !important; }
.blocco-custom[data-width="w-1000px"] { width: 1000px !important; }
.blocco-custom[data-width="w-1200px"] { width: 1200px !important; }

.blocco-custom[data-height="h-200px"] { height: 200px !important; }
.blocco-custom[data-height="h-300px"] { height: 300px !important; }
.blocco-custom[data-height="h-400px"] { height: 400px !important; }
.blocco-custom[data-height="h-500px"] { height: 500px !important; }
.blocco-custom[data-height="h-600px"] { height: 600px !important; }

.colonna[data-width="w-300px"] { width: 300px !important; }
.colonna[data-width="w-400px"] { width: 400px !important; }
.colonna[data-width="w-500px"] { width: 500px !important; }
.colonna[data-width="w-600px"] { width: 600px !important; }

.colonna[data-height="h-200px"] { height: 200px !important; }
.colonna[data-height="h-300px"] { height: 300px !important; }
.colonna[data-height="h-400px"] { height: 400px !important; }
.colonna[data-height="h-500px"] { height: 500px !important; }
.colonna[data-height="h-600px"] { height: 600px !important; }

/* Background images support */
.blocco-custom[data-bg-img]:not([data-bg-img=""]) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative; 
}

.colonna[data-bg-img]:not([data-bg-img=""]) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.product-caption {
    margin-top: 12px;
    font-family: var(--font-titolo);
    font-size: var(--font-size-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--grigio-500); 
}

.product-slide {
    position: relative; 
}

.product-slide__inner {
    position: relative;
    display: inline-block;
}

.product-slide__inner img {
    display: block;
    max-width: 100%;
    height: auto;
}
 
#swiper5 .product-slide__inner img {
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
}
 
#swiper5 { position: relative; }

#swiper5 .swiper-arrow-button {
    top: 10px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

#swiper5 .swiper-arrow-button.arrow-left {
    margin-left: -40px;
}

#swiper5 .swiper-arrow-button.arrow-right {
    margin-left: 40px;
}
.product-slide__tag {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    background: transparent;
    color: var(--grigio-600);
    font-family: var(--font-titolo);
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    z-index: 2;
    width: 90%;
}

/* Hero/Full-screen blocco support */
.blocco-custom.parallax {
    background-attachment: fixed;
    display: flex;
    align-items: center; 
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 768px) {
    .blocco-custom.parallax {
        background-attachment: scroll;
    }
}

/* Disabilita il parallax sui dispositivi touch (es. iPad) per evitare il bug di Safari */
@media (hover: none) and (pointer: coarse) {
    .blocco-custom.parallax {
        background-attachment: scroll;
    }
}
 
/* Modalità overlay: porta i contenuti sopra la sidebar e forza trasparenza */
.overlay-mode .main-content {
    position: relative;
    z-index: 900; 
    margin-left: 0;
    padding-left: 0;  
}
.overlay-mode .sidebar,
.overlay-mode .sidebar.scrolled { 
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: 2000;
}
.overlay-mode .sidebar .hamburger .line,
.overlay-mode .sidebar .hamburger .line-short { 
    background-color: #fff !important;
}
.overlay-mode .sidebar .logo-img {
    filter: none;
}
.overlay-mode .controls {
    z-index: 1900;
    color: #fff;
}
.overlay-mode .controls .book-link,
.overlay-mode .controls .volume-toggle {
    color: #fff;
}
.overlay-mode .controls svg {
    color: #fff;
    fill: currentColor;
}

/* Preset per builder: sezione fullscreen fuori dal main-content */
.blocco-custom[data-main-layer="overlay"],
.blocco-custom[data-main-layer="inline"] {
    --main-layer: 1;
}

@media (max-width: 1024px) {
    .overlay-mode .main-content {
        margin-left: 0;
        padding-left: 0;
    }
}

/* Allineamento contenuti senza ridurre il full width: usa padding solo per il testo */
:root {
    --sidebar-width: 140px;
}

@media (min-width: 1025px) {
    body:not(.overlay-mode) .main-content {
        padding-left: var(--sidebar-width);
    }
}

@media (max-width: 1024px) {
    .blocco-custom {
        padding-left: 0;
    }
}