/* ==========================================================================
   Migliorie grafiche e animazioni (thread «Migliorare grafica e animazioni»)
   Tutto additivo: si porta copiando questo file + assets/js/fable.js e le due
   righe in index.html. Rispetta il brand kit: solo bianco/nero, niente giallo
   fuori dagli schermi LED. «Riduci movimento»: tutto spento in fondo.
   ========================================================================== */

/* ---------- 1. Coreografia d'ingresso del primo schermo (stile Apple) ----------
   Titolo, pulsante, note e riquadro prima/dopo salgono uno dopo l'altro,
   da leggermente sfocati a nitidi. Solo CSS: senza JavaScript funziona lo stesso. */
/* [Design eng] 500 ms con ease-out forte, 12 px di corsa, niente sfocatura; il pulsante «Scatta la foto» non entra: è
   visibile e nitido dal primo istante (tocchi ammessi da subito). Scalare di 50 ms tra titolo, sottotitolo e spunte. */
@keyframes fb-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* [Movimento, scelta di Nicolò del 31 ottobre] i testi del primo schermo sono fermi dal primo istante: si muove solo il riquadro con il video */
.hero-ba{animation:fb-up .5s var(--ease-out) .1s both}

/* ---------- 2. Rivelazione allo scorrimento più ricca ----------
   La sezione sfuma da sfocata a nitida e i suoi figli entrano a scalare (uno ogni 80 ms). */
/* [Design eng] sezione in 450 ms senza sfocatura (sfocare blocchi interi costa, soprattutto su Safari); figli a scalare di 40 ms.
   I passi del modulo non entrano più: il dito deve trovare i campi già nitidi. */
.rvon .rv{transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.rvon .rv>*{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.rvon .rv.seen>*{opacity:1;transform:none}
.rvon .rv.seen>*:nth-child(2){transition-delay:.04s}
.rvon .rv.seen>*:nth-child(3){transition-delay:.08s}
.rvon .rv.seen>*:nth-child(4){transition-delay:.12s}
.rvon .rv.seen>*:nth-child(5){transition-delay:.16s}
.rvon .rv.seen>*:nth-child(n+6){transition-delay:.2s}

/* ---------- 3. Pulsanti vivi: riflesso che passa, sollevamento, pressione ----------
   Il riflesso è bianco sui pulsanti neri e nero su quelli bianchi: niente colore. */
/* [Design eng] il riflesso passa solo sul pulsante del primo schermo, due volte dopo l'ingresso, poi si ferma: un effetto
   decorativo che il visitatore vedrebbe di continuo (barra fissa, invio) va tolto. Sollevamento solo con un mouse vero. */
@keyframes fb-sheen{0%{transform:translateX(-130%) skewX(-16deg)}40%,100%{transform:translateX(260%) skewX(-16deg)}}
.hero-copy .btn::before{content:"";position:absolute;inset:0 auto 0 0;width:38%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22) 50%,transparent);
  animation:fb-sheen 2.2s cubic-bezier(.4,0,.2,1) 1.1s 2 both}
.btn{transition:transform .16s var(--ease-out),box-shadow .16s ease,background .15s ease}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
  .ask .btn:hover,.fears .btn:hover{box-shadow:0 10px 24px -12px rgba(255,255,255,.35)}
}
.btn:active{transform:scale(.97);transition-duration:.1s}

/* ---------- 4. Parallasse leggera del riquadro prima/dopo (assets/js/fable.js) ---------- */
.fb-px{will-change:transform}

/* ---------- 5. Il numero del passo del modulo pulsa quando si completa ---------- */
@keyframes fb-pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.step.ok .step-n{animation:fb-pop .3s var(--ease-back,var(--ease-out))} /* [Taste] l'unica sovraelongazione ammessa: sul numero del passo */

/* ---------- Movimento ridotto: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-ba{animation:none;opacity:1;transform:none;filter:none}
  .rvon .rv,.rvon .rv>*{opacity:1;transform:none;filter:none;transition:none}
  .hero-copy .btn::before{display:none}
}

/* respiro di una luce (usato dalle etichette dei video dei prodotti). 7/11: tolta la scena a scorrimento #trasforma */
@keyframes fb-breathe{0%,100%{opacity:.6}50%{opacity:.82}}

/* ==========================================================================
   Lead magnet (#richiesta): il modulo e la conferma
   ========================================================================== */
