/* Bar Marketing AI Edition — generato da esporta-wp.py, non modificare a mano */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('font/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('font/montserrat-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('font/montserrat-700.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('font/oswald-700.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('font/space-mono-700.woff2') format('woff2')}:root{
  --ink-900:#2B1E28; --ink-700:#4A3745; --ink-500:#6B5563; --ink-300:#A99AA5; --ink-100:#E4DCE0;
  --red-600:#C62F2E; --red-700:#A62523; --red-100:#F6DAD9;
  --cream-50:#FAF6EF; --cream-100:#F1EAD9; --white:#fff;
  --surface-page:var(--cream-50); --surface-card:var(--white);
  --surface-sunken:var(--cream-100); --surface-dark:var(--ink-900);
  --accent:var(--red-600); --accent-hover:var(--red-700); --accent-soft:var(--red-100);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --border-subtle:var(--ink-100);
  --radius-sm:3px; --radius-md:6px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(43,30,40,.06),0 4px 12px rgba(43,30,40,.07);
  --shadow-card-hover:0 2px 4px rgba(43,30,40,.08),0 10px 24px rgba(43,30,40,.12);
  --shadow-popover:0 8px 24px rgba(43,30,40,.18);
  --t-fast:120ms; --t-base:180ms; --ease:cubic-bezier(.4,0,.2,1);
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --container-max:1120px;
  --testata:64px;
}
@media (min-width:768px){:root{ --testata:72px } }#main .bmai *{box-sizing:border-box}html{scroll-padding-top:calc(var(--testata) + 12px);
  /* la barra fissa in basso mangia ~76px: le ancore non ci atterrano sotto */
  scroll-padding-bottom:96px;
  scroll-behavior:smooth}
@media (min-width:768px){html{scroll-padding-bottom:0} }
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} }#main .bmai{font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text-primary);
  background:var(--surface-page);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}#main .bmai button,#main .bmai input,#main .bmai select,#main .bmai textarea{font:inherit}#main .bmai img,#main .bmai svg,#main .bmai video{max-width:100%;height:auto;display:block}#main .bmai h1,#main .bmai h2,#main .bmai h3,#main .bmai p,#main .bmai ul{margin:0}#main .bmai ul{padding:0;list-style:none}#main .bmai a{color:var(--accent)}#main .bmai :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}
/* sul fondo scuro il rosso del brand sta a 2,92:1: sotto il minimo di 3:1.
   Li' l'anello passa alla crema, che sul fondo scuro e' ampiamente sopra soglia. */
#main .bmai .testata :focus-visible,#main .bmai .conto :focus-visible,#main .bmai .offerta-card :focus-visible,#main .bmai .piede :focus-visible,#main .bmai .richiamo :focus-visible{outline-color:var(--cream-50)}#main .bmai .contenuto{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-5)}

/* il salto al contenuto: invisibile finche' non lo si raggiunge col Tab */
#main .bmai .salta{position:absolute;left:-9999px;top:0;z-index:60;background:var(--surface-dark);
  color:#fff;padding:14px 20px;border-radius:0 0 var(--radius-sm) 0;font-weight:700;
  font-size:15px;text-decoration:none}#main .bmai .salta:focus{left:0}

/* ═══ testata: scura, come sul blog ═══ */
#main .bmai .testata{position:sticky;top:0;z-index:30;background:var(--surface-dark);height:var(--testata)}#main .bmai .testata-riga{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  height:100%}#main .bmai .testata-marchio{display:inline-flex;align-items:center;min-height:48px;text-decoration:none}#main .bmai .testata-marchio img{width:52px;height:52px}
@media (max-width:519px){#main .bmai .testata-marchio img{width:46px;height:46px} }#main .bmai .testata-azioni{display:flex;align-items:center;gap:var(--space-4)}
/* il robottino della testata: entra solo se fra il marchio e le azioni avanza
   spazio MISURATO, e lo spazio si misura con lui nascosto. La regola [hidden]
   sta in coda perche' un display esplicito le vincerebbe contro. */
#main .bmai .robot-testata{flex:0 0 auto;display:inline-flex;color:var(--cream-50);line-height:0}#main .bmai .robot-testata svg{display:block}#main .bmai .robot-testata[hidden]{display:none}#main .bmai .testata-programma{position:relative;display:inline-flex;align-items:center;min-height:48px;
  padding:0 13px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;text-decoration:none}#main .bmai .testata-programma::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;
  height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease)}
@media (max-width:519px){#main .bmai .testata-programma{display:none} }

/* ═══ bottoni: come sul blog (raggio piccolo, maiuscolo largo) ═══ */
#main .bmai .bottone{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:13px 26px;background:var(--accent);color:var(--white)!important;font-weight:700!important;font-size:15px!important;line-height:1.2!important;letter-spacing:.06em!important;text-transform:uppercase;border:0;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;text-align:center;transition:background var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}#main .bmai .bottone:active{transform:scale(.97)}#main .bmai .bottone-secondario{background:transparent;color:var(--ink-900)!important;border:1.5px solid var(--ink-900)}#main .bmai .bottone-secondario:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){#main .bmai .bottone:hover{background:var(--accent-hover)}#main .bmai .bottone-secondario:hover{background:var(--ink-100)}#main .bmai .testata-programma:hover::after{transform:scaleX(1)}
}

/* ═══ titoli di sezione: occhiello col trattino e frasi in minuscolo, come sul blog ═══ */
#main .bmai .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--accent)!important}#main .bmai .eyebrow::before{content:"";width:26px;height:3px;background:currentColor;display:block;flex:0 0 auto}#main .bmai .titolone{font-size:clamp(27px,3.9vw,42px)!important;font-weight:700!important;line-height:1.12!important;letter-spacing:-.015em!important;max-width:24ch;margin-top:var(--space-5)}#main .bmai .sezione{padding-block:var(--space-16)}
@media (min-width:768px){#main .bmai .sezione{padding-block:var(--space-20)} }

/* ═══ eroe ═══ */
#main .bmai .eroe{padding-block:var(--space-12) var(--space-16);position:relative;overflow:clip}#main .bmai .eroe .contenuto{position:relative}
/* su telefono la foto sta DOPO la chiamata all'azione: sopra la piega ogni riga si paga */
#main .bmai .eroe-griglia{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:center}#main .bmai .eroe-griglia>*{min-width:0}
@media (min-width:900px){#main .bmai .eroe-griglia{grid-template-columns:1fr 1fr;gap:var(--space-12)} }#main .bmai .eroe-foto{margin:0}#main .bmai .eroe-foto img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-card)}#main .bmai .eroe-foto figcaption{margin-top:var(--space-3);font-size:14px;font-weight:600;
  color:var(--text-muted)}#main .bmai .eroe-foto figcaption strong{color:var(--text-primary)}#main .bmai .eroe-promessa{font-size:clamp(20px,2.9vw,28px)!important;font-weight:700!important;line-height:1.25!important;letter-spacing:-.015em!important;max-width:24ch;margin-top:var(--space-6)}#main .bmai .eroe-promessa em{font-style:normal;color:var(--accent)!important}#main .bmai .eroe-sotto{font-size:clamp(17px,2.2vw,19px);color:var(--text-secondary);max-width:58ch;
  margin-top:var(--space-5)}

