/* INCONTRO ZERO · quello che la pagina aggiunge al modello di Rocket.
   Si carica dopo rocket.css (la forma) e brand.css (i ruoli del brand):
   qui ci sono solo i pezzi che il modello non ha. I colori vengono da brand.css. */

:root{
  /* i nomi che usa il marchio Bar Marketing · AI Edition, presi dalla landing del workshop */
  --ink-900:var(--inchiostro);
  --red-600:var(--azione);
  --cream-50:var(--carta);
  --white:#ffffff;
  --raggio-scheda:20px;
}

/* ─── la testata: su telefono l'azione resta in alto, perché la barra in basso litiga coi tasti del browser ─── */
.testata .bottone.bottone-telefono{display:none}
@media (max-width:600px){
  .testata .bottone.bottone-telefono{display:inline-flex;min-height:44px;padding:10px 18px}
}
.marchio img{width:46px;height:46px}

/* ─── il marchio del workshop, versione web della landing (misure in em dal master) ─── */
.logo-bmai{display:block;font-size:var(--logo-fs,40px);margin:0 0 20px;cursor:default;-webkit-user-select:none;user-select:none}
.logo-bmai-inner{position:relative;display:inline-block;margin-bottom:.56em}
.logo-bmai-scritta{font-family:'Oswald','Montserrat',sans-serif;font-weight:700;font-size:1em;line-height:.86;letter-spacing:-.015em;text-transform:uppercase;white-space:nowrap;display:block}
.lb-bar{color:var(--ink-900)}
.lb-blocco{background:var(--red-600);color:var(--cream-50);padding:0 .091em 0 .055em}
.lb-cursore{display:inline-block;width:.045em;height:.8em;background:var(--ink-900);margin-left:.073em;vertical-align:-.055em}
.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)}
.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%)}
.lb-ai{font-family:'Space Mono',monospace;font-weight:700;font-size:max(11px,.182em);letter-spacing:.14em;text-transform:uppercase;color:var(--red-600)}
.lb-tacca{display:inline-block;width:.091em;height:.182em;background:var(--red-600)}
/* nell'eroe il marchio sta su una riga, come nella chiusura dei video: la riga intera misura
   6,86em (misurata a 71px: 487px). Il corpo segue lo schermo e resta dentro la colonna.
   Il nome del prodotto ha un minimo di 11px (regola della landing): da ~45px in giu' il badge
   tocca il fondo della scritta, per questo il minimo del corpo e' 44px. */
.eroe .logo-bmai{--logo-fs:clamp(44px,calc((100vw - 40px) / 6.95),56px);margin:0 0 4px}

