/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1776872836
Updated: 2026-04-22 17:47:16

*/
/* ============================================================
   INNOFORM.CSS — Design system unificato
   Versione 1.1 • Aprile 2026

   Struttura del file:
   1) BASE — stile homepage e tipografia globale
   2) EXTENSIONS — componenti pagine figlie (hero, breadcrumb,
      FAQ, step, checklist, clause, highlight, tabelle, siblings,
      warning, utility)
   2b) COMPONENTI AGGIUNTIVI — pagine specifiche (form, news,
      corsi, hub, area, selection box, ecc.)
   3) RESPONSIVE EXTENSIONS — media query per le extensions

   Convenzioni:
   - Selettori preferibilmente scopati sotto .inno-page o classi
     specifiche (es. .inno-faq) per evitare collisioni con tema
   - Design tokens prefissati --inno-* per protezione namespace
   - !important usato solo per override mirati di Elementor/tema
   - Stessi colori, radius e tipografia per uniformità visiva
   - Breakpoint: 1024, 768, 480, 375

   Audit !important (ultimo: aprile 2026):
   - Totale: 111 dichiarazioni
   - 61 override Elementor/tema confermati (.elementor-*, .elementor-button)
   - 36 difensivi su immagini/dimensioni (object-fit, height, width per
     resistere ad attributi HTML width/height inline di Elementor,
     incluso footer logo)
   - 14 sul bottone submit form Elementor (necessari per battere
     specificità di .elementor-button del builder)
   - 0 inutili / rimovibili senza rischio regressioni
   ============================================================ */


/* ============================================================
   1) BASE — HOMEPAGE STYLE (punto di arrivo)
   ============================================================ */

/* ------------------------------------------------------------
   DESIGN TOKENS — Innoform Design System
   
   Tutti i token sono prefissati --inno-* per evitare collisioni
   con variabili globali di tema/Elementor/plugin che usano
   nomi generici (--color-text, --fs-base, ecc.).
   
   Sezioni:
     1) Tipografia (font-size + line-height + clamp responsive)
     2) Colori (brand, semantic, surfaces)
     3) Radius
     4) Spacing
     5) Legacy aliases (backward compatibility)
   ------------------------------------------------------------ */
:root {
  /* ===== 1) TIPOGRAFIA ===== */
  
  /* Scala "major third" (rapporto 1.25). 9 valori. */
  --inno-fs-2xs:  0.65rem;   /* 10.4px — micro pill labels */
  --inno-fs-xs:   0.78rem;   /* 12.5px — caption, eyebrow subtitle */
  --inno-fs-sm:   0.875rem;  /* 14px   — small body, card excerpt, link */
  --inno-fs-base: 1rem;      /* 16px   — body default */
  --inno-fs-md:   1.25rem;   /* 20px   — h3, hero description */
  --inno-fs-lg:   1.5rem;    /* 24px   — h3 prominent */
  --inno-fs-xl:   1.875rem;  /* 30px   — h2 */
  --inno-fs-2xl:  2.5rem;    /* 40px   — h1 page */
  --inno-fs-3xl:  3rem;      /* 48px   — h1 hero home */

  /* Line-height scale */
  --inno-lh-tight:   1.2;    /* headings */
  --inno-lh-snug:    1.35;   /* card titles, compact text */
  --inno-lh-normal:  1.55;   /* small body, excerpt */
  --inno-lh-relaxed: 1.7;    /* hero description */
  --inno-lh-loose:   1.8;    /* body paragraphs */

  /* Clamp responsivi (da scala) */
  --inno-fs-h1-hero: clamp(1.875rem, 4vw, 3rem);     /* hero home */
  --inno-fs-h1-page: clamp(1.5rem, 3vw, 2.5rem);     /* hero pagine figlie */
  --inno-fs-h2-base: clamp(1.25rem, 2.5vw, 1.875rem);

  /* ===== 2) COLORI ===== */
  
  /* Brand */
  --inno-color-brand-navy:       #1B2A4A;  /* navy istituzionale, headings, testo forte */
  --inno-color-brand-dark:       #1b1d38;  /* dark background sezioni (cta-finale, clause) */
  --inno-color-brand-blue:       #0744f3;  /* hover, accent attivo */
  --inno-color-brand-lime:       #B8E600;  /* CTA primaria, accent border */
  --inno-color-brand-lime-light: #d6fb84;  /* hover lime, accent su dark */

  /* Semantic */
  --inno-color-text:        #4a5568;  /* body text default */
  --inno-color-text-muted:  #6b7280;  /* secondary, captions, meta */
  --inno-color-border:      #e5e7eb;  /* card border, separators */
  
  /* Surfaces */
  --inno-color-bg-soft:     #f7f8fa;  /* background card grigio chiaro */
  --inno-color-bg-subtle:   #f9fafb;  /* background ancora più tenue (FAQ summary) */
  --inno-color-bg-muted:    #f3f4f6;  /* skeleton, pill grigi */

  /* ===== 3) RADIUS ===== */
  --inno-radius-sm: 8px;    /* button, input, FAQ, accordion */
  --inno-radius-md: 10px;   /* card piccole */
  --inno-radius-lg: 12px;   /* card grandi, hero, sezioni */

  /* ===== 4) SPACING — RESERVED ===== */
  /* Token definiti per future migrazioni del layout responsive.
     ATTUALMENTE NON USATI nel file: i valori 80px/60px/40px sono
     ancora hardcoded nei media query.
     
     Quando si decide di refactorare lo spacing delle sezioni,
     sostituire i valori raw con queste var per centralizzare il
     controllo. Non rimuovere: l'aggiunta è economica, la rimozione
     futura sarebbe più costosa (richiede reintroduzione + doc). */
  --inno-space-section:        80px;  /* desktop, .inno-section margin */
  --inno-space-section-tablet: 60px;  /* @media 1024 */
  --inno-space-section-mobile: 40px;  /* @media 480 */

  /* ===== 5) TIPOGRAFIA FOOTER — fondo scuro =====
     Token specifici per testo su sfondo scuro, leggermente più
     grandi della scala body generica per preservare leggibilità.
     Su fondo scuro il testo appare otticamente più piccolo: queste
     dimensioni compensano. NON allineare alla scala major third:
     i valori sono volutamente fuori scala per ragioni di design. */
  --inno-fs-footer-body:    0.93rem;  /* corpo footer base */
  --inno-fs-footer-link:    0.9rem;   /* link colonna, pillar */
  --inno-fs-footer-small:   0.88rem;  /* tagline, contact rows */
  --inno-fs-footer-heading: 0.82rem;  /* heading colonne (uppercase) */
  --inno-fs-footer-legal:   0.8rem;   /* barra legale finale */

  /* ============================================================
     LEGACY ALIASES — Backward compatibility
     
     ⚠️ DEPRECATI. Usano i nuovi token prefissati come fallback.
     Mantenuti perché potrebbero essere usati in CSS esterno:
       - WordPress → Aspetto → Personalizza → CSS aggiuntivo
       - Elementor → Site Settings → Custom CSS
       - Elementor → Page Settings → Advanced → Custom CSS
       - Widget HTML/Shortcode con style inline
       - Plugin con CSS custom (Code Snippets, ecc.)
     
     RIMUOVERE SOLO DOPO verifica globale documentata che
     nessun CSS esterno al file usi --fs-*, --lh-*, ecc.
     ============================================================ */
  --fs-2xs:     var(--inno-fs-2xs);
  --fs-xs:      var(--inno-fs-xs);
  --fs-sm:      var(--inno-fs-sm);
  --fs-base:    var(--inno-fs-base);
  --fs-md:      var(--inno-fs-md);
  --fs-lg:      var(--inno-fs-lg);
  --fs-xl:      var(--inno-fs-xl);
  --fs-2xl:     var(--inno-fs-2xl);
  --fs-3xl:     var(--inno-fs-3xl);
  
  --lh-tight:   var(--inno-lh-tight);
  --lh-snug:    var(--inno-lh-snug);
  --lh-normal:  var(--inno-lh-normal);
  --lh-relaxed: var(--inno-lh-relaxed);
  --lh-loose:   var(--inno-lh-loose);
  
  --fs-h1-hero: var(--inno-fs-h1-hero);
  --fs-h1-page: var(--inno-fs-h1-page);
  --fs-h2-base: var(--inno-fs-h2-base);
}

.inno-page {
  color: var(--inno-color-text);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-loose);
  -webkit-font-smoothing: antialiased;
}

.inno-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 30px;
  contain: layout style;
}

.inno-row {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 30px;
}

.inno-col-text { flex: 1; min-width: 0; }
.inno-col-img { flex: 1; min-width: 0; }
.inno-col-img img,
.inno-row .inno-col-img img,
.inno-row-reverse .inno-col-img img {
  width: 100%;
  height: auto;
  border-radius: var(--inno-radius-lg);
  object-fit: cover;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* --- Tipografia --- */
/* H1 base: dimensione hero home (più grande), override per pagine figlie sotto */
.inno-h1 {
  font-size: var(--inno-fs-h1-hero);
  font-weight: 700;
  color: #fff;
  line-height: var(--inno-lh-tight);
  margin: 0 0 20px 0;
}

/* HOMEPAGE: H1 drammatico, presenza forte.
   
   Override font-size FUORI dalla scala major third (1.25):
   il valore max 3.2rem è un'eccezione voluta per la hero della
   homepage, che è la "vetrina" del sito e merita più impatto
   visivo rispetto alle altre H1. Pattern simile a quello usato
   da brand B2B premium (Stripe, Vercel, Linear) che hanno una
   "display size" extra per la landing principale.
   
   Non replicare questa scelta su altre hero: usare --inno-fs-h1-page
   per le pagine figlie e mantenere la scala. */
.inno-hero-home .inno-h1 {
  font-size: clamp(2.5rem, 4.2vw, 3.2rem);
  max-width: 750px;
}

/* PAGINE FIGLIE: H1 più contenuto (~78% della home) */
.inno-hero-wrap .inno-h1 {
  font-size: var(--inno-fs-h1-page);
  line-height: var(--inno-lh-tight);
  max-width: 700px;
}

.inno-h2 {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  line-height: var(--inno-lh-tight);
  margin: 0 0 20px 0;
  font-size: var(--inno-fs-h2-base);
  overflow-wrap: break-word;
}

/* H3 base: dimensione standard del design system.
   I componenti card hanno modifier specifici sotto. */
.inno-h3 {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-md);
  line-height: var(--inno-lh-snug);
  margin: 0 0 8px 0;
}

/* H3 linkato (card cliccabili): mantiene blu scuro innoform
   anche quando parent è un <a> che il tema colora diversamente.
   Specificità (0,1,1) batte override generici del tema tipo .elementor a. */
a .inno-h3,
.inno-h3 a,
h3.inno-h3 a {
  color: var(--inno-color-brand-navy);
  text-decoration: none;
}

a:hover .inno-h3,
.inno-h3 a:hover {
  color: var(--inno-color-brand-navy);
  text-decoration: underline;
}

/* Body paragraph default
   - max-width 780px: ottimale per leggibilità (65-75 caratteri/riga)
   - margin: 0 0 16px 0: NO centratura automatica (allineamento sinistro)
   
   Modifier disponibili:
   - .inno-p--wide:     max-width 1200px (per layout full-width)
   - .inno-p--centered: centra il paragrafo (margin auto orizzontale)
   - .inno-p--spacer:   margin-bottom maggiorato (28px)
   - .inno-p--mt:       margin-top 20px (separatore visivo)
   
   Note: gli override locali (es. .inno-mid-cta .inno-p, .inno-cta-desc)
   sopravvivono perché hanno specificità maggiore. */
.inno-p {
  color: var(--inno-color-text);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-loose);
  max-width: 780px;
  margin: 0 0 16px 0;
  overflow-wrap: break-word;
}

