.elementor-kit-5{--e-global-color-primary:#040404;--e-global-color-secondary:#E5E6D7;--e-global-color-text:#8D8989;--e-global-color-accent:#FF4E45;--e-global-typography-primary-font-family:"Helvetica";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Spinnaker";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Sedan";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Konkhmer Sleokchher";--e-global-typography-accent-font-weight:500;background-color:#E5E3DD;font-family:"Helvetica", Sans-serif;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{font-family:"Helvetica", Sans-serif;}.elementor-kit-5 h2{font-family:"Helvetica", Sans-serif;}.elementor-kit-5 img{opacity:1;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:-9px;--container-default-padding-right:-9px;--container-default-padding-bottom:-9px;--container-default-padding-left:-9px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:64px;padding-inline-start:64px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:900px;}.e-con{--container-max-width:900px;}.site-header{padding-inline-end:35px;padding-inline-start:35px;}}@media(max-width:768px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}.site-header{padding-inline-end:16px;padding-inline-start:16px;}}/* Start custom CSS *//* 1) Forza il range TABLET: 768–1024 px */
@media (min-width: 768px) and (max-width: 1024px){
  /* contenitori allineati come tablet */
  .ml-latest-events .ev-wrap,
  .ml-events-manual .ev-wrap {
    max-width: 900px;   /* coerente con Site Settings tablet */
    margin-left: auto;
    margin-right: auto;
  }

  /* header / logo più stabili su tablet */
  .site-header { position: sticky; top: 0; }
  .site-header .logo,
  .elementor-widget-site-logo { display: flex; align-items: center; justify-content: center; }
  .site-header .logo img,
  .elementor-widget-site-logo img { max-height: 48px; height: auto; }

  /* sezioni a colonna unica se serve (togli se non vuoi) */
  .ml-events-manual .ev { grid-template-columns: 1fr; }
}

/* 2) iPad orizzontale “grande”: tratta come tablet se il device è touch (coarse) */
@media (max-width: 1366px) and (pointer: coarse){
  .ml-latest-events .ev-wrap,
  .ml-events-manual .ev-wrap {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* 3) Fix per sezioni full screen: usa unità viewport stabili su iPad */
@media (min-width: 768px) and (max-width: 1366px){
  /* sostituisci i selettori con i tuoi hero/sezioni full-bleed */
  .hero, .section-full, [data-hero="full"]{
    min-height: 100vh;
  }
  @supports (height: 100svh){
    .hero, .section-full, [data-hero="full"]{ min-height: 100svh; }
  }
  /* evita tagli: niente overflow hidden su wrapper critici a tablet */
  .hero, .section-full, .elementor-section { overflow: visible; }
}

/* 4) Confine 1024px: se da qualche parte hai min-width:1024, neutralizza su tablet */
@media (max-width: 1024px){
  /* esempi di reset “anti-desktop” a 1024 */
  .site-header { transform: none; left: auto; right: auto; }
  .elementor-section { transform: none; }
}
/* === VARIANTE B: gestione doppia hero === */
/* Stato di base: desktop visibile, mobile nascosta */
.hero--desktop{ display:block; }
.hero--mobile{ display:none; }

/* Tablet 768–1024px: mostra la mobile, nascondi la desktop */
@media (min-width: 768px) and (max-width: 1024px){
  .hero--desktop{ display:none !important; }
  .hero--mobile{ display:block !important; }
}

/* iPad orizzontale fino a 1366px (solo device touch): usa comunque la mobile */
@media (max-width: 1366px) and (pointer: coarse){
  .hero--desktop{ display:none !important; }
  .hero--mobile{ display:block !important; }
}

/* Evita il taglio su iPad: niente height fissa, usa svh */
.hero--mobile{ height:auto !important; min-height:100vh; }
@supports (min-height: 100svh){
  .hero--mobile{ min-height:100svh; }
}

/* Se la hero aveva wrapper che tagliano, rendi visibile su tablet */
@media (min-width: 768px) and (max-width: 1366px){
  .hero--mobile, .hero--mobile *{ overflow: visible !important; }
}

/* ===== KILL-SWITCH VISIBILITÀ HERO ===== */

/* Stato base: mobile (fallback sicuro) */
#home-mmf-hero{ display:block !important; }
#ipad-hero, #hero-layout{ display:none !important; }

/* Tablet portrait (768–1024): usa SEMPRE l’iPad hero */
@media (min-width:768px) and (max-width:1024px) and (orientation: portrait){
  #ipad-hero{ display:block !important; }
  #home-mmf-hero, #hero-layout{ display:none !important; }
}

/* Landscape >=1025 (iPad orizzontale incluso): usa SEMPRE la hero DESKTOP */
@media (min-width:1025px) and (orientation: landscape){
  #hero-layout{ display:grid !important; }
  #ipad-hero, #home-mmf-hero{ display:none !important; }
}

/* Altezza stabile ovunque (niente tagli) */
#hero-layout, #home-mmf-hero, #ipad-hero{ height:auto !important; min-height:100vh; }
@supports (min-height: 100svh){
  #hero-layout, #home-mmf-hero, #ipad-hero{ min-height:100svh; }
}

/* Evita clipping tastiera in landscape */
@media (min-width:1025px) and (max-width:1366px) and (orientation: landscape){
  #hero-layout .col-right{ overflow: visible !important; margin-left: 0 !important; }
  #hero-layout #tastiera-svg{ max-width:100%; height:auto; }
  /* Tastiera meno “su” su schermi bassi */
  #hero-layout{
    --kbd-w: clamp(560px, 48vw, 720px);
    --kbd-shift-y: clamp(-32px, -5vh, 0px);
  }
}
/* === TABLET ADD-ON (safe) ======================================== */
@media (min-width:768px) and (max-width:1024px){
  /* testi un filo più compatti su tablet */
  .ml-latest-events{
    --title-size: clamp(26px, 3.6vw, 42px);
    --ev-title-size: clamp(17px, 2.0vw, 24px);
    --rot-line-h: 1.12em; /* evita tagli nelle righe “rotanti” */
  }
  /* padding laterali più stretti su tablet */
  .ml-latest-events .ev-wrap{
    padding-left: clamp(40px, 8vw, 160px);
    padding-right: clamp(20px, 6vw, 80px);
  }
  .ml-latest-events .events-list{ gap: 12px; }
}

/* offset ancore per header/sticky (home + pagina Eventi&News) */
#news-eventi,
.ml-events-manual .ev[id]{
  scroll-margin-top: 110px; /* adatta se l’header cambia altezza */
}

/* iPad / touch: disattiva effetti :hover “saltellanti” */
@media (hover: none) and (pointer: coarse){
  .ml-latest-events a:hover .rot-inner{ transform: none; }
}
/* ===== HOMEPAGE — HERO VISIBILITY MATRIX v2 (safe drop-in) ===== */
/* Nascondi i 3 blocchi di partenza, poi accendi quello giusto per breakpoint */
.home #home-mmf-hero,
.home #ipad-hero,
.home #hero-layout{
  display: none !important;
}

