.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h1{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h2{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h3{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h4{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h5{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-kit-7 h6{font-family:"-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0;--container-default-padding-right:0;--container-default-padding-bottom:0;--container-default-padding-left:0;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}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;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:768px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}:root { ----black:#1d1d1f; ----g1:#3a3a3c; ----g2:#6e6e73; ----g3:#86868b; ----g4:#d1d1d6; ----g5:#f5f5f7; ----g6:#fafafa; ----white:#ffffff; --font-primario:-apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-condensato:'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif; ----fs-display:clamp(180px, 28vw, 360px); ----fs-hero:clamp(44px, 6.5vw, 66px); ----fs-h2:clamp(28px, 4vw, 52px); ----fs-h2-hub:clamp(26px, 3.2vw, 40px); ----fs-h3:clamp(20px, 3vw, 28px); ----fs-lead:18px; ----fs-body:16px; ----fs-sm:14px; ----fs-xs:13px; ----fs-eyebrow:12px; --e-gv-eac1b6f:1.02; ----lh-snug:1.25; ----lh-body:1.55; ----ls-hero:-2.5px; ----ls-h2:-1.5px; ----ls-h3:-0.8px; ----ls-eyebrow:2.5px; ----fw-light:300; ----fw-regular:400; ----fw-medium:500; ----fw-semi:600; ----r-lg:20px; ----r-md:14px; ----r-sm:4px; ----r-pill:999px; ----glass-blur:20px; ----glass-light:rgba(255, 255, 255, 0.92); ----glass-dark:rgba(10, 10, 10, 0.85); ----container:1200px; ----gutter:40px; ----gutter-mobile:20px; ----nav-h:56px; ----drawer-w:min(560px, 100vw); ----ease-drawer:cubic-bezier(.32, 0, .15, 1); ----dur-fast:0.2s; ----dur-med:0.4s; --e-gv-3f83bae:0.45s; ----lh-tight:1.02; ----lh-compact:1.05; --divisore:rgba(255, 255, 255, 0.06); ----bianco-testi-footer-0-35:rgba(255, 255, 255, 0.35); }
/* Start custom CSS *//* 
OGNI MODIFICA VA REPLICATA ANCHE IN ELEMENTOR → VARIABILI
- Le variabili qui (CSS Personalizzato) si possono usare fuori dal sistema Elementor Atomic editor 
- Le variabili dentro il sistema Variabili di Elementor si possono usare solo dentro il sistema Elementor Atomic editor 
*/

/* ═══════════════════════════════════════════════════════════════════════
   ACM · Nuovo sito 2026 — DESIGN TOKENS (fonte di verità)
   Estratti dal prototipo approvato dal cliente (index.html + header.js + footer.js).
   Stack di sistema DEFINITIVO (nessun font brand da licenziare).
   Uso in WordPress/Elementor: incollare queste variabili nel CSS globale del tema
   (Elementor → Impostazioni sito → CSS personalizzato) e mappare i valori nei
   "Colori globali" e "Font globali" (vedi README.md).
   Ultimo aggiornamento: 2026-08-04
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── COLORE ──────────────────────────────────────────────────────────
     Palette SOLO grayscale + nero. Nessun colore d'accento (l'oro è stato
     bocciato dal cliente come "fuori brand"). L'unico colore è il rosso del
     logo, confinato a logo + firma agenzia: NON usarlo per UI/CTA/link. */
  --black: #1d1d1f;   /* testo principale, CTA piene, fondi scuri            */
  --white: #ffffff;   /* fondo pagina, testo su scuro                        */
  --g1:    #3a3a3c;   /* testo forte alternativo, titoli su chiaro           */
  --g2:    #6e6e73;   /* testo secondario leggibile (paragrafi muted, label) */
  --g3:    #86868b;   /* occhielli/hint decorativi — NON per body su bianco  */
  --g4:    #d1d1d6;   /* bordi, divisori marcati, stati disabilitati         */
  --g5:    #f5f5f7;   /* fondo sezione chiaro, hover leggeri, chip           */
  --g6:    #fafafa;   /* fondo sezione appena staccato dal bianco            */

  /* Accento brand — SOLO logo e firma agenzia. Vietato altrove. */
  --brand-red: #E7364E;

  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────
     Stack di sistema (definitivo). --font-c (Arial Narrow condensato) è
     riservato a NUMERI, OCCHIELLI e LABEL — mai per il body. */
  --font:   -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-c: 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Scala tipografica (clamp = fluida min/preferita/max).
     REGOLA CHIAVE: i titoli display sono sempre PESO 300. Se un titolo
     "pesa" troppo è una questione di DIMENSIONE, mai di weight. */
  --fs-display:  clamp(180px, 28vw, 360px); /* numero/lettera gigante decorativa */
  --fs-hero:     clamp(44px, 6.5vw, 66px);  /* H1 hero (peso 300, ls -2.5px)      */
  --fs-h2:       clamp(28px, 4vw, 52px);    /* titolo sezione home (peso 300, -1.5px) */
  --fs-h2-hub:   clamp(26px, 3.2vw, 40px);  /* titolo sezione pagine HUB (peso 300, -1.5px) */
  --fs-h3:       clamp(20px, 3vw, 28px);    /* sottotitolo/lead (peso 300, -0.8px) */
  --fs-lead:     18px;                       /* paragrafo introduttivo             */
  --fs-body:     16px;                       /* testo corrente                     */
  --fs-sm:       14px;                       /* testo piccolo, label bottoni       */
  --fs-xs:       13px;                       /* nav, meta                          */
  --fs-eyebrow:  12px;                       /* occhiello (uppercase, ls 2.5px, g3)*/

  --lh-tight:   1.02;  /* titoli display          */
  --lh-snug:    1.25;  /* titoli piccoli          */
  --lh-body:    1.55;  /* paragrafi               */

  /* Letter-spacing dei titoli (negativo = più stretto, "editoriale") */
  --ls-hero:    -2.5px;
  --ls-h2:      -1.5px;
  --ls-h3:      -0.8px;
  --ls-eyebrow:  2.5px;  /* occhielli: POSITIVO, uppercase */

  /* Pesi */
  --fw-light:   300;  /* titoli display                    */
  --fw-regular: 400;  /* nomi card/voci                    */
  --fw-medium:  500;  /* occhielli, label bottoni, nav     */
  --fw-semi:    600;  /* badge, micro-etichette uppercase  */

  /* ── FORMA (raggi) ───────────────────────────────────────────────────*/
  --r-lg:   20px;   /* card, pannelli, bande               */
  --r-md:   14px;   /* input, card piccole, chip grandi    */
  --r-sm:   4px;    /* bolle chat, dettagli                */
  --r-pill: 999px;  /* bottoni, pill, chip, badge          */

  /* ── OMBRE ───────────────────────────────────────────────────────────
     Diffuse e tenui su chiaro; profonde solo su drawer/FAB. */
  --sh-soft:   0 8px 32px rgba(0,0,0,0.08);   /* card a riposo, box su chiaro   */
  --sh-hover:  0 12px 32px rgba(0,0,0,0.10);  /* card in hover (con translateY) */
  --sh-drawer: -30px 0 80px rgba(0,0,0,0.22); /* drawer laterale da destra      */
  --sh-fab:    0 12px 34px rgba(0,0,0,0.30);  /* FAB "Chiedi all'AI"            */

  /* ── VETRO (glass / backdrop) ────────────────────────────────────────*/
  --glass-blur:      20px;                     /* nav sticky, megamenu           */
  --glass-light:     rgba(255,255,255,0.92);   /* nav su pagina chiara (solid)   */
  --glass-dark:      rgba(10,10,10,0.85);      /* nav su hero scura allo scroll  */

  /* ── LAYOUT ──────────────────────────────────────────────────────────*/
  --container:      1200px;  /* larghezza massima contenuto            */
  --gutter:         40px;    /* padding orizzontale desktop            */
  --gutter-mobile:  20px;    /* padding orizzontale mobile             */
  --nav-h:          56px;    /* altezza barra di navigazione           */
  --drawer-w:       560px;   /* larghezza drawer laterale (min con vw) */

  /* ── MOTION ──────────────────────────────────────────────────────────*/
  --ease-drawer: cubic-bezier(.32, 0, .15, 1); /* apertura drawer/espansioni */
  --dur-fast:    0.2s;   /* hover, micro-interazioni  */
  --dur-med:     0.4s;   /* cambio stato nav          */
  --dur-drawer:  0.45s;  /* slide drawer              */
}

/* ── BREAKPOINT (riferimento; le media query non sono variabili CSS) ────
   ≤1024px  → la nav orizzontale collassa in hamburger
   ≤768px   → padding orizzontale a var(--gutter-mobile), layout 1 colonna
   375px    → viewport mobile di riferimento per l'audit (nessun overflow)
   ─────────────────────────────────────────────────────────────────────── */


/**
 * ACM · Hero chat — stili
 * Estratto da prototipo/index.html. Presuppone che il contenitore hero
 * (sezione con sfondo foto/video) sia già impostato con:
 *   position: relative; overflow: hidden;
 * come da ricostruzione della sezione 01 in Elementor.
 *
 * Le variabili --r-lg, --r-md, --r-pill, --white, --black, --font sono
 * quelle già definite in tokens.css (design-system/) — includile PRIMA
 * di questo file nel CSS personalizzato del sito.
 *
 * Dove metterlo in WP: incollato in coda a tokens.css nel CSS
 * Personalizzato globale di Elementor, oppure enqueued come file a parte
 * (vedi INTEGRAZIONE.md).
 */

/* ── overlay scuro sopra sfondo hero, si intensifica quando la chat è aperta ── */
.s1-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* è solo decorativo: non deve MAI intercettare i click */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.08) 35%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.88) 100%
  );
  transition: background 0.75s ease, backdrop-filter 0.75s ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.s1-hero.chat-active .s1-hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.50) 35%,
    rgba(0,0,0,0.80) 75%,
    rgba(0,0,0,0.95) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── contenitore messaggi chat ── */
.s1-hero-chat {
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  left: 50%; transform: translateX(-50%);
  bottom: 210px;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  padding: 0 24px 16px;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.45s;
}

.s1-hero.chat-active .s1-hero-chat { opacity: 1; pointer-events: all; }

.s1-chat-msg { display: flex; gap: 12px; padding: 10px 0; animation: acmMsgIn 0.3s ease forwards; }
.s1-chat-msg.user { flex-direction: row-reverse; }

@keyframes acmMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s1-chat-av {
  width: 28px; height: 28px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}

.s1-chat-msg.user .s1-chat-av {
  background: rgba(255,255,255,0.9);
  color: var(--black);
  border-color: transparent;
}

.s1-chat-body { max-width: 80%; font-size: 14px; line-height: 1.7; }

.s1-chat-msg.ai .s1-chat-body {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg);
  backdrop-filter: blur(20px);
  padding: 12px 16px;
  color: rgba(255,255,255,0.9);
}