/* ─── l'eroe: il testo a sinistra, il modulo a destra; su telefono il modulo viene subito dopo ─── */
.eroe .contenitore{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;min-height:0}
.eroe-testo{padding:clamp(22px,4vw,56px) 0 clamp(8px,2vw,24px)}
.eroe-testo h1{font-size:clamp(2rem,5.4vw,3.35rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:.35em}
.eroe .sottotitolo{margin-bottom:18px}
@media (min-width:900px){
  .eroe .contenitore{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:44px;align-items:start;min-height:0}
  .eroe-testo{padding-top:44px}
  .eroe-testo h1{font-size:clamp(2rem,4.2vw,3rem)}
  .iscrizione{padding:24px 0 32px}
  .scheda-modulo .campo{margin-bottom:12px}
  .modulo-testa{padding-bottom:12px;margin-bottom:14px}
}

.biglietto{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.biglietto li{display:flex;align-items:center;gap:12px;font-size:1rem;line-height:1.35}
.biglietto svg{flex:0 0 26px;width:26px;height:26px;color:var(--azione-testo)}
.biglietto b{font-weight:700;margin-right:.25em}
@media (max-width:899px){.biglietto{gap:6px;margin-bottom:16px}.biglietto li{font-size:.9375rem}.biglietto svg{flex-basis:22px;width:22px;height:22px}.eroe .occhiello{font-size:1.0625rem}}

/* ─── la scheda del modulo ─── */
.iscrizione{scroll-margin-top:calc(var(--testata-h) + 8px)}
.scheda-modulo{background:var(--rilievo);border-radius:var(--raggio-scheda);box-shadow:0 24px 60px -36px rgba(43,30,40,.55),0 0 0 1px var(--bordo);padding:clamp(20px,3.4vw,32px);max-width:520px;margin:0 auto 32px}
.scheda-modulo .modulo{background:none;box-shadow:none;padding:0;max-width:none;margin:0;border-radius:0}
.modulo-testa{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--bordo)}
.modulo-testa img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px}
.modulo-testa p{margin:0;line-height:1.3}
.modulo-testa b{display:block;font-family:var(--font-titoli);font-size:1.125rem;color:var(--scura)}
.modulo-testa span{font-size:.9375rem;color:var(--testo-secondario)}
.modulo-testa .modulo-appuntamento{font-family:var(--font-titoli);font-weight:600;font-size:1.0625rem;line-height:1.35;color:var(--scura)}
.modulo-titolo{font-size:clamp(1.375rem,2.4vw,1.625rem);line-height:1.2;margin:0 0 16px}
.campi-doppi{display:grid;gap:0 14px;align-items:end}
@media (min-width:420px){.campi-doppi{grid-template-columns:1fr 1fr}}
.campo input::placeholder{color:#7a6d76;opacity:1}
.spunta.facoltativa{margin:4px 0 18px}
.spunta.facoltativa label{font-size:.9375rem;line-height:1.45}
.errore-invio{color:var(--no,#b3261e);font-weight:600;margin:12px 0 0}
.modulo-nota a{color:inherit}

.conferma-iz p,.chiuso-iz p{margin:0 0 14px}
.conferma-link{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.conferma-link small{color:var(--testo-secondario);font-size:.875rem}
.conferma-link .bottone,.conferma-azioni .bottone,.chiuso-iz .bottone{width:100%;justify-content:center;text-align:center}
.conferma-azioni{display:grid;gap:10px;margin:6px 0 16px}
.conferma-prima{font-size:.9375rem;background:var(--fascia-chiara);border-radius:12px;padding:12px 14px}
.conferma-iz:focus{outline:none}

/* ─── l'ora, minuto per minuto ─── */
.ora-griglia{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.ora-griglia{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px}}
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.agenda li{display:grid;grid-template-columns:76px 1fr;gap:14px;background:var(--rilievo);border-radius:16px;padding:18px 18px 16px;box-shadow:0 0 0 1px var(--bordo)}
.agenda-ora{font-family:var(--font-titoli);font-weight:700;font-size:1.125rem;color:var(--azione-testo);font-variant-numeric:tabular-nums;padding-top:1px}
.agenda h3{font-size:1.125rem;margin:0 0 4px}
.agenda p{margin:0;font-size:1rem;color:var(--testo-secondario)}
.ora-foto{margin:0}
.ora-foto img{width:100%;height:auto;border-radius:24px}
.ora-foto figcaption{margin-top:10px;font-size:.9375rem;color:var(--testo-secondario)}

/* ─── chi c'era: i video verticali ─── */
.video-voci{display:grid;gap:28px;max-width:760px;margin:0 auto}
@media (min-width:700px){.video-voci{grid-template-columns:1fr 1fr;gap:32px}}
.video-voce{margin:0;max-width:340px;justify-self:center;width:100%}
.video-cornice{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:var(--scura);box-shadow:0 22px 50px -30px rgba(43,30,40,.6)}
.video-cornice video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--scura)}
.video-voce figcaption{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.video-voce figcaption b{font-family:var(--font-titoli);font-size:1.0625rem;color:var(--scura)}
.video-voce figcaption small{font-size:.9375rem;color:var(--testo-secondario)}
.video-voce q{margin-top:8px;font-size:1.0625rem;font-style:italic;font-weight:600;quotes:"“" "”"}
.video-voce .durata{margin-top:4px;font-size:.875rem;color:var(--testo-secondario)}

/* ─── chi conduce ─── */
.chi img{border-radius:24px;box-shadow:0 22px 50px -32px rgba(43,30,40,.55)}
/* sul telefono la foto ha l'altezza fissata: e' pigra, e senza misura nasce larga zero e poi fa saltare la pagina */
@media (max-width:820px){.chi img{height:360px;width:auto;aspect-ratio:4/5;object-fit:cover;margin-inline:auto}}
/* su schermo largo la foto di Claudia sta a destra del testo (Francesco, 24/9); sul telefono resta sopra */
@media (min-width:821px){.chi img{order:2}}
.citazione{margin:22px 0 0;padding:4px 0 4px 18px;border-left:4px solid var(--azione);font-size:1.125rem;font-weight:600;font-style:italic;line-height:1.45;color:var(--scura)}

/* ─── meglio dirlo prima ─── */
.note-oneste{max-width:760px;margin:28px auto 0;display:grid;gap:12px}
.note-oneste p{margin:0;background:var(--rilievo);border-radius:16px;padding:16px 18px;box-shadow:0 0 0 1px var(--bordo)}

/* ─── la chiusura ─── */
#chiusura h2{font-size:clamp(1.75rem,4.4vw,2.75rem);line-height:1.12}
#chiusura .rassicurazione{color:inherit;opacity:.88}
.dubbio{margin:18px 0 0;font-size:.9375rem}
.dubbio a{color:var(--accento-su-scura);font-weight:600}

/* ─── il piede ─── */
.piede-riga{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.piede-riga img{width:56px;height:56px}
.piede-dati{margin:0 0 4px;font-size:.9375rem}
.piede-link{margin:0;display:flex;gap:18px;flex-wrap:wrap;font-size:.9375rem}
.piede-link a{display:inline-flex;align-items:center;min-height:44px}

/* i due link dentro una frase restano bersagli da 44px (pavimento di Linus) */
.modulo-nota a,.dubbio a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}

/* online senza indirizzo dello script: il modulo lo dice, non finge */
.modulo[data-modo="attesa"]::before{content:"Le iscrizioni aprono fra poco: il modulo non invia ancora.";display:block;background:#fff4d6;color:#6b4a00;border-radius:8px;padding:8px 12px;font-size:.875rem;margin-bottom:16px}

/* il messaggio di Silvia: una nuvoletta nei colori del brand, non l'interfaccia di WhatsApp */
.messaggio{max-width:520px;margin:36px auto 0}
.messaggio blockquote{position:relative;margin:0;background:var(--rilievo);border-radius:20px 20px 20px 6px;padding:18px 22px;box-shadow:0 0 0 1px var(--bordo),0 16px 36px -28px rgba(43,30,40,.5)}
.messaggio blockquote p{margin:0;font-size:1.1875rem;line-height:1.45;font-weight:600;font-style:italic;color:var(--scura)}
.messaggio figcaption{margin:10px 0 0 6px;font-size:.9375rem;color:var(--testo-secondario)}
.messaggio figcaption b{color:var(--scura)}


/* ═══ il robottino, preso dalla landing BMAI: sta nello spazio libero accanto al tasto dell'eroe
   e lo indica. Decorativo (aria-hidden) e acceso solo dallo script, che PRIMA misura se lo spazio
   c'e' davvero e se il tasto regge (una riga sola, dentro la piega). ═══ */
.eroe-azione{position:relative;padding-right:var(--rb-colonna,0px)}
.robottino{position:absolute;left:var(--rb-x,auto);top:0;color:var(--azione);pointer-events:none;
  transform:translateY(var(--rb-y,0px));transition:transform 420ms cubic-bezier(.2,.7,.3,1.25)}
.robottino[hidden]{display:none}
.robottino svg{display:block}
.rb-braccio{transform-box:fill-box;transform-origin:100% 50%;transform:rotate(28deg);transition:transform 320ms cubic-bezier(.2,.7,.3,1.4)}
.robottino.indica .rb-braccio{transform:rotate(0deg)}
.rb-occhio{transition:transform 260ms ease;transform-box:fill-box;transform-origin:center}
.robottino.indica .rb-occhio{transform:scaleY(.55)}
@media (prefers-reduced-motion:no-preference){
  .robottino svg{animation:dondola 3.6s ease-in-out infinite}
  .robottino.indica svg{animation-duration:1.6s}
  .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}}
@media (hover:none),(pointer:coarse){.robottino svg{width:52px;height:auto}}
/* col robottino accanto, sul telefono il tasto passa a 16px (sopra il pavimento di 14) per restare su una riga:
   il testo e' largo 272px a 18px e la colonna lascia 286px a 390 (misurato) */
.eroe-azione.con-robot .bottone{font-size:1rem;padding-inline:12px}

/* ═══ il robottino che cammina sul tasto della chiusura, dalla landing BMAI: avanti e indietro, al capolinea
   si gira, e col mouse sul tasto salta. La corsa la misura lo script sul tasto vero. ═══ */
.zona-prenota{position:relative;display:block;width:fit-content;margin:64px auto 0}
@media (max-width:600px){.zona-prenota{width:100%}}
.robot-cammina{position:absolute;left:0;bottom:calc(100% - 3px);pointer-events:none;color:var(--carta);transform:translateX(0)}
.robot-cammina svg{display:block}
.rc-tutto{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .robot-cammina{animation:cammina 9s ease-in-out infinite}
  .rc-tutto{animation:sobbalzo .46s ease-in-out infinite}
  .rc-gamba-sx,.rc-braccio-dx{animation:passo .46s ease-in-out infinite}
  .rc-gamba-dx,.rc-braccio-sx{animation:passo .46s ease-in-out infinite reverse}
  .rc-bulbo{animation:pulsa 1.8s ease-in-out infinite}
}
@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)}}
/* il salto sta sul gruppo interno e la camminata sul contenitore: due trasformazioni che non si pestano i piedi */
@media (hover:hover) and (pointer:fine){
 @media (prefers-reduced-motion:no-preference){
  .zona-prenota:hover .rc-tutto{animation:salta .66s cubic-bezier(.3,.7,.4,1) infinite}
  .zona-prenota:hover .rc-gamba-sx,.zona-prenota:hover .rc-gamba-dx{animation-duration:.66s}
  .zona-prenota:hover .rc-braccio-sx,.zona-prenota:hover .rc-braccio-dx{animation-duration:.33s}
  .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)}
}
.rassicurazione-chiusura{display:block;margin-top:12px}

