@import 'style.css';

:root {

    /* Spacing */
    --spacing-8:    8px;
    --spacing-12:   12px;
    --spacing-16:   16px;
    --spacing-20:   20px;
    --spacing-24:   24px;

    /* Border radius */
    --radius-btn:   8px;

    /* Border thickness */
    --border-btn:   1px;

    /* Tipografia */
    --font-family-btn:       'Lota Grotesque', sans-serif;
    --font-weight-btn:       600;

    --font-size-lg:          16px;
    --font-size-md:          14px;
    --font-size-sm:          12px;

    --line-height-lg:        20px;
    --line-height-md:        18px;
    --line-height-sm:        16px;

    --letter-spacing-lg:     -0.4px;
    --letter-spacing-md:     -0.3px;
    --letter-spacing-sm:     -0.2px;

}


/* -------------------------------------------------------------
   ETICHETTA — badge/tag riusabile (Figma Sito-DS, node 735:601)
   Varianti colore: --rossa (default) / --blu / --gradiente
   ------------------------------------------------------------- */
.mm-tag {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          var(--spacing-4, 4px) var(--spacing-8, 8px);
    border-radius:    var(--spacing-4, 4px);
    font-family:      var(--font-body);
    font-weight:      var(--weight-regular);
    font-size:        var(--caption-size);
    line-height:      var(--caption-line);
    color:            var(--colori-pieni-bianco-default, #F0EEEA);
    text-transform:   uppercase;
    white-space:      nowrap;
}

.mm-tag--rossa {
    background: var(--colori-pieni-rosso-default, #D24A5D);
}

.mm-tag--blu {
    background: var(--colori-pieni-blu-default, #162640);
}

.mm-tag--gradiente {
    position:  relative;
    isolation: isolate;
    /* Stessa forma/angolazione del gradiente dei bottoni --gradiente
       (radiale, centrato in basso), non il lineare a 111deg di
       --gradient-brand usato altrove. */
    background-image:var(--sfondo-piccolo);
}

/* Stessa texture "noise" dei bottoni --gradiente (vedi .btn--gradiente
   piu' sotto): sopra il gradiente, sotto il testo. */
.mm-tag--gradiente::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    pointer-events: none;
    opacity:        0.1;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-repeat: repeat;
    background-size:   120px 120px;
}

/* Variante "Outline" (Figma Sito-DS, node 2034:12451 / mockup node
   2032-11680): sfondo trasparente, bordo sottile, testo blu scuro —
   usata ad es. per le etichette soluzioni nella hero del caso studio. */
.mm-tag--outline {
    background:  transparent;
    color:       var(--colori-pieni-blu-default, #162640);
    border:      var(--spacing-1, 1px) solid var(--colori-pieni-blu-50,#BEC2CA);
    transition:  background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Stati Hover/Pressed (Figma Sito-DS, stesso node 2034:12451, frame
   "Hover"/"Pressed"): finora .mm-tag--outline era usata solo come link
   (single-case_study.php) senza nessuna interazione definita. */
.mm-tag--outline:hover {
    background: var(--colori-pieni-blu-50, #BEC2CA);
    border-color: var(--colori-pieni-blu-50, #BEC2CA);
    color:       var(--colori-pieni-blu-default, #162640);
    cursor:      pointer;
}

.mm-tag--outline:active,
.mm-tag--outline:focus-visible {
    background:  var(--colori-pieni-blu-default, #162640);
    border-color: var(--colori-pieni-blu-default, #162640);
    color:       var(--colori-pieni-bianco-default, #F0EEEA);
}

/* -------------------------------------------------------------
   BOTTONE — .btn (Figma Sito-DS, node 713:8980 "Pulsanti")
   Varianti colore: --bianco (default) / --gradiente
   Taglia unica. Stati Hover/Pressed gestiti da :hover/:active.
   ------------------------------------------------------------- */
.btn {
    position:         relative;
    isolation:        isolate;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          var(--spacing-12, 12px) var(--spacing-32, 32px);
    border:           none;
    border-radius:    var(--spacing-40, 40px);
    font-family:      var(--font-body);
    font-weight:      var(--weight-regular);
    font-size:        var(--body-sm-size);
    line-height:      var(--body-sm-line);
    text-decoration:  none;
    text-transform:   uppercase;
    cursor:           pointer;
    /* Va a capo quando il testo non ci sta sulla riga (es. bottone
       width:100% in un contenitore stretto) invece di uscire dal
       bottone: nowrap forzava una sola riga anche quando lo spazio
       disponibile non bastava. */
    white-space:      normal;
    text-align:       center;
    box-shadow:       inset -2px -2px 3px rgba(22, 38, 64, 0.1), inset 2px 2px 3px rgba(240, 238, 234, 0.1);
    transition:       background-color 0.15s ease, background-image 0.15s ease, box-shadow 0.15s ease, color 0.2s ease;
}

/* Dimensione "larga" (Figma: Pulsanti Testo, Dimensione=lg) — scatta in
   automatico solo sui dispositivi "maxi" (stesso breakpoint Display >=2560px
   della scala tipografica, vedi style.css). Sotto quella soglia il bottone
   resta alla dimensione "normale" definita sopra (identica a prima). */
@media (min-width: 2560px) {
    .btn {
        padding:     var(--spacing-12, 12px) var(--spacing-40, 40px);
        font-size:   28px;
        line-height: 32px;
    }
}

.btn__label {
    display:        inline-flex;
    align-items:    flex-start;
    justify-content: center;
    overflow:       hidden;
    height:         var(--body-sm-line, 20px);
    /* Resta sempre sopra il layer noise di .btn--gradiente::before
       (z-index: 0) — nessun effetto sulle altre varianti, che non hanno
       quel layer. */
    position:       relative;
    z-index:        1;
}

@media (min-width: 2560px) {
    .btn__label {
        height: 32px;
    }
}

.btn__label-inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
}

.btn__label-text {
    display: block;
    height:  var(--body-sm-line, 20px);
    line-height: var(--body-sm-line, 20px);
}

@media (min-width: 2560px) {
    .btn__label-text {
        height:      32px;
        line-height: 32px;
    }
}

/* Su mobile il testo va a capo su piu' righe invece di restare su una
   riga sola e uscire dal bottone (vedi white-space:normal su .btn piu'
   sopra, che pero' da solo non basta: .btn__label ha altezza fissa a
   una riga con overflow:hidden e .btn__label-inner si restringe al
   contenuto, entrambi necessari all'effetto hover di scorrimento
   testo). Qui disattiviamo quel vincolo SOLO sotto i 767px: l'effetto
   hover di scorrimento (mmAnimate.buttonTextHover, mouseenter/mouseleave
   in mm-animations.js) comunque non scatta quasi mai su touch, quindi
   nessuna perdita reale — l'animazione resta intatta su desktop/tablet. */
@media (max-width: 767px) {
    .btn__label {
        display: flex;
        width:   100%;
        height:  auto;
        overflow: visible;
    }
    .btn__label-inner {
        width: 100%;
    }
    .btn__label-text {
        width:       100%;
        height:      auto;
        white-space: normal;
        text-align:  center;
    }
    /* Il testo duplicato (aria-hidden, usato per lo swap hover) va
       nascosto qui: senza altezza fissa + overflow:hidden resterebbe
       visibile sotto quello reale, impilato da .btn__label-inner
       (flex-direction:column). */
    .btn__label-text[aria-hidden="true"] {
        display: none;
    }
}

/* Stessa cosa, ma scoperta dinamicamente via JS (mm-animations.js,
   ResizeObserver su ogni .btn) invece che dal breakpoint 767px: un
   bottone in uno spazio stretto puo' non avere piu' posto per il
   testo su una riga sola anche su desktop/tablet (es. dentro una
   colonna stretta), non solo su mobile. Quando succede riceve questa
   classe, che replica esattamente il blocco qui sopra: il testo va a
   capo invece di uscire dal bottone o sovrapporsi alla copia
   duplicata dell'hover. */
.btn.mm-btn--wrap .btn__label {
    display:  flex;
    width:    100%;
    height:   auto;
    overflow: visible;
}
.btn.mm-btn--wrap .btn__label-inner {
    width: 100%;
}
.btn.mm-btn--wrap .btn__label-text {
    width:       100%;
    height:      auto;
    white-space: normal;
    text-align:  center;
}
.btn.mm-btn--wrap .btn__label-text[aria-hidden="true"] {
    display: none;
}


/* Sfumatura radiale bianco -> grigio-blu, centrata in basso (50% 100%) —
   valori esatti da Figma (Pulsanti Testo, Colore=Bianco/Pieno): raggio
   100% a riposo, 147.33% in hover (si "allarga" leggermente). */
.btn--bianco {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    background-image:  radial-gradient(
  150% 100% at 0% 50%,
  var(--colori-pieni-bianco-default, #F0EEEA) 25%,
  var(--colori-pieni-blu-50, #BEC2CA) 100%
);
    color:             var(--colori-pieni-blu-default, #162640);
}

/* Crossfade via ::after: il default resta sempre disegnato sul bottone
   stesso, e il layer sovrapposto porta il gradiente "hover" (raggio piu'
   ampio) a opacita' 0 — solo l'opacity si anima in modo fluido (un
   background-image da solo non e' interpolabile, quindi lo scambio
   diretto darebbe uno scatto secco). Stessa tecnica gia' usata da
   .btn--gradiente qui sotto. */
.btn--bianco::after {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    background-image:  radial-gradient(
  110% 100% at 0% 50%,
  var(--colori-pieni-bianco-default, #F0EEEA) 10%,
  var(--colori-pieni-blu-50, #BEC2CA) 100%
);
    opacity:        0;
    pointer-events: none;
    will-change:    opacity;
    transition:     opacity 0.3s ease;
}

.btn--bianco:hover {
    color:      var(--colori-pieni-blu-default, #162640);
    box-shadow: inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--bianco:hover::after {
    opacity: 1;
}

.btn--bianco:active,
.btn--bianco:focus-visible {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    background-image:  none;
    box-shadow:        inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--bianco:active::after,
.btn--bianco:focus-visible::after {
    opacity: 0;
}

.btn--bianco:disabled {
    background-color: var(--colori-pieni-grigio-50, #F6F4F1);
    background-image:  none;
    color:             var(--colori-pieni-grigio-400, #BFB9B2);
    box-shadow:        none;
    cursor:            not-allowed;
}

.btn--bianco:disabled::after {
    opacity: 0;
}

.btn--gradiente,
.btn--gradiente:hover,
.btn--gradiente:active,
.btn--gradiente:focus-visible {
    color: var(--colori-pieni-bianco-default, #F0EEEA) !important;
}

/* Sfumatura radiale del brand (blu -> rosso), centrata in basso (50% 100%)
   — valori esatti da Figma (Pulsanti Testo, Colore=Blu/Pieno): raggio 100%
   a riposo, 147.33% in hover (si "allarga" leggermente). Non piu' il
   lineare a 111deg di --gradient-brand. Il passaggio hover e' animato
   tramite crossfade su ::after (vedi commento su .btn--bianco::after). */
.btn--gradiente {
    background-image: var(--sfondo-piccolo);
}

/* Texture "noise" sopra il gradiente (solo variante --gradiente, non
   --bianco/--outline): replica esatta delle impostazioni Figma — Mono,
   Noise size 0.5, Density 100%, Colore #F0EEEA al 10%. Generata come SVG
   (feTurbulence + feColorMatrix per colorare il grano in F0EEEA
   mantenendone l'alpha) invece di un'immagine, cosi' resta leggera e si
   ripete su qualunque dimensione di bottone. Sopra al gradiente (di
   riposo e di hover, che vivono su ::after) ma sotto al testo. */
.btn--gradiente::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        0;
    border-radius:  inherit;
    pointer-events: none;
    opacity:        0.1;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-repeat: repeat;
    background-size:   120px 120px;
}

.btn--gradiente:disabled::before {
    opacity: 0;
}

.btn--gradiente::after {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    background-image:radial-gradient(
    200% 300% at 115% 0%,
    var(--colori-pieni-rosso-default, #D24A5D) -10%,
    var(--colori-pieni-blu-default, #162640) 40%,
    var(--colori-pieni-blu-default, #162640) 100%
  );
    opacity:        0;
    pointer-events: none;
    will-change:    opacity;
    transition:     opacity 0.3s ease;
}

.btn--gradiente:hover {
    box-shadow: inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--gradiente:hover::after {
    opacity: 1;
}

.btn--gradiente:active,
.btn--gradiente:focus-visible {
    background-image: none;
    background-color: var(--colori-pieni-blu-default, #162640);
    box-shadow:        inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--gradiente:active::after,
.btn--gradiente:focus-visible::after {
    opacity: 0;
}

.btn--gradiente:disabled {
    background-image: none;
    background-color: var(--colori-pieni-grigio-50, #F6F4F1);
    color:             var(--colori-pieni-grigio-400, #BFB9B2) !important;
    box-shadow:        none;
    cursor:            not-allowed;
}

.btn--gradiente:disabled::after {
    opacity: 0;
}

/* Outline — bordo, sfondo trasparente di default (pensato per stare su sfondi
   scuri, es. header/hero). Aggiornato sul nuovo componente Figma
   "Pulsanti Testo" (Design System, frame 1182:10): a differenza di prima,
   in hover il bordo si accende soltanto (niente piu' riempimento) — il
   riempimento pieno scatta solo su pressed/focus. */
.btn--outline-bianco {
    background-color: transparent;
    border:            1px solid var(--colori-pieni-bianco-200, #FBF9F7);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
    box-shadow:        none;
}

.btn--outline-bianco:hover {
    background-color: transparent;
    border-color:      var(--colori-pieni-bianco-default, #F0EEEA);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
}

.btn--outline-bianco:active,
.btn--outline-bianco:focus-visible {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    border-color:      var(--colori-pieni-bianco-default, #F0EEEA);
    color:             var(--colori-pieni-blu-default, #162640);
    box-shadow:        inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--outline-bianco:disabled {
    background-color: transparent;
    border-color:      var(--colori-pieni-grigio-300, #D6D1CB);
    color:             var(--colori-pieni-grigio-300, #D6D1CB);
    cursor:            not-allowed;
}

/* Outline/Blu — sostituisce la vecchia variante "outline-gradiente": stessa
   base (bordo + testo, sfondo trasparente a riposo), ma tinta unica blu
   invece del testo/bordo a gradiente sfumato. */
.btn--outline-blu {
    background-color: transparent;
    border:            1px solid var(--colori-pieni-blu-200, #868E9C);
    color:             var(--colori-pieni-blu-default, #162640);
    box-shadow:        none;
}

.btn--outline-blu:hover {
    background-color: transparent;
    border-color:      var(--colori-pieni-blu-default, #162640);
    color:             var(--colori-pieni-blu-default, #162640);
}

.btn--outline-blu:active,
.btn--outline-blu:focus-visible {
    background-color: var(--colori-pieni-blu-default, #162640);
    border-color:      var(--colori-pieni-blu-default, #162640);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
    box-shadow:        inset -2px -2px 4px rgba(22, 38, 64, 0.3), inset 2px 2px 4px rgba(240, 238, 234, 0.3);
}

.btn--outline-blu:disabled {
    background-color: transparent;
    border-color:      var(--colori-pieni-grigio-300, #D6D1CB);
    color:             var(--colori-pieni-grigio-300, #D6D1CB);
    cursor:            not-allowed;
}

/* -------------------------------------------------------------
   ICON BUTTON — .btn-icon (Figma Sito-DS, node 1065:358 "Pulsanti Icone")
   Icona sostituibile (24x24), taglia unica. Stati Hover/Pressed
   gestiti da :hover/:active/:focus-visible. Il crossfade tra i due
   gradienti (default/hover) usa un layer ::after animato su opacity,
   stessa tecnica di .btn--gradiente: background-image non è
   interpolabile, quindi lo swap diretto darebbe uno scatto secco.
   ------------------------------------------------------------- */
.btn-icon {
    position:         relative;
    isolation:        isolate;
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          var(--spacing-8, 8px);
    border:           none;
    border-radius:    var(--spacing-12, 12px);
    cursor:           pointer;
    transition:       background-color 0.15s ease, border-color 0.15s ease, background-image 0.15s ease, box-shadow 0.15s ease, color 0.2s ease;
}

.btn-icon__icon {
    display:  flex;
    width:    24px;
    height:   24px;
    overflow: hidden;
}

.btn-icon__icon-inner {
    display: flex;
    flex-direction: row;
}

.btn-icon__icon-frame {
    display:  flex;
    flex:     none;
    width:    24px;
    height:   24px;
}

.btn-icon__icon-frame svg {
    width:  100%;
    height: 100%;
}

/* "Maxi schermo" (>=2560px): variante "lg" del Design System (Figma
   Sito-DS, node 1065:358) al posto di "md" — stesso breakpoint gia'
   usato per card Caso Studio/MadSuite e avatar del rating, si applica
   da sola, nessuna classe aggiuntiva da mettere nel markup. Icona
   32x32 (invece di 24x24), padding 12px (invece di 8px) -> box totale
   56x56 (invece di 40x40); border-radius resta 12px, stesso token in
   entrambe le taglie nel Figma. */
@media (min-width: 2560px) {
    .btn-icon {
        padding: var(--spacing-12, 12px);
    }

    .btn-icon__icon,
    .btn-icon__icon-frame {
        width:  32px;
        height: 32px;
    }
}

/* Variante "small": stesso componente, taglia ridotta (icona 20x20,
   padding 4px -> box totale 28x28, invece di 24x24/8px/40x40) — usata
   ad es. nelle card "Correlati" della sidebar articolo (single.php).
   Dichiarata DOPO la media query "maxi schermo" qui sopra cosi' da
   vincerla a parita' di specificita' (stessa singola classe): sotto
   >=2560px la versione small resta small, non scala a 32x32/12px come
   la taglia normale — nessuna richiesta di farla scalare anche li'. */
.btn-icon--small {
    padding: var(--spacing-4, 4px);
    border-radius: var(--spacing-8, 8px);
}

.btn-icon--small .btn-icon__icon,
.btn-icon--small .btn-icon__icon-frame {
    width:  20px;
    height: 20px;
}

/* ---- Outline / Blu ------------------------------------------------ */
.btn-icon--outline-blu {
    background-color: transparent;
    border:            1px solid var(--colori-pieni-blu-200, #868E9C);
    color:             var(--colori-pieni-blu-default, #162640);
}

.btn-icon--outline-blu:hover {
    background-color: transparent;
    border-color:      var(--colori-pieni-blu-default, #162640);
    color:             var(--colori-pieni-blu-default, #162640);
}

.btn-icon--outline-blu:active,
.btn-icon--outline-blu:focus-visible {
    background-color: var(--colori-pieni-blu-default, #162640);
    border-color:      var(--colori-pieni-blu-default, #162640);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
}

.btn-icon--outline-blu:disabled {
    background-color: transparent;
    border-color:      var(--colori-pieni-grigio-300, #D6D1CB);
    color:             var(--colori-pieni-grigio-300, #D6D1CB);
    cursor:            not-allowed;
}

/* ---- Outline / Bianco ---------------------------------------------- */
.btn-icon--outline-bianco {
    background-color: transparent;
    border:            1px solid var(--colori-pieni-bianco-200, #FBF9F7);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
}

.btn-icon--outline-bianco:hover {
    background-color: transparent;
    border-color:      var(--colori-pieni-bianco-default, #F0EEEA);
    color:             var(--colori-pieni-bianco-default, #F0EEEA);
}

.btn-icon--outline-bianco:active,
.btn-icon--outline-bianco:focus-visible {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    border-color:      var(--colori-pieni-bianco-default, #F0EEEA);
    color:             var(--colori-pieni-blu-default, #162640);
}

.btn-icon--outline-bianco:disabled {
    background-color: transparent;
    border-color:      var(--colori-pieni-grigio-300, #D6D1CB);
    color:             var(--colori-pieni-grigio-300, #D6D1CB);
    cursor:            not-allowed;
}

/* ---- Pieno / Blu (gradiente) — stessa tecnica di crossfade dei
   bottoni testo: sfumatura radiale diretta a riposo, overlay ::after
   con la sfumatura piu' ampia dell'hover animato via opacity. ---- */
.btn-icon--gradiente,
.btn-icon--gradiente:hover,
.btn-icon--gradiente:active,
.btn-icon--gradiente:focus-visible {
    color: var(--colori-pieni-bianco-default, #F0EEEA) !important;
}

.btn-icon--gradiente {
    background-image:var(--sfondo-piccolo)
}

/* Stesso layer noise di .btn--gradiente::before (vedi sopra): stesso SVG,
   stessa opacity/size, solo scoped qui. Sopra al gradiente (::after,
   z-index -1) ma sotto il contenuto dell'icona (.btn-icon__icon, senza
   z-index esplicito ma successivo nel flusso — resta comunque sopra
   perche' isolation:isolate sul .btn-icon crea un nuovo contesto di
   stacking e ::before qui usa z-index:0). */
.btn-icon--gradiente::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        0;
    border-radius:  inherit;
    pointer-events: none;
    opacity:        0.1;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-repeat: repeat;
    background-size:   120px 120px;
}

.btn-icon--gradiente:disabled::before {
    opacity: 0;
}

.btn-icon--gradiente::after {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    background-image: radial-gradient(
    200% 300% at 115% 0%,
    var(--colori-pieni-rosso-default, #D24A5D) -10%,
    var(--colori-pieni-blu-default, #162640) 40%,
    var(--colori-pieni-blu-default, #162640) 100%
  );
    opacity:        0;
    pointer-events: none;
    will-change:    opacity;
    transition:     opacity 0.3s ease;
}

.btn-icon--gradiente:hover::after {
    opacity: 1;
}

.btn-icon--gradiente:active,
.btn-icon--gradiente:focus-visible {
    background-image: none;
    background-color: var(--colori-pieni-blu-default, #162640);
}

.btn-icon--gradiente:active::after,
.btn-icon--gradiente:focus-visible::after {
    opacity: 0;
}

.btn-icon--gradiente:disabled {
    background-image: none;
    background-color: var(--colori-pieni-grigio-50, #F6F4F1);
    color:             var(--colori-pieni-grigio-400, #BFB9B2) !important;
    cursor:            not-allowed;
}

.btn-icon--gradiente:disabled::after {
    opacity: 0;
}

/* ---- Pieno / Bianco ------------------------------------------------ */
.btn-icon--bianco {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    background-image:  radial-gradient(100% 100% at 50% 100%, var(--colori-pieni-bianco-default, #F0EEEA) 25%, var(--colori-pieni-blu-50, #BEC2CA) 100%);
    color:             var(--colori-pieni-blu-default, #162640);
}

.btn-icon--bianco::after {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    background-image: radial-gradient(151.63% 151.63% at 50% 100%, var(--colori-pieni-bianco-default, #F0EEEA) 25%, var(--colori-pieni-blu-50, #BEC2CA) 100%);
    opacity:        0;
    pointer-events: none;
    will-change:    opacity;
    transition:     opacity 0.3s ease;
}

.btn-icon--bianco:hover::after {
    opacity: 1;
}

.btn-icon--bianco:active,
.btn-icon--bianco:focus-visible {
    background-color: var(--colori-pieni-bianco-default, #F0EEEA);
    background-image:  none;
}

.btn-icon--bianco:active::after,
.btn-icon--bianco:focus-visible::after {
    opacity: 0;
}

.btn-icon--bianco:disabled {
    background-color: var(--colori-pieni-grigio-50, #F6F4F1);
    background-image:  none;
    color:             var(--colori-pieni-grigio-400, #BFB9B2);
    cursor:            not-allowed;
}

.btn-icon--bianco:disabled::after {
    opacity: 0;
}

/* -------------------------------------------------------------
   REVIEW CARD — .mm-review (Figma Sito-DS, node 1067:593 "Recensione")
   Foto (0.59fr) — citazione (1fr) — divisore — risultato (0.59fr),
   proporzioni 352:600:352 del design. Sotto i 1080px impila in colonna.
   ------------------------------------------------------------- */
.mm-review {
    display:          flex;
    align-items:      stretch;
    gap:              var(--spacing-32, 32px);
    padding:          var(--spacing-16, 16px);
    background:       var(--colori-pieni-bianco-400, #F4F1ED);
    border-radius:    var(--mm-radius-xl, 24px);
    box-shadow: var(--mm-shadow-card);
    /* .mm-reviews__slide (il genitore diretto) viene gia' allungata da
       flexbox all'altezza della recensione piu' alta del carosello, ma
       essendo un div normale (non flex) non propaga quello stretch al suo
       contenuto: senza height:100% questa card resterebbe alta solo quanto
       il proprio testo, lasciando spazio vuoto sotto per le card piu' corte. */
    height:           100%;
}

.mm-review__media {
    width: 25%;
    min-width:        0;
    border-radius:    var(--mm-radius-lg, 16px);
    overflow:         hidden;
    background:       var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.mm-review__img {
    display:      block;
    width:        100%;
    height:       100%;
    object-fit:   cover;
}

.mm-review__quote {
    display:          flex;
    flex-direction:   column;
    justify-content:  space-between;
    gap:              var(--spacing-120, 120px);
    width: 50%;
    min-width:        0;
    padding-block:    var(--spacing-16, 16px);
}

.mm-review__text {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

.mm-review__client {
    display:        flex;
    flex-direction: column;
}

.mm-review__client-company {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

.mm-review__client-name {
    margin: 0;
    color:  var(--colori-pieni-blu-300, #616B7D);
}

/* Senza risultato (vedi render_review_card()): la citazione prende anche
   lo spazio della colonna di destra (25% + 25%). */
.mm-review--no-results .mm-review__quote {
    width: 75%;
}

/* Desktop: la foto ha SEMPRE la stessa larghezza, con o senza colonna dei
   risultati. Prima era "25%" e lo shrink flex (per via di gap e divisore)
   la restringeva di piu' nelle card complete (4 elementi, 3 gap) che in
   quelle senza risultato (2 elementi, 1 gap): le card senza risultato
   (es. Radix) avevano la foto piu' larga di circa 16-20px. Ora la larghezza
   e' il 25% dello spazio al netto di 3 gap + divisore (identica a quella
   delle card complete) e la citazione riempie il resto. */
@media (min-width: 1081px) {
    .mm-review__media {
        flex: 0 0 calc((100% - 3 * var(--spacing-32, 32px) - 1px) * 0.25);
        width: auto;
    }
    .mm-review--no-results .mm-review__quote {
        flex: 1 1 0;
        width: auto;
    }
}

.mm-review__divider {
    flex:        0 0 1px;
    align-self:  stretch;
    background:  var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
}

.mm-review__results {
    display:          flex;
    flex-direction:   column;
    justify-content:  flex-end;
    gap:              var(--spacing-16, 16px);
    width: 25%;
    min-width:        0;
    padding-block:    var(--spacing-16, 16px);
}

.mm-review__stat {
    margin:         0;
    display:        flex;
    align-items:    flex-end;
    font-family:    var(--font-mono);
    font-weight:    var(--weight-regular);
    color:          var(--colori-pieni-blu-default, #162640);
    line-height:    1;
}

.mm-review__desc {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

@media (max-width: 1080px) {
    .mm-review {
        flex-direction: column;
        /* Sotto i 1080px le card non devono avere tutte la stessa
           altezza (vedi homepage.css/.js: .mm-reviews__track-inner e lo
           script di sync che imposta l'altezza del track sulla sola
           card corrente) — qui la card smette di forzarsi al 100% del
           contenitore e prende l'altezza del proprio contenuto. */
        height: auto;
    }

    .mm-review__media {
        flex:        none;
        height: 424px;
        width: 100%;
    }

    .mm-review__quote,
    .mm-review__results {
        flex: none;
        width: 100%;
        gap: var(--spacing-40, 40px);
    }

    .mm-review--no-results .mm-review__quote {
        width: 100%;
    }

    .mm-review__divider {
        width:       100%;
        height:      1px;
        align-self:  auto;
    }
}

/* Tablet (768-1079px): solo il blocco numero+descrizione (.mm-review__results,
   Figma Mockup node 1898:7950 "Recensione") passa da colonna a riga —
   numerone a sinistra, descrizione a destra, allineati in basso. Il resto
   della card (immagine, citazione, divisore) resta come nel blocco <=1079
   qui sopra. */
@media (min-width: 768px) and (max-width: 1080px) {
    .mm-review__results {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--spacing-16, 16px) var(--spacing-80, 80px);
    }

    .mm-review__desc {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* -------------------------------------------------------------
   NEWSLETTER — .mm-newsletter (Figma Design System, node 788:1190 "Input")
   Stati Default/Hover/Attivo gestiti via :hover / :focus-within.
   ------------------------------------------------------------- */
.mm-newsletter {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-12, 12px);
}

.mm-newsletter__text {
    margin:      0;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size:   var(--body-sm-size);
    line-height: var(--body-sm-line);
    color:       var(--colori-pieni-bianco-default);
}

.mm-newsletter-form {
    width:         400px;
    max-width:     100%;
    display:       flex;
    align-items:   center;
    gap:           var(--spacing-40, 40px);
    border:        1px solid var(--colori-pieni-blu-50);
    border-radius: var(--spacing-40, 40px);
    padding:       var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-24, 24px);
    transition:    border-color 0.2s ease;
}

.mm-newsletter-form:hover {
    border-color: var(--colori-pieni-bianco-700);
}

.mm-newsletter-form:focus-within {
    border-color: var(--colori-pieni-bianco-default);
}

.mm-newsletter-form input {
    flex:        1 1 0;
    min-width:   0;
    border:      0;
    background:  transparent;
    outline:     none;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size:   var(--body-sm-size);
    line-height: var(--body-sm-line);
    color:       var(--colori-pieni-blu-50);
}

.mm-newsletter-form input::placeholder {
    color:      var(--colori-opacizzati-bianco-30);
    transition: color 0.2s ease;
}

.mm-newsletter-form:hover input::placeholder {
    color: var(--colori-pieni-bianco-700);
}

.mm-newsletter-form:focus-within input::placeholder {
    color: var(--colori-pieni-bianco-default);
}

.mm-newsletter-form button {
    /* stile del bottone (bg/colore/padding/radius/shadow) gestito da .btn.btn--bianco */
    flex-shrink: 0;
}

/* -------------------------------------------------------------
   CASO STUDIO (card grande, "in evidenza") — .mm-cs-feature
   (Figma Mockup, node 1811:5469 "Caso Studio")
   Componente riutilizzabile: render_case_study_card() in components.php.
   Immagine a sinistra (con eventuale galleria scorrevole via frecce
   prev/next) + pannello testo a destra (numero statistico, descrizione
   breve, CTA). Sotto i 1080px si impila in colonna (vedi media query).
   ------------------------------------------------------------- */
.mm-cs-feature {
    position: relative; /* ancora per il link-overlay cliccabile (vedi sotto) */
    display: flex;
    gap:     var(--spacing-16, 16px);
    align-items: stretch;
    height:  80vh;
}

/* Overlay trasparente che rende l'intera card cliccabile, su QUALSIASI
   breakpoint (desktop incluso): z-index alto per stare sopra media+panel
   (entrambi z-index:auto, quindi sotto qualunque valore esplicito).
   L'hover di zoom immagine/video resta intatto perche' legato a
   .mm-cs-feature:hover (l'intera card, overlay compreso) invece che al
   solo .mm-cs-feature__media (vedi sotto). Le frecce prev/next della
   galleria (quando presenti) restano sopra l'overlay grazie al loro
   z-index piu' alto (vedi .mm-cs-feature__nav). */
.mm-cs-feature__link-overlay {
    position: absolute;
    inset:    0;
    z-index:  5;
    pointer-events: auto;
}

/* "Maxi schermo" (stesso breakpoint Display >=2560px usato altrove, vedi
   .btn sopra e style.css): l'altezza in vh sarebbe eccessiva in pixel
   assoluti su schermi molto grandi, quindi scende a 70vh. */
@media (min-width: 2560px) {
    .mm-cs-feature {
        height: 70vh;
    }
}

/* Alterna il lato dell'immagine tra una card e la successiva (vedi
   $mm_i % 2 in homepage.php): stessa card, semplicemente invertita. */
.mm-cs-feature--reverse {
    flex-direction: row-reverse;
}

.mm-cs-feature__media {
    position:      relative;
    flex:          60 1 0;
    min-width:     0;
    display:       flex;
    align-items:   flex-end;
    gap:           var(--spacing-8, 8px);
    padding:       var(--spacing-40, 40px);
    border-radius: var(--mm-radius-lg, 16px);
    overflow:      hidden;
    height:        100%;
    background:    var(--colori-pieni-blu-50, #BEC2CA);
}

.mm-cs-feature__img {
    position:       absolute;
    inset:          0;
    z-index:        0;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    opacity:        0;
    pointer-events: none;
    transform:      scale(1);
    transition:     opacity 0.4s ease, transform 0.5s ease;
}

.mm-cs-feature__img.is-active {
    z-index:        1;
    opacity:        1;
    pointer-events: auto;
}

/* Nessun video: leggero zoom al passaggio del mouse sulla card. */
.mm-cs-feature:not(.mm-cs-feature--has-video):hover .mm-cs-feature__img.is-active {
    transform: scale(1.05);
}

/* Video presente: l'immagine resta ferma (niente zoom, evitiamo il doppio
   movimento), e' il video che dissolve sopra di lei al passaggio del mouse. */
.mm-cs-feature__video {
    position:       absolute;
    inset:          0;
    z-index:        2;
    width:          100%;
    height:         100%;
    object-fit:     cover;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.5s ease;
    border:         0;
}

/* L'iframe YouTube non supporta object-fit sul contenuto interno: lo
   ingrandiamo leggermente per coprire l'area come un video "cover", visto
   che i controlli sono comunque disattivati (controls=0). */
.mm-cs-feature__video--youtube {
    width:  calc(100% + 40px);
    height: calc(100% + 40px);
    left:   -20px;
    top:    -20px;
}

/* L'opacity scatta quando il video ha DAVVERO iniziato a riprodursi
   (classe aggiunta via JS all'evento "playing"/onStateChange), non al
   semplice hover: cosi' non si vede un istante di frame nero/vuoto del
   video prima che parta, la dissolvenza mostra gia' contenuto reale. */
.mm-cs-feature--has-video.is-video-active .mm-cs-feature__video {
    opacity: 1;
}

.mm-cs-feature__nav {
    position: relative;
    z-index:  6;
    display:  flex;
    gap:      var(--spacing-8, 8px);
}

/* Bordo bianco semi-trasparente (da Figma), non il bianco pieno di
   .btn-icon--outline-bianco: qui l'icona sta sempre sopra una foto, mai
   su uno sfondo scuro pieno, quindi un bordo più leggero si integra meglio. */
.mm-cs-feature__nav .btn-icon--outline-bianco {
    border-color: var(--colori-opacizzati-bianco-50, rgba(240, 238, 234, 0.5));
}

/* Il componente icona di default punta "avanti" (>) — per "indietro"
   basta specchiarlo, stessa icona riutilizzata senza duplicarla (stesso
   trucco già usato per le frecce delle Recensioni). */
.mm-cs-feature__prev .btn-icon__icon {
    transform: scaleX(-1);
}

.mm-cs-feature__panel {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    flex:            40 1 0;
    min-width:       0;
    padding:         var(--spacing-40, 40px);
    border-radius:   var(--mm-radius-lg, 16px);
    background:      var(--colori-pieni-bianco-400, #F4F1ED);
    box-shadow: var(--mm-shadow-card);
}

.mm-cs-feature__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
}

.mm-cs-feature__stat {
    display:     flex;
    align-items: baseline;
    color:       var(--colori-pieni-blu-default, #162640);
}

/* .number-medium/.number-small hanno font-size diversi (112px/72px) ma
   la stessa classe .number-* imposta line-height:normal (vedi
   _typography.css): a dimensioni diverse "normal" produce un'interlinea
   proporzionalmente diversa, quindi i due elementi finiscono con
   un'altezza di riga diversa e il bordo inferiore (flex-end) non
   corrisponde alla vera baseline del testo — da qui il disallineamento.
   Forzando line-height:1 su entrambi ed allineando su "baseline" invece
   di "flex-end" i caratteri restano sulla stessa linea di base. */
.mm-cs-feature__stat .number-medium,
.mm-cs-feature__stat .number-small {
    line-height: 1;
}

.mm-cs-feature__stat-desc {
    margin: 0;
    color:  var(--colori-pieni-blu-default, #162640);
}

.mm-cs-feature__bottom {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-16, 16px);
}

.mm-cs-feature__desc {
    margin: 0;
    color:  var(--colori-pieni-blu-300, #616B7D);
}

.mm-cs-feature__cta {
    width:    100%;
    /* Sopra al link-overlay (z-index:5) che rende cliccabile tutta la
       card: senza, il mouse hovera' sempre l'overlay invece del bottone
       vero, e l'animazione hover del bottone (sweep/icona) non scatta
       piu'. Il click porta comunque alla stessa URL dell'overlay, quindi
       nessun cambiamento funzionale, solo l'hover torna visibile. */
    position: relative;
    z-index:  6;
}

/* Freccia gradiente: alternativa compatta al bottone "Leggi di piu'" per
   la card impilata su mobile (vedi Figma Mockup, node 1914:9686). Nascosta
   di default; mostrata solo sotto i 767px (vedi media query). */
.mm-cs-feature__mobile-cta {
    display:  none;
    /* Stesso motivo del .mm-cs-feature__cta qui sopra: sopra al
       link-overlay, cosi' anche la freccia CTA mobile mantiene il
       proprio hover/tap state. */
    position: relative;
    z-index:  6;
}

@media (max-width: 1080px) {
    .mm-cs-feature {
        height:         auto !important;
    }

    .mm-cs-feature__media {
        flex:         none;
        width:        100%;
        height:       auto;
        aspect-ratio: 4 / 3;
    }

    .mm-cs-feature__panel {
        flex:  none;
        width: 100%;
        gap: var(--spacing-80, 80px);
        padding: var(--spacing-24, 24px);

    }
}

/* -------------------------------------------------------------
   WRAPPER — .google-rating
   ------------------------------------------------------------- */
.google-rating {
    display:        flex;
    flex-direction: column;
    gap:            var(--spacing-8, 8px);
    align-items:    flex-start;
    overflow: visible;
}
 
 
/* -------------------------------------------------------------
   AVATARS — fila sovrapposta
   ------------------------------------------------------------- */
.google-rating__avatars {
    display:     flex;
    align-items: center;
    overflow: visible;
    margin-left: 10px;
}
 
.google-rating__avatar {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    margin-left:  -12px !important;
    position:      relative;
    will-change:   transform, opacity;
}

.google-rating__avatar:last-child {
    margin-right: 0;
}

.google-rating__avatar img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--colori-opacizzati-bianco-10);
}

/* Quando l'avatar e' cliccabile (link alla recensione): il link deve
   riempire lo stesso cerchio che riempiva l'img da sola. z-index sopra
   agli avatar successivi (che si sovrappongono con margin-left negativo)
   cosi' l'area cliccabile non resta nascosta sotto quello dopo. */
.google-rating__avatar-link {
    display: block;
    width:   100%;
    height:  100%;
    position: relative;
    z-index: 1;
}

.google-rating__avatar-link:focus-visible {
    outline: 2px solid var(--colori-pieni-bianco-default, #fff);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Touch target: gli avatar si sovrappongono, quindi l'area cliccabile del
   link (tutti tranne l'ultimo) si ferma dove inizia l'avatar successivo.
   L'immagine resta grande uguale (overflow visibile, ritagliato dal cerchio
   dell'avatar): cambia solo l'area del link, non la grafica. */
.google-rating__avatar { --mm-av-overlap: 12px; --mm-av-size: 40px; }
.google-rating__avatar:not(:last-child) .google-rating__avatar-link {
    width: calc(100% - var(--mm-av-overlap));
}
.google-rating__avatar:not(:last-child) .google-rating__avatar-link img {
    width:     var(--mm-av-size);
    max-width: none;
}
 
 
/* -------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------- */
.google-rating__content {
    display:        flex;
    flex-direction: column;
    gap:            0;
}
 
 
/* -------------------------------------------------------------
   STELLE
   ------------------------------------------------------------- */
.google-rating__stars {
    display:     flex;
    align-items: center;
    gap:         var(--spacing-2, 2px);
}
 
.google-rating__star {
    width:       20px;
    height:      20px;
    color:       #F5A623;
    flex-shrink: 0;
}
 
.google-rating__star--empty {
    color: var(--colori-pieni-grigio-300);
}
 
 
/* -------------------------------------------------------------
   BOTTOM — score + label
   ------------------------------------------------------------- */
.google-rating__bottom {
    display:        flex;
    align-items:    center;
    gap:            var(--spacing-4, 4px);
    font-family:    var(--font-body);
    font-weight:    var(--weight-regular);
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line);
    white-space:    wrap;
}

/* Quando la voce rating+label e' cliccabile (link a Google, vedi
   render_google_rating()): niente sottolineatura/colore da link nativo,
   resta identica visivamente ma con un feedback leggero all'hover. */
.google-rating__bottom-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.google-rating__bottom-link:hover,
.google-rating__bottom-link:focus-visible {
    opacity: 0.75;
}

.google-rating__bottom-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--spacing-2, 2px);
}

.google-rating__score {
    color: var(--colori-pieni-blu-default);
}

.google-rating__label {
    color: var(--colori-pieni-blu-default);
}

.google-rating__description {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--body-sm-size);
    line-height: var(--body-sm-line);
    color: var(--colori-pieni-grigio-default);
}

/* ---------- Display (≥2560px): variante "Large" ---------- */
@media (min-width: 2560px) {
    .google-rating__avatar {
        --mm-av-overlap: 28px;
        --mm-av-size:    64px;
        width:        64px;
        height:       64px;
        margin-right: -16px !important;
    }

    .google-rating__bottom {
        font-size:   var(--body-sm-size);
        line-height: var(--body-sm-line);
    }

    .google-rating__description {
        color: var(--colori-pieni-blu-200);
    }
}

/* Cursore personalizzato (Figma Design System, node 753:4310 "Cursore") */
.mm-cursor {
    position: fixed;
    isolation: isolate;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Stessa forma/angolazione del gradiente di bottoni ed etichette
       (radiale, centrato in basso), non il lineare a 111deg di
       --gradient-brand usato altrove. */
    background-image: var(--sfondo-piccolo);
    padding: var(--spacing-4, 4px) var(--spacing-8, 8px);
    border-radius: var(--spacing-16, 16px);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: transform;
    top: 0;
    left: 0;
}

/* Stessa texture "noise" dei bottoni/etichette --gradiente: sopra il
   gradiente, sotto l'etichetta di testo. */
.mm-cursor::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    border-radius:  inherit;
    pointer-events: none;
    opacity:        0.1;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-repeat: repeat;
    background-size:   120px 120px;
}

.mm-cursor.is-visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.mm-cursor__label {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--caption-size);
    line-height: var(--caption-line);
    color: var(--colori-pieni-bianco-default, #F0EEEA);
    text-transform: uppercase;
}

.mm-cursor-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}


@media (max-width: 1080px) {
    .mm-cursor {
        display: none !important;
    }
    
}

@media(max-width: 767px) {
    /* Card Caso Studio (card grande, "in evidenza"): su mobile diventa
       un'unica card arrotondata con ombra leggera — testo+freccia in alto,
       immagine sotto. Sostituisce il layout desktop immagine+pannello
       (vedi Figma Mockup, node 1914:9686 "Caso Studio"). */
    .mm-cs-feature {
        background:    var(--colori-pieni-bianco-400, #F4F1ED);
        border-radius: var(--mm-radius-xl, 24px);
        box-shadow:    var(--mm-shadow-card, 0 0 25px 0 rgba(22, 38, 64, 0.05));
        padding:       var(--spacing-40, 40px) var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-16, 16px);
        gap:           var(--spacing-16, 16px);
        display: flex;
        flex-direction: column;
    }
    .google-rating__avatars{
        margin-left: 0px;
        margin-right: 0px;
    }
    .mm-madsuite-product__rating{
        width: 100% !important;
    }
    .google-rating__label{
        text-align: center;
    }

    .mm-review {
        box-shadow: var(--mm-shadow-card, 0 0 25px 0 rgba(22, 38, 64, 0.05));
    }

    .mm-cs-feature__media {
        order:         2;
        aspect-ratio:  unset;
        height:        400px;
        padding:       0;
        background:    none;
    }

    .mm-cs-feature__panel {
        order:           1;
        flex-direction:  row;
        align-items:     flex-start;
        justify-content: space-between;
        gap:             var(--spacing-16, 16px);
        padding:         0;
        border-radius:   0;
        background:      transparent;
        box-shadow: none;
    }

    .mm-cs-feature__text {
        flex:      1 1 auto;
        min-width: 0;
    }

    .mm-cs-feature__mobile-cta {
        display: inline-flex;
        flex-shrink: 0;
    }

    .mm-cs-feature__bottom {
        display: none;
    }

    .google-rating {
        gap: var(--spacing-4, 4px);
        align-items: center;
    }
    .google-rating__avatar {
        width: 40px;
        height: 40px;
        margin-right: -6px !important;
    }
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.ticker-container {
    width:100%;
    overflow:hidden;
    display: flex;
    padding: var(--spacing-16, 16px) var(--spacing-0, 0.001px);
    align-items: center;
    border-radius: 0.001px;
    border-top: 1px solid var(--colori-pieni-grigio-200);
    border-right: 0.001px solid var(--colori-pieni-grigio-200);
    border-bottom: 1px solid var(--colori-pieni-grigio-200);
    border-left: 0.001px solid var(--colori-pieni-grigio-200);
}

.ticker-wrap {
    width:100%;
    overflow:hidden;
    display:flex;
}


.ticker-track {
    display:flex;
    width:max-content;
    animation:
        scroll-text 50s linear infinite;
}


.ticker-set {
    display:flex;
    align-items:center;
}


.ticker-item {
    display:flex;
    align-items:center;
    white-space:nowrap;
    margin-right: var(--spacing-16, 16px);
}

.ticker-separator .ticker-text{
    color: var(--colori-pieni-blu-default);
    font-family: var(--font-heading);
    font-size: var(--h4-size);
    font-style: normal;
    font-weight: var(--weight-regular);
    line-height: var(--h4-line);
    letter-spacing: -0.4px;
}

.ticker-separator {
    margin-left: var(--spacing-16, 16px);
}


@media (hover:hover) {

    .ticker-wrap:hover .ticker-track {
        animation-play-state:paused;
    }

}

@media(min-width:2560px){
    .mm-cs-feature__panel{
        padding: var(--spacing-80, 80px);
    }
    .mm-cs-feature__bottom{
        gap: var(--spacing-40, 40px);
    }
}


/* =========================================================
   BANNER CARD
   Figma: Mockup, node 2061:17544 "Contattaci". Usata es. nel banner
   finale della pagina Agenzia ("Unisciti al team" / "La nostra
   evoluzione"): stesso componente, solo testo diverso (vedi
   render_banner_card() in components.php).

   Variante 'standard' (default): due card affiancate — vedi il wrapper
   che le mette in riga es. .mm-banner-grid nel template della pagina.
   Variante 'full' (dimensione="full"): NON ANCORA implementata, solo
   la classe base c'e' gia' (mm-banner-card--full), pronta per quando
   servira' altrove.
   ========================================================= */
.mm-banner-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-40, 40px);
	padding: var(--spacing-80, 80px);
	background-color: var(--colori-pieni-bianco-400, #F4F1ED);
	border-radius: var(--mm-radius-xl, 24px);
	box-shadow: 0 0 12.5px 0 rgba(22, 38, 64, 0.05);
    justify-content: space-between
}
.mm-banner-card__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-8, 8px);
	width: 100%;
}
.mm-banner-card__title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
}
.mm-banner-card__desc {
	margin: 0;
	color: var(--colori-pieni-blu-300, #616B7D);
}
.mm-banner-card__btn {
	width: 100%;
}

@media (max-width: 1080px) {
	.mm-banner-card {
		padding: var(--spacing-80, 80px);
		gap: var(--spacing-40, 40px);
	}
}
@media (max-width: 767px) {
	.mm-banner-card {
		padding: var(--spacing-40, 40px);
	}
}

/* =========================================================
   TEAM MEMBER CARD
   Figma: Design System, node 1317:909 "Card". Card foto + nome + ruolo
   con overlay sfumato scuro (vedi render_team_member_card() in
   components.php). Larghezza flessibile (si adatta al contenitore
   griglia/slider che la usa), non fissa a 366px come in Figma.
   ========================================================= */
.mm-team-member-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 366 / 480;
	padding: var(--spacing-16, 16px);
	border-radius: var(--mm-radius-md, 16px);
	overflow: hidden;
	background-color: var(--colori-pieni-blu-default, #162640);
}
.mm-team-member-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Evita che il browser avvii un drag nativo dell'immagine quando si
	   trascina la card per scorrere lo slider (assets/js/team-slider.js). */
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}
.mm-team-member-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(22, 38, 64, 0.1) 50%, var(--colori-pieni-blu-default, #162640) 100%);
	pointer-events: none;
}
.mm-team-member-card__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

.mm-team-member-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -360%;
  width: 300%;
  transition: left 1.8s cubic-bezier(.16,1,.3,1);
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.08) 70%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(8px);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 2;
}
.mm-team-member-card:hover::after {
  left: 160%;
}
@media (prefers-reduced-motion: reduce) {
  .mm-team-member-card::after { transition: none; }
}

/* Tablet/mobile (<=1080px): il riflesso (strato 300% con blur + skew su
   ogni card, raddoppiate dal loop dello slider) pesa molto sulla GPU
   mentre lo slider scorre ed e' causa di lag: lì non viene disegnato. */
@media (max-width: 1080px) {
  .mm-team-member-card::after { display: none; }
}

.mm-team-member-card__name {
	margin: 0;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}
.mm-team-member-card__role {
	margin: 0;
	color: var(--colori-pieni-blu-50,#beb2ca);
}
/* ── Rows / Cols reveal (riutilizzabili) ──────────────────────────────────
   data-mm-rows-reveal → righe impilate, linea SOTTO (border-bottom) che si
                         disegna da sinistra a destra.
   data-mm-cols-reveal → colonne affiancate, linea a SINISTRA (border-left)
                         che si disegna dall'alto verso il basso.
   Ogni figlio diretto del contenitore = un elemento della cascata. I testi
   che salgono sono i suoi figli (o quelli del suo unico figlio, se c'e' un
   wrapper tipo "card"). Attributi e variabili (data-mm-rr-text,
   data-mm-rr-line, --mm-rr-delay, --mm-rr-line-color) li imposta
   mm-animations.js: senza JS o con prefers-reduced-motion resta statico. */

/* Testi */
[data-mm-rows-reveal].is-armed [data-mm-rr-text],
[data-mm-cols-reveal].is-armed [data-mm-rr-text] {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--mm-rr-delay, 0s),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--mm-rr-delay, 0s);
}
[data-mm-rows-reveal].is-armed.is-in [data-mm-rr-text],
[data-mm-cols-reveal].is-armed.is-in [data-mm-rr-text] {
	opacity: 1;
	transform: none;
}

/* Linea: il bordo vero resta (stesso ingombro) ma trasparente; quella
   visibile e' il ::after, che si puo' animare. */
[data-mm-rows-reveal].is-armed [data-mm-rr-line],
[data-mm-cols-reveal].is-armed [data-mm-rr-line] {
	position: relative;
}
[data-mm-rows-reveal].is-armed [data-mm-rr-line]::after,
[data-mm-cols-reveal].is-armed [data-mm-rr-line]::after {
	content: '';
	position: absolute;
	background: var(--mm-rr-line-color, rgba(22, 38, 64, 0.1));
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--mm-rr-delay, 0s) + 0.08s);
}

/* Righe: linea sotto, da sinistra a destra */
[data-mm-rows-reveal].is-armed [data-mm-rr-line] {
	border-bottom-color: transparent;
}
[data-mm-rows-reveal].is-armed [data-mm-rr-line]::after {
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	transform: scaleX(0);
	transform-origin: left center;
}

/* Colonne: linea a sinistra, dall'alto verso il basso */
[data-mm-cols-reveal].is-armed [data-mm-rr-line] {
	border-left-color: transparent;
}
[data-mm-cols-reveal].is-armed [data-mm-rr-line]::after {
	top: 0;
	bottom: 0;
	left: -1px;
	width: 1px;
	transform: scaleY(0);
	transform-origin: center top;
}

[data-mm-rows-reveal].is-armed.is-in [data-mm-rr-line]::after,
[data-mm-cols-reveal].is-armed.is-in [data-mm-rr-line]::after {
	transform: none;
}

/* Card team: zoom-in leggero della foto all'hover, insieme al riflesso
   (::after). Stessa curva del riflesso ma piu' corta, cosi' lo zoom si
   sente senza "trascinarsi". Solo su dispositivi con hover vero: su
   touch lo slider si trascina e l'hover resterebbe "appiccicato". */
.mm-team-member-card__img {
	transition: transform 0.9s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
	.mm-team-member-card:hover .mm-team-member-card__img {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-team-member-card__img { transition: none; }
	.mm-team-member-card:hover .mm-team-member-card__img { transform: none; }
}

[data-mm-rows-reveal][data-mm-reveal-side="top"].is-armed [data-mm-rr-line] {
  border-top-color: transparent;
}
[data-mm-rows-reveal][data-mm-reveal-side="top"].is-armed [data-mm-rr-line]::after {
  top: -1px;
  bottom: auto;
}