.s1-chat-msg.user .s1-chat-body {
  background: rgba(255,255,255,0.9);
  border-radius: var(--r-lg) 4px var(--r-lg) var(--r-lg);
  padding: 12px 16px;
  color: var(--black);
}

.s1-chat-body p { margin-bottom: 8px; }
.s1-chat-body p:last-child { margin-bottom: 0; }
.s1-chat-body strong { font-weight: 500; }

.s1-chat-typing { display: flex; gap: 4px; align-items: center; padding: 4px 0; }
.s1-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  animation: acmDotBounce 1.4s infinite;
}
.s1-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.s1-chat-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes acmDotBounce {
  0%,60%,100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ── barra di input (glass bar) ── */
.s1-hero-bar {
  width: 100%;
  max-width: 640px;
      margin-left: auto;
    margin-right: auto;
  opacity: 0;
  animation: acmFadeUp 0.7s ease 0.9s forwards;
}

@keyframes acmFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.s1-hero-bar-glass {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: 12px 12px 12px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.s1-hero-bar-glass:focus-within {
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 4px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
}

.s1-hero-bar-glass textarea {
  flex: 1;
  background: none; border: none; outline: none; resize: none;
  font-family: var(--font); font-size: 16px; font-weight: 300;
  color: var(--white); line-height: 1.5;
  max-height: 120px; min-height: 26px; padding: 3px 0;
  caret-color: var(--white);
}

.s1-hero-bar-glass textarea::placeholder { color: rgba(255,255,255,0.42); }

.s1-hero-send {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  border: none;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
  opacity: 0.5;
}

.s1-hero-send.active {
  opacity: 1;
  background: var(--white);
  color: var(--black);
}

.s1-hero-send.active:hover { background: rgba(255,255,255,0.9); transform: scale(1.04); }
.s1-hero-send svg { width: 16px; height: 16px; }

/* ── chip suggerimenti rapidi ── */
.s1-hero-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 14px;
  transition: opacity 0.3s, transform 0.3s;
}

.s1-hero.chat-active .s1-hero-chips { opacity: 0; transform: translateY(6px); pointer-events: none; }

.s1-hero-chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-pill);
  padding: 7px 16px; font-size: 12px;
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  backdrop-filter: blur(16px);
  transition: all 0.2s;
}