/* ---- il consenso per il pixel di Meta (consenso.js). Rifiuta e Accetta hanno lo stesso peso:
   nessuno dei due spinge. Aperto tiene libero il fondo, così il piede non ci finisce sotto. */
.banner-consenso{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;max-width:760px;margin-inline:auto;background:var(--scura);color:var(--testo-su-scura);border:1px solid rgba(250,246,239,.22);border-radius:var(--raggio-scheda);box-shadow:0 14px 36px -14px rgba(0,0,0,.6);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:.9375rem;line-height:1.45}
.banner-consenso[hidden]{display:none}
.banner-consenso p{margin:0;flex:1 1 320px}
.banner-consenso a{color:inherit;text-decoration:underline;text-underline-offset:2px;padding:13px 0;white-space:nowrap}   /* in linea: la tacca da 44 si prende il padding e la riga non cresce */
.banner-consenso-tasti{display:flex;gap:10px;flex:0 0 auto}
.banner-consenso button{appearance:none;min-height:44px;min-width:108px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--testo-su-scura);background:transparent;color:var(--testo-su-scura);font:600 .9375rem/1 var(--font-testo);cursor:pointer}
.banner-consenso button:hover{background:rgba(250,246,239,.14)}
.banner-consenso button:focus-visible,.piede-consenso:focus-visible{outline:3px solid var(--accento-su-scura);outline-offset:2px}
.consenso-aperto .piede{padding-bottom:calc(40px + var(--consenso-h,0px))}
.piede-consenso{appearance:none;background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.piede-consenso[hidden]{display:none}
@media (max-width:600px){
  .banner-consenso{left:8px;right:8px;bottom:8px;padding:12px 14px}
  .banner-consenso-tasti{width:100%}
  .banner-consenso button{flex:1}
}