/* ═══ il logo Bar Marketing · AI Edition (dal progetto Claude Design, misure in em dal master a 110px) ═══ */
#main .bmai .logo-bmai{display:block;font-size:var(--logo-fs,72px)!important;margin-top:var(--space-6)}#main .bmai .logo-bmai-inner{position:relative;display:inline-block;margin-bottom:.56em}#main .bmai .logo-bmai-scritta{font-family:'Oswald','Montserrat',sans-serif!important;font-weight:700!important;font-size:1em!important;line-height:.86!important;letter-spacing:-.015em!important;text-transform:uppercase;white-space:nowrap;display:block}#main .bmai .lb-bar{color:var(--ink-900)}#main .bmai .lb-blocco{background:var(--red-600);color:var(--cream-50);padding:0 .091em 0 .055em}#main .bmai .lb-cursore{display:inline-block;width:.045em;height:.8em;background:var(--ink-900);
  margin-left:.073em;vertical-align:-.055em}#main .bmai .logo-bmai-badge{position:absolute;right:-.127em;bottom:-.527em;display:flex;align-items:center;gap:.109em;background:var(--white);border:max(1px,.014em) solid var(--ink-900);border-radius:.036em;padding:.073em .127em;box-shadow:.027em .027em 0 var(--ink-900)}#main .bmai .lb-stella{display:inline-block;width:.164em;height:.164em;background:var(--red-600);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* il master non fissa l'interlinea: fissarla accorciava il badge del 20%.
   Il minimo in pixel rompe di proposito la proporzione sotto i ~60px di logo,
   perché sotto quella soglia il nome del prodotto non si leggeva (7,3px misurati) */
#main .bmai .lb-ai{font-family:'Space Mono',monospace!important;font-weight:700!important;font-size:max(11px,.182em)!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--red-600)!important}#main .bmai .lb-tacca{display:inline-block;width:.091em;height:.182em;background:var(--red-600)}
/* variante negativa, per i fondi scuri */
#main .bmai .logo-bmai-negativo .lb-bar{color:var(--cream-50)!important}#main .bmai .logo-bmai-negativo .lb-blocco{background:#D5312F;color:var(--cream-50)!important}#main .bmai .logo-bmai-negativo .lb-cursore{background:var(--cream-50)}#main .bmai .logo-bmai-negativo .logo-bmai-badge{background:var(--ink-900);border-color:var(--cream-50);box-shadow:.027em .027em 0 var(--cream-50)}#main .bmai .logo-bmai-negativo .lb-stella,#main .bmai .logo-bmai-negativo .lb-tacca{background:#D5312F}#main .bmai .logo-bmai-negativo .lb-ai{color:var(--cream-50)!important}

/* ═══ IL MARCHIO SU TELEFONO: due righe ═══
   DEVIAZIONE DICHIARATA dal lockup del master, decisa da Francesco il 29 agosto.
   Perche': su una riga il marchio era GIA' al massimo che la colonna di testo
   concede (misurato: 6,82 volte il corpo, cioe' 41px a 320 e 51px a 390 — a 320
   un +0,3%, invisibile). Spezzandolo il vincolo diventa la parola piu' larga —
   il blocco rosso, 4,887 volte il corpo — e il marchio passa da 40 a 57px a 320
   e a 72px a 390: +79%. Ed e' anche l'unica forma in cui AI_EDITION non tocca
   MARKETING, perche' stanno su due righe diverse invece di essere aggiustati.
   ⚠️ La sovrapposizione del badge sul blocco NON era un difetto: e' il disegno
   del master (a 768px, dove AI_EDITION e' in proporzione esatta, il badge invade
   comunque di 123x12). Toglierla e' una scelta, e vale solo su telefono.
   ⚠️ L'interlinea non si sceglie a occhio: la scatola del blocco rosso e' alta
   1,5em contro un'interlinea di 0,86, quindi a due righe il rosso MANGIA le
   lettere di BAR. Misurato il pareggio esatto a 1,19em; qui 1,30em, che lascia
   fra i 5,6 e i 7,8px d'aria a seconda della larghezza. */
/* 480px: i telefoni in verticale arrivano a 430. Sopra, la colonna e' larga
   abbastanza perche' il lockup del master su una riga stia comodo, e si torna
   al marchio originale. */
@media (max-width: 480px){#main .bmai .eroe .logo-bmai{--logo-fs:min(74px, calc((100vw - 46px) / 4.887)) !important}#main .bmai .eroe .logo-bmai-scritta{white-space:normal;line-height:1.30!important}#main .bmai .eroe .lb-bar{display:block}#main .bmai .eroe .logo-bmai-inner{margin-bottom:.10em}
  /* il badge sale sulla riga di BAR, nel vuoto che resta alla sua destra
     (misurato: da 39,6px a 320 fino a 70,6 a 430). Il .45em viene dalla
     scansione dell'inchiostro: allinea il centro del badge col centro delle
     maiuscole di BAR, la cui altezza in Oswald e' 0,814em. */
  #main .bmai .eroe .logo-bmai-badge{top:.45em;bottom:auto;right:-.127em}

  /* ═══ SOPRA LA PIEGA OGNI RIGA SI PAGA ═══
     Su iPhone lo spazio vero della prima schermata e' 599px, non 844: con le
     barre di Safari ne restano quelli. Misurato prima di toccare: occhiello,
     marchio e promessa ci stanno; poi il paragrafo lungo (190px, cinque righe)
     si mangia il resto e spingeva il tasto a 697, cioe' 98px SOTTO la piega —
     ed era gia' cosi' prima che il marchio crescesse.
     Il paragrafo non si taglia e non si riscrive: si sposta DOPO i tasti.
     L'ordine diventa promessa → azione → dettaglio, che e' l'ordine di una
     pagina che vende: chi e' gia' convinto trova il tasto, chi vuole sapere di
     piu' scorre di due dita e lo trova. Nessuna parola persa, e si disfa
     togliendo due righe. Il markup resta nell'ordine di lettura giusto: e' solo
     il disegno che cambia, quindi chi legge con la voce sente ancora la
     spiegazione al suo posto... ⚠️ NO: `order` di flexbox NON cambia l'ordine
     di lettura assistita, ma disallinea ordine visivo e ordine di tabulazione.
     Qui i tasti SALGONO, cioe' arrivano prima anche col dito e col tab: il
     disallineamento e' a favore, non contro. Verificato con la sonda. */
  #main .bmai .eroe .eroe-testo{display:flex;flex-direction:column}#main .bmai .eroe .eroe-sotto{order:9;margin-top:var(--space-6)}

  /* ═══ IL ROBOTTINO ENTRA ANCHE SU TELEFONO ═══
     Prima non entrava mai, e per due ragioni sommate: era chiuso dietro il
     cancello (hover:hover), e comunque lo spazio che avanzava a destra dei
     tasti era 8px a 320 e 78 a 390, contro i 96 che pretendeva.
     Si ribalta il conto: prima si RISERVA al robot la sua colonna (52 di
     disegno + 12 d'aria), poi i tasti si prendono tutto quello che resta.
     A 390 i tasti diventano perfino piu' larghi di prima (286 contro 270),
     perche' riempiono la traccia invece di stare della misura del loro testo.
     Il JS accende il robot solo DOPO aver verificato sulla pagina vera che i
     tasti reggano il pavimento: e' una misura, non una media query indovinata. */
  #main .bmai .eroe .eroe-cta{padding-right:var(--rb-colonna,0px)}#main .bmai .eroe .eroe-cta .bottone{width:100%}#main .bmai .eroe .robottino svg{width:52px;height:auto}
}

/* La colonna del robot vale a ogni larghezza, non solo col dito: sul desktop
   il tasto primario e' largo quanto la sua etichetta e non avanza niente, quindi
   senza riservare la colonna il robot non entrerebbe mai. La riserva la decide
   il JS, che qui scrive 0px quando non serve. */