.s1-hero-chip:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.28);
}

@media (max-width: 768px) {
  .s1-hero-bar-glass textarea { font-size: 15px; }
  .s1-hero-chips { gap: 6px; }
  .s1-hero-chip { font-size: 11px; padding: 6px 13px; }
}

/* ══════════════════════════════════════════════════════════
   AGGIUNTA v2 — contenitore che anima insieme titolo+novità+barra
   Queste regole mancavano nella prima versione: sono quelle che
   spostano il blocco verso il basso, nascondono Novità/titolo e
   mostrano la nota "AI" quando la chat si apre.
   ══════════════════════════════════════════════════════════ */

.s1-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.75s cubic-bezier(.32,0,.15,1);
}

.s1-hero.chat-active .s1-hero-content { transform: translateY(calc(40vh - 60px)); }

.s1-hero-news {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  padding: 6px 14px 6px 8px;
  backdrop-filter: blur(16px);
  margin-bottom: 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, opacity 0.35s ease, transform 0.35s ease;
}

.s1-hero-news:hover { background: rgba(255,255,255,0.16); }

.s1-news-badge {
  background: var(--white);
  color: var(--black);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
}

.s1-news-text { font-size: 13px; color: rgba(255,255,255,0.85); }
.s1-news-arr  { font-size: 12px; color: rgba(255,255,255,0.5); }

.s1-hero-title {
  font-size: clamp(44px, 6.5vw, 66px);
  font-weight: 300;
  letter-spacing: -2.5px;
  line-height: 1.02;
  color: var(--white);
  margin-bottom: 40px;
  overflow: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.s1-hero.chat-active .s1-hero-news,
.s1-hero.chat-active .s1-hero-title {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  visibility: hidden;
}

.s1-hero-note {
  font-size: 10px; color: rgba(255,255,255,0.28);
  margin-top: 12px; letter-spacing: 0.2px;
  opacity: 0; transition: opacity 0.5s;
}

.s1-hero.chat-active .s1-hero-note { opacity: 1; }

/* ================================================================
   FIX Elementor — il wrapper .elementor-widget-html generato
   automaticamente da Elementor attorno a overlay+chat collassa ad
   altezza 0 (i suoi unici figli sono position:absolute, quindi non
   contribuiscono alla sua altezza) e li taglia via. Lo rendiamo noi
   stessi un box a tutto schermo, individuandolo tramite il
   contenuto che contiene (:has), senza dover toccare la struttura
   Elementor.
   ================================================================ */

#hero.s1-hero {
    position: relative;
    overflow: hidden;
}

.elementor-widget-html:has(> .s1-hero-overlay) {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

/* ── FIX hover rosa + icona piccola sul pulsante invio hero ── */
.s1-hero-send {
  padding: 0 !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

.s1-hero-send,
.s1-hero-send:hover,
.s1-hero-send:focus {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.3) !important;
}

.s1-hero-send.active,
.s1-hero-send.active:hover,
.s1-hero-send.active:focus {
  background: var(--white) !important;
  color: var(--black) !important;
}

.s1-hero-send.active:hover {
  transform: scale(1.04);
}

.s1-hero-send svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  stroke: currentColor !important;
  fill: none !important;
}



/* ==========================
HEADER
================= */


/* ══════════════════════════════════════════════
   HEADER — stato base
   ══════════════════════════════════════════════ */
.acm-header {
  transition: background .4s, border-color .4s;
}

