/* ============================================= */
/*   VARIABILI GLOBALI DI PERSONALIZZAZIONE      */
/* ============================================= */
/* Modifica questi valori per adattare il design  */
/* a progetti diversi in modo rapido e centralizzato */
/* ============================================= */

:root {
    /* ── COLORI PRINCIPALI ────────────────── */
    --clr-primary: #2d5a1e;           /* Verde principale (titoli, link, accenti) */
    --clr-secondary: #e0da6e;         /* Giallo/verde secondario (checkmark liste, testo evidenziato) */
    --clr-accent: #f4512c;            /* Arancione accento (anchor nav, pulsanti) */
    --clr-accent-hover: #da3f20;      /* Hover accento */
    --clr-accent-alt: #d34021;        /* Hover alternativo accento */
    --clr-arancione: #f90;            /* Arancione alternativo */
    --clr-orange-alt: #F26B38;        /* Arancione per box aggiornamenti */
    --clr-red: #d12130;               /* Rosso (accordion) */

    /* ── COLORI NEUTRI ────────────────────── */
    --white: #ffffff;
    --text-dark: #111827;             /* Testo molto scuro */
    --text-medium: #333333;           /* Testo medio */
    --text-light: #444444;            /* Testo chiaro */
    --text-muted: #666666;            /* Testo attenuato */
    --text-body: #4b5563;             /* Testo corpo (accordion) */
    --text-code: #e2e8f0;             /* Testo blocco codice */
    --text-blockquote: #0a192f;       /* Testo blockquote */
    
    /* ── BACKGROUNDS ──────────────────────── */
    --bg-page: #ffffff;               /* Sfondo pagina */
    --bg-light: #f3f4f6;              /* Sfondo chiaro (caption, box) */
    --bg-lighter: #f5f5f5;            /* Sfondo più chiaro (blockquote) */
    --bg-code: #eef2f7;               /* Sfondo codice inline */
    --bg-code-block: #0f172a;         /* Sfondo blocco codice */
    --bg-table-header: #e95323;       /* Sfondo header tabella */
    --bg-table-row-even: #f3f3f3;     /* Righe pari tabella */
    --bg-table-row-hover: #e9ecef;    /* Hover righe tabella */
    --bg-box: #f3f4f6;                /* Sfondo content-box */
    --bg-template: #f8fafc;           /* Sfondo template/code blocks */
    --bg-anchor-nav: #f4f4f4;         /* Sfondo anchor navigation */
    --bg-download: #dcdcdc;           /* Sfondo pulsante download (gainsboro) */
    --bg-download-hover: #ffffff;     /* Hover pulsante download */
    --bg-btn: #ffffff;                /* Sfondo pulsanti CTA */
    --bg-btn-alt: #7ab009;            /* Sfondo pulsanti alternativi */
    --bg-accordion-light: rgb(235, 235, 235); /* Sfondo chiaro accordion */

    /* ── BORDI ───────────────────────────── */
    --border-color: #dedede;          /* Colore bordo standard */
    --border-color-light: #e5e7eb;    /* Bordo chiaro (template, pre) */
    --border-color-medium: #ebebeb;   /* Bordo medio (anchor nav) */
    --border-style: solid;
    --border-width: 1px;
    --border-width-accent: 2px;       /* Spessore bordo accent (accordion) */
    --border-radius-sm: 4px;          /* Raggio piccolo */
    --border-radius-md: 8px;          /* Raggio medio */
    --border-radius-lg: 10px;         /* Raggio grande */
    --border-radius-xl: 12px;         /* Raggio extra large */
    --border-radius-bottom: 20px;     /* Raggio inferiore (CTA) */

    /* ── TIPOGRAFIA ──────────────────────── */
    --font-heading: 'Syncopate', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-alt: "Varela Round", sans-serif;  /* Font alternativo (box aggiornamenti) */

    /* ── DIMENSIONI FONT ─────────────────── */
    --font-size-base: 1.25rem;         /* Testo base paragrafi */
    --font-size-small: 1.15rem;        /* Testo piccolo (liste, tabelle) */
    --font-size-caption: 0.95rem;      /* Didascalie */
    --font-size-icon: 1.5rem;          /* Icone */
    --font-size-code: 0.88em;          /* Codice inline */
    --font-size-code-block: 0.95rem;   /* Blocco codice */
    --font-size-blockquote: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); /* Blockquote responsive */
    --font-size-btn: 1.15rem;          /* Pulsanti */

    /* ── DIMENSIONI TITOLI (CLAMP) ──────── */
    /* Formato: clamp(min, preferito, max) */
    --h1-size: clamp(2rem, 4vw + 1rem, 4rem);       /* 32px - 64px */
    --h2-size: clamp(1.5rem, 3vw + 0.8rem, 3rem);   /* 24px - 48px */
    --h3-size: clamp(1.25rem, 2.5vw + 0.6rem, 2.5rem); /* 20px - 40px */
    --h4-size: clamp(1.1rem, 2vw + 0.5rem, 2rem);   /* 17.6px - 32px */
    --h5-size: clamp(1rem, 1.5vw + 0.4rem, 1.5rem); /* 16px - 24px */
    --h6-size: clamp(0.875rem, 1vw + 0.3rem, 1.25rem); /* 14px - 20px */

    /* ── PESO FONT ───────────────────────── */
    --weight-light: 300;
    --weight-normal: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* ── SPAZIATURE ──────────────────────── */
    --space-xs: 0.55rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ── LARGHEZZE MASSIME ──────────────── */
    --max-width-article: 105ch;        /* Larghezza massima articolo */
    --max-width-inner: 64ch;           /* Larghezza massima contenuto interno */
    --max-width-img: 33%;              /* Larghezza immagini flottanti */
    --max-content-width: 900px;        /* Larghezza contenuto accordion */

    /* ── SCROLL MARGIN ──────────────────── */
    --margin-scroll-top: 40px;

    /* ── SHADOW ─────────────────────────── */
    --box-shadow-table: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* ── TRANSIZIONI ────────────────────── */
    --transition-fast: 0.22s ease;
    --transition-normal: 0.25s ease-in-out;
    --transition-slow: 0.28s ease;
    --transition-accordion: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-hover: all 0.25s ease-in-out;

    /* ── LINE HEIGHTS ───────────────────── */
    --line-height-base: 1.55;
    --line-height-heading: 1.2;
    --line-height-tight: 1.05;
    --line-height-comfortable: 1.5;
    --line-height-relaxed: 1.6;

    /* ── OPACITÀ OVERLAY ────────────────── */
    --overlay-opacity: 0.36;
    --overlay-blur: 1.4px;

    /* ── ALTRI VALORI ───────────────────── */
    --gap-download: 10px;
    --caption-bg: rgba(0, 0, 0, 0.7);
    --caption-bg-solid: #000;
    --caption-bg-soft: #f3f4f6;
}