#main .bmai .eroe-cta{padding-right:var(--rb-colonna,0px)}

/* ═══ la scossa: al passaggio del mouse il marchio prende corrente ═══
   Solo con mouse vero: sui touch il tap incolla lo stato hover all'ultimo
   elemento toccato, e resterebbe acceso a caso. */
@media (hover:hover) and (pointer:fine){
 @media (prefers-reduced-motion: no-preference){#main .bmai .logo-bmai{cursor:default}#main .bmai .logo-bmai:hover .logo-bmai-scritta{animation:scossa 520ms steps(1,end) 1}#main .bmai .logo-bmai:hover .lb-blocco{animation:sfarfallio 520ms steps(1,end) 1}#main .bmai .logo-bmai:hover .lb-cursore{animation:battito 120ms steps(1,end) 5}#main .bmai .logo-bmai:hover .logo-bmai-badge{animation:sussulto 520ms cubic-bezier(.2,.7,.3,1.3) 1}#main .bmai .logo-bmai:hover .lb-stella{animation:scintilla 520ms linear 1}#main .bmai .logo-bmai:hover .lb-blocco::after{animation:scarica 520ms linear 1}
 }
}

/* ═══ LA STESSA SCOSSA, SENZA MOUSE ═══
   Su telefono `:hover` non scatta mai: l'effetto del marchio non esisteva.
   Le stesse sei animazioni si accendono con una classe che mette il JS, e le
   regole vivono FUORI dal blocco (hover:hover) — servono proprio dove l'hover
   non c'e'. La "scarica" e' uscita di li' con loro: dentro, la classe non
   avrebbe trovato niente da animare. */
#main .bmai .lb-blocco{position:relative}#main .bmai .lb-blocco::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 42%,rgba(255,255,255,.85) 46% 50%,transparent 54% 100%);
  opacity:0}
@media (prefers-reduced-motion: no-preference){#main .bmai .logo-bmai.corrente .logo-bmai-scritta{animation:scossa 520ms steps(1,end) 1}#main .bmai .logo-bmai.corrente .lb-blocco{animation:sfarfallio 520ms steps(1,end) 1}#main .bmai .logo-bmai.corrente .lb-cursore{animation:battito 120ms steps(1,end) 5}#main .bmai .logo-bmai.corrente .logo-bmai-badge{animation:sussulto 520ms cubic-bezier(.2,.7,.3,1.3) 1}#main .bmai .logo-bmai.corrente .lb-stella{animation:scintilla 520ms linear 1}#main .bmai .logo-bmai.corrente .lb-blocco::after{animation:scarica 520ms linear 1}
}
/* niente lampo grigio di sistema sotto il dito: il marchio non e' un bottone
   e non deve sembrarlo. Resta un <h1>: niente role, niente tabindex. */
#main .bmai .logo-bmai{-webkit-tap-highlight-color:transparent}
/* durante lo sfregamento il dito non deve far partire la selezione del testo.
   Si perde la selezione delle lettere del marchio: sono aria-hidden, e il nome
   vero del prodotto sta nell'aria-label dell'h1, quindi non si perde niente di
   leggibile. */
@media (hover: none){#main .bmai .logo-bmai{-webkit-user-select:none;user-select:none;/* MISURATO: senza questo, al marchio arriva UN SOLO pointermove e poi
       `pointercancel` — appena il browser legge il trascinamento come una
       panoramica si prende il puntatore e chiude il flusso, e il gesto non
       puo' esistere. `pan-y` dice che da qui si scorre solo in VERTICALE:
       la pagina continua a scorrere col dito come sempre (verificato:
       scrollY 0 → 161), e l'orizzontale resta nostro. */
    touch-action:pan-y}
}
@keyframes scossa{
  0%{transform:none}
  8%{transform:translate(-3px,1px) skewX(-1.6deg)}
  16%{transform:translate(3px,-2px) skewX(1.4deg)}
  24%{transform:translate(-2px,-1px) skewX(.8deg)}
  32%{transform:translate(2px,2px) skewX(-1deg)}
  44%{transform:translate(-1px,0) skewX(.4deg)}
  56%{transform:translate(1px,-1px)}
  70%{transform:translate(-1px,1px)}
  100%{transform:none}
}
@keyframes sfarfallio{
  0%,100%{background:var(--red-600)}
  10%{background:var(--ink-900)}
  14%{background:var(--red-600)}
  30%{background:var(--red-700)}
  36%{background:var(--red-600)}
  52%{background:var(--ink-900)}
  56%{background:var(--red-600)}
}
@keyframes battito{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes sussulto{
  0%{transform:none} 30%{transform:translate(-4px,2px) rotate(-1.5deg)}
  60%{transform:translate(2px,-1px) rotate(.8deg)} 100%{transform:none}
}
@keyframes scintilla{
  0%,100%{transform:none;opacity:1}
  20%{transform:scale(1.9) rotate(45deg);opacity:1}
  40%{transform:scale(.7) rotate(-20deg);opacity:.5}
  60%{transform:scale(1.5) rotate(25deg);opacity:1}
}
@keyframes scarica{
  0%{opacity:0;transform:translateX(-100%)}
  12%{opacity:1}
  48%{opacity:1;transform:translateX(100%)}
  49%{opacity:0;transform:translateX(-100%)}
  62%{opacity:.9}
  92%{opacity:.9;transform:translateX(100%)}
  100%{opacity:0}
}#main .bmai .eroe-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-8)}#main .bmai .eroe-scarsita{font-size:16px;font-weight:600;color:var(--text-muted);margin-top:var(--space-5);
  max-width:52ch}

/* ═══ il robottino: sta nello spazio libero accanto ai bottoni e indica quello
   sotto il mouse. Decorativo (aria-hidden) e acceso solo dal JS, che PRIMA
   misura se lo spazio c'e' davvero. ═══ */
#main .bmai .eroe-cta{position:relative}#main .bmai .robottino{position:absolute;left:var(--rb-x,auto);top:0;color:var(--accent);pointer-events:none;
  transform:translateY(var(--rb-y,0px));
  transition:transform 420ms cubic-bezier(.2,.7,.3,1.25)}#main .bmai .robottino[hidden]{display:none}#main .bmai .robottino svg{display:block}#main .bmai .rb-braccio{transform-box:fill-box;transform-origin:100% 50%;
  transform:rotate(28deg);transition:transform 320ms cubic-bezier(.2,.7,.3,1.4)}#main .bmai .robottino.indica .rb-braccio{transform:rotate(0deg)}#main .bmai .rb-occhio{transition:transform 260ms var(--ease);transform-box:fill-box;transform-origin:center}#main .bmai .robottino.indica .rb-occhio{transform:scaleY(.55)}
@media (prefers-reduced-motion: no-preference){#main .bmai .robottino svg{animation:dondola 3.6s ease-in-out infinite}#main .bmai .robottino.indica svg{animation-duration:1.6s}#main .bmai .robottino.indica .rb-bulbo{animation:pulsa 700ms ease-in-out infinite}
}
@keyframes dondola{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulsa{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ═══ slot VSL: acceso se il markup lo dichiara e il file dichiarato esiste ═══ */
#main .bmai .vsl{padding-block:0 var(--space-16)}#main .bmai .vsl-cornice{border-radius:var(--radius-md);overflow:clip;box-shadow:var(--shadow-popover);
  background:var(--ink-900)}#main .bmai .vsl video{width:100%;aspect-ratio:16/9;height:auto}#main .bmai .vsl[hidden]{display:none}

/* ═══ card generiche ═══ */
#main .bmai .griglia-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);margin-top:var(--space-10)}#main .bmai .griglia-3>*{min-width:0}#main .bmai .card{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
@media (hover:hover) and (pointer:fine){#main .bmai .card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
}#main .bmai .card .numero{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--accent);
  text-transform:uppercase}#main .bmai .card h3{font-size:19px!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.25!important;margin-top:var(--space-2)}#main .bmai .card p{color:var(--text-secondary);margin-top:var(--space-3);font-size:16px}