/* ── Logo ── */
.logo-wrap { position: relative; display: inline-flex; align-items: center; }
.logo-wrap a:has(.logo-dark) { position: absolute; inset: 0; display: flex; align-items: center; }
.logo-wrap .logo-dark  { opacity: 0; transition: opacity .3s ease; }
.logo-wrap .logo-light { opacity: 1; transition: opacity .3s ease; }

/* ── Voci menu: colore base (stato trasparente) ── */
.acm-header .e-n-menu-title-text,
.acm-header .e-n-menu-dropdown-icon {
  color: rgba(255,255,255,.75) !important;
  transition: color .2s, background .2s !important;
}
.acm-header .e-n-menu-dropdown-icon svg,
.acm-header .e-n-menu-dropdown-icon svg path {
  fill: currentColor !important;
}



/* Sfondo hover (pill) dietro testo+icona, parte da trasparente */
.acm-header .e-n-menu-title {
  border-radius: 8px;
  padding: 4px 10px;
  margin: -4px -10px;
  transition: background .2s;
}

/* ── Voce CON dropdown (es. "Corsi"): hover SEMPRE nero + g5,
   indipendentemente dallo stato dell'header. L'hover è sul <li>
   così resta attivo anche quando il mouse entra nel pannello,
   che è annidato dentro lo stesso <li>. ── */
.acm-header .e-n-menu-item:has(.e-n-menu-dropdown-icon):hover .e-n-menu-title-text,
.acm-header .e-n-menu-item:has(.e-n-menu-dropdown-icon):hover .e-n-menu-dropdown-icon {
  color: var(--black) !important;
}
.acm-header .e-n-menu-item:has(.e-n-menu-dropdown-icon):hover .e-n-menu-title {
  background: var(--g5) !important;
}

/* ── Voce SENZA dropdown: hover bianco puro (solo stato trasparente) ── */
.acm-header .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title-text {
  color: var(--white) !important;
}

/* ── Bottone header ── */

/* FIX ordine classi globali Elementor V4 (10-10-2026)
   Elementor genera un CSS delle classi globali per ogni documento che le usa.
   Sulle pagine dove anche il template della pagina usa .btn (es. archivio
   Open Days, template 27679), il suo file global-XXXX.css viene caricato DOPO
   quello dell'header e ristampa ".elementor .btn", che a parità di specificità
   sovrascrive .btn-light e .btn-header (sfondo trasparente, padding 14/24).
   Concatenando le classi (.btn.btn-light) la specificità sale e vince sempre.
   ⚠ Se modifichi .btn-light o .btn-header in Elementor → Classi, aggiorna anche qui. */
.elementor .btn.btn-light {
  color: var(--black);
  border-color: var(--g5);
  background-color: var(--white);
}
.elementor .btn.btn-header {
  font-size: var(--fs-xs);
  line-height: 14px;
  padding-block: 8px;
  padding-inline: 18px;
}

.acm-header .btn-header,
.acm-header .btn-header:hover,
.acm-header .btn-header:focus {
  transform: none !important;
}
.acm-header .btn-header:hover,
.acm-header .btn-header:focus {
  background: var(--white) !important;
  color: var(--black) !important;
}

/* ══════════════════════════════════════════════
   HEADER — selettore lingua (WPML legacy dropdown)
   Widget shortcode con classe .selettore-lingua,
   presente sia in .nav-menu (desktop) sia in .nav-menu-mob
   ══════════════════════════════════════════════ */

/* reset del contenitore WPML (di default è largo 15.5em) */
.acm-header .selettore-lingua .wpml-ls-legacy-dropdown {
  width: auto;
  max-width: none;
}
.acm-header .selettore-lingua .wpml-ls-legacy-dropdown > ul {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.acm-header .selettore-lingua .wpml-ls-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Toggle lingua corrente: stessa resa delle voci menu */
.acm-header .selettore-lingua .wpml-ls-item-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: rgba(255,255,255,.75) !important;
  text-decoration: none !important;
  line-height: 1.4;
  font-family: inherit;
  font-size: 15px;        /* ⚠ allinea al font-size delle voci menu */
  font-weight: 500;       /* ⚠ allinea al peso delle voci menu */
  letter-spacing: normal; /* ⚠ allinea se il menu ha letter-spacing */
  transition: color .2s, background .2s !important;
}

/* freccetta: sostituisce il triangolo WPML, eredita il colore del testo */
.acm-header .selettore-lingua .wpml-ls-item-toggle::after {
  content: "";
  position: static !important;
  display: block;
  width: 6px;
  height: 6px;
  border: 0 !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

/* hover stato trasparente: bianco puro (l'header non passa a light) */
.acm-header .selettore-lingua .wpml-ls-current-language:hover > .wpml-ls-item-toggle,
.acm-header .selettore-lingua .wpml-ls-current-language:focus-within > .wpml-ls-item-toggle {
  color: var(--white) !important;
  background: transparent !important;
}

/* freccetta verso l'alto a tendina aperta */
.acm-header .selettore-lingua .wpml-ls-current-language:hover > .wpml-ls-item-toggle::after,
.acm-header .selettore-lingua .wpml-ls-current-language:focus-within > .wpml-ls-item-toggle::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Tendina altre lingue: card bianca, identica in entrambi gli stati */
.acm-header .selettore-lingua .wpml-ls-sub-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  min-width: 64px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 0 !important;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 101;
}
/* ponte invisibile: evita che l'hover si interrompa nel gap */
.acm-header .selettore-lingua .wpml-ls-sub-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.acm-header .selettore-lingua .wpml-ls-current-language:hover .wpml-ls-sub-menu,
.acm-header .selettore-lingua .wpml-ls-current-language:focus-within .wpml-ls-sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.acm-header .selettore-lingua .wpml-ls-sub-menu .wpml-ls-link {
  display: block;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  color: rgba(29,29,31,.7) !important;
  text-align: center;
  text-decoration: none !important;
  line-height: 1.4;
  font-family: inherit;
  font-size: 15px;        /* ⚠ stesso valore del toggle */
  font-weight: 500;
  transition: color .2s, background .2s !important;
}
.acm-header .selettore-lingua .wpml-ls-sub-menu .wpml-ls-link:hover,
.acm-header .selettore-lingua .wpml-ls-sub-menu .wpml-ls-link:focus {
  color: var(--black) !important;
  background: var(--g5) !important;
}