/* ============================================= */
/* 📦 COMPONENTI                                */
/* ============================================= */

/* ------------------------------------- */
/* .article.article                      */
/* ------------------------------------- */
.article.article {
    /* VARIABILI LOCALI */
    --clr-font: var(--text-medium);
    --clr-font-title: var(--clr-primary);
    --article-image-gap: clamp(0.9rem, 1.8vw, 1.5rem);
    --article-gallery-gap: clamp(0.7rem, 1.6vw, 1rem);
    --anchor-nav-accent: var(--clr-accent);
    --anchor-nav-icon-size: clamp(3.2rem, 6vw, 5.4rem);
    --anchor-nav-icon-gradient: linear-gradient(145deg, #ff7a45 0%, #ffa93d 35%, #f4512c 70%, #64d8ff 100%);
    --embed-ratio: 56.25%;

    overflow: hidden;
    position: relative;
    margin-inline: auto;
    width: 100%;
    white-space: normal;
    word-break: keep-all;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    line-height: var(--line-height-base);

    & * {
        scroll-margin-top: var(--margin-scroll-top);
    }

    +.article {
        margin-top: var(--space-xl);
    }

    &.limit-max {
        max-width: var(--max-width-article);
    }

    &.inner {
        max-width: var(--max-width-inner);
    }

    &.topMargin {
        margin-top: var(--space-xl);
    }

    &.bottomMargin {
        margin-bottom: var(--space-xl);
    }

    &.allegati {
        margin-top: var(--space-xl);
        padding-top: var(--space-sm);
        border-top: var(--border-width) var(--border-style) var(--border-color);

        .downloadContent {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 0;
            margin: 0;
            width: 100%;

            a {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: var(--gap-download);
                padding: var(--space-xs) var(--space-sm);
                width: 100%;
                text-decoration: none;
                font-size: var(--font-size-small);
                line-height: 1;
                background-color: var(--bg-download);
                transition: var(--transition-hover);

                &:hover {
                    background-color: var(--bg-download-hover);
                }

                .iconDownload i {
                    font-size: var(--font-size-icon);
                    line-height: 1;
                }

                .titleDownload {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                }
            }
        }
    }

    /* Clearfix per immagini flottanti */
    .img_left::before,
    .img_right::before,
    .img_left::after,
    .img_right::after {
        position: relative;
        display: block;
        overflow: hidden;
        visibility: hidden;
        clear: both;
        width: 100%;
        height: 0;
        content: " ";
    }

    hr {
        overflow: hidden;
        margin-block: var(--space-xl) var(--space-sm);
        color: transparent;
        width: 100%;
        height: 1px;
        background-color: transparent;
        border-bottom: var(--border-width) var(--border-style) var(--border-color);
        opacity: 1;
    }

    /* Sistema di titoli responsive con clamp() */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 0.5em 0;
        line-height: var(--line-height-heading);
        font-weight: var(--weight-bold);
        color: var(--clr-font-title);
        font-family: var(--font-heading);
    }

    h1 {
        font-size: var(--h1-size);
        letter-spacing: -0.02em;
        font-weight: var(--weight-extrabold);
    }

    h2 {
        font-size: var(--h2-size);
        letter-spacing: -0.01em;
        font-weight: var(--weight-bold);
    }

    h3 {
        font-size: var(--h3-size);
        font-weight: var(--weight-semibold);
    }

    h4 {
        font-size: var(--h4-size);
        font-weight: var(--weight-semibold);
    }

    h5 {
        font-size: var(--h5-size);
        font-weight: var(--weight-normal);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    h6 {
        font-size: var(--h6-size);
        font-weight: var(--weight-normal);
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .h-light {
        font-weight: var(--weight-light);
    }

    .h-muted {
        color: var(--text-muted);
    }

    @media (max-width: 768px) {
        h1 { margin-bottom: 0.3em; }
        h2 { margin-bottom: 0.35em; }
        h3, h4, h5, h6 { margin-bottom: 0.4em; }
    }

    strong, b {
        color: inherit;
        font-weight: var(--weight-extrabold);
    }

    i, em {
        font-style: italic;
        color: inherit;
    }

    u, ins {
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.14em;
    }

    s, strike {
        text-decoration-thickness: 0.08em;
    }

    a {
        color: var(--clr-primary);

        &:hover {
            text-decoration: underline;
        }
    }

    p {
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);

        +p {
            margin-top: var(--space-md);
        }
    }

    p, ul, ol, blockquote, pre, table,
    [data-image-block], .editor-image-block,
    [data-columns-block], .editor-columns,
    [data-html-block], .editor-html-block,
    [content-box], .editor-template-block,
    .editor-template-code {
        max-width: 100%;
        color: var(--clr-font);
    }

    /* ------------------------------------- */
    /* .editor-anchor-nav                    */
    /* ------------------------------------- */

    .editor-anchor-nav,
    .article-anchor-nav {
        display: block;
        position: relative;
        width: 100%;
        margin-block: var(--space-lg);
        padding: 0;
        border: 1px solid var(--border-color-medium);
        border-radius: var(--border-radius-sm);
        background-color: var(--bg-anchor-nav);
        overflow: hidden;
        isolation: isolate;
    }

    .editor-anchor-nav::after,
    .article-anchor-nav::after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: -5vw;
        right: -5vw;
        width: 25vw;
        height: 25vw;
        background: var(--anchor-nav-icon-gradient);
        opacity: 0.1;
        z-index: 0;
        -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTQuNzE1IDYuNTQyIDMuMzQzIDcuOTE0YTMgMyAwIDEgMCA0LjI0MyA0LjI0M2wxLjgyOC0xLjgyOUEzIDMgMCAwIDAgOC41ODYgNS41TDggNi4wODZhMSAxIDAgMCAwLS4xNTQuMTk5IDIgMiAwIDAgMSAuODYxIDMuMzM3TDYuODggMTEuNDVhMiAyIDAgMSAxLTIuODMtMi44M2wuNzkzLS43OTJhNCA0IDAgMCAxLS4xMjgtMS4yODd6Jy8+PHBhdGggZD0nTTYuNTg2IDQuNjcyQTMgMyAwIDAgMCA3LjQxNCA5LjVsLjc3NS0uNzc2YTIgMiAwIDAgMS0uODk2LTMuMzQ2TDkuMTIgMy41NWEyIDIgMCAxIDEgMi44MyAyLjgzbC0uNzkzLjc5MmMuMTEyLjQyLjE1NS44NTUuMTI4IDEuMjg3bDEuMzcyLTEuMzcyYTMgMyAwIDEgMC00LjI0My00LjI0M3onLz48L3N2Zz4=") center / contain no-repeat;
        mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTQuNzE1IDYuNTQyIDMuMzQzIDcuOTE0YTMgMyAwIDEgMCA0LjI0MyA0LjI0M2wxLjgyOC0xLjgyOUEzIDMgMCAwIDAgOC41ODYgNS41TDggNi4wODZhMSAxIDAgMCAwLS4xNTQuMTk5IDIgMiAwIDAgMSAuODYxIDMuMzM3TDYuODggMTEuNDVhMiAyIDAgMSAxLTIuODMtMi44M2wuNzkzLS43OTJhNCA0IDAgMCAxLS4xMjgtMS4yODd6Jy8+PHBhdGggZD0nTTYuNTg2IDQuNjcyQTMgMyAwIDAgMCA3LjQxNCA5LjVsLjc3NS0uNzc2YTIgMiAwIDAgMS0uODk2LTMuMzQ2TDkuMTIgMy41NWEyIDIgMCAxIDEgMi44MyAyLjgzbC0uNzkzLjc5MmMuMTEyLjQyLjE1NS44NTUuMTI4IDEuMjg3bDEuMzcyLTEuMzcyYTMgMyAwIDEgMC00LjI0My00LjI0M3onLz48L3N2Zz4=") center / contain no-repeat;
    }

    .editor-anchor-nav:not(:has(.article-anchor-nav-toggle)),
    .article-anchor-nav:not(:has(.article-anchor-nav-toggle)) {
        padding-bottom: clamp(1.15rem, 2.8vw, 1.8rem);
    }

    .editor-anchor-nav-title,
    .article-anchor-nav-title,
    .editor-anchor-nav-links,
    .article-anchor-nav-links,
    .article-anchor-nav-toggle {
        position: relative;
        z-index: 1;
    }

    .editor-anchor-nav-title,
    .article-anchor-nav-title {
        margin: 0;
        padding-top: clamp(1.15rem, 2.8vw, 1.8rem);
        padding-inline: clamp(1.15rem, 2.8vw, 1.8rem);
        color: #2f3237;
        font-size: clamp(1.1rem, 1.4rem + 1.1vw, 1.25rem);
        font-weight: var(--weight-extrabold);
        letter-spacing: 0.01em;
        line-height: var(--line-height-tight);
    }

    .editor-anchor-nav-links,
    .article-anchor-nav-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(0.8rem, 1.2vw + 1vw, 1.1rem);
        margin-top: 0;
        padding-top: clamp(1.15rem, 2.8vw, 1.8rem);
        padding-inline: clamp(1.15rem, 2.8vw, 1.8rem);
        overflow: hidden;
        max-height: none;
    }

    .article-anchor-nav.is-ready .editor-anchor-nav-links,
    .article-anchor-nav.is-ready .article-anchor-nav-links {
        transition: max-height var(--transition-accordion);
    }

    .editor-anchor-nav-item,
    .article-anchor-nav-item {
        display: block;
        align-items: center;
    }

    .editor-anchor-nav-link,
    .article-anchor-nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--anchor-nav-accent);
        font-size: clamp(1.15rem, 0.95rem + 1.2vw, 1.2rem);
        font-weight: var(--weight-normal);
        line-height: 1.25;
        text-decoration: none;
    }

    .editor-anchor-nav-link::before,
    .article-anchor-nav-link::before {
        content: "";
        display: inline-block;
        width: 0.56em;
        height: 0.56em;
        border-radius: 999px;
        background-color: currentColor;
        flex-shrink: 0;
    }

    .editor-anchor-nav-link:hover,
    .article-anchor-nav-link:hover {
        color: var(--clr-accent-hover);
        text-decoration: underline;
    }

    .article-anchor-nav-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: clamp(1.15rem, 2.2vw, 1.9rem);
        padding: clamp(1.15rem, 2.8vw, 1.8rem);
        padding-block: 1rem;
        width: 100%;
        border: 0;
        background: transparent;
        color: var(--anchor-nav-accent);
        font-size: clamp(1rem, 1rem + 0.95vw, 1.15rem);
        font-weight: var(--weight-extrabold);
        line-height: 1.1;
        cursor: pointer;

        &::before {
            pointer-events: none;
            background: linear-gradient(to top, rgb(229.5, 229.5, 229.5) 5%, transparent);
            content: "";
            display: block;
            height: 120px;
            position: absolute;
            right: 0;
            top: -120px;
            width: 100%;
            transition: opacity var(--transition-fast);
        }
    }

    .article-anchor-nav-toggle:hover {
        color: var(--clr-accent-alt);
    }

    .anchor-nav-toggle-icon {
        font-size: 0.95em;
        line-height: 1;
        transform-origin: center;
        transition: transform var(--transition-fast);
    }

    .article-anchor-nav.is-expanded .anchor-nav-toggle-icon {
        transform: rotate(180deg);
    }

    .article-anchor-nav.is-expanded .article-anchor-nav-toggle {
        &::before {
            opacity: 0;
        }
    }

    .article-anchor-nav.is-collapsed .editor-anchor-nav-item[data-anchor-nav-extra="1"],
    .article-anchor-nav.is-collapsed .article-anchor-nav-item[data-anchor-nav-extra="1"] {
        pointer-events: none;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--clr-font-title);

        &+* {
            margin-top: var(--space-lg);
        }

        &:not(:first-child) {
            margin-top: var(--space-lg);
        }
    }

    :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, table, figure, figcaption)[align="left"] {
        text-align: left;
    }

    :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, table, figure, figcaption)[align="center"] {
        text-align: center;
    }

    :where(p, h1, h2, h3, h4, h5, h6, blockquote, pre, table, figure, figcaption)[align="right"] {
        text-align: right;
    }

    code, kbd, samp {
        display: inline;
        padding: 0.14em 0.4em;
        border-radius: 0.35em;
        background-color: var(--bg-code);
        color: var(--text-dark);
        font-family: var(--font-mono);
        font-size: var(--font-size-code);
        word-break: break-word;
    }

    pre {
        overflow: auto;
        margin-top: var(--space-lg);
        padding: clamp(0.85rem, 1.8vw, 1.1rem);
        border: 1px solid var(--border-color-light);
        border-radius: var(--border-radius-lg);
        background-color: var(--bg-code-block);
        color: var(--text-code);
        font-family: var(--font-mono);
        font-size: var(--font-size-code-block);
        line-height: var(--line-height-base);
        -webkit-overflow-scrolling: touch;
    }

    pre code {
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
        line-height: inherit;
        white-space: pre;
    }

    blockquote {
        background-color: var(--bg-lighter);
        padding: 16px;
        border-radius: var(--border-radius-md);
        border-left: 2px solid var(--clr-primary);
        margin-top: 16px;
        font-size: var(--font-size-blockquote);
        line-height: var(--line-height-relaxed);
    }

    blockquote p {
        font-style: italic;
        color: var(--text-blockquote);
        margin: 0;
        padding-bottom: 0;
    }

    ul, ol {
        overflow: visible;
        margin: var(--space-sm) 0;
        margin-left: 1.5rem;
        padding: 0 0 0 var(--space-lg);
        
        li {
            padding: 0.3rem 0;
            font-size: var(--font-size-small);
            line-height: var(--line-height-comfortable);
            overflow-wrap: anywhere;

            >p {
                margin: 0;
            }
        }
    }

    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            list-style: none;
            position: relative;
            padding-left: 1.25rem;

            &::before {
                content: "✓";
                position: absolute;
                top: 0.55em;
                left: 0;
                color: var(--clr-secondary);
                font-size: var(--font-size-base);
                line-height: 1;
                font-weight: var(--weight-semibold);
            }
        }
    }

    ol {
        list-style-type: upper-roman;
    }

    ul ul, ul ol, ol ul, ol ol {
        margin: 0.35rem 0 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-family: inherit;
        box-shadow: var(--box-shadow-table);
        border-radius: var(--border-radius-md);
        overflow: hidden;
        margin-top: var(--space-md);
        background-color: var(--white);

        thead {
            background-color: var(--bg-table-header);
            color: var(--white);
            text-align: left;
        }

        th, td {
            padding: 12px 15px;
            border-bottom: var(--border-width) var(--border-style) var(--border-color);
            vertical-align: top;
            overflow-wrap: anywhere;
            font-size: var(--font-size-small);

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

            > :last-child {
                margin-bottom: 0;
            }
        }

        tbody {
            tr:nth-child(even) {
                background-color: var(--bg-table-row-even);
            }

            tr:hover {
                background-color: var(--bg-table-row-hover);
            }

            tr:last-child {
                border-bottom: none;
            }
        }

        td {
            color: var(--text-medium);
        }
    }

    iframe, video, audio, embed, object {
        max-width: 100%;
    }

    video {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--border-radius-lg);
    }

    audio {
        width: min(100%, 520px);
    }

    /* Frontend blocks generati da editor */
    [data-image-block],
    .editor-image-block {
        overflow: clip;
        display: block;
        width: 100%;
        margin-block: var(--space-lg);
    }

    [data-image-block] *,
    .editor-image-block * {
        box-sizing: border-box;
    }

    [data-image-block] .image-media,
    .editor-image-block .image-media {
        margin: 0;
        width: min(100%, var(--image-size, 100%));
    }

    [data-image-block] .image-media>a,
    .editor-image-block .image-media>a,
    [data-image-block].image-layout-gallery .gallery-image>a,
    .editor-image-block.image-layout-gallery .gallery-image>a {
        position: relative;
        display: block;
        width: 100%;
        text-decoration: none;
        color: inherit;
    }

    [data-image-block].image-layout-gallery .gallery-image>a,
    .editor-image-block.image-layout-gallery .gallery-image>a {
        overflow: hidden;
        isolation: isolate;
    }

    [data-image-block].image-layout-gallery .gallery-image>a::before,
    .editor-image-block.image-layout-gallery .gallery-image>a::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgb(0 0 0 / 0%);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        opacity: 0;
        transition: opacity var(--transition-slow), backdrop-filter var(--transition-slow), -webkit-backdrop-filter var(--transition-slow), background-color var(--transition-slow);
        pointer-events: none;
        z-index: 1;
    }

    [data-image-block].image-layout-gallery .gallery-image>a::after,
    .editor-image-block.image-layout-gallery .gallery-image>a::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: clamp(2.1rem, 5vw, 2.9rem);
        height: clamp(2.1rem, 5vw, 2.9rem);
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0OCA0OCc+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPSd3aGl0ZScgc3Ryb2tlLXdpZHRoPSczJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxjaXJjbGUgY3g9JzIxJyBjeT0nMjEnIHI9JzEwJy8+PHBhdGggZD0nbTI4IDI4IDEwIDEwJy8+PHBhdGggZD0nTTIxIDE2djEwJy8+PHBhdGggZD0nTTE2IDIxaDEwJy8+PC9nPjwvc3ZnPg==") center / contain no-repeat;
        transform: translate(-50%, -42%) scale(0.86);
        opacity: 0;
        transition: opacity 0.24s ease, transform 0.24s ease;
        pointer-events: none;
        z-index: 2;
    }

    [data-image-block].image-layout-gallery .gallery-image>a:hover::before,
    [data-image-block].image-layout-gallery .gallery-image>a:focus-visible::before,
    .editor-image-block.image-layout-gallery .gallery-image>a:hover::before,
    .editor-image-block.image-layout-gallery .gallery-image>a:focus-visible::before {
        opacity: 1;
        background: rgb(0 0 0 / var(--overlay-opacity));
        backdrop-filter: blur(var(--overlay-blur));
        -webkit-backdrop-filter: blur(var(--overlay-blur));
    }

    [data-image-block].image-layout-gallery .gallery-image>a:hover::after,
    [data-image-block].image-layout-gallery .gallery-image>a:focus-visible::after,
    .editor-image-block.image-layout-gallery .gallery-image>a:hover::after,
    .editor-image-block.image-layout-gallery .gallery-image>a:focus-visible::after {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1);
    }

    [data-image-block] img,
    .editor-image-block img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    [data-image-block] figcaption,
    .editor-image-block figcaption {
        margin-top: 0;
        padding: 0.65rem 0.85rem;
        color: var(--text-light);
        font-size: var(--font-size-caption);
        line-height: 1.45;
        border-bottom-left-radius: var(--border-radius-md);
        border-bottom-right-radius: var(--border-radius-md);
        background-color: var(--caption-bg-soft);
    }

    [data-image-block] figcaption:where(.image-caption, .gallery-caption),
    .editor-image-block figcaption:where(.image-caption, .gallery-caption) {
        overflow-wrap: anywhere;
    }

    [data-image-block] figcaption :where(a, strong, em),
    .editor-image-block figcaption :where(a, strong, em) {
        color: inherit;
    }

    [data-image-block] figcaption a,
    .editor-image-block figcaption a {
        text-decoration: underline;
        text-underline-offset: 0.12em;
    }

    [data-image-block] [data-image-text],
    [data-image-block] .image-text,
    .editor-image-block [data-image-text],
    .editor-image-block .image-text {
        min-width: 0;
    }

    [data-image-block] [data-image-text]> :first-child,
    [data-image-block] .image-text> :first-child,
    .editor-image-block [data-image-text]> :first-child,
    .editor-image-block .image-text> :first-child {
        margin-top: 0;
    }

    [data-image-block] [data-image-text]> :last-child,
    [data-image-block] .image-text> :last-child,
    .editor-image-block [data-image-text]> :last-child,
    .editor-image-block .image-text> :last-child {
        margin-bottom: 0;
    }

    [data-image-block].image-layout-center,
    .editor-image-block.image-layout-center {
        text-align: center;
    }

    [data-image-block].image-layout-center .image-media,
    .editor-image-block.image-layout-center .image-media {
        margin-inline: auto;
    }

    [data-image-block].image-layout-left,
    .editor-image-block.image-layout-left,
    [data-image-block].image-layout-right,
    .editor-image-block.image-layout-right {
        display: grid;
        gap: var(--article-image-gap);
        align-items: start;
        width: 100%;
    }

    [data-image-block].image-layout-left,
    .editor-image-block.image-layout-left {
        grid-template-columns: minmax(0, min(var(--image-size, 50%), 80%)) minmax(0, 1fr);
        grid-template-areas: "media text";
    }

    [data-image-block].image-layout-left>.image-media,
    .editor-image-block.image-layout-left>.image-media {
        grid-area: media;
    }

    [data-image-block].image-layout-left>[data-image-text],
    [data-image-block].image-layout-left>.image-text,
    .editor-image-block.image-layout-left>[data-image-text],
    .editor-image-block.image-layout-left>.image-text {
        grid-area: text;
    }

    [data-image-block].image-layout-right,
    .editor-image-block.image-layout-right {
        grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--image-size, 50%), 80%));
        grid-template-areas: "text media";
    }

    [data-image-block].image-layout-right>[data-image-text],
    [data-image-block].image-layout-right>.image-text,
    .editor-image-block.image-layout-right>[data-image-text],
    .editor-image-block.image-layout-right>.image-text {
        grid-area: text;
    }

    [data-image-block].image-layout-right>.image-media,
    .editor-image-block.image-layout-right>.image-media {
        grid-area: media;
    }

    [data-image-block].image-layout-left>.image-media,
    .editor-image-block.image-layout-left>.image-media,
    [data-image-block].image-layout-right>.image-media,
    .editor-image-block.image-layout-right>.image-media {
        overflow: clip;
        width: 100%;
        max-width: 100%;
        border-radius: var(--border-radius-md);
    }

    [data-image-block].image-layout-left>[data-image-text],
    [data-image-block].image-layout-left>.image-text,
    .editor-image-block.image-layout-left>[data-image-text],
    .editor-image-block.image-layout-left>.image-text,
    [data-image-block].image-layout-right>[data-image-text],
    [data-image-block].image-layout-right>.image-text,
    .editor-image-block.image-layout-right>[data-image-text],
    .editor-image-block.image-layout-right>.image-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    [data-image-block].image-layout-gallery,
    .editor-image-block.image-layout-gallery {
        display: flex;
        flex-direction: column;
        gap: var(--article-gallery-gap);
    }

    [data-image-block].image-layout-gallery>[data-gallery-group],
    .editor-image-block.image-layout-gallery>[data-gallery-group] {
        display: grid;
        grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
        gap: var(--article-gallery-gap);
    }

    [data-image-block].image-layout-gallery .gallery-item,
    .editor-image-block.image-layout-gallery .gallery-item {
        min-width: 0;
    }

    [data-image-block].image-layout-gallery .gallery-item.is-empty,
    .editor-image-block.image-layout-gallery .gallery-item.is-empty {
        display: none !important;
    }

    [data-image-block].image-layout-gallery .gallery-figure,
    .editor-image-block.image-layout-gallery .gallery-figure {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        height: 100%;
    }

    [data-image-block].image-layout-gallery .gallery-image,
    .editor-image-block.image-layout-gallery .gallery-image {
        overflow: hidden;
        border-radius: var(--border-radius-md);
        background-color: var(--bg-light);
    }

    [data-image-block].image-layout-gallery figure.gallery-figure:has(> figcaption) .gallery-image {
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    }

    [data-image-block].image-layout-gallery .gallery-image img,
    .editor-image-block.image-layout-gallery .gallery-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    [data-columns-block],
    .editor-columns {
        display: flex;
        align-items: flex-start;
        gap: clamp(0.9rem, 1.8vw, 1.35rem);
        width: 100%;
        margin-block: var(--space-lg);
    }

    [data-columns-block]>[data-column],
    [data-columns-block]>.editor-column,
    .editor-columns>[data-column],
    .editor-columns>.editor-column {
        min-width: 0;
        flex: 1 1 0;
    }

    [data-columns-block]>[data-column]> :first-child,
    [data-columns-block]>.editor-column> :first-child,
    .editor-columns>[data-column]> :first-child,
    .editor-columns>.editor-column> :first-child {
        margin-top: 0;
    }

    [data-columns-block]>[data-column]> :last-child,
    [data-columns-block]>.editor-column> :last-child,
    .editor-columns>[data-column]> :last-child,
    .editor-columns>.editor-column> :last-child {
        margin-bottom: 0;
    }

    [data-columns-block].columns-30-70>[data-column="left"],
    .editor-columns.columns-30-70>[data-column="left"] {
        flex: 0 1 30%;
    }

    [data-columns-block].columns-30-70>[data-column="right"],
    .editor-columns.columns-30-70>[data-column="right"] {
        flex: 0 1 70%;
    }

    [data-columns-block].columns-70-30>[data-column="left"],
    .editor-columns.columns-70-30>[data-column="left"] {
        flex: 0 1 70%;
    }

    [data-columns-block].columns-70-30>[data-column="right"],
    .editor-columns.columns-70-30>[data-column="right"] {
        flex: 0 1 30%;
    }

    [data-columns-block] [data-image-block],
    [data-columns-block] .editor-image-block,
    .editor-columns [data-image-block],
    .editor-columns .editor-image-block {
        margin-block: 0;
    }

    [content-box] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
        margin-block: var(--space-lg);
    }

    [content-box] [box] {
        padding: 1rem;
        border-radius: var(--border-radius-lg);
        background-color: var(--bg-box);

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

        > :last-child {
            margin-bottom: 0;
        }
    }

    .editor-template-block,
    [data-template-block] {
        margin-block: var(--space-lg);
        padding: 1rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-color-light);
        background-color: var(--bg-template);
    }

    .editor-template-code,
    [data-template-code] {
        margin-block: var(--space-lg);
        padding: 1rem;
        border-radius: var(--border-radius-lg);
        border: 1px solid var(--border-color-light);
        background-color: var(--bg-template);
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
        font-family: var(--font-mono);
        font-size: var(--font-size-code-block);
        line-height: 1.45;
    }

    [data-html-block],
    .editor-html-block {
        display: block;
        margin-block: var(--space-lg);
        max-width: 100%;
    }

    [data-html-block] [data-html-render],
    .editor-html-block [data-html-render],
    .editor-html-block .editor-html-render {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    [data-html-block] [data-html-render] :where(img, video, audio, embed, object),
    .editor-html-block [data-html-render] :where(img, video, audio, embed, object),
    .editor-html-block .editor-html-render :where(img, video, audio, embed, object) {
        max-width: 100%;
    }

    [data-html-block] [data-html-render] iframe,
    .editor-html-block [data-html-render] iframe,
    .editor-html-block .editor-html-render iframe {
        display: block;
        width: 100%;
        max-width: 100%;
        min-height: clamp(220px, 45vw, 520px);
        border: 0;
    }

    [data-html-block] [data-html-render] .editor-html-embed-responsive,
    .editor-html-block [data-html-render] .editor-html-embed-responsive,
    .editor-html-block .editor-html-render .editor-html-embed-responsive {
        position: relative;
        width: 100%;
        max-width: 100%;
        padding-top: var(--embed-ratio);
        overflow: hidden;
        border-radius: var(--border-radius-xl);
        background: #000;
    }

    [data-html-block] [data-html-render] .editor-html-embed-responsive>iframe,
    .editor-html-block [data-html-render] .editor-html-embed-responsive>iframe,
    .editor-html-block .editor-html-render .editor-html-embed-responsive>iframe {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-height: 0;
        border: 0;
    }

    [data-caption-add],
    [data-caption-remove],
    [data-image-caption-add],
    [data-image-caption-remove],
    [data-gallery-caption-add],
    [data-gallery-caption-remove],
    [data-image-caption-trigger],
    [data-gallery-caption-trigger],
    [data-gallery-image-remove],
    [data-gallery-add],
    [data-gallery-group-add],
    [data-image-link-trigger],
    [data-html-label],
    .image-caption-trigger,
    .gallery-caption-trigger,
    .image-caption-add,
    .gallery-caption-add,
    .image-caption-remove,
    .gallery-caption-remove,
    .gallery-add,
    .gallery-group-add,
    .gallery-image-remove,
    .image-link-trigger,
    .editor-block-handle {
        display: none !important;
    }

    @media (max-width: 1024px) {
        [data-image-block].image-layout-gallery>[data-gallery-group],
        .editor-image-block.image-layout-gallery>[data-gallery-group] {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        }
    }

    @media (max-width: 900px) {
        [data-columns-block],
        .editor-columns {
            flex-direction: column;
        }

        [data-columns-block]>[data-column],
        [data-columns-block]>.editor-column,
        .editor-columns>[data-column],
        .editor-columns>.editor-column {
            width: 100%;
            flex: 1 1 auto !important;
        }

        [data-html-block] [data-html-render] iframe,
        .editor-html-block [data-html-render] iframe,
        .editor-html-block .editor-html-render iframe {
            min-height: clamp(190px, 52vw, 420px);
        }
    }

    @media (max-width: 760px) {
        [data-image-block].image-layout-left,
        .editor-image-block.image-layout-left,
        [data-image-block].image-layout-right,
        .editor-image-block.image-layout-right {
            grid-template-columns: 1fr;
            grid-template-areas: "media" "text";
        }

        [data-image-block].image-layout-left>.image-media,
        .editor-image-block.image-layout-left>.image-media,
        [data-image-block].image-layout-left>[data-image-text],
        [data-image-block].image-layout-left>.image-text,
        .editor-image-block.image-layout-left>[data-image-text],
        .editor-image-block.image-layout-left>.image-text,
        [data-image-block].image-layout-right>.image-media,
        .editor-image-block.image-layout-right>.image-media,
        [data-image-block].image-layout-right>[data-image-text],
        [data-image-block].image-layout-right>.image-text,
        .editor-image-block.image-layout-right>[data-image-text],
        .editor-image-block.image-layout-right>.image-text {
            grid-column: 1;
        }

        [data-image-block].image-layout-left .image-media,
        .editor-image-block.image-layout-left .image-media,
        [data-image-block].image-layout-right .image-media,
        .editor-image-block.image-layout-right .image-media {
            width: 100%;
        }
    }

    @media (max-width: 640px) {
        .editor-anchor-nav,
        .article-anchor-nav {
            padding: 1rem 0.95rem;
        }

        .editor-anchor-nav-title,
        .article-anchor-nav-title {
            font-size: clamp(1.45rem, 1.25rem + 1.1vw, 2rem);
        }

        .editor-anchor-nav-link,
        .article-anchor-nav-link {
            font-size: clamp(1.05rem, 0.94rem + 0.75vw, 1.3rem);
        }

        .article-anchor-nav-toggle {
            font-size: clamp(1.08rem, 0.98rem + 0.9vw, 1.45rem);
        }

        [data-image-block].image-layout-gallery>[data-gallery-group],
        .editor-image-block.image-layout-gallery>[data-gallery-group] {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 520px) {
        [data-image-block].image-layout-gallery>[data-gallery-group],
        .editor-image-block.image-layout-gallery>[data-gallery-group] {
            grid-template-columns: 1fr;
        }

        table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;

            > :where(thead, tbody, tfoot) {
                min-width: 560px;
            }
        }

        pre {
            font-size: 0.9rem;
        }
    }

    /* Immagini flottanti */
    .img_left {
        clear: left;
        display: block;
        float: left;
        margin: 10px 4% 10px 0;
        max-width: var(--max-width-img);

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .img_center {
        clear: none;
        display: block;
        float: none;
        margin: 10px 0;
        max-width: 100%;
        text-align: center;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .img_right {
        clear: right;
        display: block;
        float: right;
        margin: 10px 0 10px 4%;
        max-width: var(--max-width-img);

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .img_with_caption {
        display: block;
        max-width: 100%;
        overflow: hidden;
        position: relative;

        &.img_right,
        &.img_left {
            max-width: var(--max-width-img);
        }

        img {
            max-width: 100%;
            vertical-align: top;
        }

        .img_caption {
            background-color: var(--caption-bg);
            bottom: 0;
            color: var(--white);
            display: block;
            font-size: var(--font-size-caption);
            line-height: var(--line-height-comfortable);
            padding: 10px 15px;
            position: absolute;
            transition: all 0.5s ease-in-out;
            width: 100%;
        }

        &:hover .img_caption {
            bottom: -60px;
        }
    }

    .img_huge {
        width: 100%;
    }

    @media (max-width: 768px) {
        .img_left,
        .img_right,
        .img_with_caption {
            max-width: none;
            width: 100%;
            margin: 10px 0;
        }

        .img_with_caption .img_caption {
            background-color: var(--caption-bg-solid);
            position: relative;
            transition: none;
        }

        .img_with_caption:hover {
            padding: 10px 15px;
        }
    }
}


/* ------------------------------------- */
/* .infoAccordion.infoAccordion--boost   */
/* ------------------------------------- */
.infoAccordion.infoAccordion--boost {
    /* VARIABILI LOCALI */
    --article-padding: 1.55rem;
    --elm-padding-block: 1.55rem;
    --grid-gap: 81px;
    --grid-margin: 36px;
    --icon-font-size: 2rem;
    --mobile-icon-font-size: 1.2rem;
    --title-font-size: 1.25rem;
    --mobile-title-font-size: 1.15rem;
    --title-line-height: 1.15;
    --clr-font: var(--text-body);
    --clr-light-bg: var(--bg-accordion-light);
    --clr-primary: var(--clr-red);
    --border-style: var(--border-style);
    --border-width: var(--border-width-accent);
    --max-content-width: var(--max-content-width);
    --transition-default: var(--transition-normal);
    --transition-duration: 0.25s;
    --transition-easing: ease-in-out;

    position: relative;
    padding-block: var(--grid-margin);

    &.no-pddng {
        padding-block: unset;
    }

    & * {
        transition: var(--transition-default);
    }

    & .infoAccordion__elm {
        display: block;
        width: min(100%, var(--max-content-width));
        padding-block: var(--elm-padding-block);
        border-top: var(--border-width) var(--border-style) var(--clr-font);
        border-bottom: var(--border-width) var(--border-style) var(--clr-font);

        &+.infoAccordion__elm {
            margin-top: calc(-1 * var(--border-width));
        }

        & label {
            display: block;

            & input {
                display: none;

                &:checked {
                    &~.elmTitolo {
                        font-style: italic;

                        & h3 i {
                            transform: rotate(45deg);
                        }
                    }

                    &~article[elm_article] {
                        pointer-events: all;
                        padding: var(--article-padding);
                        max-height: 100vh;
                        opacity: 1;
                    }
                }
            }

            & article[elm_article] {
                overflow: clip;
                pointer-events: none;
                width: 100%;
                padding-top: 0;
                max-height: 0;
                opacity: 0;
            }
        }

        & .elmTitolo {
            position: relative;
            width: 100%;

            & h3 {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                width: 100%;
                color: var(--clr-primary);
                font-size: var(--title-font-size);
                line-height: var(--title-line-height);
                font-weight: var(--weight-semibold);

                & i {
                    color: var(--clr-primary);
                    font-size: var(--icon-font-size);
                    line-height: 1;
                    font-style: normal !important;
                    font-weight: 900;
                }

                &:hover {
                    cursor: pointer;
                    font-style: italic;
                }
            }
        }

        & .innerObject {
            margin-block-start: var(--elm-padding-block);

            &:first-child {
                margin-block-start: 0;
            }

            & .titolo {
                color: var(--clr-primary);
            }
        }
    }

    @media (max-width: 768px) {
        & .infoAccordion__elm .elmTitolo h3 {
            font-size: var(--mobile-title-font-size);
            line-height: 1;

            & i {
                font-size: var(--mobile-icon-font-size);
            }
        }
    }
}


/* ------------------------------------- */
/* .cta.cta                              */
/* ------------------------------------- */
.cta.cta {
    /* VARIABILI LOCALI */
    --cc-primary: orange;
    --cc-secondary: orange;
    --cta-bg: var(--cc-secondary);
    --cta-title-bg: var(--cc-secondary);
    --cta-highlight-color: var(--cc-primary);
    --cta-text-color: var(--white);
    --cta-title-text-color: var(--white);
    --cta-padding: 1.2rem;
    --cta-title-padding: 9px 1.2rem;
    --cta-title-font-size: 1.25rem;
    --cta-title-icon-font-size: 0.9rem;
    --cta-title-line-height: 1;
    --cta-paragraph-font-size: 1rem;
    --cta-paragraph-font-size-mobile: 0.9rem;
    --cta-paragraph-max-width: 115ch;
    --cta-margin-block: 80px 1.5rem;
    --cta-margin-block-mobile: 4.5rem 1.5rem;
    --cta-home-margin-block: 1rem;
    --cta-home-margin-block-tablet: 6rem 3rem;
    --cta-home-margin-block-mobile: 4rem 3rem;
    --cta-border-radius-bottom: var(--border-radius-bottom);
    --cta-corner-offset: -9px;
    --cta-corner-size: 18px;
    --cta-button-gap: 10px;
    --cta-title-transition: background-color 0.25s ease-in-out;
    --bg-btn: var(--bg-btn);
    --bg-color: var(--bg-btn-alt);
    --clr-secondary: var(--clr-secondary);

    position: relative;
    display: block;
    margin-block: var(--cta-margin-block);
    padding: var(--cta-padding);
    color: var(--cta-text-color);
    background-color: var(--cta-bg);
    border-bottom-left-radius: var(--cta-border-radius-bottom);
    border-bottom-right-radius: var(--cta-border-radius-bottom);

    &.home {
        margin-block: var(--cta-home-margin-block);

        @media (max-width: 960px) {
            margin-block: var(--cta-home-margin-block-tablet);
        }

        @media (max-width: 768px) {
            margin-block: var(--cta-home-margin-block-mobile);
        }
    }

    @media (max-width: 768px) {
        margin-block: var(--cta-margin-block-mobile);
    }

    & .cta__title {
        overflow: clip;
        position: absolute;
        bottom: 100%;
        left: 0;
        display: inline-block;
        padding: var(--cta-title-padding);
        color: var(--cta-title-text-color);
        font-size: var(--cta-title-font-size);
        font-weight: var(--weight-semibold);
        line-height: var(--cta-title-line-height);
        background-color: var(--cta-title-bg);
        border: none;
        box-shadow: none;
        transition: var(--cta-title-transition);

        & i {
            font-size: var(--cta-title-icon-font-size);
            line-height: 1;
            color: var(--cta-title-text-color);
        }

        &::after {
            content: '';
            position: absolute;
            top: var(--cta-corner-offset);
            right: var(--cta-corner-offset);
            width: var(--cta-corner-size);
            height: var(--cta-corner-size);
            background-color: white;
            transform: rotate(-45deg);
        }
    }

    & p,
    & a {
        font-size: var(--cta-paragraph-font-size);
    }

    & strong,
    & b,
    & a {
        color: var(--clr-secondary);
    }

    & p {
        max-width: var(--cta-paragraph-max-width);

        @media (max-width: 768px) {
            font-size: var(--cta-paragraph-font-size-mobile);
        }
    }

    & a.btn.small {
        color: var(--bg-color);
        text-decoration: none;
        background-color: var(--bg-btn);
        border: 1px solid var(--bg-color);
        transition: var(--transition-hover);

        &:hover {
            color: var(--bg-btn);
            background-color: var(--bg-color);
        }
    }

    & a.btn+a.btn {
        margin-left: var(--cta-button-gap);
    }
}


/* ------------------------------------- */
/* .BoxColonne.BoxColonne                */
/* ------------------------------------- */
.BoxColonne.BoxColonne {
    /* VARIABILI LOCALI */
    --bp-sm: 576px;
    --bp-md: 768px;
    --focus-bg-color: #f4f4f4;
    --focus-grid-min-col-width: 234px;
    --focus-grid-gap: var(--cntnr-pddng, 2rem);
    --focus-grid-padding-inline: var(--focus-grid-gap);
    --focus-margin-block: var(--cntnr-pddng, 2rem);
    --focus-margin-inline: var(--sctn-pddng, 0);
    --focus-padding-block: var(--cntnr-pddng, 2rem) 0;

    margin-block: var(--focus-margin-block);
    margin-inline: var(--focus-margin-inline);
    padding: var(--focus-padding-block);
    background-color: var(--focus-bg-color);

    @media (max-width: var(--bp-sm)) {
        margin-inline: 0;
    }

    & .griglia {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--focus-grid-min-col-width), 1fr));
        gap: var(--focus-grid-gap);
        padding-inline: var(--focus-grid-padding-inline);

        @media (max-width: var(--bp-md)) {
            flex-wrap: wrap;
        }
    }
}


