/* ===========================================================================
   iClHub — tema
   ---------------------------------------------------------------------------
   Livello sopra Bootstrap 5. Bootstrap fornisce griglia, componenti e
   accessibilità; l'aspetto lo definisce questo file.

   RIFERIMENTO VISIVO: la scheda corso di Coursera.
   - Fascia hero su fondo tinta, con titolo, autore e azione principale
   - Striscia dei dettagli in card bianca che si sovrappone all'hero
   - Corpo a due colonne: contenuto + card laterale
   - Un solo colore d'accento: il blu storico del sito (#2a7f93)
   - Si animano SOLO transform e opacity: le gestisce la scheda grafica e non
     bloccano il disegno della pagina
   ======================================================================== */

:root {
    --ic-nero:        #111112;
    --ic-grigio-900:  #2b2b2e;
    --ic-grigio-600:  #6b6b70;
    --ic-grigio-400:  #9a9aa0;
    --ic-grigio-200:  #e4e4e6;
    --ic-grigio-100:  #f2f2f3;
    --ic-bianco:      #ffffff;

    /* 02/11/2026 - Colori del logo definitivo (Ivan): blu #37a4bf, arancione #ff9900,
       verde #9bc455, grigio #666666. Puri solo per marchio, icone e tessere; qui il
       tono piu' scuro della stessa tinta, leggibile col testo bianco (AA 4,5:1). */
    --ic-blu-marchio: #37a4bf;
    --ic-arancio-marchio: #ff9900;
    --ic-verde-marchio: #9bc455;
    --ic-blu:         #2a7f93;
    --ic-blu-scuro:   #216374;
    --ic-blu-tinta:   #ebf6f9;

    --ic-raggio:      .5rem;
    --ic-spazio:      clamp(2rem, 4vw, 3.5rem);
    --ic-transizione: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Base ---------------------------------------------------------------- */

/* Base tipografica un filo piu' grande: tutto il tema e' in rem, quindi
   alzando la radice cresce l'intero sito in proporzione. */
html {
    font-size: 109.375%;
}

body {
    background: var(--ic-bianco);
    color: var(--ic-nero);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--ic-transizione);
}

a:hover {
    opacity: .7;
}

/* Collegamento evidenziato nel testo, come i link Coursera. */
.ic-link {
    color: var(--ic-blu);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ic-link:hover {
    color: var(--ic-blu-scuro);
    opacity: 1;
}

/* --- Etichette ------------------------------------------------------------ */

.ic-etichetta {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-pillola {
    display: inline-block;
    padding: .45rem 1rem;
    background: var(--ic-grigio-100);
    border: 0;
    border-radius: 100px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ic-grigio-900);
    transition: background-color var(--ic-transizione);
}

.ic-pillola:hover {
    background: var(--ic-grigio-200);
    opacity: 1;
}

.ic-pillola--attiva,
.ic-pillola--attiva:hover {
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

/* --- Header -------------------------------------------------------------- */

.ic-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-header__marchio {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.25rem;
    color: var(--ic-blu);
}

.ic-header__menu a {
    position: relative;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ic-grigio-900);
    padding: .3rem 0;
    transition: color 180ms ease;
}

/* Sottolineatura che cresce dal centro: compare in hover, resta fissa e piu'
   marcata sulla voce della pagina corrente. */
.ic-header__menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ic-blu);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
}

.ic-header__menu a:hover {
    color: var(--ic-blu);
    opacity: 1;
}

.ic-header__menu a:hover::after {
    transform: scaleX(1);
}

.ic-header__menu a.ic-attivo {
    color: var(--ic-blu-scuro);
    font-weight: 600;
}

.ic-header__menu a.ic-attivo::after {
    height: 3px;
    transform: scaleX(1);
}

/* Contatti e FAQ a destra (20/10/2026): piu' piccoli del menu principale,
   separati dalle icone di account e carrello da un filo verticale. */
.ic-header__servizi {
    align-items: center;
    gap: 1.1rem;
    padding-right: 1.1rem;
    margin-right: .15rem;
    border-right: 1px solid var(--ic-grigio-200);
}

.ic-header__servizi a {
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
    transition: color 180ms ease;
}

.ic-header__servizi a:hover,
.ic-header__servizi a.ic-attivo {
    color: var(--ic-blu-scuro);
    opacity: 1;
}

.ic-header__servizi a.ic-attivo {
    font-weight: 600;
}

.ic-header__cerca input {
    width: 14rem;
    border-radius: 100px;
    border-color: var(--ic-grigio-200);
    background: var(--ic-grigio-100);
    transition: border-color var(--ic-transizione), background-color var(--ic-transizione);
}

.ic-header__cerca input:focus {
    background: var(--ic-bianco);
    border-color: var(--ic-blu);
    box-shadow: none;
}

/* --- Percorso di navigazione --------------------------------------------- */

.ic-percorso {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-percorso a {
    color: var(--ic-blu);
    font-weight: 500;
}

.ic-percorso span + span::before {
    /* Separatore: fa-chevron-right di FontAwesome come maschera (21/10/2026). */
    content: "";
    display: inline-block;
    width: .4rem;
    height: .6rem;
    margin: 0 .6rem;
    background: var(--ic-grigio-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Fascia hero ----------------------------------------------------------
   Fondo tinta come la testata Coursera. Il padding inferiore extra lascia
   spazio alla striscia dei dettagli che le si sovrappone.
   ------------------------------------------------------------------------- */

.ic-hero {
    background: var(--ic-blu-tinta);
    padding-block: 1.5rem 5.5rem;
}

.ic-hero__titolo {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.ic-hero__sottotitolo {
    font-size: 1.0625rem;
    color: var(--ic-grigio-900);
    line-height: 1.6;
    max-width: 44rem;
}

.ic-hero__autore {
    font-size: .9375rem;
    color: var(--ic-grigio-900);
}

/* Copertina nell'hero: piccola, incorniciata, non domina la pagina. */
.ic-hero__copertina {
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    aspect-ratio: 3 / 4;
    max-width: 15rem;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ic-hero__copertina img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ic-hero__copertina--vuota {
    color: var(--ic-grigio-400);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Variante per le pagine elenco: nessuna striscia sovrapposta sotto. */
.ic-hero--breve {
    padding-block: 1.5rem 2.5rem;
}

/* Variante per la home: piu' respiro, contenuto centrato. */
.ic-hero--home {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Hero con fotografia di sfondo: un velo bianco tiene leggibile il testo,
   sfumando verso il basso per raccordarsi alla pagina. */
.ic-hero--foto {
    background-image:
        linear-gradient(rgba(255, 255, 255, .88), rgba(238, 244, 251, .94)),
        url('/assets/img/hero-sicurezza.jpg');
    background-size: cover;
    background-position: center 30%;
}

.ic-cerca-grande {
    max-width: 34rem;
}

.ic-cerca-grande input {
    border-radius: 100px;
    border-color: var(--ic-grigio-200);
    padding-inline: 1.5rem;
    font-size: 1rem;
}

.ic-cerca-grande input:focus {
    border-color: var(--ic-blu);
    box-shadow: 0 2px 16px rgba(42, 127, 147, .18);
}

/* --- Mosaico hero (ispirazione: vetrina di uno store) ----------------------
   Una tessera grande con il contenuto in sovraimpressione, due tessere
   piccole impilate a fianco. Su mobile si impila tutto.
   ------------------------------------------------------------------------- */

.ic-mosaico {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.ic-mosaico__colonna {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.ic-tessera {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: var(--ic-raggio);
    overflow: hidden;
    background: var(--ic-grigio-900);
    min-height: 11rem;
    transition: transform var(--ic-transizione);
}

.ic-tessera:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.ic-tessera--grande {
    min-height: 23rem;
}

/* La copertina fa da sfondo: riempie la tessera, sfocata quel tanto che
   basta a reggere il testo sopra. */
.ic-tessera__sfondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.04);
}

.ic-tessera__velo {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(17, 17, 18, .18) 15%,
        rgba(17, 17, 18, .68) 55%,
        rgba(17, 17, 18, .96) 100%);
}

.ic-tessera__testo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: 1.5rem;
    color: var(--ic-bianco);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.ic-tessera__occhiello {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

.ic-tessera__titolo {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.ic-tessera__titolo--piccolo {
    font-size: 1rem;
}

.ic-tessera__nota {
    font-size: .875rem;
    opacity: .8;
}

/* Su mobile il mosaico resta un gruppo, come sul desktop: tessera grande
   sopra, le due piccole affiancate sotto. Altezze ridotte per non
   allungare lo scroll. */
@media (max-width: 991px) {
    .ic-mosaico {
        grid-template-columns: 1fr 1fr;
        gap: .75rem;
    }

    .ic-tessera--grande {
        grid-column: 1 / -1;
        min-height: 13rem;
    }

    /* Le due tessere della colonna diventano celle della griglia madre. */
    .ic-mosaico__colonna {
        display: contents;
    }

    .ic-tessera {
        min-height: 8.5rem;
    }

    .ic-tessera__testo {
        padding: 1rem;
        gap: .2rem;
    }

    .ic-tessera__titolo {
        font-size: 1.125rem;
    }

    .ic-tessera__titolo--piccolo {
        font-size: .8125rem;
    }

    .ic-tessera .ic-bottone {
        padding: .55rem 1.25rem;
        font-size: .8125rem;
    }
}

/* --- Azioni rapide --------------------------------------------------------- */

.ic-azioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.ic-azione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    border: 0;
    border-radius: var(--ic-raggio);
    font-size: .9375rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(42, 127, 147, .28);
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1),
                background-color 160ms ease,
                box-shadow 160ms ease;
}

.ic-azione:hover {
    background: var(--ic-blu-scuro);
    color: var(--ic-bianco);
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(33, 99, 116, .4);
    opacity: 1;
}

.ic-azione__icona {
    font-size: 1.1rem;
    line-height: 1;
}

/* Nella hero le pillole delle categorie sono filtri veri e propri:
   fondo bianco pieno, testo blu, e un hover netto che le ingrandisce. */
.ic-hero .ic-pillola {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
    font-weight: 600;
    border: 1px solid rgba(42, 127, 147, .35);
    box-shadow: 0 1px 6px rgba(17, 17, 18, .08);
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1),
                background-color 160ms ease,
                color 160ms ease,
                box-shadow 160ms ease;
}

.ic-hero .ic-pillola:hover {
    background: var(--ic-blu);
    color: var(--ic-bianco);
    transform: scale(1.08);
    box-shadow: 0 5px 16px rgba(33, 99, 116, .35);
}

.ic-hero .ic-pillola .ic-filtri__numero {
    color: inherit;
    opacity: .65;
}

/* In hover la pillola diventa blu col testo bianco: il numero deve seguirla,
   altrimenti resta bianco sul suo fondo grigio chiaro. */
.ic-hero .ic-pillola:hover .ic-filtri__numero,
.ic-hero .ic-pillola:focus-visible .ic-filtri__numero {
    background: rgba(255, 255, 255, .22);
    opacity: 1;
}

/* --- La fascia dei numeri -------------------------------------------------- */

.ic-numeri {
    background: var(--ic-blu);
    color: var(--ic-bianco);
    padding-block: var(--ic-spazio);
}

.ic-numeri__valore {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.ic-numeri__nome {
    font-size: .875rem;
    opacity: .75;
    margin-top: .25rem;
}

/* --- Striscia dei dettagli ------------------------------------------------
   La card bianca "Dettagli da conoscere": si aggancia a cavallo del bordo
   inferiore dell'hero.
   ------------------------------------------------------------------------- */

.ic-striscia {
    position: relative;
    z-index: 1;
    margin-top: -3.5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    box-shadow: 0 2px 12px rgba(17, 17, 18, .06);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    padding: 1.5rem 1rem;
}

.ic-striscia__voce {
    padding-inline: 1.25rem;
    border-left: 1px solid var(--ic-grigio-200);
}

.ic-striscia__voce:first-child {
    border-left: 0;
}

.ic-striscia__voce dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
    margin-bottom: .35rem;
}

.ic-striscia__voce dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-900);
}

@media (max-width: 767px) {
    .ic-striscia {
        grid-template-columns: 1fr 1fr;
        row-gap: 1.25rem;
    }

    .ic-striscia__voce:nth-child(odd) {
        border-left: 0;
    }
}

/* --- Prezzo e azioni ------------------------------------------------------ */

.ic-prezzo {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ic-prezzo__barrato {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ic-grigio-400);
    text-decoration: line-through;
    margin-left: .6rem;
}

.ic-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 2.25rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    border: 1px solid var(--ic-blu);
    border-radius: .375rem;
    font-size: .9375rem;
    font-weight: 600;
    transition: background-color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-bottone:hover {
    color: var(--ic-bianco);
    background: var(--ic-blu-scuro);
    border-color: var(--ic-blu-scuro);
    opacity: 1;
    transform: translateY(-1px);
}

.ic-bottone--vuoto {
    background: transparent;
    color: var(--ic-blu);
}

.ic-bottone--vuoto:hover {
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
}

/* --- Valutazione ---------------------------------------------------------- */

.ic-stelle {
    letter-spacing: .1em;
    font-size: .9375rem;
}

.ic-stelle__piene { color: var(--ic-blu); }
.ic-stelle__vuote { color: var(--ic-grigio-200); }

.ic-voto {
    font-weight: 700;
    color: var(--ic-grigio-900);
}

/* --- Card laterale -------------------------------------------------------- */

.ic-lato {
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    padding: 1.5rem;
}

.ic-lato__titolo {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.ic-lato hr {
    border-color: var(--ic-grigio-200);
    opacity: 1;
}

/* --- Elenco dei dati tecnici (dentro la card laterale) -------------------- */

.ic-dati {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: .75rem 1.25rem;
    font-size: .875rem;
}

.ic-dati dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-grigio-400);
    padding-top: .15rem;
}

.ic-dati dd {
    margin: 0;
    color: var(--ic-grigio-900);
}

/* --- Sezioni del corpo ---------------------------------------------------- */

.ic-sezione {
    padding-block: var(--ic-spazio);
}

.ic-sezione__titolo {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

.ic-testo {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ic-grigio-900);
    max-width: 52rem;
}

.ic-divisore {
    height: 1px;
    background: var(--ic-grigio-200);
    border: 0;
    margin: 0;
}

/* --- Screenshots ---------------------------------------------------------- */

.ic-screens {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.ic-screens a {
    display: block;
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--ic-grigio-100);
}

.ic-screens img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ic-transizione);
}

.ic-screens a:hover img {
    transform: scale(1.04);
}

/* --- Recensioni ----------------------------------------------------------- */

.ic-recensione {
    padding-block: 1.1rem;
    border-top: 1px solid var(--ic-grigio-200);
}

/* La prima recensione dopo il titolo di sezione non ha la riga sopra.
   (first-of-type non basta: nella colonna ci sono altri div prima.) */
h2 + .ic-recensione {
    border-top: 0;
    padding-top: 0;
}

.ic-recensione__nome {
    font-size: .875rem;
    font-weight: 700;
}

.ic-recensione__testo {
    font-size: .9375rem;
    color: var(--ic-grigio-900);
    line-height: 1.6;
    margin: .35rem 0 0;
}

/* --- Filtri nella sidebar del catalogo ------------------------------------ */

.ic-filtri {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9375rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

/* Ogni voce e' una riga arrotondata. Sull'hover si accende di tinta blu,
   cresce leggermente (scale) e il testo si ingrandisce con lei: il puntamento
   diventa evidente e "vivo", nello spirito delle liste 2026. */
.ic-filtri a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    color: var(--ic-grigio-900);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(.22, .61, .36, 1),
                background-color 200ms ease,
                color 200ms ease,
                font-weight 200ms ease;
}

.ic-filtri a:hover,
.ic-filtri a:focus-visible {
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-weight: 600;
    transform: scale(1.045);
    opacity: 1;
    outline: none;
}

.ic-filtri__numero {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
    background: var(--ic-grigio-100);
    border-radius: 100px;
    padding: .1rem .5rem;
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.ic-filtri a:hover .ic-filtri__numero,
.ic-filtri a:focus-visible .ic-filtri__numero {
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-filtri a.ic-filtri__attiva,
.ic-filtri__attiva {
    color: var(--ic-blu-scuro);
    font-weight: 700;
    background: var(--ic-blu-tinta);
}

/* Fuori da una categoria le tipologie sono quasi duecento: il riquadro
   scorre, la pagina no. overflow-x nascosto: lo scale non deve mai
   generare una barra di scorrimento orizzontale. */
.ic-filtri--scroll {
    max-height: 22rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: .25rem;
}

/* --- Gruppi filtro: card su desktop, popup su mobile ---------------------- */
/* Ogni gruppo e' un <dialog>. Su desktop lo mostriamo in flusso come una
   normale card laterale; su mobile resta nascosto finche' non viene aperto
   come popup (bottom sheet) da un pulsante della barra filtri. */

.ic-filtro {
    color: inherit;
}

.ic-filtro__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ic-filtro__chiudi {
    display: none;                 /* visibile solo nel popup (mobile) */
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-600);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.ic-filtro__chiudi:hover {
    background: var(--ic-grigio-200);
}

/* --- Sidebar a righe (ispirata ad AutoScout) ----------------------------- */
/* La sidebar mostra solo i NOMI dei filtri, uno per riga, col riassunto della
   scelta e una freccia. Il clic apre il pannello (flyout a fianco su desktop,
   sheet dal basso su mobile): niente lista lunga sempre a schermo. */

.ic-pannello {
    position: relative;
}

/* Su desktop la sidebar dei filtri resta visibile mentre si scorre l'elenco:
   piu' presenza, e il pannello a fianco ha sempre il suo ancoraggio. */
@media (min-width: 992px) {
    .ic-pannello {
        position: sticky;
        top: 5.5rem;
    }
}

.ic-pannello__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 .25rem 1rem;
}

.ic-pannello__tit {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ic-righe-filtro {
    display: flex;
    flex-direction: column;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(17, 17, 18, .05);
}

.ic-riga-filtro {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    min-height: 3.5rem;
    padding: .95rem 1.15rem;
    background: var(--ic-bianco);
    border: 0;
    border-bottom: 1px solid var(--ic-grigio-100);
    text-align: left;
    cursor: pointer;
    transition: background-color 160ms ease;
}

.ic-riga-filtro:last-child {
    border-bottom: 0;
}

.ic-riga-filtro:hover,
.ic-riga-filtro--aperta {
    background: var(--ic-blu-tinta);
}

/* Barra d'accento a sinistra quando il filtro ha una scelta attiva. */
.ic-riga-filtro--sel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ic-blu);
}

.ic-riga-filtro__nome {
    font-size: 1rem;
    font-weight: 600;
}

.ic-riga-filtro__val {
    margin-left: auto;
    max-width: 9rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ic-riga-filtro--sel .ic-riga-filtro__val {
    color: var(--ic-blu-scuro);
    font-weight: 600;
}

.ic-riga-filtro__frec {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-top: 2px solid var(--ic-grigio-400);
    border-right: 2px solid var(--ic-grigio-400);
    transform: rotate(45deg);
    transition: border-color 160ms ease;
}

.ic-riga-filtro:hover .ic-riga-filtro__frec,
.ic-riga-filtro--aperta .ic-riga-filtro__frec {
    border-color: var(--ic-blu);
}

/* Mobile: barra filtri in cima, al posto della sidebar. */
.ic-filtri-mobile {
    margin-bottom: 1.5rem;
}

.ic-filtri-mobile__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ic-filtro-trigger {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .6rem .85rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: .75rem;
    text-align: left;
    box-shadow: 0 1px 4px rgba(17, 17, 18, .05);
    cursor: pointer;
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1), border-color 160ms ease;
}

.ic-filtro-trigger:hover {
    border-color: var(--ic-blu);
}

.ic-filtro-trigger:active {
    transform: scale(.97);
}

.ic-filtro-trigger__eti {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-filtro-trigger__val {
    max-width: 100%;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-nero);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* I chip che riassumono cosa e' stato scelto. */
.ic-filtri-scelti {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
}

.ic-scelta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .35rem .3rem .7rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    border-radius: 100px;
    font-size: .8125rem;
    font-weight: 600;
}

.ic-scelta__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 100px;
    background: rgba(42, 127, 147, .18);
    color: var(--ic-blu-scuro);
    font-size: .95rem;
    line-height: 1;
}

.ic-scelta__x:hover {
    background: var(--ic-blu);
    color: var(--ic-bianco);
    opacity: 1;
}

/* Etichetta "Filtri attivi:" e link di azzeramento nella barra riepilogo. */
.ic-scelta__eti {
    align-self: center;
    margin-right: .1rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-scelta-azzera {
    align-self: center;
    padding-inline: .4rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ic-scelta-azzera:hover {
    color: var(--ic-blu);
    opacity: 1;
}

/* --- Voci di facet a selezione multipla (Formato, Anno) ------------------- */
/* Sono <a> dentro .ic-filtri, quindi ereditano hover e scale. In piu' hanno
   una casella tipo checkbox a sinistra: piena di blu quando la voce e' scelta. */
.ic-facet__eti {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.ic-facet__box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid var(--ic-grigio-200);
    border-radius: .35rem;
    font-size: .8rem;
    line-height: 1;
    color: var(--ic-bianco);
    transition: background-color 160ms ease, border-color 160ms ease;
}

.ic-facet__box--on {
    background: var(--ic-blu);
    border-color: var(--ic-blu);
}

.ic-filtri a.ic-facet:hover .ic-facet__box {
    border-color: var(--ic-blu);
}

/* Su mobile il pannello e' un popup CENTRATO, comodo da usare col pollice:
   largo quasi quanto lo schermo, con un tetto d'altezza e scorrimento interno. */
.ic-filtro[open] {
    display: block;
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(92vw, 460px);
    max-width: 92vw;
    height: fit-content;
    max-height: 82vh;
    overflow-y: auto;
    padding: 1.4rem;
    border-radius: 1rem;
    background: var(--ic-bianco);
    box-shadow: 0 24px 64px rgba(17, 17, 18, .3);
    animation: ic-modal-in 200ms cubic-bezier(.22, .61, .36, 1);
}

.ic-filtro[open] .ic-filtro__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ic-filtro::backdrop {
    background: rgba(17, 17, 18, .45);
    backdrop-filter: blur(2px);
}

@keyframes ic-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Desktop: il pannello aperto e' un flyout ancorato a fianco della sidebar.
   Questa regola viene DOPO quella del bottom sheet, cosi' su schermo largo
   vince lei (stessa specificita', decide l'ordine). */
@media (min-width: 992px) {
    .ic-filtro[open] {
        display: block;
        position: absolute;
        left: calc(100% + 14px);
        top: 0;
        right: auto;
        bottom: auto;
        width: 320px;
        max-width: 320px;
        max-height: 70vh;
        overflow-y: auto;
        margin: 0;
        padding: 1.25rem;
        border: 1px solid var(--ic-grigio-200);
        border-radius: var(--ic-raggio);
        background: var(--ic-bianco);
        box-shadow: 0 14px 44px rgba(17, 17, 18, .17);
        z-index: 60;
        animation: ic-flyout-in 160ms ease;
    }
}

@keyframes ic-flyout-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Selettori Dal-Al dell'anno. */
.ic-anno-range {
    display: flex;
    gap: .75rem;
}

.ic-anno-campo {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
}

/* Campo di ricerca dentro il pannello Tipologia. */
.ic-cerca-tip {
    width: 100%;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: .5rem;
    font-size: .9375rem;
}

.ic-cerca-tip:focus {
    outline: none;
    border-color: var(--ic-blu);
}

/* --- Paginazione ---------------------------------------------------------- */

.ic-paginazione {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .875rem;
}

.ic-paginazione a,
.ic-paginazione__attuale {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: .5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: .375rem;
}

.ic-paginazione a:hover {
    border-color: var(--ic-blu);
    color: var(--ic-blu);
    opacity: 1;
}

.ic-paginazione__attuale {
    background: var(--ic-blu);
    border-color: var(--ic-blu);
    color: var(--ic-bianco);
    font-weight: 600;
}

/* --- Griglia dei prodotti simili ------------------------------------------ */

.ic-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem 1.5rem;
    align-items: stretch;
}

/* La card e' una tessera chiara: cornice, ombra morbida, hover che solleva.
   Stessa famiglia visiva delle tessere della hero. */
.ic-card {
    display: flex;
    flex-direction: column;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(17, 17, 18, .05);
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1),
                box-shadow 160ms ease,
                border-color 160ms ease;
}

.ic-card:hover {
    transform: translateY(-4px);
    border-color: rgba(42, 127, 147, .45);
    box-shadow: 0 10px 24px rgba(17, 17, 18, .12);
    opacity: 1;
}

.ic-card__corpo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .9rem 1rem 1.1rem;
    flex: 1;
}