.inno-p--wide     { max-width: 1200px; }
.inno-p--centered { margin-left: auto; margin-right: auto; }
.inno-p--spacer   { margin-bottom: 28px; }
.inno-p--mt       { margin-top: 20px; }

.inno-subtitle {
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--inno-color-brand-navy);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--inno-fs-xs);
}

.inno-greenline {
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--inno-color-brand-lime);
  margin: 0 0 20px 0;
  flex-shrink: 0;
}

.inno-subtitle .inno-greenline {
  display: inline-block;
  margin: 0;
}

.inno-link {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: inherit;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.inno-link:hover { opacity: 0.7; }

/* --- Bottoni / CTA --- */
.inno-btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--inno-color-brand-lime);
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-base);
  border-radius: var(--inno-radius-sm);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
  cursor: pointer;
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
}

.inno-btn:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
}

.inno-btn--outline {
  display: inline-block;
  padding: 12px 28px;
  background: transparent;
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-sm);
  border: 2px solid var(--inno-color-brand-navy);
  border-radius: var(--inno-radius-sm);
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  cursor: pointer;
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
}

.inno-btn--outline:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
  border-color: var(--inno-color-brand-blue);
}

/* --- Hero homepage (background image) --- */
.inno-hero-home {
  background:
    linear-gradient(160deg, rgba(27,29,56,0.78) 0%, rgba(15,17,40,0.85) 100%),
    url('https://innoform.it/wp-content/uploads/2026/04/innoform-formazione-ai-cybersecurity-hero-.webp') center/cover no-repeat;
  padding: 180px 0;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 720px;
}

.inno-hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}

.inno-hero-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.inno-hero-home .inno-subtitle {
  color: var(--inno-color-brand-lime-light);
}

.inno-hero-desc {
  color: rgba(255,255,255,0.8);
  line-height: var(--inno-lh-relaxed);
  margin: 0 0 30px 0;
  max-width: 680px;
  font-size: var(--inno-fs-base);
}

/* HOMEPAGE: hero-desc leggermente più grande (17px) per
   coerenza con l'H1 maggiorato della home. Eccezione voluta,
   isolata alla sola hero home. */
.inno-hero-home .inno-hero-desc {
  font-size: 1.0625rem;
}

.inno-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.inno-hero-ctas .inno-btn {
  background: var(--inno-color-brand-lime-light);
  color: var(--inno-color-brand-navy);
  padding: 15px 34px;
}

.inno-hero-ctas .inno-btn:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
  transform: translateY(-1px);
}

.inno-hero-ctas .inno-btn.inno-btn--secondary {
  background: transparent;
  border: 2px solid var(--inno-color-brand-lime-light);
  color: #fff;
  padding: 15px 34px;
  box-sizing: border-box;
}

.inno-hero-ctas .inno-btn.inno-btn--secondary:hover {
  background: var(--inno-color-brand-blue);
  border-color: var(--inno-color-brand-blue);
  color: #fff;
  transform: translateY(-1px);
}

/* --- Blocco editoriale ponte --- */
.inno-intro-bridge { max-width: 820px; }

/* --- Card verticali (AI + Cyber) --- */
.inno-vertical-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.inno-vertical-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  background: #fff;
  padding: 40px 40px 36px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  transition: box-shadow 0.3s ease, transform 0.25s ease;
  box-sizing: border-box;
}

.inno-vertical-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
  transform: translateY(-3px);
}

.inno-vertical-card--ai    { border-left: 5px solid var(--inno-color-brand-lime); }
.inno-vertical-card--cyber { border-left: 5px solid var(--inno-color-brand-blue); }

.inno-vertical-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--inno-color-bg-soft);
  border: 1px solid var(--inno-color-border);
  border-radius: 20px;
  font-size: var(--inno-fs-xs);
  font-weight: 600;
  color: var(--inno-color-brand-navy);
  margin-bottom: 20px;
  align-self: flex-start;
  box-sizing: border-box;
}

.inno-vertical-card .inno-h3 {
  font-size: var(--inno-fs-md);
  margin-bottom: 12px;
}

.inno-vertical-card .inno-p {
  flex-grow: 1;
}

.inno-vertical-card .inno-btn--outline {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- OVERRIDE DARK PREMIUM
   La card diventa dark gradient in due modi (coabitazione):
   
   1. Modifier esplicito: <div class="inno-vertical-card inno-vertical-card--dark">
      → controllo diretto, leggibile, raccomandato per nuovi widget
   
   2. Auto-detect via :has(): la card che contiene UNO tra
      .inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link
      diventa dark automaticamente.
      → utile per markup esistenti senza modificarli
   
   I due selettori sono in OR (virgola): qualsiasi dei due
   attiva lo stile dark. Specificità identica, ordine cascade
   non rilevante perché definiscono le stesse proprietà. */
.inno-vertical-card--dark,
.inno-vertical-card:has(.inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link) {
  background: linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #2a2e5c 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  min-height: auto;
  position: relative;
  overflow: hidden;
}

.inno-vertical-card--dark::before,
.inno-vertical-card:has(.inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: var(--inno-color-brand-lime);
}

.inno-vertical-card--dark:hover,
.inno-vertical-card:has(.inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(27,29,56,0.2);
}

.inno-vertical-card--dark .inno-h3,
.inno-vertical-card:has(.inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link) .inno-h3 {
  color: #fff;
  font-size: var(--inno-fs-lg);
}

.inno-vertical-card--dark .inno-p,
.inno-vertical-card:has(.inno-vertical-tag, .inno-vertical-icon, .inno-vertical-link) .inno-p {
  color: rgba(255,255,255,0.8);
}

/* ---- Elementi interni della variante dark ---- */
.inno-vertical-tag {
  display: inline-block;
  background: rgba(214,251,132,0.15);
  color: var(--inno-color-brand-lime-light);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--inno-fs-2xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  align-self: flex-start;
}

.inno-vertical-icon {
  width: 56px;
  height: 56px;
  background: rgba(184,230,0,0.15);
  border-radius: var(--inno-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.inno-vertical-icon svg {
  width: 30px;
  height: 30px;
  color: var(--inno-color-brand-lime-light);
}

/* Link dentro card verticale dark: stile .inno-link adattato a fondo scuro */
.inno-vertical-link {
  color: var(--inno-color-brand-lime-light);
  font-weight: 600;
  font-size: var(--inno-fs-sm);
  text-decoration: underline;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
}

.inno-vertical-link:hover { opacity: 0.7; }

/* --- Card base --- */
.inno-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  border-left: 4px solid var(--inno-color-brand-lime);
  padding: 28px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.inno-card .inno-h3 { margin-top: 0; }
.inno-card .inno-p { flex-grow: 1; }

.inno-card .inno-btn--outline {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Sezione sfondo alternato --- */
.inno-section--shaded {
  background: var(--inno-color-bg-subtle);
  border-radius: var(--inno-radius-lg);
  padding: 48px 40px;
  box-sizing: border-box;
}

/* --- Card settori --- */
.inno-sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.inno-sector-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inno-sector-card:hover {
  border-color: var(--inno-color-brand-lime);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(27,42,74,0.08);
}

.inno-sector-card .inno-h3 { font-size: var(--inno-fs-base); margin-bottom: 6px; }
.inno-sector-card .inno-p { font-size: var(--inno-fs-sm); margin: 0; color: var(--inno-color-text-muted); line-height: var(--inno-lh-normal); }

/* --- Steps (due varianti, rilevate automaticamente dal markup) ---
   VARIANTE CARD (default) — pagine figlie:
     <div class="inno-step">
       <div class="inno-step-circle">1</div>
       <div><h3 class="inno-h3">...</h3><p class="inno-p">...</p></div>
     </div>

   VARIANTE INLINE — homepage (badge testuale):
     <div class="inno-step">
       <span class="inno-step-badge">STEP 1</span>
       <h3 class="inno-h3">...</h3>
       <p class="inno-p">...</p>
     </div>
*/

/* Variante CARD (default) */
.inno-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}

/* Cerchio numerato (variante CARD) */
.inno-step-circle {
  min-width: 44px;
  height: 44px;
  background: var(--inno-color-brand-lime);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--inno-fs-md);
  font-weight: 800;
  color: var(--inno-color-brand-navy);
  flex-shrink: 0;
}

/* Variante INLINE: lo step si attiva in due modi (coabitazione):
   
   1. Modifier esplicito: <div class="inno-step inno-step--inline">
      → controllo diretto, leggibile, raccomandato per nuovi widget
   
   2. Auto-detect via :has(): lo step che ha .inno-step-badge come
      figlio diretto diventa inline automaticamente.
      → utile per markup esistenti senza modificarli
   
   I due selettori sono in OR (virgola). */
.inno-step--inline,
.inno-step:has(> .inno-step-badge) {
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
}

.inno-step--inline + .inno-step--inline,
.inno-step:has(> .inno-step-badge) + .inno-step:has(> .inno-step-badge) {
  margin-top: 6px;
}

.inno-step--inline:hover,
.inno-step:has(> .inno-step-badge):hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Badge (solo INLINE) */
.inno-step-badge {
  display: inline-block;
  background: var(--inno-color-brand-lime-light);
  color: var(--inno-color-brand-navy);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--inno-fs-2xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: var(--inno-lh-snug);
}

/* Tipografia specifica della variante INLINE */
.inno-step--inline .inno-h3,
.inno-step:has(> .inno-step-badge) .inno-h3 {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--inno-fs-md);
  font-weight: 700;
  color: var(--inno-color-brand-navy);
}

.inno-step--inline .inno-p,
.inno-step:has(> .inno-step-badge) .inno-p {
  margin: 0;
  color: var(--inno-color-text-muted);
  font-size: var(--inno-fs-sm);
  line-height: var(--inno-lh-normal);
}

/* --- Mid CTA (striscia piena) ---
   Full-bleed visivo senza width:100vw.
   Evita overflow orizzontale su desktop/Windows causato
   dalla scrollbar verticale inclusa in 100vw.
   
   Tecnica: l'elemento mantiene larghezza naturale (= container parent),
   ma box-shadow gigante + clip-path orizzontale estendono visivamente
   lo sfondo fino ai bordi viewport senza creare width reale extra. */
.inno-mid-cta {
  width: auto;
  max-width: none;
  position: relative;
  left: auto;
  margin: 80px 0;
  text-align: center;
  padding: 60px 24px;
  background: var(--inno-color-bg-soft);
  box-shadow: 0 0 0 100vmax var(--inno-color-bg-soft);
  clip-path: inset(0 -100vmax);
  border-radius: 0;
  box-sizing: border-box;
}

.inno-mid-cta .inno-h2 { margin-bottom: 12px; }
.inno-mid-cta .inno-p {
  color: var(--inno-color-text);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto 24px auto;
}

/* --- Altre aree --- */
.inno-other-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

/* --- Trust / E-E-A-T --- */
.inno-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.inno-trust-item {
  text-align: left;
  background: #fff;
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  padding: 32px 28px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inno-trust-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--inno-color-brand-lime);
}

.inno-trust-item:hover {
  border-color: var(--inno-color-brand-lime);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(27,42,74,0.08);
}

.inno-trust-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--inno-radius-md);
  background: #edf7a0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px 0;
}

.inno-trust-item .inno-h3 { margin-bottom: 8px; font-size: var(--inno-fs-base); }
.inno-trust-item .inno-p {
  margin-bottom: 0;
  font-size: var(--inno-fs-sm);
  color: var(--inno-color-text);
  line-height: var(--inno-lh-relaxed);
}

/* Trust link: centra IL BLOCCO (non solo il contenuto inline).
   margin auto orizzontale serve perché il default .inno-p ora è
   allineato a sinistra (max-width 780). text-align center da solo
   centra il link al suo interno, non il <p> nel viewport. */
.inno-trust-link {
  text-align: center;
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Partner logos --- */
.inno-partner-logos {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--inno-color-border);
  box-sizing: border-box;
}

