.elementor-kit-7{--e-global-color-primary:#0B3B9E;--e-global-color-secondary:#071A3C;--e-global-color-text:#4A5A77;--e-global-color-accent:#1E9BF0;--e-global-color-bianco:#FFFFFF;--e-global-color-superficie:#F6F9FD;--e-global-color-superficieblu:#EDF5FE;--e-global-color-bordoblu:#D7E8FB;--e-global-color-bordoneutro:#E4EBF5;--e-global-color-azzurrochiaro:#8CCBFB;--e-global-color-azzurrotenue:#BFDCFA;--e-global-color-testoalt:#3C4C66;--e-global-color-footer:#040F26;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.12em;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:1.18rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.35em;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-size:1.02rem;--e-global-typography-text-font-weight:500;--e-global-typography-text-line-height:1.72em;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:0.72rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:1.4px;background-color:#FFFFFF;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   METODO SYSTEMA — design layer
   Regola: tutto in @layer apx, ZERO !important, cosi' ogni
   controllo Elementor sovrascrive sempre queste regole.
   Fuori dal layer solo variabili, keyframes e guardia overflow.
   Spaziature dei container: NON qui, stanno nel builder.
   ============================================================ */

body{
  --ms-primary:#0B3B9E;
  --ms-navy:#071A3C;
  --ms-accent:#1E9BF0;
  --ms-text:#4A5A77;
  --ms-text-alt:#3C4C66;
  --ms-surface:#F6F9FD;
  --ms-surface-blue:#EDF5FE;
  --ms-border:#E4EBF5;
  --ms-border-blue:#D7E8FB;
  --ms-sky:#8CCBFB;
  --ms-sky-soft:#BFDCFA;
  --ms-footer:#040F26;
  --ms-shadow-blue:0 26px 54px -26px rgba(11,59,158,.34);
  --ms-shadow-deep:0 24px 48px -16px rgba(11,59,158,.45);
  --ms-radius:18px;
}

html{overflow-x:hidden}

/* ECCEZIONE CONSAPEVOLE, fuori da @layer.
   Il design ha un gradiente a TRE fermate (#F6F9FD 0% / #EAF3FE 46% / #FFF 100%)
   ma il controllo Sfondo di Elementor ne espone solo DUE. Questa regola deve
   stare fuori dal layer per battere la variabile di Elementor, altrimenti
   perde. Conseguenza: questo singolo gradiente non e' modificabile dal
   pannello — tutto il resto della sezione si'. */
.elementor .ms-sec-hero{
  background-image:linear-gradient(160deg,#F6F9FD 0%,#EAF3FE 46%,#FFFFFF 100%);
}

/* ECCEZIONE CONSAPEVOLE n.2, fuori da @layer.
   Le colonne di #interim nel design cambiano a 780px e 560px (letto nel
   sorgente: narrow = width < 560 -> 1 colonna, stack = width < 780 -> 2).
   Non sono i breakpoint di Elementor (1024/767) e non esiste un valore di
   auto-fit che le produca entrambe (a 780 servirebbe min <= 225.87, a 559
   min > 241.1). Quindi le due soglie stanno qui, fuori dal layer, perche'
   la variabile di Elementor e' anch'essa fuori dal layer e altrimenti vince.
   Il valore desktop (3 colonne) resta nel controllo: modificabile dal pannello. */
/* Le colonne di #interim ora stanno nel CONTROLLO Colonne del container, con i
   valori per tablet e mobile: 3 / 2 / 1. Le due media query che forzavano le
   soglie del design (780 e 560) sono state tolte, altrimenti vincerebbero sui
   valori scelti dal pannello e il controllo tornerebbe muto. */
}

/* ECCEZIONE CONSAPEVOLE n.3, fuori da @layer.
   Due regole base dell'elenco puntato di Elementor sono unlayered e non hanno
   un controllo corrispondente:
   - .elementor-icon-list-item{align-items:center} centra il check anche sulle
     voci a due righe; nel design sta in alto.
   - .elementor-icon-list-icon{width:icon-size*1.25} allarga lo span di 4.7px
     oltre l'icona, spostando il testo.
   Sono correzioni di struttura, non di stile: colore, dimensione e spaziatura
   dell'icona restano nei controlli del widget. */
/* il quadrato 48x48 dell'icona non deve restringersi accanto al titolo:
   il flex-shrink di base di Elementor e' unlayered e batte il layer. */
/* L'icona di Elementor e' un inline-block: il rigo di testo che la contiene
   aggiunge ~6px sotto e la scatola smette di essere quadrata (misurato 22x28 e
   24x30 dove il design vuole 22x22 e 24x24). Nessun controllo di Elementor
   governa questo display, quindi la regola sta qui, dichiarata, e deve stare
   FUORI dal layer perche' la regola base di frontend.min.css e' unlayered. */
.elementor .ms-comp-ico .elementor-icon,
.elementor .ms-con-ico .elementor-icon,
.elementor .ms-int-ico .elementor-icon,
.elementor .ms-ai-ico .elementor-icon{display:block}
.elementor .ms-comp-ico .elementor-icon-wrapper,
.elementor .ms-con-ico .elementor-icon-wrapper{line-height:0}

/* Alone sfocato dietro la foto della hero: nel design e' un riquadro con
   filter:blur(28px). Il gruppo "Filtri CSS" sui CONTAINER non produce nulla
   quando lo si scrive via API (provate le chiavi css_filters_* e _css_filters_*:
   misurato filter:none sul frontend), quindi la sfocatura sta qui. Colore,
   raggio, dimensione e posizione dell'alone restano nei controlli. */
.elementor .e-con.ms-hero-alone{filter:blur(28px)}

/* Le scatole delle icone NON si restringono grazie al controllo
   "Dimensione: Nessuna" (_flex_size:none) sul container, non grazie al CSS:
   una regola qui perderebbe comunque contro quella per-elemento di Elementor.
   Resta solo la miniatura della sidebar articolo, che e' in un template. */
.elementor .e-con.ms-mini-figura{flex-shrink:0}
.elementor .elementor-widget[class*="-elenco"] .elementor-icon-list-item{align-items:flex-start}
/* lo span dell'icona e' largo icon-size x 1.25 (per le icon-font) e sposta il
   testo di 4.7px. Con content-box la larghezza torna a essere esattamente
   l'icona, e il padding destro resta quello del controllo "Rientro testo":
   cosi' entrambi restano guidati dal pannello. */
.elementor .elementor-widget[class*="-elenco"] .elementor-icon-list-icon{
  box-sizing:content-box;
  width:var(--e-icon-list-icon-size,1em);
}
/* lo span e' un flex container: senza questo l'SVG si stringe a 14.25px */
.elementor .elementor-widget[class*="-elenco"] .elementor-icon-list-icon svg{flex-shrink:0}
/* Elementor aggiunge 5px di padding a sinistra del testo della voce: sposta
   tutte le voci e, sulle righe al limite, ne manda una a capo. Nel design
   la distanza icona-testo e' solo quella del controllo "Rientro testo". */
.elementor .elementor-widget[class*="-elenco"] .elementor-icon-list-text{padding-left:0}
/* Il tema/Elementor mettono overflow-wrap:break-word sui titoli; il design
   no (overflow-wrap:normal). Sotto i 780px, con due colonne strette, la
   differenza e' di due righe sul titolo della card MES.
   NOTA: nel design a 560px la parola "Digitalizzazione" sfora la card e
   viene tagliata da overflow:hidden. E' un difetto del template, qui
   riprodotto perche' la consegna e' "identico al design". Per evitarlo
   basta togliere questa regola. */
.elementor .elementor-widget[class*="-titolo"] .elementor-heading-title{overflow-wrap:normal}
/* Elementor mette min-width:0 sui widget; nel design il titolo e' un flex
   item con min-width:auto e quindi si allarga fino alla parola piu' lunga. */
.elementor .elementor-widget[class*="-titolo"]{min-width:auto}

/* --- #ai: stesse tre correzioni di struttura gia' misurate su #interim --- */




/* --- #ai: la linea della timeline ha senso solo quando le quattro fasi stanno
   su UNA riga. Le fasi sono repeat(auto-fit,minmax(180px,1fr)) con gap 25.6:
   servono 4x180 + 3x25.6 = 796.8px di griglia, cioe' viewport >= 848.
   Sotto, nel design la linea resta orizzontale in alto e tocca solo il primo
   pallino (verificato a 375 sul design: linea a y 29.4, pallini a 22.4 / 166.7
   / 311 / 455.3). E' un difetto del template: qui la nascondo.
   Per una vera timeline verticale su mobile servirebbe spostare pallini a
   sinistra e testo a destra: e' una modifica di struttura, non di CSS. */
@media (max-width:1024px){
  .elementor .e-con.ms-ai-linea{display:none}
}

/* ECCEZIONE CONSAPEVOLE n.4 — #esperienza (linea e pallini della timeline). */
.elementor .ms-esp-tl{position:relative}
.elementor .ms-esp-cella{position:relative}
/* dichiarare --background-overlay fa nascere anche ::before, a cui Elementor
   impone inset:0: sarebbe un riquadro invisibile sopra la card che intercetta
   il puntatore. Va neutralizzato, con quattro classi. */
.elementor .elementor-element.e-con.ms-esp-tl::before,
.elementor .elementor-element.e-con.ms-esp-cella::before{content:none}
.elementor .elementor-element.e-con.ms-esp-card:hover{--border-color:#BFDCFA;border-color:#BFDCFA}
/* soglia 780 letta nel sorgente del design (riga 977: stack = width < 780) e
   verificata sul rendering. Non e' un breakpoint di Elementor. */
@media (max-width:779px){
  .elementor .elementor-element.e-con.ms-esp-cella{
    --width:100%;--padding-left:2.6rem;--padding-right:0px;
    width:100%;padding-left:2.6rem;padding-right:0;
  }
  .elementor .elementor-element.e-con.ms-esp-cella::after{top:1.7rem;left:-1px;right:auto}
  .elementor .elementor-element.e-con.ms-esp-tl::after{left:8px;margin-left:0}
  .elementor .elementor-element.ms-esp-cella-a .elementor-widget-heading{text-align:left}
}

/* #blog: la card deve riempire la cella della griglia, cosi' le tre card
   sono alte uguali e il "Leggi l'articolo" resta in fondo. L'altezza dei
   container Elementor e' unlayered. */
.elementor .elementor-element.e-con.ms-blog-card{height:100%}
.elementor .elementor-element.e-con.ms-blog-corpo{flex-grow:1}

/* #contatti: il riquadro icona non deve restringersi accanto al testo */
.elementor .e-con.ms-con-ico{flex-shrink:0}
/* SCELTA DICHIARATA — larghezza dei campi.
   Nel design la riga di campi usa repeat(auto-fit,minmax(min(100%,230px),1fr)):
   a 1938 stanno in 4, a 1280 in 3, a 780 in 2, a 375 in 1.
   Elementor usa invece percentuali coi SUOI breakpoint (1024/767). Ho provato
   a riprodurre l'auto-fit con flex sul wrapper .elementor-form-fields-wrapper:
   funziona ma va a litigare con le "grondaie" del widget (margini negativi di
   8px sul wrapper + padding 8px sui campi), e il risultato peggiorava le
   altezze a tutte le larghezze. Tenuto il sistema nativo: prevedibile e
   modificabile dal pannello.
   CONSEGUENZA MISURATA: fra 1025 e ~1290px il sito tiene 4 campi in riga dove
   il design ne mette 3, e la sezione e' piu' bassa di ~86px. Sopra e sotto
   quella fascia lo scarto e' di pochi px. Per allinearlo servirebbe una media
   query sulle larghezze dei campi: due righe, da decidere col cliente. */
.elementor .elementor-widget.ms-con-form .elementor-field-type-acceptance{
  align-self:center;max-width:24rem;
}
.elementor .elementor-widget.ms-con-form .elementor-field-type-submit{
  margin-left:auto;
}
/* Il padding verticale dei campi e la tipografia dell'etichetta privacy non
   passano dai controlli del widget Form (il tema li sovrascrive): misurato
   8px invece di 12.8 e 16px invece di 13.76. Quattro classi per vincere. */
.elementor .elementor-widget.ms-con-form input:not([type="checkbox"]):not([type="submit"]),
.elementor .elementor-widget.ms-con-form textarea{
  padding:12.8px 16px;
}
.elementor .elementor-widget.elementor-widget-form.ms-con-form .elementor-field-subgroup .elementor-field-option label{
  font-size:13.76px;line-height:1.5;color:rgba(255,255,255,.72);
  text-transform:none;letter-spacing:normal;font-weight:400;
}
.elementor .elementor-widget.ms-con-form .elementor-button[type="submit"]{
  padding:15.2px 32px;font-size:16px;font-weight:800;
}

/* ECCEZIONE CONSAPEVOLE n.5 — #contatti.
   Il gradiente ha TRE fermate (Elementor ne espone due) e serve fuori dal
   layer: misurato che dentro @layer passano position, overflow e la
   variabile --background-overlay, ma NON background-image, che una regola
   base di Elementor sovrascrive. Stessa situazione del gradiente della hero. */
.elementor .ms-sec-contatti{
  position:relative;overflow:hidden;
  --background-overlay:'';
}
/* Il gradiente sta QUI e non sulla sezione: misurato che su .e-con la
   proprieta' background-image resta "none" anche con questa specificita'
   (position, overflow e le variabili passano, background-image no), mentre
   sullo pseudo-elemento funziona. Due livelli in una sola dichiarazione:
   i puntini sopra, il gradiente sotto. Lo pseudo-elemento copre inset:0,
   quindi il risultato e' identico a uno sfondo di sezione. */
.elementor .ms-sec-contatti::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* .9 x .18 = .162: l'opacita' del livello incorporata nell'alfa */
  background-image:
    radial-gradient(rgba(140,203,251,.162) 1px,transparent 1px),
    linear-gradient(140deg,#0B3B9E 0%,#071A3C 62%,#0A2A6B 100%);
  background-size:30px 30px, auto;
}
.elementor .ms-sec-contatti::after{
  content:"";position:absolute;top:-300px;right:-260px;
  width:900px;height:780px;z-index:0;pointer-events:none;filter:blur(80px);
  background:linear-gradient(210deg,rgba(30,155,240,.42) 0%,rgba(30,155,240,.1) 46%,rgba(7,26,60,0) 78%);
}
.elementor .ms-sec-contatti > .e-con-inner{position:relative;z-index:1}

/* Thumbnail del blog: l'immagine deve RIEMPIRE il riquadro 16/10, altrimenti
   la foto verticale sborda e le orizzontali lasciano un vuoto sotto (misurato:
   riquadro 254.8 con immagini alte 471.7 / 235.6 / 236.1). Le regole di
   dimensione del widget Immagine sono unlayered, quindi serve stare fuori. */
/* height:100% sull'<img> non basta: il WIDGET che la contiene ha altezza
   auto, quindi il 100% non trova un riferimento e l'immagine torna alle sue
   proporzioni naturali (misurato: widget alto 471.7 dentro un riquadro da
   254.8, con la foto verticale che sbordava e le orizzontali che lasciavano
   il vuoto sotto). Va dimensionato prima il widget. */
.elementor .elementor-widget.ms-blog-img{
  width:100%;height:100%;flex:1 1 auto;min-height:0;
}
.elementor .elementor-widget.ms-blog-img img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* CTA dell'header: "nascondi su mobile" impostato nel builder mette
   sull'elemento la classe GENERICA .elementor-hidden, che non e' legata a un
   breakpoint; il suo display:none e' ridichiarato in piu' fogli (common,
   frontend, widget-form...). A parita' di specificita' vince l'ultimo
   caricato, e i fogli dei widget vengono accodati SOLO se quel widget sta
   nella pagina. Misurato a 1440: la home, che carica widget-form.min.css per
   il form dei contatti, nascondeva la CTA anche su desktop; articolo e /blog/,
   senza form, la mostravano. Quattro classi battono tutti quei fogli e fissano
   il comportamento ovunque. Il template header non viene toccato, cosi' le
   modifiche fatte a mano restano intatte. */
.elementor .ms-header .elementor-element.e-con.ms-btn-grad{display:var(--display)}
/* stessa storia per la pillola della hero, che nel design sparisce a 375 */
@media (max-width:767px){
  .elementor .e-con.ms-pill-box{--display:none;display:none;}
}
@media (max-width:767px){
  .elementor .ms-header .elementor-element.e-con.ms-btn-grad{
    --display:none;display:none;
  }
}

/* Articolo: l'immagine in evidenza riempie il riquadro 16/9, come le
   thumbnail del blog (il widget ha altezza auto, va dimensionato prima lui). */
.elementor .elementor-widget.ms-art-img,
.elementor .elementor-widget.ms-mini-img{width:100%;height:100%;flex:1 1 auto;min-height:0}
.elementor .elementor-widget.ms-art-img img,
.elementor .elementor-widget.ms-mini-img img{
  display:block;width:100%;height:100%;object-fit:cover;
}
/* la sidebar resta visibile mentre si scorre; 104px = header fisso + aria */
@media (min-width:1025px){
  .elementor .e-con.ms-art-sidebar{position:sticky;top:104px}
}

@keyframes msDrift{0%{background-position:0 0}100%{background-position:64px 64px}}
@keyframes msFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes msPulse{0%{box-shadow:0 0 0 0 rgba(30,155,240,.45)}70%{box-shadow:0 0 0 22px rgba(30,155,240,0)}100%{box-shadow:0 0 0 0 rgba(30,155,240,0)}}

@layer apx{

  /* --- superfici di sezione --- */
  .ms-sec-dark{background:var(--ms-navy);color:#fff}
  .ms-sec-soft{background:var(--ms-surface)}
  .ms-sec-hero{background:linear-gradient(160deg,#F6F9FD 0%,#EAF3FE 46%,#FFFFFF 100%)}
  .ms-sec-ai{background:linear-gradient(170deg,#F6F9FD 0%,#E9F2FE 100%)}
  .ms-sec-cta{background:linear-gradient(140deg,#0B3B9E 0%,#071A3C 62%,#0A2A6B 100%);color:#fff}
  .ms-sec-footer{background:var(--ms-footer)}

  /* --- card: solo decorazione, le misure stanno nei controlli --- */
  .ms-card{
    background:#fff;
    border:1px solid var(--ms-border-blue);
    border-radius:var(--ms-radius);
    box-shadow:var(--ms-shadow-blue);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;
  }
  .ms-card:hover{transform:translateY(-6px);box-shadow:var(--ms-shadow-deep)}

  .ms-card-dark{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.2);
    border-radius:var(--ms-radius);
  }

  /* --- header fisso con vetro smerigliato --- */
  .ms-header{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--ms-border);
  }

  /* Niente sfondo/bordo/raggio sul widget .ms-pill: la pillola e' il
     CONTAINER che lo avvolge, con sfondo, bordo e raggio nei controlli.
     Questa regola ne disegnava un secondo dentro al primo (il "fondino
     grigio" #EDF5FE visibile nella hero). */

  /* --- titolo hero con parola in gradiente --- */
  .ms-grad{
    background:linear-gradient(105deg,#1E9BF0,#0B3B9E);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* --- pillole eyebrow --- */
  .ms-pill .elementor-icon-box-title,
  .ms-pill-dark .elementor-icon-box-title{
    text-transform:uppercase;
    letter-spacing:.14em;
  }

  /* --- foto con angoli e ombra --- */
  .ms-hero-foto img,.ms-foto img{
    border-radius:var(--ms-radius);
    box-shadow:var(--ms-shadow-blue);
  }

  /* Le griglie NON stanno piu' qui: sono container_type=grid nativi, nei
     settings del container, quindi visibili e modificabili dal builder.
     Il CSS restava comunque perdente: .e-con-inner{display:flex} di Elementor
     e' fuori da @layer e batte qualunque regola layered. */

  /* --- HERO: misure prese dal design renderizzato --- */
  .ms-pill{width:fit-content;max-width:100%}
  .ms-hero-lead{max-width:736px}

  .ms-hero-col-dx{position:relative}

  .ms-hero-media{
    position:relative;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 30px 70px -20px rgba(7,26,60,.5);
  }
  /* velo scuro in fondo alla foto, su cui poggia il nome */
  .ms-hero-media::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:200px;
    background:linear-gradient(to top,rgba(4,15,38,.92),rgba(4,15,38,0));
    pointer-events:none;z-index:1;
  }
  .ms-hero-foto img{display:block;width:100%;height:100%;object-fit:cover}

  .ms-badge-video{
    background:rgba(7,26,60,.55);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border-radius:30px;z-index:2;
  }
  .ms-badge-video p{margin:0;letter-spacing:.14em}

  .ms-play{
    background:rgba(255,255,255,.92);
    border-radius:999px;
    box-shadow:0 12px 30px -10px rgba(7,26,60,.55);
    z-index:2;
  }
  .ms-play .elementor-icon-box-wrapper{margin:0}

  .ms-hero-nome{z-index:2}

  .ms-hero-badge{
    background:#fff;
    border-radius:14px;
    box-shadow:0 18px 40px -12px rgba(7,26,60,.28);
    z-index:3;
  }

  /* Su mobile il design trasforma i tre dati in schede bianche.
     Lo sfondo non e' responsive fra i controlli Elementor, ma qui Elementor
     non ne imposta nessuno: la regola non trova concorrenza. */
  @media (max-width:767px){
    /* solo lo sfondo: bordo e raggio stanno nei controlli del container,
       perche' Elementor li guida con variabili che battono questo CSS. */
    .ms-stat{background:#fff}
  }

  /* --- header: il menu non deve andare a capo, la CTA nemmeno --- */
  .ms-nav .elementor-nav-menu--main{flex-wrap:nowrap}
  .ms-cta .elementor-button,
  .ms-btn .elementor-button{white-space:nowrap}
  .ms-logo-box{flex-shrink:0}

  /* --- #fractional: decorazioni che nessun controllo Elementor produce ---
     puntinato + alone blu sfocato. Sono pseudo-elementi: non c'e' un widget
     ne' un controllo per un radial-gradient ripetuto o per un blob in blur,
     quindi questa e' l'unica parte della sezione non editabile dal pannello.
     Tutto il resto (sfondo, bordi, raggi, spaziature) sta nei controlli. */
  .ms-sec-fractional{
    position:relative;overflow:hidden;
    /* Elementor dichiara content:var(--background-overlay) su
       .e-con::before/::after con una regola FUORI da @layer: senza
       questa variabile il content resta 'none' e i due pseudo-elementi
       non nascono proprio. (trappola #1, verificata sul frontend) */
    --background-overlay:'';
  }
  .ms-sec-fractional::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    /* il design fa: puntini rgba(30,155,240,.8) su un livello con opacity .22.
       Elementor guida l'opacity dell'overlay con una sua variabile, quindi
       il .22 e' incorporato nell'alfa: .8 x .22 = .176, resa identica. */
    background-image:radial-gradient(rgba(30,155,240,.176) 1px,transparent 1px);
    background-size:34px 34px;
  }
  .ms-sec-fractional::after{
    content:"";position:absolute;bottom:-400px;left:-300px;
    width:1000px;height:820px;z-index:0;pointer-events:none;
    filter:blur(80px);
    background:linear-gradient(25deg,rgba(30,155,240,.45) 0%,rgba(30,155,240,.12) 48%,rgba(7,26,60,0) 80%);
  }
  .ms-sec-fractional > .e-con-inner{position:relative;z-index:1}
  /* nel design l'icona del box sta 2px piu' in basso del titolo.
     Elementor non ha un controllo per questo scarto e qui non emette
     nessuna regola concorrente (la distanza icona-testo la fa con gap). */
  .ms-box-icon .elementor-icon-box-icon{margin-top:2px}

  /* --- #interim: alone blu sfocato in alto a sinistra ---
     come per #fractional, serve dichiarare --background-overlay perche'
     Elementor tiene content:var(--background-overlay) fuori dal layer. */
  .ms-sec-interim{
    position:relative;overflow:hidden;
    --background-overlay:'';
  }
  .ms-sec-interim::after{
    content:"";position:absolute;top:-300px;left:-280px;
    width:900px;height:760px;z-index:0;pointer-events:none;
    filter:blur(70px);
    background:linear-gradient(150deg,rgba(30,155,240,.3) 0%,rgba(30,155,240,.08) 50%,rgba(246,249,253,0) 80%);
  }
  .ms-sec-interim > .e-con-inner{position:relative;z-index:1}

  /* nel design il check dell'elenco sta 3px piu' in basso del testo */
  [class*="-elenco"] .elementor-icon-list-icon{margin-top:3px}


  /* --- #ai: alone sfocato in alto a sinistra (gradiente a TRE fermate) --- */
  .ms-sec-ai{position:relative;overflow:hidden;--background-overlay:''}
  .ms-sec-ai::after{
    content:"";position:absolute;top:-320px;left:-300px;
    width:960px;height:800px;z-index:0;pointer-events:none;filter:blur(70px);
    background:linear-gradient(160deg,rgba(30,155,240,.32) 0%,rgba(11,59,158,.1) 48%,rgba(233,242,254,0) 80%);
  }
  .ms-sec-ai > .e-con-inner{position:relative;z-index:1}

  /* la linea della timeline: gradiente a QUATTRO fermate, Elementor ne ha due */
  .ms-ai-linea{
    background-image:linear-gradient(90deg,rgba(30,155,240,.15),#1E9BF0 35%,#0B3B9E 75%,rgba(11,59,158,.15));
  }
  /* vetro smerigliato delle card: non c'e' un controllo nativo */
  .ms-ai-card{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

  /* --- #operativita: foto e paragrafo --- */
  .elementor .ms-op-img img{display:block}
  .elementor .ms-op-testo{text-wrap:pretty}

  /* --- #esperienza: linea verticale e pallini --- */
  .ms-esp-tl{--background-overlay:''}
  .ms-esp-tl::after{
    content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
    z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(30,155,240,0),#1E9BF0 10%,rgba(30,155,240,.14));
  }
  .ms-esp-cella{--background-overlay:''}
  .ms-esp-cella::after{
    content:"";position:absolute;top:calc(50% - 9px);
    width:18px;height:18px;box-sizing:border-box;border-radius:50%;
    background:#FFFFFF;border:3px solid var(--ms-accent);
    box-shadow:0 0 0 5px rgba(30,155,240,.12);z-index:1;pointer-events:none;
  }
  .ms-esp-cella-a::after{right:-9px}
  .ms-esp-cella-b::after{left:-9px}
  .ms-esp-card{transition:box-shadow .35s ease,border-color .35s ease}
  .ms-esp-card:hover{box-shadow:0 26px 50px -26px rgba(11,59,158,.4)}
  .ms-esp-testo .elementor-heading-title{text-wrap:pretty}

  /* --- #blog: card dinamica (loop item) --- */
  .ms-blog-figura{aspect-ratio:16/10}
  .ms-blog-leggi{margin-top:auto}
  .ms-blog-estratto .elementor-heading-title{text-wrap:pretty}

  /* il segnaposto dei campi, che Elementor non espone come controllo */
  .ms-con-form input::placeholder,.ms-con-form textarea::placeholder{
    color:rgba(255,255,255,.45)
  }

  /* --- articolo: corpo leggibile, sidebar appiccicata --- */
  .ms-art-corpo p{margin:0 0 1.15em;line-height:1.75;font-size:18.56px;color:#3C4C66}
  .ms-art-corpo h2{
    font-family:Montserrat,sans-serif;font-weight:800;font-size:25.6px;
    line-height:1.25;color:#071A3C;margin:2em 0 .6em;letter-spacing:-.02em;
  }
  .ms-art-corpo h3{
    font-family:Montserrat,sans-serif;font-weight:700;font-size:20.8px;
    line-height:1.3;color:#071A3C;margin:1.6em 0 .5em;
  }
  .ms-art-corpo ul,.ms-art-corpo ol{margin:0 0 1.15em 1.2em;line-height:1.75}
  .ms-art-corpo li{margin:0 0 .4em}
  .ms-art-corpo a{color:#0B3B9E;text-decoration:underline}
  .ms-art-corpo em{color:#5A6A85}
  .ms-art-figura{aspect-ratio:16/9}
  /* la miniatura della sidebar deve avere un'altezza VERA, non solo una
     min-height: con la sola min-height la percentuale del widget immagine non
     risolve e la foto torna alle sue proporzioni (misurato: 88x102 sulla
     verticale, 88x51 sull'orizzontale, dentro un riquadro da 88). */
  .ms-mini-figura{aspect-ratio:1/1}
  .ms-mini-titolo .elementor-heading-title{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .ms-mini-card{transition:opacity .18s ease}
  .ms-mini-card .elementor-heading-title{transition:color .18s ease}
  .ms-mini-card:hover .ms-mini-titolo .elementor-heading-title{color:#0B3B9E}
  .ms-mini-card + .ms-mini-card{margin-top:0}

  /* L'icona reagisce quando si passa sulla SCHEDA, non su se stessa: nessun
     controllo Elementor sa esprimere "quando il genitore e' in hover", quindi
     questa e' una delle poche cose che devono stare in CSS. Dichiarata. */
  .ms-ai-ico,.ms-int-ico,.ms-comp-ico,.ms-con-ico{transition:transform .3s ease}
  .ms-ai-card:hover .ms-ai-ico,
  .ms-int-card:hover .ms-int-ico{transform:scale(1.08) rotate(-3deg)}
  .ms-op-foto img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}

  /* --- icone SVG: ereditano il colore dai controlli del widget --- */
  .ms-ico svg{width:1em;height:1em;display:block}
}/* End custom CSS */