.ic-card__titolo {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.ic-card__prezzo {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
    padding-top: .5rem;
}

/* "Gratuito" e' il punto di forza del catalogo: badge pieno, si vede subito. */
.ic-card__gratis {
    display: inline-block;
    align-self: flex-start;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .75rem;
    border-radius: 100px;
}

/* Copertina delle card: riquadro 4:3 riempito tutto dall'immagine
   (20/10/2026: niente piu' bordi grigi). Le copertine verticali dei
   documenti si vedono dalla parte alta, dove stanno titolo e intestazione. */
.ic-copertina {
    background: var(--ic-grigio-100);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-copertina img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.ic-copertina:hover img {
    transform: scale(1.03);
}

.ic-copertina--vuota {
    color: var(--ic-grigio-400);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Comparsa in entrata -------------------------------------------------
   Solo opacity e transform. Nessuna libreria, nessun calcolo allo scroll.
   ------------------------------------------------------------------------- */

@keyframes ic-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.ic-entra {
    animation: ic-entra 620ms cubic-bezier(.22, .61, .36, 1) both;
}

.ic-entra--1 { animation-delay:  60ms; }
.ic-entra--2 { animation-delay: 140ms; }
.ic-entra--3 { animation-delay: 220ms; }

/* Rispetta chi ha chiesto meno animazioni nelle impostazioni di sistema. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --- Carrello -------------------------------------------------------------- */

.ic-carrello-icona {
    position: relative;
    display: inline-flex;
}

.ic-carrello-icona__numero {
    position: absolute;
    top: -.45rem;
    right: -.5rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding-inline: .25rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    border-radius: 100px;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

.ic-riga-carrello {
    display: grid;
    grid-template-columns: 5rem 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-riga-carrello__figura {
    aspect-ratio: 4 / 3;
    background: var(--ic-grigio-100);
    border-radius: .375rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
}

.ic-riga-carrello__figura img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ic-riga-carrello__prezzo {
    font-weight: 700;
    color: var(--ic-blu-scuro);
    white-space: nowrap;
}

.ic-rimuovi {
    background: none;
    border: 0;
    color: var(--ic-grigio-400);
    font-size: 1.35rem;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: .375rem;
    transition: color 160ms ease, background-color 160ms ease;
}

.ic-rimuovi:hover {
    color: #c0392b;
    background: var(--ic-grigio-100);
}

@media (max-width: 575px) {
    .ic-riga-carrello {
        grid-template-columns: 4rem 1fr auto;
        row-gap: .5rem;
    }

    .ic-riga-carrello__prezzo {
        grid-column: 2;
    }

    .ic-rimuovi {
        grid-row: 1;
        grid-column: 3;
        align-self: start;
    }
}

.ic-riga-ordine {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: var(--ic-raggio);
    margin-bottom: .75rem;
    transition: border-color 160ms ease, transform 160ms ease;
}

.ic-riga-ordine:hover {
    border-color: rgba(42, 127, 147, .45);
    transform: translateY(-2px);
    opacity: 1;
}

@media (max-width: 575px) {
    .ic-riga-ordine {
        grid-template-columns: 1fr auto;
        gap: .5rem 1rem;
    }
}

/* --- Faq ad accordion ------------------------------------------------------ */

.ic-faq {
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    transition: color 160ms ease;
}

.ic-faq summary::-webkit-details-marker {
    display: none;
}

.ic-faq summary::after {
    content: "+";
    color: var(--ic-blu);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 160ms ease;
}

.ic-faq[open] summary {
    color: var(--ic-blu-scuro);
}

.ic-faq[open] summary::after {
    transform: rotate(45deg);
}

.ic-faq > p {
    padding-bottom: 1.25rem;
}

/* --- Barra app (mobile) ----------------------------------------------------
   Navigazione fissa in basso, sotto il pollice: il sito da telefono
   si usa come una app.
   ------------------------------------------------------------------------- */

.ic-appbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ic-grigio-200);
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
}

.ic-appbar__voce {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex: 1 1 0;
    min-width: 0;
    padding: .3rem .25rem;
    border-radius: .6rem;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
    transition: color 160ms ease, transform 160ms ease;
}

.ic-appbar__voce:active {
    transform: scale(.92);
}

.ic-appbar__voce--attiva {
    color: var(--ic-blu);
    font-weight: 600;
}

@media (max-width: 991px) {
    /* Spazio per la barra app, che altrimenti copre il fondo pagina. */
    body {
        padding-bottom: 4.5rem;
    }
}

/* --- Comportamenti da app sugli schermi piccoli --------------------------- */

/* Su mobile le card usano una misura familiare: il quadrato di Instagram.
   Copertina 1:1 e griglie a due colonne: card corte, scroll dimezzato. */
@media (max-width: 767px) {
    .ic-griglia {
        grid-template-columns: 1fr 1fr;
        gap: 1rem .75rem;
    }

    .ic-card__corpo {
        padding: .7rem .8rem .9rem;
        gap: .2rem;
    }

    .ic-card__titolo {
        font-size: .8125rem;
    }

    .ic-card__prezzo {
        font-size: .8125rem;
        padding-top: .35rem;
    }
}

/* Le vetrine della home scorrono in orizzontale, a schede, come un feed. */
@media (max-width: 767px) {
    .ic-griglia--scorri {
        display: flex;
        gap: .9rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }

    .ic-griglia--scorri::-webkit-scrollbar {
        display: none;
    }

    .ic-griglia--scorri > * {
        flex: 0 0 72%;
        scroll-snap-align: start;
    }
}

/* Il nastro delle categorie: centrato e a capo su desktop,
   scorrimento orizzontale col dito su mobile. */
.ic-nastro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

/* Su mobile il nastro diventa una griglia di chip a due colonne:
   bersagli grandi, tutto visibile, niente scroll orizzontale. */
@media (max-width: 767px) {
    .ic-nastro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .ic-nastro .ic-pillola {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .65rem .9rem;
        border-radius: .6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .75rem;
    }
}

/* --- Pannello "Esplora per campo" (richiudibile solo su mobile) ------------ */

.ic-esplora summary {
    display: none;               /* su desktop il pannello e' sempre aperto */
    list-style: none;
    cursor: pointer;
}

.ic-esplora summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 991px) {
    .ic-esplora summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        padding: 1rem;
        background: var(--ic-bianco);
        color: var(--ic-blu-scuro);
        border: 1px solid rgba(42, 127, 147, .35);
        border-radius: var(--ic-raggio);
        font-size: .9375rem;
        font-weight: 600;
        box-shadow: 0 1px 6px rgba(17, 17, 18, .08);
    }

    .ic-esplora summary::after {
        content: "▾";
        color: var(--ic-blu);
        transition: transform 160ms ease;
    }

    .ic-esplora[open] summary::after {
        transform: rotate(180deg);
    }

    .ic-esplora[open] summary {
        margin-bottom: .75rem;
    }
}

/* --- Banner invito (sotto la hero) --------------------------------------- */

.ic-banner {
    background: #1d1d20;
    color: var(--ic-bianco);
}

.ic-banner__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 2.25rem;
}

.ic-banner__testo {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.55;
}

/* Il tocco manoscritto su "nel catalogo": font Caveat, il blu del logo, piu' grande. */
.ic-manoscritto {
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1;
    color: #37a4bf;
    padding: 0 .08em;
}

.ic-banner__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .85rem 1.7rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    border-radius: .6rem;
    font-size: 1.0625rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(42, 127, 147, .35);
    transition: background-color 160ms ease, transform 160ms ease;
}

.ic-banner__cta:hover {
    background: var(--ic-blu-scuro);
    opacity: 1;
    transform: translateY(-1px);
}

/* Su mobile testo e bottone si impilano. */
@media (max-width: 767px) {
    .ic-banner__interno {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.35rem;
        padding-block: 1.85rem;
    }

    .ic-banner__testo {
        font-size: 1.15rem;
    }
}

/* --- Promo Archivio (sopra il footer) ------------------------------------ */

.ic-promo {
    position: relative;
    background: var(--ic-bianco);
    padding-block: 3rem;
    text-align: center;
}

/* Linguetta triangolare al centro in alto: bianca come il banner, punta
   nella fascia blu dei numeri sopra, come nel riferimento. */
.ic-promo::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 14px solid var(--ic-bianco);
}

.ic-promo__interno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.ic-promo__tit {
    margin: 0 0 .4rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ic-nero);
}

.ic-promo__tit strong {
    font-weight: 700;
}

.ic-promo__sub {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ic-blu);
}

.ic-promo__sub strong {
    color: var(--ic-blu-scuro);
    font-weight: 700;
}

.ic-promo__azione {
    position: relative;
    flex: 0 0 auto;
}

/* La freccia sta A FIANCO del bottone, sulla destra, e la punta indica il
   bottone. Se serve, si regola con left/top qui sotto. */
.ic-promo__freccia {
    position: absolute;
    left: calc(100% + .4rem);
    top: 50%;
    transform: translateY(-55%);
    pointer-events: none;
}

.ic-promo__cta {
    display: inline-flex;
    align-items: center;
    padding: .95rem 2rem;
    background: #1d1d20;
    color: var(--ic-bianco);
    border-radius: .6rem;
    font-size: 1.0625rem;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(17, 17, 18, .25);
    transition: transform 160ms ease, background-color 160ms ease;
}

.ic-promo__cta:hover {
    background: #000;
    opacity: 1;
    transform: translateY(-1px);
}

/* Freccia: di base gia' disegnata (fallback senza JS). Con JS parte nascosta
   e si traccia quando la promo entra in vista, in sincrono col reveal. */
.js .ic-promo__freccia-linea { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ic-promo__freccia-punta { stroke-dasharray: 1; stroke-dashoffset: 1; }

.js .ic-promo.ic-visibile .ic-promo__freccia-linea {
    animation: ic-traccia 900ms ease forwards 250ms;
}
.js .ic-promo.ic-visibile .ic-promo__freccia-punta {
    animation: ic-traccia 420ms ease forwards 1050ms;
}

@keyframes ic-traccia {
    to { stroke-dashoffset: 0; }
}

@media (max-width: 767px) {
    .ic-promo__interno { gap: 1.75rem; }
    .ic-promo__tit { font-size: 1.2rem; }
    .ic-promo__freccia { display: none; }
}

/* --- Rivelazione al scroll (animazione leggera, solo transform/opacity) --- */
.js .ic-appari {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.js .ic-appari.ic-visibile {
    opacity: 1;
    transform: none;
}

/* Chi ha chiesto meno movimento: niente reveal, niente tracciatura. */
@media (prefers-reduced-motion: reduce) {
    .js .ic-appari { opacity: 1; transform: none; transition: none; }
    .js .ic-promo__freccia-linea,
    .js .ic-promo__freccia-punta { animation: none; stroke-dashoffset: 0; }
}

/* --- Piè di pagina ------------------------------------------------------- */

.ic-footer {
    background: var(--ic-grigio-100);
    padding-block: var(--ic-spazio);
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

/* --- Moduli dell'area utente --------------------------------------------- */
/* Registrazione, recupero password e profilo: moduli lunghi, spezzati in
   sezioni con un titolo che fa da appiglio visivo. */

.ic-titolo-sezione {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-riquadro {
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 10px;
    padding: 1.25rem;
}

/* Il modulo di reimpostazione non deve mai finire nella cronologia di
   navigazione come pagina "normale": nessuno stile lo distingue, ma tenerlo
   stretto scoraggia dal trattarlo come una pagina di contenuto. */
.ic-modulo-stretto {
    max-width: 30rem;
}

/* ===========================================================================
   AREA PERSONALE — la dashboard delle app
   ---------------------------------------------------------------------------
   E' la prima cosa che l'utente vede dopo l'accesso, quindi deve rispondere
   a una domanda sola: che cosa ho, e che cosa posso aprire adesso.

   Le card delle app sono l'elemento principale e stanno in alto; abbonamento
   e acquisti stanno sotto, affiancati, perche' si guardano di rado.
   =========================================================================== */

.ic-area {
    padding: 2rem 0 4rem;
    background: var(--ic-grigio-100);
    min-height: 60vh;
}

/* Bootstrap arriva col suo blu (#0d6efd), che non e' il blu iCLhub. Qui lo si
   riporta al colore del marchio agendo sulle variabili del componente, senza
   riscrivere le regole del bottone. Vale solo dentro l'area: allineare tutto
   il sito e' una decisione che merita di essere presa apposta. */
.ic-area .btn-primary {
    --bs-btn-bg: var(--ic-blu);
    --bs-btn-border-color: var(--ic-blu);
    --bs-btn-hover-bg: var(--ic-blu-scuro);
    --bs-btn-hover-border-color: var(--ic-blu-scuro);
    --bs-btn-active-bg: var(--ic-blu-scuro);
    --bs-btn-active-border-color: var(--ic-blu-scuro);
    --bs-btn-disabled-bg: var(--ic-blu);
    --bs-btn-disabled-border-color: var(--ic-blu);
}

.ic-area .btn-outline-primary {
    --bs-btn-color: var(--ic-blu-scuro);
    --bs-btn-border-color: var(--ic-blu);
    --bs-btn-hover-bg: var(--ic-blu);
    --bs-btn-hover-border-color: var(--ic-blu);
    --bs-btn-active-bg: var(--ic-blu-scuro);
    --bs-btn-active-border-color: var(--ic-blu-scuro);
}

/* --- disposizione (proposta PM 01/10/2026) -------------------------------
   Saluto, poi profilo e abbonamento affiancati, le app, e in fondo ordini
   e suggeriti. Le coppie si impilano sotto i 992px. */

.ic-area__saluto {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 700;
    color: var(--ic-grigio-900);
    margin: 0 0 1.5rem;
    line-height: 1.2;
}

.ic-area__coppia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1rem;
    margin-bottom: 2.25rem;
}

/* In fondo le colonne non si stirano (vedi sotto): align-items: start. */
.ic-area__fondo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ic-area__fondo {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    }

    .ic-area__fondo--solo {
        grid-template-columns: 1fr;
    }
}

.ic-area__intestazione-sezione--pulita {
    align-items: center;
    border-bottom: 0;
    padding-bottom: 0;
}

.ic-area__titolo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ic-grigio-900);
}

.ic-area__titolo .ic-conteggio {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* --- il pannello: card bianca con intestazione a riga ---------------------- */

.ic-pannello {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 12px;
}

.ic-pannello__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-pannello__titolo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ic-grigio-900);
}

.ic-pannello__titolo svg,
.ic-chi__email svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.ic-pannello__corpo {
    flex: 1;
    padding: 1.25rem;
}

/* --- il profilo ------------------------------------------------------------ */

.ic-chi__nome {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
    line-height: 1.25;
}

.ic-chi__email {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    color: var(--ic-blu-scuro);
    overflow-wrap: anywhere;
}

.ic-chi__email svg {
    width: .9rem;
    height: .9rem;
}

.ic-chi__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.1rem;
}

.ic-chi__tipo {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-chi__profilo {
    font-weight: 700;
    color: var(--ic-grigio-900);
}

.ic-chi__profilo span {
    font-weight: 400;
    color: var(--ic-grigio-600);
}

.ic-chi__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ic-chi__nota {
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

/* --- l'abbonamento: barra del tempo ---------------------------------------- */

.ic-tempo {
    height: 6px;
    border-radius: 100px;
    background: var(--ic-grigio-200);
    overflow: hidden;
}

.ic-tempo::before {
    content: "";
    display: block;
    width: var(--fatto, 0%);
    height: 100%;
    border-radius: inherit;
    background: #3fa66b;
}

.ic-tempo__testo {
    margin: .4rem 0 0;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-abbonamento__piede {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1rem;
}

.ic-abbonamento__piede .ic-dati {
    margin: 0;
}

/* --- ordini e acquisti ----------------------------------------------------- */

.ic-acquisti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
}

.ic-acquisti__titolo {
    margin: 0 0 .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ic-grigio-900);
}

.ic-acquisti__vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--ic-grigio-100);
    border: 1px dashed var(--ic-grigio-400);
    border-radius: 10px;
}

.ic-acquisti__vuoto p {
    margin: 0 0 .5rem;
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

/* --- suggeriti per te ------------------------------------------------------ */

.ic-suggeriti {
    list-style: none;
    margin: 0;
    padding: .25rem 1.25rem;
}

.ic-suggeriti li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 0;
}

.ic-suggeriti li + li {
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-suggeriti__img {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-weight: 700;
}

.ic-suggeriti__testo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ic-suggeriti__nome {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-900);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ic-suggeriti__sotto {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

/* --- sezioni --------------------------------------------------------------- */

.ic-area__sezione {
    margin-bottom: 2.25rem;
}

.ic-area__intestazione-sezione {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

/* La riga la disegna il contenitore, cosi' attraversa tutta la colonna invece
   di fermarsi sotto le parole del titolo. */
.ic-area__intestazione-sezione .ic-titolo-sezione {
    border-bottom: 0;
    padding-bottom: 0;
}

.ic-conteggio {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
    white-space: nowrap;
}

.ic-vuoto {
    color: var(--ic-grigio-600);
    font-size: .9375rem;
}

/* --- le card delle app ----------------------------------------------------- */

.ic-app-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
}

/* Card in vetro: bianco semitrasparente sullo sfondo grigio, ombra ben
   visibile; icona, nome e stato centrati (PM 01/10/2026). */
.ic-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 10px 28px rgba(17, 17, 18, .10), 0 2px 6px rgba(17, 17, 18, .06);
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1),
                box-shadow 160ms ease,
                background-color 160ms ease;
}

.ic-app:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 16px 36px rgba(17, 17, 18, .14), 0 3px 8px rgba(17, 17, 18, .08);
}

/* Un'app non disponibile resta leggibile ma non chiede attenzione:
   piu' trasparente, ombra leggera, icona a meta' intensita'. */
.ic-app--spenta {
    background: rgba(255, 255, 255, .35);
    box-shadow: 0 4px 14px rgba(17, 17, 18, .06);
}

.ic-app--spenta:hover {
    transform: none;
    background: rgba(255, 255, 255, .35);
    box-shadow: 0 4px 14px rgba(17, 17, 18, .06);
}

.ic-app--spenta .ic-app__icona {
    opacity: .45;
}

.ic-app--spenta .ic-app__nome,
.ic-app--spenta .ic-app__descrizione {
    color: var(--ic-grigio-600);
}

/* Icona FontAwesome (SVG incorporato) nel colore dell'app. */
.ic-app__icona {
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .9rem;
    fill: var(--tinta, var(--ic-blu));
    flex: 0 0 auto;
}

.ic-app__stato {
    margin-top: auto;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
    background: var(--ic-grigio-100);
    border-radius: 100px;
    padding: .3rem .7rem;
    white-space: nowrap;
}

.ic-app--attiva .ic-app__stato {
    color: #1c6b3f;
    background: #e6f4ec;
}

.ic-app--attivabile .ic-app__stato {
    color: var(--ic-blu-scuro);
    background: var(--ic-blu-tinta);
}

.ic-app__nome {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
    margin: 0 0 .3rem;
    line-height: 1.3;
}

.ic-app__descrizione {
    margin: 0 0 1.1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--ic-grigio-600);
}

.ic-app__limite {
    margin: .6rem 0 0;
    font-size: .8125rem;
    color: var(--ic-blu-scuro);
}

.ic-app__piede {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid rgba(17, 17, 18, .08);
}

.ic-app--spenta .ic-app__piede {
    border-top-color: transparent;
}