/* Mobile < 768px → HERO mobile */
@media (max-width: 767.98px){
  .home #home-mmf-hero{ display: block !important; }
}

/* Tablet 768–1189px (portrait & landscape) → HERO iPad */
@media (min-width: 768px) and (max-width: 1189.98px){
  .home #ipad-hero{ display: block !important; }
}

/* Desktop ≥ 1190px → HERO desktop (grid) */
@media (min-width: 1190px){
  .home #hero-layout{ display: grid !important; }
}

/* Altezze stabili (evita tagli/saltelli) */
.home #home-mmf-hero,
.home #ipad-hero,
.home #hero-layout{
  height: auto !important;
  min-height: 100vh;
}
@supports (min-height: 100svh){
  .home #home-mmf-hero,
  .home #ipad-hero,
  .home #hero-layout{ min-height: 100svh; }
}

/* Evita clipping tastiera nella HERO desktop */
.home #hero-layout .col-right{ overflow: visible !important; }
.home #hero-layout #tastiera-svg{ max-width: 100%; height: auto; }

/* Tablet "bassi" in landscape: micro-tweak non invasivo */
@media (min-width: 1024px) and (max-height: 820px) and (orientation: landscape){
  .home #ipad-hero{ padding-top: 24px; }
  .home #hero-layout{
    --kbd-w: min(52vw, 720px);
    --kbd-shift-y: -24px;
  }
}
/* ===== END — HOMEPAGE HERO MATRIX v2 ===== */
/* ===== HOME — TABLET GAP FIX (768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* azzera distanze automatiche sopra la prima sezione in HOME */
  .home .elementor-location-header + .elementor-section,
  .home .elementor-location-header + .e-con,
  .home .elementor-section-wrap > .elementor-section:first-child,
  .home .elementor-section-wrap > .e-con:first-child,
  .home #home-mmf-hero,
  .home #ipad-hero,
  .home #hero-layout{
    margin-top: 0 !important;
  }

  /* elimina eventuali spacer/header-spacer solo in home */
  .home .header-spacer,
  .home .site-header-spacer{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* se il primo container aveva padding-top “di sicurezza”, riducilo con dolcezza */
  .home .elementor-section-wrap > .elementor-section:first-child > .elementor-container,
  .home .elementor-section-wrap > .e-con:first-child > .e-con-inner{
    padding-top: min(12px, 1vh) !important;
  }

  /* evita che qualche regola globale su .elementor-section forzi offset/transform */
  .home .elementor-section-wrap > .elementor-section:first-child{
    transform: none !important;
  }
}
/* ===== END GAP FIX ===== */
/* ===== HOME — NUKE TOP GAP (tablet 768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* 0) Neutralizza QUALSIASI spacer/variabile d'header eventualmente rimasta */
  .home{ --mmf-hdr-auto: 0px !important; }

  /* 1) Spegni ogni “spacer” noto legato all'header */
  .home .header-spacer,
  .home .site-header-spacer,
  .home [class*="header-spacer"]{
    display:none !important; height:0 !important; margin:0 !important; padding:0 !important;
  }

  /* 2) Il primo wrapper subito dopo l'header: niente margini/padding top */
  .home .elementor-location-header + *{
    margin-top:0 !important; padding-top:0 !important; transform:none !important;
  }

  /* 3) I primi contenitori principali: zero top spacing */
  .home main:first-of-type,
  .home #content:first-of-type,
  .home .site-content:first-of-type,
  .home .elementor:first-of-type,
  .home .elementor-section-wrap:first-of-type,
  .home .elementor-container:first-of-type{
    margin-top:0 !important; padding-top:0 !important;
  }

  /* 4) La HERO tablet stessa: attacca all'header senza extra */
  .home #ipad-hero,
  .home #ipad-hero > .hero-inner{
    margin-top:0 !important;
  }
  .home #ipad-hero{
    /* usa solo il padding previsto dalla skin (niente spacer nascosti) */
    padding-top: var(--ipad-pad-t, 0px) !important;
  }
}
/* ===== HOME — TABLET GAP KILLER (768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* Neutralizza variabili/spacer rimasti */
  .home{ --mmf-hdr-auto: 0px !important; }

  /* Zero margini/padding su tutto ciò che precede la HERO */
  .home .elementor-location-header + *{
    margin-top:0 !important; padding-top:0 !important; transform:none !important;
  }
  .home main:first-of-type,
  .home #content:first-of-type,
  .home .site-content:first-of-type,
  .home .elementor:first-of-type,
  .home .elementor-section-wrap:first-of-type,
  .home .elementor-container:first-of-type{
    margin-top:0 !important; padding-top:0 !important;
  }

  /* La HERO stessa: impedisci *collasso dei margini* del primo figlio */
  .home #ipad-hero{
    /* crea un nuovo BFC → niente margin-collapsing */
    display: flow-root; 
    /* nessun margine extra */
    margin-top:0 !important;
    /* usa SOLO il padding nativo della skin, niente spacer header */
    padding-top: var(--ipad-pad-t, 0px) !important;
  }

  /* Se qualche figlio partisse con un margin-top grosso, annullalo */
  .home #ipad-hero > *:first-child{ margin-top:0 !important; }

  /* Safety: l’header non deve aggiungere margini propri */
  .home .site-header{ margin-bottom:0 !important; }
}
/* ===== Tablet (768–1189) — pagina con #ipad-hero, NO conflitto con intro ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* 1) Togli l'offset del body SOLO quando l’intro NON è visibile
        (a) se l’intro non esiste
        (b) se l’intro esiste ma è nascosta con aria-hidden="true" */
  body:has(#ipad-hero):not(:has(#mmf-intro)){
    padding-top: 0 !important;
  }
  body:has(#ipad-hero):has(#mmf-intro[aria-hidden="true"]){
    padding-top: 0 !important;
  }

  /* 2) Header realmente appiccicato in alto */
  body:has(#ipad-hero):not(:has(#mmf-intro)),
  body:has(#ipad-hero):has(#mmf-intro[aria-hidden="true"]){
    /* scope combinato per le regole qui sotto */
  }
  body:has(#ipad-hero):not(:has(#mmf-intro)) .site-header,
  body:has(#ipad-hero):not(:has(#mmf-intro)) .elementor-location-header,
  body:has(#ipad-hero):has(#mmf-intro[aria-hidden="true"]) .site-header,
  body:has(#ipad-hero):has(#mmf-intro[aria-hidden="true"]) .elementor-location-header{
    top: 0 !important;
  }

  /* 3) Neutralizza margini/padding del primo wrapper dopo l’header,
        senza toccare l’intro se presente */
  .elementor-location-header + *{
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  /* 4) Spegni spacer generici tra header e hero (non tocca #mmf-intro) */
  .elementor-location-header ~ *:has(~ #ipad-hero):not(#mmf-intro){
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important; /* evita side-effect di display:none */
  }

  /* 5) Spacer/intro wrapper noti: rimuovi solo quelli NON intro */
  .elementor-location-header ~ [class*="spacer"],
  .elementor-location-header ~ .header-spacer,
  .elementor-location-header ~ .site-header-spacer{
    display: none !important;
    height: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
  }

  /* 6) Evita margin-collapsing all’interno della hero */
  #ipad-hero{
    display: flow-root;
    margin-top: 0 !important;
    padding-top: var(--ipad-pad-t, 0px) !important;
  }
  #ipad-hero > *:first-child{ margin-top: 0 !important; }
}

/* iPad landscape nel range tablet: se serve, alza leggermente la tastiera */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){
  :root{ --ipad-kbd-shift-y: -28px !important; }
  #tastiera-ipad{ transform: translateY(var(--ipad-kbd-shift-y)) !important; }
}
/* ===== FRONT PAGE con #ipad-hero — neutralizza hero--* del Customizer (SOLO tablet) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* Se la pagina contiene l’iPad hero, nascondi eventuali hero generiche */
  body:has(#ipad-hero) .hero--mobile,
  body:has(#ipad-hero) .hero--desktop{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Se quelle hero si trovano PRIMA di #ipad-hero, spegnile in modo mirato */
  .elementor-location-header ~ .hero--mobile:has(~ #ipad-hero),
  .elementor-location-header ~ .hero--desktop:has(~ #ipad-hero){
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Assicurati che la vera hero tablet sia attiva */
  #ipad-hero{ display:block !important; }
}
/* ===== iPad HERO — TUNING PACK (tablet 768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* 1) Dials principali */
  #ipad-hero{
    /* testo non “sparisce” verso l’alto, tastiera solo un filo su,
       bottone vicino al messaggio */
    --ipad-msg-shift-y: 150px;         /* prima era negativo → riportiamo a 0 */
    --ipad-kbd-shift-y: 120px;       /* era troppo su → abbassiamo un po’ */
    --ipad-cta-gap: 6px;             /* riduce la distanza messaggio → CTA */
  }

  /* 2) Row-gap e micro-spazi */
  #ipad-hero .hero-inner{ 
    row-gap: clamp(8px, 2.0vw, 16px); 
  }
  #ipad-hero .kbd-box{ 
    margin-top: clamp(4px, 1.2vw, 10px);  /* niente “voragini” sopra la tastiera */
  }
  #ipad-hero .kb-under{ 
    margin-top: clamp(4px, 1.2vw, 10px);  /* riduce spazio tra tastiera e hint */
  }
  #ctaBtn-ipad{
    margin-top: var(--ipad-cta-gap) !important;  /* aggancia al messaggio/hint */
  }

  /* 3) Sicurezze: testo sopra, tastiera sotto, nessun clipping */
  #ipad-hero .hero-inner{ position: relative; z-index: 1; }
  #post-message-ipad, #ctaBtn-ipad{ position: relative; z-index: 2; }
  #tastiera-ipad{ position: relative; z-index: 1; transform: translateY(var(--ipad-kbd-shift-y)) !important; }
  #post-message-ipad{
    transform: translateY(var(--ipad-msg-shift-y)) !important;
    opacity: 1 !important; visibility: visible !important; overflow: visible;
  }
}