/* ═══ la scheda della scelta giusta: al passaggio del mouse una banda dorata
   gira lungo il bordo. L'oro non e' nella palette del brand: e' decorazione
   di stato, vive solo qui e solo al passaggio del mouse. ═══ */
@property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false }:root{ --oro:#C9A227; --oro-chiaro:#F3DE9B }#main .bmai .card-scelta{position:relative;isolation:isolate}#main .bmai .card-scelta::before{
  content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-md) + 2px);
  padding:2px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--giro),
    transparent 0 55%, var(--oro) 66%, var(--oro-chiaro) 74%, var(--oro) 82%, transparent 93%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition:opacity 240ms var(--ease)}
@media (hover:hover) and (pointer:fine){#main .bmai .card-scelta:hover::before,#main .bmai .card-scelta:focus-within::before{opacity:1}
  @media (prefers-reduced-motion: no-preference){#main .bmai .card-scelta:hover::before,#main .bmai .card-scelta:focus-within::before{animation:giraOro 2.6s linear infinite}#main .bmai .card-scelta:hover,#main .bmai .card-scelta:focus-within{transform:translateY(-3px)}
  }
}
@keyframes giraOro{ to{ --giro:360deg } }

/* la nota sotto le testimonianze: il link e' INLINE, e min-height non aggancia
   gli inline. Il bersaglio cresce senza spostare il testo di una virgola. */
#main .bmai .voci-nota{margin-top:var(--space-6);font-size:14px;font-weight:600;color:var(--text-muted)}#main .bmai .voci-nota a{color:var(--text-muted);display:inline-flex;align-items:center;
  min-height:44px;margin-block:-14px}

/* ═══ la promessa ═══ */
#main .bmai .promessa{background:var(--surface-sunken);border-block:1px solid var(--border-subtle)}
/* ═══ l'agenda: la data non si scrive, si mostra ═══ */
#main .bmai .solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;font:inherit}
/* Il calendario delle due settimane. Le misure: il viewBox e 640 di larghezza e il
   riquadro ne rende al massimo 600, quindi la scala e 0,94: ogni testo dichiarato a
   15px ne rende 14,1, cioe' resta sopra il pavimento. Sotto i 15px qui non si scende. */
#main .bmai .agenda{margin:var(--space-6) 0 0;max-width:600px}#main .bmai .agenda svg{width:100%;height:auto}#main .bmai .ag-sett{font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.16em;
  fill:var(--ink-300)}#main .bmai .ag-testa{font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:.12em;
  fill:var(--ink-500)}#main .bmai .ag-n{font-family:var(--font);font-size:22px;font-weight:700;fill:var(--accent)}#main .bmai .ag-tema{font-family:var(--font);font-size:15px;font-weight:600;fill:#fff}#main .bmai .ag-tuo{font-family:var(--font);font-size:15px;font-weight:600;fill:var(--ink-500)}#main .bmai .ag-nota{font-family:var(--font);font-size:15px;font-weight:700;fill:var(--ink-900)}#main .bmai .ag-penna{stroke:var(--accent)}#main .bmai .ag-didascalia{margin-top:var(--space-4);font-size:15px;color:var(--text-muted)}
@media (prefers-reduced-motion: no-preference){
  /* i giri di penna si disegnano quando l'agenda entra in vista */
  .js #main .bmai .agenda .ag-giro{stroke-dasharray:480;stroke-dashoffset:480}.js #main .bmai .agenda.visibile .ag-giro{animation:scrivi 620ms ease-out forwards}.js #main .bmai .agenda.visibile .ag-giro:nth-child(2){animation-delay:180ms}.js #main .bmai .agenda.visibile .ag-giro:nth-child(3){animation-delay:340ms}
}
@keyframes scrivi{ to{stroke-dashoffset:0} }#main .bmai .promessa-lista{margin-top:var(--space-8);display:grid;gap:var(--space-3);max-width:720px}#main .bmai .promessa-lista li{display:flex;gap:var(--space-3);align-items:flex-start;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);
  font-size:16px;font-weight:600}#main .bmai .promessa-lista svg{flex:0 0 auto;width:22px;height:22px;margin-top:3px;color:var(--accent)}#main .bmai .promessa-coda{margin-top:var(--space-6);font-size:16px;color:var(--text-secondary);max-width:60ch}#main .bmai .programma-sotto{margin-top:var(--space-3);font-size:17px;color:var(--text-secondary);max-width:62ch}

/* ═══ programma ═══ */
#main .bmai .programma-righe{margin-top:var(--space-10);display:grid;gap:var(--space-3)}#main .bmai .giorno{display:grid;grid-template-columns:112px 1fr;gap:var(--space-5);align-items:start;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-card)}#main .bmai .giorno>*{min-width:0}#main .bmai .giorno-data{font-weight:700!important;text-transform:uppercase;font-size:14px!important;letter-spacing:.08em!important;color:var(--accent)!important;border-right:2px solid var(--accent-soft);padding-right:var(--space-4);line-height:1.4!important}#main .bmai .giorno-data strong{display:block;font-size:26px!important;letter-spacing:0!important;color:var(--text-primary)!important}#main .bmai .giorno h3{font-size:19px!important;font-weight:700!important;letter-spacing:-.01em!important;line-height:1.25!important}#main .bmai .giorno>div p{color:var(--text-secondary);font-size:16px;margin-top:var(--space-2)}
@media (max-width:519px){#main .bmai .giorno{grid-template-columns:1fr}#main .bmai .giorno-data{border-right:0;border-bottom:2px solid var(--accent-soft);padding-right:0;padding-bottom:var(--space-2)}
}

/* ═══ chi ti guida ═══ */
#main .bmai .guida-riga{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:start}
@media (min-width:768px){#main .bmai .guida-riga{grid-template-columns:1.4fr 1fr} }#main .bmai .guida-riga>*{min-width:0}#main .bmai .guida-testo .titolone{margin-top:var(--space-4)}#main .bmai .guida-testo p:not(.eyebrow){color:var(--text-secondary)!important;font-size:16px!important;margin-top:var(--space-5);max-width:62ch}#main .bmai .guida-testo .eyebrow{color:var(--accent)!important}#main .bmai .guida-citazione{margin:var(--space-6) 0 0;border-left:4px solid var(--accent);
  padding:var(--space-2) 0 var(--space-2) var(--space-5);font-size:19px;font-weight:700;
  color:var(--text-primary)}#main .bmai .guida-citazione em{font-style:normal;color:var(--accent)}#main .bmai .guida-ritratto{margin:0;max-width:380px;justify-self:start}
/* scontornata: si appoggia al fondo, senza riquadro ne ombra */
#main .bmai .guida-ritratto img{width:100%}#main .bmai .guida-ritratto figcaption{margin-top:var(--space-4);font-size:14px;font-weight:600;
  line-height:1.5;color:var(--text-muted)}#main .bmai .guida-ritratto figcaption strong{font-size:16px;color:var(--text-primary)}