.inno-partner-logos img {
  display: block;
  height: 38px !important;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.65;
  transition: opacity 0.25s, filter 0.25s;
  filter: grayscale(30%);
}

.inno-partner-logos img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* --- Dove operiamo --- */
.inno-where-wrap {
  background: var(--inno-color-bg-soft);
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  padding: 40px;
  box-sizing: border-box;
}

/* --- CTA finale --- */
.inno-cta-finale {
  max-width: 1200px;
  margin: 80px auto;
  padding: 50px 40px;
  background-color: var(--inno-color-brand-dark);
  border-radius: var(--inno-radius-lg);
  scroll-margin-top: 80px;
  box-sizing: border-box;
}

.inno-cta-finale .inno-h2,
.inno-cta-finale h2 {
  color: #fff;
  font-weight: 700;
  font-size: var(--inno-fs-h2-base);
  line-height: var(--inno-lh-tight);
  margin: 0 0 20px 0;
}

.inno-cta-desc {
  color: rgba(255,255,255,0.8);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-relaxed);
  margin: 0 0 30px 0;
  max-width: 640px;
}

.inno-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.inno-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: var(--inno-fs-base);
  border-radius: var(--inno-radius-sm);
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.15s;
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
}

.inno-cta-btn:hover { transform: translateY(-2px); }

.inno-cta-btn--call { background: var(--inno-color-brand-lime); color: var(--inno-color-brand-navy); }
.inno-cta-btn--call:hover { background: var(--inno-color-brand-lime-light); color: var(--inno-color-brand-navy); }

.inno-cta-btn--wa { background: #25D366; color: #fff; }
.inno-cta-btn--wa:hover { background: #1da851; color: #fff; }

.inno-cta-form {
  background: #fff;
  border-radius: var(--inno-radius-lg);
  padding: 40px;
  min-height: 300px;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- Responsive della BASE --- */
@media (max-width: 1024px) {
  .inno-section,
  .inno-row,
  .inno-cta-finale { margin: 60px auto; }
  .inno-mid-cta { margin-top: 60px; margin-bottom: 60px; padding: 50px 24px; }
  .inno-row { gap: 40px; }
  .inno-sector-grid { grid-template-columns: repeat(2, 1fr); }
  .inno-trust-grid { grid-template-columns: repeat(2, 1fr); }
  .inno-vertical-card { padding: 32px; }
  .inno-cta-finale { padding: 40px 30px; }
}

@media (max-width: 768px) {
  .inno-section,
  .inno-row,
  .inno-cta-finale { margin: 50px auto; padding-left: 20px; padding-right: 20px; }
  .inno-mid-cta { margin-top: 50px; margin-bottom: 50px; padding: 40px 20px; }
  .inno-hero-inner { padding: 0 20px; }
  .inno-hero-home { padding: 120px 0; min-height: 560px; }
  .inno-row { flex-direction: column; gap: 30px; }
  .inno-hero-ctas { flex-direction: column; }
  .inno-hero-ctas .inno-btn,
  .inno-hero-ctas .inno-btn--secondary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
  .inno-hero-home .inno-h1,
  .inno-hero-wrap .inno-h1 { max-width: 100%; }
  .inno-hero-desc { max-width: 100%; }
  .inno-subtitle { letter-spacing: 2px; }
  .inno-vertical-grid,
  .inno-other-grid { grid-template-columns: 1fr; }
  .inno-sector-grid { grid-template-columns: repeat(2, 1fr); }
  .inno-trust-grid { grid-template-columns: 1fr; gap: 20px; }
  .inno-card,
  .inno-sector-card,
  .inno-trust-item,
  .inno-vertical-card { padding: 24px; }
  .inno-section--shaded { padding: 40px 24px; }
  .inno-cta-finale { padding: 30px 24px; }
  .inno-cta-buttons { flex-direction: column; }
  .inno-cta-btn { width: 100%; justify-content: center; max-width: 320px; }
  .inno-cta-form { padding: 24px; min-height: 250px; }
  .inno-where-wrap { padding: 30px 24px; }
  .inno-step--inline,
  .inno-step:has(> .inno-step-badge) { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .inno-step--inline .inno-p,
  .inno-step:has(> .inno-step-badge) .inno-p { flex-basis: 100%; margin-left: 0; }
  .inno-step { gap: 14px; }
  .inno-vertical-card .inno-h3 { font-size: var(--inno-fs-md); }
  .inno-partner-logos { gap: 28px; padding-top: 24px; margin-top: 28px; }
  .inno-partner-logos img { height: 34px !important; }
}

@media (max-width: 480px) {
  .inno-section,
  .inno-row,
  .inno-cta-finale { margin: 40px auto; padding-left: 16px; padding-right: 16px; }
  .inno-mid-cta { margin-top: 40px; margin-bottom: 40px; padding: 36px 16px; }
  .inno-hero-inner { padding: 0 16px; }
  .inno-hero-home { padding: 90px 0; margin-bottom: 40px; min-height: 480px; }
  .inno-card,
  .inno-sector-card,
  .inno-trust-item,
  .inno-vertical-card { padding: 20px; }
  .inno-sector-grid { grid-template-columns: 1fr; gap: 16px; }
  .inno-step--inline,
  .inno-step:has(> .inno-step-badge) { padding: 12px 0; gap: 10px; }
  .inno-step--inline .inno-h3,
  .inno-step:has(> .inno-step-badge) .inno-h3 { font-size: var(--inno-fs-md); }
  .inno-trust-item { padding: 24px 20px; }
  .inno-where-wrap { padding: 28px 20px; }
  .inno-cta-finale { padding: 24px 16px; border-radius: var(--inno-radius-sm); }
  .inno-cta-form { padding: 20px; border-radius: var(--inno-radius-sm); min-height: 200px; }
  .inno-partner-logos { gap: 20px; padding-top: 20px; margin-top: 24px; }
  .inno-partner-logos img { height: 30px !important; max-width: 140px; }
  .inno-greenline { width: 40px; }
  /* H1 hero scala automaticamente via clamp(): nessun override necessario */
  .inno-hero-home .inno-h1 { font-size: var(--inno-fs-xl); line-height: var(--inno-lh-tight); }
}

@media (max-width: 375px) {
  .inno-section,
  .inno-row,
  .inno-cta-finale { padding-left: 14px; padding-right: 14px; }
  .inno-mid-cta { padding: 32px 14px; }
  .inno-hero-inner { padding: 0 14px; }
  .inno-hero-home { padding: 72px 0; min-height: 420px; }
  .inno-hero-home .inno-h1 { font-size: var(--inno-fs-xl); line-height: var(--inno-lh-snug); }
  .inno-subtitle { letter-spacing: 1.5px; gap: 8px; }
  .inno-card,
  .inno-sector-card,
  .inno-trust-item,
  .inno-vertical-card { padding: 18px; }
  .inno-partner-logos { gap: 14px; padding-top: 18px; margin-top: 20px; }
  .inno-partner-logos img { height: 26px !important; max-width: 120px; }
}


/* ============================================================
   2) EXTENSIONS — componenti per le pagine figlie
   Disegnati per abbinarsi allo stile homepage:
   stessi colori, stessi radius (8-12px), stessa tipografia.
   ============================================================ */

/* ------------------------------------------------------------
   2.1 — Row reverse (variante riga testo/immagine invertita)
   ------------------------------------------------------------ */
.inno-row-reverse {
  display: flex;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 30px;
  flex-direction: row-reverse;
}

/* Utility: immagine sticky in colonna lunga */
.inno-col-img--sticky {
  position: sticky;
  top: 40px;
  align-self: flex-start;
}

/* Greenline come blocco decorativo standalone (prima di un H2) */
.inno-greenline-block {
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--inno-color-brand-lime);
  margin: 0 0 20px 0;
}

.inno-greenline-block--lime { background-color: var(--inno-color-brand-lime-light); }

/* Ancore con scroll-margin per link #sezione */
.inno-section[id],
.inno-row[id] {
  scroll-margin-top: 80px;
}

/* ------------------------------------------------------------
   2.2 — Hero semplice (pagine figlie, senza background image)
   Comportamento: prende il 100% del parent.
   REQUISITO HTML: il widget HTML deve essere dentro un
   Contenitore Elementor full-width con padding 0, altrimenti
   lo sfondo scuro si fermerà ai bordi del Contenitore.
   ------------------------------------------------------------ */
.inno-hero-wrap {
  /* "AI glow" — dark navy con due punti di luce radiali:
     lime var(--inno-color-brand-lime) all'angolo alto-destra (fiamma d'angolo, 0.18 opacity)
     blu var(--inno-color-brand-blue) in basso a sinistra (accent tecnologico, 0.15 opacity)
     Il lime è volutamente posizionato oltre il bordo (95% 5%)
     così vedi solo la periferia del cerchio = effetto "luce
     dall'esterno". Le dimensioni compensano il taglio. */
  background:
    radial-gradient(ellipse 1100px 850px at 95% 5%, rgba(184,230,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(7,68,243,0.15) 0%, transparent 55%),
    linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #0f1128 100%);
  padding: 80px 0;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inno-hero-wrap::before {
  /* Grain dots finissimo: previene il "banding" sui gradient
     su monitor datati o OLED e aggiunge textura subliminal */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* subtitle/H1/desc dentro hero scuro ereditano gli stili BASE,
   aggiustiamo solo il colore del subtitle per leggibilità */
.inno-hero-wrap .inno-subtitle { color: var(--inno-color-brand-lime-light); }
.inno-hero-wrap .inno-hero-inner { position: relative; z-index: 1; }

/* Bottone dentro hero scuro: variante lime-light, padding maggiorato
   per coerenza visiva col peso dell'hero */
.inno-hero-wrap .inno-btn {
  background: var(--inno-color-brand-lime-light);
  color: var(--inno-color-brand-navy);
  padding: 18px 36px;
  font-size: var(--inno-fs-base);
}

.inno-hero-wrap .inno-btn:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
}

/* Variante outline dentro hero scuro: bordo e testo lime-light
   (radius/padding/altezza allineati al primary hero per coerenza) */
.inno-hero-wrap .inno-btn--outline {
  background: transparent;
  color: var(--inno-color-brand-lime-light);
  border: 2px solid var(--inno-color-brand-lime-light);
  padding: 18px 36px;
  font-size: var(--inno-fs-base);
  border-radius: var(--inno-radius-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.inno-hero-wrap .inno-btn--outline:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
  border-color: var(--inno-color-brand-blue);
}

/* ------------------------------------------------------------
   2.3 — Breadcrumb
   I separatori sono gestiti dall'HTML (plugin/tema o markup
   custom), non aggiunti via CSS. Così evitiamo duplicati con
   i separatori già presenti nel markup.

   Contenimento automatico: quando la breadcrumb è "standalone"
   (fuori da .inno-hero-inner / .inno-section), si contiene da
   sola con max-width + padding. Quando è DENTRO uno di quei
   container, il contenimento si disattiva per evitare doppi
   padding.
   ------------------------------------------------------------ */
.inno-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 20px auto;
  padding: 0 30px;
  color: var(--inno-color-text-muted);
  font-size: var(--inno-fs-sm);
  box-sizing: border-box;
}

/* Disattiva il contenimento quando la breadcrumb è già dentro
   un container che gestisce max-width e padding */
.inno-hero-inner .inno-breadcrumb,
.inno-section .inno-breadcrumb,
.inno-row .inno-breadcrumb {
  max-width: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.inno-breadcrumb a {
  color: var(--inno-color-text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.inno-breadcrumb a:hover { color: var(--inno-color-brand-navy); }

.inno-breadcrumb-current {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
}

/* Separatore inline (se scritto nell'HTML come <span class="inno-breadcrumb-sep">›</span>) */
.inno-breadcrumb-sep {
  color: #9ca3af;
  user-select: none;
}

/* Breadcrumb dentro hero scuro (testo chiaro) */
.inno-hero-wrap .inno-breadcrumb,
.inno-hero-wrap .inno-breadcrumb a {
  color: rgba(255,255,255,0.7);
}

.inno-hero-wrap .inno-breadcrumb a:hover { color: var(--inno-color-brand-lime-light); }
.inno-hero-wrap .inno-breadcrumb-current { color: #fff; }
.inno-hero-wrap .inno-breadcrumb-sep { color: rgba(255,255,255,0.4); }

/* ------------------------------------------------------------
   2.4 — FAQ accordion (<details>)
   
   Selector strategy (doppio scope):
   - Preferred:        .inno-faq details
   - Legacy/current:   <details> diretti dentro .inno-section
   
   Lo scope evita collisioni con <details> di plugin/tema/moduli
   esterni. Se in futuro i <details> vengono inseriti dentro
   wrapper Elementor intermedi (es. column wrapper) che spezzano
   il rapporto figlio-diretto con .inno-section, usare il wrapper
   esplicito .inno-faq:
   
     <div class="inno-faq">
       <details>...</details>
     </div>
   ------------------------------------------------------------ */
.inno-faq details,
.inno-section > details {
  margin-bottom: 14px;
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-sm);
  overflow: hidden;
  background: #fff;
}

.inno-faq details summary,
.inno-section > details summary {
  position: relative;
  padding: 18px 50px 18px 24px;
  list-style: none;
  font-weight: 600;
  color: var(--inno-color-brand-navy);
  cursor: pointer;
  background: var(--inno-color-bg-subtle);
  font-size: var(--inno-fs-base);
  transition: background 0.2s;
}

.inno-faq details summary:hover,
.inno-section > details summary:hover { background: var(--inno-color-bg-muted); }

.inno-faq details summary::-webkit-details-marker,
.inno-section > details summary::-webkit-details-marker { display: none; }

.inno-faq details summary::after,
.inno-section > details summary::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-lg);
  line-height: 1;
  transition: transform 0.2s;
}

.inno-faq details[open] summary::after,
.inno-section > details[open] summary::after { content: "\2212"; }

.inno-faq-answer {
  padding: 20px 24px;
  color: var(--inno-color-text);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-loose);
}

.inno-faq-answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   2.5 — (step: vedi BASE più sopra, gestisce entrambe le
   varianti card/inline automaticamente tramite :has())
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2.6 — Checklist (due varianti)
   ------------------------------------------------------------ */

/* Variante A: box grigio con paragrafo denso (elenchi inline) */
.inno-check-list {
  padding: 24px;
  background: var(--inno-color-bg-soft);
  border-radius: var(--inno-radius-md);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.inno-check-list p {
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-loose);
  margin: 0;
}

/* Variante B: lista <ul> con ✓ lime a griglia */
.inno-checklist {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.inno-checklist li {
  padding: 10px 10px 10px 32px;
  position: relative;
  color: var(--inno-color-text);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-normal);
}

.inno-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 8px;
  color: var(--inno-color-brand-lime);
  font-weight: 700;
  font-size: var(--inno-fs-base);
}

/* Checklist dentro un box scuro (clause / highlight) */
.inno-clause .inno-checklist li,
.inno-highlight-box .inno-checklist li {
  color: rgba(255,255,255,0.85);
}

/* ------------------------------------------------------------
   2.6b — Highlight (box giallo pallido per claim/info/disclosure)
   Caso d'uso: evidenziare un'informazione chiave in una sezione
   Diverso da .inno-highlight-box (che è dark gradient premium)
   Auto-contenuta: max-width 1200px + margin auto, così resta
   centrata anche quando il Contenitore Elementor è full-width.
   ------------------------------------------------------------ */
.inno-highlight {
  max-width: 1200px;
  margin: 24px auto;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--inno-radius-md);
  padding: 24px;
  box-sizing: border-box;
}

.inno-highlight p,
.inno-highlight .inno-p {
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  margin: 0;
}

.inno-highlight p + p,
.inno-highlight .inno-p + .inno-p {
  margin-top: 12px;
}

.inno-highlight strong {
  color: var(--inno-color-brand-navy);
  font-weight: 700;
}

/* ------------------------------------------------------------
   2.7 — Clause (box scuro evidenziato)
   Usato per "moduli del corso", "argomenti trattati", ecc.
   ------------------------------------------------------------ */
.inno-clause {
  padding: 24px;
  background: var(--inno-color-brand-dark);
  border-radius: var(--inno-radius-sm);
  margin-bottom: 20px;
  box-sizing: border-box;
}

.inno-clause--spaced { margin-top: 30px; }

.inno-clause .inno-h3,
.inno-clause h3 {
  color: var(--inno-color-brand-lime);
  font-weight: 700;
  font-size: var(--inno-fs-md);
  margin: 0 0 8px 0;
}

.inno-clause .inno-p,
.inno-clause p {
  color: #e2e8f0;
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-relaxed);
  margin: 0 0 8px 0;
}

.inno-clause .inno-p:last-child,
.inno-clause p:last-child { margin-bottom: 0; }

.inno-clause strong { color: #fff; }
.inno-clause a,
.inno-clause .inno-link { color: var(--inno-color-brand-lime-light); }
.inno-clause a:hover { opacity: 0.8; }

/* Label modulo (separatore con underline lime) */
.inno-module-label {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--inno-color-brand-lime);
}

.inno-module-label--ext {
  margin-top: 40px;
  border-bottom-color: var(--inno-color-border);
}

/* ------------------------------------------------------------
   2.8 — Highlight box (gradient scuro, "call out" premium)
   ------------------------------------------------------------ */
.inno-highlight-box {
  background: linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #2a2e5c 100%);
  color: #fff;
  padding: 40px;
  border-radius: var(--inno-radius-lg);
  margin: 40px 0;
  box-sizing: border-box;
}

.inno-highlight-box .inno-h3,
.inno-highlight-box h3 {
  color: #fff;
  font-weight: 700;
  margin: 0 0 16px 0;
  font-size: var(--inno-fs-lg);
}

.inno-highlight-box .inno-p,
.inno-highlight-box p {
  color: rgba(255,255,255,0.85);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-loose);
  margin: 0 0 12px 0;
}

.inno-highlight-box .inno-p:last-child,
.inno-highlight-box p:last-child { margin-bottom: 0; }

.inno-highlight-box strong { color: var(--inno-color-brand-lime-light); }
.inno-highlight-box a { color: var(--inno-color-brand-lime-light); text-decoration: underline; }
.inno-highlight-box a:hover { opacity: 0.8; }

/* ------------------------------------------------------------
   2.9 — Tabelle
   ------------------------------------------------------------ */
.inno-table-wrap {
  margin: 30px 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--inno-radius-sm);
  border: 1px solid var(--inno-color-border);
  background: #fff;
}