/* ===== Landscape fine-tuning (tablet) ===== */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){
  #ipad-hero{
    --ipad-kbd-shift-y: -18px;  /* un filo più alto in landscape, ma NON copre il testo */
    --ipad-cta-gap: 8px;        /* bottone un pelo più vicino */
  }
  #ipad-hero .hero-inner{ row-gap: clamp(6px, 1.2vw, 12px); }
}
/* ===== iPad HERO — CHIARIMENTO SPAZIO TESTO SOTTO HEADER (tablet 768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* 1) Spazio di rispetto: metti padding-top dentro la HERO pari all'header
        (così il testo non sta sotto l'header fixed) */
  #ipad-hero .hero-inner{
    padding-top: var(--header-h, 80px) !important; /* usa la tua var definita in header.css */
  }

  /* 2) Reset degli shift "esagerati" e micro-tuning */
  #ipad-hero{
    --ipad-msg-shift-y: 0px;     /* testo alla sua posizione naturale */
    --ipad-kbd-shift-y: -12px;   /* tastiera solo un filo su */
    --ipad-cta-gap: 8px;         /* avvicina il bottone al messaggio */
  }

  /* 3) Applica i transform basati sulle variabili (forzando eventuali override precedenti) */
  #post-message-ipad{ transform: translateY(var(--ipad-msg-shift-y)) !important; }
  #tastiera-ipad{    transform: translateY(var(--ipad-kbd-shift-y)) !important; }

  /* 4) Spaziature coerenti tra blocchi */
  #ipad-hero .hero-inner{ row-gap: clamp(8px, 2vw, 16px); }
  #ipad-hero .kbd-box{   margin-top: clamp(4px, 1.2vw, 10px); }
  #ipad-hero .kb-under{  margin-top: clamp(4px, 1.2vw, 10px); }
  #ctaBtn-ipad{          margin-top: var(--ipad-cta-gap) !important; }

  /* 5) Layer order: testo sopra la tastiera, nessun clipping */
  #post-message-ipad, #ctaBtn-ipad{ position: relative; z-index: 2; }
  #tastiera-ipad{ position: relative; z-index: 1; }
}