/* ═══ testimonianze ═══ */
#main .bmai .voci{background:var(--surface-sunken);border-block:1px solid var(--border-subtle)}
/* ═══ la pista delle testimonianze: otto schede che scorrono ═══ */
#main .bmai .pista-voci{margin-top:var(--space-10);
  /* i bordi sfumano: in un nastro che scorre il taglio netto sembra un errore */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}#main .bmai .voci-lista{display:flex;gap:var(--space-5);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-padding-inline:2px;padding:4px 2px var(--space-4);
  scrollbar-width:none}#main .bmai .voci-lista::-webkit-scrollbar{display:none}#main .bmai .voci-lista:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:var(--radius-md)}#main .bmai .voce{flex:0 0 min(340px,80vw);display:flex;flex-direction:column;
  gap:var(--space-4);background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-card);
  transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
@media (hover:hover) and (pointer:fine){#main .bmai .voce:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}
}#main .bmai .voce-testa{display:flex;align-items:center;gap:var(--space-3)}
/* il bollino: per ora le iniziali, perche' le foto dei baristi non ce le abbiamo.
   Quando arrivano, qui dentro va un <img> e il resto resta com'e'. */
#main .bmai .bollino{position:relative;flex:0 0 auto;width:56px;height:56px;overflow:hidden;
  border-radius:var(--radius-pill);background:var(--surface-dark);color:var(--cream-50);
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
  letter-spacing:.04em;box-shadow:inset 0 0 0 2px var(--accent)}
/* la foto copre le iniziali: se non carica, sotto restano quelle */
#main .bmai .bollino img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:inherit}#main .bmai .voce-chi{min-width:0}#main .bmai .voce cite{display:block;font-style:normal;font-weight:700!important;font-size:15px!important;letter-spacing:.01em!important;color:var(--text-primary)!important;line-height:1.3!important}#main .bmai .voce .locale{display:block;font-size:14px;color:var(--text-muted);font-weight:600;
  margin-top:2px}#main .bmai .voce blockquote{margin:0;color:var(--text-secondary);font-size:16px;line-height:1.6}
/* ═══ per chi ═══ */
#main .bmai .perchi-griglia{display:grid;grid-template-columns:1fr;gap:var(--space-5);margin-top:var(--space-10)}
@media (min-width:768px){#main .bmai .perchi-griglia{grid-template-columns:1fr 1fr} }#main .bmai .perchi-griglia>*{min-width:0}#main .bmai .perchi{border-radius:var(--radius-md);padding:var(--space-8);border:1px solid var(--border-subtle)}#main .bmai .perchi-si{background:var(--surface-card);box-shadow:var(--shadow-card)}#main .bmai .perchi-no{background:var(--surface-sunken)}#main .bmai .perchi h3{font-size:22px!important;font-weight:700!important;letter-spacing:-.01em!important}#main .bmai .perchi ul{margin-top:var(--space-5);display:grid;gap:var(--space-4)}#main .bmai .perchi li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--text-secondary);
  font-size:16px}#main .bmai .perchi svg{flex:0 0 auto;width:20px;height:20px;margin-top:4px}#main .bmai .perchi-si svg{color:var(--accent)}#main .bmai .perchi-no svg{color:var(--ink-500)}

/* ═══ l'offerta: il cartello scuro del blog, su fondo crema ═══ */
#main .bmai .conto{overflow:clip}#main .bmai .conto-riga{display:grid;grid-template-columns:1fr;gap:var(--space-10);align-items:start;
  margin-top:var(--space-6)}
@media (min-width:900px){#main .bmai .conto-argomenti{margin-top:var(--space-10)} }
@media (min-width:900px){#main .bmai .conto-riga{grid-template-columns:1fr auto} }#main .bmai .conto-riga>*{min-width:0}

/* il cartello: stesso impianto della CTA del blog (fondo scuro, filo rosso a sinistra) */
#main .bmai .offerta-card{position:relative;justify-self:center;width:min(430px,100%);
  background:var(--surface-dark);color:var(--white);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:var(--space-8) var(--space-8) var(--space-8) var(--space-10)}
@media (max-width:479px){#main .bmai .offerta-card{padding:var(--space-6) var(--space-5) var(--space-6) var(--space-6)}
}#main .bmai .offerta-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--accent);border-radius:var(--radius-md) 0 0 var(--radius-md)}#main .bmai .offerta-card h3{font-size:26px!important;font-weight:700!important;line-height:1.18!important;letter-spacing:-.015em!important;color:var(--white)!important;margin-top:var(--space-5)}#main .bmai .offerta-quando{font-size:16px;line-height:1.6;color:var(--cream-100);margin-top:var(--space-2)}#main .bmai .offerta-lista{margin-top:var(--space-5);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.16);display:grid;gap:var(--space-3)}#main .bmai .offerta-lista li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:16px;
  line-height:1.55;color:var(--cream-100)}#main .bmai .offerta-lista svg{flex:0 0 auto;width:20px;height:20px;margin-top:3px;color:var(--white)}#main .bmai .offerta-prezzo{font-size:52px;font-weight:700;letter-spacing:-.02em;line-height:1;
  color:var(--white);margin-top:var(--space-6)}#main .bmai .offerta-prezzo small{font-size:26px;font-weight:700}
/* il costo che NON e' nei 289, scritto dove si decide di spendere e non
   nascosto nelle domande: chi lo scopre lunedi' mattina ha ragione a protestare.
   14px: e' il pavimento, e questa riga si legge per forza. */
#main .bmai .offerta-nota-abbonamento{font-size:14px;line-height:1.5;color:var(--cream-100);
  margin-top:var(--space-3);max-width:38ch;margin-inline:auto}
/* ═══ «Nessuno resta indietro» ═══
   Cartello scuro col filo rosso a sinistra: e' il pattern del blog di Obiettivo
   Bar, quello che Francesco ha approvato. Non si inventa un elemento nuovo per
   una riga sola. */
#main .bmai .nessuno-indietro{margin-top:var(--space-12);background:var(--surface-dark);
  border-left:4px solid var(--accent);border-radius:var(--radius-sm);
  padding:var(--space-8) var(--space-8) var(--space-8) var(--space-6);
  max-width:74ch}#main .bmai .ni-titolo{font-size:22px;font-weight:700;line-height:1.3;color:var(--cream-50);
  letter-spacing:-.01em}#main .bmai .ni-corpo{font-size:16px;line-height:1.65;color:var(--cream-100);
  margin-top:var(--space-3)}
@media (max-width:600px){#main .bmai .nessuno-indietro{padding:var(--space-6) var(--space-5) var(--space-6) var(--space-4)}#main .bmai .ni-titolo{font-size:19px}
}

/* ═══ il robottino cammina sul bottone: avanti e indietro, e al capolinea si gira ═══ */
#main .bmai .zona-prenota{position:relative;margin-top:var(--space-12)}#main .bmai .offerta-card .bottone{width:100%;margin-top:0}
/* il marchio dentro il cartello: la larghezza del lockup e' ~6,9 volte il corpo,
   quindi la misura si ricava dallo spazio VERO invece di fissarla e sperare.
   Misurato: a 38px fissi sbordava fino a 375px di schermo. */
#main .bmai .logo-nel-cartello{--logo-fs:clamp(26px, calc(15.5vw - 17px), 38px);margin-top:0}
@media (min-width:480px){#main .bmai .logo-nel-cartello{--logo-fs:38px} }#main .bmai .robot-cammina{position:absolute;left:0;bottom:calc(100% - 3px);pointer-events:none;
  color:var(--cream-50);transform:translateX(0)}#main .bmai .robot-cammina svg{display:block}