/* ══════════════════════════════════════════════
   HEADER — stato "light" (scroll · hover Corsi · pagina forzata · off canvas aperto)
   ══════════════════════════════════════════════ */
.acm-header.is-scrolled,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown),
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header,
body.force-light-header .acm-header {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.acm-header.is-scrolled .logo-dark,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .logo-dark,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .logo-dark,
body.force-light-header .acm-header .logo-dark { opacity: 1; }

.acm-header.is-scrolled .logo-light,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .logo-light,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .logo-light,
body.force-light-header .acm-header .logo-light { opacity: 0; }

.acm-header.is-scrolled .e-n-menu-title-text,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .e-n-menu-title-text,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .e-n-menu-title-text,
body.force-light-header .acm-header .e-n-menu-title-text,
.acm-header.is-scrolled .e-n-menu-dropdown-icon,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .e-n-menu-dropdown-icon,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .e-n-menu-dropdown-icon,
body.force-light-header .acm-header .e-n-menu-dropdown-icon,
.acm-header.is-scrolled .selettore-lingua .wpml-ls-item-toggle,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .selettore-lingua .wpml-ls-item-toggle,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .selettore-lingua .wpml-ls-item-toggle,
body.force-light-header .acm-header .selettore-lingua .wpml-ls-item-toggle {
  color: rgba(29,29,31,.7) !important;
}

/* voci SENZA dropdown, in stato light: hover diventa black/g5 (come le voci con dropdown) */
.acm-header.is-scrolled .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title-text,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title-text,
body.force-light-header .acm-header .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title-text {
  color: var(--black) !important;
}
.acm-header.is-scrolled .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title,
body.force-light-header .acm-header .e-n-menu-item:not(:has(.e-n-menu-dropdown-icon)):hover .e-n-menu-title {
  background: var(--g5) !important;
}

/* selettore lingua in stato light: hover black/g5, come le altre voci */
.acm-header.is-scrolled .selettore-lingua .wpml-ls-current-language:hover > .wpml-ls-item-toggle,
.acm-header.is-scrolled .selettore-lingua .wpml-ls-current-language:focus-within > .wpml-ls-item-toggle,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .selettore-lingua .wpml-ls-current-language:hover > .wpml-ls-item-toggle,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .selettore-lingua .wpml-ls-current-language:focus-within > .wpml-ls-item-toggle,
body.force-light-header .acm-header .selettore-lingua .wpml-ls-current-language:hover > .wpml-ls-item-toggle,
body.force-light-header .acm-header .selettore-lingua .wpml-ls-current-language:focus-within > .wpml-ls-item-toggle {
  color: var(--black) !important;
  background: var(--g5) !important;
}

.acm-header.is-scrolled .btn-header, .acm-header.is-scrolled .btn-header:hover, .acm-header.is-scrolled .btn-header:focus,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .btn-header,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .btn-header:hover,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .btn-header:focus,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .btn-header,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .btn-header:hover,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .btn-header:focus,
body.force-light-header .acm-header .btn-header,
body.force-light-header .acm-header .btn-header:hover,
body.force-light-header .acm-header .btn-header:focus {
  background: var(--black) !important;
  color: var(--white) !important;
}

/* icona hamburger nero in stato light (identico principio delle voci menu) */
.acm-header.is-scrolled .acm-burger-visual span,
.acm-header:has(.e-n-menu-item:hover .menu-item--dropdown) .acm-burger-visual span,
body:has(.e-off-canvas[aria-hidden="false"]) .acm-header .acm-burger-visual span,
body.force-light-header .acm-header .acm-burger-visual span {
  background: var(--black);
}



/* ══════════════════════════════════════════════
   HEADER MOBILE
   ══════════════════════════════════════════════ */
/* Contenitore che raggruppa trigger reale + icona visiva */
.acm-burger-wrap { position: relative; width: 42px; height: 42px; }

/* il widget Elementor reale (icon/button con il tag dinamico) va reso invisibile
   ma resta sopra in termini di area cliccabile*/
.acm-burger-wrap .icon-menu-mobile-aprechiude-offcanva {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
}

.acm-burger-visual { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* ══════════════════════════════════════════════
   HEADER — icona hamburger mobile
   ══════════════════════════════════════════════ */
.acm-burger-visual span {
  position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.9);
  transition: transform .4s cubic-bezier(.32,0,.15,1), opacity .2s ease, background .3s;
}
.acm-burger-visual span:nth-child(1) { top: 15px; }
.acm-burger-visual span:nth-child(2) { top: 21px; }
.acm-burger-visual span:nth-child(3) { top: 27px; }

/* stato aperto: barre → X, stessa curva usata per lo slide del drawer */
body:has(.e-off-canvas[aria-hidden="false"]) .acm-burger-visual span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body:has(.e-off-canvas[aria-hidden="false"]) .acm-burger-visual span:nth-child(2) {
  opacity: 0;
}
body:has(.e-off-canvas[aria-hidden="false"]) .acm-burger-visual span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ══════════════════════════════════════════════
   OFF CANVAS MOBILE — velocità reale dell'animazione
   Elementor usa --e-off-canvas-animation-duration
   per pilotare l'animation (slideInRight/slideOutRight),
   non la transition — va sovrascritta questa variabile.
   ══════════════════════════════════════════════ */
.elementor-widget-off-canvas {
  --e-off-canvas-animation-duration: .4s !important;
}

.elementor-widget-off-canvas .e-off-canvas {
  animation-timing-function: cubic-bezier(.32, 0, .15, 1) !important;
}



.acm-header .e-off-canvas {
    margin-top: 68px;
    padding-bottom: 68px;
}





/*CAROSELLO TESTI A SCORRIMENTO*/
.testi-ticker,
.testi-tricker {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.testi-ticker-track {
  display: flex !important;
  flex: none !important; /* haylò. 2026-10-02: senza, il contenitore la comprimeva alla larghezza dello schermo e lo scorrimento saltava */
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  animation: testiTick 32s linear infinite;
  will-change: transform;
}

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

.testi-ticker-item {
  flex: 0 0 auto !important;
  padding: 0 36px !important;
  margin: 0 !important;
}

@keyframes testiTick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testi-ticker-track { animation: none !important; }
}

/*
 * ============================================================
 * JetEngine Listing Grid / Swiper
 * Min Items Slider — stile per lo stato statico
 * ============================================================
 *
 * Si applica quando lo script min-items-slider.js aggiunge
 * la classe "slider-static" al carosello (elementi reali
 * sotto la soglia minima per il device corrente).
 *
 * Effetto:
 * - nasconde le slide duplicate dal loop di Swiper
 * - trasforma il wrapper da riga scorrevole a griglia
 *   che va a capo, mostrando tutti gli elementi reali
 * - rimuove eventuali limiti di overflow/altezza fissa
 *
 * IMPORTANTE: questo blocco va inserito in un punto GLOBALE
 * (es. WPCode → CSS Snippet, oppure Elementor → Impostazioni
 * sito → Custom CSS), NON nel campo "Custom CSS" di un singolo
 * widget. Il campo Custom CSS di un widget usa la keyword
 * ".elementor-kit-7" per scoparsi automaticamente a quel widget, mentre
 * qui serve una regola valida per qualunque Listing Grid che
 * riceva la classe slider-static, applicata via JS.
 */

.slider-static.swiper,
.slider-static .swiper-wrapper {
    height: auto !important;
    overflow: visible !important;
}

.slider-static .swiper-wrapper {
    flex-wrap: wrap !important;
    transform: none !important;
}

.slider-static .swiper-slide-duplicate {
    display: none !important;
}

.slider-static .swiper-slide.auto-columns {
    width: auto;
}

/* ==================================================
   GRAVITY FORMS - STYLES GLOBALI (MULTI-STEP & CARDS)
   Aggiornamento: uniformato lo stile del campo
   "paragrafo" (textarea) a quello degli altri input
   (altezza gestita da Gravity Forms, non forzata via CSS)
   ================================================== */

/* 0. Nascondi ovunque la nota "* indica i campi obbligatori"
   (regola globale per tutti i Gravity Forms del sito) */
.gform_wrapper .gform_required_legend {
    display: none !important;
}

/* 1. Riduzione del gap tra i campi del form a 20px */
.gform_wrapper .gform_fields {
    gap: 20px !important;
    grid-row-gap: 20px !important;
    grid-column-gap: 20px !important;
}

/* 2. Nascondi l'input radio nativo mantenendo l'accessibilità */
.gform_wrapper .gfield_radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Nascondi la legend nativa del campo radio */
.gform_wrapper .gfield_radio > legend.gfield_label {
    display: none !important;
}

/* 3. Layout delle opzioni (.gchoice) e ampiezza 100% */
.gform_wrapper .gfield_radio {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.gform_wrapper .gchoice {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 4. Card di selezione (.sf-choice-inner) */
.gform_wrapper .gfield_radio label.gform-field-label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.gform_wrapper .sf-choice-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Testo all'interno delle card */
.gform_wrapper .sf-choice-inner > span:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.gform_wrapper .sf-choice-inner b {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    line-height: 1.3 !important;
}

.gform_wrapper .sf-choice-inner small {
    font-size: 13px !important;
    color: #6e6e73 !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* Badge della Sede / Città */
.gform_wrapper .sf-choice-inner .city {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    background-color: #f5f5f7 !important;
    color: #3a3a3c !important;
    white-space: nowrap !important;
    margin-left: 16px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Stato Hover e Checked delle Card */
.gform_wrapper .gfield_radio label:hover .sf-choice-inner {
    border-color: #1d1d1f !important;
    background-color: #fafafa !important;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked + label .sf-choice-inner {
    border-color: #1d1d1f !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 1px #1d1d1f !important;
}

.gform_wrapper .gfield_radio input[type="radio"]:checked + label .sf-choice-inner .city {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
}

/* 5. Campi di riepilogo in sola lettura (Readonly generici) */
.gform_wrapper .gfield input[readonly] {
    background-color: #f5f5f7 !important;
    border: 1px solid #d1d1d6 !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    cursor: not-allowed !important;
}

/* 6. Styling unificato per Input di testo e SELECT + Centratura verticale */
.gform_wrapper input[type="text"]:not([readonly]),
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select.gfield_select {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #d1d1d6 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1d1d1f !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    line-height: normal !important;
    transition: border-color 0.2s ease !important;
}

/* 6b. Styling unificato per il campo TEXTAREA (campo "paragrafo").
   Stessa identità visiva degli altri input (bordo, radius, font,
   colori, transizione), ma senza forzare l'altezza: resta quella
   gestita da Gravity Forms (attributo "rows" impostato sul campo). */
.gform_wrapper textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #d1d1d6 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1d1d1f !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease !important;
    resize: vertical !important;
}

/* FIX feedback: colore del placeholder unificato su tutti i campi di testo
   (incluso il textarea del campo "paragrafo") */
.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper input[type="tel"]::placeholder,
.gform_wrapper input[type="url"]::placeholder,
.gform_wrapper input[type="number"]::placeholder,
.gform_wrapper textarea::placeholder {
    color: #6e6e73 !important;
    opacity: 1 !important;
}

/* Customizzazione freccia e centratura per i menu SELECT */
.gform_wrapper select.gfield_select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%236e6e73'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    cursor: pointer !important;
    /* FIX feedback: su Chrome il testo della select non risultava centrato
       verticalmente perché "line-height: normal" viene calcolato in modo
       diverso rispetto a Firefox. Impostando un line-height esplicito pari
       all'altezza utile del box (48px - 2px di bordo) il testo si centra
       correttamente su entrambi i browser. */
    line-height: 46px !important;
}

.gform_wrapper input:focus,
.gform_wrapper select.gfield_select:focus,
.gform_wrapper textarea:focus {
    border-color: #1d1d1f !important;
    outline: none !important;
}

/* FIX feedback: colore "placeholder" della select (opzione vuota iniziale)
   unificato a quello degli altri campi. La select non supporta ::placeholder,
   quindi si intercetta lo stato "nessuna opzione reale selezionata" in due modi
   combinati per massima compatibilità:
   1) :has(option:checked[value=""]) - controlla direttamente se l'opzione
      attualmente selezionata ha value vuoto, indipendentemente dal fatto che
      il campo sia impostato come required o meno (copre il caso di questo
      screenshot, dove :invalid da solo non scattava);
   2) :invalid - fallback per il caso di campo required con opzione vuota. */
.gform_wrapper select.gfield_select:invalid,
.gform_wrapper select.gfield_select:has(option:checked[value=""]) {
    color: #6e6e73 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 7. Campi Privacy e Checkbox generici */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield--type-consent {
    margin-top: 10px !important;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield--type-consent .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield--type-consent input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 1px 0 0 0 !important;
    cursor: pointer !important;
    accent-color: #1d1d1f !important;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield--type-consent label {
    font-size: 11px !important;
    color: #6e6e73 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* 8. Indicatore di Step e Barra di Progresso */
.gform_wrapper .gf_progressbar_wrapper {
    margin-bottom: 24px !important;
}

.gform_wrapper .gf_progressbar_title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin-bottom: 8px !important;
}

.gform_wrapper .gf_progressbar {
    height: 6px !important;
    background-color: #e5e5ea !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.gform_wrapper .gf_progressbar_percentage {
    background-color: #1d1d1f !important;
    background-image: none !important;
    height: 100% !important;
    border-radius: 10px !important;
    /* FIX feedback: Gravity Forms aggiorna la larghezza della barra tramite
       uno style inline (width in %) ad ogni cambio step. Transizionando la
       proprietà "width" il passaggio da uno step all'altro risulta morbido
       invece che scattare istantaneamente. */
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.gform_wrapper .gf_progressbar_percentage span {
    display: none !important;
}

/* 9. Footer e Pulsanti di Navigazione (Successivo, Precedente, Invia) */
.gform_wrapper .gform_page_footer,
.gform_wrapper .gform_footer {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding: 0 !important;
}

/* Stile base comune a tutti i pulsanti */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
    flex: 1 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    border-radius: 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

/* Pulsante INVIA (Primario - Fondo Nero, Testo Bianco) */
.gform_wrapper .gform_button {
    background-color: #1d1d1f !important;
    color: #ffffff !important;
    border: none !important;
}

.gform_wrapper .gform_button:hover {
    background-color: #3a3a3c !important;
}

/* Pulsanti SUCCESSIVO e PRECEDENTE (Secondari - Fondo Bianco, Bordo Nero, Testo Nero) */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
    background-color: #ffffff !important;
    color: #1d1d1f !important;
    border: 1.5px solid #1d1d1f !important;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover {
    background-color: #f5f5f7 !important;
    color: #1d1d1f !important;
}

/* 10. FIX feedback: leggera transizione dei campi al cambio step.
   Gravity Forms mostra/nasconde ogni pagina del form (.gform_page) con
   display:none/block via JS: il passaggio da "none" a un altro display fa
   ripartire un'animazione CSS a keyframes definita sull'elemento, quindi
   ogni volta che uno step diventa visibile i suoi campi eseguono un fade-in
   leggero invece di comparire di scatto. Nessuna dipendenza da JS aggiuntivo. */
@keyframes sf-step-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gform_wrapper .gform_page {
    animation: sf-step-fade-in 0.35s ease-out !important;
}

/* Rispetta la preferenza utente di ridurre le animazioni */
@media (prefers-reduced-motion: reduce) {
    .gform_wrapper .gform_page {
        animation: none !important;
    }
}

/* 11. Label dei campi (nuovo form con etichette visibili)
   Selettore ".gfield_label" e non ".gform-field-label" generico:
   nel markup Gravity Forms quest'ultima classe è condivisa anche dalle
   label delle card radio (sezione 4), che devono restare wrapper a
   tutta larghezza senza questi stili tipografici. ".gfield_label" invece
   è presente solo sulle vere label di campo (testo, email, tel, select...),
   quindi non entra in conflitto con lo stile delle card. */
.gform_wrapper .gfield_label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--g2) !important;
    margin-bottom: 6px !important;
}

/* 12. Asterisco di obbligatorietà: stesso colore/stile della label */
.gform_wrapper .gfield_required .gfield_required_asterisk {
    color: var(--g2) !important;
    font-weight: 500 !important;
}

/* FIX nascosto campo Recap Data Scelta 
nascosto solo visivamente per evitare problemi con i dati su Zapier/Salesforce 
*/
#field_4_33 {
  display: none !important;
}