/* ===== Landscape nel range tablet: un filo più “su” la tastiera, ma testo libero ===== */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){
  #ipad-hero .hero-inner{ padding-top: calc(var(--header-h, 80px) - 8px) !important; }
  #ipad-hero{ --ipad-kbd-shift-y: -16px; --ipad-cta-gap: 8px; }
  #tastiera-ipad{ transform: translateY(var(--ipad-kbd-shift-y)) !important; }
}
/* ===== iPad HERO — tuning tablet (768–1189) ===== */
@media (min-width:768px) and (max-width:1189.98px){

  /* (1) Spazio extra sotto l’header: +50px */
  #ipad-hero .hero-inner{
    padding-top: calc(var(--header-h, 90px) + 100px) !important;
    row-gap: clamp(6px, 1.6vw, 12px); /* spazi interni compatti */
  }

  /* (2) Reset shift grossi + micro-tuning base */
  #ipad-hero{
    --ipad-msg-shift-y: 0px;     /* niente “spinte” grosse sul testo */
    --ipad-kbd-shift-y: -12px;   /* leggero su (vedi portrait qui sotto) */
    --ipad-cta-gap: -300px;         /* CTA più vicino */
  }
  #post-message-ipad{ transform: translateY(var(--ipad-msg-shift-y)) !important; }
  #tastiera-ipad{    transform: translateY(var(--ipad-kbd-shift-y)) !important; }

  /* (3) Avvicina CTA alla tastiera */
  #ipad-hero .kb-under{  margin-top: -40px !important; }
  #ctaBtn-ipad{          margin-top: var(--ipad-cta-gap) !important; }
}

