/* ========================= ELEMENTOR LCP FIX ========================= */
/**
* Elementor LCP Fix
* Forza visibilità immediata dei titoli above-the-fold per ridurre l'Element render delay.
* Da caricare solo sulle pagine erogate da Elementor.
*/
.elementor-section:first-of-type .elementor-heading-title.elementor-size-default,
.elementor-section:nth-of-type(2) .elementor-heading-title.elementor-size-default {
    opacity: 1 !important;
    animation: none !important;
    visibility: visible !important;
}

/* LCP fix: primo container Elementor visibile subito - evita element render delay */
.elementor-element-3cd6463,
.elementor-section:first-of-type .e-con,
.elementor-section:nth-of-type(2) .e-con {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}





  
/* ========================= MENU TOP ========================= */
.menu__top {
    border-bottom: none;
box-shadow: -1px 6px 5px 0px rgba(0,65,130,0.15);
-webkit-box-shadow: -1px 6px 5px 0px rgba(0,65,130,0.15);
-moz-box-shadow: -1px 6px 5px 0px rgba(0,65,130,0.15);
}

#masthead.site-header .menu__header .menu__top a.pulsante {
    font-family: "Source Sans 3", Sans-serif;
    font-weight: 500;
    font-size: 15px;
}

    
  
    /* ========================= TOP FIXED MENU ========================= */
    /* #top_fixed_menu - visibilità basata su direzione scroll (mobile + desktop) */
    /* Al load: nascosto, solo #masthead visibile */
    #top_fixed_menu {
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        transition: visibility 0.25s ease, opacity 0.25s ease;
    }
    /* Quando visibile: sopra a tutto */
    #top_fixed_menu.top-fixed-menu--visible {
        visibility: visible;
        opacity: 1;
        z-index: 99999;
    }

    /* #masthead: visibile di default, z-index alto quando sticky */
    #masthead.site-header {
        z-index: 9999;
    }
    #masthead.site-header.sticky-header {
        position: fixed;
        top: 0;
        z-index: 9999;
        width: 100%;
        animation: slideDown 0.25s ease forwards;
    }
    /* Quando top_fixed_menu è visibile: masthead nascosto e sotto */
    body.top-fixed-menu-visible #masthead.site-header {
        visibility: hidden !important;
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        transition: visibility 0.25s ease, opacity 0.25s ease;
    }

    @keyframes slideDown {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }






    /* ========================= GRADIENT ANIMATION - HERO TEXT ========================= */
    /* #gradient-animation - effetto luce che passa sulla scritta "with AI" */
    .gradient-animation{
        display: inline-block;
        white-space: nowrap;
        position: relative;
        
        /* Gradiente che inizia e finisce con il colore default per effetto luce che passa */
        background: linear-gradient(
            90deg,
            #00225A 0%,
            #00225A 30%,
            #00CCFF 35%,
            #0099FF 42%,
            #0066CC 50%,
            #003399 58%,
            #0066CC 65%,
            #0099FF 72%,
            #00CCFF 78%,
            #00225A 85%,
            #00225A 100%
        );
        background-size: 400% 100%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
        /* Ottimizzazioni per performance */
        will-change: background-position;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        
        /* Animazione eseguita 2 volte, da sinistra a destra */
        animation: animateText 15s linear 200 forwards;
        animation-delay: 2500ms;
        }
    
    @keyframes animateText {
      0% {
        background-position: 100% 50%;
      }
      20% {
        background-position: 0% 50%;
      }
      20.01%, 100% {
        background-position: 0% 50%;
      }
    }
    
    /* Effetto hover per interattività */
    .gradient-animation:hover {
      animation-duration: 2.5s;
      filter: brightness(1.2);
    }





/* ========================= HERO VIDEO HEADER ========================= */
/* Hero video header - breakpoints: blocco blu (250px) a chiusura viewport, grigio fuori */
  :root {
    --hero-video-min-height: 350px;
    --hero-video-max-height: 65vh;
  }
  #video-header-bg,
  .header-video-container {
    min-height: var(--hero-video-min-height) !important;
    max-height: var(--hero-video-max-height) !important;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    :root {
      --hero-video-min-height: 380px;
      --hero-video-max-height: 70vh;
    }
  }
  @media (min-width: 1024px) {
    :root {
      --hero-video-min-height: 400px;
      --hero-video-max-height: 78vh;
    }
  }
  @media (min-width: 1280px) {
    :root {
      --hero-video-min-height: 410px;
      --hero-video-max-height: 85vh;
    }
  }
  @media (min-width: 1440px) {
    :root {
      --hero-video-min-height: 480px;
      --hero-video-max-height: calc(100vh - 250px);
    }
  }
  @media (min-width: 1920px) {
    :root {
      --hero-video-min-height: 550px;
      --hero-video-max-height: calc(100vh - 250px);
    }
  }