.inno-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
}

.inno-table thead th {
  background: var(--inno-color-brand-dark);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 16px;
  text-align: left;
  font-size: var(--inno-fs-sm);
}

.inno-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--inno-color-border);
  color: var(--inno-color-text);
  font-size: var(--inno-fs-sm);
  line-height: var(--inno-lh-normal);
}

.inno-table tbody tr:nth-child(even) { background: var(--inno-color-bg-subtle); }
.inno-table tbody tr:last-child td { border-bottom: none; }

/* Dentro tabella: .inno-highlight funziona da modifier di cella
   (reset delle proprietà box del .inno-highlight base) */
.inno-table .inno-highlight {
  background: transparent;
  border: none;
  padding: inherit;
  margin: 0;
  border-radius: 0;
  font-weight: 700;
  color: var(--inno-color-brand-blue);
}

/* ------------------------------------------------------------
   2.10 — Siblings (navigazione tra pagine sorelle)
   ------------------------------------------------------------ */
.inno-siblings {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.inno-siblings a {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-sm);
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-base);
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
  background: #fff;
}

.inno-siblings a:hover {
  border-color: var(--inno-color-brand-lime);
  background: var(--inno-color-bg-soft);
  color: var(--inno-color-brand-blue);
}

/* ------------------------------------------------------------
   2.10b — Course meta (barra info corso: durata, modalità,
   destinatari, livello, ecc.)
   Stesso pattern della breadcrumb: contenimento automatico
   quando "standalone", si disattiva dentro hero-inner/section/row.
   ------------------------------------------------------------ */
.inno-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 30px;
  box-sizing: border-box;
}

/* Disattiva il contenimento quando già dentro un container
   che gestisce max-width e padding */
.inno-hero-inner .inno-course-meta,
.inno-section .inno-course-meta,
.inno-row .inno-course-meta {
  max-width: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.inno-course-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--inno-color-bg-soft);
  border-radius: var(--inno-radius-sm);
  border: 1px solid var(--inno-color-border);
  box-sizing: border-box;
}

.inno-course-meta-label {
  font-weight: 600;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-sm);
}

.inno-course-meta-value {
  color: var(--inno-color-text);
  font-size: var(--inno-fs-sm);
}

/* ------------------------------------------------------------
   2.11 — Warning (avviso arancione)
   ------------------------------------------------------------ */
.inno-warning {
  background: #fff7ed;
  border-left: 4px solid #f59e0b;
  padding: 24px 28px;
  border-radius: 0 8px 8px 0;
  margin: 28px 0;
  box-sizing: border-box;
}

.inno-warning-title {
  font-weight: 700;
  color: #b45309;
  font-size: var(--inno-fs-base);
  margin: 0 0 8px 0;
}

.inno-warning .inno-p,
.inno-warning p {
  margin-bottom: 0;
  color: #78350f;
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-relaxed);
}

/* ------------------------------------------------------------
   2.11b — Agenda (programma giornata corso)
   ------------------------------------------------------------ */
.inno-agenda {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
}

.inno-agenda-header {
  background: var(--inno-color-brand-dark);
  color: #fff;
  padding: 16px 24px;
  font-weight: 700;
  font-size: var(--inno-fs-base);
}

.inno-agenda-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.inno-agenda-row:last-child {
  border-bottom: none;
}

.inno-agenda-time {
  min-width: 120px;
  padding: 14px 20px;
  font-weight: 600;
  color: var(--inno-color-brand-navy);
  background: var(--inno-color-bg-subtle);
  border-right: 1px solid var(--inno-color-border);
  font-size: var(--inno-fs-sm);
}

.inno-agenda-content {
  padding: 14px 20px;
  color: var(--inno-color-text);
  flex: 1;
  line-height: var(--inno-lh-normal);
  font-size: var(--inno-fs-base);
}

/* ------------------------------------------------------------
   2.12 — Card-grid generica (griglia 2/3 colonne per .inno-card)
   ------------------------------------------------------------ */
.inno-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.inno-card-grid--three { grid-template-columns: repeat(3, 1fr); }
.inno-card-grid--four  { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------
   2.13 — Utility: visibility + hint
   ------------------------------------------------------------ */

/* Ottimizzazione rendering per sezioni below-the-fold */
.inno-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Data aggiornamento discreta */
.inno-date {
  color: #9ca3af;
  font-size: var(--inno-fs-sm);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

/* H2 visual (uguale a .inno-h2, per casi senza <h2>) */
.inno-h2-visual {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  line-height: var(--inno-lh-tight);
  margin: 0 0 20px 0;
  font-size: var(--inno-fs-h2-base);
  overflow-wrap: break-word;
}


/* ============================================================
   2b) COMPONENTI AGGIUNTIVI (pagine specifiche)
   Classi che esistono in varie pagine del progetto originale
   e servono per mantenere la compatibilità con tutti gli HTML.
   ============================================================ */

/* ------------------------------------------------------------
   2b.1 — Service card (card servizio con icona + link CTA)
   Usata in: formazione_aziendale e pagine servizio principali
   ------------------------------------------------------------ */
.inno-service-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  background: #fff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inno-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--inno-color-brand-lime);
}

.inno-service-card:hover {
  border-color: var(--inno-color-brand-lime);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(27,42,74,0.08);
}

.inno-service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf7a0;
  border-radius: var(--inno-radius-md);
  margin-bottom: 16px;
}