/* ===== Portrait: assicurati che la tastiera si veda ===== */
@media (min-width:768px) and (max-width:1189.98px) and (orientation:portrait){
  /* ignora eventuale regola “* .6” e porta su la tastiera in modo deciso */
  #tastiera-ipad{ transform: translateY(-90px) !important; }

  /* se vuoi ancora più vicino il bottone, riduci a 2px (o 0px) */
  #ipad-hero{ --ipad-cta-gap: 2px; }
}

/* ===== Landscape: un filo di lift ma senza mangiare il testo ===== */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){
  #tastiera-ipad{ transform: translateY(-18px) !important; } /* leggero su */
  #ipad-hero{ --ipad-cta-gap: 6px; }                         /* un pelo di respiro */
}
/* ===== iPad HERO — SOLO LANDSCAPE (tablet 1024–1189) ===== */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){

  /* === PRESET A — SICURO (impila: testo sopra, tastiera sotto) === */
  #ipad-hero .hero-inner{
    /* spazio sotto header fisso */
    padding-top: calc(var(--header-h, 80px) + 16px) !important;
    grid-template-columns: 1fr !important;      /* impilato */
    row-gap: clamp(6px, 1.2vw, 12px) !important;
    align-items: start;
  }
  /* tastiera ben visibile */
  #tastiera-ipad{
    width: min(680px, 86vw) !important;
    transform: translateY(-40px) !important;    /* alza/abbassa qui (– più su, + più giù) */
    margin-left:auto; margin-right:auto;
  }
  /* CTA vicino alla tastiera */
  #ipad-hero .kb-under{ margin-top: 4px !important; }
  #ctaBtn-ipad{        margin-top: 4px !important; }

  /* --- SE VUOI AFFIANCATO, COMMENTA A SOPRA E USA B SOTTO ---
  #ipad-hero .hero-inner{
    padding-top: calc(var(--header-h, 80px) + 8px) !important;
    grid-template-columns: 1fr 1fr !important;  /* affiancato */
    column-gap: clamp(12px, 2vw, 20px) !important;
    align-items: center;
  }
  #tastiera-ipad{
    width: min(600px, 48vw) !important;         /* più piccola per restare in viewport */
    transform: translateY(-24px) !important;    /* alza/abbassa qui */
  }
  #ipad-hero .kb-under{ margin-top: 6px !important; }
  #ctaBtn-ipad{        margin-top: 6px !important; }
  --- FINE PRESET B --- */

  /* sicurezza livelli */
  #post-message-ipad, #ctaBtn-ipad{ position:relative; z-index:2; }
  #tastiera-ipad{ position:relative; z-index:1; }
}
/* ===== iPad HERO — SOLO LANDSCAPE (tablet 1024–1189) ===== */
@media (min-width:1024px) and (max-width:1189.98px) and (orientation:landscape){

  /* Se la pagina ha l'hero iPad, spegni eventuali hero generiche del tema */
  body:has(#ipad-hero) .hero--mobile,
  body:has(#ipad-hero) .hero--desktop{
    display:none !important; height:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important;
  }

  /* Hero iPad: visibile, senza clipping */
  #ipad-hero{ display:block !important; height:auto !important; min-height:min(100svh,100vh) !important; }
  #ipad-hero, #ipad-hero *{ overflow: visible !important; }

  /* Impila in landscape (schermo “basso” su iPad) */
  #ipad-hero .hero-inner{
    padding-top: calc(var(--header-h, 80px) + 12px) !important;  /* niente testo sotto l’header */
    grid-template-columns: 1fr !important;                       /* testo sopra, tastiera sotto */
    row-gap: 8px !important;
    align-items: start;
  }

  /* Tastiera sempre in viewport, centrata e senza shift strani */
  #tastiera-ipad{
    width: min(640px, 84vw) !important;
    transform: none !important;
    margin: 6px auto 0 !important;
  }

  /* CTA molto vicino alla tastiera */
  #ipad-hero .kb-under{ margin-top: 4px !important; }
  #ctaBtn-ipad{        margin-top: 4px !important; }

  /* Livelli: testo/CTA sopra, tastiera sotto */
  #post-message-ipad, #ctaBtn-ipad{ position: relative; z-index: 2; }
  #tastiera-ipad{ position: relative; z-index: 1; }
}
/* Blink + active per tastiera iPad (solo tablet) */
@media (min-width:768px) and (max-width:1189.98px){
  /* bianco/nero con leggero richiamo al brand */
  @keyframes ipadKeyBlinkWhite{ 0%,100%{opacity:1} 50%{opacity:.45} }
  @keyframes ipadKeyBlinkBlack{ 0%,100%{opacity:1} 50%{opacity:.55} }

  /* se vuoi usare il fill brand, scommenta e rimuovi le 2 righe sopra:
  @keyframes ipadKeyBlinkWhite{ 0%,100%{fill:#fff} 50%{fill:color-mix(in oklab,var(--brand,#587A96) 28%,#fff)} }
  @keyframes ipadKeyBlinkBlack{ 0%,100%{fill:#1F1F1F} 50%{fill:color-mix(in oklab,var(--brand,#587A96) 28%,#fff)} }
  */

  /* Applica blink */
  #tastiera-ipad g[id^="tasto"]:not([id^="tastoNero"]).blink { animation: ipadKeyBlinkWhite 1.6s ease-in-out infinite; }
  #tastiera-ipad g[id^="tastoNero"].blink { animation: ipadKeyBlinkBlack 1.6s ease-in-out infinite; }

  /* feedback tap */
  #tastiera-ipad g.active{ filter:brightness(1.06); transform:translateY(-2px); transition:transform .12s ease; }
}
@media (min-width:768px) and (max-width:1189.98px){
  #ipad-hero{ margin-top:0 !important; }
}
/* Site Settings → CSS (in fondo) */
@media (hover: hover) and (pointer: fine){
  #orient-lock{ display:none !important; }
}
/* ===========================
   HOME — HERO iPad (portrait) CLEAN PACK
   - Nessun cambio di impaginazione: solo spacing/size “a manopole”
   - Valido 768–1366 px, solo portrait
   =========================== */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){

  /* ── MANOPOLE (tocca solo questi numeri) ───────────────────── */
  #ipad-hero{
    --tp-extra-top: 250px;            /* ↓ distanza testo dall’header (consigliati 150) */
    --tp-text-max: clamp(520px, 56vw, 780px);  /* larghezza massima blocco testo */
    --tp-rail: min(1200px, 96vw);     /* larghezza tastiera (più grande = numero più alto) */
    --tp-cta-gap: 6px;                /* distanza tastiera → CTA */
  }

  /* ── STRUTTURA (non cambia il layout, solo spazi) ──────────── */
  #ipad-hero .hero-inner{
    /* spazio sotto l’header fisso del sito + extra regolabile */
    padding-top: calc(var(--header-h, 80px) + var(--tp-extra-top)) !important;
    padding-left: clamp(12px, 3vw, 24px) !important;
    padding-right: clamp(12px, 3vw, 24px) !important;
    row-gap: clamp(8px, 2vw, 16px) !important;
  }

  /* ── TESTO ─────────────────────────────────────────────────── */
  #post-message-ipad{
    max-width: var(--tp-text-max);
    margin-left: auto; margin-right: auto;
    text-align: center;
    transform: none !important;      /* annulla vecchi shift */
    opacity: 1 !important; visibility: visible !important;
  }

  /* ── TASTIERA (più grande) ─────────────────────────────────── */
  #ipad-hero .kbd-box{
    width: var(--tp-rail); max-width: 120%;
    margin: 0 auto;
  }
  #tastiera-ipad{
    width: 120%; height: auto; display:block;
    transform: none !important;      /* annulla vecchi translateY */
    margin-top: 8px !important;
  }

  /* ── HINT + CTA vicini ─────────────────────────────────────── */
  #ipad-hero .kb-under{ margin-top: 6px !important; }
  #ctaBtn-ipad{
    display:block;
    width: min(520px, 92vw);
    margin: var(--tp-cta-gap) auto 0 !important;  /* avvicina il bottone */
  }

  /* ── SICUREZZE (niente clipping, ordine livelli) ───────────── */
  #ipad-hero, #ipad-hero *{ overflow: visible !important; }
  #post-message-ipad, #ctaBtn-ipad{ position:relative; z-index:2; }
  #tastiera-ipad{ position:relative; z-index:1; }
}

