/* ============================================================
   Pagine di servizio — CSS di supporto alla libreria sezioni.

   Contiene SOLO ciò che prima arrivava da Gutenberg (stili inline
   sui blocchi e classi .wp-block-*). Tutto il resto continua ad
   arrivare dal CSS critico in header.php: le classi UIkit usate
   sono le stesse della versione a blocchi.

   Caricato solo sui template page-servizio-*.php.
   ============================================================ */


/* --- Hero: colore per famiglia di servizio -------------------
   Il colore arriva come custom property dalla variante PHP
   (seo | analytics | ai), così il CSS resta uno solo.
   ------------------------------------------------------------ */

.mc-hero {
    background: var(--mc-hero-bg, #007df9);
}

.mc-hero__occhiello {
    margin-bottom: 10px;
}

/* Hero su fondo scuro: testo in negativo. */
.mc-hero--scura .mc-hero__occhiello {
    color: #fff;
    opacity: .85;
}

/* Hero su fondo chiaro (es. #e2f2ff della famiglia AI): testo scuro.
   La luminanza del colore decide da sola quale dei due casi si applica,
   vedi mc_colore_chiaro() in includes/sections.php. */
.mc-hero--chiara .mc-hero__occhiello {
    color: #0a5cd0;
}

.mc-hero--chiara h1,
.mc-hero--chiara .uk-text-lead,
.mc-hero--chiara .uk-text-bold {
    color: #222;
}

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


/* --- Bottone pill --------------------------------------------
   Sostituisce il vecchio bottone verde nella hero.
   Sul fondo blu diventa bianco con testo blu, per il contrasto.
   ------------------------------------------------------------ */

.mc-button-pill {
    display: inline-block;
    padding: 16px 34px;
    background: #007df9;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-transform: none;
    box-shadow: 0 4px 12px rgba(0, 125, 249, .28);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.mc-button-pill:hover,
.mc-button-pill:focus {
    background: #0a5cd0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 125, 249, .4);
}

/* Solo sui fondi scuri il bottone va in negativo.
   Sulla hero chiara resta blu, altrimenti sarebbe bianco su azzurro. */
.uk-section-primary .mc-button-pill,
.mc-hero--scura .mc-button-pill {
    background: #fff;
    color: #0a5cd0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.uk-section-primary .mc-button-pill:hover,
.uk-section-primary .mc-button-pill:focus,
.mc-hero--scura .mc-button-pill:hover,
.mc-hero--scura .mc-button-pill:focus {
    background: #fff;
    color: #004285;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}

/* Chi preferisce non vedere animazioni non le vede. */
@media (prefers-reduced-motion: reduce) {

    .mc-button-pill,
    .mc-tool {
        transition: none;
    }

    .mc-button-pill:hover,
    .mc-button-pill:focus,
    .mc-tool:hover {
        transform: none;
    }
}


/* --- Evidenziatore giallo sui titoli --------------------------
   Uso: <span class="mc-hl">parola</span>
   ------------------------------------------------------------ */

.mc-hl {
    font-style: italic;
    display: inline-block;
    position: relative;
    padding: 0 6px;
    z-index: 0;
}

.mc-hl::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 12px;
    background: #fcf1c3;
    border-radius: 3px;
    z-index: -1;
}


/* --- Sezione strumenti proprietari ---------------------------- */

.mc-tools__intro {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.mc-tool {
    position: relative;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    padding: 30px 24px 24px;
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mc-tool:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .09);
}

/* Gli strumenti già online si distinguono da quelli in arrivo. */
.mc-tool--live {
    background: linear-gradient(180deg, #f6fbff 0%, #fff 60%);
}

.mc-tool--soon {
    opacity: .82;
}

.mc-tool__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}

.mc-tool__badge--live { background: #e6f7ec; color: #1a7f3c; }
.mc-tool__badge--beta { background: #fff3e0; color: #a35b00; }
.mc-tool__badge--soon { background: #eef1f5; color: #5a6b7d; }

.mc-tool__logo {
    height: 36px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
}

.mc-tool__logo img {
    max-height: 36px;
    max-width: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Logo quadrati (favicon o simboli): stessa massa visiva dei logotipi
   orizzontali, altrimenti nella griglia sembrano più piccoli. */
.mc-tool__logo--mark img {
    max-height: 40px;
    max-width: 40px;
    border-radius: 8px;
}

.mc-tool__nome {
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.mc-tool__testo {
    margin: 0;
    color: #55606b;
    font-size: .95rem;
    line-height: 1.55;
}

.mc-tool__link {
    display: inline-block;
    margin-top: 14px;
    font-size: .9rem;
    font-weight: 600;
}


/* --- Icone delle card ----------------------------------------
   Gutenberg le stampava con style="width:auto;height:100px".
   ------------------------------------------------------------ */

.mc-card__icona {
    height: 100px;
    width: auto;
}


/* --- Immagine delle sezioni testo + immagine -----------------
   Gutenberg usava style="width:450px" su alcune.
   ------------------------------------------------------------ */

.mc-media__img {
    max-width: 450px;
    width: 100%;
    height: auto;
}


/* --- Freccia di scroll ---------------------------------------
   Era style="width:50px;height:50px".
   ------------------------------------------------------------ */

.mc-freccia img {
    width: 50px;
    height: 50px;
}


/* --- Avatar recensioni ---------------------------------------
   Era style="width:73px;height:73px" + is-style-rounded.
   ------------------------------------------------------------ */

.mc-avatar {
    width: 73px;
    height: 73px;
    object-fit: cover;
}

.mc-recensione__testo {
    margin-top: 10px;
}

.mc-badge-verificata {
    top: -14px;
    right: 14px;
}


/* --- Sfondo di sezione ---------------------------------------
   L'azzurro chiaro al posto del grigio: è lo stesso #e2f2ff che la
   home usa già, così le sezioni del sito parlano la stessa lingua.
   uk-section-muted resta sull'elemento perché porta le regole del
   tema sul colore del testo; qui si cambia solo lo sfondo.
   ------------------------------------------------------------ */

.mc-section-azzurra {
    background: #e2f2ff;
}


/* --- Colore testo -------------------------------------------
   Sostituisce has-nero-color di Gutenberg (#222 in palette).
   ------------------------------------------------------------ */

.mc-testo-scuro {
    color: #222;
}

.uk-section-primary .mc-testo-scuro,
.uk-section-secondary .mc-testo-scuro {
    color: #fff;
}


/* --- Slider orizzontale su mobile ----------------------------
   IMPORTANTE: il padding laterale dello slider in header.php
   è agganciato a .is-layout-flow.wp-block-column, cioè a classi
   generate da Gutenberg. Senza i blocchi quelle regole non
   matchano più: qui le replico su .mc-slider-item.
   Vedi header.php, blocco @media (max-width: 640px).
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    .uk-grid-medium.slider-mobile > .mc-slider-item:first-child {
        padding-left: 30px;
    }

    .uk-grid-medium.slider-mobile > .mc-slider-item:last-child {
        padding-right: 30px;
    }
}


/* --- Casi studio ---------------------------------------------
   Sostituiscono le vecchie gallerie di screenshot: qui il
   protagonista è il risultato, non il mockup del telefono.
   ------------------------------------------------------------ */

.mc-casi__intro {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.mc-caso {
    text-align: left;
    padding: 0 0 20px;
    overflow: hidden;
    /* Lo dava .uk-card-body, che abbiamo tolto dal markup: serve a
       contenere i margini dei figli invece di farli uscire dalla card. */
    display: flow-root;
}

.mc-caso__media {
    display: block;
    margin-bottom: 18px;
}

.mc-caso__media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mc-caso__cliente,
.mc-caso__risultato,
.mc-caso__testo,
.mc-caso__link {
    padding-left: 24px;
    padding-right: 24px;
}

.mc-caso__cliente {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #007df9;
    margin: 0 0 6px;
}

.mc-caso__risultato {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 10px;
}

.mc-caso__risultato a {
    color: #222;
}

.mc-caso__risultato a:hover {
    color: #007df9;
    text-decoration: none;
}

.mc-caso__testo {
    color: #55606b;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 12px;
}

.mc-caso__link a {
    font-weight: 600;
    font-size: .92rem;
}


/* --- Tabella --------------------------------------------------
   Stesso aspetto delle tabelle degli articoli, ma costruita su
   markup semantico: <thead> con <th>, prima colonna <th scope="row">.
   Il bordo è quello standard, 1px #e8eef5: le differenze fra righe
   e colonne le fa lo sfondo, mai il bordo.
   ------------------------------------------------------------- */

.mc-tabella__intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Contenitore: è lui che scorre in orizzontale sui piccoli schermi. */
.mc-tabella__scorri {
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 125, 249, .3) transparent;
    box-shadow:
        0 4px 10px rgba(0, 30, 80, .06),
        0 14px 32px rgba(0, 125, 249, .10),
        0 30px 64px rgba(0, 30, 80, .14);
}

/* Serve perché si veda dove sta il fuoco quando ci si scorre da tastiera. */
.mc-tabella__scorri:focus-visible {
    outline: 2px solid #007df9;
    outline-offset: 3px;
}

.mc-tabella__scorri::-webkit-scrollbar {
    height: 6px;
}

.mc-tabella__scorri::-webkit-scrollbar-track {
    background: transparent;
}

.mc-tabella__scorri::-webkit-scrollbar-thumb {
    background: rgba(0, 125, 249, .35);
    border-radius: 999px;
}

.mc-tabella__dati {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    font-size: .95rem;
}

/* La didascalia dà un nome alla tabella per gli screen reader:
   a schermo non si vede, ma non usa display:none perché così
   resterebbe fuori anche dalla lettura assistita. */
.mc-tabella__didascalia {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mc-tabella__cella {
    padding: 18px 20px;
    vertical-align: middle;
    color: #1a2332;
    line-height: 1.5;
    text-align: left;
    border-top: 1px solid #e8eef5;
}

.mc-tabella__cella--centro {
    text-align: center;
}

.mc-tabella__cella--destra {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Intestazione di colonna. */
.mc-tabella__dati thead .mc-tabella__cella {
    background: linear-gradient(135deg, #007df9 0%, #0a5cd0 100%);
    color: #fff;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 13px 20px;
    border-top: 0;
    white-space: nowrap;
}

/* Intestazione di riga: la prima colonna. Niente maiuscoletto,
   qui il testo è contenuto e va letto normalmente. */
.mc-tabella__cella--titolo {
    font-weight: 700;
    color: #0a2540;
}

.mc-tabella__dati tbody tr:hover .mc-tabella__cella {
    background: #f3f8ff;
}

/* Riga in evidenza: il segno è lo sfondo, non un bordo diverso. */
.mc-tabella__riga--evidenza .mc-tabella__cella {
    background: #f6fbff;
}

.mc-tabella__riga--evidenza:hover .mc-tabella__cella {
    background: #eaf4ff;
}

.mc-tabella__dati--compatta .mc-tabella__cella {
    padding: 12px 14px;
    font-size: .88rem;
}

.mc-tabella__dati--compatta thead .mc-tabella__cella {
    padding: 10px 14px;
}

.mc-tabella__nota {
    max-width: 720px;
    margin: 20px auto 0;
    text-align: center;
    color: #55606b;
    font-size: .92rem;
    line-height: 1.55;
}

@media (max-width: 640px) {

    .mc-tabella__scorri {
        border-radius: 14px;
    }

    /* Sotto questa larghezza le colonne diventerebbero illeggibili:
       meglio far scorrere la tabella che comprimerla. */
    .mc-tabella__dati {
        min-width: 620px;
    }

    .mc-tabella__cella {
        padding: 14px 16px;
        font-size: .88rem;
        line-height: 1.45;
    }

    .mc-tabella__dati thead .mc-tabella__cella {
        padding: 10px 16px;
        font-size: .62rem;
    }

    .mc-tabella__scorri-nota {
        display: block;
        margin: 10px 0 0;
        text-align: right;
        color: #55606b;
        font-size: .8rem;
    }
}

/* Frammenti di codice dentro una cella (es. le tre forme di URL). */
.mc-tabella__cella code {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 7px;
    background: #f3f8ff;
    border: 1px solid #e8eef5;
    border-radius: 6px;
    font-size: .85em;
    color: #0a5cd0;
    white-space: nowrap;
}

.mc-tabella__dati thead .mc-tabella__cella code {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Suggerimento di scorrimento: nascosto di default, compare solo sotto
   i 640px dove il min-width della tabella garantisce l'overflow. */
.mc-tabella__scorri-nota {
    display: none;
}

/* Figura di chiusura della tabella: è la conclusione, quindi respira
   e sta al centro, senza card intorno. */
.mc-tabella__figura {
    margin: 28px auto 0;
    max-width: 760px;
    text-align: center;
}

.mc-tabella__figura img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

/* Link d'azione: la terza scelta dopo la pillola piena e quella vuota.
   Niente classe uk-button, quindi niente ombra e niente padding da pillola. */
.mc-link-azione {
    display: inline-block;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.4;
    color: #007df9;
    text-decoration: none;
}

.mc-link-azione::after {
    content: ' \2192';
    display: inline-block;
    transition: transform .2s ease;
}

.mc-link-azione:hover {
    color: #0a5cd0;
    text-decoration: none;
}

.mc-link-azione:hover::after {
    transform: translateX(3px);
}

/* Icona in cima al riquadro di un piano: stessa misura per tutti,
   così le tre card partono allineate anche se i disegni hanno
   proporzioni diverse fra loro. */
.mc-formato__icona {
    margin-bottom: 14px;
}

.mc-formato__icona img {
    display: block;
    width: auto;
    height: 64px;
    max-width: 100%;
}


/* --- Casi in vetrina -------------------------------------------
   Il grafico è la prova, quindi è grande: occupa tutta la larghezza
   della card. Il commento sta chiuso in un accordion, così la card
   resta corta e chi vuole approfondire apre.
   --------------------------------------------------------------- */

.mc-vetrina__intro,
.mc-vetrina__chiusura {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.mc-vetrina__caso {
    text-align: left;
    border: 1px solid #e8eef5;
    border-radius: 14px;
}

.mc-vetrina__nome {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #0a2540;
}

.mc-vetrina__badge {
    display: inline-block;
    margin: 8px 0 0;
    padding: 3px 10px;
    border-radius: 6px;
    background: #007df9;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mc-vetrina__pattern {
    margin: 12px 0 0;
    font-style: italic;
    font-size: .95rem;
    color: #1a2332;
}

/* Il grafico esce dal padding della card: è la prova, non un contorno. */
.mc-vetrina__grafico {
    margin: 18px 0 4px;
}

.mc-vetrina__grafico img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Accordion: <details> nativo, quindi funziona anche senza JavaScript. */
.mc-vetrina__dettaglio {
    margin-top: 8px;
    border-top: 1px solid #e8eef5;
}

.mc-vetrina__titoletto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0 12px;
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #0a2540;
    cursor: pointer;
    list-style: none;
}

.mc-vetrina__titoletto::-webkit-details-marker {
    display: none;
}

.mc-vetrina__titoletto::after {
    content: '▼';
    flex: 0 0 auto;
    font-size: .8rem;
    color: #17a458;
    transition: transform .3s ease;
}

.mc-vetrina__dettaglio[open] .mc-vetrina__titoletto::after {
    transform: rotate(180deg);
}

.mc-vetrina__titoletto--fisso {
    cursor: default;
}

.mc-vetrina__titoletto--fisso::after {
    content: none;
}

.mc-vetrina__titoletto:focus-visible {
    outline: 2px solid #007df9;
    outline-offset: 3px;
}

.mc-vetrina__note p {
    margin: 0 0 12px;
    font-size: .95rem;
    line-height: 1.6;
    color: #55606b;
}

.mc-vetrina__note p:last-child {
    margin-bottom: 0;
}

.mc-vetrina__nota {
    margin: 14px 0 0;
    font-size: .92rem;
}

.mc-vetrina__nota a {
    color: #007df9;
    font-weight: 600;
}

.mc-vetrina__modal-titolo {
    margin-top: 0;
    font-size: 1.6rem;
}

.mc-vetrina__info {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 2px;
}

/* Il bottone di chiusura del modal: la classe uk-modal-close-default dà la
   posizione e il comportamento, l'icona la mettiamo noi. */
.mc-vetrina__chiudi {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #55606b;
    background: none;
    border: 0;
    cursor: pointer;
}

.mc-vetrina__chiudi:hover {
    color: #0a2540;
}


/* --- Domande frequenti ---------------------------------------
   <details>/<summary>: nessun JavaScript, accessibile da tastiera,
   e i motori leggono tutte le risposte anche quando sono chiuse.

   Sta qui e non nei fogli di pagina. Era copiato dentro seo.css,
   seo-local.css e migrazione-seo.css: seo-audit usa la stessa
   sezione ma non ha un foglio suo, quindi le domande uscivano
   nude, con il triangolino del browser al posto del più.
   La sezione è di libreria, il suo stile deve stare nel CSS
   comune — altrimenti ogni landing nuova riparte rotta.
   ------------------------------------------------------------ */

.mc-faq__lista {
    border-top: 1px solid #e8eef5;
}

.mc-faq__voce {
    border-bottom: 1px solid #e8eef5;
}

.mc-faq__domanda {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 4px;
    cursor: pointer;
    font-size: 1.08rem;
    font-weight: 600;
    color: #222;
    list-style: none;
    transition: color .15s ease;
}

.mc-faq__domanda:hover { color: #007df9; }

.mc-faq__domanda::-webkit-details-marker { display: none; }
.mc-faq__domanda::marker { content: ''; }

.mc-faq__segno {
    width: 20px;
    height: 20px;
    flex: none;
    color: #8a95a3;
    transition: transform .2s ease;
}

/* Il "+" diventa "−" quando la risposta è aperta. */
.mc-faq__voce[open] .mc-faq__segno {
    transform: rotate(45deg);
    color: #007df9;
}

.mc-faq__risposta {
    padding: 0 4px 22px;
    font-size: 1rem;
    line-height: 1.65;
    color: #55606b;
    max-width: 46em;
}

@media (prefers-reduced-motion: reduce) {

    .mc-faq__domanda,
    .mc-faq__segno {
        transition: none;
    }
}


/* --- Modulo --------------------------------------------------
   La cornice attorno a un form del plugin. Lo stile dei campi resta
   quello di Forminator: qui si sistema solo il contorno, così un
   modulo non sembra incollato in mezzo alla pagina.
   ------------------------------------------------------------ */

.mc-modulo__intro {
    max-width: 46em;
    margin-left: auto;
    margin-right: auto;
}

.mc-modulo__card {
    border: 1px solid #e8eef5;
    border-radius: 14px;
}

.mc-modulo__logo {
    margin: 0 0 22px;
}

/* L'avviso su chi NON deve compilare: sta sopra i campi perché letto
   dopo non serve a niente. Barra a sinistra invece del riquadro giallo
   da messaggio d'errore — è un'informazione, non un allarme. */
.mc-modulo__avviso {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-left: 3px solid #007df9;
    background: #f4f9ff;
    font-size: .95rem;
    line-height: 1.6;
    color: #55606b;
}

.mc-modulo__nota {
    margin: 18px 0 0;
    font-size: .9rem;
    color: #7b8794;
}

/* Card scura: serve ai moduli disegnati in Forminator per stare su fondo
   blu (etichette bianche, pulsante a pillola bianca). Non è un vezzo — il
   colore dei campi lo decide il plugin, modulo per modulo, e cambiarlo
   significa aprire Forminator. Se il modulo è disegnato per fondo chiaro,
   questa classe non va usata: si otterrebbe bianco su bianco al contrario. */
.mc-modulo__card--scuro {
    background: #007df9;
    color: #fff;
    border: 0;
    border-radius: 14px;
}

.mc-modulo__card--scuro .mc-modulo__avviso {
    border-left-color: #fff;
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.mc-modulo__card--scuro .mc-modulo__avviso a {
    color: #fff;
    text-decoration: underline;
}

/* Un logo solo per tutti e due i fondi: su blu si schiarisce. */
.mc-modulo__card--scuro .mc-modulo__logo img {
    filter: brightness(0) invert(1);
}


/* --- Il form dentro la card ----------------------------------
   Forminator disegna i suoi campi da solo, modulo per modulo, dal
   pannello del plugin. Qui si riportano al linguaggio del sito le
   due cose che sono d'aspetto e non di contenuto: la forma dei campi
   e il pulsante d'invio.

   Sta nel tema e non nel CSS personalizzato del singolo modulo perché
   così vale per qualunque form finisca nella sezione: se domani il
   modulo dell'analisi diventa un altro, non si riparte da capo.

   Gli !important servono contro le regole del plugin, che usano l'id
   #forminator-module-<n> e da qui non si battono per specificità.
   ------------------------------------------------------------ */

/* Campi a pillola come nel modulo dei contatti (7887), dove l'effetto
   arrivava dal CSS personalizzato del singolo form. Qui vale per tutti. */
.mc-modulo__card .forminator-input,
.mc-modulo__card .forminator-field input,
.mc-modulo__card .forminator-textarea {
    border-radius: 999px !important;
}

/* La textarea a pillola non si può vedere: lì basta un angolo morbido. */
.mc-modulo__card .forminator-textarea {
    border-radius: 18px !important;
}

/* Il pulsante d'invio prende la pillola del sito, come .cta-button. */
.mc-modulo__card .forminator-button-submit {
    background-color: #007df9 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 18px 40px !important;
    font-size: 18px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
}

.mc-modulo__card .forminator-button-submit:hover,
.mc-modulo__card .forminator-button-submit:focus {
    background-color: #0063c6 !important;
    color: #fff !important;
}

/* Il pulsante da solo al centro dell'ultima riga, non appiccicato a sinistra. */
.mc-modulo__card .forminator-row-last .forminator-field {
    text-align: center;
}

/* Sulla card blu la pillola si inverte: bianca con testo blu. */
.mc-modulo__card--scuro .forminator-button-submit {
    background-color: #fff !important;
    color: #007df9 !important;
}

.mc-modulo__card--scuro .forminator-button-submit:hover,
.mc-modulo__card--scuro .forminator-button-submit:focus {
    background-color: #e8f2ff !important;
    color: #007df9 !important;
}


/* --- La collaborazione ----------------------------------------
   Due professionisti affiancati con un "+" in mezzo. Su mobile
   la coppia si impila e il "+" resta, ruotato in orizzontale:
   è l'unico elemento che dice "insieme" e va tenuto.

   Sta qui e non nei fogli di pagina: era copiato identico dentro
   ai-automation.css e seo-copywriting.css, le due landing che usano
   la sezione. Alla terza sarebbe diventato tre.
   ------------------------------------------------------------ */


.mc-insieme__intro {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.mc-insieme__coppia {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}

.mc-insieme__piu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    font-size: 1.7rem;
    font-weight: 300;
    color: #9aa7b4;
}

.mc-persona {
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    padding: 30px 28px;
    text-align: left;
}

/* La colonna di Mirko si distingue appena: è il suo sito. */
.mc-persona--io {
    background: linear-gradient(180deg, #f6fbff 0%, #fff 55%);
}

.mc-persona__ruolo {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7b8794;
    margin: 0 0 6px;
}

.mc-persona__nome {
    font-size: 1.4rem;
    line-height: 1.25;
    margin: 0 0 18px;
    color: #222;
}

.mc-persona__nome a {
    color: #222;
    border-bottom: 1px solid #e8eef5;
}

.mc-persona__nome a:hover {
    color: #007df9;
    border-bottom-color: #e8eef5;
    text-decoration: none;
}

.mc-persona__porta {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.mc-persona__porta li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-size: .95rem;
    line-height: 1.55;
    color: #444;
}

.mc-persona__porta li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfd8e3;
}

.mc-persona--io .mc-persona__porta li::before {
    background: #007df9;
}

.mc-persona__nota {
    font-size: .92rem;
    line-height: 1.5;
    color: #55606b;
    font-style: italic;
    margin: 0;
    padding-top: 15px;
    border-top: 1px solid #e8eef5;
}

.mc-insieme__risultato {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #222;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 0;
}

@media (max-width: 767px) {

    .mc-insieme__coppia {
        grid-template-columns: 1fr;
    }

    .mc-insieme__piu {
        width: auto;
        padding: 14px 0;
    }

    .mc-insieme__risultato {
        text-align: left;
    }
}


/* La testa della card: foto tonda e nome sulla stessa riga. Le foto
   qui sono un'eccezione voluta alla regola "Mirko solo nella hero":
   la sezione dice chi fa cosa, e due facce lo dicono meglio di due
   nomi. Senza foto la riga resta valida, con il solo nome. */
.mc-persona__testa {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
}

.mc-persona__foto {
    width: 64px;
    height: 64px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #eef4fb;
}

/* Nella testa il nome non porta più il margine che aveva da solo:
   lo spazio sotto lo dà .mc-persona__testa. */
.mc-persona__testa .mc-persona__nome {
    margin: 0;
}

/* Il ruolo è passato sotto il nome, quindi cambia il verso del margine. */
.mc-persona__ruolo {
    margin: 0 0 12px;
}

/* ══ Badge del ruolo nelle credenziali ═══════════════════════════
   Tre pesi, non tre colori a caso. Chi insegna è la credenziale più
   forte e prende il blu pieno; chi studia resta sull'azzurrina, che è
   il colore che avevano tutti prima; il programma partner è una nota a
   margine e sta a contorno, così non urla più forte di una docenza.

   La specificità è a due classi apposta: css/pagine/<slug>.css viene
   caricato dopo questo foglio e contiene ancora la regola base
   .mc-cred__ruolo, che con una classe sola vincerebbe.
   ============================================================== */
.mc-cred .mc-cred__ruolo--docente {
    background: #007df9;
    color: #fff;
}

.mc-cred .mc-cred__ruolo--allievo {
    background: #e2f2ff;
    color: #0a5cd0;
}

.mc-cred .mc-cred__ruolo--ambassador {
    background: #fff;
    color: #55606b;
    box-shadow: inset 0 0 0 1px #cfe0f2;
}

/* ══ Casi studio, la card in forma compatta ══════════════════════
   Come nell'archivio /casi-studio/: l'immagine arriva ai bordi invece
   di stare rientrata dentro il padding della card, e il blocco di testo
   si stringe. A parità di contenuto la card perde circa un quinto
   dell'altezza, che è quello che serve dentro una landing dove i casi
   studio sono una prova, non il contenuto principale.

   La classe .uk-card-body è stata tolta dal markup della card: portava 30px
   di padding su tutti i lati e non bastava sovrascriverla, perché un foglio
   inline dichiara .uk-container .uk-card-body { padding: 30px } con la stessa
   specificità ma più avanti nell'ordine. Ora il padding lo mette .mc-caso.
   ============================================================== */
/* Immagine a pieno taglio, con gli angoli alti raccordati alla card. */
.mc-caso .mc-caso__media {
    margin: 0 0 16px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

/* Rapporto fisso: senza, l'altezza della card dipende dalle proporzioni
   della foto caricata in WP e due card affiancate vengono diverse. */
.mc-caso .mc-caso__media img {
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
}

.mc-caso__risultato {
    font-size: 1.15rem;
    margin: 0 0 8px;
}

/* Il riassunto si ferma a tre righe. Quando in WP manca l'Estratto,
   WordPress ne genera uno dal contenuto e viene lungo e sconnesso:
   così la card resta della stessa altezza comunque. */
.mc-caso__testo {
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}