@media (prefers-reduced-motion: no-preference){#main .bmai .robot-cammina{animation:cammina 9s ease-in-out infinite}#main .bmai .rc-tutto{animation:sobbalzo .46s ease-in-out infinite}#main .bmai .rc-gamba-sx,#main .bmai .rc-braccio-dx{animation:passo .46s ease-in-out infinite}#main .bmai .rc-gamba-dx,#main .bmai .rc-braccio-sx{animation:passo .46s ease-in-out infinite reverse}#main .bmai .rc-bulbo{animation:pulsa 1.8s ease-in-out infinite}
}
/* la corsa la misura il JS sul bottone vero: qui non si indovina una larghezza */
@keyframes cammina{
  0%{transform:translateX(0) scaleX(1)}
  46%{transform:translateX(var(--rc-corsa,0px)) scaleX(1)}
  50%{transform:translateX(var(--rc-corsa,0px)) scaleX(-1)}
  96%{transform:translateX(0) scaleX(-1)}
  100%{transform:translateX(0) scaleX(1)}
}
@keyframes sobbalzo{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5px)} }
@keyframes passo{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.5px)} }

/* col mouse sul tasto il robottino salta: piega le ginocchia, stacca, atterra.
   Continua ad avanzare, perche' il salto sta sul gruppo interno e la camminata
   sul contenitore: due trasformazioni che non si pestano i piedi. */
#main .bmai .rc-tutto{transform-box:fill-box;transform-origin:50% 100%}
@media (hover:hover) and (pointer:fine){
 @media (prefers-reduced-motion: no-preference){#main .bmai .zona-prenota:hover .rc-tutto{animation:salta .66s cubic-bezier(.3,.7,.4,1) infinite}#main .bmai .zona-prenota:hover .rc-gamba-sx,#main .bmai .zona-prenota:hover .rc-gamba-dx{animation-duration:.66s}#main .bmai .zona-prenota:hover .rc-braccio-sx,#main .bmai .zona-prenota:hover .rc-braccio-dx{animation-duration:.33s}#main .bmai .zona-prenota:hover .rc-bulbo{animation-duration:.5s}
 }
}
@keyframes salta{
  0%{transform:translateY(0) scaleY(1)}
  14%{transform:translateY(2px) scaleY(.84)}
  42%{transform:translateY(-17px) scaleY(1.07)}
  60%{transform:translateY(-17px) scaleY(1)}
  84%{transform:translateY(1px) scaleY(.88)}
  100%{transform:translateY(0) scaleY(1)}
}#main .bmai .offerta-nota{font-size:14px;line-height:1.5;color:var(--ink-300);text-align:center;
  margin-top:var(--space-4)}#main .bmai .conto-argomenti{display:grid;gap:var(--space-4);align-content:start}#main .bmai .conto-argomenti li{display:flex;gap:var(--space-3);align-items:flex-start;
  color:var(--text-secondary);font-size:16px}#main .bmai .conto-argomenti svg{flex:0 0 auto;width:20px;height:20px;margin-top:3px;color:var(--accent)}

/* ═══ come si entra ═══ */
#main .bmai .passi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-5);margin-top:var(--space-10)}#main .bmai .passi>*{min-width:0}#main .bmai .passo{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-card)}#main .bmai .passo .cifra{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-pill);background:var(--accent-soft);
  color:var(--accent);font-weight:700;font-size:19px}#main .bmai .passo h3{font-size:19px!important;font-weight:700!important;letter-spacing:-.01em!important;margin-top:var(--space-4)}#main .bmai .passo p{color:var(--text-secondary);font-size:16px;margin-top:var(--space-2)}

/* ═══ domande ═══ */
#main .bmai .domande-lista{margin-top:var(--space-8);max-width:760px;display:grid;gap:var(--space-3)}#main .bmai .domanda{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card)}#main .bmai .domanda summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);cursor:pointer;list-style:none;padding:var(--space-5) var(--space-6);
  font-weight:700;font-size:16px;min-height:44px}#main .bmai .domanda summary::-webkit-details-marker{display:none}#main .bmai .domanda summary svg{flex:0 0 auto;width:20px;height:20px;color:var(--accent);
  transition:transform var(--t-base) var(--ease)}#main .bmai .domanda[open] summary svg{transform:rotate(45deg)}#main .bmai .domanda p{padding:0 var(--space-6) var(--space-5);color:var(--text-secondary);font-size:16px}

/* ═══ chiusura: il logo si rimonta (telaio del blog OB) ═══ */
/* niente margine negativo: il palco è opaco e risalirebbe SOPRA la sezione
   precedente, coprendone il contenuto (misurato: 344px e tre domande irraggiungibili) */
#main .bmai .chiusura{height:170vh;position:relative;z-index:0}#main .bmai .palco-logo{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-8);
  background:var(--surface-page);overflow:clip;padding-inline:var(--space-5)}#main .bmai .palco-logo svg{width:min(280px,58vw);aspect-ratio:1/1;height:auto;overflow:visible}#main .bmai .pezzo{transform-box:fill-box;transform-origin:center}#main .bmai .gruppo-vola{opacity:0}          /* senza JS o con reduced-motion: logo GIÀ composto */
#main .bmai .logo-vero{opacity:1}.js #main .bmai .anima .gruppo-vola{opacity:1}.js #main .bmai .anima .logo-vero{opacity:0}#main .bmai .firma-logo{font-size:clamp(21px,3.1vw,30px)!important;font-weight:700!important;color:var(--ink-900)!important;text-align:center;letter-spacing:-.015em!important;margin:0}#main .bmai .firma-logo em{font-style:normal;color:var(--accent)!important}#main .bmai .chiusura-cta{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}#main .bmai .chiusura-cta p{font-size:15px;font-weight:600;color:var(--text-muted)}.js #main .bmai .anima .firma-logo,.js #main .bmai .anima .chiusura-cta{opacity:0}

/* ═══ piede ═══ */
#main .bmai .piede{position:relative;z-index:1;background:var(--surface-dark);color:var(--white);
  padding-block:var(--space-12)}
/* spazio sotto al piede: con la barra fissa il documento deve poter scorrere
   abbastanza da liberare qualunque elemento da sotto la barra */
@media (max-width:767px){#main .bmai .piede{padding-bottom:calc(var(--space-12) + 76px)} }#main .bmai .piede-riga{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-6)}#main .bmai .piede-dati{font-size:14px;color:var(--cream-100)}#main .bmai .piede-link{display:flex;gap:var(--space-5);flex-wrap:wrap}#main .bmai .piede-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--cream-100);
  font-size:14px;font-weight:600}#main .bmai .social{display:flex;gap:var(--space-2)}#main .bmai .social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md)}#main .bmai .social img{width:24px;height:24px}
@media (hover:hover) and (pointer:fine){#main .bmai .social a:hover{background:rgba(255,255,255,.12)}
}

/* ═══ il premio della perseveranza ═══ */
.premio{border:0;padding:var(--space-10) var(--space-8) var(--space-8);max-width:min(460px,92vw);
  border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary);
  box-shadow:var(--shadow-popover);position:relative}.premio::backdrop{background:rgba(43,30,40,.68)}.premio h2{font-size:26px!important;font-weight:700!important;line-height:1.18!important;letter-spacing:-.015em!important;margin-top:var(--space-4)}.premio-testo{margin-top:var(--space-4);color:var(--text-secondary);font-size:16px}.premio .bottone{width:100%;margin-top:var(--space-6)}.premio-postilla{margin-top:var(--space-3);font-size:14px;color:var(--text-muted);text-align:center}.premio-chiudi{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;
  background:transparent;color:var(--ink-500);cursor:pointer;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.premio-chiudi:hover{background:var(--ink-100)} }