/* (opzionale) micro-guard: non mostrare mai l’overlay su dispositivi con mouse */
@media (hover: hover) and (pointer: fine){
  #orient-lock{ display:none !important; }
}
/* ========== UNIVERSAL TOP-SPACE (desktop + tablet) ========== */
/* Fallback header height (se manca JS che aggiorna --mmf-hdr-auto) */
:root{ --header-h: 80px; }
/* Usa altezza header misurata se c'è, altrimenti fallback */
:root{ --hdr: var(--mmf-hdr-auto, var(--header-h)); }

/* Applica a entrambe le hero principali */
.home #hero-layout,                 /* desktop hero */
.home #ipad-hero .hero-inner{       /* tablet hero contenuto */
  /* clamp(min, ideal, max):
     min  = header + 24px (sempre almeno un po’ di respiro)
     ideal= header + 10vh/svh (scala con altezza schermo)
     max  = header + 180px (non diventare mai esagerato) */
  padding-top: clamp(
    calc(var(--hdr) + 24px),
    calc(var(--hdr) + 10vh),
    calc(var(--hdr) + 180px)
  ) !important;
}
/* Usa svh dove disponibile (fix iOS) */
@supports (height: 100svh){
  .home #hero-layout,
  .home #ipad-hero .hero-inner{
    padding-top: clamp(
      calc(var(--hdr) + 24px),
      calc(var(--hdr) + 10svh),
      calc(var(--hdr) + 180px)
    ) !important;
  }
}