/* la zona della foto chiama l'occhio: anello che si allarga dall'icona della fotocamera (nero, il modulo è bianco) */
@keyframes fb-ring{0%{box-shadow:0 0 0 0 rgba(11,11,12,.28)}70%,100%{box-shadow:0 0 0 16px rgba(11,11,12,0)}}
@keyframes fb-wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}
/* [Design eng] il richiamo parte quando la zona arriva sullo schermo (classe fb-call da fable.js): anello due volte, poi fermo;
   l'icona scatta una volta sola dopo 4 s se la zona non è stata ancora toccata. Niente loop infiniti accanto ai campi. */
@keyframes fb-wiggle1{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}
.drop.fb-call .drop-ico{animation:fb-ring 1.8s var(--ease-out) 2}
.drop.fb-call .drop-ico svg{animation:fb-wiggle1 .6s ease-in-out 4s 1}
.drop{transition:border-color .2s ease,background .2s ease,transform .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.drop:hover{transform:translateY(-2px)}}
.drop.over{transform:translateY(-2px)}
/* la conferma: i blocchi entrano a scalare, la copertina della guida si accende come un'insegna e poi respira */
.done>*{animation:fb-up .45s var(--ease-out) both}
.done>*:nth-child(2){animation-delay:.06s}.done>*:nth-child(3){animation-delay:.12s}.done>*:nth-child(4){animation-delay:.18s}.done>*:nth-child(n+5){animation-delay:.24s}
@keyframes fb-ledbreathe{0%,100%{text-shadow:0 0 4px currentColor}50%{text-shadow:0 0 6px currentColor,0 0 14px currentColor}}
/* [Design eng] la copertina si accende come un'insegna una volta sola, poi sta ferma: il respiro infinito accanto a «Scarica la guida» rubava attenzione al pulsante */
.done .cover .big{animation:ign 1.2s steps(1,end) .5s both}
.guide-box .cover{transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.guide-box:hover .cover{transform:rotate(-2deg) translateY(-3px) scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .drop-ico,.drop-ico svg,.done>*,.done .cover .big{animation:none;opacity:1}
}

/* ==========================================================================
   I nostri prodotti (#prodotti): tre video veri in schede, sfogliabili sul telefono
   ========================================================================== */
.pr{padding:52px 0 44px;background:var(--bg);color:var(--ink)}
.pr-head{display:grid;gap:10px;max-width:34rem;margin:0 auto 24px;text-align:center}
.pr-head h2{font-size:clamp(1.7rem,6.6vw,2.4rem)}
.pr-sub{font-size:1.04rem;color:var(--muted)}
.pr-strip{position:relative}
.pr-list{display:flex;gap:14px;margin:0;padding:4px var(--gutter-r) 8px var(--gutter);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pr-list::-webkit-scrollbar{display:none}
.pr-card{flex:0 0 min(82vw,420px);scroll-snap-align:start;scroll-snap-stop:always}
.pr-card figure{display:grid;gap:12px;margin:0}
.pr-media{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);background:#16181C;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 24px 48px -28px rgba(0,0,0,.9);transform:translateZ(0)}
.pr-v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:#16181C}
.pr-tag{position:absolute;z-index:1;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(11,11,12,.62);color:#FFFFFF;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.pr-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#FFFFFF;animation:fb-breathe 1.8s ease-in-out infinite}
.pr-card.playing .pr-tag{opacity:.9}
.pr-card figcaption{display:grid;gap:3px;padding:0 4px}
.pr-card figcaption b{font-size:1.08rem;font-weight:800;letter-spacing:-.01em}
.pr-d{font-size:.95rem;line-height:1.4;color:var(--muted)}
.pr-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.pr-dots i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28);transition:transform .2s var(--ease-out),background .2s ease}
.pr-dots i.on{background:#FFFFFF;transform:scale(1.45)}
/* le schede entrano una dopo l'altra quando arrivano sullo schermo (classe .seen da fable.js) */
.rvon .pr-card{opacity:0;transform:translateY(12px) scale(1.04);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out-cubic,var(--ease-out))} /* [Taste] i video entrano stringendosi (messa a fuoco), non gonfiandosi */
.rvon .pr-card.seen{opacity:1;transform:none}
.rvon .pr-card:nth-child(2).seen{transition-delay:.05s}
.rvon .pr-card:nth-child(3).seen{transition-delay:.1s}
@media (min-width:900px){
  .pr{padding:72px 0 64px}
  .pr-head{margin-bottom:36px}
  .pr-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1160px;margin:0 auto;padding:6px clamp(24px,4vw,56px) 0;overflow:visible;scroll-snap-type:none}
  .pr-card{flex:none}
  .pr-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pr-tag::before{animation:none}
  .rvon .pr-card{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   Chiusura della pagina: domande a tendina (chat), «Chi siamo», piè di pagina
   ========================================================================== */
/* ---- Domande: la chat diventa più «telefono», le domande da toccare si vedono ---- */
.fears{position:relative;overflow:hidden}
.fears::before{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:radial-gradient(60% 55% at 50% 100%,rgba(255,255,255,.07),transparent 70%);pointer-events:none}
.fears .wrap{position:relative}
.fears .head h2{font-size:clamp(1.6rem,6.2vw,2.5rem)}
.chat{gap:12px;padding:16px 14px 20px;border-radius:28px;background:linear-gradient(180deg,#1F1F22,#151517);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.9)}
.chat-top{gap:12px;padding:2px 2px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-av{position:relative;width:42px;height:42px;color:transparent;font-size:0;background:#FFFFFF url("../img/horizon-simbolo-nero.png") center/26px auto no-repeat}
/* risposte: fumetto nero con il simbolo Horizon accanto (l'etichetta «Horizon» resta per i lettori di schermo) */
.chat .hz{position:relative;margin-left:32px;max-width:calc(88% - 32px);padding:11px 14px 12px;border-radius:20px 20px 20px 6px;background:#0B0B0C;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.chat .hz::before{content:"";position:absolute;left:-32px;bottom:0;width:24px;height:24px;border-radius:50%;background:#FFFFFF url("../img/horizon-simbolo-nero.png") center/15px auto no-repeat}
.chat .hz .who{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.typing{margin-left:32px}
/* domande: da chiuse sono «da toccare» (bordo chiaro, segno +), aperte diventano messaggi inviati (bianche, con le spunte) */
.fear summary{padding:11px 16px 11px 38px;border-radius:20px 20px 6px 20px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14px center/15px no-repeat;color:#FFFFFF;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .12s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.fear:not([open]) summary:hover{background-color:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px #FFFFFF}}
.fear[open] summary{padding-left:16px;background:#FFFFFF;color:#0B0B0C;box-shadow:none}
.chat .fear.writing summary{padding-left:16px;background-image:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.chat .fear.writing summary::before{background:#FFFFFF;box-shadow:12.5px 0 #FFFFFF,25px 0 #FFFFFF}
.fear .hz{margin-top:12px}
@media (min-width:900px){
  .fears .wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(40px,6vw,88px);align-items:center;max-width:1060px}
  .fears .head{margin:0;text-align:left}
  .fears .head h2{font-size:clamp(2rem,3.2vw,2.9rem)}
  /* la chat dentro una sagoma di telefono */
  .chat{width:400px;padding:22px 16px 28px;border-radius:44px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 10px #1A1A1C,0 0 0 11px rgba(255,255,255,.14),0 60px 120px -40px rgba(0,0,0,.9)}
  .chat::before{content:"";justify-self:center;width:96px;height:26px;margin:-6px 0 4px;border-radius:999px;background:#0B0B0C}
}

/* ---- Chi siamo: pannello chiaro, frase in evidenza, i tre numeri dentro piccoli schermi LED ---- */
.final-about{margin-top:48px;padding:28px 20px 26px;border-top:0;border-radius:24px;background:#F4F4F5;text-align:center}
.final-about .eyebrow{margin-bottom:-2px}
.fa-t{font-size:1rem;line-height:1.5}
.fa-t b{display:block;margin-bottom:8px;font-size:clamp(1.2rem,4.8vw,1.5rem);line-height:1.2;letter-spacing:-.015em;color:#0B0B0C}
.final .nums{margin-top:10px;gap:10px}
.final .nums div{padding:0;border:0;background:none}
/* lo schermo: cornice scura, fondo nero puntinato, cifre gialle accese (il giallo resta dentro lo schermo) */
.final .nums b{position:relative;display:block;padding:12px 6px 11px;border:4px solid var(--led-frame,#1C1C1E);border-radius:12px;background-color:var(--led-black,#0B0B0C);background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.4px);background-size:3px 3px;color:#FFD24A;box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
.final .nums b .odo{filter:drop-shadow(0 0 5px rgba(255,210,74,.75)) drop-shadow(0 0 14px rgba(255,210,74,.35))}
.final .nums div>span{margin-top:8px;font-size:.84rem;color:#5F6066}
@media (min-width:900px){
  .final-about{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 48px;align-items:center;max-width:860px;padding:34px 40px 32px;text-align:left}
  .final-about .eyebrow{grid-column:1/-1}
  .final .nums{grid-template-columns:repeat(3,7rem);margin-top:0}
  .final .nums div{text-align:center}
}

/* ---- Piè di pagina: più aria, telefono toccabile, note legali raggruppate ---- */
footer{padding-top:44px;border-top:1px solid rgba(11,11,12,.08)}
footer .wrap{gap:6px;max-width:36rem}
footer .wrap>span{line-height:1.5}
.f-logo{width:132px;margin-bottom:20px}
.f-tel{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:11px 18px;border:1.5px solid rgba(11,11,12,.22);border-radius:999px;color:var(--on-band);font-size:.95rem;font-weight:600;text-decoration:none;transition:border-color .2s ease,transform .16s var(--ease-out)}
.f-tel b{color:var(--on-band)}
@media (hover:hover) and (pointer:fine){.f-tel:hover{border-color:#0B0B0C;transform:translateY(-1px)}}
footer nav{margin-top:14px;gap:6px 8px}
footer nav a{min-height:36px;padding:0 14px;border-radius:999px;background:rgba(11,11,12,.05);font-weight:600;text-decoration:none}
@media (prefers-reduced-motion:reduce){.fear summary,.f-tel{transition:none}}
/* sul telefono il pannello «Chi siamo» resta staccato dai bordi dello schermo */
.final-about{margin-left:var(--gutter);margin-right:var(--gutter-r)}
@media (min-width:900px){.final-about{margin-left:auto;margin-right:auto}}

/* ==========================================================================
   Schemi più umani (richiesta di Nicolò, 30 ottobre): ritmo degli spazi vario, titoli a sinistra,
   meno riquadri e pillole, composizioni sfalsate. Vale dalla scena a scorrimento in giù.
   Le regole qui sotto vincono su quelle sopra perché vengono dopo (stessa specificità o maggiore).
   ========================================================================== */
:root{--fb-s1:8px;--fb-s2:14px;--fb-s3:24px;--fb-s4:40px;--fb-s5:64px}
/* etichette di sezione: minuscole con un trattino, invece delle maiuscole spaziate */
.pr-head .eyebrow,.fears .head .eyebrow,.ask-head .eyebrow,.final-about .eyebrow{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none}
.pr-head .eyebrow::before,.fears .head .eyebrow::before,.ask-head .eyebrow::before,.final-about .eyebrow::before{content:"";flex:none;width:22px;height:1.5px;background:currentColor;opacity:.7}

/* ---- Prodotti: niente carosello a schede uguali; tre video in composizione sfalsata ---- */
.pr{padding:var(--fb-s4) 0 var(--fb-s3)}
.pr-head{gap:var(--fb-s1);max-width:none;margin:0 0 var(--fb-s3);text-align:left}
.pr-head h2{max-width:14ch;font-size:clamp(1.65rem,6.6vw,2.4rem);line-height:1.05}
.pr-sub{max-width:30ch;margin-top:4px;font-size:1rem}
.pr-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--fb-s3) 12px;padding:0 var(--gutter-r) 0 var(--gutter);overflow:visible;scroll-snap-type:none}
.pr-card{flex:none;grid-column:1/-1;scroll-snap-align:none}
.pr-card:nth-child(2){grid-column:3/-1}
.pr-card:nth-child(3){grid-column:1/11}
.pr-card figure{gap:10px;grid-template-columns:minmax(0,1fr)}
.pr-media{border-radius:8px;box-shadow:none}
.pr-tag,.pr-dots{display:none}
.pr-card figcaption{display:block;max-width:42ch;padding:9px 0 0;border-top:1px solid rgba(255,255,255,.16);font-size:.92rem;line-height:1.45;color:var(--muted)}
.pr-card figcaption b{margin-right:6px;font-size:1rem;color:var(--ink)}
.pr-d{display:inline;font-size:inherit;line-height:inherit}
@media (min-width:900px){
  .pr{padding:var(--fb-s5) 0 var(--fb-s4)}
  .pr-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 40px;align-items:end;margin-bottom:var(--fb-s4)}
  .pr-head .eyebrow{grid-column:1/-1;margin-bottom:var(--fb-s1)}
  .pr-head h2{max-width:none;font-size:clamp(2.2rem,3.6vw,3.2rem)}
  .pr-sub{justify-self:end;max-width:32ch;margin:0 0 6px;font-size:1.02rem}
  .pr-list{grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 24px;max-width:1120px;margin:0 auto;padding:0 var(--gutter-r) 0 var(--gutter)}
  .pr-card:nth-child(1){grid-column:1/8}
  .pr-card:nth-child(2){grid-column:8/13;align-self:end}
  .pr-card:nth-child(3){grid-column:4/10}
}

/* ---- Modulo: intestazione a sinistra, i due «ricevi» come righe con filetto, prezzo come nota ---- */
.ask-head{gap:var(--fb-s1);text-align:left}
.ask-head h2{max-width:14ch;font-size:clamp(1.7rem,6.8vw,2.4rem);line-height:1.05}
.ask-head>p{max-width:34ch}
.gets{gap:0;margin-top:var(--fb-s2);border-top:1px solid var(--line)}
.gets li{display:grid;grid-template-columns:1.4rem 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.45}
.gi{width:auto;height:auto;margin:0;border-radius:0;background:none;color:var(--muted);font-size:.9rem;font-weight:600;line-height:1.6;font-variant-numeric:tabular-nums}
.gi::after{content:"."}
.price{margin-top:var(--fb-s2);padding:0;border-radius:0;background:none;font-size:.95rem;color:var(--muted)}

/* ---- Domande: sul telefono i fumetti stanno direttamente sul nero, titolo a sinistra ---- */
.fears{padding:var(--fb-s4) 0}
.fears::before{display:none}
.fears .head{gap:var(--fb-s1);max-width:none;margin:0 0 var(--fb-s3);text-align:left}
.fears .head h2{max-width:16ch;font-size:clamp(1.55rem,6vw,2.3rem);line-height:1.08}
.chat{max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;gap:10px}
.chat-top{padding:0 0 12px;border-bottom:1px solid rgba(255,255,255,.14)}
@media (min-width:900px){
  .fears{padding:var(--fb-s5) 0}
  .fears .wrap{align-items:start;gap:clamp(40px,7vw,120px)}
  .fears .head{margin-top:24px}
  .fears .head h2{max-width:none;font-size:clamp(2rem,3.4vw,2.9rem)}
  /* sul computer la chat resta dentro la sagoma di telefono */
  .chat{padding:22px 16px 28px;border-radius:44px;background:linear-gradient(180deg,#1F1F22,#151517);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 10px #1A1A1C,0 0 0 11px rgba(255,255,255,.14),0 60px 120px -40px rgba(0,0,0,.9)}
  .chat-top{padding:2px 2px 12px}
}

/* ---- Chiusura e «Chi siamo»: niente pannello grigio; un filetto, la frase grande a sinistra, i numeri in righe ---- */
.final{padding-top:var(--fb-s5)}
.final-in{gap:12px}
.final-about{gap:var(--fb-s2);max-width:none;margin:var(--fb-s5) var(--gutter-r) 0 var(--gutter);padding:var(--fb-s3) 0 0;border-top:1px solid var(--on-band-line);border-radius:0;background:none;text-align:left}
.final-about .eyebrow{margin:0}
.fa-t{max-width:36ch;font-size:1rem;line-height:1.5}
.fa-t b{max-width:20ch;margin-bottom:10px;font-size:clamp(1.35rem,5.4vw,1.8rem);line-height:1.12}
.final .nums{grid-template-columns:1fr;gap:10px;margin-top:var(--fb-s2)}
.final .nums div{display:grid;grid-template-columns:7.2rem 1fr;align-items:center;gap:14px;text-align:left}
.final .nums b{padding:9px 6px 8px;font-size:1.5rem;text-align:center}
.final .nums div>span{margin:0;font-size:.95rem;line-height:1.35;color:#5F6066}
@media (min-width:900px){
  .final-about{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:16px 64px;align-items:start;max-width:1120px;margin-left:auto;margin-right:auto;padding:var(--fb-s4) var(--gutter-r) 0 var(--gutter)}
  .final-about .eyebrow{grid-column:1/-1}
  .fa-t{grid-column:1;max-width:40ch}
  .fa-t b{max-width:none;font-size:clamp(1.6rem,2.4vw,2.1rem)}
  .final .nums{grid-column:2;grid-row:2;grid-template-columns:1fr;gap:8px;margin-top:4px}
  .final .nums div{grid-template-columns:6.5rem 1fr}
}

/* ---- Piè di pagina: a sinistra, niente pillole, link sottolineati ---- */
footer{padding-top:var(--fb-s4);border-top:0}
footer .wrap{justify-items:start;gap:4px;max-width:1120px;text-align:left}
.f-logo{margin:0 0 var(--fb-s3)}
footer .wrap>span{font-size:.86rem;line-height:1.5}
.f-tel{margin-top:var(--fb-s2);padding:0;border:0;border-radius:0;font-size:.95rem;font-weight:500;color:var(--on-band-muted)}
.f-tel b{text-decoration:underline;text-underline-offset:3px}
footer nav{margin-top:var(--fb-s2);gap:4px 18px}
footer nav a{min-height:36px;padding:0;border-radius:0;background:none;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.f-tel:hover{transform:none;color:var(--on-band)}}
@media (min-width:900px){
  footer{padding-top:var(--fb-s5)}
  footer .wrap{grid-template-columns:auto minmax(0,1fr) auto;gap:6px 48px;align-items:start}
  .f-logo{grid-row:1/4;margin:0}
  footer nav{grid-column:3;grid-row:1;margin:0}
  .f-tel{grid-column:3;grid-row:2;margin:0}
}
.gi{display:block;white-space:nowrap}

/* ==========================================================================
   Intro video nel primo schermo: il video della vetrina che si accende gira dentro il riquadro prima/dopo
   finché dura (5,6 s), poi sfuma e lascia la tendina. Sopra il canvas (z 1), sotto la linea della tendina (z 3).
   ========================================================================== */
.ba-video{position:absolute;inset:0;z-index:2;display:none;width:100%;height:100%;object-fit:cover;pointer-events:none;background:transparent;opacity:1;transition:opacity .5s ease}
.ba.intro .ba-video,.ba.vid-end .ba-video{display:block}
.ba.vid-end .ba-video{opacity:0}
.ba.intro:has(.ba-video) .scene{display:none} /* solo con il video d'apertura: la scena su canvas gira invece proprio durante «intro» */
/* un piccolo invito, in basso a destra, finché gira il video: tocca per saltare */
.ba-skip{position:absolute;right:10px;bottom:10px;z-index:4;padding:6px 10px;border-radius:999px;background:rgba(11,11,12,.55);color:#FFFFFF;font-size:.74rem;font-weight:600;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .4s}
.ba.intro .ba-skip.show{opacity:1}
@media (prefers-reduced-motion:reduce){.ba-video,.ba-skip{display:none!important}}

/* ==========================================================================
   Formati dei prodotti (30 ottobre 2026): sotto ogni didascalia una riga da scheda tecnica
   («Schermo da esterno · 192 × 96 cm · passo 4 mm»), più piccola e con cifre tabellari.
   Misure indicative scelte guardando i video: vedi DA MODIFICARE in index.html.
   ========================================================================== */
.pr-f{display:block;margin-top:7px;font-size:.8rem;line-height:1.35;letter-spacing:.01em;color:var(--muted);opacity:.82;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:359px){.pr-f{white-space:normal}}

/* ==========================================================================
   Quarta insegna vera (caffetteria, 30 ottobre 2026): la composizione sfalsata continua.
   Telefono: full, destra, sinistra, destra (rientro diverso dalla seconda).
   Computer: la terza scende a sinistra con un rientro di una colonna, la quarta a destra, più in basso.
   ========================================================================== */
.pr-card:nth-child(4){grid-column:2/-1}
.rvon .pr-card:nth-child(4).seen{transition-delay:.15s}
@media (min-width:900px){
  .pr-card:nth-child(4){grid-column:8/13;margin-top:64px}
}
/* 6/11: tolto il tabacchino, le schede sono di nuovo tre (ristorante, pizzeria, caffetteria). La terza torna al centro
   (4/10, la regola sopra nel blocco «Prodotti»): la vecchia regola dei quattro video la spostava a sinistra (2/8). */

/* ==========================================================================
   Insegne vere: tasto ▶ quando il browser nega la partenza automatica dei video (fable.js, blocco «Prodotti»).
   Compare solo con la classe .blocked sulla scheda; il tocco va al video (pointer-events: none qui).
   ========================================================================== */
.pr-play{position:absolute;inset:0;z-index:2;display:none;place-items:center;pointer-events:none}
.pr-card.blocked .pr-play{display:grid}
.pr-play i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:rgba(11,11,12,.58);color:#FFFFFF;box-shadow:0 0 0 1px rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pr-play svg{margin-left:3px}