.ic-app__nota {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

/* Disattivare non e' un'azione da mettere in evidenza: c'e', si trova, non
   invita. Un bottone pieno accanto ad "Apri" farebbe premere la cosa sbagliata. */
.ic-bottone-testo {
    background: none;
    border: 0;
    padding: 0;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ic-bottone-testo:hover {
    color: var(--ic-grigio-900);
}

.ic-app-nota-griglia {
    margin: .9rem 0 0;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

/* --- abbonamento ----------------------------------------------------------- */

.ic-abbonamento__testa {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.ic-abbonamento__piano {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
    margin-right: .4rem;
}

.ic-badge {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: .25rem .6rem;
    vertical-align: middle;
}

.ic-badge--attivo { color: #1c6b3f; background: #e6f4ec; }
.ic-badge--prova  { color: #8a5a00; background: #fdf1dc; }

.ic-dati {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1.1rem;
}

.ic-dati dt {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
    margin-bottom: .15rem;
}

.ic-dati dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-900);
}

/* Le due colonne in fondo hanno contenuti di lunghezza diversa, e va bene
   cosi': stirare la piu' corta fino all'altezza dell'altra produce un
   riquadro mezzo vuoto, che si nota piu' di due colonne disallineate. */

.ic-invito {
    border-style: dashed;
    background: transparent;
}

.ic-invito p {
    font-size: .9375rem;
    color: var(--ic-grigio-600);
}

/* --- acquisti -------------------------------------------------------------- */

.ic-elenco-ordini {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 10px;
    overflow: hidden;
}

.ic-elenco-ordini li + li {
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-elenco-ordini a {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 140ms ease;
}

.ic-elenco-ordini a:hover {
    background: var(--ic-grigio-100);
}

.ic-elenco-ordini__data {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
    font-variant-numeric: tabular-nums;
}

.ic-elenco-ordini__numero {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-900);
}

.ic-elenco-ordini__totale {
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
    white-space: nowrap;
}

/* --- avvisi ---------------------------------------------------------------- */

.ic-avviso {
    background: var(--ic-blu-tinta);
    border: 1px solid rgba(42, 127, 147, .3);
    color: var(--ic-grigio-900);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}

.ic-avviso--festa {
    background: #e6f4ec;
    border-color: rgba(28, 107, 63, .25);
}

/* --- telefono -------------------------------------------------------------- */

@media (max-width: 575.98px) {
    .ic-area {
        padding-top: 1.25rem;
    }

    .ic-pannello__corpo {
        padding: 1rem;
    }

    .ic-abbonamento__piede .btn,
    .ic-chi__azioni,
    .ic-chi__azioni .btn {
        width: 100%;
    }

    /* Telefono: card piccole in fila, tre per schermata; se le app sono di
       piu' la fila scorre di lato (con aggancio), come le storie di Instagram.
       Resta l'essenziale: icona, nome, stato, azioni. */
    .ic-app-griglia {
        display: flex;
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: -.5rem -.75rem 0;
        padding: .5rem .75rem 1rem;
    }

    .ic-app-griglia::-webkit-scrollbar {
        display: none;
    }

    .ic-app {
        flex: 0 0 calc((100% - 1.2rem) / 3);
        min-width: 0;
        padding: .9rem .5rem .75rem;
        border-radius: 14px;
        scroll-snap-align: start;
    }

    .ic-app:hover {
        transform: none;
    }

    .ic-app__icona {
        width: 1.75rem;
        height: 1.75rem;
        margin-bottom: .5rem;
    }

    .ic-app__nome {
        font-size: .75rem;
        line-height: 1.25;
        margin-bottom: .5rem;
        hyphens: auto;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ic-app__descrizione,
    .ic-app__limite {
        display: none;
    }

    .ic-app__stato {
        font-size: .5625rem;
        padding: .2rem .45rem;
    }

    .ic-app__piede {
        flex-direction: column;
        gap: .35rem;
        margin-top: .6rem;
        padding-top: .6rem;
    }

    .ic-app__piede form {
        width: 100%;
    }

    .ic-app__piede .btn {
        width: 100%;
        padding: .2rem .5rem;
        font-size: .8125rem;
    }

    .ic-app__piede .ic-bottone-testo {
        font-size: .75rem;
    }

    /* Su schermo stretto la data va sopra, non in colonna: tre colonne su
       360px si schiacciano e il totale finisce a capo da solo. */
    .ic-elenco-ordini a {
        grid-template-columns: 1fr auto;
    }

    .ic-elenco-ordini__data {
        grid-column: 1 / -1;
        order: -1;
    }
}

/* ===========================================================================
   Gestione del profilo: team, RSPP, aziende collegate (doc 09, 28/09/2026)
   Righe a elenco invece di tabelle: su telefono si impilano da sole.
   =========================================================================== */

.ic-gestione {
    max-width: 56rem;
}

.ic-righe {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 10px;
    background: #fff;
}

.ic-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-riga:first-child {
    border-top: 0;
}

.ic-riga__chi {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ic-riga__nome {
    font-weight: 600;
    color: var(--ic-grigio-900);
    overflow-wrap: anywhere;
}

.ic-riga__sotto {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
    overflow-wrap: anywhere;
}

.ic-riga__stato {
    display: flex;
    gap: .35rem;
}

.ic-riga__azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.ic-riga__form .form-select {
    width: auto;
    min-width: 9.5rem;
}

.ic-badge--ruolo   { color: var(--ic-blu-scuro); background: var(--ic-blu-tinta); }
.ic-badge--sospeso { color: var(--ic-grigio-600); background: var(--ic-grigio-100); }

.ic-bottone-testo--pericolo {
    color: #a3322a;
}

.ic-bottone-testo--pericolo:hover {
    color: #7d241e;
}

.ic-avviso--errore {
    background: #fdecea;
    border-color: rgba(163, 50, 42, .25);
}

.ic-legenda {
    padding-left: 1.1rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

/* Il numero di cose che aspettano una risposta, sul pulsante che ci porta. */
.ic-pallino {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 100px;
    background: #c0392b;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

.ic-pallino--tenue {
    background: var(--ic-grigio-400);
}

@media (max-width: 575.98px) {
    .ic-riga__azioni {
        width: 100%;
    }
}

/* --- "Chi sei?" e scelta del piano (doc 09 §2) ----------------------------- */

.ic-scelta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.ic-scelta__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 12px;
    color: var(--ic-grigio-900);
    text-decoration: none;
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione), transform var(--ic-transizione);
}

.ic-scelta__card:hover,
.ic-scelta__card:focus-visible {
    border-color: var(--ic-blu);
    box-shadow: 0 6px 24px rgba(42, 127, 147, .12);
    transform: translateY(-2px);
    color: var(--ic-grigio-900);
}

.ic-scelta__titolo {
    font-size: 1.2rem;
    font-weight: 700;
}

.ic-scelta__testo {
    color: var(--ic-grigio-600);
    font-size: .9375rem;
}

.ic-scelta__piede {
    margin-top: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
}

.ic-piani {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.ic-piano {
    position: relative;
    display: flex;
    gap: .75rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-piano:has(input:checked) {
    border-color: var(--ic-blu);
    box-shadow: 0 0 0 3px rgba(42, 127, 147, .15);
}

.ic-piano input {
    margin-top: .3rem;
    accent-color: var(--ic-blu);
}

.ic-piano__corpo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}

.ic-piano__nome {
    font-weight: 700;
    color: var(--ic-grigio-900);
}

.ic-piano__prezzo {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ic-blu-scuro);
}

.ic-piano__cosa {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

/* --- spunte (qualifiche del tecnico) --------------------------------------- */

.ic-spunte {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ic-spunta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 100px;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
    transition: border-color var(--ic-transizione), background-color var(--ic-transizione);
}

.ic-spunta:has(input:checked) {
    border-color: var(--ic-blu);
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-weight: 600;
}

.ic-spunta input {
    accent-color: var(--ic-blu);
}

.ic-spunte--errore .ic-spunta {
    border-color: rgba(163, 50, 42, .45);
}

/* --- I piani (/piani.htm) --------------------------------------------------- */

.ic-schede-tipo {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    background: var(--ic-grigio-100);
    border-radius: 100px;
}

.ic-scheda-tipo {
    padding: .45rem 1rem;
    border-radius: 100px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
    text-decoration: none;
}

.ic-scheda-tipo--attiva {
    background: #fff;
    color: var(--ic-grigio-900);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.ic-listino {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
}

.ic-listino__piano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 16px;
}

.ic-listino__piano--evidenza {
    border-color: var(--ic-blu);
    box-shadow: 0 10px 30px rgba(42, 127, 147, .12);
}

.ic-listino__piano--mio {
    border-color: #1c6b3f;
    box-shadow: 0 0 0 3px rgba(28, 107, 63, .12);
}

.ic-listino__etichetta {
    position: absolute;
    top: -.7rem;
    left: 1.25rem;
    padding: .2rem .7rem;
    border-radius: 100px;
    background: #1c6b3f;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ic-listino__etichetta--tenue {
    background: var(--ic-blu);
}

.ic-listino__nome {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.ic-listino__prezzo {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ic-grigio-900);
}

.ic-listino__prezzo span {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ic-grigio-600);
}

.ic-listino__punti {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: .5rem;
    font-size: .9375rem;
}

.ic-listino__punti li {
    position: relative;
    padding-left: 1.5rem;
}

.ic-listino__punti li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .3rem;
    width: .9rem;
    height: .5rem;
    border-left: 2px solid var(--ic-blu);
    border-bottom: 2px solid var(--ic-blu);
    transform: rotate(-45deg);
}

.ic-listino__azione {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Il vecchio scadenzario (doc 09 §8-bis): riquadro in area personale,
   ricerca, modulo di recupero, anagrafica del cantiere
   --------------------------------------------------------------------------- */
.ic-vecchio {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--ic-blu-tinta);
    border-color: transparent;
}


.ic-vecchio__testo {
    display: grid;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}

.ic-vecchio__testo span {
    font-size: .9375rem;
    color: var(--ic-grigio-900);
}

.ic-vecchio__cerca {
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 36rem;
}

.ic-recupero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ic-recupero .form-select {
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.ic-vecchio__anagrafica {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
    margin: 0;
    font-size: .9375rem;
}

.ic-vecchio__anagrafica dt {
    font-weight: 500;
    color: var(--ic-grigio-600);
}

.ic-vecchio__anagrafica dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .ic-vecchio {
        flex-wrap: wrap;
    }

    .ic-vecchio .btn {
        width: 100%;
    }

    .ic-vecchio__anagrafica {
        grid-template-columns: 1fr;
    }

    .ic-vecchio__anagrafica dd {
        margin-bottom: .5rem;
    }
}

/* ===========================================================================
   Chi siamo (01/10/2026) — pagina dedicata, pagine/chi-siamo.php
   Hero fotografico scuro, numeri in card sovrapposta, sezioni alternate
   bianco / tinta, storia a linea del tempo, squadra a card.
   =========================================================================== */

.ic-cs-hero {
    position: relative;
    color: var(--ic-bianco);
    padding-block: 1.5rem clamp(6.5rem, 12vw, 9.5rem);
    background:
        linear-gradient(100deg, rgba(10, 30, 52, .92) 0%, rgba(10, 30, 52, .78) 45%, rgba(10, 30, 52, .35) 100%),
        url('/assets/img/chi-siamo/cantiere.jpg') center 40% / cover no-repeat;
}

.ic-percorso--chiaro,
.ic-percorso--chiaro span + span::before {
    color: rgba(255, 255, 255, .7);
}

.ic-percorso--chiaro a {
    color: var(--ic-bianco);
}

.ic-percorso--chiaro span + span::before {
    background: rgba(255, 255, 255, .6);
}

.ic-cs-occhiello {
    margin-bottom: .75rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.ic-cs-occhiello--blu {
    color: var(--ic-blu);
}

.ic-cs-hero__titolo {
    max-width: 40rem;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.ic-cs-hero__testo {
    max-width: 36rem;
    margin: 1.25rem 0 0;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

.ic-bottone--chiaro {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
    color: var(--ic-bianco);
}

.ic-bottone--chiaro:hover {
    background: var(--ic-bianco);
    border-color: var(--ic-bianco);
    color: var(--ic-blu-scuro);
}

.ic-bottone--bianco {
    background: var(--ic-bianco);
    border-color: var(--ic-bianco);
    color: var(--ic-blu-scuro);
}

.ic-bottone--bianco:hover {
    background: var(--ic-blu-tinta);
    border-color: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
}

.ic-bottone .ic-ico {
    width: 1em;
    height: 1em;
}

/* I numeri: card bianca a cavallo del bordo dell'hero. */
.ic-cs-numeri {
    position: relative;
    margin-top: clamp(-5rem, -8vw, -3.5rem);
    padding-block: 0;
    background: none;
    color: var(--ic-nero);
}

.ic-cs-numeri .row {
    margin-inline: 0;
    padding: clamp(1.25rem, 3vw, 2rem) .5rem;
    background: var(--ic-bianco);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(17, 17, 18, .05), 0 16px 40px rgba(17, 30, 52, .12);
}

.ic-cs-numeri .ic-numeri__valore {
    color: var(--ic-blu);
}

.ic-cs-numeri .ic-numeri__nome {
    color: var(--ic-grigio-600);
    opacity: 1;
}

.ic-cs-titolo {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 1rem;
}

.ic-cs-foto {
    margin: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    aspect-ratio: 3 / 2;
    background: var(--ic-grigio-100);
}

.ic-cs-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ic-cs-foto--alta {
    height: 100%;
    min-height: 16rem;
    aspect-ratio: auto;
}

/* La citazione */
.ic-cs-citazione {
    padding-block: clamp(3rem, 7vw, 5.5rem);
    background: var(--ic-blu-tinta);
}

.ic-cs-citazione figure {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
}

.ic-cs-citazione__segno {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ic-blu);
    opacity: .5;
}

.ic-cs-citazione blockquote {
    margin: 1rem 0 1.25rem;
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.01em;
    color: var(--ic-grigio-900);
}

.ic-cs-citazione figcaption {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
}

.ic-cs-citazione figcaption span {
    font-weight: 400;
    font-style: italic;
    color: var(--ic-grigio-600);
}

/* Il confronto carta / campo */
.ic-cs-confronto {
    height: 100%;
    padding: 1.75rem;
    border-radius: 1.25rem;
}

.ic-cs-confronto h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.ic-cs-confronto ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
}

.ic-cs-confronto li {
    display: flex;
    gap: .75rem;
    font-size: .9375rem;
    line-height: 1.5;
}

.ic-cs-confronto li .ic-ico {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: .3rem;
    border-radius: 50%;
}

.ic-cs-confronto--no {
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-600);
}

.ic-cs-confronto--no h3 {
    color: var(--ic-grigio-900);
}

.ic-cs-confronto--no li .ic-ico {
    background: var(--ic-grigio-200);
    color: var(--ic-grigio-600);
}

.ic-cs-confronto--si {
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-cs-confronto--si li .ic-ico {
    background: var(--ic-bianco);
    color: var(--ic-blu);
}

/* Fascia tinta per alternare le sezioni */
.ic-cs-fascia {
    background: #f6f8fb;
}

/* I principi */
.ic-cs-principi {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.ic-cs-principio {
    padding: 1.5rem 1.25rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-cs-principio:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(17, 30, 52, .08);
}

.ic-cs-principio__ico {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}

.ic-cs-principio__ico .ic-ico {
    width: 1.25rem;
    height: 1.25rem;
}

.ic-cs-principio h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.ic-cs-principio p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

/* La storia: linea del tempo */
.ic-cs-storia-intro {
    position: sticky;
    top: 6rem;
}

.ic-cs-storia {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 2rem;
}

.ic-cs-storia::before {
    content: "";
    position: absolute;
    left: .45rem;
    top: .4rem;
    bottom: .4rem;
    width: 2px;
    background: linear-gradient(var(--ic-grigio-200), var(--ic-blu));
}

.ic-cs-storia li {
    position: relative;
    padding-bottom: 2rem;
}

.ic-cs-storia li:last-child {
    padding-bottom: 0;
}

.ic-cs-storia li::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: .3rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ic-bianco);
    border: 3px solid var(--ic-blu);
}

.ic-cs-storia__oggi::before {
    background: var(--ic-blu) !important;
    box-shadow: 0 0 0 5px rgba(42, 127, 147, .18);
}

.ic-cs-storia__quando {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-blu);
}

.ic-cs-storia h3 {
    margin: .2rem 0 .35rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.ic-cs-storia p {
    margin: 0;
    max-width: 38rem;
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

/* La squadra */
.ic-cs-persona {
    height: 100%;
    padding: 1.75rem 1.25rem;
    text-align: center;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
}

.ic-cs-persona__foto {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
}

.ic-cs-persona__foto--iniziali {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--ic-blu), var(--ic-blu-scuro));
    color: var(--ic-bianco);
    font-size: 1.75rem;
    font-weight: 600;
}

.ic-cs-persona h3 {
    margin-bottom: .15rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-cs-persona__ruolo {
    margin-bottom: .75rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-blu);
}

.ic-cs-persona__bio {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

/* Cosa offriamo */
.ic-cs-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    transition: border-color var(--ic-transizione), transform var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-cs-app:hover {
    opacity: 1;
    border-color: var(--ic-blu);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(17, 30, 52, .08);
}

.ic-cs-app__ico {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-cs-app__ico .ic-ico {
    width: 1.35rem;
    height: 1.35rem;
}

.ic-cs-app h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.ic-cs-app p {
    flex: 1;
    margin-bottom: 1rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

.ic-cs-app__vai {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-blu);
}

.ic-cs-app__vai .ic-ico {
    width: .85rem;
    height: .85rem;
    transition: transform var(--ic-transizione);
}

.ic-cs-app:hover .ic-cs-app__vai .ic-ico {
    transform: translateX(3px);
}

/* L'invito finale */
.ic-cs-invito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    padding: clamp(1.75rem, 4vw, 3rem);
    border-radius: 1.5rem;
    background: linear-gradient(120deg, var(--ic-blu-scuro), var(--ic-blu));
    color: var(--ic-bianco);
}

.ic-cs-invito h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    margin-bottom: .5rem;
}

.ic-cs-invito p {
    max-width: 36rem;
    color: rgba(255, 255, 255, .85);
}

@media (max-width: 1199px) {
    .ic-cs-principi {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .ic-cs-storia-intro {
        position: static;
    }
}

@media (max-width: 767px) {
    .ic-cs-principi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ic-cs-hero {
        background:
            linear-gradient(rgba(10, 30, 52, .82), rgba(10, 30, 52, .9)),
            url('/assets/img/chi-siamo/cantiere.jpg') center / cover no-repeat;
    }
}

@media (max-width: 575px) {
    /* Su telefono i principi scorrono in orizzontale, come le app. */
    .ic-cs-principi {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: -.75rem;
        padding: 0 .75rem .5rem;
        scrollbar-width: none;
    }

    .ic-cs-principi::-webkit-scrollbar {
        display: none;
    }

    .ic-cs-principio {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    .ic-cs-principi {
        scroll-padding-inline: .75rem;
    }

    .ic-cs-invito .ic-bottone {
        flex: 1 1 100%;
    }

    /* Squadra: card orizzontali compatte, foto a sinistra. */
    .ic-cs-persona {
        display: grid;
        grid-template-columns: 4.5rem 1fr;
        column-gap: 1rem;
        align-items: center;
        padding: 1rem;
        text-align: left;
    }

    .ic-cs-persona__foto {
        grid-row: span 3;
        width: 4.5rem;
        height: 4.5rem;
        margin: 0;
    }

    .ic-cs-persona__foto--iniziali {
        font-size: 1.25rem;
    }

    .ic-cs-persona__ruolo {
        margin-bottom: .25rem;
    }

    .ic-cs-persona__bio {
        font-size: .8125rem;
    }

    /* App: due per riga, piu' compatte. */
    .ic-cs-app {
        padding: 1rem;
    }

    .ic-cs-app__ico {
        width: 2.5rem;
        height: 2.5rem;
        margin-bottom: .75rem;
    }

    .ic-cs-app h3 {
        font-size: 1rem;
    }

    .ic-cs-app p {
        font-size: .8125rem;
        margin-bottom: .75rem;
    }
}

/* ===========================================================================
   Pagine delle app (01/10/2026) — pagine/app/suite.php e app/scheda.php
   Schermate vere dentro una cornice da browser o da telefono; il colore
   dell'app arriva da --ic-ap-colore.
   =========================================================================== */

.ic-ap-hero {
    --ic-ap-colore: var(--ic-blu);
    padding-block: 1.5rem clamp(3rem, 6vw, 4.5rem);
    background:
        radial-gradient(60rem 30rem at 85% 10%, color-mix(in srgb, var(--ic-ap-colore) 14%, transparent), transparent 70%),
        linear-gradient(#f6f8fb, var(--ic-bianco));
    overflow: hidden;
}

.ic-ap-hero__titolo {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ic-ap-hero__testo {
    max-width: 38rem;
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

.ic-ap-nota {
    margin: .9rem 0 0;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-ap-marchio {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
}

.ic-ap-marchio__ico {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .7rem;
    background: var(--ic-ap-colore, var(--ic-blu));
    color: var(--ic-bianco);
}

.ic-ap-marchio__ico .ic-ico {
    width: 1.05rem;
    height: 1.05rem;
}

/* Cornici */
.ic-ap-browser {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    background: var(--ic-bianco);
    box-shadow: 0 2px 4px rgba(17, 30, 52, .04), 0 24px 60px rgba(17, 30, 52, .14);
}

.ic-ap-browser__barra {
    display: flex;
    gap: .35rem;
    padding: .6rem .8rem;
    background: var(--ic-grigio-100);
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-ap-browser__barra i {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--ic-grigio-200);
}

.ic-ap-browser img,
.ic-ap-telefono img,
.ic-ap-foglio img {
    display: block;
    width: 100%;
    height: auto;
}

.ic-ap-telefono {
    margin: 0;
    overflow: hidden;
    border: .45rem solid var(--ic-nero);
    border-radius: 2rem;
    background: var(--ic-nero);
    box-shadow: 0 24px 60px rgba(17, 30, 52, .25);
}

.ic-ap-telefono img {
    border-radius: 1.55rem;
}

.ic-ap-telefono--solo {
    max-width: 17rem;
    margin-inline: auto;
}

.ic-ap-foglio {
    max-width: 26rem;
    margin: 0 auto;
    padding: .5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: .75rem;
    box-shadow: 0 24px 60px rgba(17, 30, 52, .14);
    transform: rotate(-1.5deg);
}

/* Vetrina: browser con telefono in sovrapposizione */
.ic-ap-vetrina {
    position: relative;
    padding: 0 0 2rem 0;
}

.ic-ap-vetrina__telefono {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    width: 24%;
    min-width: 8rem;
    border-width: .35rem;
    border-radius: 1.5rem;
}

.ic-ap-vetrina__telefono img {
    border-radius: 1.15rem;
}

.ic-ap-vetrina--suite {
    max-width: 62rem;
    margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}

/* In breve */
.ic-ap-breve {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: -1.5rem;
    padding: 1.25rem 1.5rem;
    position: relative;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    box-shadow: 0 12px 30px rgba(17, 30, 52, .06);
}

.ic-ap-breve div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ic-ap-breve strong {
    font-size: 1.125rem;
    color: var(--ic-blu-scuro);
}

.ic-ap-breve span {
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

/* Funzioni a righe alternate */
.ic-ap-funzione + .ic-ap-funzione {
    margin-top: clamp(3rem, 7vw, 5.5rem);
}

.ic-ap-passo {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ic-blu);
}

.ic-ap-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem 2rem;
}

.ic-ap-elenco li {
    display: flex;
    gap: .75rem;
    line-height: 1.55;
}

.ic-ap-elenco .ic-ico {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    padding: .3rem;
    border-radius: 50%;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}

/* Per chi */
.ic-ap-profilo {
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 1.25rem;
    background: var(--ic-blu-tinta);
}

.ic-ap-profilo--rspp {
    background: #f1effa;
}

.ic-ap-profilo__ico {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--ic-bianco);
    color: var(--ic-blu);
}

.ic-ap-profilo--rspp .ic-ap-profilo__ico {
    color: #6a45c2;
}

.ic-ap-profilo__ico .ic-ico {
    width: 1.35rem;
    height: 1.35rem;
}

.ic-ap-profilo h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.ic-ap-profilo p {
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

.ic-ap-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--ic-blu);
}

.ic-ap-link .ic-ico {
    width: .85rem;
    height: .85rem;
    transition: transform var(--ic-transizione);
}

.ic-ap-link:hover .ic-ico,
.ic-ap-carta:hover .ic-ap-link .ic-ico {
    transform: translateX(3px);
}

/* Ponte verso le altre app */
.ic-ap-ponte {
    display: flex;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    transition: border-color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-ap-ponte:hover {
    opacity: 1;
    border-color: var(--ic-ap-colore);
    transform: translateY(-2px);
}

.ic-ap-ponte__ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .8rem;
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

.ic-ap-ponte__ico .ic-ico {
    width: 1.2rem;
    height: 1.2rem;
}

.ic-ap-ponte strong {
    display: block;
    margin-bottom: .25rem;
}

.ic-ap-ponte strong + span {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

/* Domande */
.ic-ap-faq {
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-ap-faq summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.ic-ap-faq summary::-webkit-details-marker {
    display: none;
}

.ic-ap-faq summary::after {
    content: "+";
    font-size: 1.35rem;
    line-height: 1;
    color: var(--ic-blu);
    transition: transform var(--ic-transizione);
}

.ic-ap-faq[open] summary::after {
    transform: rotate(45deg);
}

.ic-ap-faq p {
    margin: 0 0 1.1rem;
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

.ic-ap-altre {
    font-size: .9375rem;
    color: var(--ic-grigio-600);
}

/* Suite: le tre carte */
.ic-ap-carta {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-ap-carta:hover {
    opacity: 1;
    transform: translateY(-3px);
    border-color: var(--ic-ap-colore);
    box-shadow: 0 16px 40px rgba(17, 30, 52, .1);
}

.ic-ap-carta__foto {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, var(--ic-ap-colore) 10%, var(--ic-bianco));
    padding: 1rem 1rem 0;
}

.ic-ap-carta__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    border-radius: .6rem .6rem 0 0;
    box-shadow: 0 6px 20px rgba(17, 30, 52, .12);
}

.ic-ap-carta__corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem;
}

.ic-ap-carta__corpo .ic-ap-marchio {
    margin-bottom: .75rem;
}

.ic-ap-carta__corpo strong {
    font-size: 1.125rem;
    line-height: 1.3;
    margin-bottom: .5rem;
}

.ic-ap-carta__testo {
    flex: 1;
    margin-bottom: 1rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ic-grigio-600);
}

/* Suite: il ciclo */
.ic-ap-ciclo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    counter-reset: ciclo;
}

.ic-ap-ciclo li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-top: 4px solid var(--ic-ap-colore);
    border-radius: 1.25rem;
}

.ic-ap-ciclo__ico {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .75rem;
    border-radius: .8rem;
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

.ic-ap-ciclo__ico .ic-ico {
    width: 1.2rem;
    height: 1.2rem;
}

.ic-ap-ciclo__app {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ic-ap-azione, var(--ic-ap-colore));
}

.ic-ap-ciclo h3 {
    margin: .2rem 0 .5rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.ic-ap-ciclo p {
    flex: 1;
    line-height: 1.6;
    color: var(--ic-grigio-900);
}

.ic-ap-ciclo__passa {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: .6rem;
    background: color-mix(in srgb, var(--ic-ap-colore) 10%, var(--ic-bianco));
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-grigio-900);
}

.ic-ap-ciclo__passa .ic-ico {
    width: .8rem;
    height: .8rem;
    color: var(--ic-ap-azione, var(--ic-ap-colore));
}

/* Suite: schede Azienda / RSPP senza JavaScript */
.ic-ap-schede > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ic-ap-schede__scelta {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 2rem;
    padding: .3rem;
    gap: .25rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
}

.ic-ap-schede__scelta label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: 100px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
    cursor: pointer;
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-ap-schede__scelta .ic-ico {
    width: 1rem;
    height: 1rem;
}

#ic-ap-p-azienda:checked ~ .ic-ap-schede__scelta label[for="ic-ap-p-azienda"],
#ic-ap-p-rspp:checked ~ .ic-ap-schede__scelta label[for="ic-ap-p-rspp"] {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
    box-shadow: 0 2px 8px rgba(17, 30, 52, .1);
}

#ic-ap-p-azienda:focus-visible ~ .ic-ap-schede__scelta label[for="ic-ap-p-azienda"],
#ic-ap-p-rspp:focus-visible ~ .ic-ap-schede__scelta label[for="ic-ap-p-rspp"] {
    outline: 2px solid var(--ic-blu);
    outline-offset: 2px;
}

.ic-ap-schede__pannello {
    display: none;
}

#ic-ap-p-azienda:checked ~ .ic-ap-schede__pannello--azienda,
#ic-ap-p-rspp:checked ~ .ic-ap-schede__pannello--rspp {
    display: block;
}

.ic-ap-flusso__titolo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.ic-ap-flusso {
    list-style: none;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    counter-reset: passo;
}

.ic-ap-flusso li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0 0 1.1rem 3rem;
    counter-increment: passo;
}

.ic-ap-flusso li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 700;
}

.ic-ap-flusso li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: .95rem;
    top: 2.2rem;
    bottom: .2rem;
    width: 2px;
    background: var(--ic-grigio-200);
}

.ic-ap-flusso span {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

@media (max-width: 991px) {
    .ic-ap-ciclo {
        grid-template-columns: 1fr;
    }

    .ic-ap-vetrina__telefono {
        right: 0;
    }
}

@media (max-width: 767px) {
    .ic-ap-breve,
    .ic-ap-elenco {
        grid-template-columns: 1fr;
    }

    .ic-ap-breve {
        margin-top: -1rem;
        gap: .75rem;
    }

    .ic-ap-vetrina {
        padding-bottom: 1.5rem;
    }

    .ic-ap-vetrina__telefono {
        width: 30%;
        min-width: 0;
        border-width: .25rem;
        border-radius: 1rem;
    }

    .ic-ap-vetrina__telefono img {
        border-radius: .8rem;
    }

    .ic-ap-schede__scelta label {
        padding: .6rem .9rem;
        font-size: .875rem;
    }
}

/* ===========================================================================
   Header su telefono: avatar del profilo e menu a comparsa (01/10/2026)
   Il menu si apre con una casella nascosta (#ic-menu-stato): niente JavaScript.
   =========================================================================== */

.ic-header__profilo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.ic-header__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
}