/* ========== TABLET PORTRAIT — due manopole soft ========== */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  /* Tastiera più grande (regola solo questo numero se vuoi ancora più grande) */
  #ipad-hero .kbd-box{ width: clamp(760px, 96vw, 1120px); margin: 0 auto; }
  #tastiera-ipad{ width: 100%; height: auto; display:block; transform: none !important; }

  /* CTA più vicina alla tastiera */
  #ipad-hero .kb-under{ margin-top: 6px !important; }
  #ctaBtn-ipad{ margin-top: clamp(2px, 1vh, 10px) !important; }
}

/* ========== QUALITY-OF-LIFE ========== */
/* Gli anchor scrollano tenendo conto dell’header */
:root{ scroll-padding-top: calc(var(--hdr) + 16px); }

/* Titoli più leggibili su righe corte */
#post-message-ipad .q{ text-wrap: balance; }
/* Lock scroll SOLO quando #orient-lock è visibile */
html.orientation-locked:has(#orient-lock:not([hidden])){ overflow: hidden; }
html.orientation-locked:has(#orient-lock:not([hidden])) body{ touch-action: none; }

/* Safety: quando l'overlay è nascosto, assicurati che lo scroll sia attivo */
#orient-lock[hidden] + * {}
html:not(.orientation-locked){ overflow: auto; }  /* non tocca il lock quando serve */
/* ========== HERO UNIVERSAL TOP SPACE (home: desktop + tablet) ========== */
/* Fallback: altezza header se lo script non aggiorna --mmf-hdr-auto */
:root{ --header-h: 80px; }
/* Preferisci l'altezza misurata dallo script, altrimenti fallback */
:root{ --hdr: var(--mmf-hdr-auto, var(--header-h)); }

/* Applica il padding-top "elastico" alla Hero desktop e al wrapper della Hero iPad */
.home #hero-layout,
.home #ipad-hero .hero-inner{
  /* min = header+24; ideal = header+10svh; max = header+180 */
  padding-top: clamp(
    calc(var(--hdr) + 24px),
    calc(var(--hdr) + 10svh),
    calc(var(--hdr) + 180px)
  ) !important;
}

/* Gli anchor tengono conto dell'header ovunque */
:root{ scroll-padding-top: calc(var(--hdr) + 16px); }

/* ========== TABLET PORTRAIT — tastiera più grande + CTA vicina ========== */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  /* Tastiera ben grande ma contenuta nei margini */
  #ipad-hero .kbd-box{ width: clamp(860px, 98vw, 1160px); margin: 0 auto; }
  #tastiera-ipad{ width: 100%; height: auto; display:block; transform: none !important; }

  /* CTA più vicina alla tastiera */
  #ipad-hero .kb-under{ margin-top: 6px !important; }
  #ctaBtn-ipad{ margin-top: clamp(2px, 1vh, 10px) !important; }
}

/* ========== ORIENTATION OVERLAY — niente “scroll bloccato” quando è nascosto ========== */
html.orientation-locked:has(#orient-lock:not([hidden])){ overflow: hidden; }
html.orientation-locked:has(#orient-lock:not([hidden])) body{ touch-action: none; }
/* Kill-switch desktop/mouse */
@media (hover: hover) and (pointer: fine){ #orient-lock{ display:none !important; } }
/* UNIVERSAL TOP-SPACE: più margine “automatico” */
.home #hero-layout,
.home #ipad-hero .hero-inner{
  /* min = header+32, ideal = header+12svh, max = header+220 */
  padding-top: clamp(
    calc(var(--hdr) + 32px),
    calc(var(--hdr) + 12svh),
    calc(var(--hdr) + 220px)
  ) !important;
}

/* (Opzionale) Extra boost sui laptop “bassi” */
@media (max-height: 820px){
  .home #hero-layout,
  .home #ipad-hero .hero-inner{
    padding-top: clamp(
      calc(var(--hdr) + 36px),
      calc(var(--hdr) + 14svh),
      calc(var(--hdr) + 240px)
    ) !important;
  }
}
/* Utility visibilità consistenti in tutto il sito */
.resp-only{ display:none !important; }                 /* base: nascosti */
@media (max-width:767.98px){ .only-mobile.resp-only{ display:block !important; } }
@media (min-width:768px) and (max-width:1189.98px){ .only-tablet.resp-only{ display:block !important; } }
@media (min-width:1190px){ .only-desktop.resp-only{ display:block !important; } }

/* Variante inline-friendly per elementi inline */
@media (max-width:767.98px){ .only-mobile.inline{ display:inline !important; } }
@media (min-width:768px) and (max-width:1189.98px){ .only-tablet.inline{ display:inline !important; } }
@media (min-width:1190px){ .only-desktop.inline{ display:inline !important; } }

/* ==== HERO TOP-SPACE — SAFARI SAFE ==== */
:root{
  /* altezza di base dell’header se la misura live non è pronta */
  --header-h: 80px;
  /* misura live (0 se ancora non settata) */
  --hdr-auto: var(--mmf-hdr-auto, 0px);
  /* usa la maggiore fra misura live e fallback → “sempre abbastanza” */
  --hdr-safe: max(var(--hdr-auto), var(--header-h));
}

/* Home: HERO desktop + HERO iPad usano SEMPRE hdr-safe */
.home #hero-layout,
.home #ipad-hero .hero-inner{
  margin-top: 0 !important;
  transform: none !important;
  /* min = header+64 | ideal = header+14vh | max = header+260 */
  padding-top: clamp(
    calc(var(--hdr-safe) + 64px),
    calc(var(--hdr-safe) + 18vh),
    calc(var(--hdr-safe) + 260px)
  ) !important;
}
/* Preferisci unità stabili dove disponibili (iOS) */
@supports (height: 100svh){
  .home #hero-layout,
  .home #ipad-hero .hero-inner{
    padding-top: clamp(
      calc(var(--hdr-safe) + 64px),
      calc(var(--hdr-safe) + 18svh),
      calc(var(--hdr-safe) + 260px)
    ) !important;
  }
}
@supports (height: 100dvh){
  .home #hero-layout,
  .home #ipad-hero .hero-inner{
    padding-top: clamp(
      calc(var(--hdr-safe) + 64px),
      calc(var(--hdr-safe) + 18dvh),
      calc(var(--hdr-safe) + 260px)
    ) !important;
  }
}