/* ========================= RESPONSIVE: su mobile una colonna ========================= */
/* Responsive: su mobile una colonna */
@media (max-width: 767px) {
    --e-con-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr) !important;

}




  /* ========================= MOSAICO A GRIGLIA VARIABILE ========================= */
  /* Mosaico a Griglia variabile - card con immagini e testo - utilizzata per la sezione "Features" */
  /* Griglia principale */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    grid-auto-flow: dense; /* riempie i buchi, utile per layout tipo tua immagine */
    }

    /* card base */
    .feature-grid .feature-card {
        grid-column: span 6;     /* metà riga su 12 colonne */
        grid-row: span 1;
        background: #fff;
        border-radius: 18px;
        padding: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .feature-grid .feature-card:hover {
    }

    /* card alta 2 righe */
    .feature-grid .feature-card.is-tall {
        grid-row: span 2;
    }

    /* variante "larga" (tipo il box grande a sinistra nell'immagine) */
    .feature-grid .feature-card.is-wide {
        grid-column: span 8;
    }

    /* variante "stretta" */
    .feature-grid .feature-card.is-narrow {
        grid-column: span 4;
    }

    .feature-grid .feature-card.is-3col {
        grid-column: span 12;
    }

    .feature-grid .feature-card.is-3row {
        grid-row: span 3;
    }

    /* Placeholder per immagini */
    .elementor-widget-image img[src*="placeholder"] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
    }

    .elementor-widget-image img[src*="placeholder"]::after {
        content: "Placeholder Image";
    }

    /* Tablet - Elementor breakpoint: 768px - 1024px */
    @media (min-width: 768px) and (max-width: 1024px) {
        .feature-grid {
            grid-template-columns: repeat(8, 1fr); /* riduciamo a 8 colonne per tablet */
            gap: 16px;
        }
        
        /* card base su tablet: metà riga */
        .feature-grid .feature-card {
            grid-column: span 4; /* metà di 8 colonne */
            grid-row: span 1;
        }
        
        /* card alta su tablet */
        .feature-grid .feature-card.is-tall {
            grid-row: span 2;
        }
        
        /* card larga su tablet: full width per riempire tutte le colonne */
        .feature-grid .feature-card.is-wide {
            grid-column: span 8; /* 8 su 8 colonne (100%) - riempie tutta la riga */
        }
        
        /* card stretta su tablet: metà riga così due blocchi riempiono 8 colonne */
        .feature-grid .feature-card.is-narrow {
            grid-column: span 4; /* 4 su 8 colonne (50%) - due blocchi = 8 colonne piene */
        }
        
        /* card full width su tablet */
        .feature-grid .feature-card.is-3col {
            grid-column: span 8; /* tutta la larghezza su 8 colonne */
        }
        
        /* card alta 3 righe su tablet */
        .feature-grid .feature-card.is-3row {
            grid-row: span 3;
        }
        
        /* classe dedicata per tablet: full width su tablet, mantiene comportamento normale su desktop */
        .feature-grid .feature-card.is-tablet-full {
            grid-column: span 8; /* full width su tablet (8 colonne) */
        }
    }

    /* Mobile - Elementor breakpoint: fino a 767px */
    @media (max-width: 767px) {
        /*
        body {
            padding: 20px 16px;
        }
        */
        
        .feature-grid {
            grid-template-columns: 1fr; /* una sola colonna */
            gap: 16px;
        }
        
        /* tutti i blocchi full width su mobile */
        .feature-grid .feature-card {
            grid-column: span 1; /* occupa tutta la colonna */
            grid-row: span 1; /* normalizza tutte le altezze */
        }
        
        /* rimuovi tutti gli span speciali su mobile */
        .feature-grid .feature-card.is-tall,
        .feature-grid .feature-card.is-wide,
        .feature-grid .feature-card.is-narrow,
        .feature-grid .feature-card.is-3col,
        .feature-grid .feature-card.is-3row {
            grid-column: span 1;
            grid-row: span 1;
        }
    }




    /* ========================= CAROSELLO A STEP - HERO ========================= */
    /* Carosello a step - utilizzato per la sezione "Steps" */
    .hero-carousel.steps-carousel--hero {
        max-height: 750px !important;
        min-height: 650px !important;
    }

        /* contenitore */
    .steps-carousel--hero{
    position: relative;
    overflow: hidden; /* 1 slide pulita, nessun peek */
    overflow-x: clip;  /* migliore di hidden: evita scrollbar interne */
    border-radius: 48px;
    padding: 0;
    margin: 0;
    }
    @supports not (overflow: clip){
    .steps-carousel--hero{ overflow-x: hidden; }
    }

    /* Swiper: cssMode usa scroll nativo (no transform) → elementi scalano correttamente con zoom browser */
    .steps-carousel--hero .hero-swiper{
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory; /* snap slide con cssMode */
    scrollbar-width: none;
    -ms-overflow-style: none;
    }
    .steps-carousel--hero .hero-swiper::-webkit-scrollbar{
    display: none;
    }

    /* swiper-wrapper: reset padding/margin Elementor + allineamento a sinistra */
    .steps-carousel--hero .hero-swiper .swiper-wrapper{
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    }

    /* slide: 1 per volta, si adattano al contenitore (override inline di Swiper) */
    .steps-carousel--hero .hero-slide,
    .steps-carousel--hero .swiper-slide{
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    height: auto;
    box-sizing: border-box !important;
    scroll-snap-align: start; /* per cssMode */
    }

    /* slide come e-con: reset padding Elementor che spostano la griglia */
    .steps-carousel--hero .hero-slide.e-con,
    .steps-carousel--hero .swiper-slide.e-con{
    padding-left: 0 !important;
    padding-right: 0 !important;
    }

    /* contenuto slide: non deve eccedere la larghezza, allineato a sinistra */
    .steps-carousel--hero .hero-slide > *,
    .steps-carousel--hero .swiper-slide > *{
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important; /* evita centratura Elementor che sposta la griglia */
    }

    /* se la slide contiene container Elementor */
    .steps-carousel--hero .hero-slide .e-con-inner,
    .steps-carousel--hero .swiper-slide .e-con-inner{
    height: 100%;
    max-width: 100% !important;
    }

    /* frecce bottom-right */
    .steps-carousel--hero .hero-prev,
    .steps-carousel--hero .hero-next{
    z-index: 5;
    }

    /* bottoni SVG navigazione (come carosollo_step) */
    .steps-carousel--hero .hero-nav-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #fff;
    transition: color 0.2s, opacity 0.2s;
    outline: none;
    margin-block:10px;
    }
    .steps-carousel--hero .hero-nav-btn:focus{
    outline: none;
    }
    .steps-carousel--hero .hero-nav-btn:hover{
    color: #D5DCE8;
    opacity: 1;
    }
    .steps-carousel--hero .hero-nav-btn svg{
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    }
    .steps-carousel--hero .hero-nav-btn svg path{
    fill: currentColor;
    }
    .steps-carousel--hero .hero-nav{
    display: flex;
    align-items: center;
    gap: 1.5rem;
    }



    @media (max-width: 1500px){
    .hero-carousel.steps-carousel--hero {
        max-height: 650px !important;
        min-height: 600px !important;
    }
    }

    @media (max-width: 1300px){
    .hero-carousel.steps-carousel--hero {
        max-height: 600px !important;
        min-height: 550px !important;
    }
    }

    /* Frecce visibili solo su desktop (carousel scrollabile solo su desktop) */
    @media (max-width: 1023px){
    .steps-carousel--hero .hero-prev,
    .steps-carousel--hero .hero-next{
        display: none !important;
    }
    }



    /* ========================= CAROSELLO A STEP - SWIPER / ELEMENTOR FIXES ========================= */
    /* ========================= SWIPER / ELEMENTOR FIXES ========================= */
  /* =========================
     SWIPER / ELEMENTOR FIXES
  ========================= */
  
  /* per vedere la slide “che sbuca” */
  .steps-swiper{
    overflow: visible !important;
  }
  
  /* Elementor mette spesso display:flex sui container: qui lo neutralizziamo */
  .steps-swiper.swiper{
    display: block !important;
  }
  
  /* wrapper: flex per equal-height slides */
  .steps-swiper .swiper-wrapper{
    display: flex !important;
    align-items: stretch !important;
  }
  /* spacer dopo l'ultima slide: permette di scrollare fino a mostrarla intera */
  @media (min-width: 1024px){
    .steps-carousel .steps-swiper .swiper-wrapper::after{
      content: '';
      flex: 0 0 var(--steps-offset, 0px) !important;
      min-width: var(--steps-offset, 0px) !important;
    }
  }
  
  /* slide: larghezza da CSS responsive, altezza uguale per tutte */
  .steps-swiper .swiper-slide{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    min-height: 0 !important;     /* permette allo stretch di funzionare */
  }
  
  .steps-swiper .swiper-slide > *{
    height: 100% !important;
    min-height: 0 !important;
  }
  
  .steps-swiper .swiper-slide.step-card{
    height: auto !important;     /* lo stretch + JS imposterà altezza uguale */
  }
  
  /* container Elementor: riempi tutta l'altezza della slide */
  .steps-swiper .swiper-slide.step-card .e-con,
  .steps-swiper .swiper-slide.step-card .e-con-inner,
  .step-card .e-con-inner{
    height: 100% !important;
  }
  
  /* =========================
     CARD WIDTH RESPONSIVE
     (card “design system” + Swiper slidesPerView:'auto')
  ========================= */
  @media (min-width: 1024px){
    .steps-swiper .swiper-slide.step-card{
      width: 420px !important;   /* desktop */
    }
    .steps-swiper.multi-steps{
      --boxed-padding: calc((100vw - var(--content-width)) / 2);
    box-sizing: border-box;
      padding-left: var(--boxed-padding);
    padding-right: var(--boxed-padding);
  }
  
  }
  
  @media (min-width: 768px) and (max-width: 1023px){
    .steps-swiper .swiper-slide.step-card{
      width: 360px !important;   /* tablet */
    }
  }
  
  @media (max-width: 767px){
    .steps-swiper .swiper-slide.step-card{
      width: 85vw !important;    /* mobile (peek) */
    }
    .steps-swiper .swiper-slide.step-card .e-con,
  .steps-swiper .swiper-slide.step-card .e-con-inner,
  .step-card .e-con-inner{
    height: unset !important;
  }
  }
  
  /* =========================
     BADGE NUMERO
  ========================= */
  .step-card{
    position: relative; /* necessario per badge assoluto */
  }
  
  .step-card .badge-numero{
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    top: 19px;
    left: 19px;
    z-index: 2;
  }
  
  
  .steps-carousel{
    overflow-x: clip;   /* migliore di hidden perché non crea scrollbars interne */
  }
  @supports not (overflow: clip){
    .steps-carousel{ overflow-x: hidden; }
  }

  /* Desktop: allinea il primo elemento al titolo + spazio per ultima slide */
  @media (min-width: 1024px){
    .steps-carousel{
      --steps-offset: calc((100vw - var(--content-width, 1140px)) / 2);
      padding-left: var(--steps-offset);
      padding-right: var(--steps-offset);
    }
  }

  /* Frecce visibili da tablet in su (Elementor: tablet ≥768px). Su mobile nascoste */
  @media (max-width: 767px){
    .steps-carousel .steps-next,
    .steps-carousel .steps-prev{
      display: none !important;
    }
  }

  /* =========================
     NAVIGAZIONE (bottoni SVG colorabili)
     Colora via: --steps-nav-color o .steps-prev/.steps-next { color: ... }
  ========================= */
  .steps-carousel .steps-nav-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #004182;
    transition: color 0.2s, opacity 0.2s;
    outline: none;
    margin-left: 10px;
  }
  .steps-carousel .steps-nav-btn:focus{
    outline: none;
  }
  .steps-carousel .steps-nav-btn:hover{
    color: #2363BE;
    opacity: 1;
  }
  .steps-carousel .steps-nav-btn svg{
    width: 50px;
    height: 50px;
    flex-shrink: 0;
  }
  .steps-carousel .steps-nav-btn svg path{
    fill: currentColor;  /* eredita da color - colora via CSS */
  }
  .steps-carousel .steps-nav{
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  

  /* ========================= FAQ ========================= */
  .e-n-accordion-item {
    background: white;
    border-radius: 25px;
    }
    .e-n-accordion-item div[role="region"]{
        padding-top: 0 !important;
            transform: translateY(-10px);
    }
    .e-n-accordion-item div[role="region"] p{
        margin-bottom: 0;
    }
    
    
        /* TITOLO CHIUSO */
    .e-n-accordion-item:not([open]) > summary.e-n-accordion-item-title{
      /* equivalente di .is-closed */
      border-radius: 25px;
    }
    
    /* TITOLO APERTO */
    .e-n-accordion-item[open] > summary.e-n-accordion-item-title{
      /* equivalente di .is-open */
    }
    
    /* summary come riga */
    .e-n-accordion-item-title{
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .e-n-accordion-item-title>span {
        cursor: pointer;
        padding-left: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* testo a sinistra */
    .e-n-accordion-item-title-header{
      flex: 1 1 auto;
    }
    
    .e-n-accordion-item div[role="region"]{
        padding: 20px;
    }
    
    
    /* icona allineata a destra */
    .e-n-accordion-item-title-icon{
      flex: 0 0 auto;
      margin-left: auto;
      display: flex;
      align-items: center;
      padding: 0;
      padding-right: 20px;
    }
    
    #faq-more-loader.hidden {
        display: none !important;
    }
    
    #faq-less-loader {
        display: none;
    }
    
    #faq-less-loader.active {
        display: inline-block;
    }
    
    .accordion-nascosto {
        display:none;
    }
    
    .accordion-nascosto.active {
        display:block;
    }