.ic-menu__stato {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ic-menu__apri,
.ic-menu__chiudi {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: -.5rem;
    border-radius: .6rem;
    cursor: pointer;
}

.ic-menu__stato:focus-visible ~ .ic-header .ic-menu__apri {
    outline: 2px solid var(--ic-blu);
}

.ic-menu__velo {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(17, 30, 52, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms;
}

.ic-menu {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: min(22rem, 88vw);
    padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    background: var(--ic-bianco);
    box-shadow: -12px 0 40px rgba(17, 30, 52, .18);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform var(--ic-transizione), visibility 220ms;
}

.ic-menu__stato:checked ~ .ic-menu__velo {
    opacity: 1;
    visibility: visible;
}

.ic-menu__stato:checked ~ .ic-menu {
    transform: none;
    visibility: visible;
}

/* A menu aperto la pagina sotto non scorre. */
html:has(.ic-menu__stato:checked) {
    overflow: hidden;
}

.ic-menu__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ic-menu__titolo {
    font-size: 1.125rem;
    font-weight: 700;
}

.ic-menu__utente {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.ic-menu__utente .ic-header__avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
}

.ic-menu__utente strong,
.ic-menu__utente small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-menu__utente small {
    color: var(--ic-blu);
    font-weight: 500;
}

.ic-menu__cerca input {
    border-radius: 100px;
    background: var(--ic-grigio-100);
    border-color: transparent;
    padding-inline: 1.1rem;
}

.ic-menu__voci {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.ic-menu__voci a {
    padding: .8rem .75rem;
    border-radius: .75rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.ic-menu__voci a.ic-attivo {
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
}

.ic-menu__voci a.ic-menu__sotto {
    margin-left: 1rem;
    padding-block: .55rem;
    border-left: 2px solid var(--ic-grigio-200);
    border-radius: 0 .75rem .75rem 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ic-grigio-900);
}

.ic-menu__voci--secondarie {
    padding-top: 1rem;
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-menu__voci--secondarie a {
    padding-block: .6rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
}

.ic-menu__piede {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1.5rem;
}

.ic-menu__esci {
    padding: .5rem;
    text-align: center;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
}

@media (prefers-reduced-motion: reduce) {
    .ic-menu,
    .ic-menu__velo {
        transition: none;
    }
}

/* Header fra 992 e 1200 px: le voci non vanno mai a capo. Si stringono gli
   spazi, la ricerca si accorcia e il saluto lascia il posto al solo avatar. */
.ic-header__menu {
    gap: 1.5rem;
    margin-inline: 1.25rem;
}

.ic-header__menu a,
.ic-header__saluto {
    white-space: nowrap;
}

.ic-header__saluto {
    display: none;
}

@media (min-width: 768px) and (max-width: 991px), (min-width: 1200px) {
    .ic-header__saluto {
        display: inline;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .ic-header__menu {
        gap: 1.1rem;
        margin-inline: 1rem;
    }

    .ic-header__menu a {
        font-size: .9375rem;
    }

    .ic-header__cerca input {
        width: 8rem;
    }

    .ic-header__servizi {
        gap: .8rem;
        padding-right: .8rem;
    }

    .ic-header__servizi a {
        font-size: .875rem;
    }
}

/* Header a tutta larghezza: niente contenitore, solo un margine dai bordi. */
.ic-header__dentro {
    padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

/* ===========================================================================
   Tendina "App" nel menu in alto (desktop): si apre al passaggio del mouse o
   con la tastiera (focus). Solo CSS.
   =========================================================================== */

.ic-tendina {
    position: relative;
    display: flex;
    align-items: center;
}

.ic-tendina > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.ic-tendina__freccia {
    transition: transform var(--ic-transizione);
}

.ic-tendina:hover .ic-tendina__freccia,
.ic-tendina:focus-within .ic-tendina__freccia {
    transform: rotate(180deg);
}

.ic-tendina__pannello {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    width: 19rem;
    margin-top: .75rem;
    padding: .5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(17, 30, 52, .04), 0 20px 48px rgba(17, 30, 52, .14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

/* Ponte invisibile fra la voce e il pannello: il mouse non "cade" nel vuoto. */
.ic-tendina__pannello::before {
    content: "";
    position: absolute;
    inset: -.9rem 0 auto;
    height: .9rem;
}

.ic-tendina:hover .ic-tendina__pannello,
.ic-tendina:focus-within .ic-tendina__pannello {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ic-header__menu .ic-tendina__pannello a {
    white-space: normal;
}

.ic-header__menu .ic-tendina__pannello a::after {
    display: none;
}

.ic-header__menu a.ic-tendina__voce {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .65rem;
    border-radius: .7rem;
    font-size: .9375rem;
    transition: background-color 140ms ease;
}

.ic-header__menu a.ic-tendina__voce:hover,
.ic-header__menu a.ic-tendina__voce:focus-visible,
.ic-header__menu a.ic-tendina__voce--attiva {
    opacity: 1;
    background: var(--ic-blu-tinta);
}

.ic-tendina__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .65rem;
    color: var(--ic-bianco);
}

.ic-tendina__ico svg {
    width: 1rem;
    height: 1rem;
}

.ic-tendina__voce strong,
.ic-tendina__voce small {
    display: block;
    line-height: 1.3;
}

.ic-tendina__voce strong {
    color: var(--ic-nero);
}

.ic-tendina__voce small {
    font-weight: 400;
    color: var(--ic-grigio-600);
}

.ic-tendina__piede {
    display: flex;
    justify-content: space-between;
    margin-top: .35rem;
    padding: .6rem .65rem .25rem;
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-header__menu .ic-tendina__piede a {
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu);
}

@media (prefers-reduced-motion: reduce) {
    .ic-tendina__pannello,
    .ic-tendina__freccia {
        transition: none;
    }
}

/* Vetrina delle app sotto i 1200 px: il telefono resta dentro la pagina. */
@media (max-width: 1199px) {
    .ic-ap-vetrina__telefono {
        right: 0;
    }
}

/* ===========================================================================
   Home: le due tessere piccole del mosaico (20/10/2026)
   Pubblicita' veloce: il catalogo (copertina sfocata dietro) e Trova un RSPP
   (tinta piena con l'icona grande in filigrana).
   =========================================================================== */

.ic-tessera--catalogo {
    background: linear-gradient(135deg, #1d1d20 0%, #2a3f57 100%);
}

.ic-tessera--rspp {
    background: linear-gradient(135deg, #0b4f5c 0%, #138a9e 100%);
    color: var(--ic-bianco);
}

.ic-tessera--rspp .ic-tessera__testo {
    text-shadow: none;
}

.ic-tessera__icona {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4.5rem;
    height: auto;
    opacity: .18;
}

.ic-tessera__vai {
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 600;
}

@media (max-width: 991px) {
    .ic-tessera__icona {
        width: 3rem;
        top: .75rem;
        right: .75rem;
    }

    .ic-tessera__vai {
        font-size: .75rem;
    }
}

/* ===========================================================================
   Home: la tessera grande del mosaico presenta le app (02/10/2026)
   Testo a sinistra, schermate vere a destra che escono dal bordo.
   =========================================================================== */

.ic-tessera--app {
    align-items: stretch;
    background: linear-gradient(120deg, #0c2a33 0%, #1b5867 55%, #2a7f93 100%);
}

.ic-tessera--app .ic-tessera__testo {
    flex: 0 0 52%;
    justify-content: center;
    padding: 2rem;
    text-shadow: none;
    z-index: 1;
}

.ic-tessera--app .ic-tessera__titolo {
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    line-height: 1.15;
}

.ic-tessera--app .ic-tessera__nota {
    line-height: 1.5;
    opacity: .9;
}

.ic-tessera__app {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .6rem;
}

.ic-tessera__app > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem .25rem .25rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .14);
    font-size: .8125rem;
    font-weight: 600;
}

.ic-tessera__app i {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.ic-tessera__app svg {
    width: .7rem;
    height: .7rem;
}

.ic-tessera__schermate {
    position: relative;
    flex: 1;
    min-width: 0;
}

.ic-tessera__desktop {
    position: absolute;
    top: 2.25rem;
    left: 0;
    width: 150%;
    height: auto;
    border-radius: .6rem 0 0 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    transition: transform var(--ic-transizione);
}

.ic-tessera__telefono {
    position: absolute;
    left: -1.5rem;
    bottom: -3rem;
    width: 30%;
    height: auto;
    border: .3rem solid var(--ic-nero);
    border-radius: 1.1rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}

.ic-tessera--app:hover .ic-tessera__desktop {
    transform: translate(-6px, -4px);
}

@media (max-width: 767px) {
    .ic-tessera--app {
        flex-direction: column;
    }

    .ic-tessera--app .ic-tessera__testo {
        flex: 0 0 auto;
        padding: 1.25rem;
    }

    .ic-tessera__schermate {
        flex: 0 0 9.5rem;
    }

    .ic-tessera__desktop {
        top: 0;
        left: 1.25rem;
        width: 115%;
    }

    .ic-tessera__telefono {
        left: auto;
        right: 1rem;
        bottom: -4.5rem;
        width: 24%;
    }
}

/* ===========================================================================
   Pagina "in arrivo" (Corsi, 02/10/2026)
   =========================================================================== */

.ic-arrivo {
    padding-block: 1.5rem clamp(4rem, 10vw, 7rem);
    /* Foto di un'aula sotto un velo bianco, come la hero della home: la
       formazione si intravede, il testo resta leggibile. Foto Unsplash
       (photo-1524178232363-1fb2b075b655), da sostituire con una nostra. */
    background:
        linear-gradient(rgba(255, 255, 255, .84), rgba(238, 244, 251, .80) 65%, rgba(255, 255, 255, .92)),
        url('/assets/img/corsi/formazione.jpg') center 80% / cover no-repeat;
    min-height: min(42rem, 78vh);
}

.ic-arrivo__corpo {
    max-width: 40rem;
    margin: clamp(1.5rem, 5vw, 3.5rem) auto 0;
    text-align: center;
}

.ic-arrivo__ico {
    display: inline-grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1.25rem;
    border-radius: 1.4rem;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    box-shadow: 0 16px 36px rgba(42, 127, 147, .3);
}

.ic-arrivo__ico svg {
    width: 2.25rem;
    height: 2.25rem;
}

.ic-arrivo__titolo {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ic-arrivo__testo {
    margin: 1rem auto 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

/* ===========================================================================
   Contatti (02/10/2026)
   =========================================================================== */

.ic-contatto {
    height: 100%;
    padding: 1.5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
}

.ic-contatto h2 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.ic-contatto > p {
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

.ic-contatto .ic-link {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ic-contatto--dati .ic-testo p {
    margin-bottom: .85rem;
}

.ic-contatto--dati .ic-testo p:last-child {
    margin-bottom: 0;
}

.ic-contatto--azione {
    border: 0;
    background: linear-gradient(120deg, var(--ic-blu-scuro), var(--ic-blu));
    color: var(--ic-bianco);
}

.ic-contatto--azione > p {
    color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   Domande frequenti: sezioni con ancora (02/10/2026)
   ========================================================================== */
.ic-faq-pagina {
    max-width: 56rem;
}

.ic-faq-nav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 1.5rem;
    scrollbar-width: none;
}

.ic-faq-nav a {
    flex: none;
    padding: 0.45rem 1rem;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.ic-faq-nav a:hover {
    border-color: #2a7f93;
    color: #2a7f93;
}

.ic-faq-sezione {
    scroll-margin-top: 6rem;
    margin-bottom: 2.5rem;
}

.ic-faq-app {
    margin: 1.5rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.ic-faq-app a {
    color: inherit;
    text-decoration: none;
}

.ic-faq-app a:hover {
    color: #2a7f93;
}

.ic-faq-rimando {
    margin: 1rem 0 0;
    font-size: 0.95rem;
}

/* ==========================================================================
   Diventa autore: i quattro passi (02/10/2026)
   ========================================================================== */
.ic-da-passi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ic-da-passi li {
    padding: 1.25rem;
    border-radius: 1rem;
    background: var(--ic-bianco);
}

.ic-da-passi h3 {
    margin: .5rem 0 .35rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.ic-da-passi p {
    margin: 0;
    font-size: .925rem;
    color: var(--ic-grigio-600);
}

/* ==========================================================================
   Trova un RSPP (02/10/2026)
   ========================================================================== */
.ic-rs-filtri {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .75rem;
    align-items: end;
    max-width: 44rem;
}

.ic-rs-conteggio {
    margin-bottom: 1rem;
    font-size: .925rem;
    color: var(--ic-grigio-600);
}

.ic-rs-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
    gap: 1rem;
}

.ic-rs-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    background: var(--ic-bianco);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ic-rs-card:hover {
    border-color: var(--ic-blu);
    box-shadow: 0 6px 20px rgba(17, 17, 18, .08);
    transform: translateY(-2px);
    opacity: 1;
}

.ic-rs-card__testa {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.ic-rs-card__testa strong {
    display: block;
    line-height: 1.25;
}

.ic-rs-card__zone,
.ic-rs-card__testo {
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

.ic-rs-card__zone {
    display: block;
}

.ic-rs-foto {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.ic-rs-foto--vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-weight: 700;
    font-size: 1.25rem;
}

.ic-rs-foto--grande {
    width: 96px;
    height: 96px;
    font-size: 2rem;
}

.ic-rs-testata {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ic-rs-etichette {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
}

.ic-rs-etichette span {
    padding: .2rem .65rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    font-size: .8125rem;
    font-weight: 500;
}

.ic-rs-avviso {
    margin: 2rem 0 0;
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

/* Le caselle di settori e province nel modulo dell'RSPP. */
.ic-rs-scelte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .35rem .75rem;
    font-size: .925rem;
}

.ic-rs-scelte--lunghe {
    max-height: 16rem;
    overflow-y: auto;
    padding: .75rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: .6rem;
}

@media (max-width: 575.98px) {
    .ic-rs-filtri {
        grid-template-columns: 1fr;
    }

    .ic-rs-testata {
        align-items: flex-start;
    }
}

/* ===========================================================================
   Catalogo a tutta larghezza (16/10/2026)
   ---------------------------------------------------------------------------
   Solo per la pagina catalogo: niente .container, la griglia riempie lo
   schermo e aggiunge colonne quando c'e' spazio. Filtri in una colonna a
   sinistra, ferma mentre si scorre l'elenco.
   =========================================================================== */

.ic-cat-largo {
    width: 100%;
    padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}

/* Testa del catalogo su una riga: la fascia azzurra alta rubava mezzo
   schermo prima del primo documento. */
.ic-cat-testa { background: var(--ic-blu-tinta); }
.ic-cat-testa__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    padding-block: .9rem;
}
.ic-cat-testa__titolo {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ic-nero);
}
.ic-cat-testa__n,
.ic-cat-testa__cerca { font-size: .875rem; color: var(--ic-grigio-600); }
.ic-cat-testa__percorso { margin-left: auto; padding: 0 !important; font-size: .8125rem; }
@media (max-width: 575.98px) {
    .ic-cat-testa__percorso { display: none; }
}

.ic-cat {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    grid-template-areas: "filtri ricerca" "filtri elenco";
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    align-items: start;
    padding-block: 1.75rem 4rem;
}
.ic-cat > * { min-width: 0; }   /* un figlio della griglia non deve mai allargarla */
.ic-cat > .ic-cat-ricerca { grid-area: ricerca; }
.ic-cat > .ic-cat-filtri  { grid-area: filtri; }
.ic-cat > .ic-cat-elenco  { grid-area: elenco; }

/* --- colonna filtri -------------------------------------------------------- */
.ic-cat-filtri {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overflow-x: hidden;            /* mai scorrimento orizzontale */
    overscroll-behavior: contain;
    padding: 0 .5rem 3rem 0;       /* aria sotto l'ultimo filtro */
    scrollbar-width: thin;
}
.ic-cat-filtri__apri { display: none; }
.ic-cat-filtri__corpo { display: flex; flex-direction: column; gap: 1.5rem; }

.ic-cat-azzera {
    align-self: flex-start;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 1. scelta veloce: tre segmenti */
.ic-cat-veloce {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: .25rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
}
.ic-cat-veloce__voce {
    padding: .5rem .25rem;
    border-radius: 100px;
    font-size: .8125rem;
    font-weight: 600;
    text-align: center;
    color: var(--ic-grigio-600);
    white-space: nowrap;
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}
.ic-cat-veloce__voce:hover { color: var(--ic-nero); opacity: 1; }
.ic-cat-veloce__voce.is-attiva {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
    box-shadow: 0 1px 3px rgba(17, 17, 18, .12);
}

/* gruppi */
.ic-cat-gruppo { border-top: 1px solid var(--ic-grigio-200); padding-top: 1.25rem; min-width: 0; }
.ic-cat-gruppo__titolo { padding-inline: .5rem; }
.ic-cat-anno, .ic-cat-cerca { margin-inline: .5rem; }
.ic-cat-anno { width: calc(100% - 1rem); }
.ic-cat-lista { overflow-x: hidden; }
.ic-cat-lista a > span { overflow-wrap: anywhere; }
.ic-cat-altre {
    margin: .4rem .5rem 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ic-cat-gruppo__titolo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ic-nero);
}
.ic-cat-gruppo--apribile > summary {
    list-style: none;
    cursor: pointer;
    margin: 0;
}
.ic-cat-gruppo--apribile > summary::-webkit-details-marker { display: none; }
.ic-cat-gruppo--apribile > summary::after {
    content: "";
    margin-left: auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--ic-grigio-400);
    border-bottom: 2px solid var(--ic-grigio-400);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--ic-transizione);
}
.ic-cat-gruppo--apribile[open] > summary { margin-bottom: .6rem; }
.ic-cat-gruppo--apribile[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.ic-cat-gruppo__n,
.ic-cat-gruppo__val {
    padding: .05rem .5rem;
    border-radius: 100px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-size: .6875rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9rem;
}

/* liste */
.ic-cat-lista { list-style: none; padding: 0; margin: 0; }
.ic-cat-lista a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    border-radius: .375rem;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--ic-grigio-900);
}
.ic-cat-lista a:hover { background: var(--ic-grigio-100); opacity: 1; }
.ic-cat-lista a > span:first-child:not(.ic-cat-spunta),
.ic-cat-lista a > span:nth-child(2):not(.ic-cat-lista__n) { flex: 1; min-width: 0; }
.ic-cat-lista a.is-attiva { color: var(--ic-blu-scuro); font-weight: 600; background: var(--ic-blu-tinta); }
.ic-cat-lista__n {
    margin-left: auto;
    font-size: .75rem;
    color: var(--ic-grigio-400);
    font-variant-numeric: tabular-nums;
}
.ic-cat-lista__x { margin-left: auto; font-size: 1.1rem; line-height: 1; }
.ic-cat-lista--scorri { max-height: 18rem; overflow-y: auto; scrollbar-width: thin; }
.ic-cat-spunta {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--ic-grigio-400);
    border-radius: .25rem;
    background: var(--ic-bianco);
}
.is-attiva > .ic-cat-spunta {
    border-color: var(--ic-blu);
    background: var(--ic-blu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .75rem no-repeat;
}
.ic-cat-cerca { margin-bottom: .5rem; width: calc(100% - 1rem); }
.ic-cat-anno { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ic-cat-anno label { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--ic-grigio-600); }

/* --- elenco ---------------------------------------------------------------- */
.ic-cat-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}
.ic-cat-barra__conto { font-size: .875rem; color: var(--ic-grigio-600); }
.ic-cat-barra__conto strong { color: var(--ic-nero); }
.ic-cat-scelti { display: flex; flex-wrap: wrap; gap: .4rem; }
.ic-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .3rem .25rem .7rem;
    border-radius: 100px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-size: .8125rem;
    font-weight: 600;
}
.ic-cat-chip__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 100px;
    background: rgba(42, 127, 147, .18);
    color: var(--ic-blu-scuro);
    font-size: .95rem;
    line-height: 1;
}
.ic-cat-chip__x:hover { background: var(--ic-blu); color: var(--ic-bianco); opacity: 1; }
.ic-cat-ordina {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    font-size: .8125rem;
    white-space: nowrap;
}
.ic-cat-ordina .form-select { width: auto; }

.ic-cat-griglia {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem 1.25rem;
}
.ic-cat-vuoto { padding: 3rem 1rem; text-align: center; }
.ic-paginazione { justify-content: center; }
.ic-paginazione__salto { align-self: center; padding-inline: .25rem; color: var(--ic-grigio-400); }

/* --- telefono e tablet: i filtri sopra l'elenco, dietro un pulsante -------- */
@media (max-width: 991.98px) {
    .ic-cat {
        grid-template-columns: 1fr;
        grid-template-areas: "ricerca" "filtri" "elenco";
        grid-template-rows: auto;
        row-gap: 1rem;
        padding-top: 1rem;
    }
    .ic-cat > .ic-cat-ricerca { margin-bottom: 0; }
    .ic-cat-filtri {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
    }
    .ic-cat-filtri__apri {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .55rem 1.1rem;
        border: 1px solid var(--ic-grigio-200);
        border-radius: 100px;
        background: var(--ic-bianco);
        font-size: .875rem;
        font-weight: 600;
        color: var(--ic-nero);
        cursor: pointer;
        list-style: none;
    }
    .ic-cat-filtri__apri::-webkit-details-marker { display: none; }
    .ic-cat-filtri[open] > .ic-cat-filtri__apri { margin-bottom: 1rem; border-color: var(--ic-blu); color: var(--ic-blu-scuro); }
    .ic-cat-filtri__n {
        min-width: 1.25rem;
        padding: 0 .35rem;
        border-radius: 100px;
        background: var(--ic-blu);
        color: var(--ic-bianco);
        font-size: .6875rem;
        text-align: center;
    }
    .ic-cat-filtri__corpo {
        padding: 1rem;
        border: 1px solid var(--ic-grigio-200);
        border-radius: var(--ic-raggio);
        background: var(--ic-bianco);
    }
    .ic-cat-ordina { margin-left: 0; }
    .ic-cat-ordina span { display: none; }
}
@media (max-width: 575.98px) {
    .ic-cat-griglia { grid-template-columns: 1fr 1fr; gap: 1rem .75rem; }
}
/* Stelle e download nella card: su card strette vanno a capo invece di
   tagliare la parola «download». Vale per tutte le card. */
.ic-card__corpo > .d-flex { flex-wrap: wrap; row-gap: .15rem; }
.ic-card__corpo > .d-flex .ic-etichetta { white-space: nowrap; }

/* --- ricerca sopra il catalogo (16/10/2026) ------------------------------- */
.ic-cat-ricerca {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: .35rem .35rem .35rem 1rem;
    border: 1.5px solid var(--ic-grigio-200);
    border-radius: 100px;
    background: var(--ic-bianco);
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione);
}
.ic-cat-ricerca:focus-within {
    border-color: var(--ic-blu);
    box-shadow: 0 0 0 .2rem rgba(42, 127, 147, .15);
}
.ic-cat-ricerca__ico { flex: none; color: var(--ic-grigio-400); }
.ic-cat-ricerca input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: .45rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 1rem;
    color: var(--ic-nero);
}
.ic-cat-ricerca input[type="search"]::-webkit-search-cancel-button { display: none; }
.ic-cat-ricerca__via {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-600);
    font-size: 1.1rem;
    line-height: 1;
}
.ic-cat-ricerca__via:hover { background: var(--ic-grigio-200); color: var(--ic-nero); opacity: 1; }
.ic-cat-ricerca__bt {
    flex: none;
    padding: .55rem 1.4rem;
    border: 0;
    border-radius: 100px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
}
.ic-cat-ricerca__bt:hover { background: var(--ic-blu-scuro); }
@media (max-width: 575.98px) {
    .ic-cat-ricerca__bt { padding-inline: 1rem; }
}

/* --- piede del catalogo: pagine e quante per pagina (16/10/2026) ---------- */
.ic-cat-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ic-grigio-200);
}
.ic-cat-perpagina {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}
.ic-cat-perpagina__voce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2rem;
    padding-inline: .5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 100px;
    font-weight: 600;
    color: var(--ic-grigio-900);
}
.ic-cat-perpagina__voce:hover { border-color: var(--ic-blu); color: var(--ic-blu); opacity: 1; }
.ic-cat-perpagina__voce.is-attiva { background: var(--ic-blu); border-color: var(--ic-blu); color: var(--ic-bianco); }

/* --- vetrine della home: righe sempre piene (16/10/2026) -------------------
   Le vetrine ricevono 12 documenti; le colonne sono fisse per larghezza —
   6, 4 o 3 — tutti divisori di 12, quindi l'ultima riga non resta mai a
   meta'. Sotto i 768px restano il nastro che scorre col dito. */
/* 20/10/2026: card piu' larghe — 2, 3 e 4 colonne invece di 3, 4 e 6
   (sempre divisori di 12, le righe restano piene). */
@media (min-width: 768px) {
    .ic-griglia--scorri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .ic-griglia--scorri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .ic-griglia--scorri { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}

/* --- pagina 404 (16/10/2026) ---------------------------------------------- */
.ic-404__testa { max-width: 46rem; margin-inline: auto; text-align: center; }
.ic-404__cerca { text-align: left; }
.ic-404__vie { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.ic-404__blocco { margin-top: 3.5rem; }
.ic-404__blocco .ic-sezione__titolo { text-align: center; margin-bottom: 1.25rem; }
.ic-404__griglia { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (min-width: 1200px) {
    .ic-404__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- «Stiamo attivando» (go-live 16/10/2026) ------------------------------ */
.ic-anteprima { max-width: 34rem; margin-inline: auto; text-align: center; }
.ic-anteprima__icona {
    display: inline-grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}
.ic-anteprima__titolo { margin-bottom: .75rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--ic-nero); }
.ic-anteprima__testo { margin-bottom: .75rem; font-size: 1rem; line-height: 1.6; }
.ic-anteprima__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.ic-anteprima-dlg {
    width: min(36rem, calc(100vw - 2rem));
    padding: 2.25rem 1.75rem 2rem;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 24px 64px rgba(17, 17, 18, .25);
}
.ic-anteprima-dlg::backdrop { background: rgba(17, 17, 18, .45); }
.ic-anteprima-dlg__chiudi {
    position: absolute;
    top: .75rem;
    right: .9rem;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: var(--ic-grigio-100);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ic-grigio-600);
}
.ic-anteprima-dlg__chiudi:hover { background: var(--ic-grigio-200); color: var(--ic-nero); }

.ic-anteprima__nota { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--ic-grigio-600); }

/* --- registrazione: da dove parti (16/10/2026) ---------------------------- */
.ic-reg-scelte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.ic-reg-scelta {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.4rem 1.25rem 1.25rem;
    border: 1.5px solid var(--ic-grigio-200);
    border-radius: 14px;
    background: var(--ic-bianco);
    color: var(--ic-grigio-900);
    text-decoration: none;
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione), transform var(--ic-transizione);
}
.ic-reg-scelta:hover,
.ic-reg-scelta:focus-visible {
    border-color: var(--ic-blu);
    box-shadow: 0 10px 28px rgba(42, 127, 147, .14);
    transform: translateY(-2px);
    opacity: 1;
}
.ic-reg-scelta__icona {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .5rem;
    border-radius: 12px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}
.ic-reg-scelta--documenti .ic-reg-scelta__icona { background: #e8f5ee; color: #1c6b3f; }
.ic-reg-scelta__tipo {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}
.ic-reg-scelta__titolo { font-size: 1.2rem; font-weight: 700; color: var(--ic-nero); line-height: 1.25; }
.ic-reg-scelta__testo { font-size: .875rem; line-height: 1.55; color: var(--ic-grigio-600); }
.ic-reg-scelta__piede {
    margin-top: auto;
    padding-top: .75rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-blu-scuro);
}
.ic-reg-scelta--documenti .ic-reg-scelta__piede { color: #1c6b3f; }
.ic-reg-scelta__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: .2rem .6rem;
    border-radius: 100px;
    background: #fdf1dc;
    color: #8a5a00;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.ic-reg-scelta--presto .ic-reg-scelta__icona { background: var(--ic-grigio-100); color: var(--ic-grigio-600); }
.ic-reg-come {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .6);
    list-style: none;
    font-size: .875rem;
    line-height: 1.5;
}
.ic-reg-come strong { display: block; color: var(--ic-nero); }
@media (max-width: 767.98px) {
    .ic-reg-scelte { grid-template-columns: 1fr; }
    .ic-reg-come { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Trova un RSPP — la vetrina «in arrivo» (20/10/2026)
   Stesso impianto delle pagine webapp (ic-ap-hero, ic-ap-ciclo), colore
   verde acqua come la tessera della home.
   =========================================================================== */

.ic-rp-hero {
    --ic-ap-colore: #138a9e;
}

.ic-rp-apertura {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.ic-rp-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    border-radius: 100px;
    background: #e3f4f6;
    color: #0b5f6e;
    font-size: .8125rem;
    font-weight: 600;
}

/* Il pallino che pulsa: «sta arrivando». */
.ic-rp-badge i {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #138a9e;
    box-shadow: 0 0 0 0 rgba(19, 138, 158, .5);
    animation: ic-rp-pulsa 1.8s ease-out infinite;
}

@keyframes ic-rp-pulsa {
    to { box-shadow: 0 0 0 .55rem rgba(19, 138, 158, 0); }
}

.ic-rp-occhiello {
    color: #0f7a8c;
}

/* Anteprima illustrativa dell'elenco */
.ic-rp-anteprima {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    box-shadow: 0 24px 60px rgba(11, 79, 92, .14);
}

.ic-rp-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;
}

.ic-rp-filtri span {
    padding: .45rem .8rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: .7rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-rp-filtri b {
    margin-left: .3rem;
    color: var(--ic-nero);
}

.ic-rp-scheda {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem;
    border-radius: 1rem;
    background: #f6f8fb;
    animation: ic-rp-entra .6s both cubic-bezier(.22, .61, .36, 1);
    animation-delay: var(--ritardo, 0ms);
}

@keyframes ic-rp-entra {
    from { opacity: 0; transform: translateY(10px); }
}

.ic-rp-scheda__foto {
    display: grid;
    place-items: center;
    flex: 0 0 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b4f5c, #138a9e);
    color: var(--ic-bianco);
}

.ic-rp-scheda__foto svg {
    width: 1.3rem;
    height: auto;
}

.ic-rp-scheda__righe {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ic-rp-scheda__righe > i {
    display: block;
    height: .55rem;
    border-radius: 100px;
    background: var(--ic-grigio-200);
}

.ic-rp-scheda__righe > i:first-child {
    height: .7rem;
    background: #c9d3dd;
}

.ic-rp-scheda__chip {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .15rem;
}

.ic-rp-scheda__chip em {
    padding: .1rem .55rem;
    border-radius: 100px;
    background: #e3f4f6;
    color: #0b5f6e;
    font-size: .6875rem;
    font-style: normal;
    font-weight: 600;
}

.ic-rp-scheda__scrivi {
    display: grid;
    place-items: center;
    flex: 0 0 2.4rem;
    height: 2.4rem;
    border-radius: .75rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    color: #138a9e;
}

.ic-rp-scheda__scrivi svg {
    width: 1rem;
    height: auto;
}

/* Fascia per i consulenti */
.ic-rp-consulenti {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #0b4f5c 0%, #138a9e 100%);
    color: var(--ic-bianco);
}

.ic-rp-consulenti__testo {
    line-height: 1.65;
    opacity: .92;
}

.ic-rp-bottone-chiaro {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: var(--ic-bianco);
}

.ic-rp-bottone-chiaro:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--ic-bianco);
}

.ic-rp-vantaggi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ic-rp-vantaggi li {
    display: flex;
    gap: .8rem;
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .1);
    line-height: 1.5;
}

.ic-rp-vantaggi svg {
    flex: 0 0 1rem;
    width: 1rem;
    height: auto;
    margin-top: .2rem;
}

@media (max-width: 991px) {
    .ic-rp-apertura,
    .ic-rp-consulenti {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic-rp-badge i,
    .ic-rp-scheda {
        animation: none;
    }
}

/* ===========================================================================
   Pagina di una webapp con il suo colore (20/10/2026) — app/scheda.php
   Un solo ingresso: --ic-ap-colore sul contenitore. Da li' si ricavano:
     --ic-ap-forte   il colore scurito, per testi e link (contrasto AA anche
                     col blu dello Scadenzario, che puro sta a 4,2:1)
     --ic-ap-notte   il fondo scuro della testata
     --ic-ap-tinta   lo sfondo chiaro delle fasce
   La pagina della suite (app/suite.php) non e' toccata.
   =========================================================================== */

.ic-ap-pagina {
    --ic-ap-forte: var(--ic-ap-azione, color-mix(in srgb, var(--ic-ap-colore) 78%, #000));
    --ic-ap-notte: color-mix(in srgb, var(--ic-ap-colore) 38%, #0a1220);
    --ic-ap-tinta: color-mix(in srgb, var(--ic-ap-colore) 7%, #fff);
    --ic-ap-tinta-2: color-mix(in srgb, var(--ic-ap-colore) 15%, #fff);
}

/* Testata scura nel colore della webapp ---------------------------------- */
.ic-ap-testa {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem clamp(4rem, 8vw, 6rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(50rem 28rem at 90% 0%, color-mix(in srgb, var(--ic-ap-colore) 70%, transparent), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, color-mix(in srgb, var(--ic-ap-colore) 35%, transparent), transparent 70%),
        var(--ic-ap-notte);
}

/* Trama a puntini, appena visibile: da' profondita' senza disturbare. */
.ic-ap-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}

.ic-ap-testa > .container-xl {
    position: relative;
}

.ic-ap-testa__marchio {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: .4rem 1rem .4rem .4rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 700;
    line-height: 1.1;
}

.ic-ap-testa__marchio small {
    display: block;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}

.ic-ap-testa__ico {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ic-ap-colore);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

.ic-ap-testa__ico .ic-ico {
    width: 1.05rem;
    height: 1.05rem;
}

.ic-ap-testa__titolo {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ic-ap-testa__testo {
    max-width: 38rem;
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
}

.ic-ap-testa__nota {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 1rem 0 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .75);
}

.ic-ap-testa__nota .ic-ico {
    width: .8rem;
    height: .8rem;
}

.ic-ap-testa .ic-ap-browser {
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.ic-ap-testa .ic-ap-telefono {
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

/* Bottone bianco con il testo nel colore della webapp */
.ic-ap-bottone-bianco {
    background: var(--ic-bianco);
    border-color: var(--ic-bianco);
    color: var(--ic-ap-forte);
}

.ic-ap-bottone-bianco:hover {
    background: var(--ic-ap-tinta-2);
    border-color: var(--ic-ap-tinta-2);
    color: var(--ic-ap-forte);
}

/* In breve: sovrapposto alla testata */
.ic-ap-pagina .ic-ap-breve {
    margin-top: -2.5rem;
    z-index: 2;
    box-shadow: 0 18px 40px rgba(17, 30, 52, .1);
}

.ic-ap-pagina .ic-ap-breve div {
    padding-left: 1rem;
    border-left: 3px solid var(--ic-ap-colore);
}

.ic-ap-pagina .ic-ap-breve strong {
    color: var(--ic-ap-forte);
}

/* Barra interna ------------------------------------------------------------ */
.ic-ap-barra {
    position: sticky;
    top: var(--ic-ap-sotto-header, 4.5rem);
    z-index: 1020;
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-ap-barra--attaccata {
    border-bottom-color: var(--ic-grigio-200);
    box-shadow: 0 6px 20px rgba(17, 30, 52, .06);
}

.ic-ap-barra__dentro {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 3.5rem;
}

.ic-ap-barra__nome {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    white-space: nowrap;
}

.ic-ap-barra__ico {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

.ic-ap-barra__ico .ic-ico {
    width: .85rem;
    height: .85rem;
}

.ic-ap-barra__voci {
    position: relative;
    flex: 1;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ic-ap-barra__voci::-webkit-scrollbar {
    display: none;
}

.ic-ap-barra__voci a {
    position: relative;
    padding: 1.05rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
    white-space: nowrap;
}

.ic-ap-barra__voci a::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ic-ap-colore);
    transform: scaleX(0);
    transition: transform var(--ic-transizione);
}

.ic-ap-barra__voci a:hover,
.ic-ap-barra__voci a.ic-attivo {
    color: var(--ic-ap-forte);
    opacity: 1;
}

.ic-ap-barra__voci a.ic-attivo::after {
    transform: scaleX(1);
}

.ic-ap-barra__prova {
    padding: .5rem 1.1rem;
    border-radius: 100px;
    background: var(--ic-ap-forte);
    color: var(--ic-bianco);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    transition: transform var(--ic-transizione), background-color var(--ic-transizione);
}

.ic-ap-barra__prova:hover {
    color: var(--ic-bianco);
    background: var(--ic-ap-notte);
    opacity: 1;
    transform: translateY(-1px);
}

/* Le ancore non finiscono sotto header e barra */
.ic-ap-ancora {
    scroll-margin-top: calc(var(--ic-ap-sotto-header, 4.5rem) + 3.5rem);
}

/* Titoli e occhielli ------------------------------------------------------ */
.ic-ap-occhiello {
    color: var(--ic-ap-forte);
}

.ic-ap-funzione__titolo {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin-bottom: .9rem;
}

/* Il numero del passo diventa un gettone colorato */
.ic-ap-pagina .ic-ap-passo {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .9rem;
    background: var(--ic-ap-tinta-2);
    color: var(--ic-ap-forte);
    font-size: .9375rem;
    letter-spacing: 0;
}

/* Il palco: la schermata appoggiata su un pannello nel colore della webapp */
.ic-ap-palco {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
}

.ic-ap-palco::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 85% 15%, var(--ic-ap-tinta-2), transparent 60%),
        var(--ic-ap-tinta);
    border: 1px solid color-mix(in srgb, var(--ic-ap-colore) 12%, transparent);
}

.ic-ap-palco > * {
    position: relative;
}

.ic-ap-palco > .ic-ap-browser {
    margin-right: calc(-1 * clamp(.5rem, 2vw, 1.5rem));
}

.ic-ap-palco--sinistra {
    padding-left: 0;
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
}

.ic-ap-palco--sinistra > .ic-ap-browser {
    margin-right: 0;
    margin-left: calc(-1 * clamp(.5rem, 2vw, 1.5rem));
}

/* Telefono e verbale stanno al centro del palco */
.ic-ap-palco:has(> .ic-ap-telefono, > .ic-ap-foglio) {
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

/* Fasce tinte ------------------------------------------------------------- */
.ic-ap-fascia {
    background: var(--ic-ap-tinta);
}

.ic-ap-pagina .ic-ap-elenco li {
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    background: var(--ic-bianco);
    border: 1px solid color-mix(in srgb, var(--ic-ap-colore) 10%, var(--ic-grigio-200));
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-ap-pagina .ic-ap-elenco li:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17, 30, 52, .06);
}

.ic-ap-pagina .ic-ap-elenco .ic-ico {
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

/* Per chi ----------------------------------------------------------------- */
.ic-ap-profilo--pieno {
    background: var(--ic-ap-tinta-2);
}

.ic-ap-profilo--bordo {
    background: var(--ic-bianco);
    border: 2px solid var(--ic-ap-tinta-2);
}

.ic-ap-pagina .ic-ap-profilo__ico {
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

.ic-ap-profilo--pieno .ic-ap-profilo__ico {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ic-ap-colore) 35%, transparent);
}

.ic-ap-pagina .ic-ap-link,
.ic-ap-link-testo {
    color: var(--ic-ap-forte);
}

.ic-ap-link-testo {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ic-ap-colore) 40%, transparent);
    text-underline-offset: 3px;
}

/* Le carte verso le altre webapp tengono il colore di quella webapp */
.ic-ap-pagina .ic-ap-ponte {
    border-left: 4px solid var(--ic-ap-colore);
}

/* Domande ----------------------------------------------------------------- */
.ic-ap-pagina .ic-ap-faq summary::after {
    color: var(--ic-ap-forte);
}

.ic-ap-pagina .ic-ap-faq summary:hover,
.ic-ap-pagina .ic-ap-faq[open] summary {
    color: var(--ic-ap-forte);
}

/* Invito finale ----------------------------------------------------------- */
.ic-ap-invito {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40rem 20rem at 100% 0%, color-mix(in srgb, var(--ic-ap-colore) 80%, transparent), transparent 70%),
        var(--ic-ap-notte);
}

.ic-ap-invito > div {
    position: relative;
}

.ic-ap-invito__filigrana {
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.ic-ap-invito__filigrana .ic-ico {
    width: 12rem;
    height: 12rem;
}

/* Scopri anche: le altre webapp come pillole nel loro colore */
.ic-ap-altre-webapp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.75rem;
    font-size: .9375rem;
    color: var(--ic-grigio-600);
}

.ic-ap-altre-webapp a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .9rem .3rem .3rem;
    border-radius: 100px;
    border: 1px solid var(--ic-grigio-200);
    font-weight: 600;
    color: var(--ic-nero);
    transition: border-color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-ap-altre-webapp a:hover {
    border-color: var(--ic-ap-colore);
    transform: translateY(-1px);
    opacity: 1;
}

.ic-ap-altre-webapp__ico {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--ic-ap-colore);
    color: var(--ic-bianco);
}

.ic-ap-altre-webapp__ico .ic-ico {
    width: .75rem;
    height: .75rem;
}

.ic-ap-altre-webapp a.ic-ap-altre-webapp__piani {
    padding-left: .9rem;
}

/* Telefono e tablet ------------------------------------------------------- */
@media (max-width: 991px) {
    .ic-ap-barra__nome {
        display: none;
    }

    .ic-ap-palco,
    .ic-ap-palco--sinistra {
        padding: 1.25rem;
    }

    .ic-ap-palco > .ic-ap-browser,
    .ic-ap-palco--sinistra > .ic-ap-browser {
        margin: 0;
    }
}

@media (max-width: 575px) {
    .ic-ap-barra__dentro {
        gap: .5rem;
    }

    .ic-ap-barra__voci a {
        padding-inline: .6rem;
        font-size: .8125rem;
    }

    .ic-ap-barra__prova {
        padding: .45rem .85rem;
    }

    .ic-ap-pagina .ic-ap-breve {
        margin-top: -2rem;
    }
}

/* Il numero dei download in minuscolo, non da etichetta (20/10/2026). */
.ic-card__download {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* Card piu' larghe: titolo e corpo un filo piu' generosi. */
@media (min-width: 768px) {
    .ic-card__corpo { padding: 1rem 1.15rem 1.2rem; }
    .ic-card__titolo { font-size: 1rem; }
}

/* ===========================================================================
   Pagina pubblica dell'autore — /autori/<slug>/ (20/10/2026)
   Testata scura nel blu del sito, striscia di numeri sovrapposta, elenco
   filtrabile. Prima era tutta con stili in linea.
   =========================================================================== */

.ic-au-testa {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem clamp(4.5rem, 8vw, 6rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(45rem 25rem at 95% 0%, rgba(42, 127, 147, .75), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(42, 127, 147, .3), transparent 70%),
        #0f2b4a;
}

.ic-au-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}

.ic-au-testa > .container-xl {
    position: relative;
}

.ic-au-profilo {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.ic-au-foto {
    flex: 0 0 auto;
    width: clamp(6.5rem, 12vw, 9rem);
    height: clamp(6.5rem, 12vw, 9rem);
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, .9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    background: var(--ic-bianco);
}

.ic-au-foto--iniziale {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2a7f93, #37a4bf);
    color: var(--ic-bianco);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
}

.ic-au-identita {
    min-width: 0;
}

.ic-au-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ic-au-nome {
    margin: .6rem 0 0;
    font-size: clamp(1.75rem, 3.8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.ic-au-sotto {
    margin: .35rem 0 0;
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .85);
}

.ic-au-dati {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin: .75rem 0 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .75);
}

.ic-au-dati span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.ic-au-recapiti {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}

.ic-au-recapiti a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .5rem 1rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 500;
    overflow-wrap: anywhere;
    transition: background-color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-au-recapiti a:hover {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
    opacity: 1;
    transform: translateY(-1px);
}

.ic-au-recapiti svg {
    flex: 0 0 auto;
}

/* Striscia dei numeri, appoggiata sul bordo della testata */
.ic-au-numeri {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: -2.75rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    box-shadow: 0 18px 40px rgba(17, 30, 52, .1);
}

.ic-au-numeri > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1.25rem 1.5rem;
}

.ic-au-numeri > div + div {
    border-left: 1px solid var(--ic-grigio-200);
}

.ic-au-numeri strong {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ic-blu-scuro);
}

.ic-au-numeri > div > span {
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

.ic-au-stella {
    color: #f2a516;
    font-size: .85em;
}

/* Elenco delle pubblicazioni */
.ic-au-testata-elenco {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ic-au-conta {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    margin-left: .35rem;
    padding-inline: .5rem;
    border-radius: 100px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-size: .875rem;
    vertical-align: middle;
}

.ic-au-comandi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.ic-au-filtri {
    display: inline-flex;
    padding: .25rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
}

.ic-au-filtri button {
    padding: .4rem .9rem;
    border: 0;
    border-radius: 100px;
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ic-grigio-600);
    cursor: pointer;
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-au-filtri button:hover {
    color: var(--ic-nero);
}

.ic-au-filtri button.is-attivo {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
    box-shadow: 0 1px 4px rgba(17, 30, 52, .12);
}

.ic-au-ordina {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-au-ordina .form-select {
    width: auto;
    border-radius: 100px;
}

.ic-au-griglia {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ic-au-voce > .ic-card {
    height: 100%;
}

.ic-au-voce[hidden] {
    display: none;
}

.ic-au-vuoto {
    padding: 2.5rem 1rem;
    border: 1px dashed var(--ic-grigio-200);
    border-radius: 1.25rem;
    text-align: center;
    color: var(--ic-grigio-600);
}

@media (max-width: 767px) {
    .ic-au-profilo {
        flex-direction: column;
        align-items: flex-start;
    }

    .ic-au-numeri {
        grid-template-columns: 1fr 1fr;
        margin-top: -2.25rem;
    }

    .ic-au-numeri > div {
        padding: 1rem 1.1rem;
    }

    .ic-au-numeri > div:nth-child(3) {
        border-left: 0;
    }

    .ic-au-numeri > div:nth-child(n + 3) {
        border-top: 1px solid var(--ic-grigio-200);
    }

    .ic-au-griglia {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===========================================================================
   Diventa autore — /diventa-autore.htm (20/10/2026)
   Testata scura nel blu del sito con l'anteprima di un documento firmato,
   vantaggi a schede, i passi su una linea, tipi di materiale, domande.
   =========================================================================== */

.ic-da-testa {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem clamp(3.5rem, 7vw, 5.5rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(45rem 25rem at 95% 10%, rgba(42, 127, 147, .75), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(42, 127, 147, .3), transparent 70%),
        #0f2b4a;
}

.ic-da-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}

.ic-da-testa > .container-xl {
    position: relative;
}

.ic-da-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .8rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: .75rem;
    font-weight: 600;
}

.ic-da-badge .ic-ico {
    width: .9rem;
    height: .9rem;
}

.ic-da-titolo {
    margin: 1rem 0 0;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ic-da-testo {
    max-width: 36rem;
    margin: 1.1rem 0 0;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
}

.ic-da-punti {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: rgba(255, 255, 255, .85);
}

.ic-da-punti li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.ic-da-punti .ic-ico {
    width: .8rem;
    height: .8rem;
    color: #7fcfe2;
}

/* Anteprima: la card del documento con due avvisi che galleggiano */
.ic-da-anteprima {
    position: relative;
    max-width: 26rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

.ic-da-doc {
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--ic-bianco);
    color: var(--ic-nero);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    transform: rotate(-2deg);
}

.ic-da-doc__copertina {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(135deg, #ebf6f9, #dbe9f7);
}

.ic-da-doc__riga {
    display: block;
    width: 85%;
    height: .55rem;
    border-radius: 100px;
    background: #b9cfe6;
}

.ic-da-doc__riga--titolo {
    width: 65%;
    height: .9rem;
    background: var(--ic-blu);
}

.ic-da-doc__riga--corta {
    width: 50%;
}

.ic-da-doc__spunte {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .5rem;
}

.ic-da-doc__spunte i {
    display: block;
    height: .9rem;
    padding-left: 1.4rem;
    position: relative;
}

.ic-da-doc__spunte i::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: .9rem;
    height: .9rem;
    border-radius: .25rem;
    background: #5f7d2b;
}

.ic-da-doc__spunte i::after {
    content: "";
    position: absolute;
    left: 1.4rem;
    right: 20%;
    top: .3rem;
    height: .35rem;
    border-radius: 100px;
    background: #c9d9ea;
}

.ic-da-doc__spunte i:nth-child(2)::after { right: 35%; }
.ic-da-doc__spunte i:nth-child(3)::after { right: 10%; }
.ic-da-doc__spunte i:nth-child(4)::after { right: 45%; }

.ic-da-doc__corpo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.ic-da-doc__sezione {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-da-doc__corpo strong {
    font-size: 1.05rem;
}

.ic-da-doc__autore {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-da-doc__autore em {
    font-style: normal;
    font-weight: 600;
    color: var(--ic-blu-scuro);
}

.ic-da-doc__avatar {
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-da-doc__avatar .ic-ico {
    width: .7rem;
    height: .7rem;
}

.ic-da-doc__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .4rem;
}

.ic-da-doc__stelle {
    color: #f2a516;
    font-size: .8125rem;
    letter-spacing: .05em;
}

.ic-da-doc__prezzo {
    padding: .25rem .65rem;
    border-radius: 100px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ic-da-avviso {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem .6rem .6rem;
    border-radius: .9rem;
    background: var(--ic-bianco);
    color: var(--ic-nero);
    font-size: .8125rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    animation: ic-da-galleggia 5s ease-in-out infinite;
}

.ic-da-avviso--alto {
    top: .5rem;
    right: -1rem;
}

.ic-da-avviso--basso {
    bottom: .5rem;
    left: -1rem;
    animation-delay: -2.5s;
}

@keyframes ic-da-galleggia {
    50% { transform: translateY(-6px); }
}

.ic-da-avviso__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: .6rem;
    background: #5f7d2b;
    color: var(--ic-bianco);
}

.ic-da-avviso__ico--blu {
    background: var(--ic-blu);
}

.ic-da-avviso__ico .ic-ico {
    width: .85rem;
    height: .85rem;
}

/* Vantaggi */
.ic-da-vantaggi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.ic-da-vantaggio {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    background: var(--ic-bianco);
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-da-vantaggio:hover {
    transform: translateY(-3px);
    border-color: rgba(42, 127, 147, .4);
    box-shadow: 0 16px 36px rgba(17, 30, 52, .08);
}

.ic-da-vantaggio__ico {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.1rem;
    border-radius: .9rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-da-vantaggio:hover .ic-da-vantaggio__ico {
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-da-vantaggio__ico .ic-ico {
    width: 1.3rem;
    height: 1.3rem;
}

.ic-da-vantaggio h3 {
    margin-bottom: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.ic-da-vantaggio p {
    margin: 0;
    line-height: 1.6;
    color: var(--ic-grigio-600);
}

/* I passi su una linea */
.ic-da-linea {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ic-da-linea::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--ic-blu) 0 8px, transparent 8px 14px);
    opacity: .45;
}

.ic-da-linea li {
    position: relative;
    text-align: center;
}

.ic-da-linea__numero {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 0 0 6px #f6f8fb, 0 8px 20px rgba(42, 127, 147, .35);
}

.ic-da-linea h3 {
    margin-bottom: .4rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-da-linea p {
    max-width: 16rem;
    margin: 0 auto;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

/* Tipi di materiale */
.ic-da-tipi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 1.5rem;
}

.ic-da-tipi span {
    padding: .4rem .9rem;
    border-radius: 100px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    font-size: .8125rem;
    font-weight: 600;
}

.ic-da-foto {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(17, 30, 52, .14);
}

.ic-da-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ic-da-foto figcaption {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    font-size: .8125rem;
    font-weight: 600;
}

.ic-da-foto figcaption .ic-ico {
    width: .9rem;
    height: .9rem;
    color: var(--ic-blu);
}

/* Invito con l'icona in filigrana */
.ic-da-invito {
    position: relative;
    overflow: hidden;
}

.ic-da-invito > div {
    position: relative;
}

.ic-da-invito__filigrana {
    position: absolute;
    right: -1rem;
    bottom: -2.5rem;
    color: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.ic-da-invito__filigrana .ic-ico {
    width: 11rem;
    height: 11rem;
}

@media (max-width: 991px) {
    .ic-da-vantaggi {
        grid-template-columns: 1fr 1fr;
    }

    .ic-da-linea {
        grid-template-columns: 1fr 1fr;
        row-gap: 2rem;
    }

    .ic-da-linea::before {
        display: none;
    }
}

@media (max-width: 575px) {
    .ic-da-vantaggi,
    .ic-da-linea {
        grid-template-columns: 1fr;
    }

    .ic-da-linea li {
        display: grid;
        grid-template-columns: 3rem 1fr;
        column-gap: 1rem;
        text-align: left;
    }

    .ic-da-linea__numero {
        grid-row: span 2;
        margin: 0;
    }

    .ic-da-linea p {
        max-width: none;
        margin: 0;
    }

    .ic-da-anteprima {
        padding: 2.5rem .5rem;
    }

    .ic-da-avviso--alto {
        right: 0;
    }

    .ic-da-avviso--basso {
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic-da-avviso {
        animation: none;
    }
}

/* ===========================================================================
   Candidatura autore — /diventa-autore/candidatura.htm (20/10/2026)
   =========================================================================== */

.ic-da-testa--breve {
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.ic-da-testa--breve .ic-da-titolo {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.ic-ca-blocco {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    background: var(--ic-bianco);
}

.ic-ca-blocco legend {
    float: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: auto;
    margin-bottom: 1.1rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-ca-blocco legend span {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .8125rem;
}

.ic-ca-blocco legend em,
.ic-ca-facoltativo {
    font-size: .75rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ic-grigio-400);
}

.ic-ca-conta {
    display: block;
    margin-top: .3rem;
    text-align: right;
}

.ic-ca-conferme {
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    background: var(--ic-blu-tinta);
    font-size: .9375rem;
}

/* Riquadri di stato: ospite, gia' autore, in attesa */
.ic-ca-esito {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.5rem;
    background: var(--ic-bianco);
}

.ic-ca-esito h2 {
    margin-bottom: .6rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
}

.ic-ca-esito p {
    max-width: 38rem;
    margin-bottom: 1.5rem;
    line-height: 1.65;
    color: var(--ic-grigio-900);
}

.ic-ca-esito__ico {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.1rem;
    border-radius: 1rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
}

.ic-ca-esito__ico .ic-ico {
    width: 1.4rem;
    height: 1.4rem;
}

.ic-ca-esito--ok .ic-ca-esito__ico {
    background: #e3f3ea;
    color: #1c6b3f;
}

.ic-ca-esito--attesa .ic-ca-esito__ico {
    background: #fdf3e1;
    color: #a3620a;
}

/* Le tre tappe della candidatura in attesa */
.ic-ca-tappe {
    display: flex;
    gap: .5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

.ic-ca-tappe li {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ic-ca-tappe li span {
    height: .35rem;
    border-radius: 100px;
    background: var(--ic-grigio-200);
}

.ic-ca-tappe li.is-fatta span {
    background: var(--ic-blu);
}

.ic-ca-tappe li.is-corrente span {
    background: linear-gradient(90deg, var(--ic-blu) 50%, var(--ic-grigio-200) 50%);
}

.ic-ca-tappe li.is-fatta,
.ic-ca-tappe li.is-corrente {
    font-weight: 600;
    color: var(--ic-nero);
}

/* Colonna a lato */
.ic-ca-lato {
    position: sticky;
    top: 6rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: #f6f8fb;
}

.ic-ca-lato h2 {
    margin-bottom: 1rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-ca-passi {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-900);
}

.ic-ca-passi li + li {
    margin-top: .75rem;
}

@media (max-width: 991px) {
    .ic-ca-lato {
        position: static;
    }
}

/* ===========================================================================
   Tendina dell'account nell'header (21/10/2026)
   Su «Ciao nome»: area personale, impostazioni, ordini, assistenza, esci.
   Si apre al passaggio del mouse o con la tastiera (focus-within), come la
   tendina Webapp. Sotto i 992px non c'e': il menu a comparsa ha le stesse voci.
   =========================================================================== */

.ic-conto {
    position: relative;
    display: flex;
    align-items: center;
}

.ic-conto__freccia {
    color: var(--ic-grigio-600);
    transition: transform var(--ic-transizione);
}

.ic-conto__pannello {
    position: absolute;
    top: 100%;
    right: -.5rem;
    z-index: 5;
    width: 18.5rem;
    margin-top: .75rem;
    padding: .5rem;
    background: var(--ic-bianco);
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(17, 30, 52, .04), 0 20px 48px rgba(17, 30, 52, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

/* Ponte invisibile fra il nome e il pannello: il mouse non lo perde per strada. */
.ic-conto__pannello::before {
    content: "";
    position: absolute;
    inset: -.9rem 0 auto;
    height: .9rem;
}

@media (min-width: 992px) {
    .ic-conto:hover .ic-conto__pannello,
    .ic-conto:focus-within .ic-conto__pannello {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ic-conto:hover .ic-conto__freccia,
    .ic-conto:focus-within .ic-conto__freccia {
        transform: rotate(180deg);
    }
}

@media (max-width: 991px) {
    .ic-conto__pannello {
        display: none;
    }
}

.ic-conto__chi {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .35rem;
    padding: .6rem .65rem .8rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-conto__chi .ic-header__avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
}

.ic-conto__chi > span:last-child {
    min-width: 0;
}

.ic-conto__chi strong,
.ic-conto__chi small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.ic-conto__chi small {
    font-size: .8125rem;
    color: var(--ic-grigio-600);
}

.ic-conto__voce {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .7rem;
    font-size: .875rem;
    transition: background-color 140ms ease;
}

.ic-conto__voce:hover,
.ic-conto__voce:focus-visible,
.ic-conto__voce.is-attiva {
    background: var(--ic-blu-tinta);
    opacity: 1;
}

.ic-conto__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .6rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
    transition: background-color 140ms ease, color 140ms ease;
}

.ic-conto__voce:hover .ic-conto__ico,
.ic-conto__voce.is-attiva .ic-conto__ico {
    background: var(--ic-blu);
    color: var(--ic-bianco);
}

.ic-conto__voce strong,
.ic-conto__voce small {
    display: block;
    line-height: 1.3;
}

.ic-conto__voce strong {
    font-weight: 600;
    color: var(--ic-nero);
}

.ic-conto__voce small {
    font-size: .75rem;
    color: var(--ic-grigio-600);
}

.ic-conto__esci {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .35rem;
    padding: .7rem .75rem .45rem;
    border-top: 1px solid var(--ic-grigio-200);
    font-size: .875rem;
    font-weight: 600;
    color: #b42318;
}

.ic-conto__esci:hover {
    color: #8a1a12;
    opacity: 1;
}

/* ===========================================================================
   Frecce e bottone «indietro» (21/10/2026)
   Regola: le frecce sono sempre FontAwesome (componenti/freccia.php), e per
   tornare indietro c'e' sempre un bottone (componenti/indietro.php), mai un
   link sottolineato.
   =========================================================================== */

.ic-freccia {
    display: inline-block;
    flex: 0 0 auto;
    width: .8em;
    height: .8em;
    vertical-align: -.05em;
}

.ic-indietro {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .45rem 1rem .45rem .85rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 100px;
    background: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ic-grigio-900);
    text-decoration: none;
    transition: border-color var(--ic-transizione), color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-indietro .ic-freccia {
    width: .8rem;
    height: .8rem;
    color: var(--ic-blu);
    transition: transform var(--ic-transizione);
}

.ic-indietro:hover {
    border-color: var(--ic-blu);
    color: var(--ic-blu-scuro);
    text-decoration: none;
    opacity: 1;
}

.ic-indietro:hover .ic-freccia {
    transform: translateX(-3px);
}

/* Le frecce dentro testo e link: un filo di distanza dalla parola. */
.ic-tessera__vai .ic-freccia,
.ic-ap-altre-webapp .ic-freccia,
.ic-paginazione .ic-freccia {
    width: .75em;
    height: .75em;
}

p > .ic-indietro {
    margin-bottom: 0;
}

/* Le due tendine dell'header usano fa-chevron-down (componenti/freccia.php). */
.ic-tendina__freccia,
.ic-conto__freccia {
    width: .6rem;
    height: .6rem;
}

.ic-azione__icona .ic-freccia {
    width: 1rem;
    height: 1rem;
}

/* ===========================================================================
   Chevron FontAwesome al posto delle «frecce» disegnate con i bordi o con
   caratteri come ▾ (21/10/2026). Stanno in fondo al file e vincono sulle
   regole originali, che restano per la posizione e le animazioni.
   =========================================================================== */
.ic-riga-filtro__frec {
    width: .45rem;
    height: .7rem;
    border: 0;
    transform: none;
    background: var(--ic-grigio-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ic-riga-filtro:hover .ic-riga-filtro__frec,
.ic-riga-filtro--aperta .ic-riga-filtro__frec {
    background: var(--ic-blu);
}

.ic-cat-gruppo--apribile > summary::after {
    width: .7rem;
    height: .7rem;
    border: 0;
    transform: none;
    background: var(--ic-grigio-400);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ic-cat-gruppo--apribile[open] > summary::after {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    .ic-esplora summary::after {
        content: "";
        display: inline-block;
        width: .7rem;
        height: .7rem;
        background: var(--ic-blu);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* ===========================================================================
   Piani — /piani.htm (21/10/2026)
   Testata scura come le altre pagine nuove, carte con spunte e croci, il
   prospetto di confronto, «quello che non cambia».
   =========================================================================== */

.ic-pi-testa {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem clamp(7rem, 12vw, 9rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(45rem 25rem at 95% 0%, rgba(42, 127, 147, .75), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(42, 127, 147, .3), transparent 70%),
        #0f2b4a;
}

.ic-pi-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 85%);
    pointer-events: none;
}

.ic-pi-testa > .container-xl {
    position: relative;
}

.ic-pi-scelta {
    display: inline-flex;
    gap: .25rem;
    margin-top: 1.75rem;
    padding: .3rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

.ic-pi-scelta a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    border-radius: 100px;
    font-size: .9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-pi-scelta a .ic-ico {
    width: 1rem;
    height: 1rem;
}

.ic-pi-scelta a:hover {
    color: var(--ic-bianco);
    opacity: 1;
}

.ic-pi-scelta a.is-attiva {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
}

/* Le carte salgono sulla testata */
.ic-pi-carte {
    position: relative;
    z-index: 2;
    margin-top: clamp(-6rem, -10vw, -5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ic-pi-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
    max-width: 58rem;
    margin: 0 auto;
}

.ic-pi-piano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.5rem;
    background: var(--ic-bianco);
    box-shadow: 0 18px 44px rgba(17, 30, 52, .1);
}

.ic-pi-piano--evidenza {
    border: 2px solid var(--ic-blu);
    box-shadow: 0 24px 60px rgba(42, 127, 147, .25);
}

.ic-pi-piano--mio {
    border: 2px solid #5f7d2b;
}

.ic-pi-piano__etichetta {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .3rem .9rem;
    border-radius: 100px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ic-pi-piano--mio .ic-pi-piano__etichetta {
    background: #5f7d2b;
}

.ic-pi-piano__nome {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.ic-pi-piano__sotto {
    margin: .35rem 0 0;
    min-height: 2.6em;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--ic-grigio-600);
}

.ic-pi-piano__prezzo {
    margin: 1.1rem 0 1.25rem;
    font-size: clamp(2.25rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

.ic-pi-piano__prezzo span {
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ic-grigio-600);
}

.ic-pi-piano__azione {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ic-grigio-200);
}

.ic-pi-piano__attivo {
    pointer-events: none;
    border-color: #5f7d2b;
    color: #1c6b3f;
}

.ic-pi-piano__attivo .ic-ico {
    width: .9rem;
    height: .9rem;
}

.ic-pi-piano__nota {
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

.ic-pi-piano__voci {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    line-height: 1.4;
}

.ic-pi-piano__voci li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.ic-pi-piano__voci li.is-manca {
    color: var(--ic-grigio-400);
}

/* Spunta verde, croce grigia: le icone «si» e «no» di FontAwesome */
.ic-pi-segno {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #e3f3ea;
    color: #1c6b3f;
}

.ic-pi-segno .ic-ico {
    width: .65rem;
    height: .65rem;
}

.is-manca .ic-pi-segno,
.ic-pi-segno--no {
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-400);
}

.ic-pi-nota-prezzi {
    max-width: 46rem;
    margin: 2rem auto 0;
    font-size: .875rem;
    line-height: 1.6;
    text-align: center;
    color: var(--ic-grigio-600);
}

/* Il prospetto */
.ic-pi-prospetto {
    max-width: 58rem;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    background: var(--ic-bianco);
    box-shadow: 0 12px 30px rgba(17, 30, 52, .06);
}

.ic-pi-prospetto table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
}

.ic-pi-prospetto th,
.ic-pi-prospetto td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ic-grigio-200);
    vertical-align: middle;
}

.ic-pi-prospetto tbody tr:last-child th,
.ic-pi-prospetto tbody tr:last-child td {
    border-bottom: 0;
}

.ic-pi-prospetto thead th {
    padding-block: 1.25rem;
    text-align: center;
    background: #f6f8fb;
}

.ic-pi-prospetto thead th:first-child {
    background: #f6f8fb;
}

.ic-pi-prospetto__nome,
.ic-pi-prospetto__prezzo {
    display: block;
}

.ic-pi-prospetto__nome {
    font-size: 1rem;
    font-weight: 700;
}

.ic-pi-prospetto__prezzo {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
}

.ic-pi-prospetto tbody th {
    font-size: .9375rem;
    font-weight: 600;
    text-align: left;
}

.ic-pi-prospetto tbody th small {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--ic-grigio-600);
}

.ic-pi-prospetto td {
    width: 24%;
    text-align: center;
    font-size: .9375rem;
}

.ic-pi-prospetto td strong {
    font-weight: 600;
    color: var(--ic-blu-scuro);
}

.ic-pi-prospetto .is-evidenza {
    background: rgba(42, 127, 147, .05);
}

.ic-pi-prospetto thead th.is-evidenza {
    background: var(--ic-blu-tinta);
    box-shadow: inset 0 3px 0 var(--ic-blu);
}

.ic-pi-presto {
    display: inline-block;
    margin-left: .4rem;
    padding: .1rem .5rem;
    border-radius: 100px;
    background: #e3f4f6;
    color: #0b5f6e;
    font-size: .6875rem;
    font-weight: 600;
    vertical-align: middle;
}

/* Quello che non cambia */
.ic-pi-sempre {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.ic-pi-sempre__voce {
    padding: 1.5rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1.25rem;
    background: var(--ic-bianco);
}

.ic-pi-sempre__ico {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu-scuro);
}

.ic-pi-sempre__ico .ic-ico {
    width: 1.15rem;
    height: 1.15rem;
}

.ic-pi-sempre__voce h3 {
    margin-bottom: .4rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-pi-sempre__voce p {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--ic-grigio-600);
}

@media (max-width: 991px) {
    .ic-pi-sempre {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .ic-pi-sempre {
        grid-template-columns: 1fr;
    }

    .ic-pi-scelta a {
        padding: .55rem .9rem;
        font-size: .875rem;
    }

    .ic-pi-piano {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    /* Il prospetto sta nello schermo: due colonne di piani sono poche. */
    .ic-pi-prospetto table {
        min-width: 0;
    }

    .ic-pi-prospetto th,
    .ic-pi-prospetto td {
        padding: .75rem .6rem;
    }

    .ic-pi-prospetto tbody th {
        font-size: .8125rem;
    }

    .ic-pi-prospetto tbody th small {
        display: none;
    }

    .ic-pi-prospetto td {
        width: 26%;
        font-size: .8125rem;
    }

    .ic-pi-prospetto__nome {
        font-size: .8125rem;
    }
}

/* --- Piani, impianto a due colonne (21/10/2026) ---------------------------
   Testo a sinistra, carte a destra, dentro la testata scura e a tutta
   larghezza: aprendo la pagina i piani si vedono subito. Sotto i 1200px si
   torna in colonna (testo sopra, carte sotto). */

.ic-pi-testa {
    padding-block: 1.5rem clamp(3rem, 6vw, 4.5rem);
}

.ic-pi-largo {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 3rem);
}

.ic-pi-apertura {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.ic-pi-apertura__testo .ic-da-titolo {
    font-size: clamp(2.25rem, 3.6vw, 3.4rem);
}

.ic-pi-apertura__testo .ic-pi-scelta {
    display: flex;
    width: max-content;
    max-width: 100%;
}

.ic-pi-apertura .ic-pi-griglia {
    max-width: none;
    margin: 0;
    align-items: stretch;
}

.ic-pi-apertura .ic-pi-nota-prezzi {
    max-width: 30rem;
    margin: 1.5rem 0 0;
    text-align: left;
    color: rgba(255, 255, 255, .7);
}

.ic-pi-al-confronto {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 100px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-bianco);
    transition: background-color var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-pi-al-confronto:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .6);
    color: var(--ic-bianco);
    opacity: 1;
}

.ic-pi-al-confronto .ic-freccia {
    width: .75rem;
    height: .75rem;
}

/* Dentro la testata scura l'ombra delle carte e' piu' profonda, e il testo
   torna scuro (la testata lo fa bianco). */
.ic-pi-apertura .ic-pi-piano {
    color: var(--ic-nero);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.ic-pi-apertura .ic-pi-piano--evidenza {
    border-color: #7fcfe2;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 4px rgba(124, 196, 255, .25);
}

.ic-pi-apertura .ic-pi-piano--mio {
    border-color: #4cc38a;
}

@media (max-width: 1199px) {
    .ic-pi-apertura {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* In colonna le carte vengono subito dopo la scelta aziende/consulenti:
       la nota sui prezzi e il link al confronto scendono sotto le carte. */
    .ic-pi-apertura__testo {
        display: contents;
    }

    .ic-pi-apertura__testo > * {
        max-width: 44rem;
    }

    .ic-pi-apertura__testo > .ic-da-badge {
        justify-self: start;
    }

    .ic-pi-apertura .ic-pi-griglia {
        order: 5;
        margin-top: 1.5rem;
    }

    .ic-pi-apertura .ic-pi-nota-prezzi,
    .ic-pi-apertura .ic-pi-al-confronto {
        order: 10;
        margin-top: 0;
    }

    .ic-pi-apertura .ic-pi-al-confronto {
        justify-self: start;
    }
}

/* --- Piani su portatile e desktop (21/10/2026, secondo giro) ---------------
   Carte piu' compatte, cosi' su un portatile si vedono intere, e la fascia
   blu finisce 20px prima del fondo delle carte: le carte «sbordano» sulla
   sezione bianca sotto. Sotto i 1200px resta tutto in colonna, senza sbordo. */
@media (min-width: 1200px) {
    .ic-pi-testa {
        overflow: visible;
        padding-bottom: 0;
    }

    .ic-pi-apertura {
        position: relative;
        z-index: 2;
        align-items: end;
        margin-bottom: -20px;
    }

    .ic-pi-apertura__testo {
        align-self: center;
        padding-bottom: calc(20px + 2.5rem);
    }

    .ic-pi-testa + .ic-cs-fascia > .ic-sezione {
        padding-top: calc(20px + var(--ic-spazio));
    }

    .ic-pi-apertura .ic-pi-piano {
        padding: 1.6rem 1.5rem 1.4rem;
        border-radius: 1.25rem;
    }

    .ic-pi-apertura .ic-pi-piano__nome {
        font-size: 1.125rem;
    }

    .ic-pi-apertura .ic-pi-piano__sotto {
        min-height: 0;
        font-size: .875rem;
    }

    .ic-pi-apertura .ic-pi-piano__prezzo {
        margin: .85rem 0 1rem;
        font-size: 2.1rem;
    }

    .ic-pi-apertura .ic-pi-piano__prezzo span {
        font-size: .8125rem;
    }

    .ic-pi-apertura .ic-pi-piano__azione {
        padding-bottom: 1.1rem;
    }

    .ic-pi-apertura .ic-pi-piano__azione .ic-bottone {
        padding-block: .7rem;
    }

    .ic-pi-apertura .ic-pi-piano__voci {
        gap: .45rem;
        margin-top: 1.1rem;
        font-size: .875rem;
    }

    .ic-pi-apertura .ic-pi-segno {
        width: 1.15rem;
        height: 1.15rem;
    }

    .ic-pi-apertura .ic-pi-segno .ic-ico {
        width: .55rem;
        height: .55rem;
    }

    .ic-pi-apertura__testo .ic-da-titolo {
        font-size: clamp(2.1rem, 3vw, 3rem);
    }

    .ic-pi-apertura__testo .ic-da-testo {
        font-size: 1rem;
    }
}

/* --- Piani: le carte «sospese» (21/10/2026, terzo giro) --------------------
   20px di sbordo sembravano un errore di allineamento. Ora le carte escono
   dalla fascia blu di un buon tratto (circa un quarto della loro altezza)
   e hanno un'ombra lunga verso il basso: si leggono come carte appoggiate
   sopra la pagina, non tagliate dal bordo. Al passaggio del mouse si
   sollevano ancora un poco. */
@media (min-width: 1200px) {
    /* flow-root: senza, il margine negativo «passa» attraverso la sezione
       (collasso dei margini) e sposta su la sezione dopo invece di far
       uscire le carte dal blu. */
    .ic-pi-testa {
        display: flow-root;
    }

    .ic-pi-apertura {
        margin-bottom: -6.5rem;
    }

    .ic-pi-apertura__testo {
        padding-bottom: calc(6.5rem + 2.5rem);
    }

    .ic-pi-testa + .ic-cs-fascia > .ic-sezione {
        padding-top: calc(6.5rem + var(--ic-spazio));
    }

    .ic-pi-apertura .ic-pi-piano {
        box-shadow:
            0 2px 6px rgba(15, 43, 74, .08),
            0 30px 70px -10px rgba(15, 43, 74, .35);
        transition: transform 220ms cubic-bezier(.22, .61, .36, 1), box-shadow 220ms ease;
    }

    .ic-pi-apertura .ic-pi-piano:hover {
        transform: translateY(-6px);
        box-shadow:
            0 2px 6px rgba(15, 43, 74, .08),
            0 40px 80px -10px rgba(15, 43, 74, .42);
    }

    .ic-pi-apertura .ic-pi-piano--evidenza {
        box-shadow:
            0 0 0 4px rgba(124, 196, 255, .25),
            0 30px 70px -10px rgba(15, 43, 74, .45);
    }

    .ic-pi-apertura .ic-pi-piano--evidenza:hover {
        box-shadow:
            0 0 0 4px rgba(124, 196, 255, .3),
            0 40px 80px -10px rgba(15, 43, 74, .5);
    }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
    .ic-pi-apertura .ic-pi-piano:hover {
        transform: none;
    }
}

/* --- Piani: tutto piu' in alto (21/10/2026, quarto giro) -------------------
   «Prezzi chiari» sale sulla riga delle briciole, a destra; le carte si
   allineano in alto con il titolo invece che in basso; meno aria sopra. */
.ic-pi-riga-alta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.ic-pi-apertura__testo .ic-da-titolo {
    margin-top: 0;
}

@media (min-width: 1200px) {
    .ic-pi-testa {
        padding-top: 1.1rem;
    }

    .ic-pi-apertura {
        align-items: start;
        margin-bottom: 0;
    }

    /* Lo sbordo ora lo fanno solo le carte: la loro altezza meno 6,5rem
       decide dove finisce il blu, il testo a sinistra ci sta comodo dentro. */
    .ic-pi-apertura .ic-pi-griglia {
        margin-bottom: -6.5rem;
        padding-top: .75rem;
    }

    .ic-pi-apertura__testo {
        align-self: start;
        padding-top: 1rem;
        padding-bottom: 2.5rem;
    }
}

@media (max-width: 575px) {
    .ic-pi-riga-alta .ic-da-badge {
        display: none;
    }
}

/* La nota sui prezzi sotto il titolo del confronto (21/10/2026): nella
   testata allungava la colonna di sinistra e annullava lo sbordo delle carte. */
.ic-pi-nota-prezzi--sotto {
    margin: 1rem auto 0;
    color: var(--ic-grigio-600);
}

/* ===========================================================================
   Home, tessere piccole con immagini (21/10/2026)
   Catalogo: un ventaglio di tre copertine vere su fondo blu notte.
   Trova un RSPP: foto di due tecnici in cantiere, velo verde acqua da sinistra.
   =========================================================================== */

.ic-tessera--catalogo {
    background:
        radial-gradient(22rem 16rem at 100% 0%, rgba(42, 127, 147, .55), transparent 70%),
        linear-gradient(135deg, #0f2b4a 0%, #163d66 100%);
}

/* Il ventaglio: tre fogli inclinati che escono dal bordo destro */
.ic-ventaglio {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    width: 42%;
    height: 82%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ic-ventaglio__foglio {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    border-radius: .5rem;
    background: var(--ic-bianco);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
    transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}

.ic-ventaglio__foglio--0 { transform: translate(-95%, -52%) rotate(-12deg); }
.ic-ventaglio__foglio--1 { transform: translate(-25%, -48%) rotate(10deg); }
.ic-ventaglio__foglio--2 { transform: translate(-60%, -55%) rotate(-1deg); }

.ic-tessera--catalogo:hover .ic-ventaglio__foglio--0 { transform: translate(-108%, -54%) rotate(-16deg); }
.ic-tessera--catalogo:hover .ic-ventaglio__foglio--1 { transform: translate(-12%, -50%) rotate(14deg); }
.ic-tessera--catalogo:hover .ic-ventaglio__foglio--2 { transform: translate(-60%, -60%) rotate(-1deg); }

/* Il testo resta a sinistra, sopra il ventaglio quando lo spazio e' poco */
.ic-tessera--catalogo .ic-tessera__testo {
    max-width: 62%;
    z-index: 1;
}

/* La foto di Trova un RSPP */
.ic-tessera--rspp {
    background: #0b4f5c;
}

.ic-tessera__sfondo--foto {
    transform: none;
    object-position: center 35%;
    transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.ic-tessera--rspp:hover .ic-tessera__sfondo--foto {
    transform: scale(1.05);
}

.ic-tessera__velo--rspp {
    background:
        linear-gradient(90deg, rgba(8, 62, 72, .95) 0%, rgba(11, 79, 92, .82) 45%, rgba(19, 138, 158, .25) 100%),
        linear-gradient(0deg, rgba(8, 62, 72, .6), transparent 60%);
}

.ic-tessera--rspp .ic-tessera__testo {
    max-width: 75%;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

@media (max-width: 991px) {
    .ic-ventaglio {
        right: .5rem;
        width: 46%;
    }

    .ic-tessera--catalogo .ic-tessera__testo,
    .ic-tessera--rspp .ic-tessera__testo {
        max-width: none;
    }

    .ic-tessera--catalogo .ic-tessera__testo {
        padding-right: 40%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ic-ventaglio__foglio,
    .ic-tessera__sfondo--foto {
        transition: none;
    }
}

/* Ritocchi del ventaglio (21/10/2026): un po' piu' piccolo su desktop, cosi'
   non tocca il titolo; su telefono sta in alto a destra e il testo sotto. */
.ic-ventaglio {
    height: 74%;
}

.ic-tessera--catalogo .ic-tessera__testo {
    max-width: 56%;
}

@media (max-width: 767px) {
    .ic-mosaico__colonna .ic-tessera {
        min-height: 13rem;
    }

    .ic-ventaglio {
        top: .6rem;
        right: .4rem;
        width: 70%;
        height: 48%;
        transform: none;
    }

    .ic-tessera--catalogo .ic-tessera__testo {
        max-width: none;
        padding-right: 1rem;
    }

    .ic-tessera--catalogo .ic-tessera__occhiello {
        display: none;
    }
}

@media (min-width: 768px) {
    .ic-ventaglio {
        right: .5rem;
        width: 38%;
    }

    .ic-tessera--catalogo .ic-tessera__testo {
        max-width: 54%;
    }

    .ic-ventaglio__foglio--0 { transform: translate(-82%, -52%) rotate(-12deg); }
    .ic-tessera--catalogo:hover .ic-ventaglio__foglio--0 { transform: translate(-94%, -54%) rotate(-16deg); }
}

/* --- Pagine delle webapp: testata piu' corta (21/10/2026) -------------------
   Marchio sulla riga delle briciole, testo e schermate a meta' ciascuno,
   titolo e testo un po' piu' piccoli, pulsanti affiancati. */
.ic-ap-testa {
    padding-block: 1.1rem clamp(3.25rem, 6vw, 4.5rem);
}

.ic-ap-testa .ic-pi-riga-alta {
    margin-bottom: 1.5rem;
}

.ic-ap-testa__marchio {
    padding: .3rem .9rem .3rem .3rem;
    font-size: .9375rem;
}

.ic-ap-testa__ico {
    width: 2rem;
    height: 2rem;
}

.ic-ap-testa__titolo {
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
    line-height: 1.12;
}

.ic-ap-testa__testo {
    margin-top: .9rem;
    font-size: 1rem;
    line-height: 1.6;
}

.ic-ap-testa .ic-bottone {
    padding: .8rem 1.6rem;
}

.ic-ap-testa .mt-4 {
    margin-top: 1.25rem !important;
}

.ic-ap-testa .ic-ap-vetrina {
    padding-bottom: 1.25rem;
}

@media (max-width: 575px) {
    .ic-ap-testa .ic-ap-testa__marchio small {
        display: none;
    }
}

/* --- Diventa autore: testata piu' corta (21/10/2026) ------------------------
   Etichetta sulla riga delle briciole, titolo un po' piu' piccolo, meno aria
   sopra e sotto, anteprima del documento meno alta. */
.ic-da-testa:has(.ic-da-titolo--compatto) {
    padding-block: 1.1rem clamp(2.75rem, 5vw, 3.75rem);
}

.ic-da-titolo--compatto {
    margin-top: 0;
    font-size: clamp(1.9rem, 3.1vw, 2.7rem);
    line-height: 1.12;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .ic-da-testo {
    margin-top: .9rem;
    font-size: 1rem;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .mt-4 {
    margin-top: 1.25rem !important;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .ic-bottone {
    padding: .8rem 1.6rem;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .ic-da-punti {
    margin-top: 1.1rem;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .ic-da-anteprima {
    max-width: 23rem;
    padding: 1.75rem 1.5rem;
}

.ic-da-testa:has(.ic-da-titolo--compatto) .ic-da-doc__copertina {
    padding: 1.25rem 1.25rem;
}

@media (max-width: 575px) {
    .ic-pi-riga-alta .ic-da-badge {
        display: none;
    }
}

/* Nell'anteprima compatta l'avviso in basso non deve coprire stelle e prezzo. */
.ic-da-testa:has(.ic-da-titolo--compatto) .ic-da-avviso--basso {
    bottom: -1.4rem;
}

/* ===========================================================================
   Area personale — /personale.htm (22/10/2026)
   Testata scura (come Piani e Diventa autore) con saluto, profilo,
   scorciatoie e la card del piano; avvisi in un posto solo; web app attive
   grandi nel loro colore, le altre a righe; ordini e suggeriti in fondo.
   =========================================================================== */

.ic-pa-testa {
    position: relative;
    overflow: hidden;
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 2.75rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(45rem 25rem at 95% 0%, rgba(42, 127, 147, .75), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(42, 127, 147, .3), transparent 70%),
        #0f2b4a;
}

.ic-pa-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000, transparent 90%);
    pointer-events: none;
}

.ic-pa-testa > .container-xl { position: relative; }

.ic-pa-testa__griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.ic-pa-testa .ic-da-badge .ic-ico { width: .85rem; height: .85rem; }

.ic-pa-chi { min-width: 0; }

.ic-pa-chi__saluto {
    margin: .9rem 0 .35rem;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.ic-pa-chi__profilo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    margin: 0;
    font-size: 1.0625rem;
}

.ic-pa-chi__tipo {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .14);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ic-pa-chi__tipo .ic-ico { width: .9rem; height: .9rem; }

.ic-pa-chi__ruolo {
    color: rgba(255, 255, 255, .65);
    font-size: .875rem;
}

.ic-pa-chi__account {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .65);
    font-size: .875rem;
}

.ic-pa-chi__crea {
    max-width: 36rem;
    margin-top: 1.1rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
}

.ic-pa-chi__crea p {
    margin: 0 0 .85rem;
    color: rgba(255, 255, 255, .85);
    font-size: .9375rem;
}

.ic-pa-scorciatoie {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.4rem;
}

.ic-pa-scorciatoie a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ic-transizione), border-color var(--ic-transizione), transform var(--ic-transizione);
}

.ic-pa-scorciatoie a:hover,
.ic-pa-scorciatoie a:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .4);
    transform: translateY(-1px);
}

.ic-pa-scorciatoie .ic-ico { width: 1rem; height: 1rem; opacity: .85; }
.ic-pa-scorciatoie .ic-pallino { margin-left: 0; }

/* --- la card del piano ---------------------------------------------------- */

.ic-pa-piano {
    padding: 1.35rem 1.4rem 1.4rem;
    border-radius: 18px;
    background: var(--ic-bianco);
    color: var(--ic-nero);
    box-shadow: 0 18px 40px -18px rgba(5, 20, 40, .55);
}

.ic-pa-piano__etichetta {
    margin: 0 0 .35rem;
    color: var(--ic-grigio-600);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ic-pa-piano__nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .9rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ic-pa-piano__tempo {
    margin: .45rem 0 0;
    color: var(--ic-grigio-600);
    font-size: .8125rem;
}

.ic-pa-piano__tempo strong { color: var(--ic-nero); }

.ic-pa-piano__nota {
    margin: 0 0 1rem;
    color: var(--ic-grigio-600);
    font-size: .875rem;
}

.ic-pa-piano__dati {
    display: flex;
    gap: 1.75rem;
    margin: 1rem 0 1.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--ic-grigio-200);
}

.ic-pa-piano__dati dt {
    color: var(--ic-grigio-600);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ic-pa-piano__dati dd { margin: .15rem 0 0; font-weight: 600; }

.ic-pa-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .7rem 1rem;
    border-radius: 12px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ic-transizione);
}

.ic-pa-bottone:hover { background: var(--ic-blu-scuro); color: var(--ic-bianco); }

.ic-pa-bottone .ic-ico { width: .85rem; height: .85rem; transition: transform var(--ic-transizione); }
.ic-pa-bottone:hover .ic-ico { transform: translateX(3px); }

.ic-pa-bottone--chiaro {
    width: auto;
    background: var(--ic-bianco);
    color: #0f2b4a;
}

.ic-pa-bottone--chiaro:hover { background: var(--ic-blu-tinta); color: #0f2b4a; }

/* --- il corpo ---------------------------------------------------------------- */

.ic-pa-corpo {
    padding: 2rem 0 4rem;
    background: var(--ic-grigio-100);
}

.ic-pa-avvisi {
    display: grid;
    gap: .6rem;
    margin-bottom: 1.75rem;
}

.ic-pa-avviso {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
    border: 1px solid var(--ic-grigio-200);
    border-left: 4px solid var(--ic-blu);
    border-radius: 12px;
    background: var(--ic-bianco);
    box-shadow: 0 6px 18px -12px rgba(15, 43, 74, .35);
}

.ic-pa-avviso__icona {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}

.ic-pa-avviso__icona .ic-ico { width: 1rem; height: 1rem; }

.ic-pa-avviso__testo {
    flex: 1 1 auto;
    margin: 0;
    font-size: .9375rem;
    color: var(--ic-grigio-900);
}

.ic-pa-avviso__azione {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    color: var(--ic-blu);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ic-pa-avviso__azione .ic-ico { width: .75rem; height: .75rem; transition: transform var(--ic-transizione); }
.ic-pa-avviso__azione:hover .ic-ico { transform: translateX(3px); }

.ic-pa-avviso--festa { border-left-color: #2e9b5b; }
.ic-pa-avviso--festa .ic-pa-avviso__icona { background: #e6f4ec; color: #1c6b3f; }
.ic-pa-avviso--ok { border-left-color: #2e9b5b; }
.ic-pa-avviso--ok .ic-pa-avviso__icona { background: #e6f4ec; color: #1c6b3f; }
.ic-pa-avviso--attenzione { border-left-color: #d08a12; }
.ic-pa-avviso--attenzione .ic-pa-avviso__icona { background: #fdf1dc; color: #8a5a00; }

/* --- le web app --------------------------------------------------------------- */

.ic-pa-sezione { margin-bottom: 2.25rem; }

.ic-pa-sezione__testa {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin-bottom: 1rem;
}

.ic-pa-sezione__titolo {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ic-pa-sezione__conteggio {
    padding: .15rem .6rem;
    border-radius: 100px;
    background: #e6f4ec;
    color: #1c6b3f;
    font-size: .75rem;
    font-weight: 700;
}

.ic-pa-sezione__sottotitolo {
    margin: 1.75rem 0 .75rem;
    color: var(--ic-grigio-600);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ic-pa-app-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1.1rem;
}

.ic-pa-app {
    --tinta: var(--ic-blu);
    position: relative;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 18px;
    background: var(--ic-bianco);
}

.ic-pa-app--attiva {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 28px -18px rgba(15, 43, 74, .45);
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-pa-app--attiva:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(15, 43, 74, .5);
}

.ic-pa-app__fascia {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 6.25rem;
    padding: 1.1rem 1.2rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tinta), color-mix(in srgb, var(--tinta) 70%, #0f2b4a));
    color: var(--ic-bianco);
}

.ic-pa-app__fascia .ic-pa-app__icona {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    color: var(--ic-bianco);
}

.ic-pa-app__icona {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tinta) 13%, #fff);
    color: color-mix(in srgb, var(--tinta) 62%, #000);
}

.ic-pa-app__icona svg { width: 45%; height: 45%; }

.ic-pa-app__filigrana {
    position: absolute;
    right: -1.25rem;
    bottom: -2.25rem;
    width: 8rem;
    height: 8rem;
    opacity: .14;
    transform: rotate(-12deg);
    pointer-events: none;
}

.ic-pa-app__filigrana svg { width: 100%; height: 100%; }

.ic-pa-app__stato {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .2);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ic-pa-app__stato .ic-ico { width: .75rem; height: .75rem; }

.ic-pa-app__corpo { flex: 1 1 auto; padding: 1.1rem 1.2rem .5rem; }

.ic-pa-app__nome {
    margin: 0 0 .35rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.ic-pa-app__descrizione {
    margin: 0;
    color: var(--ic-grigio-600);
    font-size: .875rem;
    line-height: 1.5;
}

.ic-pa-app__limite {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    padding: .25rem .6rem;
    border-radius: 8px;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-900);
    font-size: .75rem;
    font-weight: 600;
}

.ic-pa-app__limite .ic-ico { width: .8rem; height: .8rem; color: var(--ic-grigio-600); }

.ic-pa-app__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.2rem 1.1rem;
}

.ic-pa-app__piede form { margin: 0; }

.ic-pa-app__apri {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.15rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tinta) 62%, #000);
    color: var(--ic-bianco);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--ic-transizione);
}

.ic-pa-app__apri:hover { color: var(--ic-bianco); filter: brightness(.9); }
.ic-pa-app__apri .ic-ico { width: .8rem; height: .8rem; transition: transform var(--ic-transizione); }
.ic-pa-app__apri:hover .ic-ico { transform: translateX(3px); }

.ic-pa-app__spegni {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ic-grigio-600);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--ic-transizione), background var(--ic-transizione);
}

.ic-pa-app__spegni:hover { background: #fbeaea; color: #b42318; }
.ic-pa-app__spegni .ic-ico { width: .75rem; height: .75rem; }

/* --- le altre: a righe, piu' tenui --------------------------------------------- */

.ic-pa-altre {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: .75rem;
}

.ic-pa-app--riga {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1rem;
}

.ic-pa-app--riga .ic-pa-app__corpo { padding: 0; min-width: 0; }
.ic-pa-app--riga .ic-pa-app__nome { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .15rem; font-size: 1rem; }
.ic-pa-app--riga .ic-pa-app__descrizione { font-size: .8125rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ic-pa-app--riga form { margin: 0; flex: 0 0 auto; }

.ic-pa-app__etichetta {
    padding: .1rem .5rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-600);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ic-pa-app--attivabile .ic-pa-app__etichetta { background: var(--ic-blu-tinta); color: var(--ic-blu-scuro); }

.ic-pa-app--spenta { background: rgba(255, 255, 255, .6); }
.ic-pa-app--spenta .ic-pa-app__icona { filter: grayscale(1); opacity: .6; }
.ic-pa-app--spenta .ic-pa-app__nome { color: var(--ic-grigio-600); }

.ic-pa-app__attiva,
.ic-pa-app__piani {
    flex: 0 0 auto;
    padding: .45rem .9rem;
    border-radius: 10px;
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ic-pa-app__attiva { border: 0; background: color-mix(in srgb, var(--tinta) 62%, #000); color: var(--ic-bianco); cursor: pointer; }
.ic-pa-app__attiva:hover { filter: brightness(.9); }
.ic-pa-app__piani { border: 1px solid var(--ic-grigio-200); background: var(--ic-bianco); color: var(--ic-blu); }
.ic-pa-app__piani:hover { border-color: var(--ic-blu); }

/* --- fondo ------------------------------------------------------------------- */

.ic-pa-fondo .ic-pannello__titolo .ic-ico {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
    stroke: none;
    color: var(--ic-blu);
}

/* --- tablet e telefono ------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ic-pa-testa__griglia { grid-template-columns: minmax(0, 1fr); }
    .ic-pa-piano { max-width: 32rem; }
}

@media (max-width: 575.98px) {
    .ic-pa-chi__saluto { font-size: 1.75rem; margin-top: .7rem; }
    .ic-pa-chi__account { display: none; }
    /* le scorciatoie su una riga sola che scorre: la testata non deve spingere giu' le web app */
    .ic-pa-scorciatoie {
        flex-wrap: nowrap;
        margin: 1rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 0;
        padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ic-pa-scorciatoie::-webkit-scrollbar { display: none; }
    .ic-pa-scorciatoie a { flex: 0 0 auto; padding: .45rem .8rem; font-size: .8125rem; white-space: nowrap; }
    .ic-pa-piano { padding: 1rem 1.1rem; }
    .ic-pa-piano__nome { margin-bottom: .6rem; font-size: 1.15rem; }
    .ic-pa-piano__dati { margin: .75rem 0 .8rem; padding-top: .7rem; }
    .ic-pa-bottone { padding: .6rem .9rem; font-size: .875rem; }
    .ic-pa-altre { grid-template-columns: 1fr; }
    .ic-pa-avviso { flex-wrap: wrap; }
    .ic-pa-avviso__azione { margin-left: 3.15rem; }
}

/* --- area personale: acquisti e suggeriti (22/10/2026) -------------------------- */

.ic-pa-sezione__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    color: var(--ic-blu);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ic-pa-sezione__link .ic-ico { width: .75rem; height: .75rem; transition: transform var(--ic-transizione); }
.ic-pa-sezione__link:hover .ic-ico { transform: translateX(3px); }

.ic-pa-sezione__titolo { display: inline-flex; align-items: center; gap: .55rem; }
.ic-pa-sezione__ico { width: 1.1rem; height: 1.1rem; color: var(--ic-blu); }

.ic-pa-numeri {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 1rem;
}

.ic-pa-numero {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: .9rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 18px;
    background: var(--ic-bianco);
    box-shadow: 0 10px 28px -20px rgba(15, 43, 74, .45);
}

.ic-pa-numero__icona {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
}

.ic-pa-numero__icona .ic-ico { width: 1.1rem; height: 1.1rem; }

.ic-pa-numero__valore {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}

.ic-pa-numero__etichetta {
    color: var(--ic-grigio-600);
    font-size: .8125rem;
}

.ic-pa-numero__titolo { font-size: 1.0625rem; font-weight: 700; }

.ic-pa-numero--invito {
    overflow: hidden;
    border-color: transparent;
    background:
        radial-gradient(18rem 10rem at 100% 0%, rgba(42, 127, 147, .7), transparent 70%),
        #0f2b4a;
    color: var(--ic-bianco);
    text-decoration: none;
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-pa-numero--invito:hover {
    color: var(--ic-bianco);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -18px rgba(15, 43, 74, .6);
}

.ic-pa-numero--invito .ic-pa-numero__icona { background: rgba(255, 255, 255, .15); color: var(--ic-bianco); }
.ic-pa-numero--invito .ic-pa-numero__etichetta { color: rgba(255, 255, 255, .75); }

.ic-pa-numero__freccia {
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    transition: transform var(--ic-transizione);
}

.ic-pa-numero__freccia .ic-ico { width: .9rem; height: .9rem; }
.ic-pa-numero--invito:hover .ic-pa-numero__freccia { transform: translate(4px, -50%); }

/* ordini recenti: righe cliccabili */
.ic-pa-ordini {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 18px;
    background: var(--ic-bianco);
    overflow: hidden;
}

.ic-pa-ordini li + li { border-top: 1px solid var(--ic-grigio-200); }

.ic-pa-ordini a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.2rem;
    color: inherit;
    text-decoration: none;
    transition: background var(--ic-transizione);
}

.ic-pa-ordini a:hover { background: var(--ic-blu-tinta); }

.ic-pa-ordini__icona {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-600);
}

.ic-pa-ordini__icona .ic-ico { width: .9rem; height: .9rem; }

.ic-pa-ordini__testo { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.ic-pa-ordini__testo strong { font-size: .9375rem; }
.ic-pa-ordini__testo span { color: var(--ic-grigio-600); font-size: .8125rem; }

.ic-pa-ordini__totale {
    padding: .2rem .65rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    font-size: .8125rem;
    font-weight: 700;
}

.ic-pa-ordini__totale--gratis { background: #e6f4ec; color: #1c6b3f; }

.ic-pa-ordini__azione {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ic-blu);
    font-size: .8125rem;
    font-weight: 600;
}

.ic-pa-ordini__azione .ic-ico { width: .7rem; height: .7rem; transition: transform var(--ic-transizione); }
.ic-pa-ordini a:hover .ic-pa-ordini__azione .ic-ico { transform: translateX(3px); }

/* suggeriti: card cliccabili */
.ic-pa-suggeriti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
}

.ic-pa-doc {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 18px;
    background: var(--ic-bianco);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 28px -22px rgba(15, 43, 74, .45);
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-pa-doc:hover {
    color: inherit;
    border-color: rgba(42, 127, 147, .35);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -20px rgba(15, 43, 74, .5);
}

.ic-pa-doc__copertina {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 12px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
    font-size: 1.5rem;
    font-weight: 700;
    object-fit: cover;
}

.ic-pa-doc__testo { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }

.ic-pa-doc__sezione {
    color: var(--ic-blu);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ic-pa-doc__titolo {
    display: -webkit-box;
    margin: .2rem 0 .6rem;
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ic-pa-doc__piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.ic-pa-doc__prezzo {
    padding: .15rem .6rem;
    border-radius: 100px;
    background: var(--ic-grigio-100);
    font-size: .75rem;
    font-weight: 700;
}

.ic-pa-doc__prezzo--gratis { background: #e6f4ec; color: #1c6b3f; }

.ic-pa-doc__vedi {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--ic-blu);
    font-size: .8125rem;
    font-weight: 600;
}

.ic-pa-doc__vedi .ic-ico { width: .7rem; height: .7rem; transition: transform var(--ic-transizione); }
.ic-pa-doc:hover .ic-pa-doc__vedi .ic-ico { transform: translateX(3px); }

@media (max-width: 767.98px) {
    .ic-pa-numeri { grid-template-columns: 1fr 1fr; }
    .ic-pa-numero--invito { grid-column: 1 / -1; }
    .ic-pa-ordini__azione { display: none; }
    .ic-pa-sezione__testa { flex-wrap: wrap; }
}

/* --- Area personale: tessere Ordini / Documenti cliccabili (22/10/2026) ----- */

.ic-pa-numero--link {
    color: inherit;
    text-decoration: none;
    transition: transform var(--ic-transizione), box-shadow var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-pa-numero--link:hover {
    color: inherit;
    border-color: rgba(42, 127, 147, .45);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -20px rgba(15, 43, 74, .5);
}

.ic-pa-numero--link .ic-pa-numero__freccia { color: var(--ic-blu); }
.ic-pa-numero--link:hover .ic-pa-numero__freccia { transform: translate(4px, -50%); }

/* --- I miei ordini e documenti: salti alle due sezioni ---------------------- */

.ic-ordini-salti {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.ic-ordini-salti a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--ic-grigio-200);
    background: var(--ic-bianco);
    color: var(--ic-nero, #111112);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ic-transizione);
}

.ic-ordini-salti a:hover { border-color: var(--ic-blu); color: var(--ic-blu); }

.ic-ordini-salti span {
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
    font-size: .75rem;
}

.ic-ordini-sezione { scroll-margin-top: 6rem; }
.ic-ordini-sezione + .ic-ordini-sezione { margin-top: 3rem; }

.ic-ordini-sezione__titolo {
    margin-bottom: 1rem;
    font-size: 1.375rem;
    font-weight: 700;
}

/* ===========================================================================
   Piè di pagina scuro, a tutta larghezza e sottile (22/10/2026)
   ---------------------------------------------------------------------------
   Blu notte, da bordo a bordo anche nei contenuti (niente container): una
   riga con logo e link, una riga con copyright, frase e note legali.
   =========================================================================== */
.ic-footer {
    width: 100%;
    background: #0b2038;
    color: rgba(255, 255, 255, .6);
    padding: 1.1rem clamp(1rem, 3vw, 2.5rem) .9rem;
    font-size: .8125rem;
}

.ic-footer a {
    color: rgba(255, 255, 255, .86);
    text-decoration: none;
    transition: color var(--ic-transizione);
}

.ic-footer a:hover { color: var(--ic-bianco); }

.ic-footer__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
}

.ic-footer__marchio { display: inline-flex; flex-shrink: 0; }

.ic-footer__link { margin-left: auto; }

.ic-footer__link,
.ic-footer__legale {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
}

.ic-footer__fondo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .45);
    font-size: .75rem;
}

.ic-footer__legale a { color: rgba(255, 255, 255, .6); }

/* ===========================================================================
   Area personale: filigrana a tema sicurezza (22/10/2026)
   ---------------------------------------------------------------------------
   La stessa delle web app (scudi, caschi, estintori...), qui in grigio
   neutro sul fondo grigio chiaro. Sta dietro alle card, sfuma verso l'alto.
   =========================================================================== */
.ic-pa-corpo {
    position: relative;
    isolation: isolate;
}

.ic-pa-corpo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/img/filigrana-sicurezza.svg") 0 0 / 460px 460px repeat;
    opacity: .07;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 260px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 260px);
    pointer-events: none;
}

/* ===========================================================================
   Filigrana a tema sicurezza per le parti chiare (22/10/2026)
   ---------------------------------------------------------------------------
   La stessa dell'area personale (.ic-pa-corpo), riusabile: basta la classe
   .ic-filigrana sulla sezione. Grigio neutro, dietro ai contenuti.
   --ic-filigrana-forza regola l'intensita' (piu' bassa sul bianco).
   =========================================================================== */
.ic-filigrana {
    --ic-filigrana-forza: .07;
    position: relative;
    isolation: isolate;
}

.ic-filigrana::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/assets/img/filigrana-sicurezza.svg") 0 0 / 460px 460px repeat;
    opacity: var(--ic-filigrana-forza);
    pointer-events: none;
}

.ic-filigrana--bianca { --ic-filigrana-forza: .06; background: var(--ic-bianco); }

/* ===========================================================================
   Pagina delle web app (/app.htm) nello stile dell'area personale (22/10/2026)
   =========================================================================== */

/* Testata blu notte, come l'area personale: testo a sinistra, vetrina a
   destra, il piu' raccolta possibile. */
.ic-suite-testa {
    position: relative;
    overflow: hidden;
    padding-block: 1.25rem clamp(2rem, 4vw, 3rem);
    color: var(--ic-bianco);
    background:
        radial-gradient(45rem 25rem at 95% 0%, rgba(42, 127, 147, .75), transparent 70%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(42, 127, 147, .3), transparent 70%),
        #0f2b4a;
}

.ic-suite-testa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%);
            mask-image: linear-gradient(180deg, #000, transparent 90%);
    pointer-events: none;
}

.ic-suite-testa > .container-xl { position: relative; }

.ic-suite-testa__griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

.ic-suite-testa__titolo {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.ic-suite-testa__testo {
    max-width: 34rem;
    margin: .85rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.ic-suite-testa__nota {
    margin: .7rem 0 0;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .6);
}

.ic-suite-testa .ic-bottone { padding: .75rem 1.6rem; }

.ic-suite-testa__vetrina { padding-bottom: 1rem; }
.ic-suite-testa__vetrina .ic-ap-vetrina__telefono { right: -.5rem; bottom: -.5rem; width: 23%; min-width: 6.5rem; }

@media (max-width: 991px) {
    .ic-suite-testa__griglia { grid-template-columns: minmax(0, 1fr); }
    .ic-suite-testa__vetrina { max-width: 36rem; }
}

.ic-suite-carte { --ic-filigrana-forza: .06; background: var(--ic-bianco); }

/* Le tre app, nei loro colori, sopra il titolo */
.ic-suite-app {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}

.ic-suite-app__voce {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .85rem .3rem .3rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-suite-app__voce:hover {
    color: var(--ic-bianco);
    border-color: var(--ic-ap-colore);
    background: color-mix(in srgb, var(--ic-ap-colore) 30%, transparent);
}

.ic-suite-app__ico {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--ic-ap-colore);
}

.ic-suite-app__ico .ic-ico { width: .85rem; height: .85rem; }

/* Le carte: la fascia in alto nel colore dell'app, come le web app attive
   dell'area personale, con la schermata appoggiata sopra. */
.ic-suite-carta {
    border-radius: 18px;
    box-shadow: 0 10px 28px -18px rgba(15, 43, 74, .45);
}

.ic-suite-carta:hover { box-shadow: 0 18px 36px -18px rgba(15, 43, 74, .5); }

.ic-suite-carta .ic-ap-carta__foto {
    position: relative;
    padding: 1.25rem 1.25rem 0;
    background:
        radial-gradient(20rem 12rem at 100% 0%, rgba(255, 255, 255, .22), transparent 70%),
        linear-gradient(135deg, var(--ic-ap-colore), color-mix(in srgb, var(--ic-ap-colore) 70%, #0f2b4a));
}

.ic-suite-carta .ic-ap-carta__foto img { box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }

.ic-suite-carta__vai {
    align-self: flex-start;
    padding: .6rem 1.1rem;
    border-radius: 10px;
    background: var(--ic-ap-azione, var(--ic-ap-colore));
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
    transition: background var(--ic-transizione);
}

.ic-suite-carta:hover .ic-suite-carta__vai { background: color-mix(in srgb, var(--ic-ap-azione, var(--ic-ap-colore)) 80%, #0f2b4a); }

/* Ciclo e principi: stessi bordi e ombre delle card dell'area personale */
.ic-cs-fascia .ic-ap-ciclo li,
.ic-cs-fascia .ic-cs-principio {
    border-radius: 18px;
    box-shadow: 0 10px 28px -20px rgba(15, 43, 74, .45);
}

/* L'invito finale: blu notte come la testata e la tessera "Esplora il catalogo". */
.ic-suite-invito {
    border-radius: 20px;
    background:
        radial-gradient(28rem 14rem at 100% 0%, rgba(42, 127, 147, .7), transparent 70%),
        #0f2b4a;
}

/* Pagine delle singole web app: filigrana come su /app.htm, solo nelle parti
   bianche (22/10/2026). */
.ic-ap-pagina.ic-filigrana { --ic-filigrana-forza: .06; }

/* ===========================================================================
   Telefono: tutto un po' piu' raccolto, niente "pile" (23/10/2026)
   ---------------------------------------------------------------------------
   Richiesta del PM: sotto i 576px titoli e bottoni erano dimensionati quasi
   come da computer, e ogni cosa andava a capo da sola (chip delle web app su
   due righe, bottoni uno sotto l'altro). Qui si scala tutto un gradino sotto
   e i gruppi di bottoni stanno affiancati, dividendosi la riga.
   =========================================================================== */
@media (max-width: 575.98px) {
    .ic-hero__titolo,
    .ic-suite-testa__titolo,
    .ic-cs-hero__titolo,
    .ic-ap-hero__titolo,
    .ic-ap-testa__titolo,
    .ic-arrivo__titolo,
    .ic-da-titolo,
    .ic-da-titolo--compatto {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    .ic-cs-titolo,
    .ic-titolo-sezione,
    .ic-menu__titolo,
    .ic-ap-funzione__titolo,
    .ic-cat-testa__titolo {
        font-size: 1.3rem;
    }

    .ic-cs-hero__testo,
    .ic-ap-hero__testo,
    .ic-suite-testa__testo {
        font-size: .875rem;
        line-height: 1.55;
    }

    .ic-bottone,
    .ic-suite-testa .ic-bottone {
        padding: .65rem 1rem;
        font-size: .875rem;
    }

    /* Bottoni di un gruppo: affiancati, ognuno con la sua parte di riga. */
    .d-flex.flex-wrap > .ic-bottone {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: .5rem;
        font-size: .8125rem;
        text-align: center;
        white-space: nowrap;
    }

    /* Le 3 web app sopra il titolo: una riga sola. */
    .ic-suite-app {
        flex-wrap: nowrap;
        gap: .35rem;
        margin-bottom: .85rem;
    }

    .ic-suite-app__voce {
        min-width: 0;
        gap: .35rem;
        padding: .2rem .6rem .2rem .2rem;
        font-size: .78rem;
        white-space: nowrap;
    }

    .ic-suite-app__ico {
        width: 1.4rem;
        height: 1.4rem;
    }

    .ic-suite-app__ico .ic-ico {
        width: .7rem;
        height: .7rem;
    }
}

/* ---------------------------------------------------------------------------
   Home: il mosaico diventa uno slider sul telefono (23/10/2026)
   Le tre tessere una sotto l'altra facevano scendere la pagina per quasi due
   schermate prima di arrivare al catalogo. Qui scorrono di lato, tutte alte
   uguali, con la successiva che si intravede (si capisce che si scorre) e i
   pallini sotto. Niente scorrimento automatico: lo decide chi guarda.
   --------------------------------------------------------------------------- */
.ic-mosaico__punti { display: none; }

@media (max-width: 575.98px) {
    .ic-mosaico {
        display: flex;
        gap: .75rem;
        /* a tutta larghezza dello schermo, qualunque sia il margine del contenitore */
        width: 100vw;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .ic-mosaico::-webkit-scrollbar { display: none; }

    .ic-mosaico__colonna { display: contents; }

    .ic-mosaico .ic-tessera,
    .ic-mosaico .ic-tessera--grande,
    .ic-mosaico__colonna .ic-tessera {
        flex: 0 0 82vw;
        height: 17.5rem;
        min-height: 0;
        scroll-snap-align: center;
    }

    .ic-mosaico .ic-tessera:hover { transform: none; }

    /* Giro continuo (mosaico.js): la tessera al centro piena, le vicine un
       po' piu' piccole e velate ai lati. */
    .ic-mosaico.is-giro {
        padding-inline: 9vw;
        scroll-padding-inline: 0;
    }

    .ic-mosaico.is-giro .ic-tessera {
        transform: scale(.92);
        opacity: .65;
        transition: transform .35s ease, opacity .35s ease;
    }

    .ic-mosaico.is-giro .ic-tessera.is-centro {
        transform: none;
        opacity: 1;
    }

    /* Durante il salto invisibile da una copia alla vera: niente animazioni ne' aggancio. */
    .ic-mosaico.is-salto { scroll-snap-type: none; scroll-behavior: auto; }
    .ic-mosaico.is-salto .ic-tessera { transition: none; }

    /* La tessera delle web app: testo compatto, sotto una striscia di schermata. */
    .ic-tessera--app .ic-tessera__testo {
        padding: 1rem 1rem .75rem;
        gap: .25rem;
    }

    .ic-tessera--app .ic-tessera__titolo { font-size: 1.2rem; }

    .ic-tessera--app .ic-tessera__nota {
        font-size: .8125rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ic-tessera__app {
        flex-wrap: nowrap;
        gap: .3rem;
        margin-top: .35rem;
    }

    .ic-tessera__app > span {
        padding: .15rem .5rem .15rem .15rem;
        font-size: .72rem;
        white-space: nowrap;
    }

    .ic-tessera__app i { width: 1.2rem; height: 1.2rem; }

    .ic-tessera--app .ic-bottone.mt-3 { margin-top: .6rem !important; }

    .ic-tessera__schermate { flex: 1 1 auto; min-height: 0; }

    .ic-tessera__desktop { width: 110%; }

    .ic-tessera__telefono { width: 22%; bottom: -5rem; }

    .ic-tessera--catalogo .ic-tessera__titolo--piccolo,
    .ic-tessera--rspp .ic-tessera__titolo--piccolo { font-size: 1rem; }

    .ic-mosaico__punti {
        display: flex;
        justify-content: center;
        gap: .4rem;
        margin-top: .6rem;
    }

    .ic-mosaico__punti button {
        width: .5rem;
        height: .5rem;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--ic-grigio-300, #c9c9cd);
        transition: width .2s ease, background-color .2s ease;
    }

    .ic-mosaico__punti button.is-attivo {
        width: 1.25rem;
        background: var(--ic-blu, #2a7f93);
    }
}

/* ---------------------------------------------------------------------------
   Home: le 5 azioni rapide (23/10/2026)
   Icone FontAwesome al posto dei caratteri di testo. Sul telefono le cinque
   stanno su una riga sola, come le scorciatoie di un'app: icona in un
   quadrato blu, nome piccolo sotto. Prima erano cinque bottoni blu pieni su
   tre righe, che pesavano piu' delle tessere sopra.
   --------------------------------------------------------------------------- */
.ic-azione__icona svg {
    display: block;
    width: 1.05rem;
    height: 1.05rem;
}

@media (max-width: 575.98px) {
    .ic-azioni {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .25rem;
        margin-top: .9rem;
    }

    .ic-azione,
    .ic-azione:hover {
        flex-direction: column;
        justify-content: flex-start;
        gap: .4rem;
        padding: .35rem .1rem;
        background: transparent;
        color: var(--ic-grigio-900, #2b2b2e);
        box-shadow: none;
        transform: none;
        font-size: .6875rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
    }

    .ic-azione__icona {
        display: grid;
        place-items: center;
        width: 2.9rem;
        height: 2.9rem;
        border-radius: 1rem;
        background: var(--ic-blu, #2a7f93);
        color: var(--ic-bianco, #fff);
        box-shadow: 0 4px 12px rgba(42, 127, 147, .3);
        transition: transform 160ms ease;
    }

    .ic-azione:active .ic-azione__icona { transform: scale(.94); }

    .ic-azione__icona svg {
        width: 1.15rem;
        height: 1.15rem;
    }
}

/* ---------------------------------------------------------------------------
   Home su tablet (576-991px, 23/10/2026)
   Segnalazione del PM: a meta' strada fra telefono e computer i testi delle
   tessere e delle azioni rapide andavano a capo parola per parola.
   - Catalogo: il testo prendeva il 54% della tessera e poi perdeva un altro
     40% di margine per far posto al ventaglio: restava una colonnina. Ora
     ha il 60% pieno e il ventaglio sta nel resto.
   - Azioni rapide: come sul telefono, icona sopra e nome sotto, su una riga
     sola, mai a capo; restano blu piene perche' qui c'e' spazio.
   --------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ic-tessera--catalogo .ic-tessera__testo {
        max-width: 60%;
        padding-right: 1rem;
    }

    .ic-ventaglio {
        right: .75rem;
        width: 38%;
    }

    .ic-tessera__titolo--piccolo {
        font-size: .9375rem;
    }

    .ic-azioni {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .6rem;
    }

    .ic-azione,
    .ic-azione:hover {
        flex-direction: column;
        justify-content: flex-start;
        gap: .45rem;
        padding: .85rem .25rem .75rem;
        font-size: .8125rem;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

    .ic-azione:hover { transform: translateY(-2px); }

    .ic-azione__icona svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ---------------------------------------------------------------------------
   Chip delle categorie su telefono e tablet (23/10/2026)
   Segnalazione del PM (pagina Cerca): i nomi lunghi ("SICUREZZA ALIMENTARE",
   "SICUREZZA SETTORIALE") spingevano fuori il numero, che veniva tagliato.
   Ora il nome ha il suo spazio e, se serve, va su due righe; il numero resta
   sempre intero a destra, e le chip sono tutte alte uguali.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ic-nastro .ic-pillola {
        min-height: 3rem;
        padding: .45rem .55rem .45rem .75rem;
        white-space: normal;
        overflow: visible;
        letter-spacing: 0;
        line-height: 1.2;
        font-size: .6875rem;
    }

    .ic-pillola__nome {
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .ic-nastro .ic-filtri__numero {
        flex-shrink: 0;
        padding: .1rem .4rem;
        font-size: .6875rem;
    }
}

/* ---------------------------------------------------------------------------
   Il footer sempre in fondo (23/10/2026, richiesta del PM)
   - Pagine corte: il contenuto si allunga e il footer tocca il fondo dello
     schermo, invece di lasciare una fascia vuota sotto.
   - Telefono e tablet: lo spazio per la barra app in basso non e' piu' un
     margine bianco della pagina ma parte del footer, cosi' il blu notte
     arriva fino al bordo dello schermo, dietro la barra.
   Solo nel layout del sito (body.ic-sito): pannello e area autori no.
   --------------------------------------------------------------------------- */
body.ic-sito {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body.ic-sito > main {
    flex: 1 0 auto;
}

body.ic-sito > .ic-footer {
    flex-shrink: 0;
}

@media (max-width: 991px) {
    body.ic-sito {
        padding-bottom: 0;
    }

    body.ic-sito > .ic-footer {
        padding-bottom: calc(.9rem + 4.5rem + env(safe-area-inset-bottom));
    }
}

/* ---------------------------------------------------------------------------
   Mai piu' larga dello schermo (23/10/2026)
   Segnalazione del PM: su telefono, scorrendo, l'header e la barra in basso
   sembravano "tagliati". La causa: la pagina era 14px piu' larga dello
   schermo (Diventa autore), e il telefono la lasciava spostare di lato,
   portandosi dietro header e barra. Il colpevole erano le righe Bootstrap con
   spaziatura g-5 (3rem): i loro margini negativi superano il bordo del
   contenitore. Sul telefono la spaziatura orizzontale scende a quella
   standard; e in ogni caso niente puo' piu' allargare la pagina.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .row.g-5,
    .row.gx-5,
    .row.g-4,
    .row.gx-4 {
        --bs-gutter-x: 1.5rem;
    }
}

/* clip e non hidden: hidden su html e body insieme farebbe del body un
   contenitore che scorre, e l'header "sticky" smetterebbe di restare in alto. */
body.ic-sito {
    overflow-x: clip;
}

/* ===========================================================================
   Carrello ridisegnato (23/10/2026)
   =========================================================================== */
.ic-cr-ico { width: 1em; height: 1em; flex-shrink: 0; }

.ic-cr-testa {
    padding-block: 1.25rem 1.5rem;
    background: linear-gradient(180deg, var(--ic-blu-tinta), var(--ic-bianco));
}

.ic-cr-testa__titolo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .75rem;
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.ic-cr-testa__conta {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
    letter-spacing: 0;
}

.ic-cr { padding-block: .5rem var(--ic-spazio); }

.ic-cr-griglia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
    align-items: start;
}

/* --- le righe --- */
.ic-cr-elenco {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ic-cr-riga {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    background: var(--ic-bianco);
    box-shadow: 0 1px 3px rgba(17, 17, 18, .05);
    transition: box-shadow var(--ic-transizione), border-color var(--ic-transizione);
}

.ic-cr-riga:hover {
    border-color: rgba(42, 127, 147, .35);
    box-shadow: 0 8px 22px -14px rgba(15, 43, 74, .35);
}

.ic-cr-riga__figura {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--ic-grigio-100);
    color: var(--ic-grigio-400);
    font-size: 1.5rem;
}

.ic-cr-riga__figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ic-cr-riga__testo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.ic-cr-riga__sezione {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ic-grigio-600);
}

.ic-cr-riga__titolo {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-nero);
}

.ic-cr-riga__titolo:hover { color: var(--ic-blu-scuro); opacity: 1; }

.ic-cr-riga__prezzo {
    margin-top: .2rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ic-blu-scuro);
}

.ic-cr-riga__gratis {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 100px;
    background: #e6f4ec;
    color: #1c6b3f;
    font-size: .75rem;
    font-weight: 600;
}

.ic-cr-riga__togli { margin: 0; }

.ic-cr-riga__togli button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ic-grigio-400);
    font-size: .95rem;
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-cr-riga__togli button:hover,
.ic-cr-riga__togli button:focus-visible {
    background: #fdecea;
    color: #b3261e;
}

/* --- il riepilogo --- */
.ic-cr-riepilogo {
    position: sticky;
    top: 5.5rem;
    padding: 1.25rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    background: var(--ic-bianco);
    box-shadow: 0 14px 36px -24px rgba(15, 43, 74, .45);
}

.ic-cr-riepilogo__titolo {
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.ic-cr-riepilogo__voci { margin: 0; }

.ic-cr-riepilogo__voci > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-block: .4rem;
    font-size: .875rem;
    color: var(--ic-grigio-600);
}

.ic-cr-riepilogo__voci dt { font-weight: 500; }
.ic-cr-riepilogo__voci dd { margin: 0; font-weight: 600; color: var(--ic-grigio-900); }

.ic-cr-riepilogo__totale {
    margin-top: .35rem;
    padding-top: .75rem !important;
    border-top: 1px dashed var(--ic-grigio-200);
}

.ic-cr-riepilogo__totale dt { font-size: 1rem; font-weight: 700; color: var(--ic-nero); }
.ic-cr-riepilogo__totale dd { font-size: 1.5rem; font-weight: 700; color: var(--ic-nero); letter-spacing: -.02em; }

.ic-cr-riepilogo__nota {
    margin: .75rem 0 1rem;
    padding: .65rem .8rem;
    border-radius: .65rem;
    background: var(--ic-grigio-100);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ic-grigio-600);
}

.ic-cr-riepilogo__azioni {
    display: grid;
    gap: .5rem;
    text-align: center;
}

.ic-cr-riepilogo__azioni .ic-bottone { gap: .5rem; padding-block: .85rem; }

.ic-cr-riepilogo__continua {
    padding: .4rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ic-blu);
}

.ic-cr-riepilogo__sicuro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .75rem 0 0;
    font-size: .75rem;
    color: var(--ic-grigio-600);
}

/* --- vuoto --- */
.ic-cr-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    margin: 1rem auto 0;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--ic-grigio-200);
    border-radius: 1.25rem;
    text-align: center;
}

.ic-cr-vuoto__ico {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 1.25rem;
    background: var(--ic-blu-tinta);
    color: var(--ic-blu);
    font-size: 1.6rem;
}

.ic-cr-vuoto__titolo { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 700; }
.ic-cr-vuoto__testo { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--ic-grigio-600); }
.ic-cr-vuoto__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

/* --- barra in fondo (telefono e tablet) --- */
.ic-cr-barra { display: none; }

@media (max-width: 991.98px) {
    .ic-cr-griglia { grid-template-columns: minmax(0, 1fr); }

    .ic-cr-riepilogo { position: static; }

    .ic-cr-barra {
        position: fixed;
        inset-inline: 0;
        bottom: calc(3.9rem + env(safe-area-inset-bottom));
        z-index: 1020;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .6rem 1rem;
        border-top: 1px solid var(--ic-grigio-200);
        background: rgba(255, 255, 255, .97);
        backdrop-filter: saturate(180%) blur(12px);
        box-shadow: 0 -8px 20px -16px rgba(15, 43, 74, .5);
    }

    .ic-cr-barra__totale { display: flex; flex-direction: column; line-height: 1.15; }
    .ic-cr-barra__totale span { font-size: .75rem; color: var(--ic-grigio-600); }
    .ic-cr-barra__totale strong { font-size: 1.125rem; }
    .ic-cr-barra .ic-bottone { padding: .6rem 1.4rem; font-size: .875rem; }

    /* La pagina finisce sopra la barra, non sotto. */
    .ic-cr { padding-bottom: 5.5rem; }
}

@media (max-width: 575.98px) {
    .ic-cr-riga {
        grid-template-columns: 3.75rem minmax(0, 1fr) auto;
        gap: .75rem;
        padding: .7rem;
    }

    .ic-cr-riga__titolo { font-size: .875rem; }
}

/* L'ultima sezione della pagina si allunga fino al footer: la sua filigrana
   (o il suo colore di fondo) arriva in fondo invece di fermarsi a meta'
   lasciando una fascia vuota (23/10/2026, carrello). */
body.ic-sito > main {
    display: flex;
    flex-direction: column;
}

body.ic-sito > main > :last-child {
    flex-grow: 1;
}

/* ===========================================================================
   23/10/2026 — Pagamento mensile o annuale
   ---------------------------------------------------------------------------
   .ic-pi-ciclo      il selettore sulla testata scura della pagina Piani
   .ic-cicli         la scelta nel modulo di registrazione / crea profilo
   .ic-ab-*          la pagina «Abbonamento e fatture» dell'area personale
   ========================================================================= */

.ic-pi-ciclo {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1rem 0 0;
    padding: .3rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
}

/* Sotto «Per le aziende / Per i consulenti» va a capo, non accanto. */
.ic-pi-scelta + .ic-pi-ciclo { display: flex; width: max-content; max-width: 100%; }

.ic-pi-ciclo a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1.1rem;
    border-radius: 100px;
    font-size: .9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    transition: background-color var(--ic-transizione), color var(--ic-transizione);
}

.ic-pi-ciclo a:hover { color: var(--ic-bianco); opacity: 1; }

.ic-pi-ciclo a.is-attiva {
    background: var(--ic-bianco);
    color: var(--ic-blu-scuro);
}

.ic-pi-ciclo__regalo {
    padding: .15rem .5rem;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 700;
    background: #e7f6ee;
    color: #1c7a4f;
}

.ic-pi-ciclo a:not(.is-attiva) .ic-pi-ciclo__regalo {
    background: rgba(255, 255, 255, .16);
    color: #c9f0da;
}

.ic-pi-piano__prezzo { margin-bottom: .4rem; }

.ic-pi-piano__ciclo {
    min-height: 1.3em;
    margin: 0 0 1.1rem;
    font-size: .8125rem;
    font-weight: 600;
    color: #1c7a4f;
}

.ic-pi-prospetto__prezzo small {
    font-size: .75em;
    font-weight: 500;
    opacity: .75;
}

@media (max-width: 575.98px) {
    .ic-pi-ciclo { width: 100%; }
    .ic-pi-ciclo a { flex: 1 1 0; justify-content: center; padding-inline: .6rem; font-size: .875rem; }
    .ic-pi-ciclo__regalo { display: none; }
}

/* --- scelta del ciclo nei moduli --------------------------------------- */
.ic-cicli {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.ic-cicli legend { width: 100%; font-size: .875rem; }

.ic-cicli__voce {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .55rem .9rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.ic-cicli__voce:has(input:checked) {
    border-color: var(--ic-blu);
    box-shadow: 0 0 0 3px rgba(42, 127, 147, .15);
}

.ic-cicli__voce input { accent-color: var(--ic-blu); }
.ic-cicli__voce small { color: var(--ic-grigio-600); margin-left: .25rem; }

/* --- area personale: abbonamento e fatture ------------------------------ */
.ic-ab-piano__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    font-size: 1.125rem;
}

.ic-ab-dati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .75rem 1.5rem;
    margin: 0;
}

.ic-ab-dati dt {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ic-grigio-600);
}

.ic-ab-dati dd { margin: .15rem 0 0; overflow-wrap: anywhere; }

.ic-ab-iban { font-size: .9375rem; color: inherit; letter-spacing: .02em; }

.ic-ab-cicli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
}

.ic-ab-ciclo {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .75rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color var(--ic-transizione), box-shadow var(--ic-transizione);
}

.ic-ab-ciclo:has(input:checked) {
    border-color: var(--ic-blu);
    box-shadow: 0 0 0 3px rgba(42, 127, 147, .15);
}

.ic-ab-ciclo input { grid-row: span 3; margin-top: .3rem; accent-color: var(--ic-blu); }
.ic-ab-ciclo__titolo { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.ic-ab-ciclo__regalo {
    padding: .1rem .5rem;
    border-radius: 100px;
    font-size: .75rem;
    background: #e7f6ee;
    color: #1c7a4f;
}

.ic-ab-ciclo__prezzo { margin-top: .35rem; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ic-ab-ciclo__prezzo small { display: block; font-size: .8125rem; font-weight: 500; color: var(--ic-grigio-600); }
.ic-ab-ciclo__nota { font-size: .8125rem; color: var(--ic-grigio-600); }

.ic-ab-cicli__azione {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.ic-ab-cicli__azione small { color: var(--ic-grigio-600); }

.ic-ab-manca {
    padding: .5rem .75rem;
    border-radius: 8px;
    background: #fff6e5;
    color: #7a5200;
    font-size: .875rem;
}

/* ===========================================================================
   Carrello rapido sulle card (30/10/2026)
   ---------------------------------------------------------------------------
   Il bottone sta fuori dal link della card, in .ic-card-box, posizionato
   sopra di lei. Il sollevamento al passaggio del mouse passa dalla card al
   contenitore, cosi' card e bottoni si muovono insieme.
   =========================================================================== */
.ic-card-box {
    position: relative;
    display: flex;
    min-width: 0;
    transition: transform 160ms cubic-bezier(.22, .61, .36, 1), opacity 240ms ease;
}
.ic-card-box > .ic-card { flex: 1; width: 100%; }
.ic-card-box > .ic-card:hover { transform: none; }
.ic-card-box:hover { transform: translateY(-4px); }
.ic-card-box:hover > .ic-card {
    border-color: rgba(42, 127, 147, .45);
    box-shadow: 0 10px 24px rgba(17, 17, 18, .12);
}
/* Il prezzo lascia posto al bottone del carrello. */
.ic-card-box .ic-card__prezzo { padding-right: 3.25rem; min-height: 2.75rem; display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; }
.ic-card-box .ic-card__prezzo .ic-card__gratis { align-self: center; }

.ic-card__carrello-modulo { margin: 0; }

.ic-card__carrello:focus-visible { outline: 3px solid rgba(42, 127, 147, .55); outline-offset: 2px; }

/* Carrello: tondo blu in basso a destra, accanto al prezzo. */
.ic-card__carrello {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1.5px solid var(--ic-blu);
    border-radius: 50%;
    background: var(--ic-bianco);
    color: var(--ic-blu);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.ic-card__carrello:hover { background: var(--ic-blu); color: var(--ic-bianco); transform: scale(1.06); opacity: 1; }
.ic-card__carrello.is-dentro { background: var(--ic-blu); color: var(--ic-bianco); }
.ic-card__carrello.is-dentro:hover { background: var(--ic-blu-scuro, #216374); border-color: var(--ic-blu-scuro, #216374); }
.ic-card__carrello[disabled] { cursor: progress; opacity: .7; }

/* Bersaglio tattile di almeno 44px anche dove il tondo e' piu' piccolo. */
.ic-card__carrello::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }

@keyframes ic-pulsa {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}
.ic-card__carrello.is-pulsa { animation: ic-pulsa 320ms cubic-bezier(.22, .61, .36, 1); }

@media (max-width: 575px) {
    .ic-card__carrello { width: 2.25rem; height: 2.25rem; right: .6rem; bottom: .7rem; }
    .ic-card__carrello svg { width: 18px; height: 18px; }
    .ic-card-box .ic-card__prezzo { padding-right: 2.6rem; min-height: 2.3rem; }
}

@media (hover: none) {
    .ic-card-box:hover { transform: none; }
}

/* Avviso breve in basso dopo un clic sul carrello. */
.ic-avviso-rapido {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: calc(100% - 2rem);
    padding: .8rem 1.1rem;
    border-radius: 12px;
    background: #0b2038;
    color: #fff;
    font-size: .9375rem;
    box-shadow: 0 10px 28px rgba(11, 32, 56, .3);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.ic-avviso-rapido.is-visibile { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ic-avviso-rapido a { color: #9fd6e4; font-weight: 600; white-space: nowrap; }

/* ===========================================================================
   Carrello: righe in un riquadro, copertine piu' grandi (30/10/2026)
   ---------------------------------------------------------------------------
   Le righe non sono piu' card sparse sulla pagina: stanno in un unico
   riquadro bianco con testata («Documenti scelti» e il numero) e piede
   (link al catalogo e subtotale), separate da una linea sottile. La copertina
   passa da un quadratino di 72px a un riquadro 4:3 di circa 150px, come
   nelle card del catalogo.
   =========================================================================== */
.ic-cr-pannello {
    overflow: hidden;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 1rem;
    background: var(--ic-bianco);
    box-shadow: 0 14px 36px -24px rgba(15, 43, 74, .45);
}

.ic-cr-pannello__testa {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ic-grigio-200);
    background: var(--ic-blu-tinta, #eef5fb);
}
.ic-cr-pannello__titolo { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.ic-cr-pannello__testa { justify-content: space-between; }
.ic-cr-pannello__conta {
    min-width: 1.6rem;
    padding: .1rem .5rem;
    border-radius: 100px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .8125rem;
    font-weight: 700;
    text-align: center;
}

/* Le righe dentro il riquadro: niente cornici proprie, una linea fra l'una e l'altra. */
.ic-cr-pannello .ic-cr-elenco { gap: 0; }
.ic-cr-pannello .ic-cr-riga {
    grid-template-columns: 9.5rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    padding: 1.1rem 1.25rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ic-cr-pannello .ic-cr-riga + .ic-cr-riga { border-top: 1px solid var(--ic-grigio-200); }
.ic-cr-pannello .ic-cr-riga:hover { border-color: var(--ic-grigio-200); box-shadow: none; background: #fafcfe; }

.ic-cr-pannello .ic-cr-riga__figura {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ic-grigio-200);
    border-radius: .65rem;
    font-size: 2rem;
}
.ic-cr-pannello .ic-cr-riga__figura img { object-position: center top; }

.ic-cr-pannello .ic-cr-riga__testo { gap: .3rem; }
.ic-cr-pannello .ic-cr-riga__titolo { font-size: 1.0625rem; line-height: 1.35; }
.ic-cr-pannello .ic-cr-riga__prezzo { margin-top: .35rem; font-size: 1.0625rem; }

.ic-cr-pannello__piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--ic-grigio-200);
    background: var(--ic-grigio-100, #f6f7f9);
    font-size: .9375rem;
}
.ic-cr-pannello__altro { font-weight: 600; color: var(--ic-blu); }
.ic-cr-pannello__altro:hover { color: var(--ic-blu-scuro); opacity: 1; }
.ic-cr-pannello__sub { color: var(--ic-grigio-600); }
.ic-cr-pannello__sub strong { margin-left: .35rem; font-size: 1.0625rem; color: var(--ic-nero); }

@media (max-width: 575.98px) {
    .ic-cr-pannello .ic-cr-riga {
        grid-template-columns: 6.5rem minmax(0, 1fr) auto;
        gap: .85rem;
        padding: .9rem;
    }
    .ic-cr-pannello .ic-cr-riga__titolo { font-size: .9375rem; }
    .ic-cr-pannello__testa,
    .ic-cr-pannello__piede { padding-inline: .9rem; }
}

/* «Potrebbe interessarti anche» (30/10/2026): sotto carrello e riepilogo,
   a tutta larghezza, slider orizzontale. 4 card visibili su computer, 3 su
   tablet, una e un pezzo della seguente sul telefono (si capisce che scorre). */
.ic-cr-suggeriti { margin-top: 3rem; }
.ic-cr-suggeriti__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.ic-cr-suggeriti__titolo { margin: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: -.01em; }
.ic-cr-suggeriti__frecce { display: flex; gap: .5rem; }
.ic-cr-suggeriti__freccia {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ic-grigio-200);
    border-radius: 50%;
    background: var(--ic-bianco);
    color: var(--ic-blu);
    box-shadow: 0 2px 8px rgba(17, 17, 18, .06);
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ic-cr-suggeriti__freccia .ic-freccia { width: .8rem; height: .8rem; }
.ic-cr-suggeriti__freccia:hover:not([disabled]) { background: var(--ic-blu); border-color: var(--ic-blu); color: var(--ic-bianco); }
.ic-cr-suggeriti__freccia[disabled] { color: var(--ic-grigio-400); cursor: default; opacity: .6; }
.ic-cr-suggeriti.is-fermo .ic-cr-suggeriti__frecce { display: none; }
html:not(.js) .ic-cr-suggeriti__frecce { display: none; }

.ic-cr-suggeriti__pista {
    --ic-sug-gap: 1.25rem;
    display: flex;
    gap: var(--ic-sug-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* spazio per il sollevamento e l'ombra delle card */
    padding: .5rem .25rem 1.25rem;
    margin-inline: -.25rem;
}
.ic-cr-suggeriti__pista::-webkit-scrollbar { display: none; }
.ic-cr-suggeriti__pista:focus-visible { outline: 3px solid rgba(42, 127, 147, .4); outline-offset: 2px; border-radius: 1rem; }
.ic-cr-suggeriti__pista > .ic-card-box {
    flex: 0 0 calc((100% - 3 * var(--ic-sug-gap)) / 4);
    scroll-snap-align: start;
}
@media (max-width: 991.98px) {
    .ic-cr-suggeriti__pista > .ic-card-box { flex-basis: calc((100% - 2 * var(--ic-sug-gap)) / 3); }
}
@media (max-width: 767.98px) {
    .ic-cr-suggeriti__pista { --ic-sug-gap: .9rem; }
    .ic-cr-suggeriti__pista > .ic-card-box { flex-basis: 46%; }
    .ic-cr-suggeriti__titolo { font-size: 1.125rem; }
}
@media (max-width: 479.98px) {
    .ic-cr-suggeriti__pista > .ic-card-box { flex-basis: 72%; }
}

/* ===========================================================================
   Schermata di caricamento fra le pagine (30/10/2026)
   ---------------------------------------------------------------------------
   La crea caricamento.js solo se la pagina nuova tarda (oltre ~0,3 s):
   velo bianco appena trasparente e sfocato, logo che «respira», barra blu
   che scorre. Con «riduci animazioni» resta ferma ma visibile.
   =========================================================================== */
.ic-caricamento {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.ic-caricamento.is-visibile {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease, visibility 0s;
}

.ic-caricamento__scatola {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 2rem 2.5rem;
    transform: translateY(6px);
    transition: transform 260ms cubic-bezier(.22, .61, .36, 1);
}
.ic-caricamento.is-visibile .ic-caricamento__scatola { transform: none; }

.ic-caricamento__logo {
    width: 140px;
    height: auto;
    animation: ic-caricamento-respira 1.6s ease-in-out infinite;
}

.ic-caricamento__barra {
    position: relative;
    width: 168px;
    height: 4px;
    overflow: hidden;
    border-radius: 100px;
    background: var(--ic-blu-tinta, #ebf6f9);
}
.ic-caricamento__barra span {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 40%;
    border-radius: 100px;
    background: var(--ic-blu);
    animation: ic-caricamento-scorre 1.1s cubic-bezier(.45, .05, .55, .95) infinite;
}

.ic-caricamento__testo {
    margin: 0;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ic-grigio-600);
}

@keyframes ic-caricamento-scorre {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
@keyframes ic-caricamento-respira {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .75; transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
    .ic-caricamento__logo,
    .ic-caricamento__barra span { animation: none; }
    .ic-caricamento__barra span { width: 100%; opacity: .6; }
}

/* ===========================================================================
   Pagina dell'ordine (30/10/2026): stesso riquadro del carrello, bottoni di
   download chiari e «Scarica tutto» (ZIP) nella testata.
   =========================================================================== */
.ic-or-ico { width: 1em; height: 1em; flex-shrink: 0; }

.ic-or-tutto {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border-radius: 100px;
    background: var(--ic-blu);
    color: var(--ic-bianco);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 140ms ease, transform 140ms ease;
}
.ic-or-tutto:hover { background: var(--ic-blu-scuro); color: var(--ic-bianco); opacity: 1; transform: translateY(-1px); }
.ic-or-tutto span {
    padding: .05rem .4rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .22);
    font-size: .6875rem;
    letter-spacing: .06em;
}

.ic-or-azioni {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    min-width: 11rem;
}
.ic-or-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    font-size: .9375rem;
    white-space: nowrap;
}
.ic-or-stato {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ic-grigio-600);
    text-align: right;
}
.ic-or-nota { color: var(--ic-grigio-600); }
.ic-or-nota a { font-weight: 600; }

/* Il riepilogo dell'ordine riusa la card del carrello: i dati restano a due colonne. */
.ic-cr-riepilogo .ic-dati { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .ic-cr-pannello .ic-or-riga { grid-template-columns: 6.5rem minmax(0, 1fr); }
    .ic-or-riga .ic-or-azioni { grid-column: 1 / -1; min-width: 0; }
    .ic-or-stato { text-align: left; }
    .ic-or-tutto { padding: .45rem .8rem; font-size: .8125rem; }
}

/* ===========================================================================
   Logo dell'header con il cambio di colore (30/10/2026, logo definitivo 02/11)
   ---------------------------------------------------------------------------
   Le immagini delle varianti sono una sopra l'altra: cambia solo il «cl»,
   quindi una dissolvenza basta a farlo «tingere».
   =========================================================================== */
.ic-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    line-height: 1;
    text-decoration: none;
}
.ic-logo:hover { opacity: 1; }

.ic-logo__immagini {
    position: relative;
    display: block;
}
.ic-logo__immagini img { display: block; height: 26px; width: auto; image-rendering: auto; }
.ic-logo__app {
    position: absolute;
    inset: 0;
    opacity: 0;
}

/* Pagina di una web app: il «cl» sfuma nel colore dell'app. */
.ic-logo--app .ic-logo__app {
    animation: ic-logo-tinge 900ms cubic-bezier(.22, .61, .36, 1) 350ms forwards;
}
.ic-logo--app .ic-logo__base { animation: ic-logo-via 900ms cubic-bezier(.22, .61, .36, 1) 350ms forwards; }
.ic-logo--scadenzario { --ic-logo-colore: #37a4bf; }
.ic-logo--dvr         { --ic-logo-colore: #ff9900; }
.ic-logo--audit       { --ic-logo-colore: #9bc455; }

@keyframes ic-logo-tinge {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Il logo blu se ne va mentre arriva quello colorato: niente bordi doppi. */
@keyframes ic-logo-via {
    from { opacity: 1; }
    to   { opacity: 0; }
}
/* Pagina delle web app: grigio (sito) → blu (Scadenzario) → arancione (DVR)
   → verde (Audit) → di nuovo grigio, a giro. Ogni colore ha 2,5 s su 10. */
.ic-logo--giro .ic-logo__giro-1 { animation: ic-logo-giro 10s ease-in-out 1.2s infinite; }
.ic-logo--giro .ic-logo__giro-2 { animation: ic-logo-giro 10s ease-in-out 3.7s infinite; }
.ic-logo--giro .ic-logo__giro-3 { animation: ic-logo-giro 10s ease-in-out 6.2s infinite; }
.ic-logo--giro .ic-logo__base   { animation: ic-logo-giro-base 10s ease-in-out 1.2s infinite; }

@keyframes ic-logo-giro-base {
    0%, 81%, 100% { opacity: 1; }
    6%, 75%       { opacity: 0; }
}
@keyframes ic-logo-giro {
    0%, 100% { opacity: 0; }
    6%, 25%  { opacity: 1; }
    31%      { opacity: 0; }
}

@media (max-width: 575.98px) {
    .ic-logo__immagini img { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .ic-logo--app .ic-logo__app { animation: none; opacity: 1; }
    .ic-logo--app .ic-logo__base { animation: none; opacity: 0; }
    .ic-logo--giro .ic-logo__app,
    .ic-logo--giro .ic-logo__base { animation: none; }
}

/* ===========================================================================
   Header che non si taglia mai (05/11/2026)
   ---------------------------------------------------------------------------
   Fra 992 e ~1600 px menu, spazi e logo si stringono in modo continuo invece
   che a scalini; il saluto «Ciao nome» compare solo quando c'e' spazio vero.
   Rete di sicurezza: header-adatta.js aggiunge .ic-header--stretto (e poi
   --strettissimo) se, per zoom o caratteri piu' grandi, qualcosa sborda.
   =========================================================================== */
@media (min-width: 992px) {
    .ic-header__dentro > .d-flex { flex-wrap: nowrap; gap: .75rem; }
    .ic-header__marchio,
    .ic-header__dentro > .d-flex > .d-flex { flex: 0 0 auto; }
    .ic-header__menu {
        flex: 0 1 auto;
        min-width: 0;
        gap: clamp(.7rem, calc(.7rem + (100vw - 992px) * .02), 1.5rem);
        margin-inline: clamp(.5rem, calc(.5rem + (100vw - 992px) * .0123), 1.25rem);
    }
    .ic-header__menu a {
        font-size: clamp(.8rem, calc(.8rem + (100vw - 992px) * .0075), 1.0625rem);
    }
    .ic-header__servizi {
        gap: clamp(.7rem, calc(.7rem + (100vw - 992px) * .0066), 1.1rem);
        padding-right: clamp(.7rem, calc(.7rem + (100vw - 992px) * .0066), 1.1rem);
    }
    .ic-header__servizi a {
        font-size: clamp(.8125rem, calc(.8125rem + (100vw - 992px) * .0021), .9375rem);
    }
    .ic-logo__immagini img { height: clamp(22px, calc(22px + (100vw - 992px) * .0066), 26px); }
    .ic-header__dentro > .d-flex > .d-flex.gap-3 { gap: clamp(.6rem, calc(.6rem + (100vw - 992px) * .0066), 1rem) !important; }
}

/* Il saluto accanto all'avatar solo da 1500 px in su (sotto resta l'avatar). */
@media (min-width: 992px) and (max-width: 1499.98px) {
    .ic-header__saluto { display: none; }
}

/* Rete di sicurezza (classi messe da header-adatta.js). */
.ic-header--stretto .ic-header__saluto,
.ic-header--stretto .ic-conto__freccia { display: none !important; }
.ic-header--stretto .ic-header__menu { gap: .75rem; margin-inline: .5rem; }
.ic-header--stretto .ic-header__menu a { font-size: .875rem; }
.ic-header--strettissimo .ic-header__servizi { display: none !important; }
.ic-header--strettissimo .ic-header__menu { gap: .6rem; }
.ic-header--strettissimo .ic-header__menu a { font-size: .8125rem; }

/* Dati del titolare sotto il footer (05/11/2026). */
.ic-footer__dati {
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .4);
    font-size: .6875rem;
    line-height: 1.5;
}

/* Pagina Cookie (05/11/2026). */
.ic-cookie { max-width: 52rem; }
.ic-cookie h2 {
    margin: 2.25rem 0 .75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ic-grigio-900);
}
.ic-cookie h2:first-child { margin-top: 0; }
.ic-cookie ul { padding-left: 1.2rem; }
.ic-cookie li { margin-bottom: .45rem; }
.ic-cookie__tabella { font-size: .9375rem; margin-bottom: .75rem; }
.ic-cookie__tabella th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ic-grigio-600); font-weight: 600; }
.ic-cookie__tabella code { color: var(--ic-blu-scuro); background: var(--ic-blu-tinta, #ebf6f9); padding: .1rem .35rem; border-radius: 4px; }
.ic-cookie__data { margin-top: 2.5rem; font-size: .875rem; color: var(--ic-grigio-600); }

/* Filigrana delle pagine web app piu' visibile (05/11/2026): a .06 non si
   vedeva quasi. Vale per /app.htm e /app/{scadenzario,dvr,audit}.htm. */
.ic-suite-carte.ic-filigrana,
.ic-filigrana--bianca,
.ic-ap-pagina.ic-filigrana { --ic-filigrana-forza: .14; }