/* Micro-consistenze */
.site-header img,
.elementor-location-header img{ display:block; height:auto; max-width:100%; }
#tastiera-ipad, #tastiera-svg{ transform:none !important; } /* niente vecchi translateY */

/* ===== Safari desktop only tweaks ===== */
/* (target: WebKit Safari su desktop/mouse; non tocca Chrome/Firefox) */
@media (hover:hover) and (pointer:fine){
  @supports (font: -apple-system-body){
    :root{
      /* MANOPOLE */
      --safari-logo-dx: -247px;      /* più negativo = più a sinistra */
      --safari-hero-boost: 54px;    /* spazio extra sopra la HERO */
    }

    /* 1) Logo header: nudge solo Safari (preserva il tuo nudge globale) */
    .elementor-location-header .custom-logo-link img,
    .elementor-location-header .site-logo img,
    .elementor-location-header .elementor-widget-theme-site-logo img,
    .site-header .custom-logo-link img,
    .site-header .site-logo img,
    .site-header .elementor-widget-theme-site-logo img{
      transform: translate(
        calc(var(--header-logo-shift-desktop, 0px) + var(--safari-logo-dx)),
        var(--header-logo-nudge-desktop, 0px)
      ) !important;
    }

    /* 2) HERO (home): più aria sopra testo+tastiera solo in Safari */
    .home #hero-layout,
    .home #ipad-hero .hero-inner{
      padding-top: calc(
        clamp(
          calc( max(var(--mmf-hdr-auto, 0px), var(--header-h, 80px)) + 96px ),
          calc( max(var(--mmf-hdr-auto, 0px), var(--header-h, 80px)) + 16svh ),
          calc( max(var(--mmf-hdr-auto, 0px), var(--header-h, 80px)) + 280px )
        ) + var(--safari-hero-boost)
      ) !important;
    }
  }
}
/* ===== HOME — Anti-taglio CTA + Tastiera allineata (safe) ===== */

/* 1) Spazio di sicurezza in fondo alla HERO (evita che la CTA venga tagliata) */
.home #ipad-hero .hero-inner{
  --cta-bottom-reserve: clamp(56px, 8vh, 140px);   /* ↑ aumenta se serve più spazio */
  padding-bottom: var(--cta-bottom-reserve) !important;
}
.home #hero-layout{
  --cta-bottom-reserve-desktop: clamp(56px, 7vh, 120px);
  padding-bottom: var(--cta-bottom-reserve-desktop) !important;
}

/* Niente clipping */
.home #ipad-hero, .home #hero-layout{ overflow: visible; }
.home #ipad-hero * , .home #hero-layout *{ overflow: visible; }

/* 2) Tastiera desktop “appoggiata” al bordo destro della colonna (no flex) */
:root{
  --kbd-w-desktop: 900px;   /* larghezza massima tastiera in desktop (aumenta per ingrandirla) */
  --kbd-nudge-right: 0px;   /* micro-spostamento orizzontale: + a destra, − a sinistra */
}

/* Lasciamo lavorare la griglia, solo overflow visibile */
.home #hero-layout .col-right{ overflow: visible !important; }

/* SVG tastiera: blocco, grande ma non oltre la colonna, allineato a destra */
.home #hero-layout #tastiera-svg{
  display: block;
  width: min(100%, var(--kbd-w-desktop));
  height: auto;
  margin-left: auto;   /* → appoggia al bordo destro */
  margin-right: 0;
  transform: none !important;  /* rimuove vecchi translate “appesi” */
  position: relative;
  right: 0;
}

/* Micro-nudge opzionale (per allineamento al pixel) */
@supports (transform: translateX(1px)){
  .home #hero-layout #tastiera-svg{
    transform: translateX(var(--kbd-nudge-right)) !important; /* es. 4px o -6px */
  }
}
/* ↓ Desktop (HERO #hero-layout): abbassa la tastiera di 8px */
.home #hero-layout #tastiera-svg{ margin-top: 38px !important; }

/* ↓ Tablet portrait (HERO iPad): se vuoi abbassarla anche lì */
@media (min-width:768px) and (max-width:1366px) and (orientation:portrait){
  #tastiera-ipad{ margin-top: 38px !important; }
}/* End custom CSS */