/* 13. Card "Prenota un colloquio personalizzato" (form Open Days, campo HTML)
   Riusa lo stile .sf-choice-inner delle card date (sezione 4): qui si azzerano
   gli stili nativi/tema del <button>, si allinea la spaziatura e la larghezza
   resta automatica come le card date. */

/* Distanza dalla card precedente pari a quella tra le card date (10px):
   20px gap tra campi + 24px margin-bottom del radio = 44px → -34px */
.gform_wrapper .gfield.acm-od-colloquio-field {
    margin-top: -34px !important;
}

/* Reset del button (tema/Elementor applicano stili globali ai <button>) */
.gform_wrapper .acm-od-colloquio,
.gform_wrapper .acm-od-colloquio:hover,
.gform_wrapper .acm-od-colloquio:focus,
.gform_wrapper .acm-od-colloquio:active {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font: inherit !important;
    color: inherit !important;
    cursor: pointer !important;
}

/* Larghezza automatica della card interna (la sezione 4 la forza al 100%) */
.gform_wrapper .acm-od-colloquio .sf-choice-inner {
    width: auto !important;
}

/* Hover e focus da tastiera: stesso effetto delle card date */
.gform_wrapper .acm-od-colloquio:hover .sf-choice-inner,
.gform_wrapper .acm-od-colloquio:focus-visible .sf-choice-inner {
    border-color: #1d1d1f !important;
    background-color: #fafafa !important;
}