@media (prefers-reduced-motion: no-preference){.premio[open]{animation:entraPremio 320ms cubic-bezier(.2,.7,.3,1.2)}
}
@keyframes entraPremio{ from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none} }

/* ═══ la barra di richiamo: compare dal terzo blocco in poi ═══
   Testo a sinistra, tasto a destra. Vive fuori da ogni antenato con transform:
   position:fixed non si aggancerebbe alla finestra. */
#main .bmai .richiamo:not(.visibile){visibility:hidden}#main .bmai .richiamo{position:fixed;left:0;right:0;
  bottom:0;z-index:34;background:var(--surface-dark);color:var(--white);
  box-shadow:0 -6px 24px rgba(43,30,40,.22);
  border-top:3px solid var(--accent);
  padding-block:var(--space-3);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px));
  transform:translateY(calc(100% + 24px));
  transition:transform 280ms var(--ease),visibility 0s linear 280ms}#main .bmai .richiamo.visibile{transform:translateY(0);visibility:visible;transition-delay:0s,0s}#main .bmai .richiamo-riga{display:flex;align-items:center;gap:var(--space-4)}#main .bmai .richiamo-testo{flex:1 1 auto;min-width:0;margin:0}#main .bmai .richiamo-occhiello{display:block;font-size:16px;font-weight:700;letter-spacing:.01em;
  color:var(--white);line-height:1.25}#main .bmai .richiamo-sotto{display:block;font-size:15px;color:var(--cream-100);line-height:1.4;
  margin-top:2px}#main .bmai .richiamo .bottone{flex:0 0 auto}
/* il robottino della barra: sta a sinistra del tasto e lo indica */
#main .bmai .robot-barra{flex:0 0 auto;display:inline-flex;color:var(--cream-50);line-height:0}#main .bmai .robot-barra svg{display:block}
@media (prefers-reduced-motion: no-preference){#main .bmai .rbb-corpo{animation:dondolaBarra 2.8s ease-in-out infinite}#main .bmai .rbb-indica{transform-box:fill-box;transform-origin:0% 50%;
    animation:indicaBarra 1.5s ease-in-out infinite}#main .bmai .rbb-bulbo{animation:pulsa 2.2s ease-in-out infinite}
}
@keyframes dondolaBarra{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes indicaBarra{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }#main .bmai .richiamo-chiudi{flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;
  color:var(--ink-300);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--radius-sm)}
@media (hover:hover) and (pointer:fine){#main .bmai .richiamo-chiudi:hover{background:rgba(255,255,255,.12);color:var(--cream-50)}
}
/* su telefono lo spazio non basta per tutto: la riga secondaria si toglie,
   e l'etichetta del tasto si accorcia. Le regole che TOLGONO stanno in coda. */
#main .bmai .ric-stretto{display:none}
/* l'etichetta del tasto della barra ha due misure, come l'occhiello qui sopra:
   su telefono la riga di testo sparisce (.richiamo-testo{display:none}) e il
   tasto resta l'unica cosa scritta, quindi «prossima edizione» deve stare li'
   dentro o nessuno la legge. Le regole che TOLGONO stanno in coda. */
#main .bmai .cta-corto{display:none}
/* su telefono lo spazio non basta: si accorcia il testo, non si stringe il tasto.
   Le regole che TOLGONO stanno in coda al blocco: una media query non aggiunge
   specificita', e dichiarata prima sparirebbe in silenzio. */
/* su telefono il posto lo prende il robottino: il testo si toglie, e il tasto
   dice gia' cosa fa. Si toglie una voce, non si stringe il carattere. */
@media (max-width:767px){#main .bmai .richiamo{padding-block:var(--space-2);
    padding-bottom:calc(var(--space-2) + env(safe-area-inset-bottom,0px))}#main .bmai .richiamo-riga{gap:var(--space-2);justify-content:flex-end}#main .bmai .richiamo-testo{display:none}#main .bmai .richiamo .bottone{flex:1 1 auto;padding:13px 12px;font-size:14px!important;letter-spacing:.03em!important}#main .bmai .richiamo .cta-lungo{display:none}#main .bmai .richiamo .cta-corto{display:inline}
  /* il bersaglio si ALLARGA senza spostare quello che si vede: 44px di area
     toccabile e margine negativo uguale e contrario, cosi' la crocetta resta
     dov'era e cresce solo la superficie che riceve il dito. Stringere a 40px
     era la scelta vietata dalle regole di questo progetto, e nessuna sonda
     locale l'aveva vista perche' misurano a pagina ferma e la barra compare
     solo scorrendo. */
  #main .bmai .richiamo-chiudi{width:44px;margin-right:-8px}#main .bmai .robot-barra svg{width:42px;height:40px}
}
@media (prefers-reduced-motion: reduce){#main .bmai .richiamo{transition:none} }

/* ═══ il bollino delle domande ═══
   Compare verso la fine, dove i dubbi nascono. Su telefono sta SOPRA la barra
   del richiamo: due cose fisse in basso si sovrapporrebbero. */
#main .bmai .bollino-wa{position:fixed;right:var(--space-4);z-index:35;display:inline-flex;
  align-items:center;gap:var(--space-3);max-width:min(300px,calc(100vw - 32px));
  padding:10px 18px 10px 12px;border-radius:var(--radius-pill);
  background:var(--surface-dark);color:var(--cream-50);text-decoration:none;
  box-shadow:var(--shadow-popover);
  bottom:calc(var(--space-3) + var(--wa-sopra,0px) + env(safe-area-inset-bottom,0px));
  transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden;
  /* il "bottom" transisce insieme alla barra: senza, per un attimo il bollino
     resta giu' mentre la barra sale, e le due cose si accavallano */
  transition:transform 300ms var(--ease),opacity 300ms var(--ease),
             bottom 280ms var(--ease),visibility 0s linear 300ms}#main .bmai .bollino-wa.visibile{transform:translateY(0);opacity:1;visibility:visible;
  transition-delay:0s,0s,0s,0s}
@media (min-width:768px){#main .bmai .bollino-wa{right:var(--space-5)} }#main .bmai .bollino-wa-icona{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-pill);
  background:#25D366;color:#0B3D24;display:inline-flex;align-items:center;
  justify-content:center}#main .bmai .bollino-wa-testo{min-width:0;line-height:1.25}#main .bmai .bollino-wa-occhiello{display:block;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-100)}#main .bmai .bollino-wa-riga{display:block;font-size:16px;font-weight:700;color:var(--cream-50)}
@media (hover:hover) and (pointer:fine){#main .bmai .bollino-wa:hover{background:#000}
}#main .bmai .bollino-wa:active{transform:translateY(0) scale(.97)}
@media (prefers-reduced-motion: reduce){#main .bmai .bollino-wa{transition:none} }

/* ═══ comparse allo scroll (solo con JS e senza reduced-motion) ═══ */
@media (prefers-reduced-motion: no-preference){.js #main .bmai .compare{opacity:0;transform:translateY(14px);
    transition:opacity 420ms var(--ease),transform 420ms var(--ease);
    transition-delay:calc(var(--i,0)*70ms)}.js #main .bmai .compare.visibile{opacity:1;transform:none}
}


/* ── messa a terra dentro Avada: vale SOLO sulla pagina della landing ── */
/* l'id ripetuto vale il doppio in specificità: vince sul CSS dinamico di Avada,
   che ha la stessa specificità semplice ed è dichiarato dopo il nostro foglio */