.inno-service-icon svg { width: 26px; height: 26px; color: var(--inno-color-brand-navy); }

.inno-service-card .inno-h3 { font-size: var(--inno-fs-md); }
.inno-service-card .inno-p { flex-grow: 1; }

.inno-service-link {
  margin-top: 16px;
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  text-decoration: underline;
  font-size: var(--inno-fs-base);
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.inno-service-link:hover { opacity: 0.7; }

/* ------------------------------------------------------------
   2b.2 — Fondo card (finanziamenti)
   ------------------------------------------------------------ */
.inno-fondo-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: var(--inno-color-bg-soft);
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--inno-color-brand-lime);
  box-sizing: border-box;
}

.inno-fondo-card .inno-h3 { font-size: var(--inno-fs-md); }

/* ------------------------------------------------------------
   2b.3 — Target card (PMI, grandi, PA) con label colorata
   ------------------------------------------------------------ */
.inno-target-card {
  padding: 28px;
  border: 2px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  background: #fff;
  text-align: center;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

.inno-target-card:hover { border-color: var(--inno-color-brand-lime); }

.inno-target-label {
  display: inline-block;
  background: #edf7a0;
  color: var(--inno-color-brand-navy);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--inno-fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------
   2b.4 — Temi list (pill con temi/argomenti)
   ------------------------------------------------------------ */
.inno-temi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px 0;
}

.inno-temi-list span {
  background: #edf7a0;
  color: var(--inno-color-brand-navy);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: var(--inno-fs-sm);
  font-weight: 600;
}

/* ------------------------------------------------------------
   2b.5 — (vertical card premium: ora gestita via :has() nella
   sezione 1, si attiva automaticamente se la card contiene
   .inno-vertical-tag o .inno-vertical-icon)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2b.6 — CTA intermedia scura a strip (con bottone a destra)
   Usata in: formazione_apprendistato, sicurezza_sul_lavoro
   Layout orizzontale (testo a sinistra, bottone a destra)
   Auto-contenuta: max-width 1200px + margin auto
   ------------------------------------------------------------ */
.inno-cta-mid {
  max-width: 1200px;
  margin: 60px auto;
  background: var(--inno-color-brand-dark);
  border-radius: var(--inno-radius-lg);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  box-sizing: border-box;
}

.inno-cta-mid h3,
.inno-cta-mid .inno-h3 {
  font-weight: 700;
  color: #fff;
  font-size: var(--inno-fs-md);
  margin: 0;
  line-height: var(--inno-lh-snug);
  flex: 1;
}

.inno-cta-mid p,
.inno-cta-mid .inno-p {
  color: rgba(255,255,255,0.7);
  margin: 6px 0 0 0;
  font-size: var(--inno-fs-sm);
  line-height: var(--inno-lh-normal);
}

.inno-cta-mid .inno-btn {
  background: var(--inno-color-brand-lime-light);
  color: var(--inno-color-brand-navy);
  flex-shrink: 0;
}

.inno-cta-mid .inno-btn:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
}

/* ------------------------------------------------------------
   2b.7 — Mode cards (modalità corso: aula/online/ibrido)
   Usata in: formazione_apprendistato, sicurezza_sul_lavoro
   ------------------------------------------------------------ */
.inno-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.inno-mode-card {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  box-sizing: border-box;
}

.inno-mode-icon {
  width: 56px;
  height: 56px;
  background: rgba(184,230,0,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.inno-mode-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--inno-color-brand-navy);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inno-mode-card .inno-h3 { margin-bottom: 8px; }
.inno-mode-card .inno-p { margin-bottom: 0; font-size: var(--inno-fs-sm); }

/* ------------------------------------------------------------
   2b.8 — Hub (pagina risorse: griglia risorse attive/soon)
   ------------------------------------------------------------ */
.inno-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.inno-hub-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  padding: 28px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s, transform 0.25s;
  box-sizing: border-box;
}

.inno-hub-card--active { border-left: 4px solid var(--inno-color-brand-lime); }

.inno-hub-card--active:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.inno-hub-card--soon {
  border-left: 4px solid var(--inno-color-border);
  opacity: 0.65;
  cursor: default;
}

.inno-hub-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--inno-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.inno-hub-icon--active {
  background: linear-gradient(135deg, #f0ffc6 0%, #e4f7a8 100%);
}

.inno-hub-icon--soon { background: var(--inno-color-bg-muted); }

.inno-hub-card .inno-h3 { margin-bottom: 6px; }

/* Override: dentro hub-card l'h3 NON si sottolinea al hover
   (la card intera si alza + la CTA sotto è già sottolineata,
   l'underline sull'h3 sarebbe feedback visivo ridondante).
   Specificità 0,2,1 vince sulla regola globale 0,1,1. */
a.inno-hub-card:hover .inno-h3,
a:hover.inno-hub-card .inno-h3,
.inno-hub-card:hover .inno-h3 {
  text-decoration: none;
}
.inno-hub-card .inno-p {
  font-size: var(--inno-fs-sm);
  color: var(--inno-color-text-muted);
  margin-bottom: 14px;
  flex-grow: 1;
}

.inno-hub-cta {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  text-decoration: underline;
  transition: opacity 0.2s;
  font-size: var(--inno-fs-sm);
  text-transform: none;
  letter-spacing: normal;
}

.inno-hub-cta:hover { opacity: 0.7; }

.inno-hub-badge-soon {
  display: inline-block;
  padding: 5px 14px;
  background: var(--inno-color-bg-muted);
  border: 1px solid var(--inno-color-border);
  border-radius: 20px;
  font-size: var(--inno-fs-xs);
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
}

/* ------------------------------------------------------------
   2b.9 — Area hub (pagina lavoro, agenzia: griglia 2 aree)
   ------------------------------------------------------------ */
.inno-area-hub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.inno-area-hub-card {
  border: 2px solid var(--inno-color-border);
  border-radius: 14px;
  background: #fff;
  padding: 36px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.inno-area-hub-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--inno-color-brand-lime);
}

.inno-area-hub-card:hover {
  border-color: var(--inno-color-brand-lime);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(27,42,74,0.08);
}

.inno-area-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #edf7a0;
  border-radius: var(--inno-radius-lg);
  margin-bottom: 18px;
}

.inno-area-icon svg { width: 28px; height: 28px; color: var(--inno-color-brand-navy); }

.inno-area-hub-card .inno-h3 { font-size: var(--inno-fs-md); }
.inno-area-hub-card .inno-p { flex-grow: 1; }

.inno-area-hub-link {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-sm);
  text-decoration: underline;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  text-transform: none;
  letter-spacing: normal;
}

.inno-area-hub-link:hover { opacity: 0.7; }

/* ------------------------------------------------------------
   2b.10 — Box informativi (contact, info, accr, eipass, nuovo)
   ------------------------------------------------------------ */

/* Contact box — box contatti grigio chiaro */
.inno-contact-box {
  padding: 24px;
  background: var(--inno-color-bg-soft);
  border-radius: var(--inno-radius-md);
  margin-top: 20px;
  box-sizing: border-box;
}

.inno-contact-box p { margin: 0 0 8px 0; color: var(--inno-color-brand-navy); font-size: var(--inno-fs-base); }
.inno-contact-box p:last-child { margin-bottom: 0; }

/* Info box — box informativo con accento lime a sinistra */
.inno-info-box {
  background: #f0f7d4;
  border-left: 4px solid var(--inno-color-brand-lime);
  padding: 24px 28px;
  border-radius: 0 10px 10px 0;
  margin: 30px 0;
  box-sizing: border-box;
}

.inno-info-box p {
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-relaxed);
  margin: 0;
}

/* Accr box — box accreditamento (simile info ma più compatto) */
.inno-accr-box {
  background: #f0f7d4;
  border-left: 4px solid var(--inno-color-brand-lime);
  padding: 20px 24px;
  border-radius: 0 10px 10px 0;
  margin: 24px 0;
  box-sizing: border-box;
}

.inno-accr-box p {
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-relaxed);
  margin: 0;
  font-weight: 600;
}

/* Eipass badge — inline badge per certificazione */
.inno-eipass-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f0f7d4;
  padding: 12px 20px;
  border-radius: var(--inno-radius-sm);
  margin-bottom: 24px;
}

.inno-eipass-badge img { max-height: 40px; width: auto; }

.inno-eipass-badge span {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-sm);
}