/* ------------------------------------- */
/* .boxAggiornamentiPrg                  */
/* ------------------------------------- */
.boxAggiornamentiPrg.boxAggiornamentiPrg {
    --cc-orange: var(--clr-orange-alt);

    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: start;
    margin-top: 1rem;

    & .boxAggiornamentiPrg_cont {
        display: grid;
        grid-template-columns: 50px 1fr;
        align-items: center;
        padding: 0;
        min-height: 300px;
        background-color: white;
        border-bottom: 1px solid var(--cc-orange);

        &+* {
            margin-top: 0.55rem;
        }

        & .boxAggiornamentiPrg_cont-fascia {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--cc-orange);

            & strong {
                position: absolute;
                top: 2rem;
                left: 0;
                margin: 0;
                padding: 0;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                width: auto;
                height: 50px;
                font-family: var(--font-alt);
                font-size: 1.25rem;
                line-height: 1;
                text-transform: uppercase;
                letter-spacing: 1px;
                color: white;
                font-weight: 900;
                white-space: nowrap;
                transform-origin: top left;
                transform: rotate(-90deg) translateX(-100%);
            }
        }

        & .boxAggiornamentiPrg_cont-testi {
            padding: 1.25rem;
        }

        & .titoloAggrionamento {
            display: block;
            margin-bottom: 25px;
            text-align: center;
            font-family: var(--font-alt);
            color: var(--cc-orange);
        }
    }
}