.gform_wrapper .acm-od-colloquio:focus-visible .sf-choice-inner {
    box-shadow: 0 0 0 1px #1d1d1f !important;
}

/* 13b. Card colloquio — fix mobile: il testo va a capo dentro la card
   (il tema applica white-space: nowrap ai <button>) */
.gform_wrapper .acm-od-colloquio,
.gform_wrapper .acm-od-colloquio * {
    white-space: normal !important;
}

.gform_wrapper .acm-od-colloquio .sf-choice-inner {
    max-width: 100% !important;
}

.gform_wrapper .acm-od-colloquio .sf-choice-inner > span:first-child {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

/* =========================================================
   Form "Corso generico" (ID 1) — Sede e Città
   Da mettere nel CSS Personalizzato GLOBALE di Elementor
   (vale per IT ed EN). Rimuovere le vecchie regole #field_1_9
   dal CSS del widget Shortcode, in entrambe le lingue.
   ========================================================= */

/* Sede unica: campo nascosto solo visivamente (il valore viene inviato) */
#field_1_15.acm-sede-nascosta {
  display: none !important;
}

/* Città: di base a piena larghezza (inizia una riga nuova) */
#field_1_9 {
  grid-column: span 12;
}

/* Città a mezza larghezza solo quando ESATTAMENTE uno tra Sede e Regione è nascosto:
   in quel caso prima di Città resta un numero dispari di campi a metà.
   [style*="none"] copre sia lo stato iniziale scritto da Gravity Forms
   (style="display:none;") sia quello applicato via JS (style="display: none;"). */