/* Nuovo — mini badge "NUOVO" inline */
.inno-nuovo {
  display: inline-block;
  background: var(--inno-color-brand-lime);
  color: var(--inno-color-brand-navy);
  font-weight: 700;
  font-size: var(--inno-fs-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   2b.11 — News cards (widget dinamico pagina risorse/news)
   Architettura identica a .inno-course-card: ogni elemento
   ha una classe dedicata (.inno-news-card-*), nessuna
   ereditarietà da classi globali (.inno-h3, .inno-p).
   - Thumb 180px con placeholder brand quando immagine manca
   - Badge data con margin fisso
   - Titolo 2 righe line-clamp + min-height per allineamento
   - Excerpt 3 righe line-clamp
   - CTA dark, no underline, no uppercase
   ------------------------------------------------------------ */
.inno-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.inno-news-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.inno-news-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* Thumb: altezza fissa forzata. Il browser usa gli attributi HTML
   width/height dell'<img> per calcolare un aspect-ratio intrinseco
   che può sovrascrivere height: 180px. !important neutralizza. */
.inno-news-card-thumb {
  width: 100% !important;
  height: 180px !important;
  max-height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: auto !important;
  background: var(--inno-color-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Body: flex column che riempie lo spazio residuo */
.inno-news-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

/* Badge (data): pill grigio piccolo, posizione fissa in alto */
.inno-news-card-badge {
  display: inline-block;
  font-size: var(--inno-fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--inno-color-bg-muted);
  color: var(--inno-color-text-muted);
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Titolo: 2 righe massimo con min-height per allineamento griglia */
.inno-news-card-title {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-snug);
  margin: 0 0 10px 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--inno-lh-snug) * var(--inno-fs-base));
}

.inno-news-card-title a {
  color: var(--inno-color-brand-navy);
  text-decoration: none;
}

/* Excerpt: 3 righe massimo, colore grigio sobrio */
.inno-news-card-excerpt {
  font-size: var(--inno-fs-sm);
  color: var(--inno-color-text-muted);
  line-height: var(--inno-lh-normal);
  margin: 0 0 14px 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* CTA: dark, no uppercase, no underline */
.inno-news-card-link {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
  transition: opacity 0.2s;
  font-size: var(--inno-fs-sm);
  text-transform: none;
  letter-spacing: normal;
  align-self: flex-start;
}

.inno-news-card:hover .inno-news-card-link { opacity: 0.7; }

/* News skeleton (placeholder di caricamento) */
.inno-news-skeleton { pointer-events: none; }

/* Skeleton pulse: definizione consolidata.
   La regola completa è in 2b.16 — Stati caricamento e archivio.
   Qui resta solo il marker .inno-news-skeleton come selettore di
   stato per il widget news. */

/* ------------------------------------------------------------
   2b.11.a — Filtri categoria news (bottoni pill)
   ------------------------------------------------------------ */
.inno-news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.inno-news-filter {
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid #d1d5db;
  background: transparent;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.inno-news-filter:hover {
  background: transparent;
  color: var(--inno-color-brand-navy);
  border-color: var(--inno-color-brand-navy);
}

.inno-news-filter:focus {
  outline: none;
  border-color: var(--inno-color-brand-navy);
}

.inno-news-filter:focus-visible {
  outline: 2px solid var(--inno-color-brand-navy);
  outline-offset: 2px;
}

.inno-news-filter--active,
.inno-news-filter--active:hover,
.inno-news-filter--active:focus {
  background: var(--inno-color-brand-navy);
  color: #fff;
  border-color: var(--inno-color-brand-navy);
}

/* ------------------------------------------------------------
   2b.11.b — Paginazione news
   ------------------------------------------------------------ */
.inno-news-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.inno-news-pagination button {
  padding: 10px 22px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--inno-color-brand-navy);
  font-weight: 700;
  font-size: var(--inno-fs-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.inno-news-pagination button:hover:not(:disabled) {
  background: var(--inno-color-brand-navy);
  color: #fff;
  border-color: var(--inno-color-brand-navy);
}

.inno-news-pagination button:focus {
  outline: none;
  background: #fff;
  color: var(--inno-color-brand-navy);
  border-color: var(--inno-color-brand-navy);
}

.inno-news-pagination button:focus-visible {
  outline: 2px solid var(--inno-color-brand-navy);
  outline-offset: 2px;
}

.inno-news-pagination button:disabled {
  opacity: 0.35;
  cursor: default;
}

.inno-news-pagination .inno-page-info {
  color: var(--inno-color-text-muted);
  font-size: var(--inno-fs-sm);
  font-weight: 600;
}

/* ------------------------------------------------------------
   2b.11.c — Messaggio nessun articolo
   ------------------------------------------------------------ */
.inno-news-empty {
  text-align: center;
  grid-column: 1 / -1;
  padding: 40px 20px;
  color: var(--inno-color-text-muted);
}

/* ------------------------------------------------------------
   2b.12 — Course cards (widget dinamico pagina corsi)
   STRUTTURA RIGIDA identica a .inno-news-card:
   - Thumb 180px sempre, anche quando immagine manca
   - Badge categoria con margin fisso
   - Titolo 2 righe line-clamp + min-height per allineamento
   - Excerpt 3 righe line-clamp
   - CTA dark, no underline, no uppercase
   ------------------------------------------------------------ */
.inno-courses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.inno-course-card {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.inno-course-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Immagine corso: altezza fissa forzata */
.inno-course-card img {
  width: 100% !important;
  height: 180px !important;
  max-height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  aspect-ratio: auto !important;
  background: var(--inno-color-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Body: flex column che riempie lo spazio residuo */
.inno-course-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
}

/* Badge categoria: posizione fissa in alto */
.inno-course-card-badge {
  display: inline-block;
  font-size: var(--inno-fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
  background: #dbeafe;
  color: #1e40af;
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Titolo: 2 righe massimo con min-height per allineamento */
.inno-course-card-title {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
  line-height: var(--inno-lh-snug);
  margin: 0 0 10px 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--inno-lh-snug) * var(--inno-fs-base));
}

.inno-course-card-title a {
  color: var(--inno-color-brand-navy);
  text-decoration: none;
}

.inno-course-card-title a:hover { text-decoration: none; }

/* Excerpt: 3 righe massimo */
.inno-course-card-excerpt {
  font-size: var(--inno-fs-sm);
  color: var(--inno-color-text-muted);
  line-height: var(--inno-lh-normal);
  margin: 0 0 14px 0;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}

/* CTA: dark, NO uppercase, NO underline, NO border-bottom */
.inno-course-card-link {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0;
  transition: opacity 0.2s;
  font-size: var(--inno-fs-sm);
  text-transform: none;
  letter-spacing: normal;
  align-self: flex-start;
}

.inno-course-card-link:hover { opacity: 0.7; }

.inno-courses-loading {
  text-align: center;
  padding: 40px;
  color: var(--inno-color-text-muted);
}

.inno-courses-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.inno-courses-pagination button {
  padding: 10px 18px;
  border: 1px solid var(--inno-color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-sm);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.inno-courses-pagination button:hover {
  border-color: var(--inno-color-brand-lime);
  background: var(--inno-color-bg-soft);
}

.inno-courses-pagination button.active {
  background: var(--inno-color-brand-lime);
  border-color: var(--inno-color-brand-lime);
  color: var(--inno-color-brand-navy);
}

/* ------------------------------------------------------------
   2b.13 — Testimonials (griglia 3 card)
   ------------------------------------------------------------ */
.inno-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.inno-testimonial {
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-md);
  background: #fff;
  padding: 28px;
  box-sizing: border-box;
}

.inno-testimonial-quote {
  font-size: var(--inno-fs-base);
  font-style: italic;
  color: var(--inno-color-text);
  line-height: var(--inno-lh-relaxed);
  margin-bottom: 16px;
}

.inno-testimonial-name {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-base);
}

.inno-testimonial-role {
  font-size: var(--inno-fs-sm);
  color: var(--inno-color-text-muted);
}

/* ------------------------------------------------------------
   2b.14 — Gallery + Logos + Map wrap
   ------------------------------------------------------------ */

/* Gallery (3 colonne immagini) */
.inno-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 30px 0;
}

.inno-gallery img,
.inno-page .inno-gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--inno-radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
}

/* Map wrap — contenitore per iframe Google Maps */
.inno-map-wrap {
  border-radius: var(--inno-radius-lg);
  overflow: hidden;
  margin: 30px 0;
}

.inno-map-wrap iframe {
  width: 100%;
  height: 350px;
  border: 0;
  display: block;
}

/* Logos — riga loghi partner/accreditamenti in scala grigia
   !important su height/width per resistere a override di Elementor
   e del tema che di default impongono width:100%; height:auto sulle img */
.inno-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 30px 0;
  opacity: 0.7;
}

/* Modifier: logos allineati a sinistra (pagine specifiche dove
   i loghi devono seguire il flusso del testo invece di stare
   centrati — es. corsi per privati).
   max-width + padding laterale replicano il contenitore .inno-page
   così i loghi partono dalla stessa colonna verticale del testo
   anche quando il contenitore Elementor ospite è full-width. */
.inno-logos--left {
  justify-content: flex-start;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px;
  box-sizing: border-box;
}

.inno-logos img {
  display: block;
  height: 50px !important;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
}

/* ------------------------------------------------------------
   2b.15 — Platform box (GOL Campania/Sicilia specifico)
   Box lime con titolo e bottone dark
   Auto-contenuta: max-width 1200px + margin auto, così resta
   centrata anche quando il Contenitore Elementor è full-width.
   ------------------------------------------------------------ */
.inno-platform-box {
  max-width: 1200px;
  margin: 60px auto;
  padding: 50px 40px;
  background: var(--inno-color-brand-lime);
  border-radius: var(--inno-radius-lg);
  box-sizing: border-box;
}

.inno-platform-box-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.inno-platform-box-text {
  flex: 1;
  min-width: 0;
}

.inno-platform-box-title {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  line-height: var(--inno-lh-snug);
  margin: 0 0 10px 0;
}

.inno-platform-box-desc {
  color: var(--inno-color-brand-dark);
  line-height: var(--inno-lh-normal);
  margin: 0;
  font-size: var(--inno-fs-base);
}

/* Variante bottone per platform-box */
.inno-btn--platform {
  background: var(--inno-color-brand-dark);
  color: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

.inno-btn--platform:hover {
  background: var(--inno-color-brand-blue);
  color: #fff;
}

/* ------------------------------------------------------------
   2b.16 — Stati caricamento e archivio
   ------------------------------------------------------------ */

/* Skeleton pulse per loading (definizione unica del file) */
.inno-skeleton-pulse {
  background: linear-gradient(90deg, var(--inno-color-bg-muted) 25%, var(--inno-color-border) 50%, var(--inno-color-bg-muted) 75%);
  background-size: 200% 100%;
  animation: innoShimmer 1.5s infinite ease-in-out;
  border-radius: 4px;
}

@keyframes innoShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Archive hint (footer "vedi archivio" news) */
.inno-archive-hint {
  text-align: center;
  padding: 30px 20px;
  margin: 40px 0 0 0;
  border-top: 1px solid var(--inno-color-border);
}

.inno-archive-hint p {
  color: var(--inno-color-text-muted);
  margin: 0;
  font-size: var(--inno-fs-base);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Empty state (messaggio "nessun risultato") */
.inno-empty-state {
  text-align: center;
  padding: 40px;
  background: var(--inno-color-bg-soft);
  border-radius: var(--inno-radius-lg);
  border: 2px dashed var(--inno-color-border);
  margin: 30px 0;
  box-sizing: border-box;
}

.inno-empty-state p {
  color: var(--inno-color-brand-navy);
  font-weight: 600;
  font-size: var(--inno-fs-base);
  margin: 0 0 12px 0;
}

.inno-empty-state span {
  color: var(--inno-color-text);
  font-size: var(--inno-fs-base);
}

/* ------------------------------------------------------------
   2b.17 — Cat badges (post category)
   ------------------------------------------------------------ */
.inno-cat-badge {
  display: inline-block;
  font-size: var(--inno-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  align-self: flex-start;
}

.inno-cat-badge--gol  { background: #dbeafe; color: #1e40af; }
.inno-cat-badge--comp { background: #fef3c7; color: #92400e; }

/* ------------------------------------------------------------
   2b.18 — Utility minori
   ------------------------------------------------------------ */

/* Variante greenline-block */
.inno-greenline-block--green { background-color: var(--inno-color-brand-lime); }

/* Hero buttons (contenitore pulsanti hero) */
.inno-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Mid-cta buttons (contenitore pulsanti nella mid-cta) */
.inno-mid-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   2b.19 — Form Elementor stile Innoform
   USO: aggiungere la classe "inno-form-wrap" al contenitore
   o colonna Elementor che contiene il form
   (Advanced → CSS Classes → inno-form-wrap)
   ============================================================ */

/* Wrapper: card bianca con radius e padding (senza shadow, per scelta) */
.inno-form-wrap {
  background: #fff;
  border-radius: var(--inno-radius-lg);
  padding: 40px;
  box-sizing: border-box;
}

/* Heading interno (es. "Oppure compila il form") */
.inno-form-wrap .elementor-heading-title,
.inno-form-wrap h2,
.inno-form-wrap h3 {
  font-weight: 700;
  color: var(--inno-color-brand-navy);
  font-size: var(--inno-fs-lg);
  margin: 0 0 24px 0;
  line-height: var(--inno-lh-snug);
}

/* Campi input/textarea/select */
.inno-form-wrap .elementor-field-textual,
.inno-form-wrap input.elementor-field,
.inno-form-wrap textarea.elementor-field,
.inno-form-wrap select.elementor-field {
  width: 100%;
  padding: 14px 16px !important;
  border: 1px solid var(--inno-color-border) !important;
  border-radius: var(--inno-radius-sm) !important;
  font-size: var(--inno-fs-base) !important;
  color: var(--inno-color-brand-navy) !important;
  background: var(--inno-color-bg-subtle) !important;
  box-sizing: border-box;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  font-family: inherit;
  line-height: var(--inno-lh-normal);
}

.inno-form-wrap .elementor-field-textual:focus,
.inno-form-wrap input.elementor-field:focus,
.inno-form-wrap textarea.elementor-field:focus,
.inno-form-wrap select.elementor-field:focus {
  border-color: var(--inno-color-brand-lime) !important;
  background: #fff !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,230,0,0.15);
}

.inno-form-wrap textarea.elementor-field {
  min-height: 100px;
  resize: vertical;
}

/* Placeholder styling */
.inno-form-wrap .elementor-field::placeholder,
.inno-form-wrap input.elementor-field::placeholder,
.inno-form-wrap textarea.elementor-field::placeholder {
  color: #9ca3af;
  opacity: 1;
}

/* Gap tra righe di campi */
.inno-form-wrap .elementor-form-fields-wrapper {
  row-gap: 16px;
}

/* Privacy acceptance (checkbox + link Iubenda) */
.inno-form-wrap .elementor-field-type-acceptance {
  margin-top: 4px;
}

.inno-form-wrap .elementor-field-type-acceptance label {
  font-size: var(--inno-fs-sm) !important;
  color: var(--inno-color-text-muted) !important;
  line-height: var(--inno-lh-normal);
  cursor: pointer;
}

.inno-form-wrap .elementor-field-type-acceptance a {
  color: var(--inno-color-brand-navy) !important;
  text-decoration: underline !important;
  font-weight: 600;
}

.inno-form-wrap .elementor-field-type-acceptance a:hover {
  opacity: 0.7;
}

.inno-form-wrap .elementor-field-type-acceptance input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--inno-color-brand-lime);
  cursor: pointer;
  vertical-align: middle;
}

/* Bottone submit — IDENTICO a .inno-btn del resto del sito
   (stesso padding, border, font, line-height, radius)
   Il bordo transparent 2px è essenziale per avere stessa altezza
   del .inno-btn standard che lo usa come "spazio hover" */
.inno-form-wrap .elementor-button,
.inno-form-wrap button[type="submit"] {
  display: inline-block !important;
  background: var(--inno-color-brand-lime) !important;
  color: var(--inno-color-brand-navy) !important;
  font-weight: 600 !important;
  font-size: var(--inno-fs-base) !important;
  line-height: 1.5 !important;
  padding: 14px 32px !important;
  border-radius: var(--inno-radius-sm) !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
  width: auto;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
}

/* Reset degli <span> interni del bottone Elementor che aggiungerebbero
   padding/line-height nativi alterando altezza */
.inno-form-wrap .elementor-button-content-wrapper,
.inno-form-wrap .elementor-button-text {
  line-height: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inno-form-wrap .elementor-button:hover,
.inno-form-wrap button[type="submit"]:hover {
  background: var(--inno-color-brand-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Messaggi di errore/successo */
.inno-form-wrap .elementor-message-success {
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 12px 16px;
  border-radius: var(--inno-radius-sm);
  margin-top: 16px;
  font-size: var(--inno-fs-sm);
}

.inno-form-wrap .elementor-message-danger {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 12px 16px;
  border-radius: var(--inno-radius-sm);
  margin-top: 16px;
  font-size: var(--inno-fs-sm);
}


/* ============================================================
   2b.20 — Selection box (liste bandi / documenti PDF)
   USO: aggiungere "inno-selection-box" al contenitore o colonna
   Elementor che contiene icona + titolo + lista bottoni download
   (Advanced → CSS Classes → inno-selection-box)
   ============================================================ */

.inno-selection-box {
  background: #fff;
  border: 1px solid var(--inno-color-border);
  border-radius: var(--inno-radius-lg);
  padding: 32px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  height: 100%; /* se affiancata a un'altra colonna, match in altezza */
}

.inno-selection-box:hover {
  border-color: var(--inno-color-brand-lime);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

/* Icona (tipicamente PDF in alto) */
.inno-selection-box .elementor-icon-wrapper {
  text-align: center;
  margin-bottom: 16px;
}

.inno-selection-box .elementor-icon {
  color: var(--inno-color-brand-lime) !important;
  font-size: 56px !important;
  display: inline-block;
}

.inno-selection-box .elementor-icon i {
  font-size: inherit !important;
  color: inherit !important;
}

/* Titolo bando / paragrafo centrale */
.inno-selection-box .elementor-widget-text-editor {
  margin-bottom: 24px;
}

.inno-selection-box .elementor-widget-text-editor p {
  color: var(--inno-color-brand-navy) !important;
  font-size: var(--inno-fs-base) !important;
  line-height: 1.5 !important;
  text-align: center;
  margin: 0;
}

.inno-selection-box .elementor-widget-text-editor p strong {
  color: var(--inno-color-brand-navy);
  font-weight: 700;
}

/* Spacing tra bottoni della lista */
.inno-selection-box .elementor-widget-button {
  margin-bottom: 10px;
}

.inno-selection-box .elementor-widget-button:last-child {
  margin-bottom: 0;
}

/* Bottoni Elementor — stile inno-btn ridotto per lista documenti
   (width 100% = aspetto "lista ordinata", dimensione ridotta perché
   ci sono tanti bottoni consecutivi e farli tutti grandi sarebbe
   visivamente pesante) */
.inno-selection-box .elementor-button {
  display: block !important;
  width: 100% !important;
  background: var(--inno-color-brand-lime) !important;
  color: var(--inno-color-brand-navy) !important;
  font-weight: 600 !important;
  font-size: var(--inno-fs-sm) !important;
  line-height: 1.5 !important;
  padding: 12px 20px !important;
  border-radius: var(--inno-radius-sm) !important;
  border: 2px solid transparent !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
  box-sizing: border-box;
}

/* Reset degli <span> interni per coerenza altezza */
.inno-selection-box .elementor-button-content-wrapper,
.inno-selection-box .elementor-button-text {
  line-height: inherit !important;
  font-size: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inno-selection-box .elementor-button:hover {
  background: var(--inno-color-brand-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Bottoni "passivi" (senza href, placeholder per funzionalità in arrivo):
   stile grigio disabilitato per chiarire stato all'utente */
.inno-selection-box .elementor-button:not([href]) {
  background: var(--inno-color-bg-muted) !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  pointer-events: none;
}


/* ============================================================
   3) RESPONSIVE — EXTENSIONS
   ============================================================ */

@media (max-width: 1024px) {
  .inno-row-reverse { gap: 40px; margin: 60px auto; }
  .inno-hero-wrap {
    padding: 60px 0;
    background:
      radial-gradient(ellipse 950px 720px at 95% 3%, rgba(184,230,0,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 620px 440px at 15% 88%, rgba(7,68,243,0.15) 0%, transparent 55%),
      linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #0f1128 100%);
  }
  .inno-card-grid--three,
  .inno-card-grid--four { grid-template-columns: repeat(2, 1fr); }
  .inno-highlight-box { padding: 32px; }
  .inno-clause { padding: 22px; }
  /* Nuovi componenti */
  .inno-hub-grid,
  .inno-news-grid { grid-template-columns: repeat(2, 1fr); }
  .inno-courses-grid { grid-template-columns: repeat(3, 1fr); }
  .inno-testimonials { grid-template-columns: repeat(2, 1fr); }
  .inno-service-card,
  .inno-fondo-card,
  .inno-target-card { padding: 28px; }
  .inno-cta-mid { flex-direction: column; text-align: center; gap: 20px; }
  .inno-platform-box { padding: 40px 30px; }
  .inno-platform-box-inner { gap: 30px; }
}

@media (max-width: 768px) {
  .inno-row-reverse {
    flex-direction: column;
    gap: 30px;
    margin: 50px auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  .inno-col-img--sticky { position: static; }
  .inno-hero-wrap {
    padding: 50px 0;
    background:
      radial-gradient(ellipse 750px 580px at 98% 2%, rgba(184,230,0,0.22) 0%, transparent 60%),
      radial-gradient(ellipse 450px 350px at 15% 90%, rgba(7,68,243,0.16) 0%, transparent 55%),
      linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #0f1128 100%);
  }
  .inno-card-grid,
  .inno-card-grid--three,
  .inno-card-grid--four { grid-template-columns: 1fr; }
  .inno-faq details summary,
  .inno-section > details summary { padding: 16px 46px 16px 18px; }
  .inno-faq details summary::after,
  .inno-section > details summary::after { right: 18px; }
  .inno-faq-answer { padding: 16px 18px; }
  .inno-check-list { padding: 20px; }
  .inno-check-list p { line-height: var(--inno-lh-loose); }
  .inno-checklist { grid-template-columns: 1fr; }
  .inno-highlight-box { padding: 28px 22px; }
  .inno-highlight { padding: 20px; margin: 20px auto; }
  .inno-clause { padding: 20px; }
  .inno-step-circle { min-width: 38px; height: 38px; font-size: var(--inno-fs-base); }
  .inno-siblings { flex-direction: column; }
  .inno-siblings a { text-align: center; }
  .inno-course-meta { flex-direction: column; gap: 10px; }
  .inno-course-meta-item { width: 100%; justify-content: flex-start; }
  .inno-table thead th,
  .inno-table tbody td { padding: 12px 14px; font-size: var(--inno-fs-sm); }
  .inno-agenda-time { min-width: 90px; padding: 12px 14px; }
  .inno-agenda-content { padding: 12px 14px; }
  /* Standalone wrappers: padding allineato al resto del sito */
  .inno-breadcrumb,
  .inno-course-meta { padding-left: 20px; padding-right: 20px; }
  /* Nuovi componenti a 768px */
  .inno-service-card,
  .inno-fondo-card,
  .inno-target-card { padding: 24px; }
  .inno-hub-grid,
  .inno-news-grid,
  .inno-testimonials,
  .inno-area-hub,
  .inno-mode-grid { grid-template-columns: 1fr; }
  .inno-hub-card,
  .inno-news-card-body,
  .inno-area-hub-card,
  .inno-testimonial { padding: 22px; }
  /* News/corsi: thumb più alta su mobile medio dove le card sono più larghe */
  .inno-news-card-thumb,
  .inno-course-card img { height: 200px !important; max-height: 200px !important; }
  .inno-cta-mid { padding: 30px 24px; margin: 50px auto; }
  .inno-platform-box { padding: 32px 24px; margin: 50px auto; }
  .inno-platform-box-inner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .inno-hero-buttons { flex-direction: column; }
  .inno-hero-buttons .inno-btn { width: 100%; text-align: center; }
  .inno-temi-list span { font-size: var(--inno-fs-sm); padding: 7px 14px; }
  .inno-gallery { grid-template-columns: repeat(2, 1fr); }
  .inno-logos { gap: 24px; margin: 24px 0; }
  .inno-logos--left { padding: 0 20px; }
  .inno-logos img { height: 40px !important; max-width: 160px; }
  .inno-courses-grid { grid-template-columns: repeat(2, 1fr); }
  .inno-accr-box { padding: 18px 22px; }
  .inno-info-box { padding: 20px 22px; }
  .inno-empty-state { padding: 30px 20px; }
  /* Form Elementor a 768 */
  .inno-form-wrap { padding: 28px 24px; }
  .inno-form-wrap .elementor-heading-title,
  .inno-form-wrap h2,
  .inno-form-wrap h3 { font-size: var(--inno-fs-md); margin-bottom: 20px; }
  .inno-form-wrap .elementor-col-50,
  .inno-form-wrap .elementor-col-33 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .inno-form-wrap .elementor-button,
  .inno-form-wrap button[type="submit"] { width: 100%; }
  /* Selection box a 768 */
  .inno-selection-box { padding: 24px; height: auto; }
  .inno-selection-box .elementor-icon { font-size: 48px !important; }
  .inno-selection-box .elementor-widget-text-editor p { font-size: var(--inno-fs-sm) !important; }
}

@media (max-width: 480px) {
  .inno-row-reverse {
    margin: 40px auto;
    padding-left: 16px;
    padding-right: 16px;
  }
  .inno-hero-wrap {
    padding: 40px 0;
    margin-bottom: 40px;
    background:
      radial-gradient(ellipse 550px 420px at 100% 0%, rgba(184,230,0,0.24) 0%, transparent 60%),
      radial-gradient(ellipse 340px 260px at 10% 95%, rgba(7,68,243,0.18) 0%, transparent 60%),
      linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #0f1128 100%);
  }
  .inno-faq details summary,
  .inno-section > details summary { padding: 14px 42px 14px 14px; }
  .inno-faq details summary::after,
  .inno-section > details summary::after { right: 14px; }
  .inno-faq-answer { padding: 14px 14px; }
  .inno-check-list { padding: 16px; }
  .inno-check-list p { line-height: var(--inno-lh-loose); }
  .inno-highlight-box { padding: 24px 18px; }
  .inno-highlight { padding: 16px; margin: 16px auto; border-radius: var(--inno-radius-sm); }
  .inno-clause { padding: 18px; }
  .inno-step-circle { min-width: 34px; height: 34px; font-size: var(--inno-fs-sm); }
  .inno-greenline-block { width: 40px; }
  .inno-warning { padding: 20px; }
  .inno-agenda-row { flex-direction: column; }
  .inno-agenda-time {
    border-right: none;
    border-bottom: 1px solid var(--inno-color-border);
    min-width: auto;
  }
  /* Standalone wrappers: padding allineato al resto del sito */
  .inno-breadcrumb,
  .inno-course-meta { padding-left: 16px; padding-right: 16px; }
  /* Nuovi componenti a 480px */
  .inno-service-card,
  .inno-fondo-card,
  .inno-target-card,
  .inno-hub-card,
  .inno-area-hub-card,
  .inno-testimonial { padding: 20px; }
  .inno-news-card-body,
  .inno-course-card-body { padding: 18px; }
  .inno-news-filters { gap: 6px; }
  .inno-news-filter { padding: 6px 14px; font-size: var(--inno-fs-sm); }
  .inno-news-pagination { gap: 12px; }
  .inno-news-pagination button { padding: 8px 16px; font-size: var(--inno-fs-sm); }
  /* News/corsi thumb su mobile 1 colonna: leggermente più alta
     per bilanciare la larghezza card = 100% viewport */
  .inno-news-card-thumb,
  .inno-course-card img { height: 200px !important; max-height: 200px !important; }
  .inno-cta-mid { padding: 24px 16px; margin: 40px auto; border-radius: var(--inno-radius-sm); }
  .inno-platform-box { padding: 24px 18px; margin: 40px auto; border-radius: var(--inno-radius-sm); }
  .inno-mode-card { padding: 24px 18px; }
  .inno-courses-grid { grid-template-columns: 1fr; }
  .inno-news-grid { grid-template-columns: 1fr; gap: 16px; }
  .inno-gallery { grid-template-columns: 1fr; }
  .inno-map-wrap iframe { height: 260px; }
  .inno-accr-box,
  .inno-info-box { padding: 18px 20px; }
  .inno-empty-state { padding: 24px 18px; }
  .inno-contact-box { padding: 20px; }
  .inno-logos { gap: 18px; margin: 20px 0; }
  .inno-logos--left { padding: 0 16px; }
  .inno-logos img { height: 36px !important; max-width: 140px; }
  /* Form Elementor a 480 */
  .inno-form-wrap { padding: 22px 18px; border-radius: var(--inno-radius-sm); }
  .inno-form-wrap .elementor-field-textual,
  .inno-form-wrap input.elementor-field,
  .inno-form-wrap textarea.elementor-field {
    padding: 12px 14px !important;
    font-size: var(--inno-fs-sm) !important;
  }
  .inno-form-wrap .elementor-button,
  .inno-form-wrap button[type="submit"] {
    padding: 13px 24px !important;
    font-size: var(--inno-fs-sm) !important;
  }
  /* Selection box a 480 */
  .inno-selection-box { padding: 20px; border-radius: var(--inno-radius-md); }
  .inno-selection-box .elementor-icon { font-size: 44px !important; }
  .inno-selection-box .elementor-button {
    padding: 11px 18px !important;
    font-size: var(--inno-fs-sm) !important;
  }
  .inno-selection-box .elementor-widget-button { margin-bottom: 8px; }
}

@media (max-width: 375px) {
  .inno-row-reverse { padding-left: 14px; padding-right: 14px; }
  .inno-hero-wrap {
    padding: 32px 0;
    background:
      radial-gradient(ellipse 450px 360px at 100% 0%, rgba(184,230,0,0.26) 0%, transparent 60%),
      radial-gradient(ellipse 280px 220px at 5% 97%, rgba(7,68,243,0.20) 0%, transparent 60%),
      linear-gradient(135deg, var(--inno-color-brand-dark) 0%, #0f1128 100%);
  }
  .inno-step-circle { min-width: 32px; height: 32px; font-size: var(--inno-fs-sm); }
  .inno-siblings a { padding: 10px 18px; font-size: var(--inno-fs-sm); }
  .inno-highlight { padding: 14px; margin: 14px auto; }
  /* Standalone wrappers: padding allineato al resto del sito */
  .inno-breadcrumb,
  .inno-course-meta { padding-left: 14px; padding-right: 14px; }
  /* Nuovi componenti a 375px */
  .inno-service-card,
  .inno-fondo-card,
  .inno-target-card,
  .inno-hub-card,
  .inno-area-hub-card,
  .inno-testimonial { padding: 18px; }
  .inno-cta-mid { padding: 22px 14px; }
  .inno-platform-box { padding: 22px 16px; }
  .inno-map-wrap iframe { height: 220px; }
  .inno-logos { gap: 14px; margin: 18px 0; }
  .inno-logos--left { padding: 0 14px; }
  .inno-logos img { height: 32px !important; max-width: 120px; }
  /* Form Elementor a 375 */
  .inno-form-wrap { padding: 18px 14px; }
  .inno-form-wrap .elementor-field-textual,
  .inno-form-wrap input.elementor-field,
  .inno-form-wrap textarea.elementor-field {
    padding: 11px 12px !important;
    font-size: var(--inno-fs-sm) !important;
  }
  /* Selection box a 375 */
  .inno-selection-box { padding: 16px; }
  .inno-selection-box .elementor-icon { font-size: 40px !important; }
  .inno-selection-box .elementor-button {
    padding: 10px 14px !important;
    font-size: var(--inno-fs-sm) !important;
  }
  /* News/corsi a 375 */
  .inno-news-grid,
  .inno-courses-grid { grid-template-columns: 1fr; gap: 14px; }
  .inno-news-card-body,
  .inno-course-card-body { padding: 16px; }
  .inno-news-card-thumb,
  .inno-course-card img { height: 180px !important; max-height: 180px !important; }
}


/* ============================================================
   2b.21 — FOOTER
   Footer del sito (sezione finale di ogni pagina).
   Selettori scopati .inno-footer-* per namespace pulito.
   Tipografia con token --inno-fs-footer-* (compensazione
   percettiva su fondo scuro). Vedi commento in :root.
   ============================================================ */

.inno-footer {
  background: linear-gradient(180deg, var(--inno-color-brand-dark) 0%, #141628 100%);
  color: rgba(255,255,255,0.65);
  font-size: var(--inno-fs-footer-body);
  line-height: 1.7;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.inno-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.02) 1px, transparent 0);
  background-size: 48px 48px;
  pointer-events: none;
}

.inno-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 30px 0;
  position: relative;
  z-index: 1;
}

/* --- Top --- */
.inno-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 40px;
}

/* !important necessario: Elementor sovrascrive height/width su tutte le img */
.inno-footer-logo {
  display: block;
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  max-width: 240px !important;
  margin-bottom: 14px;
  object-fit: contain;
}

.inno-footer-tagline {
  color: rgba(255,255,255,0.45);
  font-size: var(--inno-fs-footer-small);
  line-height: 1.5;
  margin: 0;
  max-width: 340px;
}

.inno-footer-social { display: flex; gap: 10px; flex-shrink: 0; }

.inno-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--inno-radius-sm);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.inno-footer-social a:hover { background: rgba(184,230,0,0.15); color: var(--inno-color-brand-lime-light); }
.inno-footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Grid --- */
.inno-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}

.inno-footer-heading {
  font-weight: 700;
  color: #fff;
  font-size: var(--inno-fs-footer-heading);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

.inno-footer-list { list-style: none; padding: 0; margin: 0; }
.inno-footer-list li { margin-bottom: 10px; }
.inno-footer-list li:last-child { margin-bottom: 0; }

.inno-footer-link {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: var(--inno-fs-footer-link);
  transition: color 0.2s;
  line-height: 1.4;
}

.inno-footer-link:hover { color: var(--inno-color-brand-lime-light); }

.inno-footer-pillar {
  color: var(--inno-color-brand-lime-light);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--inno-fs-footer-link);
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.inno-footer-pillar::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--inno-color-brand-lime);
  border-radius: 50%;
  flex-shrink: 0;
}

.inno-footer-pillar:hover { opacity: 0.75; }

.inno-footer-divider {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 16px 0;
}

/* --- Contatti --- */
.inno-footer-contact {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.inno-footer-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--inno-fs-footer-small);
}

.inno-footer-contact-row:last-child { margin-bottom: 0; }

.inno-footer-contact-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inno-footer-contact-row svg.inno-icon-wa { fill: currentColor; stroke: none; }

.inno-footer-contact-row a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.inno-footer-contact-row a:hover { color: var(--inno-color-brand-lime-light); }

.inno-footer-contact-row span {
  color: rgba(255,255,255,0.3);
  font-size: var(--inno-fs-xs);
}

/* --- Barra legale --- */
.inno-footer-bar { border-top: 1px solid rgba(255,255,255,0.07); }

.inno-footer-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.35);
  font-size: var(--inno-fs-footer-legal);
}

/* Company info: container flex con wrap controllato.
   Tutto inline, va a capo solo se serve. Le unità company
   ("Innoform Srl", "P.IVA ...", "Sede Legale: ...") sono
   frasi che possono spezzarsi naturalmente sugli spazi se
   il viewport è troppo stretto.
   Allineato a sinistra come il resto del footer. */
.inno-footer-company {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 10px;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: 1.5;
}

/* white-space: normal (default) — permette wrap naturale dentro
   ogni <span>. L'indirizzo lungo "Sede Legale: Circonvallazione
   Clodia 163/167 — 00195 Roma (RM)" può andare a capo sui suoi
   spazi naturali invece di essere troncato.
   NAP-safe: l'indirizzo resta una stringa unica nel DOM, parser
   SEO lo riconoscono come unità coerente. */
.inno-footer-company span {
  white-space: normal;
}

/* Link legali: tutto inline, wrap automatico, allineato a sinistra.
   Ogni link è un'unità indivisibile (es. "Privacy Policy" sempre
   tutto sulla stessa riga, non spezzato a metà). */
.inno-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.inno-footer-legal-links a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

.inno-footer-legal-links a:hover { color: rgba(255,255,255,0.6); }

/* Powered by Methoda: stesso pattern degli altri link, ma con
   <strong> interno leggermente più chiaro per dare credito
   visivo discreto al partner tecnico.
   
   Specificità (0,2,1) per battere .inno-footer-legal-links a
   che ha (0,1,1) e sovrascriverebbe il color personalizzato. */
.inno-footer-legal-links a.inno-footer-credit-link {
  color: rgba(255,255,255,0.5);
}

.inno-footer-legal-links a.inno-footer-credit-link strong {
  color: rgba(255,255,255,0.7);
  font-weight: 700;
}

.inno-footer-legal-links a.inno-footer-credit-link:hover,
.inno-footer-legal-links a.inno-footer-credit-link:hover strong {
  color: var(--inno-color-brand-lime-light);
}

/* --- Responsive footer --- */
@media (max-width: 1024px) {
  .inno-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
  .inno-footer-inner { padding: 50px 30px 0; }
}

@media (max-width: 768px) {
  .inno-footer-inner { padding: 40px 20px 0; }
  .inno-footer-top { flex-direction: column; gap: 20px; padding-bottom: 28px; margin-bottom: 28px; }
  .inno-footer-grid { gap: 28px 32px; }
  .inno-footer-bar-inner { padding: 20px; }
  /* Gap legali ridotto per accomodare wrap su viewport stretti */
  .inno-footer-legal-links { gap: 14px; }
  /* Email e Powered by Methoda forzati su riga propria.
     Selettore a[href^="mailto"] = elegante, sfrutta info già
     presente nel markup (no classe extra da mantenere).
     flex-basis: 100% = pattern corretto in contesto flex,
     rispetta gap del container (meglio di width: 100%).
     Allineamento sinistra preservato (no text-align). */
  .inno-footer-legal-links a[href^="mailto"],
  .inno-footer-legal-links a.inno-footer-credit-link {
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  .inno-footer-inner { padding: 36px 16px 0; }
  .inno-footer-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 36px; }
  .inno-footer-bar-inner { padding: 18px 16px; }
  .inno-footer-heading { margin-bottom: 14px; }
}

@media (max-width: 375px) {
  .inno-footer-inner { padding: 28px 14px 0; }
  .inno-footer-bar-inner { padding: 16px 14px; font-size: 0.75rem; }
}