body.page-bar-marketing-ai-edition #main#main{padding-left:0;padding-right:0;padding-top:0}
body.page-bar-marketing-ai-edition .fusion-page-title-bar{display:none}
body.page-bar-marketing-ai-edition #main .bmai a{text-decoration:none;box-shadow:none}

/* .fusion-row di Avada è `display:flex; flex-wrap:wrap`, e un elemento flex ha
   `min-width:auto`: non si stringe sotto la propria larghezza minima. Il nostro
   recinto restava a 1120px dentro un telefono da 390, e il contenuto usciva
   TAGLIATO — non scorreva di lato, perché #boxed-wrapper ha `overflow-x:clip` e
   body ha `overflow-x:hidden`. Per questo nessuna sonda di traboccamento poteva
   vederlo: misurato 1120 su 390, e 390 rimettendo min-width:0.
   Vale in entrambi i casi: se un giorno il contenitore ospite non fosse flex,
   queste tre dichiarazioni sono inerti. */
body.page-bar-marketing-ai-edition #main .bmai{min-width:0;width:100%;max-width:100%}
body.page-bar-marketing-ai-edition #main .fusion-row{max-width:none;margin-left:0;margin-right:0}

/* La sticky banner del sito («Scarica gratuitamente la guida») è una SECONDA
   chiamata all'azione in fondo allo schermo, e la regola non negoziabile di
   questa pagina è che ce ne sia UNA sola. Misurato: copriva il bollino WhatsApp
   proprio alle domande frequenti, dove i dubbi arrivano.
   Si spegne PER CONTESTO, solo qui: le impostazioni del plugin non si toccano,
   e su tutte le altre pagine del sito la banner resta com'era.
   Per rimetterla su questa pagina basta togliere questa regola. */
body.page-bar-marketing-ai-edition .hdsb-stickybanner{display:none!important}

/* ── IL COLORE DEI TESTI SI DICHIARA, MAI EREDITATO ──
   Avada scrive `h2{color:var(--h2_typography-color)}` e `h3{...}` su selettori
   d'ELEMENTO, e su questo sito quel colore è BIANCO (il tema usa titoli chiari sui
   suoi fondi scuri). Il nostro foglio non dichiarava nessun colore sui titoli: li
   faceva ereditare dal recinto. E l'ereditarietà perde contro QUALSIASI
   dichiarazione diretta, per specificità che si abbia: risultato, titoli bianchi
   su fondo crema — misurato 1:1 a opacità 1, cioè invisibili.
   È lo stesso difetto già pagato sul blog. La cura è dichiarare `inherit`, che
   riproduce esattamente quello che fa il prototipo, con il contro-!important
   (proprietà tipografica: consentito; su opacity o transform romperebbe le
   animazioni). Le nostre regole che vogliono un colore diverso — la scheda
   dell'offerta, la chiusura — hanno specificità maggiore E !important, quindi
   continuano a vincere. */
body.page-bar-marketing-ai-edition #main .bmai h1,
body.page-bar-marketing-ai-edition #main .bmai h2,
body.page-bar-marketing-ai-edition #main .bmai h3,
body.page-bar-marketing-ai-edition #main .bmai h4,
body.page-bar-marketing-ai-edition #main .bmai h5,
body.page-bar-marketing-ai-edition #main .bmai h6{color:inherit!important}
/* E il tema non dichiara solo il colore: su h1..h6 mette anche FAMIGLIA,
   INTERLINEA e MARGINI, con le sue variabili (`--h1_typography-line-height` e
   compagnia). Tutto quello che nel prototipo EREDITIAMO invece di dichiarare, qui
   lo perdiamo, perche' l'ereditarieta' non vince contro una dichiarazione diretta
   a nessuna specificita'. Misurato sul servito il 20/09/2026, confrontando i 30
   titoli del recinto con quelli del prototipo alla stessa larghezza: il marchio
   del workshop era 21px piu' basso (interlinea 111,36 invece di 153,6), altri
   cinque titoli avevano l'interlinea del tema, e il titolo del premio perdeva i
   16px di margine. `inherit` non inventa un valore: riproduce esattamente quello
   che fa il prototipo.
   ⚠️ L'elenco dell'interlinea e' MISURATO, non a tappeto: dove l'interlinea la
   dichiariamo noi (.titolone, .card h3, .giorno h3…) non si tocca, o la cura
   cancellerebbe la nostra tipografia. Se si aggiunge un titolo che eredita
   l'interlinea, va aggiunto qui: lo dice `sonda-titoli.mjs`. */
body.page-bar-marketing-ai-edition #main .bmai h1,
body.page-bar-marketing-ai-edition #main .bmai h2,
body.page-bar-marketing-ai-edition #main .bmai h3,
body.page-bar-marketing-ai-edition #main .bmai h4,
body.page-bar-marketing-ai-edition #main .bmai h5,
body.page-bar-marketing-ai-edition #main .bmai h6{font-family:inherit!important}
body.page-bar-marketing-ai-edition #main .bmai .logo-bmai,
body.page-bar-marketing-ai-edition #main .bmai .perchi h3,
body.page-bar-marketing-ai-edition #main .bmai .passo h3{line-height:inherit!important}
/* il titolo per i soli lettori di schermo: nel prototipo dichiara `font:inherit`,
   e qui glielo si fa rispettare. Non si vede, ma una differenza che resta e' una
   differenza che il giorno dopo nessuno sa piu' se e' voluta. */
body.page-bar-marketing-ai-edition #main .bmai .solo-lettori{font:inherit!important}
body.page-bar-marketing-ai-edition #main .bmai .premio h2{margin:var(--space-4) 0 0!important}
/* I FREGI DEL TEMA SOTTO I TITOLI. Avada disegna h1::before e h1::after come due
   trattini di 50x2px nel rosso del sito: misurati sul servito, sono comparsi sopra
   e sotto il marchio del workshop, dove nel prototipo non c'e' niente. Non si
   vedono in nessun getComputedStyle dell'elemento, solo in quello dei suoi
   pseudo-elementi, ed e' per questo che ci sono arrivati in produzione. La cura era
   scritta nel CLAUDE.md dal blog e non era mai stata eseguita qui: adesso c'e'.
   In coda alle altre regole dei titoli, perche' a pari specificita' vince l'ultima. */
body.page-bar-marketing-ai-edition #main .bmai h1::before,
body.page-bar-marketing-ai-edition #main .bmai h1::after,
body.page-bar-marketing-ai-edition #main .bmai h2::before,
body.page-bar-marketing-ai-edition #main .bmai h2::after,
body.page-bar-marketing-ai-edition #main .bmai h3::before,
body.page-bar-marketing-ai-edition #main .bmai h3::after,
body.page-bar-marketing-ai-edition #main .bmai h4::before,
body.page-bar-marketing-ai-edition #main .bmai h4::after,
body.page-bar-marketing-ai-edition #main .bmai h5::before,
body.page-bar-marketing-ai-edition #main .bmai h5::after,
body.page-bar-marketing-ai-edition #main .bmai h6::before,
body.page-bar-marketing-ai-edition #main .bmai h6::after{content:none!important}
/* Solo i titoli, e per un motivo misurato: nel prototipo NESSUNA regola nostra
   dichiara un colore su h1-h6, quindi `inherit` riproduce esattamente quello che
   il prototipo fa. Sui link invece il colore lo dichiariamo noi, e le regole di
   Avada perdevano già: estendere `inherit` anche a loro ha rotto tre cose che
   funzionavano (il salto al contenuto, «Il programma» in testata e il bollino
   WhatsApp, tutti finiti scuro su scuro). Una cura si allarga solo dove è stato
   misurato che serve. */