#gform_fields_1:has(> #field_1_15.acm-sede-nascosta):not(:has(> #field_1_8[style*="none"])) > #field_1_9,
#gform_fields_1:not(:has(> #field_1_15.acm-sede-nascosta)):has(> #field_1_8[style*="none"]) > #field_1_9 {
  grid-column: span 6;
}




/* ═══════════════════════════════════════════════════
   INDICE STICKY SUB-NAV DENTRO LE PAGINE 
   ═══════════════════════════════════════════════════ */
*,::before,::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:120px; }

/* Il vero elemento sticky ora è il wrapper esterno
   "sc-subnav-superiore": sfondo/blur/bordo li gestisci
   tu da Elementor v4, qui gli diamo solo lo sticky. */
.sc-subnav-superiore{
  position:sticky;
  top:68px;
  z-index:40;
}

/* Il nav interno non deve più avere sfondo/sticky propri:
   fa solo da contenitore per i link, centrato e paddato. */
.sc-subnav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 0px;
  display:flex;
  gap:26px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.sc-subnav-inner::-webkit-scrollbar{ display:none; }

/* ATE, traducendo il widget HTML del menu, sostituisce gli a capo fra i link con <br />: in un contenitore flex
   ogni <br> diventa un elemento e raddoppia il gap (52px invece di 26px). Qui li neutralizziamo. (06-10-2026) */
.sc-subnav-inner br{ display:none; }

.sc-subnav a{
  flex-shrink:0;
  padding:15px 0;
  font-size:13px;
  color:#6e6e73;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.sc-subnav a:hover{ color:#1d1d1f; }
.sc-subnav a.active{ color:#1d1d1f; border-bottom-color:#1d1d1f; }

/* Mobile: solo i colori del testo restano gestiti qui.
   Lo sfondo scuro mobile va replicato come variante
   responsive della classe sc-subnav-superiore in Elementor. */
@media(max-width:768px){
  .sc-subnav a{ color:rgba(255,255,255,.6); }
  .sc-subnav a:hover{ color:#fff; }
  .sc-subnav a.active{ color:#fff; border-bottom-color:#fff; }
  .sc-subnav-inner{ padding:0 20px; }
}/* End custom CSS */